feat(webui): add initial webui with websocket chat flow

2026-04-18 18:51:53 +00:00
parent 6bfb75ed03
commit 9ed3031a42
76 changed files with 7088 additions and 38 deletions
@@ -0,0 +1,52 @@
+import { PanelLeftOpen } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ThreadHeaderProps {
+  title: string;
+  onToggleSidebar: () => void;
+  onGoHome: () => void;
+  hideSidebarToggleOnDesktop?: boolean;
+}
+
+export function ThreadHeader({
+  title,
+  onToggleSidebar,
+  onGoHome,
+  hideSidebarToggleOnDesktop = false,
+}: ThreadHeaderProps) {
+  return (
+    <div className="relative z-10 flex items-center justify-between gap-3 px-3 py-2">
+      <div className="relative flex min-w-0 items-center gap-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Toggle sidebar"
+          onClick={onToggleSidebar}
+          className={cn(
+            "h-7 w-7 rounded-md text-muted-foreground hover:bg-accent/35 hover:text-foreground",
+            hideSidebarToggleOnDesktop && "lg:pointer-events-none lg:opacity-0",
+          )}
+        >
+          <PanelLeftOpen className="h-3.5 w-3.5" />
+        </Button>
+        <button
+          type="button"
+          onClick={onGoHome}
+          className="flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1 text-[12px] font-medium text-muted-foreground transition-colors hover:bg-accent/35 hover:text-foreground"
+        >
+          <img
+            src="/brand/nanobot_icon.png"
+            alt=""
+            className="h-4 w-4 rounded-[5px] opacity-85"
+            aria-hidden
+          />
+          <span className="max-w-[min(60vw,32rem)] truncate">{title}</span>
+        </button>
+      </div>
+
+      <div aria-hidden className="pointer-events-none absolute inset-x-0 top-full h-4" />
+    </div>
+  );
+}