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

feat: Add thread history sheet

package.json

@@ -22,6 +22,7 @@
     "@langchain/langgraph-sdk": "*",
     "@langchain/openai": "^0.4.4",
     "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
@@ -62,6 +63,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
+    "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "^4.0.6",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",

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

src/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

src/hooks/useThreads.tsx

@@ -0,0 +1,46 @@
+import { validate } from "uuid";
+import { getApiKey } from "@/lib/api-key";
+import { Client, Thread } from "@langchain/langgraph-sdk";
+import { useQueryParam, StringParam } from "use-query-params";
+
+function createClient(apiUrl: string, apiKey: string | undefined) {
+  return new Client({
+    apiKey,
+    apiUrl,
+  });
+}
+
+function getThreadSearchMetadata(
+  assistantId: string,
+): { graph_id: string } | { assistant_id: string } {
+  // Assume if the ID is a UUID, it's an assistant ID. Otherwise, it's a graph ID.
+  if (validate(assistantId)) {
+    return { assistant_id: assistantId };
+  } else {
+    return { graph_id: assistantId };
+  }
+}
+
+export function useThreads() {
+  const [apiUrl] = useQueryParam("apiUrl", StringParam);
+  const [assistantId] = useQueryParam("assistantId", StringParam);
+
+  const getThreads = async (): Promise<Thread[]> => {
+    if (!apiUrl || !assistantId) return [];
+
+    const client = createClient(apiUrl, getApiKey() ?? undefined);
+
+    const threads = await client.threads.search({
+      metadata: {
+        ...getThreadSearchMetadata(assistantId),
+      },
+      limit: 100,
+    });
+
+    return threads;
+  };
+
+  return {
+    getThreads,
+  };
+}

src/index.css

@@ -122,3 +122,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .shadow-inner-right {
+    box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
+  }
+
+  .shadow-inner-left {
+    box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
+  }
+}

src/lib/api-key.tsx

@@ -0,0 +1,10 @@
+export function getApiKey(): string | null {
+  try {
+    if (typeof window === "undefined") return null;
+    return window.localStorage.getItem("lg:chat:apiKey") ?? null;
+  } catch {
+    // no-op
+  }
+
+  return null;
+}

src/providers/Stream.tsx

@@ -12,6 +12,7 @@ import { LangGraphLogoSVG } from "@/components/icons/langgraph";
 import { Label } from "@/components/ui/label";
 import { ArrowRight } from "lucide-react";
 import { PasswordInput } from "@/components/ui/password-input";
+import { getApiKey } from "@/lib/api-key";
 
 const useTypedStream = useStream<
   { messages: Message[]; ui?: UIMessage[] },
@@ -59,13 +60,7 @@ export const StreamProvider: React.FC<{ children: ReactNode }> = ({
 }) => {
   const [apiUrl, setApiUrl] = useQueryParam("apiUrl", StringParam);
   const [apiKey, _setApiKey] = useState(() => {
-    try {
-      const key = window.localStorage.getItem("lg:chat:apiKey");
-      return key || null;
-    } catch {
-      // pass
-    }
-    return null;
+    return getApiKey();
   });
 
   const setApiKey = (key: string) => {

tailwind.config.js

@@ -53,5 +53,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar")],
 };