mobile support

src/components/thread/history/index.tsx

@@ -3,11 +3,65 @@ import { useThreads } from "@/hooks/useThreads";
 import { Thread } from "@langchain/langgraph-sdk";
 import { useEffect, useState } from "react";
 import { getContentString } from "../utils";
-import { useQueryParam, StringParam } from "use-query-params";
+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 [threadId, setThreadId] = useQueryParam("threadId", StringParam);
+  const [chatHistoryOpen, setChatHistoryOpen] = useQueryParam(
+    "chatHistoryOpen",
+    BooleanParam,
+  );
+
   const { getThreads } = useThreads();
 
   useEffect(() => {
@@ -16,39 +70,21 @@ export default function ThreadHistory() {
 
   return (
     <>
-      <div className="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">
+      <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="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">
+        <ThreadList threads={threads} />
-          {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();
-                    if (t.thread_id === threadId) return;
-                    setThreadId(t.thread_id);
-                  }}
-                >
-                  {itemText}
-                </Button>
-              </div>
-            );
-          })}
-        </div>
       </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,8 +14,13 @@ 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 {
-import { StringParam, useQueryParam } from "use-query-params";
+  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";
 
@@ -59,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);
 
@@ -133,15 +142,24 @@ export function Thread() {
       >
         {threadId && (
           <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <button
+            <div className="flex gap-2 items-center justify-start">
-              className="flex gap-2 items-center cursor-pointer"
+              <button
-              onClick={() => setThreadId(null)}
+                className="flex gap-2 items-center cursor-pointer"
-            >
+                onClick={() => setThreadId(null)}
-              <LangGraphLogoSVG width={32} height={32} />
+              >
-              <span className="text-xl font-semibold tracking-tight">
+                <LangGraphLogoSVG width={32} height={32} />
-                LangGraph Chat
+                <span className="text-xl font-semibold tracking-tight">
-              </span>
+                  LangGraph Chat
-            </button>
+                </span>
+              </button>
+              <Button
+                className="flex lg:hidden"
+                variant="ghost"
+                onClick={() => setChatHistoryOpen((p) => !p)}
+              >
+                <PanelRightOpen />
+              </Button>
+            </div>
 
             <TooltipIconButton
               size="lg"