@runtypelabs/persona 3.8.2 → 3.9.0

package/src/client.ts

@@ -1018,6 +1018,7 @@ export class AgentWidgetClient {
     const assistantMessageRef = { current: null as AgentWidgetMessage | null };
     // Track current partId for message segmentation at tool boundaries
     const partIdState = { current: null as string | null };
+    let didSplitByPartId = false;
     const reasoningMessages = new Map<string, AgentWidgetMessage>();
     const toolMessages = new Map<string, AgentWidgetMessage>();
     const reasoningContext = {
@@ -1060,11 +1061,22 @@ export class AgentWidgetClient {
           payload.step_id
       );
 
+    const baseAssistantId = assistantMessageId;
+    let assistantIdConsumed = false;
+
     const ensureAssistantMessage = () => {
       if (assistantMessage) return assistantMessage;
+      let id: string;
+      if (!assistantIdConsumed && baseAssistantId) {
+        id = baseAssistantId;
+        assistantIdConsumed = true;
+      } else if (baseAssistantId && partIdState.current) {
+        id = `${baseAssistantId}_${partIdState.current}`;
+      } else {
+        id = `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+      }
       assistantMessage = {
-        // Use pre-generated ID if provided, otherwise generate one
-        id: assistantMessageId ?? `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        id,
         role: "assistant",
         content: "",
         createdAt: new Date().toISOString(),
@@ -1507,6 +1519,31 @@ export class AgentWidgetClient {
           if (callKey) {
             toolContext.byCall.delete(callKey);
           }
+        } else if (payloadType === "text_start") {
+          // Lifecycle event: a new text segment is beginning (emitted at tool boundaries)
+          const incomingPartId = payload.partId;
+          if (incomingPartId !== undefined && partIdState.current !== null && incomingPartId !== partIdState.current) {
+            const prev = assistantMessage as AgentWidgetMessage | null;
+            if (prev) {
+              prev.streaming = false;
+              emitMessage(prev);
+              assistantMessage = null;
+              didSplitByPartId = true;
+            }
+          }
+          if (incomingPartId !== undefined) {
+            partIdState.current = incomingPartId;
+          }
+        } else if (payloadType === "text_end") {
+          // Lifecycle event: current text segment ended (tool call about to start)
+          // Seal the current assistant message so the next segment gets a new one
+          const prev = assistantMessage as AgentWidgetMessage | null;
+          if (prev) {
+            prev.streaming = false;
+            emitMessage(prev);
+            assistantMessage = null;
+            didSplitByPartId = true;
+          }
         } else if (payloadType === "step_chunk" || payloadType === "step_delta") {
           // Only process chunks for prompt steps, not tool/context steps
           const stepType = (payload as any).stepType;
@@ -1515,7 +1552,27 @@ export class AgentWidgetClient {
             // Skip tool-related chunks - they're handled by tool_start/tool_complete
             continue;
           }
+
+          // partId-based segmentation: when partId changes, seal current message
+          // and start a new one so text and tools render in chronological order
+          const incomingPartId = payload.partId;
+          if (incomingPartId !== undefined && partIdState.current !== null && incomingPartId !== partIdState.current) {
+            const prev = assistantMessage as AgentWidgetMessage | null;
+            if (prev) {
+              prev.streaming = false;
+              emitMessage(prev);
+              assistantMessage = null;
+              didSplitByPartId = true;
+            }
+          }
+          if (incomingPartId !== undefined) {
+            partIdState.current = incomingPartId;
+          }
+
           const assistant = ensureAssistantMessage();
+          if (incomingPartId !== undefined && !assistant.partId) {
+            assistant.partId = incomingPartId;
+          }
           // Support various field names: text, delta, content, chunk (Runtype uses 'chunk')
           const chunk = payload.text ?? payload.delta ?? payload.content ?? payload.chunk ?? "";
           if (chunk) {
@@ -1822,7 +1879,19 @@ export class AgentWidgetClient {
           }
         } else if (payloadType === "flow_complete") {
           const finalContent = payload.result?.response;
-          if (finalContent !== undefined && finalContent !== null) {
+          if (didSplitByPartId) {
+            // Content was split into multiple assistant messages — the full response
+            // in flow_complete would overwrite the last segment. Just finalize streaming.
+            if (assistantMessage !== null) {
+              const msg: AgentWidgetMessage = assistantMessage;
+              streamParsers.delete(msg.id);
+              rawContentBuffers.delete(msg.id);
+              if (msg.streaming !== false) {
+                msg.streaming = false;
+                emitMessage(msg);
+              }
+            }
+          } else if (finalContent !== undefined && finalContent !== null) {
             const assistant = ensureAssistantMessage();
             // Check if we have raw content buffer that needs final processing
             const rawBuffer = rawContentBuffers.get(assistant.id);

package/src/components/panel.ts

@@ -1,4 +1,5 @@
 import { createElement } from "../utils/dom";
+import { DEFAULT_FLOATING_LAUNCHER_WIDTH } from "../defaults";
 import { AgentWidgetConfig } from "../types";
 import { positionMap } from "../utils/positioning";
 import { isDockedMountMode } from "../utils/dock";
@@ -68,7 +69,7 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
   const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
-  const width = launcherWidth ?? "min(400px, calc(100vw - 24px))";
+  const width = launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
   panel.style.width = width;
   panel.style.maxWidth = width;
 

package/src/defaults.ts

@@ -2,6 +2,16 @@ import type { AgentWidgetConfig } from "./types";
 import type { DeepPartial, PersonaTheme } from "./types/theme";
 import { deepMerge } from "./utils/deep-merge";
 
+/**
+ * Default width for the floating launcher panel (when not overridden).
+ * Benchmarks: many chat products use ~300–400px; 400px is a frequent “standard” default.
+ * We use 440px to better fit code/JSON and structured replies while staying responsive via `min(..., 100vw)`.
+ */
+export const DEFAULT_FLOATING_LAUNCHER_WIDTH = "min(440px, calc(100vw - 24px))";
+
+/** Max width cap paired with {@link DEFAULT_FLOATING_LAUNCHER_WIDTH} for theme defaults. */
+export const DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH = "440px";
+
 /**
  * Default widget configuration
  * Single source of truth for all default values
@@ -26,7 +36,7 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     agentIconName: "bot",
     headerIconName: "bot",
     position: "bottom-right",
-    width: "min(400px, calc(100vw - 24px))",
+    width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
     heightOffset: 0,
     autoExpand: false,
     callToActionIconHidden: false,

package/src/index.ts

@@ -274,6 +274,8 @@ export {
 // Default configuration exports
 export {
   DEFAULT_WIDGET_CONFIG,
+  DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
+  DEFAULT_FLOATING_LAUNCHER_WIDTH,
   mergeWithDefaults
 } from "./defaults";
 export {

package/src/presets.ts

@@ -1,5 +1,6 @@
 import type { AgentWidgetConfig } from "./types";
 import type { DeepPartial, PersonaTheme } from "./types/theme";
+import { DEFAULT_FLOATING_LAUNCHER_WIDTH } from "./defaults";
 
 /**
  * A named preset containing partial widget configuration.
@@ -65,7 +66,7 @@ export const PRESET_SHOP: WidgetPreset = {
       subtitle: "Here to help you find what you need",
       agentIconText: "🛍️",
       position: "bottom-right",
-      width: "min(400px, calc(100vw - 24px))",
+      width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
     },
     copy: {
       welcomeTitle: "Welcome to our shop!",

package/src/theme-editor/sections.ts

@@ -1,6 +1,10 @@
 /** Declarative section/field definitions for the theme editor (pure data — no DOM, no render logic) */
 
 import type { SectionDef, TabDef, SubGroupDef, FieldDef } from './types';
+import {
+  DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
+  DEFAULT_FLOATING_LAUNCHER_WIDTH,
+} from '../defaults';
 import { COLOR_FAMILIES } from './color-utils';
 import {
   ROLE_SURFACES,
@@ -273,8 +277,8 @@ const panelLayoutSectionDef: SectionDef = {
   title: 'Panel',
   collapsed: false,
   fields: [
-    { id: 'panel-width', label: 'Width', type: 'text', path: 'theme.components.panel.width', defaultValue: 'min(400px, calc(100vw - 24px))' },
-    { id: 'panel-max-width', label: 'Max Width', type: 'text', path: 'theme.components.panel.maxWidth', defaultValue: '400px' },
+    { id: 'panel-width', label: 'Width', type: 'text', path: 'theme.components.panel.width', defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
+    { id: 'panel-max-width', label: 'Max Width', type: 'text', path: 'theme.components.panel.maxWidth', defaultValue: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH },
     { id: 'panel-height', label: 'Height', type: 'text', path: 'theme.components.panel.height', defaultValue: '600px' },
     { id: 'panel-max-height', label: 'Max Height', type: 'text', path: 'theme.components.panel.maxHeight', defaultValue: 'calc(100vh - 80px)' },
     { id: 'panel-border-radius', label: 'Border Radius', type: 'select', path: 'theme.components.panel.borderRadius', defaultValue: 'palette.radius.xl', options: [
@@ -590,7 +594,7 @@ const launcherBasicsSectionDef: SectionDef = {
     { id: 'launch-enabled', label: 'Enabled', type: 'toggle', path: 'launcher.enabled', defaultValue: true },
     { id: 'launch-mount-mode', label: 'Mount Mode', type: 'select', path: 'launcher.mountMode', defaultValue: 'floating', options: [{ value: 'floating', label: 'Floating' }, { value: 'docked', label: 'Docked' }] },
     { id: 'launch-position', label: 'Position', type: 'select', path: 'launcher.position', defaultValue: 'bottom-right', options: [{ value: 'bottom-right', label: 'Bottom Right' }, { value: 'bottom-left', label: 'Bottom Left' }, { value: 'top-right', label: 'Top Right' }, { value: 'top-left', label: 'Top Left' }] },
-    { id: 'launch-width', label: 'Width', type: 'text', path: 'launcher.width', defaultValue: 'min(400px, calc(100vw - 24px))' },
+    { id: 'launch-width', label: 'Width', type: 'text', path: 'launcher.width', defaultValue: DEFAULT_FLOATING_LAUNCHER_WIDTH },
     { id: 'launch-auto-expand', label: 'Auto Expand', type: 'toggle', path: 'launcher.autoExpand', defaultValue: false },
     { id: 'launch-title', label: 'Title', type: 'text', path: 'launcher.title', defaultValue: 'Chat Assistant' },
     { id: 'launch-subtitle', label: 'Subtitle', type: 'text', path: 'launcher.subtitle', defaultValue: 'Here to help you get answers fast' },

package/src/theme-reference.ts

@@ -115,7 +115,7 @@ export const THEME_TOKEN_DOCS = {
       panel: {
         description: 'Chat panel container.',
         properties:
-          'width, maxWidth (400px), height (600px), maxHeight, borderRadius, shadow.',
+          'width, maxWidth (440px), height (600px), maxHeight, borderRadius, shadow.',
       },
       header: {
         description: 'Chat panel header.',

package/src/ui.ts

@@ -69,7 +69,7 @@ import {
 import { readFlexGapPx, resolveArtifactPaneWidthPx } from "./utils/artifact-resize";
 import { enhanceWithForms } from "./components/forms";
 import { pluginRegistry } from "./plugins/registry";
-import { mergeWithDefaults } from "./defaults";
+import { mergeWithDefaults, DEFAULT_FLOATING_LAUNCHER_WIDTH } from "./defaults";
 import { createEventBus } from "./utils/events";
 import {
   createActionManager,
@@ -883,6 +883,10 @@ export const createAgentExperience = (
       selectedModelId: composerCfg?.selectedModelId,
       onModelChange: (modelId: string) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
+        // Sync to agent config so the next request uses the selected model
+        if (config.agent) {
+          config.agent = { ...config.agent, model: modelId };
+        }
       },
       onVoiceToggle:
         config.voiceRecognition?.enabled === true
@@ -929,13 +933,18 @@ export const createAgentExperience = (
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
 
-  // Apply contentMaxWidth to composer form and attachment previews if configured
+  // Apply contentMaxWidth to composer form, suggestions, and attachment previews if configured
   const contentMaxWidth = config.layout?.contentMaxWidth;
   if (contentMaxWidth && composerForm) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && suggestions) {
+    suggestions.style.maxWidth = contentMaxWidth;
+    suggestions.style.marginLeft = "auto";
+    suggestions.style.marginRight = "auto";
+  }
   if (contentMaxWidth && attachmentPreviewsContainer) {
     attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
     attachmentPreviewsContainer.style.marginLeft = "auto";
@@ -1499,7 +1508,7 @@ export const createAgentExperience = (
       if (mobileFullscreen && ownerWindow.innerWidth <= mobileBreakpoint) return;
       if (!shouldExpandLauncherForArtifacts(config, launcherEnabled)) return;
 
-      const base = config.launcher?.width ?? config.launcherWidth ?? "min(400px, calc(100vw - 24px))";
+      const base = config.launcher?.width ?? config.launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
       const expanded =
         config.features?.artifacts?.layout?.expandedPanelWidth ??
         "min(720px, calc(100vw - 24px))";
@@ -1650,7 +1659,7 @@ export const createAgentExperience = (
 
     // Re-apply panel width/maxWidth from initial setup
     const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
-    const width = launcherWidth ?? "min(400px, calc(100vw - 24px))";
+    const width = launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
     if (!sidebarMode && !dockedMode) {
       if (isInlineEmbed && fullHeight) {
         panel.style.width = "100%";
@@ -3600,7 +3609,7 @@ export const createAgentExperience = (
       // In sidebar/fullHeight mode, don't override the width - it's handled by applyFullHeightStyles
       if (!sidebarMode && !dockedMode) {
         const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
-        const width = launcherWidth ?? "min(400px, calc(100vw - 24px))";
+        const width = launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
         panel.style.width = width;
         panel.style.maxWidth = width;
       }
@@ -5021,6 +5030,11 @@ export const createAgentExperience = (
           composerForm.style.marginLeft = "auto";
           composerForm.style.marginRight = "auto";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = updatedContentMaxWidth;
+          suggestions.style.marginLeft = "auto";
+          suggestions.style.marginRight = "auto";
+        }
       } else {
         messagesWrapper.style.maxWidth = "";
         messagesWrapper.style.marginLeft = "";
@@ -5031,6 +5045,11 @@ export const createAgentExperience = (
           composerForm.style.marginLeft = "";
           composerForm.style.marginRight = "";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = "";
+          suggestions.style.marginLeft = "";
+          suggestions.style.marginRight = "";
+        }
       }
 
       // Update status indicator visibility and text

package/src/utils/tokens.ts

@@ -8,6 +8,10 @@ import type {
   ComponentTokens,
   SemanticTokens,
 } from '../types/theme';
+import {
+  DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
+  DEFAULT_FLOATING_LAUNCHER_WIDTH,
+} from '../defaults';
 
 export const DEFAULT_PALETTE = {
   colors: {
@@ -277,8 +281,8 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     shadow: 'palette.shadows.lg',
   },
   panel: {
-    width: 'min(400px, calc(100vw - 24px))',
-    maxWidth: '400px',
+    width: DEFAULT_FLOATING_LAUNCHER_WIDTH,
+    maxWidth: DEFAULT_FLOATING_LAUNCHER_MAX_WIDTH,
     height: '600px',
     maxHeight: 'calc(100vh - 80px)',
     borderRadius: 'palette.radius.xl',