@frankieai/react 0.1.0 → 0.1.4

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   Composer: () => Composer,
   FRANKIE_CLOUD_URL: () => FRANKIE_CLOUD_URL,
   FrankieApiError: () => FrankieApiError,
+  FrankieChatPage: () => FrankieChatPage,
   FrankieClient: () => FrankieClient,
   FrankieInline: () => FrankieInline,
   FrankieProvider: () => FrankieProvider,
@@ -89,13 +90,16 @@ var FrankieClient = class {
   get sessionId() {
     return this.session?.sessionId;
   }
+  get conversationId() {
+    return this.options.conversationId;
+  }
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist() {
     return this.options.persist !== false && typeof window !== "undefined";
   }
-  /** localStorage namespace for this tenant, shared with the chat hook. */
+  /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
   get namespace() {
-    return `frankie.${this.options.publishableKey}`;
+    return this.options.storageNamespace ?? `frankie.${this.options.publishableKey}`;
   }
   readStored() {
     if (!this.persist) return void 0;
@@ -123,36 +127,88 @@ var FrankieClient = class {
     });
     return await this.unwrap(response);
   }
-  /** Opens (or reuses) a chat session. */
   async ensureSession(context) {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) {
-      return this.session;
-    }
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) return this.session;
     const userToken = await this.options.getUserToken?.();
+    if (this.options.getUserToken && !userToken) {
+      throw new FrankieApiError(
+        "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
+        401,
+        "user_token_unavailable"
+      );
+    }
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
-      body: JSON.stringify({ ...userToken ? { userToken } : {}, ...context ? { context } : {} })
+      body: JSON.stringify({
+        ...userToken ? { userToken } : {},
+        ...context ? { context } : {},
+        ...this.options.conversationId ? { conversationId: this.options.conversationId } : {}
+      })
     });
     this.session = await this.unwrap(response);
     this.writeStored();
     return this.session;
   }
-  /** Forget the current session so the next send starts a fresh conversation. */
+  async listConversations() {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations`, {
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    const body = await this.unwrap(response);
+    return Array.isArray(body.conversations) ? body.conversations : [];
+  }
+  async resumeConversation(id = this.options.conversationId) {
+    if (!id) return void 0;
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
+      method: "POST",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status === 404) return void 0;
+    const body = await this.unwrap(response);
+    this.session = body.session;
+    this.writeStored();
+    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
+  }
+  async syncConversation(messages, title) {
+    if (!this.session || !this.options.conversationId) return;
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(this.options.conversationId)}`, {
+      method: "PUT",
+      headers: {
+        "content-type": "application/json",
+        "x-frankie-key": this.options.publishableKey,
+        authorization: `Bearer ${this.session.sessionToken}`
+      },
+      body: JSON.stringify({ messages, ...title ? { title } : {} })
+    });
+    await this.unwrap(response);
+  }
+  async deleteConversation(id) {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status !== 404) await this.unwrap(response);
+  }
+  async requireUserToken() {
+    const token = await this.options.getUserToken?.();
+    if (!token) throw new FrankieApiError("Sign in to access your chat history.", 401, "unauthorized");
+    return token;
+  }
   resetSession() {
     this.session = void 0;
     this.writeStored();
   }
