@frankieai/react 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, TextareaHTMLAttributes } from 'react';
-import { PublicWidgetConfig, CreateSessionResponse, FrankieServerEvent, WidgetTheme } from '@frankieai/core';
+import { PublicWidgetConfig, CreateSessionResponse, ChatAttachment, FrankieServerEvent, WidgetTheme } from '@frankieai/core';
 export { FrankieServerEvent, PublicWidgetConfig, WidgetTheme } from '@frankieai/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -61,6 +61,10 @@ declare class FrankieClient {
     send(input: {
         message: string;
         context?: PageContext;
+        /** Model id chosen by the user, honoured only if the workspace allows it. */
+        model?: string;
+        /** Files attached to this turn. */
+        attachments?: ChatAttachment[];
         signal?: AbortSignal;
     }, onEvent: (event: FrankieServerEvent) => void): Promise<void>;
     private unwrap;
@@ -100,10 +104,16 @@ interface ToolActivity {
     status: "running" | "done" | "failed" | "denied";
     detail?: string;
 }
+/** A file shown on a user message (name/type only — the bytes aren't kept in the transcript). */
+interface MessageAttachment {
+    name: string;
+    mimeType: string;
+}
 interface UserChatMessage {
     id: string;
     role: "user";
     text: string;
+    attachments?: MessageAttachment[];
     createdAt: number;
 }
 interface AssistantChatMessage {
@@ -125,15 +135,20 @@ type ChatMessage = UserChatMessage | AssistantChatMessage;
  */
 declare function applyEvent(message: AssistantChatMessage, event: FrankieServerEvent): AssistantChatMessage;
 declare function newAssistantMessage(id: string): AssistantChatMessage;
-declare function newUserMessage(id: string, text: string): UserChatMessage;
+declare function newUserMessage(id: string, text: string, attachments?: MessageAttachment[]): UserChatMessage;
 
+/** Extra inputs a turn can carry: attached files and a chosen model. */
+interface SendOptions {
+    attachments?: ChatAttachment[];
+    model?: string;
+}
 interface UseFrankieChatResult {
     messages: ChatMessage[];
     /** True from the moment a message is sent until the turn ends. */
     busy: boolean;
     /** Set when the turn failed outright (network, auth, rate limit). */
     error?: string;
-    send: (text: string) => Promise<void>;
+    send: (text: string, opts?: SendOptions) => Promise<void>;
     /** Abort the in-flight turn. The partial answer stays in the transcript. */
     stop: () => void;
     /** Clear the transcript and start a brand-new server session. */
@@ -200,15 +215,37 @@ interface FrankieInlineProps extends ChatPanelProps {
  */
 declare function FrankieInline({ className, style, ...panelProps }: FrankieInlineProps): react.JSX.Element;
 
+interface ComposerAttachmentsConfig {
+    enabled: boolean;
+    /** Accepted MIME patterns, e.g. "image/*". */
+    accept: string[];
+    maxCount: number;
+    maxMb: number;
+}
+interface ComposerModelPicker {
+    models: {
+        id: string;
+        label: string;
+    }[];
+    value?: string;
+    onChange: (id: string) => void;
+}
 interface ComposerProps {
-    onSend: (text: string) => void;
+    onSend: (text: string, opts?: {
+        attachments?: ChatAttachment[];
+        model?: string;
+    }) => void;
     onStop: () => void;
     busy: boolean;
     placeholder?: string;
     disabled?: boolean;
     autoFocus?: boolean;
+    /** Enables the attach button when provided and `enabled`. */
+    attachments?: ComposerAttachmentsConfig;
+    /** Enables a model dropdown when provided with at least one model. */
+    modelPicker?: ComposerModelPicker;
 }
-declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus }: ComposerProps): react.JSX.Element;
+declare function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }: ComposerProps): react.JSX.Element;
 
 interface MessageBubbleProps {
     message: ChatMessage;
@@ -307,4 +344,4 @@ declare function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark";
 /** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, MessageBubble, type PageContext, ScrollArea, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };
+export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };

package/dist/index.js

@@ -91,7 +91,9 @@ var FrankieClient = class {
     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",
@@ -285,8 +287,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
@@ -332,24 +334,39 @@ function useFrankieChat() {
     );
   }, []);
   const send = 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));
-        });
+        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;
+            patchAssistant(assistantId, (message) => applyEvent(message, event));
+          }
+        );
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
@@ -391,8 +408,8 @@ function useFrankieChat() {
 }
 
 // src/components/chat/FrankieWidget.tsx
-import { MessageCircle, X as X3 } from "lucide-react";
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { MessageCircle, X as X4 } from "lucide-react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/lib/theme.ts
 function themeToCssVars(theme) {
@@ -452,8 +469,8 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 }
 
 // src/components/chat/ChatPanel.tsx
-import { RotateCcw, X as X2 } from "lucide-react";
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { RotateCcw, X as X3 } from "lucide-react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 
 // src/components/ui/avatar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -512,7 +529,7 @@ var ScrollArea = forwardRef(
 );
 
 // src/components/chat/Composer.tsx
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp, Paperclip, Square, X } from "lucide-react";
 import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/components/ui/textarea.tsx
@@ -535,60 +552,189 @@ var Textarea = forwardRef2(
 );
 
 // src/components/chat/Composer.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs } from "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] = useState3("");
+  const [files, setFiles] = useState3([]);
+  const [fileError, setFileError] = useState3(void 0);
   const textareaRef = useRef2(null);
+  const fileInputRef = useRef2(null);
+  const canAttach = Boolean(attachments?.enabled);
+  const models = modelPicker?.models ?? [];
   useEffect3(() => {
     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 = useCallback2(
+    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 = useCallback2(() => {
     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__ */ jsxs(
     "form",
     {
-      className: "flex items-end gap-2",
+      className: "flex flex-col gap-2",
       onSubmit: (event) => {
         event.preventDefault();
         submit();
       },
       children: [
-        /* @__PURE__ */ jsx7(
-          Textarea,
+        files.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: files.map((file) => /* @__PURE__ */ 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__ */ jsx7(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ jsx7(Square, {}) }) : /* @__PURE__ */ jsx7(Button, { type: "submit", size: "icon", disabled: disabled || value.trim().length === 0, "aria-label": "Send", children: /* @__PURE__ */ jsx7(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__ */ jsx7(Paperclip, { className: "size-3 shrink-0 opacity-70" }),
+              /* @__PURE__ */ jsx7("span", { className: "truncate", children: file.name }),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => removeFile(file.id),
+                  "aria-label": `Remove ${file.name}`,
+                  className: "frankie-focus shrink-0 opacity-60 hover:opacity-100",
+                  children: /* @__PURE__ */ jsx7(X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        )) }) : null,
+        fileError ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-red-600 dark:text-red-400", children: fileError }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          canAttach ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                hidden: true,
+                accept: attachments?.accept.join(","),
+                onChange: (event) => {
+                  void addFiles(event.target.files);
+                  event.target.value = "";
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              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__ */ jsx7(Paperclip, {})
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx7(
+            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__ */ jsx7(
+            "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__ */ jsx7("option", { value: model.id, children: model.label }, model.id))
+            }
+          ) : null,
+          busy ? /* @__PURE__ */ jsx7(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ jsx7(Square, {}) }) : /* @__PURE__ */ jsx7(Button, { type: "submit", size: "icon", disabled: disabled || nothingToSend, "aria-label": "Send", children: /* @__PURE__ */ jsx7(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
+import { Paperclip as Paperclip2 } from "lucide-react";
 
 // src/components/chat/Markdown.tsx
-import { Fragment } from "react";
+import { Fragment as Fragment2 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function Markdown({ text, className }) {
   return /* @__PURE__ */ jsx8("div", { className: cn("frankie-prose", className), children: renderBlocks(text) });
@@ -673,7 +819,7 @@ function renderInline(text) {
     const token = match[0];
     const start = match.index;
     if (start > lastIndex) nodes.push(text.slice(lastIndex, start));
-    nodes.push(/* @__PURE__ */ jsx8(Fragment, { children: renderToken(token) }, start));
+    nodes.push(/* @__PURE__ */ jsx8(Fragment2, { children: renderToken(token) }, start));
     lastIndex = start + token.length;
   }
   if (lastIndex < text.length) nodes.push(text.slice(lastIndex));
@@ -690,7 +836,7 @@ function renderToken(token) {
 }
 
 // src/components/chat/ToolActivityList.tsx
-import { Check, Loader2, ShieldAlert, X } from "lucide-react";
+import { Check, Loader2, ShieldAlert, X as X2 } from "lucide-react";
 
 // src/components/ui/badge.tsx
 import { cva as cva2 } from "class-variance-authority";
@@ -738,7 +884,7 @@ function ToolIcon({ status }) {
     case "denied":
       return /* @__PURE__ */ jsx10(ShieldAlert, { className: "size-3", "aria-hidden": "true" });
     default:
-      return /* @__PURE__ */ jsx10(X, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ jsx10(X2, { className: "size-3", "aria-hidden": "true" });
   }
 }
 function badgeVariant(status) {
@@ -758,7 +904,20 @@ function MessageBubble({
   renderTool
 }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx11("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx11("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__ */ jsxs3("div", { className: "flex flex-col items-end gap-1", children: [
+      message.attachments?.length ? /* @__PURE__ */ jsx11("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ jsxs3(
+        "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__ */ jsx11(Paperclip2, { className: "size-3 shrink-0 opacity-70" }),
+            /* @__PURE__ */ jsx11("span", { className: "truncate", children: file.name })
+          ]
+        },
+        `${file.name}-${index}`
+      )) }) : null,
+      message.text ? /* @__PURE__ */ jsx11("div", { className: "max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }) : null
+    ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
   return /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
@@ -820,6 +979,9 @@ function ChatPanel({
   const theme = useFrankieTheme();
   const { messages, busy, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef3(null);
+  const features = config?.features;
+  const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
+  const [model, setModel] = useState4(void 0);
   useEffect4(() => {
     const node = scrollRef.current;
     if (!node) return;
@@ -847,7 +1009,7 @@ function ChatPanel({
             config?.branding.tagline ? /* @__PURE__ */ jsx13(CardDescription, { children: config.branding.tagline }) : null
           ] }),
           /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ jsx13(RotateCcw, {}) }),
-          onClose ? /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx13(X2, {}) }) : null
+          onClose ? /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx13(X3, {}) }) : null
         ] }),
         /* @__PURE__ */ jsx13(CardContent, { children: /* @__PURE__ */ jsx13(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: configError }) : loading ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
@@ -875,7 +1037,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
@@ -898,7 +1062,7 @@ function FrankieWidget({
 }) {
   const { config } = useFrankie();
   const theme = useFrankieTheme();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState4(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState5(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = (next) => {
     if (controlledOpen === void 0) setUncontrolledOpen(next);
@@ -932,7 +1096,7 @@ function FrankieWidget({
             "aria-expanded": open,
             "aria-label": open ? "Close the assistant" : label,
             title: label,
-            children: open ? /* @__PURE__ */ jsx14(X3, { className: "size-5" }) : /* @__PURE__ */ jsx14(MessageCircle, { className: "size-5" })
+            children: open ? /* @__PURE__ */ jsx14(X4, { className: "size-5" }) : /* @__PURE__ */ jsx14(MessageCircle, { className: "size-5" })
           }
         )
       ] })