vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-17 12:20:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Scroll bar added

Browse source
This commit is contained in:
fyzanshaik 2024-08-05 23:28:52 +05:30
parent 93045c346b
commit c1961a8282
3 changed files with 124 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

39
apps/web/app/(dash)/chat/chatWindow.tsx
View file

@ -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">
@ -461,6 +463,37 @@ function ChatWindow({
</div>
)}
</AccordionContent>
{/* <AccordionContent
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 flex gap-3">
{mockRelatedMemories.map((source, idx) => (
<Link
href={source.source}
key={idx}
className="w-[350px] shrink-0 p-4 gap-2 rounded-2xl flex flex-col bg-secondary"
target="_blank"
rel="noopener noreferrer"
>
<div className="flex justify-between text-foreground-menu text-sm">
<span>{source.type}</span>
{source.numChunks > 1 && (
<span>{source.numChunks} chunks</span>
)}
</div>
<div className="text-base">
{source.title}
</div>
<div className="text-xs line-clamp-2">
{source.content.length > 100
? source.content.slice(0, 100) + "..."
: source.content}
</div>
</Link>
))}
</div>
</AccordionContent> */}
</AccordionItem>
</Accordion>
</div>

21
apps/web/tailwind.config.ts
View file

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

78
packages/ui/shadcn/accordion.tsx
View file

@ -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;