@seed-ship/mcp-ui-solid 1.0.18 → 1.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionRenderer.d.ts +10 -0
- package/dist/components/ActionRenderer.d.ts.map +1 -0
- package/dist/components/ArtifactRenderer.d.ts +12 -0
- package/dist/components/ArtifactRenderer.d.ts.map +1 -0
- package/dist/components/CarouselRenderer.d.ts +9 -0
- package/dist/components/CarouselRenderer.d.ts.map +1 -0
- package/dist/components/FooterRenderer.d.ts +16 -0
- package/dist/components/FooterRenderer.d.ts.map +1 -0
- package/dist/components/UIResourceRenderer.d.ts.map +1 -1
- package/dist/mcp-ui-solid/src/components/GenerativeUIErrorBoundary.cjs +35 -18
- package/dist/mcp-ui-solid/src/components/GenerativeUIErrorBoundary.cjs.map +1 -1
- package/dist/mcp-ui-solid/src/components/GenerativeUIErrorBoundary.js +36 -19
- package/dist/mcp-ui-solid/src/components/GenerativeUIErrorBoundary.js.map +1 -1
- package/dist/mcp-ui-solid/src/components/StreamingUIRenderer.cjs +192 -103
- package/dist/mcp-ui-solid/src/components/StreamingUIRenderer.cjs.map +1 -1
- package/dist/mcp-ui-solid/src/components/StreamingUIRenderer.js +193 -104
- package/dist/mcp-ui-solid/src/components/StreamingUIRenderer.js.map +1 -1
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.cjs +359 -119
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.cjs.map +1 -1
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.js +360 -120
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.js.map +1 -1
- package/dist/mcp-ui-solid/src/services/validation.cjs +10 -0
- package/dist/mcp-ui-solid/src/services/validation.cjs.map +1 -1
- package/dist/mcp-ui-solid/src/services/validation.js +10 -0
- package/dist/mcp-ui-solid/src/services/validation.js.map +1 -1
- package/dist/services/validation.d.ts.map +1 -1
- package/dist/types/index.d.ts +17 -2
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { delegateEvents, getNextElement, template, insert, createComponent, effect, style, className, getNextMarker, setAttribute, memo, setProperty, runHydrationEvents } from "solid-js/web";
|
|
2
2
|
import { For, Show, createSignal, onMount, createMemo } from "solid-js";
|
|
3
3
|
import { validateComponent, DEFAULT_RESOURCE_LIMITS } from "../services/validation.js";
|
|
4
4
|
import { GenerativeUIErrorBoundary } from "./GenerativeUIErrorBoundary.js";
|
|
5
5
|
import { marked as k } from "../../../node_modules/.pnpm/marked@16.4.2/node_modules/marked/lib/marked.esm.js";
|
|
6
|
-
var _tmpl$ =
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center p-4"><div class=text-center><p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p><p class="text-gray-600 dark:text-gray-400 text-xs mt-1">`), _tmpl$3 = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="w-full h-full p-4"><!$><!/><div class="w-full h-full"><img alt="Chart visualization"class="w-full h-auto max-h-[300px] object-contain">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><!$><!/><!$><!/><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!$><!/> - <!$><!/> of <!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><div class=p-4><!$><!/><div class=overflow-x-auto><table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border-separate border-spacing-0"><thead class="bg-gray-50 dark:bg-gray-900/50"><tr></tr></thead><tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"></tbody></table></div><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<th scope=col class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 first:pl-6 last:pr-6">`), _tmpl$9 = /* @__PURE__ */ template(`<tr>`), _tmpl$0 = /* @__PURE__ */ template(`<td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-200 whitespace-normal break-words leading-relaxed first:pl-6 last:pr-6">`), _tmpl$1 = /* @__PURE__ */ template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$10 = /* @__PURE__ */ template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$11 = /* @__PURE__ */ template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4"><div class="flex flex-col h-full justify-between"><div><p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></p><div class="mt-2 flex items-baseline"><p class="text-2xl font-semibold text-gray-900 dark:text-white"></p><!$><!/></div></div><!$><!/><!$><!/>`), _tmpl$13 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4"><div>`), _tmpl$14 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"><h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$15 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><!$><!/><iframe class="w-full border-0 flex-1"sandbox="allow-scripts allow-same-origin allow-popups allow-forms"loading=lazy>`, true, false, false), _tmpl$16 = /* @__PURE__ */ template(`<div class="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"><p class="text-sm text-gray-600 dark:text-gray-400 text-center">`), _tmpl$17 = /* @__PURE__ */ template(`<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col"><div class="flex-1 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 min-h-[200px]"><a target=_blank rel="noopener noreferrer"class=cursor-zoom-in><img class="max-w-full max-h-[500px] object-contain rounded shadow-sm hover:opacity-95 transition-opacity"loading=lazy></a></div><!$><!/>`, true, false, false), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$19 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer"class="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group h-full"><div class="p-2 bg-blue-50 dark:bg-blue-900/30 rounded-full text-blue-600 dark:text-blue-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/50 shrink-0 transition-colors"><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></div><div class="flex-1 min-w-0"><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"></h4><!$><!/></div><svg xmlns=http://www.w3.org/2000/svg class="w-4 h-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 shrink-0 transition-colors"viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1=10 y1=14 x2=21 y2=3>`), _tmpl$20 = /* @__PURE__ */ template(`<div class="w-full h-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4"><p class="text-sm font-medium text-red-900 dark:text-red-100">Validation Error</p><p class="text-xs text-red-700 dark:text-red-300 mt-1">`), _tmpl$21 = /* @__PURE__ */ template(`<span>`), _tmpl$22 = /* @__PURE__ */ template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$23 = /* @__PURE__ */ template(`<button><!$><!/><!$><!/>`), _tmpl$24 = /* @__PURE__ */ template(`<div><div class="grid gap-4">`), _tmpl$25 = /* @__PURE__ */ template(`<div>`);
|
|
7
7
|
function ChartRenderer(props) {
|
|
8
8
|
const [iframeUrl, setIframeUrl] = createSignal();
|
|
9
9
|
const [isLoading, setIsLoading] = createSignal(true);
|
|
@@ -24,95 +24,164 @@ function ChartRenderer(props) {
|
|
|
24
24
|
setIframeUrl(url);
|
|
25
25
|
setIsLoading(false);
|
|
26
26
|
});
|
|
27
|
-
return
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
27
|
+
return (() => {
|
|
28
|
+
var _el$ = getNextElement(_tmpl$5), _el$11 = _el$.firstChild, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling);
|
|
29
|
+
insert(_el$, createComponent(Show, {
|
|
30
|
+
get when() {
|
|
31
|
+
return isLoading();
|
|
32
|
+
},
|
|
33
|
+
get children() {
|
|
34
|
+
return getNextElement(_tmpl$);
|
|
35
|
+
}
|
|
36
|
+
}), _el$12, _co$2);
|
|
37
|
+
insert(_el$, createComponent(Show, {
|
|
38
|
+
get when() {
|
|
39
|
+
return error();
|
|
40
|
+
},
|
|
41
|
+
get children() {
|
|
42
|
+
var _el$3 = getNextElement(_tmpl$2), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
|
|
43
|
+
insert(_el$6, error);
|
|
44
|
+
return _el$3;
|
|
45
|
+
}
|
|
46
|
+
}), _el$14, _co$3);
|
|
47
|
+
insert(_el$, createComponent(Show, {
|
|
48
|
+
get when() {
|
|
49
|
+
return memo(() => !!iframeUrl())() && !error();
|
|
50
|
+
},
|
|
51
|
+
get children() {
|
|
52
|
+
var _el$7 = getNextElement(_tmpl$4), _el$1 = _el$7.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$9 = _el$10.nextSibling, _el$0 = _el$9.firstChild;
|
|
53
|
+
insert(_el$7, createComponent(Show, {
|
|
54
|
+
get when() {
|
|
55
|
+
return props.component.params.title;
|
|
56
|
+
},
|
|
57
|
+
get children() {
|
|
58
|
+
var _el$8 = getNextElement(_tmpl$3);
|
|
59
|
+
insert(_el$8, () => props.component.params.title);
|
|
60
|
+
return _el$8;
|
|
61
|
+
}
|
|
62
|
+
}), _el$10, _co$);
|
|
63
|
+
_el$0.addEventListener("error", () => {
|
|
64
|
+
var _a;
|
|
65
|
+
setError("Failed to load chart");
|
|
66
|
+
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
67
|
+
type: "render",
|
|
68
|
+
message: "Chart rendering failed",
|
|
69
|
+
componentId: props.component.id
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
effect(() => setAttribute(_el$0, "src", iframeUrl()));
|
|
73
|
+
return _el$7;
|
|
74
|
+
}
|
|
75
|
+
}), _el$16, _co$4);
|
|
76
|
+
return _el$;
|
|
77
|
+
})();
|
|
56
78
|
}
|
|
57
79
|
function TableRenderer(props) {
|
|
58
80
|
const tableParams = props.component.params;
|
|
59
|
-
return
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
} : {}), escape(column.label))
|
|
73
|
-
})), escape(createComponent(For, {
|
|
74
|
-
get each() {
|
|
75
|
-
return tableParams.rows.slice(0, DEFAULT_RESOURCE_LIMITS.maxTableRows);
|
|
76
|
-
},
|
|
77
|
-
children: (row) => ssr(_tmpl$9, ssrHydrationKey(), escape(createComponent(For, {
|
|
81
|
+
return (() => {
|
|
82
|
+
var _el$17 = getNextElement(_tmpl$7), _el$18 = _el$17.firstChild, _el$38 = _el$18.firstChild, [_el$39, _co$8] = getNextMarker(_el$38.nextSibling), _el$20 = _el$39.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$40 = _el$20.nextSibling, [_el$41, _co$9] = getNextMarker(_el$40.nextSibling);
|
|
83
|
+
insert(_el$18, createComponent(Show, {
|
|
84
|
+
get when() {
|
|
85
|
+
return tableParams.title;
|
|
86
|
+
},
|
|
87
|
+
get children() {
|
|
88
|
+
var _el$19 = getNextElement(_tmpl$3);
|
|
89
|
+
insert(_el$19, () => tableParams.title);
|
|
90
|
+
return _el$19;
|
|
91
|
+
}
|
|
92
|
+
}), _el$39, _co$8);
|
|
93
|
+
insert(_el$23, createComponent(For, {
|
|
78
94
|
get each() {
|
|
79
95
|
return tableParams.columns;
|
|
80
96
|
},
|
|
81
|
-
children: (column) =>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
97
|
+
children: (column) => (() => {
|
|
98
|
+
var _el$42 = getNextElement(_tmpl$8);
|
|
99
|
+
insert(_el$42, () => column.label);
|
|
100
|
+
effect((_$p) => style(_el$42, column.width ? {
|
|
101
|
+
width: column.width
|
|
102
|
+
} : {}, _$p));
|
|
103
|
+
return _el$42;
|
|
104
|
+
})()
|
|
105
|
+
}));
|
|
106
|
+
insert(_el$24, createComponent(For, {
|
|
107
|
+
get each() {
|
|
108
|
+
return tableParams.rows.slice(0, DEFAULT_RESOURCE_LIMITS.maxTableRows);
|
|
109
|
+
},
|
|
110
|
+
children: (row, i) => (() => {
|
|
111
|
+
var _el$43 = getNextElement(_tmpl$9);
|
|
112
|
+
insert(_el$43, createComponent(For, {
|
|
113
|
+
get each() {
|
|
114
|
+
return tableParams.columns;
|
|
115
|
+
},
|
|
116
|
+
children: (column) => (() => {
|
|
117
|
+
var _el$44 = getNextElement(_tmpl$0);
|
|
118
|
+
insert(_el$44, () => row[column.key] || "-");
|
|
119
|
+
return _el$44;
|
|
120
|
+
})()
|
|
121
|
+
}));
|
|
122
|
+
effect(() => className(_el$43, `hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${i() % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50/30 dark:bg-gray-800/50"}`));
|
|
123
|
+
return _el$43;
|
|
124
|
+
})()
|
|
125
|
+
}));
|
|
126
|
+
insert(_el$18, createComponent(Show, {
|
|
127
|
+
get when() {
|
|
128
|
+
return tableParams.pagination;
|
|
129
|
+
},
|
|
130
|
+
get children() {
|
|
131
|
+
var _el$25 = getNextElement(_tmpl$6), _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$32 = _el$27.nextSibling, [_el$33, _co$5] = getNextMarker(_el$32.nextSibling), _el$28 = _el$33.nextSibling, _el$34 = _el$28.nextSibling, [_el$35, _co$6] = getNextMarker(_el$34.nextSibling), _el$30 = _el$35.nextSibling, _el$36 = _el$30.nextSibling, [_el$37, _co$7] = getNextMarker(_el$36.nextSibling);
|
|
132
|
+
insert(_el$26, () => tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1, _el$33, _co$5);
|
|
133
|
+
insert(_el$26, () => Math.min((tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize, tableParams.pagination.totalRows), _el$35, _co$6);
|
|
134
|
+
insert(_el$26, () => tableParams.pagination.totalRows, _el$37, _co$7);
|
|
135
|
+
return _el$25;
|
|
136
|
+
}
|
|
137
|
+
}), _el$41, _co$9);
|
|
138
|
+
return _el$17;
|
|
139
|
+
})();
|
|
91
140
|
}
|
|
92
141
|
function MetricRenderer(props) {
|
|
93
142
|
const metricParams = props.component.params;
|
|
94
|
-
return
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
143
|
+
return (() => {
|
|
144
|
+
var _el$45 = getNextElement(_tmpl$12), _el$46 = _el$45.firstChild, _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling, _el$50 = _el$49.firstChild, _el$52 = _el$50.nextSibling, [_el$53, _co$0] = getNextMarker(_el$52.nextSibling), _el$63 = _el$47.nextSibling, [_el$64, _co$11] = getNextMarker(_el$63.nextSibling), _el$65 = _el$64.nextSibling, [_el$66, _co$12] = getNextMarker(_el$65.nextSibling);
|
|
145
|
+
insert(_el$48, () => metricParams.title);
|
|
146
|
+
insert(_el$50, () => metricParams.value);
|
|
147
|
+
insert(_el$49, createComponent(Show, {
|
|
148
|
+
get when() {
|
|
149
|
+
return metricParams.unit;
|
|
150
|
+
},
|
|
151
|
+
get children() {
|
|
152
|
+
var _el$51 = getNextElement(_tmpl$1);
|
|
153
|
+
insert(_el$51, () => metricParams.unit);
|
|
154
|
+
return _el$51;
|
|
155
|
+
}
|
|
156
|
+
}), _el$53, _co$0);
|
|
157
|
+
insert(_el$46, createComponent(Show, {
|
|
158
|
+
get when() {
|
|
159
|
+
return metricParams.trend;
|
|
160
|
+
},
|
|
161
|
+
get children() {
|
|
162
|
+
var _el$54 = getNextElement(_tmpl$10), _el$55 = _el$54.firstChild, _el$58 = _el$55.firstChild, [_el$59, _co$1] = getNextMarker(_el$58.nextSibling), _el$56 = _el$59.nextSibling, _el$60 = _el$56.nextSibling, [_el$61, _co$10] = getNextMarker(_el$60.nextSibling);
|
|
163
|
+
_el$61.nextSibling;
|
|
164
|
+
insert(_el$55, (() => {
|
|
165
|
+
var _c$ = memo(() => metricParams.trend.direction === "up");
|
|
166
|
+
return () => _c$() ? "�" : metricParams.trend.direction === "down" ? "�" : "�";
|
|
167
|
+
})(), _el$59, _co$1);
|
|
168
|
+
insert(_el$55, () => Math.abs(metricParams.trend.value), _el$61, _co$10);
|
|
169
|
+
effect(() => className(_el$55, `text-sm font-medium ${metricParams.trend.direction === "up" ? "text-green-600 dark:text-green-400" : metricParams.trend.direction === "down" ? "text-red-600 dark:text-red-400" : "text-gray-600 dark:text-gray-400"}`));
|
|
170
|
+
return _el$54;
|
|
171
|
+
}
|
|
172
|
+
}), _el$64, _co$11);
|
|
173
|
+
insert(_el$46, createComponent(Show, {
|
|
174
|
+
get when() {
|
|
175
|
+
return metricParams.subtitle;
|
|
176
|
+
},
|
|
177
|
+
get children() {
|
|
178
|
+
var _el$62 = getNextElement(_tmpl$11);
|
|
179
|
+
insert(_el$62, () => metricParams.subtitle);
|
|
180
|
+
return _el$62;
|
|
181
|
+
}
|
|
182
|
+
}), _el$66, _co$12);
|
|
183
|
+
return _el$45;
|
|
184
|
+
})();
|
|
116
185
|
}
|
|
117
186
|
function TextRenderer(props) {
|
|
118
187
|
const textParams = props.component.params;
|
|
@@ -124,43 +193,99 @@ function TextRenderer(props) {
|
|
|
124
193
|
}
|
|
125
194
|
return textParams.content;
|
|
126
195
|
});
|
|
127
|
-
return
|
|
196
|
+
return (() => {
|
|
197
|
+
var _el$67 = getNextElement(_tmpl$13), _el$68 = _el$67.firstChild;
|
|
198
|
+
effect((_p$) => {
|
|
199
|
+
var _v$ = `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`, _v$2 = htmlContent();
|
|
200
|
+
_v$ !== _p$.e && className(_el$68, _p$.e = _v$);
|
|
201
|
+
_v$2 !== _p$.t && setProperty(_el$68, "innerHTML", _p$.t = _v$2);
|
|
202
|
+
return _p$;
|
|
203
|
+
}, {
|
|
204
|
+
e: void 0,
|
|
205
|
+
t: void 0
|
|
206
|
+
});
|
|
207
|
+
return _el$67;
|
|
208
|
+
})();
|
|
128
209
|
}
|
|
129
210
|
function IframeRenderer(props) {
|
|
130
211
|
const params = props.component.params;
|
|
131
|
-
return
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
212
|
+
return (() => {
|
|
213
|
+
var _el$69 = getNextElement(_tmpl$15), _el$73 = _el$69.firstChild, [_el$74, _co$13] = getNextMarker(_el$73.nextSibling), _el$72 = _el$74.nextSibling;
|
|
214
|
+
insert(_el$69, createComponent(Show, {
|
|
215
|
+
get when() {
|
|
216
|
+
return params.title;
|
|
217
|
+
},
|
|
218
|
+
get children() {
|
|
219
|
+
var _el$70 = getNextElement(_tmpl$14), _el$71 = _el$70.firstChild;
|
|
220
|
+
insert(_el$71, () => params.title);
|
|
221
|
+
return _el$70;
|
|
222
|
+
}
|
|
223
|
+
}), _el$74, _co$13);
|
|
224
|
+
effect((_p$) => {
|
|
225
|
+
var _v$3 = params.url, _v$4 = params.title || "Embedded content", _v$5 = `height: ${params.height || "400px"}; min-height: 300px;`;
|
|
226
|
+
_v$3 !== _p$.e && setAttribute(_el$72, "src", _p$.e = _v$3);
|
|
227
|
+
_v$4 !== _p$.t && setAttribute(_el$72, "title", _p$.t = _v$4);
|
|
228
|
+
_p$.a = style(_el$72, _v$5, _p$.a);
|
|
229
|
+
return _p$;
|
|
230
|
+
}, {
|
|
231
|
+
e: void 0,
|
|
232
|
+
t: void 0,
|
|
233
|
+
a: void 0
|
|
234
|
+
});
|
|
235
|
+
return _el$69;
|
|
236
|
+
})();
|
|
139
237
|
}
|
|
140
238
|
function ImageRenderer(props) {
|
|
141
239
|
const params = props.component.params;
|
|
142
|
-
return
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
240
|
+
return (() => {
|
|
241
|
+
var _el$75 = getNextElement(_tmpl$17), _el$76 = _el$75.firstChild, _el$77 = _el$76.firstChild, _el$78 = _el$77.firstChild, _el$81 = _el$76.nextSibling, [_el$82, _co$14] = getNextMarker(_el$81.nextSibling);
|
|
242
|
+
insert(_el$75, createComponent(Show, {
|
|
243
|
+
get when() {
|
|
244
|
+
return params.caption;
|
|
245
|
+
},
|
|
246
|
+
get children() {
|
|
247
|
+
var _el$79 = getNextElement(_tmpl$16), _el$80 = _el$79.firstChild;
|
|
248
|
+
insert(_el$80, () => params.caption);
|
|
249
|
+
return _el$79;
|
|
250
|
+
}
|
|
251
|
+
}), _el$82, _co$14);
|
|
252
|
+
effect((_p$) => {
|
|
253
|
+
var _v$6 = params.url, _v$7 = params.url, _v$8 = params.alt || "Image";
|
|
254
|
+
_v$6 !== _p$.e && setAttribute(_el$77, "href", _p$.e = _v$6);
|
|
255
|
+
_v$7 !== _p$.t && setAttribute(_el$78, "src", _p$.t = _v$7);
|
|
256
|
+
_v$8 !== _p$.a && setAttribute(_el$78, "alt", _p$.a = _v$8);
|
|
257
|
+
return _p$;
|
|
258
|
+
}, {
|
|
259
|
+
e: void 0,
|
|
260
|
+
t: void 0,
|
|
261
|
+
a: void 0
|
|
262
|
+
});
|
|
263
|
+
return _el$75;
|
|
264
|
+
})();
|
|
150
265
|
}
|
|
151
266
|
function LinkRenderer(props) {
|
|
152
267
|
const params = props.component.params;
|
|
153
|
-
return
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
268
|
+
return (() => {
|
|
269
|
+
var _el$83 = getNextElement(_tmpl$19), _el$84 = _el$83.firstChild, _el$85 = _el$84.nextSibling, _el$86 = _el$85.firstChild, _el$88 = _el$86.nextSibling, [_el$89, _co$15] = getNextMarker(_el$88.nextSibling);
|
|
270
|
+
_el$83.$$click = (e) => e.stopPropagation();
|
|
271
|
+
insert(_el$86, () => params.label || params.url);
|
|
272
|
+
insert(_el$85, createComponent(Show, {
|
|
273
|
+
get when() {
|
|
274
|
+
return params.description;
|
|
275
|
+
},
|
|
276
|
+
get children() {
|
|
277
|
+
var _el$87 = getNextElement(_tmpl$18);
|
|
278
|
+
insert(_el$87, () => params.description);
|
|
279
|
+
return _el$87;
|
|
280
|
+
}
|
|
281
|
+
}), _el$89, _co$15);
|
|
282
|
+
effect(() => setAttribute(_el$83, "href", params.url));
|
|
283
|
+
runHydrationEvents();
|
|
284
|
+
return _el$83;
|
|
285
|
+
})();
|
|
161
286
|
}
|
|
162
287
|
function ComponentRenderer(props) {
|
|
163
|
-
var _a
|
|
288
|
+
var _a;
|
|
164
289
|
const validation = validateComponent(props.component);
|
|
165
290
|
if (!validation.valid) {
|
|
166
291
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -169,7 +294,14 @@ function ComponentRenderer(props) {
|
|
|
169
294
|
componentId: props.component.id,
|
|
170
295
|
details: validation.errors
|
|
171
296
|
});
|
|
172
|
-
return
|
|
297
|
+
return (() => {
|
|
298
|
+
var _el$90 = getNextElement(_tmpl$20), _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling;
|
|
299
|
+
insert(_el$92, () => {
|
|
300
|
+
var _a2, _b;
|
|
301
|
+
return ((_b = (_a2 = validation.errors) == null ? void 0 : _a2[0]) == null ? void 0 : _b.message) || "Unknown validation error";
|
|
302
|
+
});
|
|
303
|
+
return _el$90;
|
|
304
|
+
})();
|
|
173
305
|
}
|
|
174
306
|
return createComponent(GenerativeUIErrorBoundary, {
|
|
175
307
|
get componentId() {
|
|
@@ -266,10 +398,99 @@ function ComponentRenderer(props) {
|
|
|
266
398
|
}
|
|
267
399
|
});
|
|
268
400
|
}
|
|
401
|
+
}), createComponent(Show, {
|
|
402
|
+
get when() {
|
|
403
|
+
return props.component.type === "action";
|
|
404
|
+
},
|
|
405
|
+
get children() {
|
|
406
|
+
return createComponent(ActionRenderer, {
|
|
407
|
+
get component() {
|
|
408
|
+
return props.component;
|
|
409
|
+
}
|
|
410
|
+
});
|
|
411
|
+
}
|
|
269
412
|
})];
|
|
270
413
|
}
|
|
271
414
|
});
|
|
272
415
|
}
|
|
416
|
+
function ActionRenderer(props) {
|
|
417
|
+
const params = props.component.params;
|
|
418
|
+
const handleClick = (e) => {
|
|
419
|
+
if (params.action === "tool-call" && params.toolName) {
|
|
420
|
+
e.preventDefault();
|
|
421
|
+
const event = new CustomEvent("mcp-action", {
|
|
422
|
+
detail: {
|
|
423
|
+
toolName: params.toolName,
|
|
424
|
+
params: params.params || {}
|
|
425
|
+
},
|
|
426
|
+
bubbles: true
|
|
427
|
+
});
|
|
428
|
+
window.dispatchEvent(event);
|
|
429
|
+
}
|
|
430
|
+
};
|
|
431
|
+
if (params.type === "link" || params.action === "link") {
|
|
432
|
+
return (() => {
|
|
433
|
+
var _el$93 = getNextElement(_tmpl$22), _el$95 = _el$93.firstChild, [_el$96, _co$16] = getNextMarker(_el$95.nextSibling), _el$97 = _el$96.nextSibling, [_el$98, _co$17] = getNextMarker(_el$97.nextSibling);
|
|
434
|
+
_el$93.$$click = handleClick;
|
|
435
|
+
insert(_el$93, createComponent(Show, {
|
|
436
|
+
get when() {
|
|
437
|
+
return params.icon;
|
|
438
|
+
},
|
|
439
|
+
get children() {
|
|
440
|
+
var _el$94 = getNextElement(_tmpl$21);
|
|
441
|
+
insert(_el$94, () => params.icon);
|
|
442
|
+
return _el$94;
|
|
443
|
+
}
|
|
444
|
+
}), _el$96, _co$16);
|
|
445
|
+
insert(_el$93, () => params.label, _el$98, _co$17);
|
|
446
|
+
effect((_p$) => {
|
|
447
|
+
var _v$9 = params.url || "#", _v$0 = params.url ? "_blank" : void 0, _v$1 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors
|
|
448
|
+
${params.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : params.variant === "outline" ? "border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800" : "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"}`;
|
|
449
|
+
_v$9 !== _p$.e && setAttribute(_el$93, "href", _p$.e = _v$9);
|
|
450
|
+
_v$0 !== _p$.t && setAttribute(_el$93, "target", _p$.t = _v$0);
|
|
451
|
+
_v$1 !== _p$.a && className(_el$93, _p$.a = _v$1);
|
|
452
|
+
return _p$;
|
|
453
|
+
}, {
|
|
454
|
+
e: void 0,
|
|
455
|
+
t: void 0,
|
|
456
|
+
a: void 0
|
|
457
|
+
});
|
|
458
|
+
runHydrationEvents();
|
|
459
|
+
return _el$93;
|
|
460
|
+
})();
|
|
461
|
+
}
|
|
462
|
+
return (() => {
|
|
463
|
+
var _el$99 = getNextElement(_tmpl$23), _el$101 = _el$99.firstChild, [_el$102, _co$18] = getNextMarker(_el$101.nextSibling), _el$103 = _el$102.nextSibling, [_el$104, _co$19] = getNextMarker(_el$103.nextSibling);
|
|
464
|
+
_el$99.$$click = handleClick;
|
|
465
|
+
insert(_el$99, createComponent(Show, {
|
|
466
|
+
get when() {
|
|
467
|
+
return params.icon;
|
|
468
|
+
},
|
|
469
|
+
get children() {
|
|
470
|
+
var _el$100 = getNextElement(_tmpl$21);
|
|
471
|
+
insert(_el$100, () => params.icon);
|
|
472
|
+
return _el$100;
|
|
473
|
+
}
|
|
474
|
+
}), _el$102, _co$18);
|
|
475
|
+
insert(_el$99, () => params.label, _el$104, _co$19);
|
|
476
|
+
effect((_p$) => {
|
|
477
|
+
var _v$10 = params.action === "submit" ? "submit" : "button", _v$11 = params.disabled, _v$12 = `inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
|
|
478
|
+
${params.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700 shadow-sm" : params.variant === "secondary" ? "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600" : params.variant === "outline" ? "border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800" : params.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"}
|
|
479
|
+
${params.disabled ? "opacity-50 cursor-not-allowed" : ""}
|
|
480
|
+
${params.size === "sm" ? "px-3 py-1.5 text-xs" : params.size === "lg" ? "px-6 py-3 text-base" : ""}`;
|
|
481
|
+
_v$10 !== _p$.e && setAttribute(_el$99, "type", _p$.e = _v$10);
|
|
482
|
+
_v$11 !== _p$.t && setProperty(_el$99, "disabled", _p$.t = _v$11);
|
|
483
|
+
_v$12 !== _p$.a && className(_el$99, _p$.a = _v$12);
|
|
484
|
+
return _p$;
|
|
485
|
+
}, {
|
|
486
|
+
e: void 0,
|
|
487
|
+
t: void 0,
|
|
488
|
+
a: void 0
|
|
489
|
+
});
|
|
490
|
+
runHydrationEvents();
|
|
491
|
+
return _el$99;
|
|
492
|
+
})();
|
|
493
|
+
}
|
|
273
494
|
const UIResourceRenderer = (props) => {
|
|
274
495
|
const layout = () => {
|
|
275
496
|
if ("type" in props.content && props.content.type !== "composite") {
|
|
@@ -298,18 +519,37 @@ const UIResourceRenderer = (props) => {
|
|
|
298
519
|
} = component.position;
|
|
299
520
|
return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : "auto"}`;
|
|
300
521
|
};
|
|
301
|
-
return
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
522
|
+
return (() => {
|
|
523
|
+
var _el$105 = getNextElement(_tmpl$24), _el$106 = _el$105.firstChild;
|
|
524
|
+
insert(_el$106, createComponent(For, {
|
|
525
|
+
get each() {
|
|
526
|
+
return layout().components;
|
|
527
|
+
},
|
|
528
|
+
children: (component) => (() => {
|
|
529
|
+
var _el$107 = getNextElement(_tmpl$25);
|
|
530
|
+
insert(_el$107, createComponent(ComponentRenderer, {
|
|
531
|
+
component,
|
|
532
|
+
get onError() {
|
|
533
|
+
return props.onError;
|
|
534
|
+
}
|
|
535
|
+
}));
|
|
536
|
+
effect((_$p) => style(_el$107, getGridStyleString(component), _$p));
|
|
537
|
+
return _el$107;
|
|
538
|
+
})()
|
|
539
|
+
}));
|
|
540
|
+
effect((_p$) => {
|
|
541
|
+
var _v$13 = `w-full ${props.class || ""}`, _v$14 = gridContainerStyle();
|
|
542
|
+
_v$13 !== _p$.e && className(_el$105, _p$.e = _v$13);
|
|
543
|
+
_p$.t = style(_el$106, _v$14, _p$.t);
|
|
544
|
+
return _p$;
|
|
545
|
+
}, {
|
|
546
|
+
e: void 0,
|
|
547
|
+
t: void 0
|
|
548
|
+
});
|
|
549
|
+
return _el$105;
|
|
550
|
+
})();
|
|
312
551
|
};
|
|
552
|
+
delegateEvents(["click"]);
|
|
313
553
|
export {
|
|
314
554
|
UIResourceRenderer
|
|
315
555
|
};
|