@wallavi/widget 1.4.3 → 1.4.5

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 {
@@ -185,7 +190,7 @@ function useChat({
         if (!res.body) throw new Error("No stream body");
         const applyEvent = (proto) => {
           if (proto.type === "navigate") {
-            if (proto.path.startsWith("/")) onNavigate?.(proto.path);
+            if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
             return;
           }
           setMessages((prev) => {
@@ -401,7 +406,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: [
@@ -655,7 +659,6 @@ function ChatInput({
     ] })
   ] });
 }
-var cn3 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
 function ChatWidget({
   agentId,
   workspaceId,
@@ -696,7 +699,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
       ),
@@ -825,7 +828,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 +875,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,12 +891,16 @@ 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]);
   react.useEffect(() => {
@@ -924,7 +908,7 @@ function BubbleWidget({
     const onKey = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
         e.preventDefault();
-        setOpen((v) => !v);
+        setOpenRef.current((v) => !v);
       }
     };
     window.addEventListener("keydown", onKey);
@@ -984,7 +968,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 {
@@ -159,7 +164,7 @@ function useChat({
         if (!res.body) throw new Error("No stream body");
         const applyEvent = (proto) => {
           if (proto.type === "navigate") {
-            if (proto.path.startsWith("/")) onNavigate?.(proto.path);
+            if (proto.path.startsWith("/")) onNavigateRef.current?.(proto.path);
             return;
           }
           setMessages((prev) => {
@@ -375,7 +380,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: [
@@ -629,7 +633,6 @@ function ChatInput({
     ] })
   ] });
 }
-var cn3 = (...inputs) => twMerge(clsx(inputs));
 function ChatWidget({
   agentId,
   workspaceId,
@@ -670,7 +673,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
       ),
@@ -799,7 +802,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 +849,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,12 +865,16 @@ 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]);
   useEffect(() => {
@@ -898,7 +882,7 @@ function BubbleWidget({
     const onKey = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
         e.preventDefault();
-        setOpen((v) => !v);
+        setOpenRef.current((v) => !v);
       }
     };
     window.addEventListener("keydown", onKey);
@@ -958,7 +942,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.3",
+  "version": "1.4.5",
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit"