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

package/dist/components/core/solid-agent/widgets/DefaultToolCallChatWidget.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, CheckCircle2, ChevronRight, CloudUpload, Cog, File, FilePen, FilePlus, Folder, Loader2, Pencil, Search, Terminal, XCircle, } from "lucide-react";
+import styles from "./solidChatWidgets.module.css";
+import { formatDuration, toolCategory, toolDisplayName } from "../agentFormat";
+/** Icon for a tool, by name / filesystem action / category (same mapping as the agent-ui). */
+function getToolIcon(name, args) {
+    if (name === "bash")
+        return Terminal;
+    if (name === "filesystem_tool" && typeof (args === null || args === void 0 ? void 0 : args.action) === "string") {
+        if (args.action === "read")
+            return File;
+        if (args.action === "search")
+            return Search;
+        if (args.action === "edit")
+            return Pencil;
+        if (args.action === "write")
+            return FilePlus;
+    }
+    switch (toolCategory(name)) {
+        case "Context":
+            return Search;
+        case "Build":
+            return FilePen;
+        case "Deploy":
+            return CloudUpload;
+        case "Files":
+            return Folder;
+        default:
+            return Cog;
+    }
+}
+var CARD_CLASS = {
+    running: styles.ToolCardRunning,
+    success: styles.ToolCardDone,
+    warning: styles.ToolCardWarning,
+    error: styles.ToolCardError,
+};
+function StatusIcon(_a) {
+    var status = _a.status;
+    if (status === "running")
+        return _jsx(Loader2, { size: 13, className: "".concat(styles.ToolCardStatusIcon, " ").concat(styles.Spin) });
+    if (status === "warning")
+        return _jsx(AlertTriangle, { size: 13, className: styles.ToolCardStatusWarning });
+    if (status === "error")
+        return _jsx(XCircle, { size: 13, className: styles.ToolCardStatusError });
+    return _jsx(CheckCircle2, { size: 13, className: styles.ToolCardStatusDone });
+}
+/**
+ * Default widget for `ToolCalling`: the tool card. `ToolProgress` sub-steps show under the
+ * header; `ToolResult` sets the status and duration. Expanding shows the Arguments and Result.
+ */
+export var DefaultToolCallChatWidget = function (_a) {
+    var _b, _c, _d, _e;
+    var eventData = _a.eventData, live = _a.live;
+    var _f = useState(false), expanded = _f[0], setExpanded = _f[1];
+    var toolName = (_b = eventData.tool_name) !== null && _b !== void 0 ? _b : "tool";
+    var args = eventData.arguments;
+    var progress = Array.isArray(eventData.progress) ? eventData.progress : [];
+    var status = live ? "running" : (_c = eventData.status) !== null && _c !== void 0 ? _c : "success";
+    var output = (_d = eventData.output_raw) !== null && _d !== void 0 ? _d : eventData.output;
+    var hasArgs = !!args && Object.keys(args).length > 0;
+    var expandable = (hasArgs || !!output) && status !== "running";
+    var ToolIcon = getToolIcon(toolName, args);
+    return (_jsxs("div", { className: "".concat(styles.ToolCard, " ").concat((_e = CARD_CLASS[status]) !== null && _e !== void 0 ? _e : styles.ToolCardDone), children: [_jsxs("button", { type: "button", className: styles.ToolCardHeaderBtn, onClick: expandable ? function () { return setExpanded(function (value) { return !value; }); } : undefined, "data-expandable": expandable ? "true" : undefined, "aria-expanded": expandable ? expanded : undefined, children: [_jsx(StatusIcon, { status: status }), _jsx(ToolIcon, { size: 12, className: styles.ToolCardToolIcon }), _jsx("span", { className: styles.ToolCardName, children: live ? "Invoking ".concat(toolDisplayName(toolName, args), "\u2026") : toolDisplayName(toolName, args) }), eventData.summary && _jsx("span", { className: styles.ToolCardDesc, title: eventData.summary, children: eventData.summary }), _jsx("span", { className: styles.ToolCardBadge, children: toolCategory(toolName) }), eventData.duration_ms != null && _jsx("span", { className: styles.ToolCardDuration, children: formatDuration(eventData.duration_ms) }), expandable && _jsx(ChevronRight, { size: 11, className: "".concat(styles.ToolCardChevron, " ").concat(expanded ? styles.ToolCardChevronOpen : "") })] }), progress.length > 0 && (_jsx("div", { className: styles.ToolCardProgress, children: progress.map(function (step, index) { return (_jsxs("div", { className: "".concat(styles.ToolProgressItem, " ").concat(step.status === "running" ? styles.ToolProgressRunning : styles.ToolProgressDone), children: [step.status === "running" ? _jsx(Loader2, { size: 10, className: styles.Spin }) : _jsx(CheckCircle2, { size: 10 }), _jsx("span", { className: styles.ToolProgressLabel, children: step.label }), step.duration_ms != null && step.status === "done" && (_jsx("span", { className: styles.ToolProgressDuration, children: formatDuration(step.duration_ms) }))] }, index)); }) })), expanded && (_jsxs("div", { className: styles.ToolCardExpandable, children: [hasArgs && (_jsxs("div", { className: styles.ToolCardOutput, children: [_jsx("div", { className: styles.ToolOutputHeader, children: _jsx("span", { children: "Arguments" }) }), _jsx("pre", { className: styles.ToolOutputText, children: JSON.stringify(args, null, 2) })] })), output && (_jsxs("div", { className: styles.ToolCardOutput, children: [_jsx("div", { className: styles.ToolOutputHeader, children: _jsx("span", { children: "Result" }) }), _jsx("pre", { className: "".concat(styles.ToolOutputText, " ").concat(status === "warning" ? styles.ToolOutputWarning : status === "error" ? styles.ToolOutputError : ""), children: output })] }))] }))] }));
+};
+//# sourceMappingURL=DefaultToolCallChatWidget.js.map

