@wallavi/widget 1.4.4 → 1.5.0

package/dist/index.d.mts

@@ -9,13 +9,25 @@ type ToolPart = {
     output?: unknown;
     errorText?: string;
 };
+type PickerPart = {
+    type: "picker";
+    pickerId: string;
+    paramName: string;
+    toolName: string;
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    selectedValue?: string;
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart;
+} | ToolPart | PickerPart;
 type Message = {
     id: string;
     role: "user" | "assistant";
@@ -170,6 +182,7 @@ interface UseChatReturn {
     send: (text?: string) => Promise<void>;
     regenerate: () => Promise<void>;
     reset: () => void;
+    selectPickerOption: (pickerId: string, paramName: string, value: string, label: string) => Promise<void>;
 }
 declare function useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides, }: UseChatOptions): UseChatReturn;
 

package/dist/index.d.ts

@@ -9,13 +9,25 @@ type ToolPart = {
     output?: unknown;
     errorText?: string;
 };
+type PickerPart = {
+    type: "picker";
+    pickerId: string;
+    paramName: string;
+    toolName: string;
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    selectedValue?: string;
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart;
+} | ToolPart | PickerPart;
 type Message = {
     id: string;
     role: "user" | "assistant";
@@ -170,6 +182,7 @@ interface UseChatReturn {
     send: (text?: string) => Promise<void>;
     regenerate: () => Promise<void>;
     reset: () => void;
+    selectPickerOption: (pickerId: string, paramName: string, value: string, label: string) => Promise<void>;
 }
 declare function useChat({ agentId, workspaceId, source, userContext, persist, onNavigate, playgroundOverrides, }: UseChatOptions): UseChatReturn;
 

package/dist/index.js

@@ -34,6 +34,7 @@ var ReactMarkdownLib__default = /*#__PURE__*/_interopDefault(ReactMarkdownLib);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 
 // src/bubble-widget.tsx
+var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 
 // src/types.ts
 function getContrastColor(hex) {
@@ -83,6 +84,10 @@ function useChat({
   playgroundOverrides
 }) {
   const persistKey = persist ? `wallavi_${agentId}` : null;
+  const onNavigateRef = react.useRef(onNavigate);
+  react.useEffect(() => {
+    onNavigateRef.current = onNavigate;
+  });
   const [messages, setMessages] = react.useState(() => {
     if (!persistKey || typeof window === "undefined") return [];
     try {
@@ -130,6 +135,118 @@ function useChat({
       }
     }
   }, [persistKey]);
+  const applyStreamEvent = react.useCallback((proto, msgId) => {
+    if (proto.type === "navigate") {
+      if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
+      return;
+    }
+    setMessages((prev) => {
+      const idx = prev.findIndex((m) => m.id === msgId);
+      if (idx === -1) return prev;
+      const existing = prev[idx];
+      const msg = { id: existing.id, role: existing.role, parts: [...existing.parts] };
+      switch (proto.type) {
+        case "text-delta": {
+          const textIdx = msg.parts.findIndex((p) => p.type === "text");
+          if (textIdx === -1) {
+            msg.parts.push({ type: "text", text: proto.delta });
+          } else {
+            const p = msg.parts[textIdx];
+            msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
+          }
+          break;
+        }
+        case "reasoning-delta": {
+          const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
+          if (rIdx === -1) {
+            msg.parts.unshift({ type: "reasoning", text: proto.delta });
+          } else {
+            const p = msg.parts[rIdx];
+            msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
+          }
+          break;
+        }
+        case "tool-input-available": {
+          msg.parts.push({
+            type: "tool",
+            toolCallId: proto.toolCallId,
+            toolName: proto.toolName,
+            input: proto.input ?? {},
+            status: "running"
+          });
+          break;
+        }
+        case "tool-output-available": {
+          const tIdx = msg.parts.findIndex(
+            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+          );
+          if (tIdx !== -1) {
+            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "done", output: proto.output };
+          }
+          break;
+        }
+        case "tool-output-error": {
+          const tIdx = msg.parts.findIndex(
+            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+          );
+          if (tIdx !== -1) {
+            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "error", errorText: proto.errorText };
+          }
+          break;
+        }
+        case "picker": {
+          msg.parts.push({
+            type: "picker",
+            pickerId: proto.pickerId,
+            paramName: proto.paramName,
+            toolName: proto.toolName,
+            label: proto.label,
+            options: proto.options
+          });
+          break;
+        }
+      }
+      const copy = [...prev];
+      copy[idx] = msg;
+      return copy;
+    });
+  }, []);
+  const fetchAndStream = react.useCallback(async (opts) => {
+    const { input: userInput, msgId, extraMetadata } = opts;
+    const isPrivate = Boolean(workspaceId);
+    const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+    const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { Authorization: `Bearer ${token}` } : {}
+      },
+      body: JSON.stringify({
+        input: userInput,
+        agentId,
+        ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
+        source,
+        ...userContext?.userName ? { userName: userContext.userName } : {},
+        ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
+        userMetadata: {
+          ...userContext?.metadata ?? {},
+          ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
+          headers: {
+            ...token ? { Authorization: `Bearer ${token}` } : {},
+            ...userContext?.headers ?? {}
+          },
+          ...extraMetadata ?? {}
+        }
+      })
+    });
+    if (!res.ok) {
+      const errText = await res.text().catch(() => "");
+      throw new Error(errText || `API error ${res.status}`);
+    }
+    if (!res.body) throw new Error("No stream body");
+    await consumeStream(res.body, (proto) => applyStreamEvent(proto, msgId));
+  }, [agentId, workspaceId, source, threadId, userContext, playgroundOverrides, applyStreamEvent]);
   const send = react.useCallback(
     async (text) => {
       const userInput = (text ?? input).trim();
@@ -143,144 +260,59 @@ function useChat({
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
-      setMessages((prev) => [
-        ...prev,
-        { id: assistantMsgId, role: "assistant", parts: [] }
-      ]);
+      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
       try {
-        const isPrivate = Boolean(workspaceId);
-        const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
-        const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
-        const res = await fetch(url, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            ...token ? { Authorization: `Bearer ${token}` } : {}
-          },
-          body: JSON.stringify({
-            input: userInput,
-            agentId,
-            // Private endpoint: workspaceId + threadId in URL, playgroundOverrides allowed.
-            // Public endpoint: threadId in body (no workspaceId, no playgroundOverrides).
-            ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
-            source,
-            ...userContext?.userName ? { userName: userContext.userName } : {},
-            ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
-            userMetadata: {
-              ...userContext?.metadata ?? {},
-              ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
-              // Forward client auth headers to the pipeline (for action/tool execution).
-              // On the private path, also include the Wallavi Clerk token.
-              headers: {
-                ...token ? { Authorization: `Bearer ${token}` } : {},
-                ...userContext?.headers ?? {}
-              }
-            }
-          })
+        await fetchAndStream({ input: userInput, msgId: assistantMsgId });
+      } catch {
+        setMessages((prev) => {
+          const idx = prev.findIndex((m) => m.id === assistantMsgId);
+          if (idx === -1) return prev;
+          const copy = [...prev];
+          const err = copy[idx];
+          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
+          return copy;
+        });
+      }
+      setStreaming(false);
+      streamingMsgIdRef.current = null;
+    },
+    [input, streaming, fetchAndStream]
+  );
+  const selectPickerOption = react.useCallback(
+    async (pickerId, paramName, value, label) => {
+      if (streaming) return;
+      setMessages(
+        (prev) => prev.map((msg) => ({
+          ...msg,
+          parts: msg.parts.map(
+            (part) => part.type === "picker" && part.pickerId === pickerId ? { ...part, selectedValue: value } : part
+          )
+        }))
+      );
+      setStreaming(true);
+      const assistantMsgId = newId();
+      streamingMsgIdRef.current = assistantMsgId;
+      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
+      try {
+        await fetchAndStream({
+          input: label,
+          msgId: assistantMsgId,
+          extraMetadata: { __pickerSelection: { pickerId, paramName, value, label } }
         });
-        if (!res.ok) {
-          const errText = await res.text().catch(() => "");
-          throw new Error(errText || `API error ${res.status}`);
-        }
-        if (!res.body) throw new Error("No stream body");
-        const applyEvent = (proto) => {
-          if (proto.type === "navigate") {
-            if (proto.path.startsWith("/")) onNavigate?.(proto.path);
-            return;
-          }
-          setMessages((prev) => {
-            const idx = prev.findIndex((m) => m.id === assistantMsgId);
-            if (idx === -1) return prev;
-            const existing = prev[idx];
-            const msg = {
-              id: existing.id,
-              role: existing.role,
-              parts: [...existing.parts]
-            };
-            switch (proto.type) {
-              case "text-delta": {
-                const textIdx = msg.parts.findIndex((p) => p.type === "text");
-                if (textIdx === -1) {
-                  msg.parts.push({ type: "text", text: proto.delta });
-                } else {
-                  const p = msg.parts[textIdx];
-                  msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
-                }
-                break;
-              }
-              case "reasoning-delta": {
-                const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
-                if (rIdx === -1) {
-                  msg.parts.unshift({ type: "reasoning", text: proto.delta });
-                } else {
-                  const p = msg.parts[rIdx];
-                  msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
-                }
-                break;
-              }
-              case "tool-input-available": {
-                msg.parts.push({
-                  type: "tool",
-                  toolCallId: proto.toolCallId,
-                  toolName: proto.toolName,
-                  input: proto.input ?? {},
-                  status: "running"
-                });
-                break;
-              }
-              case "tool-output-available": {
-                const tIdx = msg.parts.findIndex(
-                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-                );
-                if (tIdx !== -1) {
-                  msg.parts[tIdx] = {
-                    ...msg.parts[tIdx],
-                    status: "done",
-                    output: proto.output
-                  };
-                }
-                break;
-              }
-              case "tool-output-error": {
-                const tIdx = msg.parts.findIndex(
-                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-                );
-                if (tIdx !== -1) {
-                  msg.parts[tIdx] = {
-                    ...msg.parts[tIdx],
-                    status: "error",
-                    errorText: proto.errorText
-                  };
-                }
-                break;
-              }
-              default:
-                break;
-            }
-            const copy = [...prev];
-            copy[idx] = msg;
-            return copy;
-          });
-        };
-        await consumeStream(res.body, applyEvent);
       } catch {
         setMessages((prev) => {
           const idx = prev.findIndex((m) => m.id === assistantMsgId);
           if (idx === -1) return prev;
           const copy = [...prev];
           const err = copy[idx];
-          copy[idx] = {
-            id: err.id,
-            role: err.role,
-            parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }]
-          };
+          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
           return copy;
         });
       }
       setStreaming(false);
       streamingMsgIdRef.current = null;
     },
-    [input, streaming, agentId, workspaceId, source, threadId, userContext]
+    [streaming, fetchAndStream]
   );
   const regenerate = react.useCallback(async () => {
     if (streaming) return;
@@ -295,7 +327,7 @@ function useChat({
     });
     await send(lastText);
   }, [streaming, messages, send]);
-  return { messages, input, setInput, streaming, threadId, send, regenerate, reset };
+  return { messages, input, setInput, streaming, threadId, send, regenerate, reset, selectPickerOption };
 }
 function DefaultIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
@@ -401,7 +433,6 @@ function ChatHeader({
 var Avatar2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
 var AvatarImage2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
 var AvatarFallback2 = ({ style, ...p }) => /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
-var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 var ReactMarkdown = ReactMarkdownLib__default.default;
 function ThinkingDots() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -470,18 +501,71 @@ function ReasoningBlock({ text }) {
     open && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground/80 whitespace-pre-wrap border-l-2 border-muted pl-2 leading-relaxed", children: text })
   ] });
 }
+function PickerSelector({
+  part,
+  disabled,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: "12px 16px",
+        borderRadius: "0 16px 16px 16px",
+        backgroundColor: "var(--muted, #f4f4f5)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--muted-foreground, #71717a)", fontWeight: 500 }, children: part.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: part.options.map((opt) => {
+          const isSelected = part.selectedValue === opt.value;
+          const isConsumed = !!part.selectedValue && !isSelected;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                if (!part.selectedValue && !disabled) {
+                  onSelect(part.pickerId, part.paramName, opt.value, opt.label);
+                }
+              },
+              disabled: disabled || !!part.selectedValue,
+              style: {
+                fontSize: 13,
+                borderRadius: 20,
+                padding: "6px 14px",
+                border: isSelected ? "1.5px solid var(--primary, #19191c)" : "1.5px solid var(--border, #e4e4e7)",
+                backgroundColor: isSelected ? "var(--primary, #19191c)" : "transparent",
+                color: isSelected ? "var(--primary-foreground, #fff)" : "var(--foreground, #09090b)",
+                cursor: disabled || !!part.selectedValue ? "default" : "pointer",
+                opacity: isConsumed ? 0.35 : 1,
+                transition: "all 0.15s ease",
+                fontWeight: isSelected ? 500 : 400
+              },
+              children: opt.label
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
+}
 function MessageBubble({
   message,
   userColor,
   agentName,
   profilePicture,
   isStreaming,
-  showThinking = true
+  showThinking = true,
+  onPickerSelect
 }) {
   const isUser = message.role === "user";
   const textPart = message.parts.find((p) => p.type === "text");
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
+  const pickerParts = message.parts.filter((p) => p.type === "picker");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -494,12 +578,22 @@ function MessageBubble({
     ) });
   }
   const visibleToolParts = showThinking ? toolParts : [];
