@runtypelabs/persona 4.9.0 → 4.10.0

package/src/ui.ts

@@ -5,6 +5,7 @@ import { onMarkdownParsersReady, getMarkdownParsersSync } from "./markdown-parse
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
 import {
   AgentWidgetConfig,
+  AgentWidgetConfigPatch,
   AgentWidgetApprovalDecisionOptions,
   AgentWidgetMessage,
   AgentWidgetEvent,
@@ -133,6 +134,7 @@ import { readFlexGapPx, resolveArtifactPaneWidthPx } from "./utils/artifact-resi
 import { enhanceWithForms } from "./components/forms";
 import { pluginRegistry } from "./plugins/registry";
 import { mergeWithDefaults, DEFAULT_FLOATING_LAUNCHER_WIDTH } from "./defaults";
+import { mergeConfigUpdate } from "./utils/config-merge";
 import { createEventBus } from "./utils/events";
 import {
   createActionManager,
@@ -305,7 +307,7 @@ const stripStreamingFromMessages = (messages: AgentWidgetMessage[]) =>
   }));
 
 type Controller = {
-  update: (config: AgentWidgetConfig) => void;
+  update: (config: AgentWidgetConfigPatch) => void;
   destroy: () => void;
   open: () => void;
   close: () => void;
@@ -7683,7 +7685,7 @@ export const createAgentExperience = (
   }
 
   const controller: Controller = {
-    update(nextConfig: AgentWidgetConfig) {
+    update(nextConfig: AgentWidgetConfigPatch) {
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = config.layout?.messages;
@@ -7695,7 +7697,10 @@ export const createAgentExperience = (
       const previousToolCallDisplay = config.features?.toolCallDisplay;
       const previousReasoningDisplay = config.features?.reasoningDisplay;
       const previousStreamAnimationType = config.features?.streamAnimation?.type;
-      config = { ...config, ...nextConfig };
+      // One consistent recursive patch policy across the live controller and the
+      // init handle. See utils/config-merge.ts for the replace-leaf list and
+      // explicit-undefined reset semantics.
+      config = mergeConfigUpdate(config, nextConfig);
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
       applyThemeVariables(mount, config);
@@ -7865,7 +7870,10 @@ export const createAgentExperience = (
           headerSubtitle.style.display = headerLayoutConfig.showSubtitle === false ? "none" : "";
         }
         if (closeButton) {
-          closeButton.style.display = headerLayoutConfig.showCloseButton === false ? "none" : "";
+          // showCloseButton (defaulted true) filters on top of toggleability;
+          // it must not reveal the close button on non-closeable panels.
+          const showClose = isPanelToggleable() && headerLayoutConfig.showCloseButton !== false;
+          closeButton.style.display = showClose ? "" : "none";
         }
         if (panelElements.clearChatButtonWrapper) {
           // showClearChat explicitly controls visibility when set
@@ -7926,7 +7934,7 @@ export const createAgentExperience = (
       refreshCloseButton();
 
       // Re-render messages if config affecting message rendering changed
-      const toolCallConfigChanged = JSON.stringify(nextConfig.toolCall) !== JSON.stringify(previousToolCallConfig);
+      const toolCallConfigChanged = JSON.stringify(config.toolCall) !== JSON.stringify(previousToolCallConfig);
       const messageActionsChanged = JSON.stringify(config.messageActions) !== JSON.stringify(previousMessageActions);
       const layoutMessagesChanged = JSON.stringify(config.layout?.messages) !== JSON.stringify(previousLayoutMessages);
       const loadingIndicatorChanged = config.loadingIndicator?.render !== previousLoadingIndicator?.render
@@ -8067,13 +8075,11 @@ export const createAgentExperience = (
       }
 
       if (closeButton) {
-        // Handle close button visibility from layout config
-        const layoutShowCloseButton = config.layout?.header?.showCloseButton;
-        if (layoutShowCloseButton === false) {
-          closeButton.style.display = "none";
-        } else {
-          closeButton.style.display = "";
-        }
+        // showCloseButton (defaulted true) filters on top of toggleability;
+        // it must not reveal the close button on non-closeable panels.
+        const layoutShowCloseButton =
+          isPanelToggleable() && config.layout?.header?.showCloseButton !== false;
+        closeButton.style.display = layoutShowCloseButton ? "" : "none";
 
         const closeButtonSize = launcher.closeButtonSize ?? "32px";
         const closeButtonPlacement = launcher.closeButtonPlacement ?? "inline";
@@ -8164,6 +8170,9 @@ export const createAgentExperience = (
         closeButton.innerHTML = "";
         const iconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
         if (iconSvg) {
+          // display:block matches the builder; inline SVG baseline spacing
+          // shifts the icon off-center.
+          iconSvg.style.display = "block";
           closeButton.appendChild(iconSvg);
         } else {
           closeButton.textContent = closeButtonIconText;
@@ -8350,8 +8359,13 @@ export const createAgentExperience = (
           // the icon to match its 16px button.
           clearChatButton.innerHTML = "";
           const clearChatIconSize = isComposerBar() ? "14px" : "20px";
-          const iconSvg = renderLucideIcon(clearChatIconName, clearChatIconSize, "currentColor", 2);
+          // Stroke 1 matches the mount-time builder (header-parts.ts); a
+          // different weight here makes the icon visibly bolden on update.
+          const iconSvg = renderLucideIcon(clearChatIconName, clearChatIconSize, "currentColor", 1);
           if (iconSvg) {
+            // display:block matches the builder; inline SVG baseline spacing
+            // shifts the icon off-center.
+            iconSvg.style.display = "block";
             clearChatButton.appendChild(iconSvg);
           }
 
@@ -8554,10 +8568,16 @@ export const createAgentExperience = (
           micButton.style.minWidth = micIconSize;
           micButton.style.minHeight = micIconSize;
           
-          // Update icon
-          const iconColor = voiceConfig.iconColor ?? sendButtonConfig.textColor ?? "currentColor";
+          // Update icon; color chain and stroke 1.5 match the mount-time
+          // builder (composer-parts.ts) so an unrelated update cannot restyle.
+          const iconColor = voiceConfig.iconColor ?? sendButtonConfig.textColor;
           micButton.innerHTML = "";
-          const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColor, 2);
+          const micIconSvg = renderLucideIcon(
+            micIconName,
+            micIconSizeNum,
+            iconColor || "currentColor",
+            1.5
+          );
           if (micIconSvg) {
             micButton.appendChild(micIconSvg);
           } else {
@@ -8741,10 +8761,6 @@ export const createAgentExperience = (
             });
           }
 
-          // Create drop overlay if missing
-          if (!container.querySelector(".persona-attachment-drop-overlay")) {
-            container.appendChild(buildDropOverlay(attachmentsConfig.dropOverlay));
-          }
         } else {
           // Show existing attachment button and update config
           attachmentButtonWrapper.style.display = "";
@@ -8765,6 +8781,33 @@ export const createAgentExperience = (
             });
           }
         }
+
+        // Rebuild the overlay so live dropOverlay updates restyle it; visibility
+        // is owned by the container's drop-active class, so this is drag-safe.
+        container.querySelector(".persona-attachment-drop-overlay")?.remove();
+        container.appendChild(buildDropOverlay(config.attachments?.dropOverlay));
+
+        // Re-render icon/tooltip so live buttonIconName/buttonTooltipText
+        // updates apply; the button element itself is created once and kept.
+        if (attachmentButton) {
+          const attCfg = config.attachments ?? {};
+          const tooltipText = attCfg.buttonTooltipText ?? "Attach file";
+          attachmentButton.setAttribute("aria-label", tooltipText);
+          attachmentButton.textContent = "";
+          const btnSize = parseFloat(config.sendButton?.size ?? "40px") || 40;
+          const iconSvg = renderLucideIcon(
+            attCfg.buttonIconName ?? "paperclip",
+            Math.round(btnSize * 0.6),
+            "currentColor",
+            1.5
+          );
+          if (iconSvg) attachmentButton.appendChild(iconSvg);
+          else attachmentButton.textContent = "📎";
+          const attachTooltip = attachmentButtonWrapper?.querySelector(
+            ".persona-send-button-tooltip"
+          );
+          if (attachTooltip) attachTooltip.textContent = tooltipText;
+        }
       } else {
         // Hide attachment button if disabled
         if (attachmentButtonWrapper) {
@@ -8799,9 +8842,6 @@ export const createAgentExperience = (
         sendButton.style.fontSize = "18px";
         sendButton.style.lineHeight = "1";
         
-        // Clear existing content
-        sendButton.innerHTML = "";
-        
         // Set foreground color from config or theme token
         if (textColor) {
           sendButton.style.color = textColor;
@@ -8809,20 +8849,25 @@ export const createAgentExperience = (
           sendButton.style.color = "var(--persona-button-primary-fg, #ffffff)";
         }
 
-        // Use Lucide icon if iconName is provided, otherwise fall back to iconText
-        if (iconName) {
-          const iconSize = parseFloat(buttonSize) || 24;
-          const iconColor = textColor?.trim() || "currentColor";
-          const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
-          if (iconSvg) {
-            sendButton.appendChild(iconSvg);
+        // Skip the icon-content re-render while streaming: the button holds the
+        // stop icon (owned by setSendButtonMode), and clobbering it here would
+        // show the send arrow mid-stream while the aria-label still says stop.
+        if (!session.isStreaming()) {
+          sendButton.innerHTML = "";
+          if (iconName) {
+            const iconSize = parseFloat(buttonSize) || 24;
+            const iconColor = textColor?.trim() || "currentColor";
+            const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
+            if (iconSvg) {
+              sendButton.appendChild(iconSvg);
+            } else {
+              sendButton.textContent = iconText;
+            }
           } else {
             sendButton.textContent = iconText;
           }
-        } else {
-          sendButton.textContent = iconText;
         }
-        
+
         // Update classes
         sendButton.className = "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer";
         

package/src/utils/config-merge.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { mergeConfigUpdate } from "./config-merge";
+import { mergeWithDefaults } from "../defaults";
+import type { AgentWidgetConfig, StreamAnimationPlugin } from "../types";
+
+// Stored controller config is post-mergeWithDefaults; simulate that here.
+const base = (overrides: Partial<AgentWidgetConfig> = {}): AgentWidgetConfig =>
+  mergeWithDefaults({ apiUrl: "https://api.example.com/chat", ...overrides }) as AgentWidgetConfig;
+
+describe("mergeConfigUpdate", () => {
+  it("recursively merges nested plain objects, preserving sibling overrides", () => {
+    const prev = base({ launcher: { enabled: false, clearChat: { backgroundColor: "#123456" } } });
+    const next = mergeConfigUpdate(prev, { launcher: { title: "After" } });
+    expect(next.launcher?.clearChat?.backgroundColor).toBe("#123456");
+    expect(next.launcher?.title).toBe("After");
+    // Launcher defaults survive a partial patch.
+    expect(next.launcher?.mountMode).toBe("floating");
+  });
+
+  it("patches composerBar without replacing sibling launcher fields", () => {
+    const prev = base({ launcher: { title: "Keep", composerBar: { collapsedMaxWidth: "700px" } } });
+    const next = mergeConfigUpdate(prev, { launcher: { composerBar: { bottomOffset: "8px" } } });
+    expect(next.launcher?.title).toBe("Keep");
+    expect(next.launcher?.composerBar?.collapsedMaxWidth).toBe("700px");
+    expect(next.launcher?.composerBar?.bottomOffset).toBe("8px");
+  });
+
+  it("replaces arrays wholesale (suggestionChips)", () => {
+    const prev = base({ suggestionChips: ["a", "b", "c"] });
+    const next = mergeConfigUpdate(prev, { suggestionChips: ["x"] });
+    expect(next.suggestionChips).toEqual(["x"]);
+  });
+
+  it("replaces callbacks wholesale", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const prev = base({ onSessionInit: first });
+    const next = mergeConfigUpdate(prev, { onSessionInit: second });
+    expect(next.onSessionInit).toBe(second);
+  });
+
+  it("guards boolean|object unions in both directions", () => {
+    const objFirst = base({ approval: { backgroundColor: "#ffffff" } });
+    const toScalar = mergeConfigUpdate(objFirst, { approval: false });
+    expect(toScalar.approval).toBe(false);
+
+    const scalarFirst = base({ persistState: true });
+    const toObject = mergeConfigUpdate(scalarFirst, { persistState: { storage: "local" } });
+    expect(toObject.persistState).toEqual({ storage: "local" });
+  });
+
+  it("replaces the headers map wholesale (stale keys do not survive)", () => {
+    const prev = base({ headers: { "X-A": "1", "X-B": "2" } });
+    const next = mergeConfigUpdate(prev, { headers: { "X-B": "3" } });
+    expect(next.headers).toEqual({ "X-B": "3" });
+    expect(next.headers?.["X-A"]).toBeUndefined();
+  });
+
+  it("replaces features.streamAnimation.plugins wholesale", () => {
+    const p1 = { name: "p1" } as StreamAnimationPlugin;
+    const p2 = { name: "p2" } as StreamAnimationPlugin;
+    const prev = base({ features: { streamAnimation: { plugins: { p1 } } } });
+    const next = mergeConfigUpdate(prev, { features: { streamAnimation: { plugins: { p2 } } } });
+    expect(next.features?.streamAnimation?.plugins).toEqual({ p2 });
+    expect(next.features?.streamAnimation?.plugins?.p1).toBeUndefined();
+  });
+
+  it("replaces storageAdapter wholesale (no hybrid: new adapter's absent save is not inherited)", () => {
+    const oldSave = vi.fn();
+    const oldLoad = vi.fn();
+    const newLoad = vi.fn();
+    const prev = base({ storageAdapter: { save: oldSave, load: oldLoad } });
+    const next = mergeConfigUpdate(prev, { storageAdapter: { load: newLoad } });
+    expect(next.storageAdapter?.load).toBe(newLoad);
+    expect(next.storageAdapter?.save).toBeUndefined();
+  });
+
+  it("resets a cleared key to its default value (launcher.title)", () => {
+    const prev = base({ launcher: { title: "Custom" } });
+    expect(prev.launcher?.title).toBe("Custom");
+    const next = mergeConfigUpdate(prev, { launcher: { title: undefined } });
+    expect(next.launcher?.title).toBe("Chat Assistant");
+    // Other launcher fields are untouched by the clear.
+    expect(next.launcher?.mountMode).toBe("floating");
+  });
+
+  it("leaves a cleared key unset when no default exists (launcher.closeButtonColor)", () => {
+    const prev = base({ launcher: { closeButtonColor: "#ff0000" } });
+    expect(prev.launcher?.closeButtonColor).toBe("#ff0000");
+    const next = mergeConfigUpdate(prev, { launcher: { closeButtonColor: undefined } });
+    // closeButtonColor is intentionally omitted from the launcher defaults.
+    expect(next.launcher?.closeButtonColor).toBeUndefined();
+  });
+
+  it("resets a cleared key with a truthy default (messageActions.showCopy resets to true)", () => {
+    const prev = base({ messageActions: { showCopy: false } });
+    expect(prev.messageActions?.showCopy).toBe(false);
+    const next = mergeConfigUpdate(prev, { messageActions: { showCopy: undefined } });
+    // The key must be absent (not own-undefined) so the default spread repopulates it.
+    expect(next.messageActions?.showCopy).toBe(true);
+  });
+
+  it("resets a cleared nested key with a truthy default (layout.header.showTitle resets to true)", () => {
+    const prev = base({ layout: { header: { showTitle: false } } });
+    expect(prev.layout?.header?.showTitle).toBe(false);
+    const next = mergeConfigUpdate(prev, { layout: { header: { showTitle: undefined } } });
+    expect(next.layout?.header?.showTitle).toBe(true);
+  });
+
+  it("preserves keys absent from the patch", () => {
+    const prev = base({ launcher: { title: "Keep", subtitle: "Sub" } });
+    const next = mergeConfigUpdate(prev, { launcher: { title: "New" } });
+    expect(next.launcher?.title).toBe("New");
+    expect(next.launcher?.subtitle).toBe("Sub");
+  });
+
+  it("deep-merges theme partials through update, preserving earlier theme overrides", () => {
+    const prev = base({ theme: { semantic: { colors: { primary: "#111111" } } } });
+    const next = mergeConfigUpdate(prev, { theme: { semantic: { colors: { secondary: "#222222" } } } });
+    expect(next.theme?.semantic?.colors?.primary).toBe("#111111");
+    expect(next.theme?.semantic?.colors?.secondary).toBe("#222222");
+  });
+
+  it("is idempotent: merging a config over its equal self is a no-op", () => {
+    const prev = base({ launcher: { clearChat: { backgroundColor: "#123456" } } });
+    const merged = mergeConfigUpdate(prev, { launcher: { title: "T" } });
+    const again = mergeConfigUpdate(merged, merged);
+    expect(again).toEqual(merged);
+  });
+});

package/src/utils/config-merge.ts

@@ -0,0 +1,61 @@
+import { mergeWithDefaults } from "../defaults";
+import type { AgentWidgetConfig, AgentWidgetConfigPatch } from "../types";
+
+// Same predicate as utils/deep-merge.ts: plain object, non-null, non-array.
+// Class instances and DOM nodes also pass here, so replace-leaf paths guard the
+// ones that must not be recursed into.
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+// Dotted paths whose plain-object value replaces wholesale instead of recursing.
+// - user-defined key maps: recursive merge would strand stale keys from the old value
+//   (headers, targetProviders, components, features.streamAnimation.plugins).
+// - implementation objects: partial merge splices two impls into a broken hybrid
+//   (agent, storageAdapter, voiceRecognition.provider.custom).
+const REPLACE_LEAF_PATHS = new Set<string>([
+  "headers",
+  "agent",
+  "storageAdapter",
+  "components",
+  "targetProviders",
+  "voiceRecognition.provider.custom",
+  "features.streamAnimation.plugins",
+]);
+
+// Recursive patch merge. A key merges recursively iff both previous and patch
+// values are plain objects and the path is not a replace-leaf; otherwise the
+// patch value replaces. A key present in the patch with value undefined is
+// deleted from the result (an own undefined property would shadow defaults in
+// mergeWithDefaults' spreads); absent keys are never visited, so they are
+// preserved. theme/darkTheme need no special case: the both-sides-plain-object
+// rule already reproduces mergeThemePartials/deepMerge (defaults.ts:225-236).
+const mergePatch = (previous: unknown, patch: unknown, path: string): unknown => {
+  if (!isPlainObject(previous) || !isPlainObject(patch)) return patch;
+  if (REPLACE_LEAF_PATHS.has(path)) return patch;
+
+  const result: Record<string, unknown> = { ...previous };
+  for (const key of Object.keys(patch)) {
+    if (patch[key] === undefined) {
+      delete result[key];
+      continue;
+    }
+    const childPath = path ? `${path}.${key}` : key;
+    result[key] = mergePatch(previous[key], patch[key], childPath);
+  }
+  return result;
+};
+
+/**
+ * Merge a config patch over the previous widget config with one consistent
+ * recursive policy, then re-apply mergeWithDefaults so a cleared
+ * (explicit-undefined) key resets to its default. The stored controller config
+ * is already post-mergeWithDefaults, so re-applying it is idempotent and keeps
+ * initial mount, live update, and rebuild on the same merge policy.
+ */
+export function mergeConfigUpdate(
+  previousConfig: AgentWidgetConfig,
+  patch: AgentWidgetConfigPatch
+): AgentWidgetConfig {
+  const merged = mergePatch(previousConfig, patch, "") as Partial<AgentWidgetConfig>;
+  return mergeWithDefaults(merged) as AgentWidgetConfig;
+}

package/src/utils/theme.test.ts

@@ -60,6 +60,32 @@ describe('theme utils', () => {
     expect(cssVars['--persona-palette-colors-primary-500']).toBe('#22c55e');
   });
 
+  it('preserves user radius and typography palette overrides in dark mode', () => {
+    // Regression: createDarkTheme() used to spread a pre-built default palette
+    // over the merged user config, which kept only `colors` and silently
+    // dropped radius/typography overrides that light mode honored.
+    const themeConfig = {
+      colorScheme: 'dark' as const,
+      theme: {
+        palette: {
+          radius: { xl: '4px' },
+          typography: { fontFamily: { sans: 'Georgia, serif' } },
+        },
+      },
+    };
+
+    const activeTheme = getActiveTheme(themeConfig);
+    const cssVars = themeToCssVariables(activeTheme);
+
+    // User non-color palette overrides survive the dark rebuild…
+    expect(cssVars['--persona-palette-radius-xl']).toBe('4px');
+    expect(cssVars['--persona-palette-typography-fontFamily-sans']).toBe('Georgia, serif');
+    // …untouched radius steps still resolve from the defaults…
+    expect(cssVars['--persona-palette-radius-full']).toBe('9999px');
+    // …and the dark color palette still applies underneath.
+    expect(cssVars['--persona-palette-colors-primary-500']).toBe('#171717');
+  });
+
   it('maps radius tokens into the legacy widget radius aliases', () => {
     const theme = createTheme({
       palette: {

package/src/utils/theme.ts

@@ -146,13 +146,16 @@ export const createLightTheme = (userConfig?: DeepPartial<PersonaTheme>): Person
 };
 
 export const createDarkTheme = (userConfig?: DeepPartial<PersonaTheme>): PersonaTheme => {
-  const baseTheme = createTheme(undefined, { validate: false });
-  
+  // createTheme() already merges every palette sub-object (radius, typography,
+  // shadows, …) over the defaults, so only the dark color scales need to be
+  // layered UNDER the user's colors here. Spreading a pre-built default
+  // palette instead would clobber the user's non-color palette overrides
+  // (radius/typography) in dark mode while light mode honored them.
   return createTheme(
     {
       ...userConfig,
       palette: {
-        ...baseTheme.palette,
+        ...userConfig?.palette,
         colors: {
           ...DARK_PALETTE.colors,
           ...userConfig?.palette?.colors,