package/dist/components/core/solid-agent/widgets/DefaultToolCallChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultToolCallChatWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/DefaultToolCallChatWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport {\n    AlertTriangle,\n    CheckCircle2,\n    ChevronRight,\n    CloudUpload,\n    Cog,\n    File,\n    FilePen,\n    FilePlus,\n    Folder,\n    Loader2,\n    Pencil,\n    Search,\n    Terminal,\n    XCircle,\n    type LucideIcon,\n} from \"lucide-react\";\nimport styles from \"./solidChatWidgets.module.css\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport { formatDuration, toolCategory, toolDisplayName } from \"../agentFormat\";\n\ntype ToolStatus = \"running\" | \"success\" | \"warning\" | \"error\";\ntype ToolProgressStep = { label: string; status: \"running\" | \"done\"; duration_ms?: number };\n\n/** Icon for a tool, by name / filesystem action / category (same mapping as the agent-ui). */\nfunction getToolIcon(name: string, args?: Record<string, unknown>): LucideIcon {\n    if (name === \"bash\") return Terminal;\n    if (name === \"filesystem_tool\" && typeof args?.action === \"string\") {\n        if (args.action === \"read\") return File;\n        if (args.action === \"search\") return Search;\n        if (args.action === \"edit\") return Pencil;\n        if (args.action === \"write\") return FilePlus;\n    }\n    switch (toolCategory(name)) {\n        case \"Context\":\n            return Search;\n        case \"Build\":\n            return FilePen;\n        case \"Deploy\":\n            return CloudUpload;\n        case \"Files\":\n            return Folder;\n        default:\n            return Cog;\n    }\n}\n\nconst CARD_CLASS: Record<ToolStatus, string> = {\n    running: styles.ToolCardRunning,\n    success: styles.ToolCardDone,\n    warning: styles.ToolCardWarning,\n    error: styles.ToolCardError,\n};\n\nfunction StatusIcon({ status }: { status: ToolStatus }) {\n    if (status === \"running\") return <Loader2 size={13} className={`${styles.ToolCardStatusIcon} ${styles.Spin}`} />;\n    if (status === \"warning\") return <AlertTriangle size={13} className={styles.ToolCardStatusWarning} />;\n    if (status === \"error\") return <XCircle size={13} className={styles.ToolCardStatusError} />;\n    return <CheckCircle2 size={13} className={styles.ToolCardStatusDone} />;\n}\n\n/**\n * Default widget for `ToolCalling`: the tool card. `ToolProgress` sub-steps show under the\n * header; `ToolResult` sets the status and duration. Expanding shows the Arguments and Result.\n */\nexport const DefaultToolCallChatWidget = ({ eventData, live }: SolidChatWidgetProps) => {\n    const [expanded, setExpanded] = useState(false);\n    const toolName: string = eventData.tool_name ?? \"tool\";\n    const args: Record<string, unknown> | undefined = eventData.arguments;\n    const progress: ToolProgressStep[] = Array.isArray(eventData.progress) ? eventData.progress : [];\n    const status: ToolStatus = live ? \"running\" : (eventData.status as ToolStatus) ?? \"success\";\n    const output: string | undefined = eventData.output_raw ?? eventData.output;\n    const hasArgs = !!args && Object.keys(args).length > 0;\n    const expandable = (hasArgs || !!output) && status !== \"running\";\n    const ToolIcon = getToolIcon(toolName, args);\n\n    return (\n        <div className={`${styles.ToolCard} ${CARD_CLASS[status] ?? styles.ToolCardDone}`}>\n            <button\n                type=\"button\"\n                className={styles.ToolCardHeaderBtn}\n                onClick={expandable ? () => setExpanded((value) => !value) : undefined}\n                data-expandable={expandable ? \"true\" : undefined}\n                aria-expanded={expandable ? expanded : undefined}\n            >\n                <StatusIcon status={status} />\n                <ToolIcon size={12} className={styles.ToolCardToolIcon} />\n                <span className={styles.ToolCardName}>{live ? `Invoking ${toolDisplayName(toolName, args)}…` : toolDisplayName(toolName, args)}</span>\n                {eventData.summary && <span className={styles.ToolCardDesc} title={eventData.summary}>{eventData.summary}</span>}\n                <span className={styles.ToolCardBadge}>{toolCategory(toolName)}</span>\n                {eventData.duration_ms != null && <span className={styles.ToolCardDuration}>{formatDuration(eventData.duration_ms)}</span>}\n                {expandable && <ChevronRight size={11} className={`${styles.ToolCardChevron} ${expanded ? styles.ToolCardChevronOpen : \"\"}`} />}\n            </button>\n\n            {/* Progress sub-steps: always visible */}\n            {progress.length > 0 && (\n                <div className={styles.ToolCardProgress}>\n                    {progress.map((step, index) => (\n                        <div key={index} className={`${styles.ToolProgressItem} ${step.status === \"running\" ? styles.ToolProgressRunning : styles.ToolProgressDone}`}>\n                            {step.status === \"running\" ? <Loader2 size={10} className={styles.Spin} /> : <CheckCircle2 size={10} />}\n                            <span className={styles.ToolProgressLabel}>{step.label}</span>\n                            {step.duration_ms != null && step.status === \"done\" && (\n                                <span className={styles.ToolProgressDuration}>{formatDuration(step.duration_ms)}</span>\n                            )}\n                        </div>\n                    ))}\n                </div>\n            )}\n\n            {expanded && (\n                <div className={styles.ToolCardExpandable}>\n                    {hasArgs && (\n                        <div className={styles.ToolCardOutput}>\n                            <div className={styles.ToolOutputHeader}>\n                                <span>Arguments</span>\n                            </div>\n                            <pre className={styles.ToolOutputText}>{JSON.stringify(args, null, 2)}</pre>\n                        </div>\n                    )}\n                    {output && (\n                        <div className={styles.ToolCardOutput}>\n                            <div className={styles.ToolOutputHeader}>\n                                <span>Result</span>\n                            </div>\n                            <pre className={`${styles.ToolOutputText} ${status === \"warning\" ? styles.ToolOutputWarning : status === \"error\" ? styles.ToolOutputError : \"\"}`}>\n                                {output}\n                            </pre>\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"]}

