@solidxai/core-ui 0.1.18 → 0.1.19-beta.1

package/dist/components/core/solid-agent/thread/AgentThread.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CheckCircle2, ChevronDown, LoaderCircle } from "lucide-react";
+import styles from "../SolidAgent.module.css";
+import widgetStyles from "../widgets/solidChatWidgets.module.css";
+import { SolidXAIIcon } from "../SolidXAIIcon";
+import { AgentEventTypes, type AgentChatItem, type AgentContext } from "../types";
+import { SolidAgentChatItem } from "./SolidAgentChatItem";
+
+type Props = {
+    items: AgentChatItem[];
+    thinking: boolean;
+    working?: boolean;
+    hasMore: boolean;
+    context?: AgentContext;
+    emptyState?: React.ReactNode;
+    onLoadOlder: () => void;
+    onReply: (widgetId: string, widget: string, value: unknown) => void;
+    onPrompt: (text: string) => void;
+};
+
+type ItemGroup = { kind: "user"; item: AgentChatItem } | { kind: "agent"; key: string; items: AgentChatItem[] };
+
+const isUserItem = (item: AgentChatItem) => item.eventType === AgentEventTypes.userMessage && !item.widget;
+const ASSISTANT_MESSAGE_TYPES = new Set<string>([
+    AgentEventTypes.llmToken,
+    AgentEventTypes.llmComplete,
+    AgentEventTypes.turnComplete,
+    AgentEventTypes.turnCompleteLegacy,
+]);
+
+const isAssistantMessage = (item: AgentChatItem) => !item.widget && ASSISTANT_MESSAGE_TYPES.has(item.eventType);
+
+/** Consecutive agent items form one turn (one avatar); each user message stands alone. */
+function groupItems(items: AgentChatItem[]): ItemGroup[] {
+    const groups: ItemGroup[] = [];
+    let turn: AgentChatItem[] = [];
+    let turnKey = "initial-agent-turn";
+    const flush = () => {
+        if (turn.length) groups.push({ kind: "agent", key: turnKey, items: turn });
+        turn = [];
+    };
+    for (const item of items) {
+        if (isUserItem(item)) {
+            flush();
+            groups.push({ kind: "user", item });
+            turnKey = `after-${item.id}`;
+        } else {
+            turn.push(item);
+        }
+    }
+    flush();
+    return groups;
+}
+
+function AgentActivityDisclosure({
+    turnKey,
+    items,
+    detailItems,
+    working,
+    showSummary,
+    renderItem,
+}: {
+    turnKey: string;
+    items: AgentChatItem[];
+    detailItems: AgentChatItem[];
+    working: boolean;
+    showSummary: boolean;
+    renderItem: (item: AgentChatItem) => React.ReactNode;
+}) {
+    const [expanded, setExpanded] = useState(false);
+    const [now, setNow] = useState(() => Date.now());
+    const hasLiveTimer = useRef(working);
+    const startTime = useRef(working ? Date.now() : (items[0]?.at || Date.now()));
+
+    useEffect(() => {
+        if (!working) {
+            if (hasLiveTimer.current) setNow(Date.now());
+            return;
+        }
+        hasLiveTimer.current = true;
+        const timer = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(timer);
+    }, [working]);
+
+    const toolCount = items.filter((item) => item.eventType === AgentEventTypes.toolCalling).length;
+    const activeDuration = Math.max(0, Math.floor((now - startTime.current) / 1000));
+    const recordedDuration = items.length > 1
+        ? Math.max(0, Math.floor((items[items.length - 1].at - items[0].at) / 1000))
+        : 0;
+    const seconds = hasLiveTimer.current ? activeDuration : recordedDuration;
+    const durationLabel = `${seconds}s`;
+    const summary = working
+        ? `Working · ${toolCount ? `${toolCount} tool${toolCount === 1 ? "" : "s"} · ` : ""}${durationLabel}`
+        : toolCount
+          ? `${toolCount} tool${toolCount === 1 ? "" : "s"} called · took ${durationLabel}`
+          : `Activity · took ${durationLabel}`;
+    const panelId = `agent-activity-${turnKey.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+
+    return (
+        <section className={`${widgetStyles.ActivityGroup} ${showSummary ? "" : widgetStyles.ActivityTimerOnly}`} aria-label={showSummary ? "Agent activity" : undefined}>
+            {showSummary && (
+                <>
+                    {detailItems.length > 0 ? <button
+                        type="button"
+                        className={widgetStyles.ActivitySummary}
+                        aria-expanded={expanded}
+                        aria-controls={panelId}
+                        onClick={() => setExpanded((value) => !value)}
+                    >
+                        {working
+                            ? <LoaderCircle size={15} className={widgetStyles.ActivitySpinner} aria-hidden="true" />
+                            : <CheckCircle2 size={15} className={widgetStyles.ActivityComplete} aria-hidden="true" />}
+                        <span className={widgetStyles.ActivitySummaryText}>{summary}</span>
+                        <ChevronDown size={15} className={`${widgetStyles.ActivityChevron} ${expanded ? widgetStyles.ActivityChevronOpen : ""}`} aria-hidden="true" />
+                    </button> : <div className={widgetStyles.ActivitySummary} role="status">
+                        {working
+                            ? <LoaderCircle size={15} className={widgetStyles.ActivitySpinner} aria-hidden="true" />
+                            : <CheckCircle2 size={15} className={widgetStyles.ActivityComplete} aria-hidden="true" />}
+                        <span className={widgetStyles.ActivitySummaryText}>{summary}</span>
+                    </div>}
+                    {expanded && (
+                        <div id={panelId} className={widgetStyles.ActivityDetails}>
+                            {detailItems.map(renderItem)}
+                        </div>
+                    )}
+                </>
+            )}
+        </section>
+    );
+}
+
+/** Renders thread items; sticks to the bottom while new content streams unless the user scrolled up. */
+export function AgentThread({ items, thinking, working = thinking, hasMore, context, emptyState, onLoadOlder, onReply, onPrompt }: Props) {
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const pinned = useRef(true);
+    const prevHeight = useRef(0);
+    const prevFirstId = useRef<string | undefined>(undefined);
+
+    useLayoutEffect(() => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const firstId = items[0]?.id;
+        if (prevFirstId.current && firstId !== prevFirstId.current && prevHeight.current) {
+            // Older history was prepended: keep the viewport where it was.
+            el.scrollTop = el.scrollHeight - prevHeight.current;
+        } else if (pinned.current) {
+            el.scrollTop = el.scrollHeight;
+        }
+        prevFirstId.current = firstId;
+        prevHeight.current = el.scrollHeight;
+    }, [items]);
+
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const onScroll = () => {
+            pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+            prevHeight.current = el.scrollHeight;
+        };
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return () => el.removeEventListener("scroll", onScroll);
+    }, []);
+
+    if (!items.length && !thinking && emptyState) {
+        return <div className={styles.thread}>{emptyState}</div>;
+    }
+
+    const groups = groupItems(items);
+    const lastGroup = groups[groups.length - 1];
+    if (working && (!lastGroup || lastGroup.kind === "user")) {
+        groups.push({
+            kind: "agent",
+            key: lastGroup?.kind === "user" ? `after-${lastGroup.item.id}` : "working-turn",
+            items: [],
+        });
+    }
+    const renderItem = (item: AgentChatItem) => (
+        <SolidAgentChatItem key={item.id} item={item} agentContext={context} onReply={onReply} onPrompt={onPrompt} />
+    );
+
+    return (
+        <div ref={scrollRef} className={styles.thread} role="log" aria-live="polite" aria-relevant="additions">
+            {hasMore && (
+                <button type="button" className={`${styles.btn} ${styles.loadMore}`} onClick={onLoadOlder}>
+                    Load earlier messages
+                </button>
+            )}
+            {groups.map((group) => {
+                if (group.kind === "user") return renderItem(group.item);
+
+                const isCurrentTurn = working && group === groups[groups.length - 1];
+                const latestTool = isCurrentTurn
+                    ? [...group.items].reverse().find((item) => item.eventType === AgentEventTypes.toolCalling && item.live)
+                    : undefined;
+                const currentActivity = latestTool ?? (isCurrentTurn
+                    ? [...group.items].reverse().find((item) => item.eventType === AgentEventTypes.toolCalling)
+                    : undefined);
+                const activityItems = group.items.filter((item) => !isAssistantMessage(item));
+                const detailItems = activityItems.filter((item) => item !== currentActivity);
+                const activitySet = new Set(group.items.filter((item) => !isAssistantMessage(item)));
+                const showIdleThinkingStatus = isCurrentTurn && thinking && activityItems.length === 0;
+                let activityRendered = false;
+                const turnContent = [
+                    ...(showIdleThinkingStatus ? [
+                        <AgentActivityDisclosure
+                            key={`activity-${group.key}`}
+                            turnKey={group.key}
+                            items={activityItems}
+                            detailItems={detailItems}
+                            working={isCurrentTurn}
+                            showSummary
+                            renderItem={renderItem}
+                        />,
+                    ] : []),
+                    ...group.items.flatMap((item) => {
+                        if (activitySet.has(item)) {
+                            if (activityRendered) return [];
+                            activityRendered = true;
+                            return [
+                                <AgentActivityDisclosure
+                                    key={`activity-${group.key}`}
+                                    turnKey={group.key}
+                                    items={activityItems}
+                                    detailItems={detailItems}
+                                    working={isCurrentTurn}
+                                    showSummary={detailItems.length > 0 || currentActivity !== undefined}
+                                    renderItem={renderItem}
+                                />,
+                                ...(currentActivity ? [renderItem(currentActivity)] : []),
+                            ];
+                        }
+                        if (item === currentActivity) return [];
+                        return [renderItem(item)];
+                    }),
+                ];
+
+                return (
+                    <div key={group.key} className={widgetStyles.AiTurnGroup}>
+                        <div className={`${widgetStyles.Avatar} ${widgetStyles.AvatarAi}`}>
+                            <SolidXAIIcon size={14} />
+                        </div>
+                        <div className={widgetStyles.AiTurnContent}>{turnContent}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/dist/components/core/solid-agent/thread/SolidAgentChatItem.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { type AgentChatItem, type AgentContext } from "../types";
+export { parseWidgetContent, type InlineChatWidget } from "./inlineWidget";
+/** Registry name of the widget that renders an event when `event_data.widget` is absent. */
+export declare const getDefaultChatWidgetName: (eventType: string) => string;
+type ErrorBoundaryProps = {
+    widget: string;
+    eventData: Record<string, any>;
+    children: React.ReactNode;
+};
+type ErrorBoundaryState = {
+    error: Error | null;
+};
+/** Keeps a throwing widget inside its own bubble; the rest of the thread keeps working. */
+export declare class SolidChatWidgetErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error): void;
+    componentDidUpdate(prev: ErrorBoundaryProps): void;
+    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}
+type SolidAgentChatItemProps = {
+    item: AgentChatItem;
+    agentContext?: AgentContext;
+    onReply: (widgetId: string, widget: string, value: unknown) => void;
+    onPrompt: (text: string) => void;
+};
+/**
+ * Renders one thread item. The widget named in `event_data.widget` wins; then a widget the agent
+ * sent as its text reply (`{"widgetName", "data"}`, see parseWidgetContent; a reply that does not
+ * parse renders as text, unchanged); otherwise the default widget for the event type. All resolve
+ * through the extension registry, so a UI module can register new chat widgets or override a
+ * default by registering the same name.
+ */
+export declare const SolidAgentChatItem: ({ item, agentContext, onReply, onPrompt }: SolidAgentChatItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidAgentChatItem.d.ts.map

package/dist/components/core/solid-agent/thread/SolidAgentChatItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidAgentChatItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/thread/SolidAgentChatItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAmB,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAGlF,OAAO,EAAE,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE3E,4FAA4F;AAC5F,eAAO,MAAM,wBAAwB,cAAe,MAAM,KAAG,MAuB5D,CAAC;AAUF,KAAK,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AACxG,KAAK,kBAAkB,GAAG;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,2FAA2F;AAC3F,qBAAa,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IACrG,KAAK,EAAE,kBAAkB,CAAmB;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAI9B,kBAAkB,CAAC,IAAI,EAAE,kBAAkB;IAK3C,MAAM;CAST;AAED,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,8CAA+C,uBAAuB,4CA2BpG,CAAC"}

package/dist/components/core/solid-agent/thread/SolidAgentChatItem.js

@@ -0,0 +1,148 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { getExtensionComponent } from "../../../../helpers/registry";
+import styles from "../SolidAgent.module.css";
+import { AgentEventTypes } from "../types";
+import { parseWidgetContent } from "./inlineWidget";
+export { parseWidgetContent } from "./inlineWidget";
+/** Registry name of the widget that renders an event when `event_data.widget` is absent. */
+export var getDefaultChatWidgetName = function (eventType) {
+    switch (eventType) {
+        case AgentEventTypes.userMessage:
+            return "DefaultUserMessageChatWidget";
+        case AgentEventTypes.llmToken:
+        case AgentEventTypes.llmComplete:
+        case AgentEventTypes.turnComplete:
+        case AgentEventTypes.turnCompleteLegacy:
+            return "DefaultAssistantMessageChatWidget";
+        case AgentEventTypes.toolCalling:
+            return "DefaultToolCallChatWidget";
+        case AgentEventTypes.agentError:
+        case AgentEventTypes.error:
+            return "DefaultErrorChatWidget";
+        case AgentEventTypes.executionCancelled:
+        case AgentEventTypes.executionCancelledLegacy:
+            return "DefaultNoticeChatWidget";
+        case AgentEventTypes.agentStarted:
+        case AgentEventTypes.stepStarted:
+            return "DefaultThinkingChatWidget";
+        default:
+            return "DefaultUnknownChatWidget";
+    }
+};
+/** Assistant text events whose content may carry a widget as JSON (see parseWidgetContent). */
+var TEXT_EVENT_TYPES = new Set([
+    AgentEventTypes.llmToken,
+    AgentEventTypes.llmComplete,
+    AgentEventTypes.turnComplete,
+    AgentEventTypes.turnCompleteLegacy,
+]);
+/** Keeps a throwing widget inside its own bubble; the rest of the thread keeps working. */
+var SolidChatWidgetErrorBoundary = /** @class */ (function (_super) {
+    __extends(SolidChatWidgetErrorBoundary, _super);
+    function SolidChatWidgetErrorBoundary() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        Object.defineProperty(_this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { error: null }
+        });
+        return _this;
+    }
+    Object.defineProperty(SolidChatWidgetErrorBoundary, "getDerivedStateFromError", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (error) {
+            return { error: error };
+        }
+    });
+    Object.defineProperty(SolidChatWidgetErrorBoundary.prototype, "componentDidCatch", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (error) {
+            console.error("[solidAgent] chat widget \"".concat(this.props.widget, "\" failed to render"), error);
+        }
+    });
+    Object.defineProperty(SolidChatWidgetErrorBoundary.prototype, "componentDidUpdate", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (prev) {
+            // A later update of the same widget gets a fresh attempt.
+            if (this.state.error && prev.eventData !== this.props.eventData)
+                this.setState({ error: null });
+        }
+    });
+    Object.defineProperty(SolidChatWidgetErrorBoundary.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            if (!this.state.error)
+                return this.props.children;
+            return (_jsxs("div", { className: styles.widgetFallback, role: "alert", children: [_jsxs("span", { children: ["The \u201C", this.props.widget, "\u201D widget failed to render."] }), _jsx("pre", { className: styles.pre, style: { maxHeight: 180 }, children: JSON.stringify(this.props.eventData, null, 2) })] }));
+        }
+    });
+    return SolidChatWidgetErrorBoundary;
+}(React.Component));
+export { SolidChatWidgetErrorBoundary };
+/**
+ * Renders one thread item. The widget named in `event_data.widget` wins; then a widget the agent
+ * sent as its text reply (`{"widgetName", "data"}`, see parseWidgetContent; a reply that does not
+ * parse renders as text, unchanged); otherwise the default widget for the event type. All resolve
+ * through the extension registry, so a UI module can register new chat widgets or override a
+ * default by registering the same name.
+ */
+export var SolidAgentChatItem = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var item = _a.item, agentContext = _a.agentContext, onReply = _a.onReply, onPrompt = _a.onPrompt;
+    var isText = !item.widget && TEXT_EVENT_TYPES.has(item.eventType);
+    var content = (_b = item.eventData) === null || _b === void 0 ? void 0 : _b.content;
+    var inline = useMemo(function () { return (isText ? parseWidgetContent(content) : null); }, [isText, content]);
+    var widgetName = (_d = (_c = item.widget) !== null && _c !== void 0 ? _c : inline === null || inline === void 0 ? void 0 : inline.widget) !== null && _d !== void 0 ? _d : getDefaultChatWidgetName(item.eventType);
+    var DynamicWidget = (_e = getExtensionComponent(widgetName)) !== null && _e !== void 0 ? _e : getExtensionComponent("DefaultUnknownChatWidget");
+    var widgetId = (_f = item.widgetId) !== null && _f !== void 0 ? _f : item.id;
+    var eventData = inline ? inline.data : item.eventData;
+    var widgetProps = {
+        eventType: item.eventType,
+        eventData: eventData,
+        widgetId: widgetId,
+        live: !!item.live,
+        final: !!item.final,
+        timestamp: item.at,
+        reply: function (value) { return onReply(widgetId, widgetName, value); },
+        sendPrompt: onPrompt,
+        agentContext: agentContext,
+    };
+    return (_jsx(SolidChatWidgetErrorBoundary, { widget: widgetName, eventData: eventData, children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
+};
+//# sourceMappingURL=SolidAgentChatItem.js.map

package/dist/components/core/solid-agent/thread/SolidAgentChatItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidAgentChatItem.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/thread/SolidAgentChatItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport styles from \"../SolidAgent.module.css\";\nimport { AgentEventTypes, type AgentChatItem, type AgentContext } from \"../types\";\nimport { parseWidgetContent } from \"./inlineWidget\";\n\nexport { parseWidgetContent, type InlineChatWidget } from \"./inlineWidget\";\n\n/** Registry name of the widget that renders an event when `event_data.widget` is absent. */\nexport const getDefaultChatWidgetName = (eventType: string): string => {\n    switch (eventType) {\n        case AgentEventTypes.userMessage:\n            return \"DefaultUserMessageChatWidget\";\n        case AgentEventTypes.llmToken:\n        case AgentEventTypes.llmComplete:\n        case AgentEventTypes.turnComplete:\n        case AgentEventTypes.turnCompleteLegacy:\n            return \"DefaultAssistantMessageChatWidget\";\n        case AgentEventTypes.toolCalling:\n            return \"DefaultToolCallChatWidget\";\n        case AgentEventTypes.agentError:\n        case AgentEventTypes.error:\n            return \"DefaultErrorChatWidget\";\n        case AgentEventTypes.executionCancelled:\n        case AgentEventTypes.executionCancelledLegacy:\n            return \"DefaultNoticeChatWidget\";\n        case AgentEventTypes.agentStarted:\n        case AgentEventTypes.stepStarted:\n            return \"DefaultThinkingChatWidget\";\n        default:\n            return \"DefaultUnknownChatWidget\";\n    }\n};\n\n/** Assistant text events whose content may carry a widget as JSON (see parseWidgetContent). */\nconst TEXT_EVENT_TYPES = new Set<string>([\n    AgentEventTypes.llmToken,\n    AgentEventTypes.llmComplete,\n    AgentEventTypes.turnComplete,\n    AgentEventTypes.turnCompleteLegacy,\n]);\n\ntype ErrorBoundaryProps = { widget: string; eventData: Record<string, any>; children: React.ReactNode };\ntype ErrorBoundaryState = { error: Error | null };\n\n/** Keeps a throwing widget inside its own bubble; the rest of the thread keeps working. */\nexport class SolidChatWidgetErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n    state: ErrorBoundaryState = { error: null };\n\n    static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n        return { error };\n    }\n\n    componentDidCatch(error: Error) {\n        console.error(`[solidAgent] chat widget \"${this.props.widget}\" failed to render`, error);\n    }\n\n    componentDidUpdate(prev: ErrorBoundaryProps) {\n        // A later update of the same widget gets a fresh attempt.\n        if (this.state.error && prev.eventData !== this.props.eventData) this.setState({ error: null });\n    }\n\n    render() {\n        if (!this.state.error) return this.props.children;\n        return (\n            <div className={styles.widgetFallback} role=\"alert\">\n                <span>The “{this.props.widget}” widget failed to render.</span>\n                <pre className={styles.pre} style={{ maxHeight: 180 }}>{JSON.stringify(this.props.eventData, null, 2)}</pre>\n            </div>\n        );\n    }\n}\n\ntype SolidAgentChatItemProps = {\n    item: AgentChatItem;\n    agentContext?: AgentContext;\n    onReply: (widgetId: string, widget: string, value: unknown) => void;\n    onPrompt: (text: string) => void;\n};\n\n/**\n * Renders one thread item. The widget named in `event_data.widget` wins; then a widget the agent\n * sent as its text reply (`{\"widgetName\", \"data\"}`, see parseWidgetContent; a reply that does not\n * parse renders as text, unchanged); otherwise the default widget for the event type. All resolve\n * through the extension registry, so a UI module can register new chat widgets or override a\n * default by registering the same name.\n */\nexport const SolidAgentChatItem = ({ item, agentContext, onReply, onPrompt }: SolidAgentChatItemProps) => {\n    const isText = !item.widget && TEXT_EVENT_TYPES.has(item.eventType);\n    const content = item.eventData?.content;\n    const inline = useMemo(() => (isText ? parseWidgetContent(content) : null), [isText, content]);\n\n    const widgetName = item.widget ?? inline?.widget ?? getDefaultChatWidgetName(item.eventType);\n    const DynamicWidget = getExtensionComponent(widgetName) ?? getExtensionComponent(\"DefaultUnknownChatWidget\");\n    const widgetId = item.widgetId ?? item.id;\n    const eventData = inline ? inline.data : item.eventData;\n\n    const widgetProps: SolidChatWidgetProps = {\n        eventType: item.eventType,\n        eventData,\n        widgetId,\n        live: !!item.live,\n        final: !!item.final,\n        timestamp: item.at,\n        reply: (value: unknown) => onReply(widgetId, widgetName, value),\n        sendPrompt: onPrompt,\n        agentContext,\n    };\n\n    return (\n        <SolidChatWidgetErrorBoundary widget={widgetName} eventData={eventData}>\n            {DynamicWidget && <DynamicWidget {...widgetProps} />}\n        </SolidChatWidgetErrorBoundary>\n    );\n};\n"]}