-  const isEmpty = !textPart?.text && visibleToolParts.length === 0;
+  const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5 items-start", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
       visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
+      pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+        PickerSelector,
+        {
+          part: p,
+          disabled: isStreaming ?? false,
+          onSelect: onPickerSelect ?? (() => {
+          })
+        },
+        p.pickerId
+      )),
       isEmpty && isStreaming ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingDots, {}) : textPart?.text ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed overflow-hidden prose prose-sm max-w-none prose-p:my-1 prose-headings:font-semibold prose-headings:my-1.5 prose-ul:my-1 prose-li:my-0.5 prose-strong:font-semibold", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ReactMarkdown,
@@ -544,7 +638,8 @@ function ChatMessages({
   initialMessages = [],
   suggestedMessages = [],
   showThinking = true,
-  onSuggest
+  onSuggest,
+  onPickerSelect
 }) {
   const bottomRef = react.useRef(null);
   const showGreeting = messages.length === 0;
@@ -565,7 +660,8 @@ function ChatMessages({
         agentName,
         profilePicture,
         isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
-        showThinking
+        showThinking,
+        onPickerSelect
       },
       msg.id
     )) }),
@@ -599,6 +695,11 @@ function ChatInput({
       textareaRef.current.style.height = "auto";
     }
   }, [input]);
+  react.useEffect(() => {
+    if (!streaming) {
+      textareaRef.current?.focus();
+    }
+  }, [streaming]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -655,7 +756,6 @@ function ChatInput({
     ] })
   ] });
 }