-  /**
-   * Sends a message and invokes `onEvent` for each server event as it arrives.
-   * Resolves when the turn ends.
-   */
   async send(input, onEvent) {
     const session = await this.ensureSession(input.context);
     const body = {
       sessionId: session.sessionId,
       message: input.message,
-      ...input.context ? { context: input.context } : {}
+      ...input.context ? { context: input.context } : {},
+      ...input.model ? { model: input.model } : {},
+      ...input.attachments?.length ? { attachments: input.attachments } : {}
     };
     const response = await this.doFetch(`${this.baseUrl}/v1/chat`, {
       method: "POST",
@@ -230,9 +286,8 @@ function FrankieProvider({
 }) {
   const client = (0, import_react.useMemo)(
     () => new FrankieClient(clientOptions),
-    // The client holds session state; rebuild it only when the endpoint changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientOptions.baseUrl, clientOptions.publishableKey]
+    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId]
   );
   const [config, setConfig] = (0, import_react.useState)(providedConfig);
   const [configError, setConfigError] = (0, import_react.useState)(void 0);
@@ -346,8 +401,8 @@ function fallbackText(stopReason) {
 function newAssistantMessage(id) {
   return { id, role: "assistant", text: "", thinking: "", tools: [], status: "streaming", createdAt: Date.now() };
 }
-function newUserMessage(id, text) {
-  return { id, role: "user", text, createdAt: Date.now() };
+function newUserMessage(id, text, attachments) {
+  return { id, role: "user", text, ...attachments?.length ? { attachments } : {}, createdAt: Date.now() };
 }
 
 // src/hooks/useFrankieChat.ts
@@ -358,6 +413,7 @@ function useFrankieChat() {
   const [messages, setMessages] = (0, import_react2.useState)([]);
   const [busy, setBusy] = (0, import_react2.useState)(false);
   const [error, setError] = (0, import_react2.useState)(void 0);
+  const [restored, setRestored] = (0, import_react2.useState)(false);
   const abortRef = (0, import_react2.useRef)(null);
   const mounted = (0, import_react2.useRef)(true);
   (0, import_react2.useEffect)(() => {
@@ -369,22 +425,38 @@ function useFrankieChat() {
   }, []);
   const storageKey = `${client.namespace}.messages`;
   (0, import_react2.useEffect)(() => {
-    if (!client.persist) return;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      const stored = raw ? JSON.parse(raw) : [];
-      if (Array.isArray(stored) && stored.length) setMessages(stored);
-    } catch {
-    }
-  }, [storageKey]);
+    let active = true;
+    const restore = async () => {
+      if (client.persist) {
+        try {
+          const raw = window.localStorage.getItem(storageKey);
+          const stored = raw ? JSON.parse(raw) : [];
+          if (Array.isArray(stored) && stored.length && active) setMessages(stored);
+        } catch {
+        }
+      }
+      try {
+        const remote = await client.resumeConversation();
+        if (active && remote?.messages.length) setMessages(remote.messages);
+      } catch {
+      } finally {
+        if (active) setRestored(true);
+      }
+    };
+    void restore();
+    return () => {
+      active = false;
+    };
+  }, [client, storageKey]);
   (0, import_react2.useEffect)(() => {
-    if (!client.persist || busy) return;
+    if (!client.persist || !restored || busy) return;
     try {
       if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
       else window.localStorage.removeItem(storageKey);
     } catch {
     }
-  }, [messages, busy, client, storageKey]);
+    if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => void 0);
+  }, [messages, busy, client, storageKey, restored]);
   const patchAssistant = (0, import_react2.useCallback)((id, update) => {
     setMessages(
       (current) => current.map(
@@ -393,24 +465,50 @@ function useFrankieChat() {
     );
   }, []);
   const send = (0, import_react2.useCallback)(
-    async (text) => {
+    async (text, opts) => {
       const trimmed = text.trim();
-      if (!trimmed || busy) return;
+      const attachments = opts?.attachments ?? [];
+      if (!trimmed && attachments.length === 0 || busy) return;
+      const outgoing = trimmed || "Please take a look at the attached file(s).";
       const assistantId = nextId("a");
       setError(void 0);
       setBusy(true);
       setMessages((current) => [
         ...current,
-        newUserMessage(nextId("u"), trimmed),
+        newUserMessage(
+          nextId("u"),
+          trimmed,
+          attachments.map((file) => ({ name: file.name, mimeType: file.mimeType }))
+        ),
         newAssistantMessage(assistantId)
       ]);
       const abort = new AbortController();
       abortRef.current = abort;
       try {
-        await client.send({ message: trimmed, ...context ? { context } : {}, signal: abort.signal }, (event) => {
-          if (event.type === "ping" || event.type === "session") return;
-          patchAssistant(assistantId, (message) => applyEvent(message, event));
-        });
+        let receivedText = false;
+        let receivedToolActivity = false;
+        await client.send(
+          {
+            message: outgoing,
+            ...context ? { context } : {},
+            ...opts?.model ? { model: opts.model } : {},
+            ...attachments.length ? { attachments } : {},
+            signal: abort.signal
+          },
+          (event) => {
+            if (event.type === "ping" || event.type === "session") return;
+            if (event.type === "text_delta") receivedText = true;
+            if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
+            patchAssistant(assistantId, (message) => applyEvent(message, event));
+          }
+        );
+        if (!receivedText) {
+          patchAssistant(assistantId, (message) => ({
+            ...message,
+            status: "done",
+            text: receivedToolActivity ? "Completed. Open Agent activity for the details." : "Frankie didn\u2019t return an answer. Please try again."
+          }));
+        }
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
@@ -419,7 +517,7 @@ function useFrankieChat() {
             text: message.text || "Stopped."
           }));
         } else {
-          const message = caught instanceof FrankieApiError ? caught.message : "Could not reach the assistant. Check your connection and try again.";
+          const message = caught instanceof FrankieApiError ? caught.message : caught instanceof Error && caught.message.startsWith("Frankie") ? caught.message : "Could not reach the assistant. Check your connection and try again.";
           if (mounted.current) setError(message);
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
@@ -443,6 +541,7 @@ function useFrankieChat() {
     setMessages([]);
     setError(void 0);
     setBusy(false);
+    setRestored(true);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -450,10 +549,16 @@ function useFrankieChat() {
   }, [client]);
   return { messages, busy, ...error ? { error } : {}, send, stop, reset };
 }
+function conversationTitle(messages) {
+  const first = messages.find((message) => message.role === "user" && message.text.trim());
+  if (!first) return void 0;
+  const title = first.text.trim().replace(/\s+/g, " ");
+  return title.length > 42 ? `${title.slice(0, 42)}\u2026` : title;
+}
 
 // src/components/chat/FrankieWidget.tsx
-var import_lucide_react4 = require("lucide-react");
-var import_react8 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_react9 = require("react");
 
 // src/lib/theme.ts
 function themeToCssVars(theme) {
@@ -513,8 +618,8 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 }
 
 // src/components/chat/ChatPanel.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_react7 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_react8 = require("react");
 
 // src/components/ui/avatar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -598,55 +703,185 @@ var Textarea = (0, import_react4.forwardRef)(
 // src/components/chat/Composer.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MAX_ROWS_PX = 140;
-function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus }) {
+function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }) {
   const [value, setValue] = (0, import_react5.useState)("");
+  const [files, setFiles] = (0, import_react5.useState)([]);
+  const [fileError, setFileError] = (0, import_react5.useState)(void 0);
   const textareaRef = (0, import_react5.useRef)(null);
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const canAttach = Boolean(attachments?.enabled);
+  const models = modelPicker?.models ?? [];
   (0, import_react5.useEffect)(() => {
     const node = textareaRef.current;
     if (!node) return;
     node.style.height = "auto";
     node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
   }, [value]);
+  const addFiles = (0, import_react5.useCallback)(
+    async (list) => {
+      if (!list || !attachments) return;
+      setFileError(void 0);
+      const room = attachments.maxCount - files.length;
+      const chosen = Array.from(list).slice(0, Math.max(0, room));
+      if (Array.from(list).length > room) setFileError(`You can attach up to ${attachments.maxCount} file(s).`);
+      const next = [];
+      for (const file of chosen) {
+        if (!mimeAccepted(file.type || "application/octet-stream", attachments.accept)) {
+          setFileError(`Files of type ${file.type || "unknown"} aren't allowed.`);
+          continue;
+        }
+        if (file.size > attachments.maxMb * 1024 * 1024) {
+          setFileError(`Each file must be under ${attachments.maxMb} MB.`);
+          continue;
+        }
+        try {
+          next.push({
+            id: `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 7)}`,
+            name: file.name,
+            mimeType: file.type || "application/octet-stream",
+            data: await readAsBase64(file)
+          });
+        } catch {
+          setFileError("Couldn't read that file.");
+        }
+      }
+      if (next.length) setFiles((current) => [...current, ...next]);
+    },
+    [attachments, files.length]
+  );
+  const removeFile = (id) => setFiles((current) => current.filter((file) => file.id !== id));
   const submit = (0, import_react5.useCallback)(() => {
     const text = value.trim();
-    if (!text || busy || disabled) return;
+    if (!text && files.length === 0 || busy || disabled) return;
     setValue("");
-    onSend(text);
-  }, [busy, disabled, onSend, value]);
+    const attached = files.map(({ name, mimeType, data }) => ({ name, mimeType, data }));
+    setFiles([]);
+    setFileError(void 0);
+    onSend(text, {
+      ...attached.length ? { attachments: attached } : {},
+      ...modelPicker?.value ? { model: modelPicker.value } : {}
+    });
+  }, [busy, disabled, files, modelPicker?.value, onSend, value]);
   const onKeyDown = (event) => {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       submit();
     }
   };