package/dist/components/core/solid-agent/thread/SolidAgentChatItem.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo } from "react";
+import { getExtensionComponent } from "../../../../helpers/registry";
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+import styles from "../SolidAgent.module.css";
+import { AgentEventTypes, type AgentChatItem, type AgentContext } from "../types";
+import { parseWidgetContent } from "./inlineWidget";
+
+export { parseWidgetContent, type InlineChatWidget } from "./inlineWidget";
+
+/** Registry name of the widget that renders an event when `event_data.widget` is absent. */
+export const getDefaultChatWidgetName = (eventType: string): string => {
+    switch (eventType) {
+        case AgentEventTypes.userMessage:
+            return "DefaultUserMessageChatWidget";
+        case AgentEventTypes.llmToken:
+        case AgentEventTypes.llmComplete:
+        case AgentEventTypes.turnComplete:
+        case AgentEventTypes.turnCompleteLegacy:
+            return "DefaultAssistantMessageChatWidget";
+        case AgentEventTypes.toolCalling:
+            return "DefaultToolCallChatWidget";
+        case AgentEventTypes.agentError:
+        case AgentEventTypes.error:
+            return "DefaultErrorChatWidget";
+        case AgentEventTypes.executionCancelled:
+        case AgentEventTypes.executionCancelledLegacy:
+            return "DefaultNoticeChatWidget";
+        case AgentEventTypes.agentStarted:
+        case AgentEventTypes.stepStarted:
+            return "DefaultThinkingChatWidget";
+        default:
+            return "DefaultUnknownChatWidget";
+    }
+};
+
+/** Assistant text events whose content may carry a widget as JSON (see parseWidgetContent). */
+const TEXT_EVENT_TYPES = new Set<string>([
+    AgentEventTypes.llmToken,
+    AgentEventTypes.llmComplete,
+    AgentEventTypes.turnComplete,
+    AgentEventTypes.turnCompleteLegacy,
+]);
+
+type ErrorBoundaryProps = { widget: string; eventData: Record<string, any>; children: React.ReactNode };
+type ErrorBoundaryState = { error: Error | null };
+
+/** Keeps a throwing widget inside its own bubble; the rest of the thread keeps working. */
+export class SolidChatWidgetErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState = { error: null };
+
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+        return { error };
+    }
+
+    componentDidCatch(error: Error) {
+        console.error(`[solidAgent] chat widget "${this.props.widget}" failed to render`, error);
+    }
+
+    componentDidUpdate(prev: ErrorBoundaryProps) {
+        // A later update of the same widget gets a fresh attempt.
+        if (this.state.error && prev.eventData !== this.props.eventData) this.setState({ error: null });
+    }
+
+    render() {
+        if (!this.state.error) return this.props.children;
+        return (
+            <div className={styles.widgetFallback} role="alert">
+                <span>The “{this.props.widget}” widget failed to render.</span>
+                <pre className={styles.pre} style={{ maxHeight: 180 }}>{JSON.stringify(this.props.eventData, null, 2)}</pre>
+            </div>
+        );
+    }
+}
+
+type SolidAgentChatItemProps = {
+    item: AgentChatItem;
+    agentContext?: AgentContext;
+    onReply: (widgetId: string, widget: string, value: unknown) => void;
+    onPrompt: (text: string) => void;
+};
+
+/**
+ * Renders one thread item. The widget named in `event_data.widget` wins; then a widget the agent
+ * sent as its text reply (`{"widgetName", "data"}`, see parseWidgetContent; a reply that does not
+ * parse renders as text, unchanged); otherwise the default widget for the event type. All resolve
+ * through the extension registry, so a UI module can register new chat widgets or override a
+ * default by registering the same name.
+ */
+export const SolidAgentChatItem = ({ item, agentContext, onReply, onPrompt }: SolidAgentChatItemProps) => {
+    const isText = !item.widget && TEXT_EVENT_TYPES.has(item.eventType);
+    const content = item.eventData?.content;
+    const inline = useMemo(() => (isText ? parseWidgetContent(content) : null), [isText, content]);
+
+    const widgetName = item.widget ?? inline?.widget ?? getDefaultChatWidgetName(item.eventType);
+    const DynamicWidget = getExtensionComponent(widgetName) ?? getExtensionComponent("DefaultUnknownChatWidget");
+    const widgetId = item.widgetId ?? item.id;
+    const eventData = inline ? inline.data : item.eventData;
+
+    const widgetProps: SolidChatWidgetProps = {
+        eventType: item.eventType,
+        eventData,
+        widgetId,
+        live: !!item.live,
+        final: !!item.final,
+        timestamp: item.at,
+        reply: (value: unknown) => onReply(widgetId, widgetName, value),
+        sendPrompt: onPrompt,
+        agentContext,
+    };
+
+    return (
+        <SolidChatWidgetErrorBoundary widget={widgetName} eventData={eventData}>
+            {DynamicWidget && <DynamicWidget {...widgetProps} />}
+        </SolidChatWidgetErrorBoundary>
+    );
+};