package/dist/components/core/solid-agent/widgets/DefaultToolCallChatWidget.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import {
+    AlertTriangle,
+    CheckCircle2,
+    ChevronRight,
+    CloudUpload,
+    Cog,
+    File,
+    FilePen,
+    FilePlus,
+    Folder,
+    Loader2,
+    Pencil,
+    Search,
+    Terminal,
+    XCircle,
+    type LucideIcon,
+} from "lucide-react";
+import styles from "./solidChatWidgets.module.css";
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+import { formatDuration, toolCategory, toolDisplayName } from "../agentFormat";
+
+type ToolStatus = "running" | "success" | "warning" | "error";
+type ToolProgressStep = { label: string; status: "running" | "done"; duration_ms?: number };
+
+/** Icon for a tool, by name / filesystem action / category (same mapping as the agent-ui). */
+function getToolIcon(name: string, args?: Record<string, unknown>): LucideIcon {
+    if (name === "bash") return Terminal;
+    if (name === "filesystem_tool" && typeof args?.action === "string") {
+        if (args.action === "read") return File;
+        if (args.action === "search") return Search;
+        if (args.action === "edit") return Pencil;
+        if (args.action === "write") return FilePlus;
+    }
+    switch (toolCategory(name)) {
+        case "Context":
+            return Search;
+        case "Build":
+            return FilePen;
+        case "Deploy":
+            return CloudUpload;
+        case "Files":
+            return Folder;
+        default:
+            return Cog;
+    }
+}
+
+const CARD_CLASS: Record<ToolStatus, string> = {
+    running: styles.ToolCardRunning,
+    success: styles.ToolCardDone,
+    warning: styles.ToolCardWarning,
+    error: styles.ToolCardError,
+};
+
+function StatusIcon({ status }: { status: ToolStatus }) {
+    if (status === "running") return <Loader2 size={13} className={`${styles.ToolCardStatusIcon} ${styles.Spin}`} />;
+    if (status === "warning") return <AlertTriangle size={13} className={styles.ToolCardStatusWarning} />;
+    if (status === "error") return <XCircle size={13} className={styles.ToolCardStatusError} />;
+    return <CheckCircle2 size={13} className={styles.ToolCardStatusDone} />;
+}
+
+/**
+ * Default widget for `ToolCalling`: the tool card. `ToolProgress` sub-steps show under the
+ * header; `ToolResult` sets the status and duration. Expanding shows the Arguments and Result.
+ */
+export const DefaultToolCallChatWidget = ({ eventData, live }: SolidChatWidgetProps) => {
+    const [expanded, setExpanded] = useState(false);
+    const toolName: string = eventData.tool_name ?? "tool";
+    const args: Record<string, unknown> | undefined = eventData.arguments;
+    const progress: ToolProgressStep[] = Array.isArray(eventData.progress) ? eventData.progress : [];
+    const status: ToolStatus = live ? "running" : (eventData.status as ToolStatus) ?? "success";
+    const output: string | undefined = eventData.output_raw ?? eventData.output;
+    const hasArgs = !!args && Object.keys(args).length > 0;
+    const expandable = (hasArgs || !!output) && status !== "running";
+    const ToolIcon = getToolIcon(toolName, args);
+
+    return (
+        <div className={`${styles.ToolCard} ${CARD_CLASS[status] ?? styles.ToolCardDone}`}>
+            <button
+                type="button"
+                className={styles.ToolCardHeaderBtn}
+                onClick={expandable ? () => setExpanded((value) => !value) : undefined}
+                data-expandable={expandable ? "true" : undefined}
+                aria-expanded={expandable ? expanded : undefined}
+            >
+                <StatusIcon status={status} />
+                <ToolIcon size={12} className={styles.ToolCardToolIcon} />
+                <span className={styles.ToolCardName}>{live ? `Invoking ${toolDisplayName(toolName, args)}…` : toolDisplayName(toolName, args)}</span>
+                {eventData.summary && <span className={styles.ToolCardDesc} title={eventData.summary}>{eventData.summary}</span>}
+                <span className={styles.ToolCardBadge}>{toolCategory(toolName)}</span>
+                {eventData.duration_ms != null && <span className={styles.ToolCardDuration}>{formatDuration(eventData.duration_ms)}</span>}
+                {expandable && <ChevronRight size={11} className={`${styles.ToolCardChevron} ${expanded ? styles.ToolCardChevronOpen : ""}`} />}
+            </button>
+
+            {/* Progress sub-steps: always visible */}
+            {progress.length > 0 && (
+                <div className={styles.ToolCardProgress}>
+                    {progress.map((step, index) => (
+                        <div key={index} className={`${styles.ToolProgressItem} ${step.status === "running" ? styles.ToolProgressRunning : styles.ToolProgressDone}`}>
+                            {step.status === "running" ? <Loader2 size={10} className={styles.Spin} /> : <CheckCircle2 size={10} />}
+                            <span className={styles.ToolProgressLabel}>{step.label}</span>
+                            {step.duration_ms != null && step.status === "done" && (
+                                <span className={styles.ToolProgressDuration}>{formatDuration(step.duration_ms)}</span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {expanded && (
+                <div className={styles.ToolCardExpandable}>
+                    {hasArgs && (
+                        <div className={styles.ToolCardOutput}>
+                            <div className={styles.ToolOutputHeader}>
+                                <span>Arguments</span>
+                            </div>
+                            <pre className={styles.ToolOutputText}>{JSON.stringify(args, null, 2)}</pre>
+                        </div>
+                    )}
+                    {output && (
+                        <div className={styles.ToolCardOutput}>
+                            <div className={styles.ToolOutputHeader}>
+                                <span>Result</span>
+                            </div>
+                            <pre className={`${styles.ToolOutputText} ${status === "warning" ? styles.ToolOutputWarning : status === "error" ? styles.ToolOutputError : ""}`}>
+                                {output}
+                            </pre>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};

package/dist/components/core/solid-agent/widgets/DefaultUnknownChatWidget.d.ts

@@ -0,0 +1,7 @@
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+/**
+ * Fallback when `event_data.widget` names a widget that is not registered, or an event type has
+ * no default widget: the payload is shown as collapsible JSON so nothing silently disappears.
+ */
+export declare const DefaultUnknownChatWidget: (props: SolidChatWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultUnknownChatWidget.d.ts.map

package/dist/components/core/solid-agent/widgets/DefaultUnknownChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUnknownChatWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/DefaultUnknownChatWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGpE;;;GAGG;AACH,eAAO,MAAM,wBAAwB,UAAW,oBAAoB,4CAQnE,CAAC"}

package/dist/components/core/solid-agent/widgets/DefaultUnknownChatWidget.js

@@ -0,0 +1,24 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "../SolidAgent.module.css";
+import { SolidJsonChatWidget } from "./SolidJsonChatWidget";
+/**
+ * Fallback when `event_data.widget` names a widget that is not registered, or an event type has
+ * no default widget: the payload is shown as collapsible JSON so nothing silently disappears.
+ */
+export var DefaultUnknownChatWidget = function (props) {
+    var _a;
+    var label = ((_a = props.eventData) === null || _a === void 0 ? void 0 : _a.widget) ? "Unknown widget: ".concat(props.eventData.widget) : "Unhandled event: ".concat(props.eventType);
+    return (_jsxs("div", { className: styles.widgetFallback, children: [_jsx("span", { children: label }), _jsx(SolidJsonChatWidget, __assign({}, props, { eventData: { title: "Event data", data: props.eventData } }))] }));
+};
+//# sourceMappingURL=DefaultUnknownChatWidget.js.map

package/dist/components/core/solid-agent/widgets/DefaultUnknownChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUnknownChatWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/DefaultUnknownChatWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,IAAM,wBAAwB,GAAG,UAAC,KAA2B;;IAChE,IAAM,KAAK,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,MAAM,EAAC,CAAC,CAAC,0BAAmB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAE,CAAC,CAAC,CAAC,2BAAoB,KAAK,CAAC,SAAS,CAAE,CAAC;IAC5H,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,cAAc,aACjC,yBAAO,KAAK,GAAQ,EACpB,KAAC,mBAAmB,eAAK,KAAK,IAAE,SAAS,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,IAC3F,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"../SolidAgent.module.css\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidJsonChatWidget } from \"./SolidJsonChatWidget\";\n\n/**\n * Fallback when `event_data.widget` names a widget that is not registered, or an event type has\n * no default widget: the payload is shown as collapsible JSON so nothing silently disappears.\n */\nexport const DefaultUnknownChatWidget = (props: SolidChatWidgetProps) => {\n    const label = props.eventData?.widget ? `Unknown widget: ${props.eventData.widget}` : `Unhandled event: ${props.eventType}`;\n    return (\n        <div className={styles.widgetFallback}>\n            <span>{label}</span>\n            <SolidJsonChatWidget {...props} eventData={{ title: \"Event data\", data: props.eventData }} />\n        </div>\n    );\n};\n"]}

package/dist/components/core/solid-agent/widgets/DefaultUnknownChatWidget.tsx

@@ -0,0 +1,17 @@
+import styles from "../SolidAgent.module.css";
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+import { SolidJsonChatWidget } from "./SolidJsonChatWidget";
+
+/**
+ * Fallback when `event_data.widget` names a widget that is not registered, or an event type has
+ * no default widget: the payload is shown as collapsible JSON so nothing silently disappears.
+ */
+export const DefaultUnknownChatWidget = (props: SolidChatWidgetProps) => {
+    const label = props.eventData?.widget ? `Unknown widget: ${props.eventData.widget}` : `Unhandled event: ${props.eventType}`;
+    return (
+        <div className={styles.widgetFallback}>
+            <span>{label}</span>
+            <SolidJsonChatWidget {...props} eventData={{ title: "Event data", data: props.eventData }} />
+        </div>
+    );
+};

package/dist/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.d.ts

@@ -0,0 +1,8 @@
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+/**
+ * Default widget for `UserMessage`: dark right-aligned bubble with avatar, time and copy on hover.
+ * Attachments show above the bubble: image thumbnails (click to enlarge) or file chips.
+ * History only carries attachment metadata, so reloaded images show as chips.
+ */
+export declare const DefaultUserMessageChatWidget: ({ eventData, timestamp }: SolidChatWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultUserMessageChatWidget.d.ts.map

package/dist/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUserMessageChatWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAMpE;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,6BAA8B,oBAAoB,4CA8D1F,CAAC"}

package/dist/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FileText, ImageIcon, User } from "lucide-react";
+import styles from "./solidChatWidgets.module.css";
+import { SolidAgentMessageCopyButton } from "../SolidAgentMarkdown";
+import { formatFileSize } from "../agentAttachments";
+import { asArray, formatChatTime } from "./chatWidgetUtils";
+/**
+ * Default widget for `UserMessage`: dark right-aligned bubble with avatar, time and copy on hover.
+ * Attachments show above the bubble: image thumbnails (click to enlarge) or file chips.
+ * History only carries attachment metadata, so reloaded images show as chips.
+ */
+export var DefaultUserMessageChatWidget = function (_a) {
+    var _b;
+    var eventData = _a.eventData, timestamp = _a.timestamp;
+    var content = String((_b = eventData.content) !== null && _b !== void 0 ? _b : "");
+    var attachments = asArray(eventData.attachments);
+    var _c = useState(null), zoom = _c[0], setZoom = _c[1];
+    return (_jsxs("div", { className: "".concat(styles.Row, " ").concat(styles.RowUser), children: [_jsx("div", { className: "".concat(styles.Avatar, " ").concat(styles.AvatarUser), children: _jsx(User, { size: 12 }) }), _jsxs("div", { className: styles.BubbleGroup, children: [attachments.length > 0 && (_jsx("ul", { className: styles.MessageAttachments, "aria-label": "Attachments", children: attachments.map(function (file, index) {
+                            var _a, _b, _c, _d;
+                            // previewUrl: attached in this browser session; url: stored copy (history).
+                            var imageSrc = ((_a = file.mimeType) === null || _a === void 0 ? void 0 : _a.startsWith("image/")) ? (_b = file.previewUrl) !== null && _b !== void 0 ? _b : file.url : undefined;
+                            if (imageSrc) {
+                                return (_jsx("li", { children: _jsx("button", { type: "button", className: styles.MessageAttachmentImageBtn, onClick: function () { return setZoom(imageSrc); }, title: file.name, children: _jsx("img", { className: styles.MessageAttachmentImage, src: imageSrc, alt: file.name }) }) }, index));
+                            }
+                            var chip = (_jsxs(_Fragment, { children: [((_c = file.mimeType) === null || _c === void 0 ? void 0 : _c.startsWith("image/")) ? _jsx(ImageIcon, { size: 13 }) : _jsx(FileText, { size: 13 }), _jsx("span", { className: styles.MessageAttachmentName, children: file.name }), _jsx("span", { className: styles.MessageAttachmentSize, children: formatFileSize((_d = file.size) !== null && _d !== void 0 ? _d : 0) })] }));
+                            return (_jsx("li", { title: file.name, children: file.url ? (_jsx("a", { className: styles.MessageAttachmentFile, href: file.url, target: "_blank", rel: "noopener noreferrer", children: chip })) : (_jsx("span", { className: styles.MessageAttachmentFile, children: chip })) }, index));
+                        }) })), content && (_jsx("div", { className: "".concat(styles.Bubble, " ").concat(styles.BubbleUser), children: _jsx("p", { className: styles.UserText, children: content }) })), _jsxs("div", { className: "".concat(styles.BubbleMeta, " ").concat(styles.BubbleMetaUser), children: [_jsx("span", { className: styles.Timestamp, children: formatChatTime(timestamp) }), content && _jsx(SolidAgentMessageCopyButton, { text: content })] })] }), zoom && (_jsx("div", { className: styles.AttachmentLightbox, role: "dialog", "aria-label": "Image preview", onClick: function () { return setZoom(null); }, children: _jsx("img", { src: zoom, alt: "" }) }))] }));
+};
+//# sourceMappingURL=DefaultUserMessageChatWidget.js.map

package/dist/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUserMessageChatWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { FileText, ImageIcon, User } from \"lucide-react\";\nimport styles from \"./solidChatWidgets.module.css\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidAgentMessageCopyButton } from \"../SolidAgentMarkdown\";\nimport { formatFileSize } from \"../agentAttachments\";\nimport type { AgentAttachmentMeta } from \"../types\";\nimport { asArray, formatChatTime } from \"./chatWidgetUtils\";\n\n/**\n * Default widget for `UserMessage`: dark right-aligned bubble with avatar, time and copy on hover.\n * Attachments show above the bubble: image thumbnails (click to enlarge) or file chips.\n * History only carries attachment metadata, so reloaded images show as chips.\n */\nexport const DefaultUserMessageChatWidget = ({ eventData, timestamp }: SolidChatWidgetProps) => {\n    const content = String(eventData.content ?? \"\");\n    const attachments = asArray<AgentAttachmentMeta>(eventData.attachments);\n    const [zoom, setZoom] = useState<string | null>(null);\n\n    return (\n        <div className={`${styles.Row} ${styles.RowUser}`}>\n            {/* Avatar first in DOM → rightmost with row-reverse */}\n            <div className={`${styles.Avatar} ${styles.AvatarUser}`}>\n                <User size={12} />\n            </div>\n            <div className={styles.BubbleGroup}>\n                {attachments.length > 0 && (\n                    <ul className={styles.MessageAttachments} aria-label=\"Attachments\">\n                        {attachments.map((file, index) => {\n                            // previewUrl: attached in this browser session; url: stored copy (history).\n                            const imageSrc = file.mimeType?.startsWith(\"image/\") ? file.previewUrl ?? file.url : undefined;\n                            if (imageSrc) {\n                                return (\n                                    <li key={index}>\n                                        <button type=\"button\" className={styles.MessageAttachmentImageBtn} onClick={() => setZoom(imageSrc)} title={file.name}>\n                                            <img className={styles.MessageAttachmentImage} src={imageSrc} alt={file.name} />\n                                        </button>\n                                    </li>\n                                );\n                            }\n                            const chip = (\n                                <>\n                                    {file.mimeType?.startsWith(\"image/\") ? <ImageIcon size={13} /> : <FileText size={13} />}\n                                    <span className={styles.MessageAttachmentName}>{file.name}</span>\n                                    <span className={styles.MessageAttachmentSize}>{formatFileSize(file.size ?? 0)}</span>\n                                </>\n                            );\n                            return (\n                                <li key={index} title={file.name}>\n                                    {file.url ? (\n                                        <a className={styles.MessageAttachmentFile} href={file.url} target=\"_blank\" rel=\"noopener noreferrer\">{chip}</a>\n                                    ) : (\n                                        <span className={styles.MessageAttachmentFile}>{chip}</span>\n                                    )}\n                                </li>\n                            );\n                        })}\n                    </ul>\n                )}\n                {content && (\n                    <div className={`${styles.Bubble} ${styles.BubbleUser}`}>\n                        <p className={styles.UserText}>{content}</p>\n                    </div>\n                )}\n                <div className={`${styles.BubbleMeta} ${styles.BubbleMetaUser}`}>\n                    <span className={styles.Timestamp}>{formatChatTime(timestamp)}</span>\n                    {content && <SolidAgentMessageCopyButton text={content} />}\n                </div>\n            </div>\n            {zoom && (\n                <div className={styles.AttachmentLightbox} role=\"dialog\" aria-label=\"Image preview\" onClick={() => setZoom(null)}>\n                    <img src={zoom} alt=\"\" />\n                </div>\n            )}\n        </div>\n    );\n};\n"]}

package/dist/components/core/solid-agent/widgets/DefaultUserMessageChatWidget.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { FileText, ImageIcon, User } from "lucide-react";
+import styles from "./solidChatWidgets.module.css";
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+import { SolidAgentMessageCopyButton } from "../SolidAgentMarkdown";
+import { formatFileSize } from "../agentAttachments";
+import type { AgentAttachmentMeta } from "../types";
+import { asArray, formatChatTime } from "./chatWidgetUtils";
+
+/**
+ * Default widget for `UserMessage`: dark right-aligned bubble with avatar, time and copy on hover.
+ * Attachments show above the bubble: image thumbnails (click to enlarge) or file chips.
+ * History only carries attachment metadata, so reloaded images show as chips.
+ */
+export const DefaultUserMessageChatWidget = ({ eventData, timestamp }: SolidChatWidgetProps) => {
+    const content = String(eventData.content ?? "");
+    const attachments = asArray<AgentAttachmentMeta>(eventData.attachments);
+    const [zoom, setZoom] = useState<string | null>(null);
+
+    return (
+        <div className={`${styles.Row} ${styles.RowUser}`}>
+            {/* Avatar first in DOM → rightmost with row-reverse */}
+            <div className={`${styles.Avatar} ${styles.AvatarUser}`}>
+                <User size={12} />
+            </div>
+            <div className={styles.BubbleGroup}>
+                {attachments.length > 0 && (
+                    <ul className={styles.MessageAttachments} aria-label="Attachments">
+                        {attachments.map((file, index) => {
+                            // previewUrl: attached in this browser session; url: stored copy (history).
+                            const imageSrc = file.mimeType?.startsWith("image/") ? file.previewUrl ?? file.url : undefined;
+                            if (imageSrc) {
+                                return (
+                                    <li key={index}>
+                                        <button type="button" className={styles.MessageAttachmentImageBtn} onClick={() => setZoom(imageSrc)} title={file.name}>
+                                            <img className={styles.MessageAttachmentImage} src={imageSrc} alt={file.name} />
+                                        </button>
+                                    </li>
+                                );
+                            }
+                            const chip = (
+                                <>
+                                    {file.mimeType?.startsWith("image/") ? <ImageIcon size={13} /> : <FileText size={13} />}
+                                    <span className={styles.MessageAttachmentName}>{file.name}</span>
+                                    <span className={styles.MessageAttachmentSize}>{formatFileSize(file.size ?? 0)}</span>
+                                </>
+                            );
+                            return (
+                                <li key={index} title={file.name}>
+                                    {file.url ? (
+                                        <a className={styles.MessageAttachmentFile} href={file.url} target="_blank" rel="noopener noreferrer">{chip}</a>
+                                    ) : (
+                                        <span className={styles.MessageAttachmentFile}>{chip}</span>
+                                    )}
+                                </li>
+                            );
+                        })}
+                    </ul>
+                )}
+                {content && (
+                    <div className={`${styles.Bubble} ${styles.BubbleUser}`}>
+                        <p className={styles.UserText}>{content}</p>
+                    </div>
+                )}
+                <div className={`${styles.BubbleMeta} ${styles.BubbleMetaUser}`}>
+                    <span className={styles.Timestamp}>{formatChatTime(timestamp)}</span>
+                    {content && <SolidAgentMessageCopyButton text={content} />}
+                </div>
+            </div>
+            {zoom && (
+                <div className={styles.AttachmentLightbox} role="dialog" aria-label="Image preview" onClick={() => setZoom(null)}>
+                    <img src={zoom} alt="" />
+                </div>
+            )}
+        </div>
+    );
+};

package/dist/components/core/solid-agent/widgets/SolidChecklistChatWidget.d.ts

@@ -0,0 +1,7 @@
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+/**
+ * `event_data: { widget: "checklist", title?, items: [{ id, label, checked?, description? }], submitLabel? }`.
+ * Replies with the ids of the ticked items.
+ */
+export declare const SolidChecklistChatWidget: ({ eventData, final, reply }: SolidChatWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidChecklistChatWidget.d.ts.map

package/dist/components/core/solid-agent/widgets/SolidChecklistChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidChecklistChatWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/SolidChecklistChatWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAMpE;;;GAGG;AACH,eAAO,MAAM,wBAAwB,gCAAiC,oBAAoB,4CA4CzF,CAAC"}

package/dist/components/core/solid-agent/widgets/SolidChecklistChatWidget.js

@@ -0,0 +1,40 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styles from "../SolidAgent.module.css";
+import { asArray, getChatWidgetData } from "./chatWidgetUtils";
+/**
+ * `event_data: { widget: "checklist", title?, items: [{ id, label, checked?, description? }], submitLabel? }`.
+ * Replies with the ids of the ticked items.
+ */
+export var SolidChecklistChatWidget = function (_a) {
+    var _b;
+    var eventData = _a.eventData, final = _a.final, reply = _a.reply;
+    var data = getChatWidgetData(eventData);
+    var items = asArray(data.items).map(function (item, index) { var _a; return (__assign(__assign({}, item), { id: (_a = item.id) !== null && _a !== void 0 ? _a : String(index) })); });
+    var _c = useState(function () { return new Set(items.filter(function (item) { return item.checked; }).map(function (item) { return item.id; })); }), checked = _c[0], setChecked = _c[1];
+    var _d = useState(false), sent = _d[0], setSent = _d[1];
+    var locked = final || sent;
+    var toggle = function (id) {
+        return setChecked(function (prev) {
+            var next = new Set(prev);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+    };
+    return (_jsxs("div", { className: styles.card, children: [data.title && _jsx("div", { className: styles.cardHead, children: data.title }), _jsx("div", { className: styles.cardBody, children: items.map(function (item) { return (_jsxs("label", { className: styles.checkRow, children: [_jsx("input", { type: "checkbox", checked: checked.has(item.id), disabled: locked, onChange: function () { return toggle(item.id); } }), _jsxs("span", { children: [item.label, item.description && _jsx("span", { style: { display: "block", fontSize: 12, color: "var(--agent-muted)" }, children: item.description })] })] }, item.id)); }) }), !locked && (_jsx("div", { className: styles.cardFoot, children: _jsx("button", { type: "button", className: "".concat(styles.btn, " ").concat(styles.btnPrimary), onClick: function () {
+                        setSent(true);
+                        reply(Array.from(checked));
+                    }, children: (_b = data.submitLabel) !== null && _b !== void 0 ? _b : "Continue" }) }))] }));
+};
+//# sourceMappingURL=SolidChecklistChatWidget.js.map

package/dist/components/core/solid-agent/widgets/SolidChecklistChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidChecklistChatWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/SolidChecklistChatWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport styles from \"../SolidAgent.module.css\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport { asArray, getChatWidgetData } from \"./chatWidgetUtils\";\n\ntype ChecklistItem = { id?: string; label: string; checked?: boolean; description?: string };\ntype ChecklistData = { title?: string; items?: ChecklistItem[]; submitLabel?: string };\n\n/**\n * `event_data: { widget: \"checklist\", title?, items: [{ id, label, checked?, description? }], submitLabel? }`.\n * Replies with the ids of the ticked items.\n */\nexport const SolidChecklistChatWidget = ({ eventData, final, reply }: SolidChatWidgetProps) => {\n    const data = getChatWidgetData<ChecklistData>(eventData);\n    const items = asArray<ChecklistItem>(data.items).map((item, index) => ({ ...item, id: item.id ?? String(index) }));\n    const [checked, setChecked] = useState<Set<string>>(() => new Set(items.filter((item) => item.checked).map((item) => item.id)));\n    const [sent, setSent] = useState(false);\n    const locked = final || sent;\n\n    const toggle = (id: string) =>\n        setChecked((prev) => {\n            const next = new Set(prev);\n            next.has(id) ? next.delete(id) : next.add(id);\n            return next;\n        });\n\n    return (\n        <div className={styles.card}>\n            {data.title && <div className={styles.cardHead}>{data.title}</div>}\n            <div className={styles.cardBody}>\n                {items.map((item) => (\n                    <label key={item.id} className={styles.checkRow}>\n                        <input type=\"checkbox\" checked={checked.has(item.id)} disabled={locked} onChange={() => toggle(item.id)} />\n                        <span>\n                            {item.label}\n                            {item.description && <span style={{ display: \"block\", fontSize: 12, color: \"var(--agent-muted)\" }}>{item.description}</span>}\n                        </span>\n                    </label>\n                ))}\n            </div>\n            {!locked && (\n                <div className={styles.cardFoot}>\n                    <button\n                        type=\"button\"\n                        className={`${styles.btn} ${styles.btnPrimary}`}\n                        onClick={() => {\n                            setSent(true);\n                            reply(Array.from(checked));\n                        }}\n                    >\n                        {data.submitLabel ?? \"Continue\"}\n                    </button>\n                </div>\n            )}\n        </div>\n    );\n};\n"]}

package/dist/components/core/solid-agent/widgets/SolidChecklistChatWidget.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import styles from "../SolidAgent.module.css";
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+import { asArray, getChatWidgetData } from "./chatWidgetUtils";
+
+type ChecklistItem = { id?: string; label: string; checked?: boolean; description?: string };
+type ChecklistData = { title?: string; items?: ChecklistItem[]; submitLabel?: string };
+
+/**
+ * `event_data: { widget: "checklist", title?, items: [{ id, label, checked?, description? }], submitLabel? }`.
+ * Replies with the ids of the ticked items.
+ */
+export const SolidChecklistChatWidget = ({ eventData, final, reply }: SolidChatWidgetProps) => {
+    const data = getChatWidgetData<ChecklistData>(eventData);
+    const items = asArray<ChecklistItem>(data.items).map((item, index) => ({ ...item, id: item.id ?? String(index) }));
+    const [checked, setChecked] = useState<Set<string>>(() => new Set(items.filter((item) => item.checked).map((item) => item.id)));
+    const [sent, setSent] = useState(false);
+    const locked = final || sent;
+
+    const toggle = (id: string) =>
+        setChecked((prev) => {
+            const next = new Set(prev);
+            next.has(id) ? next.delete(id) : next.add(id);
+            return next;
+        });
+
+    return (
+        <div className={styles.card}>
+            {data.title && <div className={styles.cardHead}>{data.title}</div>}
+            <div className={styles.cardBody}>
+                {items.map((item) => (
+                    <label key={item.id} className={styles.checkRow}>
+                        <input type="checkbox" checked={checked.has(item.id)} disabled={locked} onChange={() => toggle(item.id)} />
+                        <span>
+                            {item.label}
+                            {item.description && <span style={{ display: "block", fontSize: 12, color: "var(--agent-muted)" }}>{item.description}</span>}
+                        </span>
+                    </label>
+                ))}
+            </div>
+            {!locked && (
+                <div className={styles.cardFoot}>
+                    <button
+                        type="button"
+                        className={`${styles.btn} ${styles.btnPrimary}`}
+                        onClick={() => {
+                            setSent(true);
+                            reply(Array.from(checked));
+                        }}
+                    >
+                        {data.submitLabel ?? "Continue"}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};

package/dist/components/core/solid-agent/widgets/SolidCodeChatWidget.d.ts

@@ -0,0 +1,4 @@
+import { SolidChatWidgetProps } from "../../../../types/solid-core";
+/** `event_data: { widget: "code", code, language?, filename? }` — a code block with copy. */
+export declare const SolidCodeChatWidget: ({ eventData }: SolidChatWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidCodeChatWidget.d.ts.map

package/dist/components/core/solid-agent/widgets/SolidCodeChatWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidCodeChatWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/SolidCodeChatWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIpE,6FAA6F;AAC7F,eAAO,MAAM,mBAAmB,kBAAmB,oBAAoB,4CAYtE,CAAC"}

package/dist/components/core/solid-agent/widgets/SolidCodeChatWidget.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "../SolidAgent.module.css";
+import { SolidAgentCopyButton } from "../SolidAgentMarkdown";
+import { getChatWidgetData } from "./chatWidgetUtils";
+/** `event_data: { widget: "code", code, language?, filename? }` — a code block with copy. */
+export var SolidCodeChatWidget = function (_a) {
+    var _b, _c, _d;
+    var eventData = _a.eventData;
+    var data = getChatWidgetData(eventData);
+    var code = String((_b = data.code) !== null && _b !== void 0 ? _b : "");
+    return (_jsxs("div", { className: styles.card, children: [_jsxs("div", { className: styles.cardHead, children: [_jsx("span", { className: styles.mono, style: { flex: 1 }, children: (_d = (_c = data.filename) !== null && _c !== void 0 ? _c : data.language) !== null && _d !== void 0 ? _d : "code" }), _jsx(SolidAgentCopyButton, { text: code, label: "Copy code" })] }), _jsx("pre", { className: styles.pre, style: { borderRadius: 0 }, children: code })] }));
+};
+//# sourceMappingURL=SolidCodeChatWidget.js.map

package/dist/components/core/solid-agent/widgets/SolidCodeChatWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidCodeChatWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/solid-agent/widgets/SolidCodeChatWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,6FAA6F;AAC7F,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAmC;;QAAjC,SAAS,eAAA;IAC3C,IAAM,IAAI,GAAG,iBAAiB,CAA0D,SAAS,CAAC,CAAC;IACnG,IAAM,IAAI,GAAG,MAAM,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC;IACrC,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,aACvB,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC3B,eAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,IAAI,CAAC,QAAQ,mCAAI,MAAM,GAAQ,EACnG,KAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,IACpD,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAAG,IAAI,GAAO,IAClE,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"../SolidAgent.module.css\";\nimport { SolidChatWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidAgentCopyButton } from \"../SolidAgentMarkdown\";\nimport { getChatWidgetData } from \"./chatWidgetUtils\";\n\n/** `event_data: { widget: \"code\", code, language?, filename? }` — a code block with copy. */\nexport const SolidCodeChatWidget = ({ eventData }: SolidChatWidgetProps) => {\n    const data = getChatWidgetData<{ code?: string; language?: string; filename?: string }>(eventData);\n    const code = String(data.code ?? \"\");\n    return (\n        <div className={styles.card}>\n            <div className={styles.cardHead}>\n                <span className={styles.mono} style={{ flex: 1 }}>{data.filename ?? data.language ?? \"code\"}</span>\n                <SolidAgentCopyButton text={code} label=\"Copy code\" />\n            </div>\n            <pre className={styles.pre} style={{ borderRadius: 0 }}>{code}</pre>\n        </div>\n    );\n};\n"]}