@runtypelabs/persona 1.40.0 → 1.41.0

package/dist/widget.css

@@ -687,6 +687,13 @@
   box-shadow: none !important;
 }
 
+/* Prevent iOS Safari from zooming on input focus (requires 16px minimum) */
+@media (hover: none) and (pointer: coarse) {
+  .tvw-composer-textarea {
+    font-size: 1rem !important;
+  }
+}
+
 /* Prevent form container from showing focus styles */
 .tvw-widget-composer:focus-within {
   outline: none !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/composer-builder.ts

@@ -85,7 +85,7 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   const textarea = createElement("textarea") as HTMLTextAreaElement;
   textarea.placeholder = config?.copy?.inputPlaceholder ?? "Type your message…";
   textarea.className =
-    "tvw-w-full tvw-min-h-[24px] tvw-resize-none tvw-border-none tvw-bg-transparent tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-none";
+    "tvw-w-full tvw-min-h-[24px] tvw-resize-none tvw-border-none tvw-bg-transparent tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-none tvw-composer-textarea";
   textarea.rows = 1;
 
   // Apply font family and weight from config

package/src/components/message-bubble.ts

@@ -1,14 +1,17 @@
 import { createElement } from "../utils/dom";
-import { 
-  AgentWidgetMessage, 
+import {
+  AgentWidgetMessage,
   AgentWidgetMessageLayoutConfig,
   AgentWidgetAvatarConfig,
   AgentWidgetTimestampConfig,
   AgentWidgetMessageActionsConfig,
-  AgentWidgetMessageFeedback
+  AgentWidgetMessageFeedback,
+  LoadingIndicatorRenderContext
 } from "../types";
 import { renderLucideIcon } from "../utils/icons";
 
+export type LoadingIndicatorRenderer = (context: LoadingIndicatorRenderContext) => HTMLElement | null;
+
 export type MessageTransform = (context: {
   text: string;
   message: AgentWidgetMessage;
@@ -50,6 +53,35 @@ export const createTypingIndicator = (): HTMLElement => {
   return container;
 };
 
+/**
+ * Render loading indicator with fallback chain:
+ * 1. Custom renderer (if provided and returns non-null)
+ * 2. Default typing indicator
+ */
+export const renderLoadingIndicatorWithFallback = (
+  location: 'inline' | 'standalone',
+  customRenderer?: LoadingIndicatorRenderer,
+  widgetConfig?: import("../types").AgentWidgetConfig
+): HTMLElement | null => {
+  const context: LoadingIndicatorRenderContext = {
+    config: widgetConfig ?? ({} as import("../types").AgentWidgetConfig),
+    streaming: true,
+    location,
+    defaultRenderer: createTypingIndicator
+  };
+
+  // Try custom renderer first
+  if (customRenderer) {
+    const result = customRenderer(context);
+    if (result !== null) {
+      return result;
+    }
+  }
+
+  // Fall back to default
+  return createTypingIndicator();
+};
+
 /**
  * Create an avatar element
  */
@@ -394,6 +426,20 @@ export const createMessageActions = (
   return container;
 };
 
+/**
+ * Options for creating a standard message bubble
+ */
+export type CreateStandardBubbleOptions = {
+  /**
+   * Custom loading indicator renderer for inline location
+   */
+  loadingIndicatorRenderer?: LoadingIndicatorRenderer;
+  /**
+   * Full widget config (needed for loading indicator context)
+   */
+  widgetConfig?: import("../types").AgentWidgetConfig;
+};
+
 /**
  * Create standard message bubble
  * Supports layout configuration for avatars, timestamps, and visual presets
@@ -403,7 +449,8 @@ export const createStandardBubble = (
   transform: MessageTransform,
   layoutConfig?: AgentWidgetMessageLayoutConfig,
   actionsConfig?: AgentWidgetMessageActionsConfig,
-  actionCallbacks?: MessageActionCallbacks
+  actionCallbacks?: MessageActionCallbacks,
+  options?: CreateStandardBubbleOptions
 ): HTMLElement => {
   const config = layoutConfig ?? {};
   const layout = config.layout ?? "bubble";
@@ -449,8 +496,15 @@ export const createStandardBubble = (
   // Add typing indicator if this is a streaming assistant message
   if (message.streaming && message.role === "assistant") {
     if (!message.content || !message.content.trim()) {
-      const typingIndicator = createTypingIndicator();
-      bubble.appendChild(typingIndicator);
+      // Use custom renderer if provided, otherwise default
+      const indicator = renderLoadingIndicatorWithFallback(
+        'inline',
+        options?.loadingIndicatorRenderer,
+        options?.widgetConfig
+      );
+      if (indicator) {
+        bubble.appendChild(indicator);
+      }
     }
   }
 
@@ -502,7 +556,8 @@ export const createBubbleWithLayout = (
   transform: MessageTransform,
   layoutConfig?: AgentWidgetMessageLayoutConfig,
   actionsConfig?: AgentWidgetMessageActionsConfig,
-  actionCallbacks?: MessageActionCallbacks
+  actionCallbacks?: MessageActionCallbacks,
+  options?: CreateStandardBubbleOptions
 ): HTMLElement => {
   const config = layoutConfig ?? {};
 
@@ -524,5 +579,5 @@ export const createBubbleWithLayout = (
   }
 
   // Fall back to standard bubble
-  return createStandardBubble(message, transform, layoutConfig, actionsConfig, actionCallbacks);
+  return createStandardBubble(message, transform, layoutConfig, actionsConfig, actionCallbacks, options);
 };

package/src/index.ts

@@ -53,7 +53,12 @@ export type {
   InjectMessageOptions,
   InjectAssistantMessageOptions,
   InjectUserMessageOptions,
-  InjectSystemMessageOptions
+  InjectSystemMessageOptions,
+  // Loading indicator types
+  LoadingIndicatorRenderContext,
+  AgentWidgetLoadingIndicatorConfig,
+  // Idle indicator types
+  IdleIndicatorRenderContext
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -169,9 +174,15 @@ export {
   createStandardBubble,
   createBubbleWithLayout,
   createTypingIndicator,
-  createMessageActions
+  createMessageActions,
+  renderLoadingIndicatorWithFallback
+} from "./components/message-bubble";
+export type {
+  MessageTransform,
+  MessageActionCallbacks,
+  LoadingIndicatorRenderer,
+  CreateStandardBubbleOptions
 } from "./components/message-bubble";
-export type { MessageTransform, MessageActionCallbacks } from "./components/message-bubble";
 export {
   createCSATFeedback,
   createNPSFeedback

package/src/plugins/types.ts

@@ -1,4 +1,4 @@
-import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
+import { AgentWidgetMessage, AgentWidgetConfig, LoadingIndicatorRenderContext, IdleIndicatorRenderContext } from "../types";
 
 /**
  * Plugin interface for customizing widget components
@@ -75,6 +75,43 @@ export interface AgentWidgetPlugin {
     config: AgentWidgetConfig;
   }) => HTMLElement | null;
 
+  /**
+   * Custom renderer for loading indicator
+   * Return null to use default renderer (or config-based renderer)
+   *
+   * @example
+   * ```typescript
+   * renderLoadingIndicator: ({ location, defaultRenderer }) => {
+   *   if (location === 'standalone') {
+   *     const el = document.createElement('div');
+   *     el.textContent = 'Thinking...';
+   *     return el;
+   *   }
+   *   return defaultRenderer();
+   * }
+   * ```
+   */
+  renderLoadingIndicator?: (context: LoadingIndicatorRenderContext) => HTMLElement | null;
+
+  /**
+   * Custom renderer for idle state indicator.
+   * Called when the widget is idle (not streaming) and has at least one message.
+   * Return an HTMLElement to display, or null to hide (default).
+   *
+   * @example
+   * ```typescript
+   * renderIdleIndicator: ({ lastMessage, messageCount }) => {
+   *   if (messageCount === 0) return null;
+   *   if (lastMessage?.role !== 'assistant') return null;
+   *   const el = document.createElement('div');
+   *   el.className = 'idle-pulse';
+   *   el.setAttribute('data-preserve-animation', 'true');
+   *   return el;
+   * }
+   * ```
+   */
+  renderIdleIndicator?: (context: IdleIndicatorRenderContext) => HTMLElement | null;
+
   /**
    * Called when plugin is registered
    */

package/src/styles/widget.css

@@ -687,6 +687,13 @@
   box-shadow: none !important;
 }
 
+/* Prevent iOS Safari from zooming on input focus (requires 16px minimum) */
+@media (hover: none) and (pointer: coarse) {
+  .tvw-composer-textarea {
+    font-size: 1rem !important;
+  }
+}
+
 /* Prevent form container from showing focus styles */
 .tvw-widget-composer:focus-within {
   outline: none !important;

package/src/types.ts

@@ -1256,6 +1256,146 @@ export type AgentWidgetPersistStateConfig = {
   clearOnChatClear?: boolean;
 };
 
+// ============================================================================
+// Loading Indicator Types
+// ============================================================================
+
+/**
+ * Context provided to loading indicator render functions.
+ * Used for customizing the loading indicator appearance.
+ */
+export type LoadingIndicatorRenderContext = {
+  /**
+   * Full widget configuration for accessing theme, etc.
+   */
+  config: AgentWidgetConfig;
+  /**
+   * Current streaming state (always true when indicator is shown)
+   */
+  streaming: boolean;
+  /**
+   * Location where the indicator is rendered:
+   * - 'inline': Inside a streaming assistant message bubble (when content is empty)
+   * - 'standalone': Separate bubble while waiting for stream to start
+   */
+  location: 'inline' | 'standalone';
+  /**
+   * Function to render the default 3-dot bouncing indicator.
+   * Call this if you want to use the default for certain cases.
+   */
+  defaultRenderer: () => HTMLElement;
+};
+
+/**
+ * Context provided to idle indicator render functions.
+ * Used for customizing the idle state indicator appearance.
+ */
+export type IdleIndicatorRenderContext = {
+  /**
+   * Full widget configuration for accessing theme, etc.
+   */
+  config: AgentWidgetConfig;
+  /**
+   * The last message in the conversation (if any).
+   * Useful for conditional rendering based on who spoke last.
+   */
+  lastMessage: AgentWidgetMessage | undefined;
+  /**
+   * Total number of messages in the conversation.
+   */
+  messageCount: number;
+};
+
+/**
+ * Configuration for customizing the loading indicator.
+ * The loading indicator is shown while waiting for a response or
+ * when an assistant message is streaming but has no content yet.
+ *
+ * @example
+ * ```typescript
+ * // Custom animated spinner
+ * config: {
+ *   loadingIndicator: {
+ *     render: ({ location }) => {
+ *       const el = document.createElement('div');
+ *       el.innerHTML = '<svg class="spinner">...</svg>';
+ *       el.setAttribute('data-preserve-animation', 'true');
+ *       return el;
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Different indicators by location
+ * config: {
+ *   loadingIndicator: {
+ *     render: ({ location, defaultRenderer }) => {
+ *       if (location === 'inline') {
+ *         return defaultRenderer(); // Use default for inline
+ *       }
+ *       // Custom for standalone
+ *       const el = document.createElement('div');
+ *       el.textContent = 'Thinking...';
+ *       return el;
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Hide loading indicator entirely
+ * config: {
+ *   loadingIndicator: {
+ *     render: () => null
+ *   }
+ * }
+ * ```
+ */
+export type AgentWidgetLoadingIndicatorConfig = {
+  /**
+   * Whether to show the bubble background and border around the standalone loading indicator.
+   * Set to false to render the loading indicator without any bubble styling.
+   * @default true
+   */
+  showBubble?: boolean;
+
+  /**
+   * Custom render function for the loading indicator.
+   * Return an HTMLElement to display, or null to hide the indicator.
+   *
+   * For custom animations, add `data-preserve-animation="true"` attribute
+   * to prevent the DOM morpher from interrupting the animation.
+   */
+  render?: (context: LoadingIndicatorRenderContext) => HTMLElement | null;
+
+  /**
+   * Render function for the idle state indicator.
+   * Called when the widget is idle (not streaming) and has at least one message.
+   * Return an HTMLElement to display, or null to hide (default).
+   *
+   * For animations, add `data-preserve-animation="true"` attribute
+   * to prevent the DOM morpher from interrupting the animation.
+   *
+   * @example
+   * ```typescript
+   * loadingIndicator: {
+   *   renderIdle: ({ lastMessage }) => {
+   *     // Only show idle indicator after assistant messages
+   *     if (lastMessage?.role !== 'assistant') return null;
+   *     const el = document.createElement('div');
+   *     el.className = 'pulse-dot';
+   *     el.setAttribute('data-preserve-animation', 'true');
+   *     return el;
+   *   }
+   * }
+   * ```
+   */
+  renderIdle?: (context: IdleIndicatorRenderContext) => HTMLElement | null;
+};
+
 export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
@@ -1693,6 +1833,29 @@ export type AgentWidgetConfig = {
    * ```
    */
   persistState?: boolean | AgentWidgetPersistStateConfig;
+
+  /**
+   * Configuration for customizing the loading indicator.
+   * The loading indicator is shown while waiting for a response or
+   * when an assistant message is streaming but has no content yet.
+   *
+   * @example
+   * ```typescript
+   * config: {
+   *   loadingIndicator: {
+   *     render: ({ location, defaultRenderer }) => {
+   *       if (location === 'standalone') {
+   *         const el = document.createElement('div');
+   *         el.textContent = 'Thinking...';
+   *         return el;
+   *       }
+   *       return defaultRenderer();
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  loadingIndicator?: AgentWidgetLoadingIndicatorConfig;
 };
 
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";