+  const nothingToSend = value.trim().length === 0 && files.length === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "form",
     {
-      className: "flex items-end gap-2",
+      className: "flex flex-col gap-2",
       onSubmit: (event) => {
         event.preventDefault();
         submit();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Textarea,
+        files.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-2", children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "span",
           {
-            ref: textareaRef,
-            rows: 1,
-            value,
-            disabled,
-            autoFocus,
-            onChange: (event) => setValue(event.target.value),
-            onKeyDown,
-            placeholder: placeholder ?? "Ask anything\u2026",
-            "aria-label": "Message"
-          }
-        ),
-        busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Square, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", size: "icon", disabled: disabled || value.trim().length === 0, "aria-label": "Send", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowUp, {}) })
+            className: "inline-flex max-w-[14rem] items-center gap-1.5 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Paperclip, { className: "size-3 shrink-0 opacity-70" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: file.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => removeFile(file.id),
+                  "aria-label": `Remove ${file.name}`,
+                  className: "frankie-focus shrink-0 opacity-60 hover:opacity-100",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        )) }) : null,
+        fileError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-red-600 dark:text-red-400", children: fileError }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-end gap-2", children: [
+          canAttach ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                hidden: true,
+                accept: attachments?.accept.join(","),
+                onChange: (event) => {
+                  void addFiles(event.target.files);
+                  event.target.value = "";
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Button,
+              {
+                type: "button",
+                size: "icon",
+                variant: "outline",
+                disabled: disabled || files.length >= (attachments?.maxCount ?? 0),
+                onClick: () => fileInputRef.current?.click(),
+                "aria-label": "Attach files",
+                title: "Attach files",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Paperclip, {})
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Textarea,
+            {
+              ref: textareaRef,
+              rows: 1,
+              value,
+              disabled,
+              autoFocus,
+              onChange: (event) => setValue(event.target.value),
+              onKeyDown,
+              placeholder: placeholder ?? "Ask anything\u2026",
+              "aria-label": "Message"
+            }
+          ),
+          models.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "select",
+            {
+              value: modelPicker?.value ?? models[0]?.id,
+              onChange: (event) => modelPicker?.onChange(event.target.value),
+              disabled,
+              "aria-label": "Model",
+              className: "frankie-focus h-9 max-w-[8rem] rounded-[var(--frankie-radius)] border border-border bg-background px-2 text-sm",
+              children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: model.id, children: model.label }, model.id))
+            }
+          ) : null,
+          busy ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Square, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", size: "icon", disabled: disabled || nothingToSend, "aria-label": "Send", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ArrowUp, {}) })
+        ] })
       ]
     }
   );
 }
