feat: Better sidebar

2025-03-06 15:58:02 -08:00
parent 93544680c6
commit 06062c361d
5 changed files with 132 additions and 34 deletions
--- a/src/components/thread/history/index.tsx
+++ b/src/components/thread/history/index.tsx
@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { useThreads } from "@/providers/Thread";
 import { Thread } from "@langchain/langgraph-sdk";
 import { useEffect } from "react";
+
 import { getContentString } from "../utils";
 import { useQueryParam, StringParam, BooleanParam } from "use-query-params";
 import {
@@ -11,6 +12,9 @@ import {
  SheetTitle,
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { PanelRightOpen } from "lucide-react";
+import { useMediaQuery } from "@/hooks/useMediaQuery";

 function ThreadList({
  threads,
@@ -22,7 +26,7 @@ function ThreadList({
  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);

  return (
-    <div className="h-full flex flex-col gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+    <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
      {threads.map((t) => {
        let itemText = t.thread_id;
        if (
@@ -36,10 +40,10 @@ function ThreadList({
          itemText = getContentString(firstMessage.content);
        }
        return (
-          <div key={t.thread_id} className="w-full">
+          <div key={t.thread_id} className="w-full px-1">
            <Button
              variant="ghost"
-              className="truncate text-left items-start justify-start w-[264px]"
+              className="text-left items-start justify-start font-normal w-[280px]"
              onClick={(e) => {
                e.preventDefault();
                onThreadClick?.(t.thread_id);
@@ -47,7 +51,7 @@ function ThreadList({
                setThreadId(t.thread_id);
              }}
            >
-              {itemText}
+              <p className="truncate text-ellipsis">{itemText}</p>
            </Button>
          </div>
        );
@@ -58,15 +62,16 @@ function ThreadList({

 function ThreadHistoryLoading() {
  return (
-    <div className="h-full flex flex-col gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+    <div className="h-full flex flex-col w-full gap-2 items-start justify-start overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
      {Array.from({ length: 30 }).map((_, i) => (
-        <Skeleton key={`skeleton-${i}`} className="w-[264px] h-10" />
+        <Skeleton key={`skeleton-${i}`} className="w-[280px] h-10" />
      ))}
    </div>
  );
 }

 export default function ThreadHistory() {
+  const isLargeScreen = useMediaQuery("(min-width: 1024px)");
  const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
    "chatHistoryOpen",
    BooleanParam,
@@ -86,25 +91,44 @@ export default function ThreadHistory() {

  return (
    <>
-      <div className="hidden lg:flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 px-2 py-4 shadow-inner-right">
-        <h1 className="text-2xl font-medium pl-4">Thread History</h1>
+      <div className="hidden lg:flex flex-col border-r-[1px] border-slate-300 items-start justify-start gap-6 h-screen w-[300px] shrink-0 shadow-inner-right">
+        <div className="flex items-center justify-between w-full p-2">
+          <Button
+            className="hover:bg-gray-100"
+            variant="ghost"
+            onClick={() => setChatHistoryOpen((p) => !p)}
+          >
+            <PanelRightOpen />
+          </Button>
+          <h1 className="text-xl font-semibold tracking-tight">
+            Thread History
+          </h1>
+        </div>
        {threadsLoading ? (
          <ThreadHistoryLoading />
        ) : (
          <ThreadList threads={threads} />
        )}
      </div>
-      <Sheet open={!!chatHistoryOpen} onOpenChange={setChatHistoryOpen}>
-        <SheetContent side="left" className="lg:hidden flex">
-          <SheetHeader>
-            <SheetTitle>Thread History</SheetTitle>
-          </SheetHeader>
-          <ThreadList
-            threads={threads}
-            onThreadClick={() => setChatHistoryOpen((o) => !o)}
-          />
-        </SheetContent>
-      </Sheet>
+      <div className="lg:hidden">
+        <Sheet
+          open={!!chatHistoryOpen && !isLargeScreen}
+          onOpenChange={(open) => {
+            if (isLargeScreen) return;
+            setChatHistoryOpen(open);
+          }}
+        >
+          <SheetContent side="left" className="lg:hidden flex">
+            <SheetHeader>
+              <SheetTitle>Thread History</SheetTitle>
+            </SheetHeader>
+            <ThreadList
+              threads={threads}
+              onThreadClick={() => setChatHistoryOpen((o) => !o)}
+            />
+          </SheetContent>
+        </Sheet>
+      </div>
    </>
  );
 }
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from "uuid";
 import { ReactNode, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { useStreamContext } from "@/providers/Stream";
 import { useState, FormEvent } from "react";
@@ -24,6 +25,7 @@ import { BooleanParam, StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import ThreadHistory from "./history";
 import { toast } from "sonner";
+import { useMediaQuery } from "@/hooks/useMediaQuery";

 function StickyToBottomContent(props: {
  content: ReactNode;
@@ -65,12 +67,13 @@ function ScrollToBottom(props: { className?: string }) {

 export function Thread() {
  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-  const [_, setChatHistoryOpen] = useQueryParam(
+  const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
    "chatHistoryOpen",
    BooleanParam,
  );
  const [input, setInput] = useState("");
  const [firstTokenReceived, setFirstTokenReceived] = useState(false);
+  const isLargeScreen = useMediaQuery("(min-width: 1024px)");

  const stream = useStreamContext();
  const messages = stream.messages;
@@ -166,16 +169,72 @@ export function Thread() {

  return (
    <div className="flex w-full h-screen overflow-hidden">
-      <ThreadHistory />
-      <div
+      <div className="relative lg:flex hidden">
+        <motion.div
+          className="absolute h-full border-r bg-white overflow-hidden z-20"
+          style={{ width: 300 }}
+          animate={
+            isLargeScreen
+              ? { x: chatHistoryOpen ? 0 : -300 }
+              : { x: chatHistoryOpen ? 0 : -300 }
+          }
+          initial={{ x: -300 }}
+          transition={
+            isLargeScreen
+              ? { type: "spring", stiffness: 300, damping: 30 }
+              : { duration: 0 }
+          }
+        >
+          <div className="relative h-full" style={{ width: 300 }}>
+            <ThreadHistory />
+          </div>
+        </motion.div>
+      </div>
+      <motion.div
        className={cn(
-          "flex-1 flex flex-col min-w-0 overflow-hidden",
+          "flex-1 flex flex-col min-w-0 overflow-hidden relative",
          !chatStarted && "grid-rows-[1fr]",
        )}
+        layout={isLargeScreen}
+        animate={{
+          marginLeft: chatHistoryOpen ? (isLargeScreen ? 300 : 0) : 0,
+          width: chatHistoryOpen
+            ? isLargeScreen
+              ? "calc(100% - 300px)"
+              : "100%"
+            : "100%",
+        }}
+        transition={
+          isLargeScreen
+            ? { type: "spring", stiffness: 300, damping: 30 }
+            : { duration: 0 }
+        }
      >
+        {!chatStarted && (
+          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
+            {(!chatHistoryOpen || !isLargeScreen) && (
+              <Button
+                className="hover:bg-gray-100"
+                variant="ghost"
+                onClick={() => setChatHistoryOpen((p) => !p)}
+              >
+                <PanelRightOpen />
+              </Button>
+            )}
+          </div>
+        )}
        {chatStarted && (
          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <div className="flex gap-2 items-center justify-start">
+            <div className="flex items-center justify-start gap-2">
+              {(!chatHistoryOpen || !isLargeScreen) && (
+                <Button
+                  className="hover:bg-gray-100"
+                  variant="ghost"
+                  onClick={() => setChatHistoryOpen((p) => !p)}
+                >
+                  <PanelRightOpen />
+                </Button>
+              )}
              <button
                className="flex gap-2 items-center cursor-pointer"
                onClick={() => setThreadId(null)}
@@ -185,13 +244,6 @@ export function Thread() {
                  LangGraph Chat
                </span>
              </button>
-              <Button
-                className="flex lg:hidden"
-                variant="ghost"
-                onClick={() => setChatHistoryOpen((p) => !p)}
-              >
-                <PanelRightOpen />
-              </Button>
            </div>

            <TooltipIconButton
@@ -254,7 +306,7 @@ export function Thread() {

                <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />

-                <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl">
+                <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl relative z-10">
                  <form
                    onSubmit={handleSubmit}
                    className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
@@ -288,7 +340,7 @@ export function Thread() {
            }
          />
        </StickToBottom>
-      </div>
+      </motion.div>
    </div>
  );
 }
--- a/src/hooks/useMediaQuery.tsx
+++ b/src/hooks/useMediaQuery.tsx
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}
--- a/src/index.css
+++ b/src/index.css
@@ -118,9 +118,11 @@
  * {
    @apply border-border outline-ring/50;
  }
+
  body {
    @apply bg-background text-foreground;
  }
+
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx,js,jsx}",
+    "./agent/**/*.{ts,tsx,js,jsx}",
+  ],
  theme: {
    extend: {
      borderRadius: {