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

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,
+};