@runtypelabs/persona 3.10.1 → 3.12.0

package/dist/index.d.cts

@@ -1177,6 +1177,13 @@ type AgentWidgetScrollToBottomFeature = {
     label?: string;
 };
 type AgentWidgetToolCallCollapsedMode = "tool-call" | "tool-name" | "tool-preview";
+/**
+ * Animation mode applied to tool call header text while the tool is running.
+ * Character-by-character modes (`shimmer`, `shimmer-color`, `rainbow`) wrap each
+ * character in a span with staggered `animation-delay`. `pulse` applies to the
+ * entire text container. Honors `prefers-reduced-motion`.
+ */
+type AgentWidgetToolCallLoadingAnimation = "none" | "pulse" | "shimmer" | "shimmer-color" | "rainbow";
 type AgentWidgetToolCallDisplayFeature = {
     /**
      * Controls what collapsed tool call rows show in their header/summary area.
@@ -1190,6 +1197,8 @@ type AgentWidgetToolCallDisplayFeature = {
     activePreview?: boolean;
     /**
      * Optional CSS min-height applied to active collapsed tool call rows.
+     * @default undefined (no min-height)
+     * @example "100px"
      */
     activeMinHeight?: string;
     /**
@@ -1208,6 +1217,16 @@ type AgentWidgetToolCallDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the tool call header text while the tool is active.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetReasoningDisplayFeature = {
     /**
@@ -1230,6 +1249,17 @@ type AgentWidgetReasoningDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the reasoning header text while reasoning is active.
+     * Reuses the same modes as tool call animations.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetFeatureFlags = {
     showReasoning?: boolean;
@@ -1788,22 +1818,39 @@ type AgentWidgetApprovalConfig = {
 type AgentWidgetToolCallConfig = {
     /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
     shadow?: string;
+    /** Background color of the tool call bubble container. */
     backgroundColor?: string;
+    /** Border color of the tool call bubble container. */
     borderColor?: string;
+    /** Border width of the tool call bubble container (CSS value, e.g. `"1px"`). */
     borderWidth?: string;
+    /** Border radius of the tool call bubble container (CSS value, e.g. `"12px"`). */
     borderRadius?: string;
+    /** Background color of the collapsed header row. */
     headerBackgroundColor?: string;
+    /** Text color of the collapsed header row (tool name / summary). */
     headerTextColor?: string;
+    /** Horizontal padding of the collapsed header row (CSS value). */
     headerPaddingX?: string;
+    /** Vertical padding of the collapsed header row (CSS value). */
     headerPaddingY?: string;
+    /** Background color of the expanded content area. */
     contentBackgroundColor?: string;
+    /** Text color of the expanded content area. */
     contentTextColor?: string;
+    /** Horizontal padding of the expanded content area (CSS value). */
     contentPaddingX?: string;
+    /** Vertical padding of the expanded content area (CSS value). */
     contentPaddingY?: string;
+    /** Background color of code blocks (arguments / result) in the expanded area. */
     codeBlockBackgroundColor?: string;
+    /** Border color of code blocks in the expanded area. */
     codeBlockBorderColor?: string;
+    /** Text color of code blocks in the expanded area. */
     codeBlockTextColor?: string;
+    /** Color of the expand/collapse toggle icon. */
     toggleTextColor?: string;
+    /** Color of section labels ("Arguments", "Result", "Activity") in the expanded area. */
     labelTextColor?: string;
     /**
      * Override the collapsed summary row content for a tool call bubble.
@@ -1817,6 +1864,14 @@ type AgentWidgetToolCallConfig = {
         collapsedMode: AgentWidgetToolCallCollapsedMode;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active tool rows.
@@ -1839,6 +1894,47 @@ type AgentWidgetToolCallConfig = {
         defaultSummary: string;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while a tool call is active (running).
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time and
+     * applied as styled `<span>` elements. Works with all animation modes.
+     *
+     * When not set, falls back to the current `collapsedMode` behavior.
+     * @example "Calling {toolName}... ~{duration}~"
+     * @example "**Searching** *{toolName}*..."
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when a tool call is complete.
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the existing "Used tool for X seconds" text.
+     * @example "Finished {toolName} ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetReasoningConfig = {
     /**
@@ -1852,6 +1948,14 @@ type AgentWidgetReasoningConfig = {
         previewText: string;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active reasoning rows.
@@ -1864,6 +1968,45 @@ type AgentWidgetReasoningConfig = {
         isActive: boolean;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while reasoning is active (streaming).
+     *
+     * **Placeholders:** `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time.
+     *
+     * When not set, falls back to the default "Thinking..." text.
+     * @example "Thinking... ~{duration}~"
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when reasoning is complete.
+     *
+     * **Placeholders:** `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the default "Thought for X seconds" text.
+     * @example "Thought for ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetSuggestionChipsConfig = {
     fontFamily?: "sans-serif" | "serif" | "mono";

package/dist/index.d.ts

@@ -1177,6 +1177,13 @@ type AgentWidgetScrollToBottomFeature = {
     label?: string;
 };
 type AgentWidgetToolCallCollapsedMode = "tool-call" | "tool-name" | "tool-preview";
+/**
+ * Animation mode applied to tool call header text while the tool is running.
+ * Character-by-character modes (`shimmer`, `shimmer-color`, `rainbow`) wrap each
+ * character in a span with staggered `animation-delay`. `pulse` applies to the
+ * entire text container. Honors `prefers-reduced-motion`.
+ */
+type AgentWidgetToolCallLoadingAnimation = "none" | "pulse" | "shimmer" | "shimmer-color" | "rainbow";
 type AgentWidgetToolCallDisplayFeature = {
     /**
      * Controls what collapsed tool call rows show in their header/summary area.
@@ -1190,6 +1197,8 @@ type AgentWidgetToolCallDisplayFeature = {
     activePreview?: boolean;
     /**
      * Optional CSS min-height applied to active collapsed tool call rows.
+     * @default undefined (no min-height)
+     * @example "100px"
      */
     activeMinHeight?: string;
     /**
@@ -1208,6 +1217,16 @@ type AgentWidgetToolCallDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the tool call header text while the tool is active.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetReasoningDisplayFeature = {
     /**
@@ -1230,6 +1249,17 @@ type AgentWidgetReasoningDisplayFeature = {
      * @default true
      */
     expandable?: boolean;
+    /**
+     * Animation mode applied to the reasoning header text while reasoning is active.
+     * Reuses the same modes as tool call animations.
+     * - "none" — static text, no animation
+     * - "pulse" — opacity pulse on the entire header text
+     * - "shimmer" — monochrome opacity sweep per character
+     * - "shimmer-color" — color gradient sweep per character
+     * - "rainbow" — rainbow color cycle per character
+     * @default "none"
+     */
+    loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 type AgentWidgetFeatureFlags = {
     showReasoning?: boolean;
@@ -1788,22 +1818,39 @@ type AgentWidgetApprovalConfig = {
 type AgentWidgetToolCallConfig = {
     /** Box-shadow for tool-call bubbles; overrides `theme.toolBubbleShadow` when set. */
     shadow?: string;
+    /** Background color of the tool call bubble container. */
     backgroundColor?: string;
+    /** Border color of the tool call bubble container. */
     borderColor?: string;
+    /** Border width of the tool call bubble container (CSS value, e.g. `"1px"`). */
     borderWidth?: string;
+    /** Border radius of the tool call bubble container (CSS value, e.g. `"12px"`). */
     borderRadius?: string;
+    /** Background color of the collapsed header row. */
     headerBackgroundColor?: string;
+    /** Text color of the collapsed header row (tool name / summary). */
     headerTextColor?: string;
+    /** Horizontal padding of the collapsed header row (CSS value). */
     headerPaddingX?: string;
+    /** Vertical padding of the collapsed header row (CSS value). */
     headerPaddingY?: string;
+    /** Background color of the expanded content area. */
     contentBackgroundColor?: string;
+    /** Text color of the expanded content area. */
     contentTextColor?: string;
+    /** Horizontal padding of the expanded content area (CSS value). */
     contentPaddingX?: string;
+    /** Vertical padding of the expanded content area (CSS value). */
     contentPaddingY?: string;
+    /** Background color of code blocks (arguments / result) in the expanded area. */
     codeBlockBackgroundColor?: string;
+    /** Border color of code blocks in the expanded area. */
     codeBlockBorderColor?: string;
+    /** Text color of code blocks in the expanded area. */
     codeBlockTextColor?: string;
+    /** Color of the expand/collapse toggle icon. */
     toggleTextColor?: string;
+    /** Color of section labels ("Arguments", "Result", "Activity") in the expanded area. */
     labelTextColor?: string;
     /**
      * Override the collapsed summary row content for a tool call bubble.
@@ -1817,6 +1864,14 @@ type AgentWidgetToolCallConfig = {
         collapsedMode: AgentWidgetToolCallCollapsedMode;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active tool rows.
@@ -1839,6 +1894,47 @@ type AgentWidgetToolCallConfig = {
         defaultSummary: string;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while a tool call is active (running).
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time and
+     * applied as styled `<span>` elements. Works with all animation modes.
+     *
+     * When not set, falls back to the current `collapsedMode` behavior.
+     * @example "Calling {toolName}... ~{duration}~"
+     * @example "**Searching** *{toolName}*..."
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when a tool call is complete.
+     *
+     * **Placeholders:** `{toolName}` (tool name), `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the existing "Used tool for X seconds" text.
+     * @example "Finished {toolName} ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetReasoningConfig = {
     /**
@@ -1852,6 +1948,14 @@ type AgentWidgetReasoningConfig = {
         previewText: string;
         isActive: boolean;
         config: AgentWidgetConfig;
+        /** Static elapsed time snapshot, e.g. "2.6s". */
+        elapsed: string;
+        /**
+         * Returns a `<span>` whose text content is automatically updated every
+         * 100ms by the widget's global timer. Place it anywhere in your returned
+         * HTMLElement to get a live-ticking duration display.
+         */
+        createElapsedElement: () => HTMLElement;
     }) => HTMLElement | string | null;
     /**
      * Override the lightweight collapsed preview content shown for active reasoning rows.
@@ -1864,6 +1968,45 @@ type AgentWidgetReasoningConfig = {
         isActive: boolean;
         config: AgentWidgetConfig;
     }) => HTMLElement | string | null;
+    /**
+     * Template string for the header text while reasoning is active (streaming).
+     *
+     * **Placeholders:** `{duration}` (live-updating elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — parsed at render time.
+     *
+     * When not set, falls back to the default "Thinking..." text.
+     * @example "Thinking... ~{duration}~"
+     */
+    activeTextTemplate?: string;
+    /**
+     * Template string for the header text when reasoning is complete.
+     *
+     * **Placeholders:** `{duration}` (final elapsed time).
+     *
+     * **Inline formatting:** `~dim~`, `*italic*`, `**bold**` — same syntax as `activeTextTemplate`.
+     *
+     * When not set, falls back to the default "Thought for X seconds" text.
+     * @example "Thought for ~{duration}~"
+     */
+    completeTextTemplate?: string;
+    /**
+     * Primary color for shimmer-color animation mode.
+     * Defaults to the current text color.
+     */
+    loadingAnimationColor?: string;
+    /**
+     * Secondary/end color for shimmer-color animation mode.
+     * Creates a gradient sweep between `loadingAnimationColor` and this color.
+     * @default "#3b82f6"
+     */
+    loadingAnimationSecondaryColor?: string;
+    /**
+     * Duration of one full animation cycle in milliseconds.
+     * Applies to pulse, shimmer, shimmer-color, and rainbow modes.
+     * @default 2000
+     */
+    loadingAnimationDuration?: number;
 };
 type AgentWidgetSuggestionChipsConfig = {
     fontFamily?: "sans-serif" | "serif" | "mono";