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,124 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowUp } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ComposerProps {
+  onSend: (content: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Visually collapse the outer padding when embedded inside a welcome screen. */
+  compact?: boolean;
+}
+
+/**
+ * Rounded, shadowed composer with an embedded send button — modeled after the
+ * agent-chat-ui input: a single surface that looks like one interactive unit
+ * rather than a textarea + button pair.
+ */
+export function Composer({
+  onSend,
+  disabled,
+  placeholder = "Type your message…",
+  compact = false,
+}: ComposerProps) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Autofocus on mount — coming back to a chat, switching sessions, or
+  // opening the welcome screen should always land the caret in the box.
+  useEffect(() => {
+    if (disabled) return;
+    const el = textareaRef.current;
+    if (!el) return;
+    // Defer so layout settles first (important during enter animations).
+    const id = requestAnimationFrame(() => el.focus());
+    return () => cancelAnimationFrame(id);
+  }, [disabled]);
+
+  const submit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.style.height = "auto";
+        el.focus();
+      }
+    });
+  }, [disabled, onSend, value]);
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  const onInput: React.FormEventHandler<HTMLTextAreaElement> = (e) => {
+    const el = e.currentTarget;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 260)}px`;
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+      className={cn(
+        "w-full",
+        compact ? "px-0" : "bg-background/95 px-4 pb-4 pt-2 backdrop-blur",
+      )}
+    >
+      <div
+        className={cn(
+          "relative mx-auto flex w-full max-w-[64rem] flex-col overflow-hidden rounded-3xl",
+          "border bg-muted/60 shadow-sm transition-all duration-200",
+          "focus-within:bg-muted focus-within:shadow-md focus-within:ring-1 focus-within:ring-foreground/10",
+          disabled && "opacity-60",
+        )}
+      >
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onInput={onInput}
+          onKeyDown={onKeyDown}
+          rows={1}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label="Message input"
+          className={cn(
+            "min-h-[56px] w-full resize-none bg-transparent px-5 pt-4 pb-2 text-sm",
+            "placeholder:text-muted-foreground",
+            "focus:outline-none focus-visible:outline-none",
+            "disabled:cursor-not-allowed",
+          )}
+        />
+        <div className="flex items-center justify-between gap-2 px-3 pb-2">
+          <span className="hidden select-none text-[11px] text-muted-foreground/70 sm:inline">
+            Enter to send · Shift+Enter for newline
+          </span>
+          <span className="sm:hidden" aria-hidden />
+          <Button
+            type="submit"
+            size="icon"
+            disabled={disabled || !value.trim()}
+            aria-label="Send message"
+            className={cn(
+              "h-9 w-9 rounded-full shadow-sm transition-transform",
+              value.trim() && !disabled && "hover:scale-[1.03] active:scale-95",
+            )}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}