+function mimeAccepted(mimeType, accept) {
+  return accept.some(
+    (pattern) => pattern.endsWith("/*") ? mimeType.startsWith(pattern.slice(0, -1)) : pattern === mimeType
+  );
+}
+function readAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result);
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+// src/components/chat/MessageBubble.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_react7 = require("react");
 
 // src/components/chat/Markdown.tsx
 var import_react6 = require("react");
@@ -782,7 +1017,20 @@ function Badge({
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function ToolActivityList({ tools, renderTool }) {
   if (tools.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "mt-2 flex flex-col gap-1", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityRow, { tool }) }, tool.id)) });
+  const running = tools.some((tool) => tool.status === "running");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("details", { className: "frankie-tool-activity mt-2", open: running, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("summary", { className: "inline-flex min-h-7 cursor-pointer list-none items-center gap-1.5 rounded-md px-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: running ? "Working" : "Activity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[11px]", children: [
+        "\xB7 ",
+        tools.length,
+        " tool call",
+        tools.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityRow, { tool }) }, tool.id)) })
+  ] });
 }
 function ToolActivityRow({ tool }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
@@ -819,17 +1067,48 @@ function MessageBubble({
   renderTool
 }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-end gap-1", children: [
+      message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "span",
+        {
+          className: "inline-flex max-w-[12rem] items-center gap-1 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Paperclip, { className: "size-3 shrink-0 opacity-70" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate", children: file.name })
+          ]
+        },
+        `${file.name}-${index}`
+      )) }) : null,
+      message.text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex max-w-[85%] items-end gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageCopyButton, { text: message.text })
+      ] }) : null
+    ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName, className: "mt-0.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
+      message.text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageCopyButton, { text: message.text }) : null
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "min-w-0 max-w-[85%]", children: [
       message.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400", children: message.error }) : empty && message.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TypingDots, {}) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Markdown, { text: message.text, className: "text-sm" }),
       showToolActivity ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
     ] })
   ] });
 }
