Merge branch 'main' of github.com:supermemoryai/supermemory

README.md

@@ -21,7 +21,7 @@ Interested in helping build the best second brain for everyone? Join the discord
 
 ## 👀 What is this?
 
-Build your own second brain with supermemory. It's a ChatGPT for your bookmarks. Import tweets or save websites and content using the [chrome extension](https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc?hl=en-GB&authuser=0)
+Build your own second brain with supermemory. It's a ChatGPT for your bookmarks. Import tweets or save websites and content using the [Chrome extension](https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc?hl=en-GB&authuser=0)
 
 Well, here's the thing - me and @yxshv save a _lot_ of content on the internet.
 
@@ -66,7 +66,7 @@ To use the chrome extension,
    <img width="480" alt="image" src="https://github.com/MaheshtheDev/supermemory/assets/38828053/2efb06a5-912a-48e7-ad1c-d527e7ffbc94">
 
 3. Click on save button and give it 10 - 20 secs, where supermemory extension will sync all your twitter bookmarks to supermemory.ai
-4. Volia! Now your second brain has all your twitter bookmarks.
+4. Voila! Now your second brain has all your twitter bookmarks.
 
 ## 👨‍💻 The Stack
 

SETUP-GUIDE.md

@@ -1,6 +1,6 @@
 # Self Hosting Guide
 
-This guide will help you set up your own instance of Supermemory. This is neccessary if you want to contribute to the project or if you want to self host the project. You can read more about the stack [here](https://github.com/supermemoryai/supermemory/?tab=readme-ov-file#-the-stack).
+This guide will help you set up your own instance of Supermemory. This is necessary if you want to contribute to the project or if you want to self host the project. You can read more about the stack [here](https://github.com/supermemoryai/supermemory/?tab=readme-ov-file#-the-stack).
 
 ## Prerequisites
 

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">

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 })],
+};

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;