package/dist/components/core/solid-agent/thread/inlineWidget.d.ts

@@ -0,0 +1,8 @@
+/** A widget the agent sent as its text reply: `{"widgetName": "...", "data": {...} | "<json>"}`. */
+export type InlineChatWidget = {
+    widget: string;
+    data: Record<string, any>;
+};
+/** Returns the widget in a reply, or null when the reply is not that JSON (it then renders as text). */
+export declare function parseWidgetContent(content: unknown): InlineChatWidget | null;
+//# sourceMappingURL=inlineWidget.d.ts.map

package/dist/components/core/solid-agent/thread/inlineWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/thread/inlineWidget.ts"],"names":[],"mappings":"AAAA,oGAAoG;AACpG,MAAM,MAAM,gBAAgB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,CAAC;AAE7E,wGAAwG;AACxG,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAAI,CAsB5E"}

package/dist/components/core/solid-agent/thread/inlineWidget.js

@@ -0,0 +1,30 @@
+/** Returns the widget in a reply, or null when the reply is not that JSON (it then renders as text). */
+export function parseWidgetContent(content) {
+    if (typeof content !== "string")
+        return null;
+    try {
+        var parsed = JSON.parse(content);
+        if (typeof (parsed === null || parsed === void 0 ? void 0 : parsed.widgetName) !== "string")
+            return null;
+        var data = parsed.data;
+        if (typeof data === "string") {
+            try {
+                data = JSON.parse(data);
+            }
+            catch (_a) {
+                // Assistant markdown envelopes carry the markdown itself as a string.
+                if (parsed.widgetName === "markdown")
+                    data = { text: data };
+                else
+                    return null;
+            }
+        }
+        if (!data || typeof data !== "object" || Array.isArray(data))
+            return null;
+        return { widget: parsed.widgetName, data: data };
+    }
+    catch (_b) {
+        return null;
+    }
+}
+//# sourceMappingURL=inlineWidget.js.map