+function MessageCopyButton({ text }) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: () => void copy(), className: "frankie-message-copy inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground transition hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-label": copied ? "Copied" : "Copy message", title: copied ? "Copied" : "Copy message", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Check, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Copy, { className: "size-3.5", "aria-hidden": "true" }) });
+}
 function TypingDots() {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "span",
@@ -880,8 +1159,11 @@ function ChatPanel({
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
   const { messages, busy, error, send, stop, reset } = useFrankieChat();
-  const scrollRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const scrollRef = (0, import_react8.useRef)(null);
+  const features = config?.features;
+  const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
+  const [model, setModel] = (0, import_react8.useState)(void 0);
+  (0, import_react8.useEffect)(() => {
     const node = scrollRef.current;
     if (!node) return;
     const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
@@ -907,10 +1189,14 @@ function ChatPanel({
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardTitle, { children: name }),
             config?.branding.tagline ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardDescription, { children: config.branding.tagline }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.RotateCcw, {}) }),
-          onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, {}) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.RotateCcw, {}) }),
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react4.X, {}) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: configError }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "frankie-config-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Frankie couldn\u2019t start" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: configError }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
+        ] }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-4", children: messages.map(
@@ -936,7 +1222,9 @@ function ChatPanel({
               busy,
               disabled: Boolean(configError),
               ...placeholder ? { placeholder } : {},
-              ...autoFocus ? { autoFocus } : {}
+              ...autoFocus ? { autoFocus } : {},
+              ...features?.attachments.enabled ? { attachments: features.attachments } : {},
+              ...pickerModels.length ? { modelPicker: { models: pickerModels, value: model ?? pickerModels[0]?.id, onChange: setModel } } : {}
             }
           ) }),
           footer
@@ -959,13 +1247,13 @@ function FrankieWidget({
 }) {
   const { config } = useFrankie();
   const theme = useFrankieTheme();
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react8.useState)(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react9.useState)(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = (next) => {
     if (controlledOpen === void 0) setUncontrolledOpen(next);
     onOpenChange?.(next);
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setOpen(false);
@@ -993,7 +1281,7 @@ function FrankieWidget({
             "aria-expanded": open,
             "aria-label": open ? "Close the assistant" : label,
             title: label,
-            children: open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.MessageCircle, { className: "size-5" })
+            children: open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.MessageCircle, { className: "size-5" })
           }
         )
       ] })
@@ -1017,10 +1305,45 @@ function FrankieInline({ className, style, ...panelProps }) {
   );
 }
 
-// src/components/ui/separator.tsx
+// src/components/chat/FrankieChatPage.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+function FrankieChatPage({
+  className,
+  style,
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "main",
+    {
+      className,
+      style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        FrankieInline,
+        {
+          header,
+          footer,
+          emptyState,
+          renderMessage,
+          renderTool,
+          placeholder,
+          autoFocus
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Separator({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1037,6 +1360,7 @@ function Separator({ className }) {
   Composer,
   FRANKIE_CLOUD_URL,
   FrankieApiError,
+  FrankieChatPage,
   FrankieClient,
   FrankieInline,
   FrankieProvider,