diff --git a/README.md b/README.md index 24748945..20d4055d 100644 --- a/README.md +++ b/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, image 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 diff --git a/SETUP-GUIDE.md b/SETUP-GUIDE.md index 46a2e1da..c6de0e14 100644 --- a/SETUP-GUIDE.md +++ b/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 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({ {/* TODO: fade out content on the right side, the fade goes away when the user scrolls */} -
+
{/* Loading state */} {chat.answer.sources.length > 0 || (chat.answer.parts.length === 0 && ( @@ -415,7 +415,9 @@ function ChatWindow({ {source.type} {source.numChunks > 1 && ( - {source.numChunks} chunks + + {source.numChunks} chunks + )}
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, React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - -
{children}
- -)); +>(({ className, children, ...props }, ref) => { + const containerRef = useRef(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 ( + +
+ {children} +
+ {/* Fade-out effect with inline styles */} +
+ + ); +}); AccordionContent.displayName = AccordionPrimitive.Content.displayName;