mobile support

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,15 +142,24 @@ export function Thread() {
       >
         {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"