arcie 0.1.5 → 0.1.7

package/templates/web-chat/components/chat.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import * as React from "react";
-import { Zap } from "lucide-react";
 import { InputBar } from "@/components/input-bar";
 import { Message } from "@/components/message";
 import { readArcieStream } from "@/lib/stream";
 import type { UiMessage, UiToolCall } from "@/lib/types";
-import { cn } from "@/lib/utils";
 
 function newId(prefix: string): string {
   return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
@@ -16,10 +14,12 @@ export function Chat() {
   const [messages, setMessages] = React.useState<UiMessage[]>([]);
   const [streaming, setStreaming] = React.useState(false);
   const abortRef = React.useRef<AbortController | undefined>(undefined);
-  const bottomRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    const el = containerRef.current;
+    if (el === null) return;
+    el.scrollTop = el.scrollHeight;
   }, [messages]);
 
   const stop = () => {
@@ -27,170 +27,193 @@ export function Chat() {
     setStreaming(false);
   };
 
-  const send = async (text: string) => {
-    const userMessage: UiMessage = { id: newId("u"), role: "user", content: text };
-    const assistantId = newId("a");
-    const assistantMessage: UiMessage = {
-      id: assistantId,
-      role: "assistant",
-      content: "",
-      streaming: true,
-      toolCalls: [],
-    };
-    setMessages((prev) => [...prev, userMessage, assistantMessage]);
-    setStreaming(true);
-
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    const updateAssistant = (patch: (prev: UiMessage) => UiMessage) => {
-      setMessages((prev) =>
-        prev.map((message) => (message.id === assistantId ? patch(message) : message)),
-      );
-    };
-
-    try {
-      const response = await fetch("/api/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: text }),
-        signal: controller.signal,
-      });
-      if (!response.ok) {
-        const errorBody = await response.text();
-        updateAssistant((m) => ({
-          ...m,
-          content: errorBody || `Server error (${response.status})`,
-          streaming: false,
-          errored: true,
-        }));
-        return;
-      }
+  const clearAll = () => {
+    if (streaming) stop();
+    setMessages([]);
+  };
 
-      const toolIndex = new Map<string, number>();
+  const copy = (text: string) => {
+    void navigator.clipboard.writeText(text);
+  };
 
-      for await (const event of readArcieStream(response)) {
-        switch (event.type) {
-          case "message.appended": {
-            const delta = (event.data as { delta?: string }).delta ?? "";
-            updateAssistant((m) => ({ ...m, content: `${m.content}${delta}` }));
-            break;
-          }
-          case "message.completed": {
-            const text = (event.data as { text?: string | null }).text;
-            updateAssistant((m) => ({
-              ...m,
-              content: typeof text === "string" && text.length > 0 ? text : m.content,
-            }));
-            break;
-          }
-          case "reasoning.appended": {
-            const delta = (event.data as { delta?: string }).delta ?? "";
-            updateAssistant((m) => ({ ...m, reasoning: `${m.reasoning ?? ""}${delta}` }));
-            break;
-          }
-          case "tool.started": {
-            const data = event.data as { name: string; callId: string; input: unknown };
-            const call: UiToolCall = {
-              callId: data.callId,
-              name: data.name,
-              input: data.input,
-              status: "running",
-            };
-            updateAssistant((m) => {
-              const toolCalls = m.toolCalls ?? [];
-              toolIndex.set(data.callId, toolCalls.length);
-              return { ...m, toolCalls: [...toolCalls, call] };
-            });
-            break;
-          }
-          case "tool.completed": {
-            const data = event.data as {
-              callId: string;
-              output: unknown;
-              status: string;
-              error?: { code: string; message: string };
-            };
-            updateAssistant((m) => {
-              const toolCalls = [...(m.toolCalls ?? [])];
-              const idx = toolIndex.get(data.callId);
-              if (idx === undefined || toolCalls[idx] === undefined) return m;
-              const previous = toolCalls[idx];
-              const isApproval =
-                data.status === "pending" && data.error?.code === "needs_approval";
-              toolCalls[idx] = {
-                ...previous,
-                status: isApproval
-                  ? "approval"
-                  : data.status === "completed"
-                    ? "done"
-                    : "error",
-                output: data.output,
-                errorMessage: data.error?.message,
+  const send = React.useCallback(
+    async (text: string, historyOverride?: UiMessage[]) => {
+      const base = historyOverride ?? messages;
+      const userMessage: UiMessage = { id: newId("u"), role: "user", content: text };
+      const assistantId = newId("a");
+      const assistantMessage: UiMessage = {
+        id: assistantId,
+        role: "assistant",
+        content: "",
+        streaming: true,
+        toolCalls: [],
+      };
+      const isRegeneration = historyOverride !== undefined;
+      setMessages((prev) => (isRegeneration ? [...base, assistantMessage] : [...prev, userMessage, assistantMessage]));
+      setStreaming(true);
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const startedAt = Date.now();
+
+      const patchAssistant = (patch: (prev: UiMessage) => UiMessage) => {
+        setMessages((prev) =>
+          prev.map((message) => (message.id === assistantId ? patch(message) : message)),
+        );
+      };
+
+      try {
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: text }),
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          const body = await response.text();
+          patchAssistant((m) => ({
+            ...m,
+            content: body || `Server error (${response.status})`,
+            streaming: false,
+            errored: true,
+          }));
+          return;
+        }
+
+        const toolIndex = new Map<string, number>();
+
+        for await (const event of readArcieStream(response)) {
+          switch (event.type) {
+            case "message.appended": {
+              const delta = (event.data as { delta?: string }).delta ?? "";
+              patchAssistant((m) => ({ ...m, content: `${m.content}${delta}` }));
+              break;
+            }
+            case "message.completed": {
+              const finished = (event.data as { text?: string | null }).text;
+              patchAssistant((m) => ({
+                ...m,
+                content: typeof finished === "string" && finished.length > 0 ? finished : m.content,
+              }));
+              break;
+            }
+            case "reasoning.appended": {
+              const delta = (event.data as { delta?: string }).delta ?? "";
+              patchAssistant((m) => ({ ...m, reasoning: `${m.reasoning ?? ""}${delta}` }));
+              break;
+            }
+            case "tool.started": {
+              const data = event.data as { name: string; callId: string; input: unknown };
+              const call: UiToolCall = {
+                callId: data.callId,
+                name: data.name,
+                input: data.input,
+                status: "running",
               };
-              return { ...m, toolCalls };
-            });
-            break;
-          }
-          case "step.failed":
-          case "turn.failed":
-          case "session.failed": {
-            const data = event.data as { code?: string; message?: string };
-            updateAssistant((m) => ({
-              ...m,
-              content: data.message ?? "Something went wrong.",
-              streaming: false,
-              errored: true,
-            }));
-            break;
+              patchAssistant((m) => {
+                const toolCalls = m.toolCalls ?? [];
+                toolIndex.set(data.callId, toolCalls.length);
+                return { ...m, toolCalls: [...toolCalls, call] };
+              });
+              break;
+            }
+            case "tool.completed": {
+              const data = event.data as {
+                callId: string;
+                output: unknown;
+                status: string;
+                error?: { code: string; message: string };
+              };
+              patchAssistant((m) => {
+                const toolCalls = [...(m.toolCalls ?? [])];
+                const idx = toolIndex.get(data.callId);
+                if (idx === undefined || toolCalls[idx] === undefined) return m;
+                const previous = toolCalls[idx];
+                const isApproval =
+                  data.status === "pending" && data.error?.code === "needs_approval";
+                toolCalls[idx] = {
+                  ...previous,
+                  status: isApproval
+                    ? "approval"
+                    : data.status === "completed"
+                      ? "done"
+                      : "error",
+                  output: data.output,
+                  errorMessage: data.error?.message,
+                };
+                return { ...m, toolCalls };
+              });
+              break;
+            }
+            case "step.failed":
+            case "turn.failed":
+            case "session.failed": {
+              const data = event.data as { code?: string; message?: string };
+              patchAssistant((m) => ({
+                ...m,
+                content: data.message ?? "Something went wrong.",
+                streaming: false,
+                errored: true,
+              }));
+              break;
+            }
           }
         }
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          patchAssistant((m) => ({
+            ...m,
+            content: error instanceof Error ? error.message : String(error),
+            streaming: false,
+            errored: true,
+          }));
+        }
+      } finally {
+        const latencyMs = Date.now() - startedAt;
+        patchAssistant((m) => ({ ...m, streaming: false, latencyMs }));
+        setStreaming(false);
+        abortRef.current = undefined;
       }
-    } catch (error) {
-      if (controller.signal.aborted) {
-        updateAssistant((m) => ({ ...m, streaming: false }));
-      } else {
-        updateAssistant((m) => ({
-          ...m,
-          content: error instanceof Error ? error.message : String(error),
-          streaming: false,
-          errored: true,
-        }));
-      }
-    } finally {
-      updateAssistant((m) => ({ ...m, streaming: false }));
-      setStreaming(false);
-      abortRef.current = undefined;
-    }
+    },
+    [messages],
+  );
+
+  const regenerate = () => {
+    const lastUserIndex = messages.map((m) => m.role).lastIndexOf("user");
+    if (lastUserIndex === -1) return;
+    const historyBefore = messages.slice(0, lastUserIndex);
+    const lastUser = messages[lastUserIndex]!;
+    setMessages([...historyBefore, lastUser]);
+    void send(lastUser.content, [...historyBefore, lastUser]);
   };
 
   return (
-    <div className="flex h-full flex-col">
-      <header className="flex items-center gap-2 border-b border-border px-4 py-3">
-        <Zap className="h-5 w-5 text-amber-500" />
-        <span className="font-semibold">arcie</span>
-        <span className="text-xs text-muted-foreground">web chat</span>
-      </header>
-      <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto flex max-w-3xl flex-col gap-3 px-4 py-6">
-          {messages.length === 0 && <EmptyState />}
-          {messages.map((message) => (
-            <Message key={message.id} message={message} />
-          ))}
-          <div ref={bottomRef} />
+    <div className="fixed inset-0 flex flex-col overflow-hidden bg-background text-foreground">
+      <div ref={containerRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        <div className="mx-auto flex min-h-full w-full max-w-3xl flex-col justify-start gap-6 pt-8 pb-4">
+          {messages.map((message, index) => {
+            const isLast =
+              message.role === "assistant" && index === messages.length - 1 && !streaming;
+            return (
+              <Message
+                key={message.id}
+                message={message}
+                isLast={isLast}
+                onCopy={copy}
+                onRegenerate={regenerate}
+              />
+            );
+          })}
         </div>
       </div>
-      <InputBar onSend={send} onStop={stop} streaming={streaming} />
-    </div>
-  );
-}
 
-function EmptyState() {
-  return (
-    <div className={cn("mt-24 flex flex-col items-center gap-2 text-center text-muted-foreground")}>
-      <Zap className="h-8 w-8 text-amber-500" />
-      <div className="text-lg font-medium text-foreground">Start a conversation</div>
-      <div className="text-sm">Ask your arcie agent anything.</div>
+      <InputBar
+        onSend={(text) => void send(text)}
+        onStop={stop}
+        onClear={clearAll}
+        streaming={streaming}
+        hasMessages={messages.length > 0}
+      />
     </div>
   );
 }

package/templates/web-chat/components/input-bar.tsx

@@ -1,26 +1,39 @@
 "use client";
 
 import * as React from "react";
-import { Send, StopCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { ArrowUp, Paperclip, StopCircle, Trash2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface InputBarProps {
-  onSend(message: string): void;
+  onSend(message: string, files?: File[]): void;
   onStop(): void;
+  onClear?(): void;
   streaming: boolean;
   disabled?: boolean;
+  hasMessages?: boolean;
 }
 
-export function InputBar({ onSend, onStop, streaming, disabled }: InputBarProps) {
+export function InputBar({
+  onSend,
+  onStop,
+  onClear,
+  streaming,
+  disabled,
+  hasMessages,
+}: InputBarProps) {
   const [value, setValue] = React.useState("");
+  const [files, setFiles] = React.useState<File[]>([]);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const submit = () => {
     const trimmed = value.trim();
-    if (trimmed.length === 0 || streaming || disabled) return;
-    onSend(trimmed);
+    if ((trimmed.length === 0 && files.length === 0) || streaming || disabled) return;
+    onSend(trimmed, files.length > 0 ? files : undefined);
     setValue("");
+    setFiles([]);
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (fileInputRef.current) fileInputRef.current.value = "";
   };
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -30,44 +43,138 @@ export function InputBar({ onSend, onStop, streaming, disabled }: InputBarProps)
     }
   };
 
-  React.useEffect(() => {
-    const el = textareaRef.current;
-    if (el === null) return;
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    const el = event.target;
     el.style.height = "auto";
-    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
-  }, [value]);
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.files;
+    if (next === null) return;
+    setFiles((prev) => [...prev, ...Array.from(next)]);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const openFilePicker = () => {
+    fileInputRef.current?.click();
+  };
 
   return (
-    <div className="border-t border-border bg-background px-4 py-3">
-      <div className="mx-auto flex max-w-3xl items-end gap-2">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={onKeyDown}
-          rows={1}
-          placeholder={streaming ? "…" : "Send a message"}
-          disabled={disabled}
+    <div className="shrink-0 bg-transparent px-4 pt-4 pb-6">
+      <div className="mx-auto w-full max-w-3xl">
+        <div
           className={cn(
-            "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
+            "relative flex flex-col rounded-2xl border border-border/40 bg-muted/10 backdrop-blur-md p-3 transition-all",
+            "hover:border-border/60 hover:bg-muted/20",
+            "focus-within:border-primary/45 focus-within:ring-1 focus-within:ring-primary/20",
+          )}
+        >
+          {files.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-2">
+              {files.map((file, index) => (
+                <div
+                  key={`${file.name}-${index}`}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-card/60 text-[11px] font-medium text-foreground border border-border/30"
+                >
+                  <Paperclip className="h-3 w-3 text-muted-foreground/70" />
+                  <span className="max-w-[160px] truncate">{file.name}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(index)}
+                    className="text-muted-foreground/50 hover:text-foreground transition-colors"
+                    title="Remove attachment"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
           )}
-        />
-        {streaming ? (
-          <Button size="icon" variant="outline" onClick={onStop} aria-label="Stop">
-            <StopCircle className="h-4 w-4" />
-          </Button>
-        ) : (
-          <Button
-            size="icon"
-            onClick={submit}
-            disabled={value.trim().length === 0 || disabled}
-            aria-label="Send"
-          >
-            <Send className="h-4 w-4" />
-          </Button>
-        )}
+
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            rows={2}
+            placeholder={streaming ? "…" : "Ask a question..."}
+            disabled={disabled}
+            className={cn(
+              "max-h-40 min-h-[48px] w-full resize-none bg-transparent py-1.5 text-xs",
+              "placeholder:text-muted-foreground/50 focus:outline-none leading-relaxed",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+            )}
+          />
+
+          <div className="flex items-center justify-between pt-2.5 mt-2 select-none">
+            <div className="flex items-center gap-1.5">
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                onChange={onFileChange}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={openFilePicker}
+                disabled={streaming}
+                className={cn(
+                  "h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 transition-colors",
+                  "hover:bg-muted/30 hover:text-foreground",
+                  "disabled:cursor-not-allowed disabled:opacity-40",
+                )}
+                aria-label="Attach files"
+                title="Attach files"
+              >
+                <Paperclip className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {hasMessages && onClear && (
+                <button
+                  type="button"
+                  onClick={onClear}
+                  className="h-8 w-8 flex items-center justify-center rounded-full text-muted-foreground/60 hover:bg-muted/30 hover:text-foreground transition-colors"
+                  aria-label="New chat"
+                  title="New chat"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              )}
+              {streaming ? (
+                <button
+                  type="button"
+                  onClick={onStop}
+                  className="h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background hover:bg-foreground/90 transition-colors"
+                  aria-label="Stop generation"
+                >
+                  <StopCircle className="h-3.5 w-3.5 fill-current" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={submit}
+                  disabled={(value.trim().length === 0 && files.length === 0) || disabled}
+                  className={cn(
+                    "h-8 w-8 flex items-center justify-center rounded-full bg-foreground text-background transition-colors",
+                    "hover:bg-foreground/90",
+                    "disabled:cursor-not-allowed disabled:opacity-40",
+                  )}
+                  aria-label="Send message"
+                >
+                  <ArrowUp className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );