mobile support

src/components/thread/history/index.tsx

@@ -3,21 +3,24 @@ 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";
 
-export default function ThreadHistory() {
-  const [threads, setThreads] = useState<Thread[]>([]);
+function ThreadList({
+  threads,
+  onThreadClick,
+}: {
+  threads: Thread[];
+  onThreadClick?: (threadId: string) => void;
+}) {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-  const { getThreads } = useThreads();
-
-  useEffect(() => {
-    getThreads().then(setThreads).catch(console.error);
-  }, []);
 
   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">
-        <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">
       {threads.map((t) => {
         let itemText = t.thread_id;
@@ -38,6 +41,7 @@ export default function ThreadHistory() {
               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);
               }}
@@ -48,7 +52,39 @@ export default function ThreadHistory() {
         );
       })}
     </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,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 { 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";
 
@@ -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,6 +142,7 @@ export function Thread() {
       >
         {threadId && (
           <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">
               <button
                 className="flex gap-2 items-center cursor-pointer"
                 onClick={() => setThreadId(null)}
@@ -142,6 +152,14 @@ export function Thread() {
                   LangGraph Chat
                 </span>
               </button>
+              <Button
+                className="flex lg:hidden"
+                variant="ghost"
+                onClick={() => setChatHistoryOpen((p) => !p)}
+              >
+                <PanelRightOpen />
+              </Button>
+            </div>
 
             <TooltipIconButton
               size="lg"