@polpo-ai/dashboard 0.1.0

package/components/dashboard/polpo-chat.tsx

@@ -0,0 +1,468 @@
+"use client";
+
+/**
+ * Shared Polpo chat surface — the single source of truth for the chat
+ * composition used by BOTH the Playground and the Agent Builder so they
+ * are guaranteed identical.
+ *
+ * Composition (mirrors lumea-agents components/screens/chat.tsx):
+ *   PolpoProvider (session-cookie fetch, no API key in the browser)
+ *     → FilesPanel (workspace files, slides in from the right)
+ *     → ChatSurface = usePolpoChatAdapter + ChatProvider
+ *          + ToolCallVariantProvider variant="task"
+ *          + <Chat> with a custom <InputBar> (Skills menu, slash trigger,
+ *            attachments, ask-user handoff)
+ *
+ * `<PolpoChat>` is the high-level wrapper: pass `baseUrl` + the selected
+ * `agent`, it owns the session lifecycle (?session= persistence, reset on
+ * agent switch) and the cookie fetch. Files panel open state is optional
+ * (controlled) so a parent toolbar can toggle it.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { PolpoProvider } from "@polpo-ai/react";
+import {
+  usePolpoChatAdapter,
+  PolpoChatCapabilitiesMenu,
+  usePolpoChatSlashItems,
+} from "@lumea-labs/chat-polpo";
+import {
+  ChatAskUser,
+  ChatTriggerMenu,
+  useChatContext,
+  useChatTriggerMenu,
+  useSubmitHandler,
+  type AskUserQuestion,
+  type PromptInputMessage,
+} from "@lumea-labs/chat";
+import { ChatShell } from "#/components/dashboard/chat-shell";
+import {
+  FileManagerProvider,
+  FileList,
+  FileToolbar,
+  FilePreviewDialog,
+  FilePreviewRouter,
+  defaultFmLabels,
+} from "@lumea-labs/file-manager";
+import {
+  PolpoFilePreview,
+  usePolpoFileAdapter,
+} from "@lumea-labs/file-manager-polpo";
+import { pdfHandler } from "@lumea-labs/file-manager-polpo/handlers/pdf-handler";
+import { imageHandler } from "@lumea-labs/file-manager-polpo/handlers/image-handler";
+import { audioHandler } from "@lumea-labs/file-manager-polpo/handlers/audio-handler";
+import { videoHandler } from "@lumea-labs/file-manager-polpo/handlers/video-handler";
+import { NextIntlClientProvider } from "next-intl";
+import { ArrowUp, Paperclip, Square, X } from "lucide-react";
+import { Sheet, SheetContent, SheetTitle } from "#/components/ui/sheet";
+
+/* ------------------------------------------------------------------ */
+/*  PolpoChat — high-level wrapper (providers + session lifecycle)      */
+/* ------------------------------------------------------------------ */
+
+export function PolpoChat({
+  baseUrl,
+  agent,
+  filesOpen,
+  onFilesOpenChange,
+}: {
+  baseUrl: string;
+  agent: string | undefined;
+  /** Controlled files-panel open state. Optional — defaults to internal. */
+  filesOpen?: boolean;
+  onFilesOpenChange?: (open: boolean) => void;
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Session lifecycle — capture ?session= at mount, never re-pass as
+  // prop, commit new ids to the URL on stream finish so we don't trigger
+  // a mid-stream reload. Reset on agent switch.
+  const initialSessionIdRef = useRef<string | undefined>(
+    searchParams.get("session") ?? undefined,
+  );
+  const pendingSessionIdRef = useRef<string | null>(null);
+
+  const commitSession = useRef<(id: string) => void>(() => {});
+  commitSession.current = (id: string) => {
+    const current = searchParams.get("session");
+    if (current === id) return;
+    const params = new URLSearchParams(Array.from(searchParams.entries()));
+    params.set("session", id);
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+
+  const handleSessionCreated = useCallback((id: string) => {
+    pendingSessionIdRef.current = id;
+  }, []);
+
+  const handleFinish = useCallback(() => {
+    const id = pendingSessionIdRef.current;
+    if (id) {
+      pendingSessionIdRef.current = null;
+      commitSession.current(id);
+    }
+  }, []);
+
+  // On agent switch (not initial mount) clear the session so a fresh one
+  // starts. The `key={agent}` on ChatSurface remounts the tier-2 wiring.
+  const firstRender = useRef(true);
+  useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    initialSessionIdRef.current = undefined;
+    pendingSessionIdRef.current = null;
+    if (searchParams.get("session")) {
+      const params = new URLSearchParams(Array.from(searchParams.entries()));
+      params.delete("session");
+      const qs = params.toString();
+      router.replace(qs ? `?${qs}` : "?", { scroll: false });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent]);
+
+  const cookieFetch = useMemo<typeof globalThis.fetch>(
+    () =>
+      ((input, init) =>
+        globalThis.fetch(input, {
+          ...init,
+          credentials: "include",
+        })) as typeof globalThis.fetch,
+    [],
+  );
+
+  const [internalFiles, setInternalFiles] = useState(false);
+  const isOpen = filesOpen ?? internalFiles;
+  const setOpen = onFilesOpenChange ?? setInternalFiles;
+
+  return (
+    <NextIntlClientProvider
+      locale="en"
+      messages={{}}
+      onError={() => {}}
+      getMessageFallback={({ key }) => key}
+    >
+      <PolpoProvider
+        baseUrl={baseUrl}
+        apiPrefix="/v1"
+        fetch={cookieFetch}
+        autoConnect={false}
+      >
+        <FilesPanel open={isOpen} onOpenChange={setOpen} />
+        <ChatSurface
+          key={agent}
+          sessionId={initialSessionIdRef.current}
+          agent={agent}
+          onSessionCreated={handleSessionCreated}
+          onFinish={handleFinish}
+        />
+      </PolpoProvider>
+    </NextIntlClientProvider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  FilesPanel — workspace files (slides in from the right)            */
+/* ------------------------------------------------------------------ */
+
+export function FilesPanel({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const adapter = usePolpoFileAdapter();
+
+  return (
+    <FileManagerProvider adapter={adapter} layout="compact" labels={defaultFmLabels}>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent
+          side="right"
+          className="w-full sm:!w-[560px] sm:!max-w-[560px] lg:!w-[640px] lg:!max-w-[640px] p-0 gap-0 flex flex-col bg-card"
+        >
+          <div className="shrink-0 border-b border-border px-4 py-3">
+            <SheetTitle className="text-sm font-semibold tracking-tight text-foreground">
+              Files
+            </SheetTitle>
+            <p className="mt-0.5 text-[11px] text-muted-foreground">
+              Project workspace — files written by agents and uploads
+            </p>
+          </div>
+          <div className="shrink-0 border-b border-border px-2 py-1.5">
+            <FileToolbar />
+          </div>
+          <div className="flex-1 min-h-0 overflow-auto">
+            <FileList />
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <FilePreviewDialog>
+        <FilePreviewRouter
+          handlers={[pdfHandler, imageHandler, audioHandler, videoHandler]}
+        >
+          <PolpoFilePreview />
+        </FilePreviewRouter>
+      </FilePreviewDialog>
+    </FileManagerProvider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  ChatSurface — usePolpoChatAdapter + ChatProvider + Chat            */
+/* ------------------------------------------------------------------ */
+
+function ChatSurface({
+  sessionId,
+  agent,
+  onSessionCreated,
+  onFinish,
+}: {
+  sessionId: string | undefined;
+  agent: string | undefined;
+  onSessionCreated: (id: string) => void;
+  onFinish: () => void;
+}) {
+  const adapter = usePolpoChatAdapter({
+    sessionId,
+    agent,
+    onSessionCreated,
+    onFinish,
+  });
+  return (
+    <ChatShell adapter={adapter}>
+      <InputBar agent={agent} />
+    </ChatShell>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  InputBar — custom composer (skills, slash, attachments, ask-user)  */
+/* ------------------------------------------------------------------ */
+
+function InputBar({ agent }: { agent: string | undefined }) {
+  const {
+    sendMessage,
+    isStreaming,
+    abort,
+    uploadFile,
+    isUploading,
+    pendingToolCall,
+  } = useChatContext();
+
+  const [text, setText] = useState("");
+  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
+  const [sendError, setSendError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const askUserQuestions =
+    pendingToolCall?.toolName === "ask_user_question"
+      ? ((pendingToolCall.arguments?.questions ?? []) as AskUserQuestion[])
+      : null;
+
+  const submit = useSubmitHandler(sendMessage, uploadFile);
+
+  // Scope the "/" skills menu to the selected agent's own skills.
+  const slash = usePolpoChatSlashItems({ agent, skillsScope: "assigned" });
+  const slashMenu = useChatTriggerMenu({
+    triggers: slash.triggers,
+    onSelect: (item) => {
+      void slash.onSelect(item);
+    },
+  });
+
+  async function handleSend() {
+    const trimmed = text.trim();
+    if (!trimmed && pendingFiles.length === 0) return;
+
+    const message: PromptInputMessage = {
+      text: trimmed,
+      files: pendingFiles.map((f) => ({
+        url: URL.createObjectURL(f),
+        filename: f.name,
+      })),
+    };
+
+    setText("");
+    setPendingFiles([]);
+    setSendError(null);
+
+    try {
+      await submit(message);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setSendError(msg || "Send failed");
+      // eslint-disable-next-line no-console
+      console.error("[polpo-chat] send failed:", err);
+    } finally {
+      message.files.forEach((f) => URL.revokeObjectURL(f.url));
+    }
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (isStreaming) {
+      abort();
+    } else {
+      void handleSend();
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e as unknown as FormEvent);
+    }
+  }
+
+  function handleFiles(files: FileList | null) {
+    if (!files) return;
+    setPendingFiles((prev) => [...prev, ...Array.from(files)]);
+  }
+
+  if (askUserQuestions && askUserQuestions.length > 0) {
+    return (
+      <div className="shrink-0">
+        <div className="mx-auto max-w-3xl px-4 py-3">
+          <ChatAskUser
+            variant="command"
+            questions={askUserQuestions}
+            onSubmit={(answers) => {
+              void sendMessage(JSON.stringify({ answers }));
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="shrink-0">
+      <div className="mx-auto max-w-3xl px-4 py-3">
+        {sendError && (
+          <div className="mb-2 flex items-start justify-between gap-2 border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+            <span className="flex-1">
+              <span className="font-semibold">Send failed.</span>{" "}
+              <span className="opacity-80">{sendError}</span>
+            </span>
+            <button
+              type="button"
+              onClick={() => setSendError(null)}
+              aria-label="Dismiss"
+              className="shrink-0 text-destructive/70 hover:text-destructive"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+
+        {pendingFiles.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-2">
+            {pendingFiles.map((f, i) => (
+              <span
+                key={`${f.name}-${i}`}
+                className="inline-flex items-center gap-1.5 rounded border border-border bg-card px-2 py-1 text-xs font-mono"
+              >
+                {f.name}
+                <button
+                  type="button"
+                  onClick={() =>
+                    setPendingFiles((prev) => prev.filter((_, j) => j !== i))
+                  }
+                  aria-label={`Remove ${f.name}`}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="relative rounded border border-border bg-card focus-within:border-foreground/40 transition-colors">
+          <textarea
+            ref={slashMenu.inputRef as React.Ref<HTMLTextAreaElement>}
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+              slashMenu.onChange(e);
+            }}
+            onKeyDown={(e) => {
+              slashMenu.onKeyDown(e);
+              if (!e.defaultPrevented) handleKeyDown(e);
+            }}
+            placeholder="Send a message…"
+            rows={2}
+            className="block w-full resize-none bg-transparent px-3 py-2.5 text-sm placeholder:text-muted-foreground/50 focus:outline-none"
+          />
+
+          <ChatTriggerMenu {...slashMenu.menuProps} />
+
+          <div className="flex items-center gap-1 border-t border-border px-2 py-1.5">
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              hidden
+              onChange={(e) => {
+                handleFiles(e.target.files);
+                e.target.value = "";
+              }}
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isUploading}
+              className="inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground disabled:opacity-50"
+              aria-label="Attach file"
+            >
+              <Paperclip className="h-4 w-4" />
+            </button>
+
+            <PolpoChatCapabilitiesMenu
+              agent={agent}
+              label="Skills"
+              variant="icon"
+              searchable
+            />
+
+            <span
+              aria-hidden
+              className="ml-1 hidden items-center gap-1 font-mono text-[10.5px] uppercase tracking-[0.14em] text-muted-foreground sm:inline-flex"
+            >
+              <kbd className="rounded border border-border bg-card px-1.5 py-px font-mono text-[10px] text-muted-foreground">
+                /
+              </kbd>
+              skills
+            </span>
+
+            <button
+              type="submit"
+              disabled={!isStreaming && !text.trim() && pendingFiles.length === 0}
+              className="ml-auto inline-flex h-7 w-7 items-center justify-center rounded bg-foreground text-background transition-opacity hover:opacity-90 disabled:opacity-40"
+              aria-label={isStreaming ? "Stop" : "Send"}
+            >
+              {isStreaming ? (
+                <Square className="h-3.5 w-3.5" />
+              ) : (
+                <ArrowUp className="h-3.5 w-3.5" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}