Merge pull request #12 from langchain-ai/brace/thread-history

feat: Add thread history sheet

src/components/thread/history/index.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button";
+import { useThreads } from "@/hooks/useThreads";
+import { Thread } from "@langchain/langgraph-sdk";
+import { useEffect, useState } from "react";
+import { getContentString } from "../utils";
+import { useQueryParam, StringParam, BooleanParam } from "use-query-params";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+
+function ThreadList({
+  threads,
+  onThreadClick,
+}: {
+  threads: Thread[];
+  onThreadClick?: (threadId: string) => void;
+}) {
+  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
+
+  return (
+    <div className="h-full overflow-y-scroll flex flex-col gap-2 items-start justify-start [&::-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 (
+          typeof t.values === "object" &&
+          t.values &&
+          "messages" in t.values &&
+          Array.isArray(t.values.messages) &&
+          t.values.messages?.length > 0
+        ) {
+          const firstMessage = t.values.messages[0];
+          itemText = getContentString(firstMessage.content);
+        }
+        return (
+          <div key={t.thread_id} className="w-full">
+            <Button
+              variant="ghost"
+              className="truncate text-left items-start justify-start w-[264px]"
+              onClick={(e) => {
+                e.preventDefault();
+                onThreadClick?.(t.thread_id);
+                if (t.thread_id === threadId) return;
+                setThreadId(t.thread_id);
+              }}
+            >
+              {itemText}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function ThreadHistory() {
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
+    "chatHistoryOpen",
+    BooleanParam,
+  );
+
+  const { getThreads } = useThreads();
+
+  useEffect(() => {
+    getThreads().then(setThreads).catch(console.error);
+  }, []);
+
+  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>
+        <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>
+    </>
+  );
+}

src/components/thread/index.tsx

@@ -14,9 +14,15 @@ import {
 } from "@/lib/ensure-tool-responses";
 import { LangGraphLogoSVG } from "../icons/langgraph";
 import { TooltipIconButton } from "./tooltip-icon-button";
-import { ArrowDown, LoaderCircle, SquarePen } from "lucide-react";
-import { StringParam, useQueryParam } from "use-query-params";
+import {
+  ArrowDown,
+  LoaderCircle,
+  PanelRightOpen,
+  SquarePen,
+} from "lucide-react";
+import { BooleanParam, StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import ThreadHistory from "./history";
 
 function StickyToBottomContent(props: {
   content: ReactNode;
@@ -58,6 +64,10 @@ function ScrollToBottom(props: { className?: string }) {
 
 export function Thread() {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
+  const [_, setChatHistoryOpen] = useQueryParam(
+    "chatHistoryOpen",
+    BooleanParam,
+  );
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
 
@@ -122,24 +132,34 @@ export function Thread() {
   };
 
   return (
-    <div className="flex flex-col w-full h-screen overflow-hidden">
+    <div className="flex w-full h-screen overflow-hidden">
+      <ThreadHistory />
       <div
         className={cn(
-          "grow grid grid-rows-[auto_1fr]",
+          "flex-1 flex flex-col min-w-0 overflow-hidden",
           !threadId && "grid-rows-[1fr]",
         )}
       >
         {threadId && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <button
-              className="flex gap-2 items-center cursor-pointer"
-              onClick={() => setThreadId(null)}
-            >
-              <LangGraphLogoSVG width={32} height={32} />
-              <span className="text-xl font-semibold tracking-tight">
-                LangGraph Chat
-              </span>
-            </button>
+            <div className="flex gap-2 items-center justify-start">
+              <button
+                className="flex gap-2 items-center cursor-pointer"
+                onClick={() => setThreadId(null)}
+              >
+                <LangGraphLogoSVG width={32} height={32} />
+                <span className="text-xl font-semibold tracking-tight">
+                  LangGraph Chat
+                </span>
+              </button>
+              <Button
+                className="flex lg:hidden"
+                variant="ghost"
+                onClick={() => setChatHistoryOpen((p) => !p)}
+              >
+                <PanelRightOpen />
+              </Button>
+            </div>
 
             <TooltipIconButton
               size="lg"
@@ -155,10 +175,10 @@ export function Thread() {
           </div>
         )}
 
-        <StickToBottom className="relative">
+        <StickToBottom className="relative flex-1 overflow-hidden">
           <StickyToBottomContent
             className={cn(
-              "absolute inset-0",
+              "absolute inset-0 overflow-auto",
               !threadId && "flex flex-col items-stretch mt-[25vh]",
               threadId && "grid grid-rows-[1fr_auto]",
             )}