Merge pull request #221 from fyzanshaik/feature/memory-scrollbar

Scroll Bar for related memories inside chat window

3 files changed, 93 insertions, 14 deletions

diff --git a/apps/web/app/(dash)/chat/chatWindow.tsx b/apps/web/app/(dash)/chat/chatWindow.tsx
index a691c0ce..98377f08 100644
--- a/apps/web/app/(dash)/chat/chatWindow.tsx
+++ b/apps/web/app/(dash)/chat/chatWindow.tsx
@@ -384,10 +384,10 @@ function ChatWindow({
 														</AccordionTrigger>
 														{/* TODO: fade out content on the right side, the fade goes away when the user scrolls */}
 														<AccordionContent
-															className="flex flex-col no-scrollbar overflow-auto gap-4 relative max-w-3xl no-scrollbar"
+															className="flex flex-col gap-4 relative max-w-3xl overflow-x-auto  scrollbar-thin scrollbar-thumb-scrollbar-thumb scrollbar-track-scrollbar-track scrollbar-thumb-rounded"
 															defaultChecked
 														>
-															<div className="w-full no-scrollbar flex gap-4">
+															<div className="w-full flex gap-3">
 																{/* Loading state */}
 																{chat.answer.sources.length > 0 ||
 																	(chat.answer.parts.length === 0 && (
@@ -415,7 +415,9 @@ function ChatWindow({
 																			<span>{source.type}</span>
 
 																			{source.numChunks > 1 && (
-																				<span>{source.numChunks} chunks</span>
+																				<span className="font-bold">
+																					{source.numChunks} chunks
+																				</span>
 																			)}
 																		</div>
 																		<div className="text-base">
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index cf1434cf..2a05cd74 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1 +1,20 @@
-module.exports = require("@repo/tailwind-config/tailwind.config");
+// Import the existing Tailwind config from your shared repository
+const sharedConfig = require("@repo/tailwind-config/tailwind.config");
+
+module.exports = {
+	presets: [sharedConfig],
+	theme: {
+		extend: {
+			colors: {
+				scrollbar: {
+					// thumb: "#d1d5db",
+					// thumbHover: "#1D4ED8",
+					thumb: "#303c4c",
+					thumbHover: "#2E3A48",
+					track: "#1F2937",
+				},
+			},
+		},
+	},
+	plugins: [require("tailwind-scrollbar")({ nocompatible: true })],
+};
diff --git a/packages/ui/shadcn/accordion.tsx b/packages/ui/shadcn/accordion.tsx
index 1421c4b2..1da5893c 100644
--- a/packages/ui/shadcn/accordion.tsx
+++ b/packages/ui/shadcn/accordion.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import * as React from "react";
+import React, { useRef, useEffect, useState } from "react";
+
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
@@ -40,15 +41,72 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Content
-		ref={ref}
-		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-		{...props}
-	>
-		<div className={cn("pb-4 pt-0", className)}>{children}</div>
-	</AccordionPrimitive.Content>
-));
+>(({ className, children, ...props }, ref) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fadeWidth, setFadeWidth] = useState(0);
+
+	useEffect(() => {
+		const handleWheel = (event: WheelEvent) => {
+			if (containerRef.current) {
+				event.preventDefault();
+				if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+					containerRef.current.scrollLeft += event.deltaX;
+				} else {
+					containerRef.current.scrollLeft += event.deltaY;
+				}
+			}
+		};
+
+		const handleScroll = () => {
+			if (containerRef.current) {
+				const { scrollWidth, clientWidth, scrollLeft } = containerRef.current;
+				const calculatedFadeWidth = Math.min(
+					8,
+					scrollWidth - clientWidth - scrollLeft,
+				);
+				setFadeWidth(calculatedFadeWidth);
+			}
+		};
+
+		const currentRef = containerRef.current;
+		currentRef?.addEventListener("wheel", handleWheel);
+		currentRef?.addEventListener("scroll", handleScroll);
+		handleScroll();
+
+		return () => {
+			currentRef?.removeEventListener("wheel", handleWheel);
+			currentRef?.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	const fadeStyle: React.CSSProperties = {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		width: `${fadeWidth}px`,
+		height: "85%",
+		pointerEvents: "none",
+		background: "linear-gradient(to left, rgb(46, 58, 72), transparent)",
+	};
+
+	return (
+		<AccordionPrimitive.Content
+			ref={ref}
+			className="relative overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+			{...props}
+		>
+			<div
+				ref={containerRef}
+				className={cn("pb-4 pt-0", className)}
+				style={{ position: "relative" }}
+			>
+				{children}
+			</div>
+			{/* Fade-out effect with inline styles */}
+			<div style={fadeStyle}></div>
+		</AccordionPrimitive.Content>
+	);
+});
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;