package/dist/components/core/solid-agent/thread/inlineWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inlineWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/thread/inlineWidget.ts"],"names":[],"mappings":"AAGA,wGAAwG;AACxG,MAAM,UAAU,kBAAkB,CAAC,OAAgB;IAC/C,IAAI,OAAO,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC7C,IAAI;QACA,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAA,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAExD,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACvB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI;gBACA,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;aAC3B;YAAC,WAAM;gBACJ,sEAAsE;gBACtE,IAAI,MAAM,CAAC,UAAU,KAAK,UAAU;oBAAE,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;;oBACvD,OAAO,IAAI,CAAC;aACpB;SACJ;QAED,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,MAAA,EAAE,CAAC;KAC9C;IAAC,WAAM;QACJ,OAAO,IAAI,CAAC;KACf;AACL,CAAC","sourcesContent":["/** A widget the agent sent as its text reply: `{\"widgetName\": \"...\", \"data\": {...} | \"<json>\"}`. */\nexport type InlineChatWidget = { widget: string; data: Record<string, any> };\n\n/** Returns the widget in a reply, or null when the reply is not that JSON (it then renders as text). */\nexport function parseWidgetContent(content: unknown): InlineChatWidget | null {\n    if (typeof content !== \"string\") return null;\n    try {\n        const parsed = JSON.parse(content);\n        if (typeof parsed?.widgetName !== \"string\") return null;\n\n        let data = parsed.data;\n        if (typeof data === \"string\") {\n            try {\n                data = JSON.parse(data);\n            } catch {\n                // Assistant markdown envelopes carry the markdown itself as a string.\n                if (parsed.widgetName === \"markdown\") data = { text: data };\n                else return null;\n            }\n        }\n\n        if (!data || typeof data !== \"object\" || Array.isArray(data)) return null;\n        return { widget: parsed.widgetName, data };\n    } catch {\n        return null;\n    }\n}\n"]}

package/dist/components/core/solid-agent/thread/inlineWidget.ts

@@ -0,0 +1,27 @@
+/** A widget the agent sent as its text reply: `{"widgetName": "...", "data": {...} | "<json>"}`. */
+export type InlineChatWidget = { widget: string; data: Record<string, any> };
+
+/** Returns the widget in a reply, or null when the reply is not that JSON (it then renders as text). */
+export function parseWidgetContent(content: unknown): InlineChatWidget | null {
+    if (typeof content !== "string") return null;
+    try {
+        const parsed = JSON.parse(content);
+        if (typeof parsed?.widgetName !== "string") return null;
+
+        let data = parsed.data;
+        if (typeof data === "string") {
+            try {
+                data = JSON.parse(data);
+            } catch {
+                // Assistant markdown envelopes carry the markdown itself as a string.
+                if (parsed.widgetName === "markdown") data = { text: data };
+                else return null;
+            }
+        }
+
+        if (!data || typeof data !== "object" || Array.isArray(data)) return null;
+        return { widget: parsed.widgetName, data };
+    } catch {
+        return null;
+    }
+}