-var cn3 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 function ChatWidget({
   agentId,
   workspaceId,
@@ -696,7 +796,7 @@ function ChatWidget({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn3(
+      className: cn(
         "flex flex-col overflow-hidden rounded-2xl border shadow-xl bg-background h-full",
         className
       ),
@@ -726,7 +826,8 @@ function ChatWidget({
             initialMessages,
             suggestedMessages,
             showThinking,
-            onSuggest: (msg) => chat.send(msg)
+            onSuggest: (msg) => chat.send(msg),
+            onPickerSelect: chat.selectPickerOption
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -825,7 +926,6 @@ function useAutoConfig(agentId, enabled) {
   }, [agentId, enabled]);
   return result;
 }
-var cn4 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 var KEY_EXPANDED = "wallavi_bubble_expanded";
 var KEY_DISMISSED = "wallavi_bubble_dismissed";
 function BubbleWidget({
@@ -873,35 +973,13 @@ function BubbleWidget({
     if (localStorage.getItem(KEY_EXPANDED) === "true") setExpanded(true);
   }, []);
   const remote = useAutoConfig(chatProps.agentId, autoConfig);
-  const [resolvedBubbleIcon, setResolvedBubbleIcon] = react.useState(bubbleIconUrlProp);
-  const [resolvedAutoOpen, setResolvedAutoOpen] = react.useState(autoOpenProp);
-  const [resolvedKeyboardShortcut, setResolvedKeyboardShortcut] = react.useState(keyboardShortcutProp);
-  const [resolvedPosition, setResolvedPosition] = react.useState(positionProp ?? "bottom-right");
-  const [resolvedBubbleSize, setResolvedBubbleSize] = react.useState(bubbleSizeProp ?? 52);
-  const [resolvedWidth, setResolvedWidth] = react.useState(widthProp ?? 360);
-  const [resolvedHeight, setResolvedHeight] = react.useState(heightProp ?? 580);
-  react.useEffect(() => {
-    if (remote.loading) return;
-    if (!bubbleIconUrlProp) setResolvedBubbleIcon(remote.bubbleIconUrl);
-    if (!autoOpenProp) setResolvedAutoOpen(remote.autoOpen);
-    if (!keyboardShortcutProp) setResolvedKeyboardShortcut(remote.keyboardShortcut);
-    if (!positionProp) setResolvedPosition(remote.position);
-    if (bubbleSizeProp == null) setResolvedBubbleSize(remote.bubbleSize);
-    if (widthProp == null) setResolvedWidth(remote.panelWidth);
-    if (heightProp == null) setResolvedHeight(remote.panelHeight);
-  }, [remote.loading]);
-  react.useEffect(() => {
-    if (autoOpenProp) setResolvedAutoOpen(true);
-  }, [autoOpenProp]);
-  react.useEffect(() => {
-    if (keyboardShortcutProp) setResolvedKeyboardShortcut(true);
-  }, [keyboardShortcutProp]);
-  react.useEffect(() => {
-    if (bubbleIconUrlProp) setResolvedBubbleIcon(bubbleIconUrlProp);
-  }, [bubbleIconUrlProp]);
-  react.useEffect(() => {
-    if (positionProp) setResolvedPosition(positionProp);
-  }, [positionProp]);
+  const resolvedPosition = positionProp ?? remote.position;
+  const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
+  const resolvedAutoOpen = autoOpenProp || remote.autoOpen;
+  const resolvedKeyboardShortcut = keyboardShortcutProp || remote.keyboardShortcut;
+  const resolvedBubbleSize = bubbleSizeProp ?? remote.bubbleSize;
+  const resolvedWidth = widthProp ?? remote.panelWidth;
+  const resolvedHeight = heightProp ?? remote.panelHeight;
   const definedChatProps = Object.fromEntries(
     Object.entries(chatProps).filter(([, v]) => v !== void 0)
   );
@@ -911,18 +989,18 @@ function BubbleWidget({
     agentId: chatProps.agentId,
     agentName: chatProps.agentName
   };
+  const setOpenRef = react.useRef(setOpen);
+  react.useEffect(() => {
+    setOpenRef.current = setOpen;
+  });
   react.useEffect(() => {
     if (!resolvedAutoOpen || autoOpenedRef.current) return;
     const dismissedUntil = Number(localStorage.getItem(KEY_DISMISSED) ?? 0);
     if (dismissedUntil < Date.now()) {
       autoOpenedRef.current = true;
-      setOpen(true);
+      setOpenRef.current(true);
     }
   }, [resolvedAutoOpen]);
-  const setOpenRef = react.useRef(setOpen);
-  react.useEffect(() => {
-    setOpenRef.current = setOpen;
-  });
   react.useEffect(() => {
     if (!resolvedKeyboardShortcut) return;
     const onKey = (e) => {
@@ -988,7 +1066,7 @@ function BubbleWidget({
                 onClose: handleClose,
                 onExpand: toggleExpanded,
                 expanded,
-                className: cn4("shadow-2xl h-full", panelClassName)
+                className: cn("shadow-2xl h-full", panelClassName)
               }
             )
           }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
 import { X, RotateCcw, Loader2, ArrowUp, Zap, ChevronDown, CheckCircle2, AlertCircle } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -8,6 +8,7 @@ import ReactMarkdownLib from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 // src/bubble-widget.tsx
+var cn = (...inputs) => twMerge(clsx(inputs));
 
 // src/types.ts
 function getContrastColor(hex) {
@@ -57,6 +58,10 @@ function useChat({
   playgroundOverrides
 }) {
   const persistKey = persist ? `wallavi_${agentId}` : null;
+  const onNavigateRef = useRef(onNavigate);
+  useEffect(() => {
+    onNavigateRef.current = onNavigate;
+  });
   const [messages, setMessages] = useState(() => {
     if (!persistKey || typeof window === "undefined") return [];
     try {
@@ -104,6 +109,118 @@ function useChat({
       }
     }
   }, [persistKey]);
+  const applyStreamEvent = useCallback((proto, msgId) => {
+    if (proto.type === "navigate") {
+      if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
+      return;
+    }
+    setMessages((prev) => {
+      const idx = prev.findIndex((m) => m.id === msgId);
+      if (idx === -1) return prev;
+      const existing = prev[idx];
+      const msg = { id: existing.id, role: existing.role, parts: [...existing.parts] };
+      switch (proto.type) {
+        case "text-delta": {
+          const textIdx = msg.parts.findIndex((p) => p.type === "text");
+          if (textIdx === -1) {
+            msg.parts.push({ type: "text", text: proto.delta });
+          } else {
+            const p = msg.parts[textIdx];
+            msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
+          }
+          break;
+        }
+        case "reasoning-delta": {
+          const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
+          if (rIdx === -1) {
+            msg.parts.unshift({ type: "reasoning", text: proto.delta });
+          } else {
+            const p = msg.parts[rIdx];
+            msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
+          }
+          break;
+        }
+        case "tool-input-available": {
+          msg.parts.push({
+            type: "tool",
+            toolCallId: proto.toolCallId,
+            toolName: proto.toolName,
+            input: proto.input ?? {},
+            status: "running"
+          });
+          break;
+        }
+        case "tool-output-available": {
+          const tIdx = msg.parts.findIndex(
+            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+          );
+          if (tIdx !== -1) {
+            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "done", output: proto.output };
+          }
+          break;
+        }
+        case "tool-output-error": {
+          const tIdx = msg.parts.findIndex(
+            (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+          );
+          if (tIdx !== -1) {
+            msg.parts[tIdx] = { ...msg.parts[tIdx], status: "error", errorText: proto.errorText };
+          }
+          break;
+        }
+        case "picker": {
+          msg.parts.push({
+            type: "picker",
+            pickerId: proto.pickerId,
+            paramName: proto.paramName,
+            toolName: proto.toolName,
+            label: proto.label,
+            options: proto.options
+          });
+          break;
+        }
+      }
+      const copy = [...prev];
+      copy[idx] = msg;
+      return copy;
+    });
+  }, []);
+  const fetchAndStream = useCallback(async (opts) => {
+    const { input: userInput, msgId, extraMetadata } = opts;
+    const isPrivate = Boolean(workspaceId);
+    const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+    const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token ? { Authorization: `Bearer ${token}` } : {}
+      },
+      body: JSON.stringify({
+        input: userInput,
+        agentId,
+        ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
+        source,
+        ...userContext?.userName ? { userName: userContext.userName } : {},
+        ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
+        userMetadata: {
+          ...userContext?.metadata ?? {},
+          ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
+          headers: {
+            ...token ? { Authorization: `Bearer ${token}` } : {},
+            ...userContext?.headers ?? {}
+          },
+          ...extraMetadata ?? {}
+        }
+      })
+    });
+    if (!res.ok) {
+      const errText = await res.text().catch(() => "");
+      throw new Error(errText || `API error ${res.status}`);
+    }
+    if (!res.body) throw new Error("No stream body");
+    await consumeStream(res.body, (proto) => applyStreamEvent(proto, msgId));
+  }, [agentId, workspaceId, source, threadId, userContext, playgroundOverrides, applyStreamEvent]);
   const send = useCallback(
     async (text) => {
       const userInput = (text ?? input).trim();
@@ -117,144 +234,59 @@ function useChat({
       setStreaming(true);
       const assistantMsgId = newId();
       streamingMsgIdRef.current = assistantMsgId;
-      setMessages((prev) => [
-        ...prev,
-        { id: assistantMsgId, role: "assistant", parts: [] }
-      ]);
+      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
       try {
-        const isPrivate = Boolean(workspaceId);
-        const token = isPrivate && typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
-        const url = isPrivate ? `${API_URL}/api/threads/${threadId}/stream` : `${API_URL}/api/chat/stream`;
-        const res = await fetch(url, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            ...token ? { Authorization: `Bearer ${token}` } : {}
-          },
-          body: JSON.stringify({
-            input: userInput,
-            agentId,
-            // Private endpoint: workspaceId + threadId in URL, playgroundOverrides allowed.
-            // Public endpoint: threadId in body (no workspaceId, no playgroundOverrides).
-            ...isPrivate ? { workspaceId, ...playgroundOverrides ? { playgroundOverrides } : {} } : { threadId },
-            source,
-            ...userContext?.userName ? { userName: userContext.userName } : {},
-            ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
-            userMetadata: {
-              ...userContext?.metadata ?? {},
-              ...userContext?.pageContext ? { pageContext: userContext.pageContext } : {},
-              // Forward client auth headers to the pipeline (for action/tool execution).
-              // On the private path, also include the Wallavi Clerk token.
-              headers: {
-                ...token ? { Authorization: `Bearer ${token}` } : {},
-                ...userContext?.headers ?? {}
-              }
-            }
-          })
+        await fetchAndStream({ input: userInput, msgId: assistantMsgId });
+      } catch {
+        setMessages((prev) => {
+          const idx = prev.findIndex((m) => m.id === assistantMsgId);
+          if (idx === -1) return prev;
+          const copy = [...prev];
+          const err = copy[idx];
+          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
+          return copy;
+        });
+      }
+      setStreaming(false);
+      streamingMsgIdRef.current = null;
+    },
+    [input, streaming, fetchAndStream]
+  );
+  const selectPickerOption = useCallback(
+    async (pickerId, paramName, value, label) => {
+      if (streaming) return;
+      setMessages(
+        (prev) => prev.map((msg) => ({
+          ...msg,
+          parts: msg.parts.map(
+            (part) => part.type === "picker" && part.pickerId === pickerId ? { ...part, selectedValue: value } : part
+          )
+        }))
+      );
+      setStreaming(true);
+      const assistantMsgId = newId();
+      streamingMsgIdRef.current = assistantMsgId;
+      setMessages((prev) => [...prev, { id: assistantMsgId, role: "assistant", parts: [] }]);
+      try {
+        await fetchAndStream({
+          input: label,
+          msgId: assistantMsgId,
+          extraMetadata: { __pickerSelection: { pickerId, paramName, value, label } }
         });
-        if (!res.ok) {
-          const errText = await res.text().catch(() => "");
-          throw new Error(errText || `API error ${res.status}`);
-        }
-        if (!res.body) throw new Error("No stream body");
-        const applyEvent = (proto) => {
-          if (proto.type === "navigate") {
-            if (proto.path.startsWith("/")) onNavigate?.(proto.path);
-            return;
-          }
-          setMessages((prev) => {
-            const idx = prev.findIndex((m) => m.id === assistantMsgId);
-            if (idx === -1) return prev;
-            const existing = prev[idx];
-            const msg = {
-              id: existing.id,
-              role: existing.role,
-              parts: [...existing.parts]
-            };
-            switch (proto.type) {
-              case "text-delta": {
-                const textIdx = msg.parts.findIndex((p) => p.type === "text");
-                if (textIdx === -1) {
-                  msg.parts.push({ type: "text", text: proto.delta });
-                } else {
-                  const p = msg.parts[textIdx];
-                  msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
-                }
-                break;
-              }
-              case "reasoning-delta": {
-                const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
-                if (rIdx === -1) {
-                  msg.parts.unshift({ type: "reasoning", text: proto.delta });
-                } else {
-                  const p = msg.parts[rIdx];
-                  msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
-                }
-                break;
-              }
-              case "tool-input-available": {
-                msg.parts.push({
-                  type: "tool",
-                  toolCallId: proto.toolCallId,
-                  toolName: proto.toolName,
-                  input: proto.input ?? {},
-                  status: "running"
-                });
-                break;
-              }
-              case "tool-output-available": {
-                const tIdx = msg.parts.findIndex(
-                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-                );
-                if (tIdx !== -1) {
-                  msg.parts[tIdx] = {
-                    ...msg.parts[tIdx],
-                    status: "done",
-                    output: proto.output
-                  };
-                }
-                break;
-              }
-              case "tool-output-error": {
-                const tIdx = msg.parts.findIndex(
-                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
-                );
-                if (tIdx !== -1) {
-                  msg.parts[tIdx] = {
-                    ...msg.parts[tIdx],
-                    status: "error",
-                    errorText: proto.errorText
-                  };
-                }
-                break;
-              }
-              default:
-                break;
-            }
-            const copy = [...prev];
-            copy[idx] = msg;
-            return copy;
-          });
-        };
-        await consumeStream(res.body, applyEvent);
       } catch {
         setMessages((prev) => {
           const idx = prev.findIndex((m) => m.id === assistantMsgId);
           if (idx === -1) return prev;
           const copy = [...prev];
           const err = copy[idx];
-          copy[idx] = {
-            id: err.id,
-            role: err.role,
-            parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }]
-          };
+          copy[idx] = { id: err.id, role: err.role, parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }] };
           return copy;
         });
       }
       setStreaming(false);
       streamingMsgIdRef.current = null;
     },
-    [input, streaming, agentId, workspaceId, source, threadId, userContext]
+    [streaming, fetchAndStream]
   );
   const regenerate = useCallback(async () => {
     if (streaming) return;
@@ -269,7 +301,7 @@ function useChat({
     });
     await send(lastText);
   }, [streaming, messages, send]);
-  return { messages, input, setInput, streaming, threadId, send, regenerate, reset };
+  return { messages, input, setInput, streaming, threadId, send, regenerate, reset, selectPickerOption };
 }
 function DefaultIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
@@ -375,7 +407,6 @@ function ChatHeader({
 var Avatar2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { style: { position: "relative", display: "flex", flexShrink: 0, overflow: "hidden", borderRadius: "9999px", ...style }, ...p });
 var AvatarImage2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, { style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }, ...p });
 var AvatarFallback2 = ({ style, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { style: { display: "flex", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", borderRadius: "9999px", ...style }, ...p });
-var cn = (...inputs) => twMerge(clsx(inputs));
 var ReactMarkdown = ReactMarkdownLib;
 function ThinkingDots() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -444,18 +475,71 @@ function ReasoningBlock({ text }) {
     open && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground/80 whitespace-pre-wrap border-l-2 border-muted pl-2 leading-relaxed", children: text })
   ] });
 }
+function PickerSelector({
+  part,
+  disabled,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: "12px 16px",
+        borderRadius: "0 16px 16px 16px",
+        backgroundColor: "var(--muted, #f4f4f5)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--muted-foreground, #71717a)", fontWeight: 500 }, children: part.label }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: part.options.map((opt) => {
+          const isSelected = part.selectedValue === opt.value;
+          const isConsumed = !!part.selectedValue && !isSelected;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                if (!part.selectedValue && !disabled) {
+                  onSelect(part.pickerId, part.paramName, opt.value, opt.label);
+                }
+              },
+              disabled: disabled || !!part.selectedValue,
+              style: {
+                fontSize: 13,
+                borderRadius: 20,
+                padding: "6px 14px",
+                border: isSelected ? "1.5px solid var(--primary, #19191c)" : "1.5px solid var(--border, #e4e4e7)",
+                backgroundColor: isSelected ? "var(--primary, #19191c)" : "transparent",
+                color: isSelected ? "var(--primary-foreground, #fff)" : "var(--foreground, #09090b)",
+                cursor: disabled || !!part.selectedValue ? "default" : "pointer",
+                opacity: isConsumed ? 0.35 : 1,
+                transition: "all 0.15s ease",
+                fontWeight: isSelected ? 500 : 400
+              },
+              children: opt.label
+            },
+            opt.value
+          );
+        }) })
+      ]
+    }
+  );
+}
 function MessageBubble({
   message,
   userColor,
   agentName,
   profilePicture,
   isStreaming,
-  showThinking = true
+  showThinking = true,
+  onPickerSelect
 }) {
   const isUser = message.role === "user";
   const textPart = message.parts.find((p) => p.type === "text");
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
+  const pickerParts = message.parts.filter((p) => p.type === "picker");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
@@ -468,12 +552,22 @@ function MessageBubble({
     ) });
   }
   const visibleToolParts = showThinking ? toolParts : [];
