@wallavi/widget 1.2.1 → 1.3.1

package/dist/index.d.mts

@@ -111,8 +111,16 @@ interface BubbleWidgetProps extends ChatWidgetConfig {
     bubbleSize?: number;
     /** className applied to the chat panel */
     panelClassName?: string;
+    /**
+     * Auto-fetch the agent's configuration from the Wallavi public API and apply it
+     * as defaults (profilePicture, chatIcon, colors, messages, autoOpen, keyboardShortcut…).
+     * The client only needs to pass `agentId` — everything else self-configures.
+     * Pass `autoConfig={false}` if you are providing all props manually.
+     * @default true
+     */
+    autoConfig?: boolean;
 }
-declare function BubbleWidget({ position, width, height, expandedWidth, expandedHeight, keyboardShortcut, shortcutKey, autoOpen, bubbleIconUrl, bubbleSize, panelClassName, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BubbleWidget({ position: positionProp, width, height, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize, panelClassName, autoConfig, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function ChatWidget({ agentId, workspaceId, agentName, displayName, profilePicture, userMessageColor, initialMessages, suggestedMessages, messagePlaceholder, watermark, watermarkLogoUrl, footer, theme, showThinking, regenerateMessage, persist, onNavigate, hideCloseButton, source, userContext, playgroundOverrides, className, onClose, onReset, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -111,8 +111,16 @@ interface BubbleWidgetProps extends ChatWidgetConfig {
     bubbleSize?: number;
     /** className applied to the chat panel */
     panelClassName?: string;
+    /**
+     * Auto-fetch the agent's configuration from the Wallavi public API and apply it
+     * as defaults (profilePicture, chatIcon, colors, messages, autoOpen, keyboardShortcut…).
+     * The client only needs to pass `agentId` — everything else self-configures.
+     * Pass `autoConfig={false}` if you are providing all props manually.
+     * @default true
+     */
+    autoConfig?: boolean;
 }
-declare function BubbleWidget({ position, width, height, expandedWidth, expandedHeight, keyboardShortcut, shortcutKey, autoOpen, bubbleIconUrl, bubbleSize, panelClassName, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
+declare function BubbleWidget({ position: positionProp, width, height, expandedWidth, expandedHeight, keyboardShortcut: keyboardShortcutProp, shortcutKey, autoOpen: autoOpenProp, bubbleIconUrl: bubbleIconUrlProp, bubbleSize, panelClassName, autoConfig, ...chatProps }: BubbleWidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function ChatWidget({ agentId, workspaceId, agentName, displayName, profilePicture, userMessageColor, initialMessages, suggestedMessages, messagePlaceholder, watermark, watermarkLogoUrl, footer, theme, showThinking, regenerateMessage, persist, onNavigate, hideCloseButton, source, userContext, playgroundOverrides, className, onClose, onReset, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -307,7 +307,7 @@ function ChatHeader({
     "header",
     {
       className: "flex items-center justify-between px-4 py-3 shrink-0",
-      style: { backgroundColor: headerBg, color: headerText },
+      style: { backgroundColor: headerBg, color: headerText, borderBottom: `1px solid ${headerText}18` },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Avatar, { style: { width: 32, height: 32, border: `2px solid ${headerText}30` }, children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: profilePicture, alt: title }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -500,7 +500,7 @@ function ChatMessages({
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-y-auto overscroll-contain", children: [
-    showGreeting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5 items-start px-4 pt-4", children: [
+    showGreeting && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5 items-start px-4 pt-5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Avatar3, { className: "h-7 w-7 shrink-0 mt-0.5 border", children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback3, { className: "text-[10px] font-semibold bg-primary text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed max-w-[82%]", children: initialMessages[0] ?? "Hello! How can I help you today?" })
     ] }),
@@ -710,6 +710,7 @@ function ChatWidget({
   );
 }
 var cn4 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var WALLAVI_API = typeof process !== "undefined" ? process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app" : "https://wallavi-production.up.railway.app";
 function DefaultIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor", opacity: 0.12 }),
@@ -732,17 +733,18 @@ function MinimizeIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 12, height: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function BubbleWidget({
-  position = "bottom-right",
+  position: positionProp,
   width = 360,
   height = 580,
   expandedWidth = 640,
   expandedHeight = "calc(100vh - 100px)",
-  keyboardShortcut = false,
+  keyboardShortcut: keyboardShortcutProp = false,
   shortcutKey = "k",
-  autoOpen = false,
-  bubbleIconUrl,
+  autoOpen: autoOpenProp = false,
+  bubbleIconUrl: bubbleIconUrlProp,
   bubbleSize = 52,
   panelClassName,
+  autoConfig = true,
   // ChatWidgetConfig props
   ...chatProps
 }) {
@@ -750,16 +752,50 @@ function BubbleWidget({
   const [expanded, setExpanded] = react.useState(false);
   const panelRef = react.useRef(null);
   const autoOpenedRef = react.useRef(false);
+  const [remoteConfig, setRemoteConfig] = react.useState({});
+  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");
   react.useEffect(() => {
-    if (!autoOpen || autoOpenedRef.current) return;
+    if (!autoConfig) return;
+    fetch(`${WALLAVI_API}/api/public/widget/${chatProps.agentId}`).then((r) => r.json()).then((body) => {
+      const cfg = body?.data ?? {};
+      const remote = {};
+      if (cfg.profilePicture != null) remote.profilePicture = cfg.profilePicture;
+      if (cfg.displayName != null) remote.displayName = cfg.displayName;
+      if (cfg.theme) remote.theme = cfg.theme;
+      if (cfg.userMessageColor) remote.userMessageColor = cfg.userMessageColor;
+      if (Array.isArray(cfg.initialMessages) && cfg.initialMessages.length > 0) remote.initialMessages = cfg.initialMessages;
+      if (Array.isArray(cfg.suggestedMessages)) remote.suggestedMessages = cfg.suggestedMessages;
+      if (cfg.messagePlaceholder != null) remote.messagePlaceholder = cfg.messagePlaceholder;
+      if (cfg.watermark != null) remote.watermark = cfg.watermark;
+      if (cfg.footer != null) remote.footer = cfg.footer;
+      if (cfg.showThinking != null) remote.showThinking = cfg.showThinking;
+      if (cfg.regenerateMessage != null) remote.regenerateMessage = cfg.regenerateMessage;
+      setRemoteConfig(remote);
+      if (!bubbleIconUrlProp) {
+        const icon = cfg.chatIcon || cfg.profilePicture;
+        if (icon) setResolvedBubbleIcon(icon);
+      }
+      if (!autoOpenProp && cfg.autoOpen) setResolvedAutoOpen(true);
+      if (!keyboardShortcutProp && cfg.keyboardShortcut) setResolvedKeyboardShortcut(true);
+      if (!positionProp && cfg.alignChatBubbleButton) {
+        setResolvedPosition(cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right");
+      }
+    }).catch(() => {
+    });
+  }, [autoConfig, chatProps.agentId]);
+  react.useEffect(() => {
+    if (!resolvedAutoOpen || autoOpenedRef.current) return;
     const dismissedUntil = Number(localStorage.getItem("wallavi_bubble_dismissed") ?? 0);
     if (dismissedUntil < Date.now()) {
       autoOpenedRef.current = true;
       setOpen(true);
     }
-  }, [autoOpen]);
+  }, [resolvedAutoOpen]);
   react.useEffect(() => {
-    if (!keyboardShortcut) return;
+    if (!resolvedKeyboardShortcut) return;
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
         e.preventDefault();
@@ -768,7 +804,7 @@ function BubbleWidget({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [keyboardShortcut, shortcutKey]);
+  }, [resolvedKeyboardShortcut, shortcutKey]);
   react.useEffect(() => {
     if (!open) return;
     const id = setTimeout(() => {
@@ -776,13 +812,23 @@ function BubbleWidget({
     }, 50);
     return () => clearTimeout(id);
   }, [open]);
+  const definedChatProps = Object.fromEntries(
+    Object.entries(chatProps).filter(([, v]) => v !== void 0)
+  );
+  const mergedConfig = {
+    ...remoteConfig,
+    ...definedChatProps,
+    // Required fields must always come from chatProps
+    agentId: chatProps.agentId,
+    agentName: chatProps.agentName
+  };
   const handleClose = () => {
     setOpen(false);
     const expires = Date.now() + 24 * 60 * 60 * 1e3;
     localStorage.setItem("wallavi_bubble_dismissed", String(expires));
   };
   const toggleExpanded = () => setExpanded((v) => !v);
-  const isLeft = position === "bottom-left";
+  const isLeft = resolvedPosition === "bottom-left";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -873,7 +919,7 @@ function BubbleWidget({
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     ChatWidget,
                     {
-                      ...chatProps,
+                      ...mergedConfig,
                       hideCloseButton: true,
                       className: cn4("shadow-2xl h-full", panelClassName)
                     }
@@ -903,10 +949,10 @@ function BubbleWidget({
               background: open ? "var(--foreground, #19191c)" : "var(--background, #fff)",
               color: open ? "var(--background, #fff)" : "var(--foreground, #19191c)"
             },
-            children: open ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) : bubbleIconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            children: open ? /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) : resolvedBubbleIcon ? /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
-                src: bubbleIconUrl,
+                src: resolvedBubbleIcon,
                 alt: "Open chat",
                 style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
               }

package/dist/index.mjs

@@ -281,7 +281,7 @@ function ChatHeader({
     "header",
     {
       className: "flex items-center justify-between px-4 py-3 shrink-0",
-      style: { backgroundColor: headerBg, color: headerText },
+      style: { backgroundColor: headerBg, color: headerText, borderBottom: `1px solid ${headerText}18` },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
           /* @__PURE__ */ jsx(Avatar, { style: { width: 32, height: 32, border: `2px solid ${headerText}30` }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage, { src: profilePicture, alt: title }) : /* @__PURE__ */ jsx(
@@ -474,7 +474,7 @@ function ChatMessages({
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-y-auto overscroll-contain", children: [
-    showGreeting && /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start px-4 pt-4", children: [
+    showGreeting && /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start px-4 pt-5", children: [
       /* @__PURE__ */ jsx(Avatar3, { className: "h-7 w-7 shrink-0 mt-0.5 border", children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback3, { className: "text-[10px] font-semibold bg-primary text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
       /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed max-w-[82%]", children: initialMessages[0] ?? "Hello! How can I help you today?" })
     ] }),
@@ -684,6 +684,7 @@ function ChatWidget({
   );
 }
 var cn4 = (...inputs) => twMerge(clsx(inputs));
+var WALLAVI_API = typeof process !== "undefined" ? process.env.NEXT_PUBLIC_API_URL ?? "https://wallavi-production.up.railway.app" : "https://wallavi-production.up.railway.app";
 function DefaultIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 26, height: 26 }, children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor", opacity: 0.12 }),
@@ -706,17 +707,18 @@ function MinimizeIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", style: { width: 12, height: 12 }, children: /* @__PURE__ */ jsx("path", { d: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function BubbleWidget({
-  position = "bottom-right",
+  position: positionProp,
   width = 360,
   height = 580,
   expandedWidth = 640,
   expandedHeight = "calc(100vh - 100px)",
-  keyboardShortcut = false,
+  keyboardShortcut: keyboardShortcutProp = false,
   shortcutKey = "k",
-  autoOpen = false,
-  bubbleIconUrl,
+  autoOpen: autoOpenProp = false,
+  bubbleIconUrl: bubbleIconUrlProp,
   bubbleSize = 52,
   panelClassName,
+  autoConfig = true,
   // ChatWidgetConfig props
   ...chatProps
 }) {
@@ -724,16 +726,50 @@ function BubbleWidget({
   const [expanded, setExpanded] = useState(false);
   const panelRef = useRef(null);
   const autoOpenedRef = useRef(false);
+  const [remoteConfig, setRemoteConfig] = useState({});
+  const [resolvedBubbleIcon, setResolvedBubbleIcon] = useState(bubbleIconUrlProp);
+  const [resolvedAutoOpen, setResolvedAutoOpen] = useState(autoOpenProp);
+  const [resolvedKeyboardShortcut, setResolvedKeyboardShortcut] = useState(keyboardShortcutProp);
+  const [resolvedPosition, setResolvedPosition] = useState(positionProp ?? "bottom-right");
   useEffect(() => {
-    if (!autoOpen || autoOpenedRef.current) return;
+    if (!autoConfig) return;
+    fetch(`${WALLAVI_API}/api/public/widget/${chatProps.agentId}`).then((r) => r.json()).then((body) => {
+      const cfg = body?.data ?? {};
+      const remote = {};
+      if (cfg.profilePicture != null) remote.profilePicture = cfg.profilePicture;
+      if (cfg.displayName != null) remote.displayName = cfg.displayName;
+      if (cfg.theme) remote.theme = cfg.theme;
+      if (cfg.userMessageColor) remote.userMessageColor = cfg.userMessageColor;
+      if (Array.isArray(cfg.initialMessages) && cfg.initialMessages.length > 0) remote.initialMessages = cfg.initialMessages;
+      if (Array.isArray(cfg.suggestedMessages)) remote.suggestedMessages = cfg.suggestedMessages;
+      if (cfg.messagePlaceholder != null) remote.messagePlaceholder = cfg.messagePlaceholder;
+      if (cfg.watermark != null) remote.watermark = cfg.watermark;
+      if (cfg.footer != null) remote.footer = cfg.footer;
+      if (cfg.showThinking != null) remote.showThinking = cfg.showThinking;
+      if (cfg.regenerateMessage != null) remote.regenerateMessage = cfg.regenerateMessage;
+      setRemoteConfig(remote);
+      if (!bubbleIconUrlProp) {
+        const icon = cfg.chatIcon || cfg.profilePicture;
+        if (icon) setResolvedBubbleIcon(icon);
+      }
+      if (!autoOpenProp && cfg.autoOpen) setResolvedAutoOpen(true);
+      if (!keyboardShortcutProp && cfg.keyboardShortcut) setResolvedKeyboardShortcut(true);
+      if (!positionProp && cfg.alignChatBubbleButton) {
+        setResolvedPosition(cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right");
+      }
+    }).catch(() => {
+    });
+  }, [autoConfig, chatProps.agentId]);
+  useEffect(() => {
+    if (!resolvedAutoOpen || autoOpenedRef.current) return;
     const dismissedUntil = Number(localStorage.getItem("wallavi_bubble_dismissed") ?? 0);
     if (dismissedUntil < Date.now()) {
       autoOpenedRef.current = true;
       setOpen(true);
     }
-  }, [autoOpen]);
+  }, [resolvedAutoOpen]);
   useEffect(() => {
-    if (!keyboardShortcut) return;
+    if (!resolvedKeyboardShortcut) return;
     const handler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
         e.preventDefault();
@@ -742,7 +778,7 @@ function BubbleWidget({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [keyboardShortcut, shortcutKey]);
+  }, [resolvedKeyboardShortcut, shortcutKey]);
   useEffect(() => {
     if (!open) return;
     const id = setTimeout(() => {
@@ -750,13 +786,23 @@ function BubbleWidget({
     }, 50);
     return () => clearTimeout(id);
   }, [open]);
+  const definedChatProps = Object.fromEntries(
+    Object.entries(chatProps).filter(([, v]) => v !== void 0)
+  );
+  const mergedConfig = {
+    ...remoteConfig,
+    ...definedChatProps,
+    // Required fields must always come from chatProps
+    agentId: chatProps.agentId,
+    agentName: chatProps.agentName
+  };
   const handleClose = () => {
     setOpen(false);
     const expires = Date.now() + 24 * 60 * 60 * 1e3;
     localStorage.setItem("wallavi_bubble_dismissed", String(expires));
   };
   const toggleExpanded = () => setExpanded((v) => !v);
-  const isLeft = position === "bottom-left";
+  const isLeft = resolvedPosition === "bottom-left";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -847,7 +893,7 @@ function BubbleWidget({
                   children: /* @__PURE__ */ jsx(
                     ChatWidget,
                     {
-                      ...chatProps,
+                      ...mergedConfig,
                       hideCloseButton: true,
                       className: cn4("shadow-2xl h-full", panelClassName)
                     }
@@ -877,10 +923,10 @@ function BubbleWidget({
               background: open ? "var(--foreground, #19191c)" : "var(--background, #fff)",
               color: open ? "var(--background, #fff)" : "var(--foreground, #19191c)"
             },
-            children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : bubbleIconUrl ? /* @__PURE__ */ jsx(
+            children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : resolvedBubbleIcon ? /* @__PURE__ */ jsx(
               "img",
               {
-                src: bubbleIconUrl,
+                src: resolvedBubbleIcon,
                 alt: "Open chat",
                 style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
               }

package/package.json

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