-  const isEmpty = !textPart?.text && visibleToolParts.length === 0;
+  const isEmpty = !textPart?.text && visibleToolParts.length === 0 && pickerParts.length === 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
     /* @__PURE__ */ jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
       visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
+      pickerParts.map((p) => /* @__PURE__ */ jsx(
+        PickerSelector,
+        {
+          part: p,
+          disabled: isStreaming ?? false,
+          onSelect: onPickerSelect ?? (() => {
+          })
+        },
+        p.pickerId
+      )),
       isEmpty && isStreaming ? /* @__PURE__ */ jsx(ThinkingDots, {}) : textPart?.text ? /* @__PURE__ */ jsxs("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed overflow-hidden prose prose-sm max-w-none prose-p:my-1 prose-headings:font-semibold prose-headings:my-1.5 prose-ul:my-1 prose-li:my-0.5 prose-strong:font-semibold", children: [
         /* @__PURE__ */ jsx(
           ReactMarkdown,
@@ -518,7 +612,8 @@ function ChatMessages({
   initialMessages = [],
   suggestedMessages = [],
   showThinking = true,
-  onSuggest
+  onSuggest,
+  onPickerSelect
 }) {
   const bottomRef = useRef(null);
   const showGreeting = messages.length === 0;
@@ -539,7 +634,8 @@ function ChatMessages({
         agentName,
         profilePicture,
         isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
-        showThinking
+        showThinking,
+        onPickerSelect
       },
       msg.id
     )) }),
@@ -573,6 +669,11 @@ function ChatInput({
       textareaRef.current.style.height = "auto";
     }
   }, [input]);
+  useEffect(() => {
+    if (!streaming) {
+      textareaRef.current?.focus();
+    }
+  }, [streaming]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -629,7 +730,6 @@ function ChatInput({
     ] })
   ] });
 }
-var cn3 = (...inputs) => twMerge(clsx(inputs));
 function ChatWidget({
   agentId,
   workspaceId,
@@ -670,7 +770,7 @@ function ChatWidget({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn3(
+      className: cn(
         "flex flex-col overflow-hidden rounded-2xl border shadow-xl bg-background h-full",
         className
       ),
@@ -700,7 +800,8 @@ function ChatWidget({
             initialMessages,
             suggestedMessages,
             showThinking,
-            onSuggest: (msg) => chat.send(msg)
+            onSuggest: (msg) => chat.send(msg),
+            onPickerSelect: chat.selectPickerOption
           }
         ),
         /* @__PURE__ */ jsx(
@@ -799,7 +900,6 @@ function useAutoConfig(agentId, enabled) {
   }, [agentId, enabled]);
   return result;
 }
-var cn4 = (...inputs) => twMerge(clsx(inputs));
 var KEY_EXPANDED = "wallavi_bubble_expanded";
 var KEY_DISMISSED = "wallavi_bubble_dismissed";
 function BubbleWidget({
@@ -847,35 +947,13 @@ function BubbleWidget({
     if (localStorage.getItem(KEY_EXPANDED) === "true") setExpanded(true);
   }, []);
   const remote = useAutoConfig(chatProps.agentId, autoConfig);
-  const [resolvedBubbleIcon, setResolvedBubbleIcon] = useState(bubbleIconUrlProp);
-  const [resolvedAutoOpen, setResolvedAutoOpen] = useState(autoOpenProp);
-  const [resolvedKeyboardShortcut, setResolvedKeyboardShortcut] = useState(keyboardShortcutProp);
-  const [resolvedPosition, setResolvedPosition] = useState(positionProp ?? "bottom-right");
-  const [resolvedBubbleSize, setResolvedBubbleSize] = useState(bubbleSizeProp ?? 52);
-  const [resolvedWidth, setResolvedWidth] = useState(widthProp ?? 360);
-  const [resolvedHeight, setResolvedHeight] = useState(heightProp ?? 580);
-  useEffect(() => {
-    if (remote.loading) return;
-    if (!bubbleIconUrlProp) setResolvedBubbleIcon(remote.bubbleIconUrl);
-    if (!autoOpenProp) setResolvedAutoOpen(remote.autoOpen);
-    if (!keyboardShortcutProp) setResolvedKeyboardShortcut(remote.keyboardShortcut);
-    if (!positionProp) setResolvedPosition(remote.position);
-    if (bubbleSizeProp == null) setResolvedBubbleSize(remote.bubbleSize);
-    if (widthProp == null) setResolvedWidth(remote.panelWidth);
-    if (heightProp == null) setResolvedHeight(remote.panelHeight);
-  }, [remote.loading]);
-  useEffect(() => {
-    if (autoOpenProp) setResolvedAutoOpen(true);
-  }, [autoOpenProp]);
-  useEffect(() => {
-    if (keyboardShortcutProp) setResolvedKeyboardShortcut(true);
-  }, [keyboardShortcutProp]);
-  useEffect(() => {
-    if (bubbleIconUrlProp) setResolvedBubbleIcon(bubbleIconUrlProp);
-  }, [bubbleIconUrlProp]);
-  useEffect(() => {
-    if (positionProp) setResolvedPosition(positionProp);
-  }, [positionProp]);
+  const resolvedPosition = positionProp ?? remote.position;
+  const resolvedBubbleIcon = bubbleIconUrlProp ?? remote.bubbleIconUrl;
+  const resolvedAutoOpen = autoOpenProp || remote.autoOpen;
+  const resolvedKeyboardShortcut = keyboardShortcutProp || remote.keyboardShortcut;
+  const resolvedBubbleSize = bubbleSizeProp ?? remote.bubbleSize;
+  const resolvedWidth = widthProp ?? remote.panelWidth;
+  const resolvedHeight = heightProp ?? remote.panelHeight;
   const definedChatProps = Object.fromEntries(
     Object.entries(chatProps).filter(([, v]) => v !== void 0)
   );
@@ -885,18 +963,18 @@ function BubbleWidget({
     agentId: chatProps.agentId,
     agentName: chatProps.agentName
   };
+  const setOpenRef = useRef(setOpen);
+  useEffect(() => {
+    setOpenRef.current = setOpen;
+  });
   useEffect(() => {
     if (!resolvedAutoOpen || autoOpenedRef.current) return;
     const dismissedUntil = Number(localStorage.getItem(KEY_DISMISSED) ?? 0);
     if (dismissedUntil < Date.now()) {
       autoOpenedRef.current = true;
-      setOpen(true);
+      setOpenRef.current(true);
     }
   }, [resolvedAutoOpen]);
-  const setOpenRef = useRef(setOpen);
-  useEffect(() => {
-    setOpenRef.current = setOpen;
-  });
   useEffect(() => {
     if (!resolvedKeyboardShortcut) return;
     const onKey = (e) => {
@@ -962,7 +1040,7 @@ function BubbleWidget({
                 onClose: handleClose,
                 onExpand: toggleExpanded,
                 expanded,
-                className: cn4("shadow-2xl h-full", panelClassName)
+                className: cn("shadow-2xl h-full", panelClassName)
               }
             )
           }

package/package.json

@@ -33,7 +33,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit"