@seed-ship/mcp-ui-solid 1.0.18 → 1.0.23
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 +358 -119
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.cjs.map +1 -1
- package/dist/mcp-ui-solid/src/components/UIResourceRenderer.js +359 -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"><thead class="bg-gray-50 dark:bg-gray-900"><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-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">`), _tmpl$9 = /* @__PURE__ */ template(`<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">`), _tmpl$0 = /* @__PURE__ */ template(`<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">`), _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,163 @@ 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) => (() => {
|
|
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
|
+
return _el$43;
|
|
123
|
+
})()
|
|
124
|
+
}));
|
|
125
|
+
insert(_el$18, createComponent(Show, {
|
|
126
|
+
get when() {
|
|
127
|
+
return tableParams.pagination;
|
|
128
|
+
},
|
|
129
|
+
get children() {
|
|
130
|
+
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);
|
|
131
|
+
insert(_el$26, () => tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1, _el$33, _co$5);
|
|
132
|
+
insert(_el$26, () => Math.min((tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize, tableParams.pagination.totalRows), _el$35, _co$6);
|
|
133
|
+
insert(_el$26, () => tableParams.pagination.totalRows, _el$37, _co$7);
|
|
134
|
+
return _el$25;
|
|
135
|
+
}
|
|
136
|
+
}), _el$41, _co$9);
|
|
137
|
+
return _el$17;
|
|
138
|
+
})();
|
|
91
139
|
}
|
|
92
140
|
function MetricRenderer(props) {
|
|
93
141
|
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
|
-
|
|
142
|
+
return (() => {
|
|
143
|
+
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);
|
|
144
|
+
insert(_el$48, () => metricParams.title);
|
|
145
|
+
insert(_el$50, () => metricParams.value);
|
|
146
|
+
insert(_el$49, createComponent(Show, {
|
|
147
|
+
get when() {
|
|
148
|
+
return metricParams.unit;
|
|
149
|
+
},
|
|
150
|
+
get children() {
|
|
151
|
+
var _el$51 = getNextElement(_tmpl$1);
|
|
152
|
+
insert(_el$51, () => metricParams.unit);
|
|
153
|
+
return _el$51;
|
|
154
|
+
}
|
|
155
|
+
}), _el$53, _co$0);
|
|
156
|
+
insert(_el$46, createComponent(Show, {
|
|
157
|
+
get when() {
|
|
158
|
+
return metricParams.trend;
|
|
159
|
+
},
|
|
160
|
+
get children() {
|
|
161
|
+
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);
|
|
162
|
+
_el$61.nextSibling;
|
|
163
|
+
insert(_el$55, (() => {
|
|
164
|
+
var _c$ = memo(() => metricParams.trend.direction === "up");
|
|
165
|
+
return () => _c$() ? "�" : metricParams.trend.direction === "down" ? "�" : "�";
|
|
166
|
+
})(), _el$59, _co$1);
|
|
167
|
+
insert(_el$55, () => Math.abs(metricParams.trend.value), _el$61, _co$10);
|
|
168
|
+
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"}`));
|
|
169
|
+
return _el$54;
|
|
170
|
+
}
|
|
171
|
+
}), _el$64, _co$11);
|
|
172
|
+
insert(_el$46, createComponent(Show, {
|
|
173
|
+
get when() {
|
|
174
|
+
return metricParams.subtitle;
|
|
175
|
+
},
|
|
176
|
+
get children() {
|
|
177
|
+
var _el$62 = getNextElement(_tmpl$11);
|
|
178
|
+
insert(_el$62, () => metricParams.subtitle);
|
|
179
|
+
return _el$62;
|
|
180
|
+
}
|
|
181
|
+
}), _el$66, _co$12);
|
|
182
|
+
return _el$45;
|
|
183
|
+
})();
|
|
116
184
|
}
|
|
117
185
|
function TextRenderer(props) {
|
|
118
186
|
const textParams = props.component.params;
|
|
@@ -124,43 +192,99 @@ function TextRenderer(props) {
|
|
|
124
192
|
}
|
|
125
193
|
return textParams.content;
|
|
126
194
|
});
|
|
127
|
-
return
|
|
195
|
+
return (() => {
|
|
196
|
+
var _el$67 = getNextElement(_tmpl$13), _el$68 = _el$67.firstChild;
|
|
197
|
+
effect((_p$) => {
|
|
198
|
+
var _v$ = `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`, _v$2 = htmlContent();
|
|
199
|
+
_v$ !== _p$.e && className(_el$68, _p$.e = _v$);
|
|
200
|
+
_v$2 !== _p$.t && setProperty(_el$68, "innerHTML", _p$.t = _v$2);
|
|
201
|
+
return _p$;
|
|
202
|
+
}, {
|
|
203
|
+
e: void 0,
|
|
204
|
+
t: void 0
|
|
205
|
+
});
|
|
206
|
+
return _el$67;
|
|
207
|
+
})();
|
|
128
208
|
}
|
|
129
209
|
function IframeRenderer(props) {
|
|
130
210
|
const params = props.component.params;
|
|
131
|
-
return
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
211
|
+
return (() => {
|
|
212
|
+
var _el$69 = getNextElement(_tmpl$15), _el$73 = _el$69.firstChild, [_el$74, _co$13] = getNextMarker(_el$73.nextSibling), _el$72 = _el$74.nextSibling;
|
|
213
|
+
insert(_el$69, createComponent(Show, {
|
|
214
|
+
get when() {
|
|
215
|
+
return params.title;
|
|
216
|
+
},
|
|
217
|
+
get children() {
|
|
218
|
+
var _el$70 = getNextElement(_tmpl$14), _el$71 = _el$70.firstChild;
|
|
219
|
+
insert(_el$71, () => params.title);
|
|
220
|
+
return _el$70;
|
|
221
|
+
}
|
|
222
|
+
}), _el$74, _co$13);
|
|
223
|
+
effect((_p$) => {
|
|
224
|
+
var _v$3 = params.url, _v$4 = params.title || "Embedded content", _v$5 = `height: ${params.height || "400px"}; min-height: 300px;`;
|
|
225
|
+
_v$3 !== _p$.e && setAttribute(_el$72, "src", _p$.e = _v$3);
|
|
226
|
+
_v$4 !== _p$.t && setAttribute(_el$72, "title", _p$.t = _v$4);
|
|
227
|
+
_p$.a = style(_el$72, _v$5, _p$.a);
|
|
228
|
+
return _p$;
|
|
229
|
+
}, {
|
|
230
|
+
e: void 0,
|
|
231
|
+
t: void 0,
|
|
232
|
+
a: void 0
|
|
233
|
+
});
|
|
234
|
+
return _el$69;
|
|
235
|
+
})();
|
|
139
236
|
}
|
|
140
237
|
function ImageRenderer(props) {
|
|
141
238
|
const params = props.component.params;
|
|
142
|
-
return
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
239
|
+
return (() => {
|
|
240
|
+
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);
|
|
241
|
+
insert(_el$75, createComponent(Show, {
|
|
242
|
+
get when() {
|
|
243
|
+
return params.caption;
|
|
244
|
+
},
|
|
245
|
+
get children() {
|
|
246
|
+
var _el$79 = getNextElement(_tmpl$16), _el$80 = _el$79.firstChild;
|
|
247
|
+
insert(_el$80, () => params.caption);
|
|
248
|
+
return _el$79;
|
|
249
|
+
}
|
|
250
|
+
}), _el$82, _co$14);
|
|
251
|
+
effect((_p$) => {
|
|
252
|
+
var _v$6 = params.url, _v$7 = params.url, _v$8 = params.alt || "Image";
|
|
253
|
+
_v$6 !== _p$.e && setAttribute(_el$77, "href", _p$.e = _v$6);
|
|
254
|
+
_v$7 !== _p$.t && setAttribute(_el$78, "src", _p$.t = _v$7);
|
|
255
|
+
_v$8 !== _p$.a && setAttribute(_el$78, "alt", _p$.a = _v$8);
|
|
256
|
+
return _p$;
|
|
257
|
+
}, {
|
|
258
|
+
e: void 0,
|
|
259
|
+
t: void 0,
|
|
260
|
+
a: void 0
|
|
261
|
+
});
|
|
262
|
+
return _el$75;
|
|
263
|
+
})();
|
|
150
264
|
}
|
|
151
265
|
function LinkRenderer(props) {
|
|
152
266
|
const params = props.component.params;
|
|
153
|
-
return
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
267
|
+
return (() => {
|
|
268
|
+
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);
|
|
269
|
+
_el$83.$$click = (e) => e.stopPropagation();
|
|
270
|
+
insert(_el$86, () => params.label || params.url);
|
|
271
|
+
insert(_el$85, createComponent(Show, {
|
|
272
|
+
get when() {
|
|
273
|
+
return params.description;
|
|
274
|
+
},
|
|
275
|
+
get children() {
|
|
276
|
+
var _el$87 = getNextElement(_tmpl$18);
|
|
277
|
+
insert(_el$87, () => params.description);
|
|
278
|
+
return _el$87;
|
|
279
|
+
}
|
|
280
|
+
}), _el$89, _co$15);
|
|
281
|
+
effect(() => setAttribute(_el$83, "href", params.url));
|
|
282
|
+
runHydrationEvents();
|
|
283
|
+
return _el$83;
|
|
284
|
+
})();
|
|
161
285
|
}
|
|
162
286
|
function ComponentRenderer(props) {
|
|
163
|
-
var _a
|
|
287
|
+
var _a;
|
|
164
288
|
const validation = validateComponent(props.component);
|
|
165
289
|
if (!validation.valid) {
|
|
166
290
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -169,7 +293,14 @@ function ComponentRenderer(props) {
|
|
|
169
293
|
componentId: props.component.id,
|
|
170
294
|
details: validation.errors
|
|
171
295
|
});
|
|
172
|
-
return
|
|
296
|
+
return (() => {
|
|
297
|
+
var _el$90 = getNextElement(_tmpl$20), _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling;
|
|
298
|
+
insert(_el$92, () => {
|
|
299
|
+
var _a2, _b;
|
|
300
|
+
return ((_b = (_a2 = validation.errors) == null ? void 0 : _a2[0]) == null ? void 0 : _b.message) || "Unknown validation error";
|
|
301
|
+
});
|
|
302
|
+
return _el$90;
|
|
303
|
+
})();
|
|
173
304
|
}
|
|
174
305
|
return createComponent(GenerativeUIErrorBoundary, {
|
|
175
306
|
get componentId() {
|
|
@@ -266,10 +397,99 @@ function ComponentRenderer(props) {
|
|
|
266
397
|
}
|
|
267
398
|
});
|
|
268
399
|
}
|
|
400
|
+
}), createComponent(Show, {
|
|
401
|
+
get when() {
|
|
402
|
+
return props.component.type === "action";
|
|
403
|
+
},
|
|
404
|
+
get children() {
|
|
405
|
+
return createComponent(ActionRenderer, {
|
|
406
|
+
get component() {
|
|
407
|
+
return props.component;
|
|
408
|
+
}
|
|
409
|
+
});
|
|
410
|
+
}
|
|
269
411
|
})];
|
|
270
412
|
}
|
|
271
413
|
});
|
|
272
414
|
}
|
|
415
|
+
function ActionRenderer(props) {
|
|
416
|
+
const params = props.component.params;
|
|
417
|
+
const handleClick = (e) => {
|
|
418
|
+
if (params.action === "tool-call" && params.toolName) {
|
|
419
|
+
e.preventDefault();
|
|
420
|
+
const event = new CustomEvent("mcp-action", {
|
|
421
|
+
detail: {
|
|
422
|
+
toolName: params.toolName,
|
|
423
|
+
params: params.params || {}
|
|
424
|
+
},
|
|
425
|
+
bubbles: true
|
|
426
|
+
});
|
|
427
|
+
window.dispatchEvent(event);
|
|
428
|
+
}
|
|
429
|
+
};
|
|
430
|
+
if (params.type === "link" || params.action === "link") {
|
|
431
|
+
return (() => {
|
|
432
|
+
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);
|
|
433
|
+
_el$93.$$click = handleClick;
|
|
434
|
+
insert(_el$93, createComponent(Show, {
|
|
435
|
+
get when() {
|
|
436
|
+
return params.icon;
|
|
437
|
+
},
|
|
438
|
+
get children() {
|
|
439
|
+
var _el$94 = getNextElement(_tmpl$21);
|
|
440
|
+
insert(_el$94, () => params.icon);
|
|
441
|
+
return _el$94;
|
|
442
|
+
}
|
|
443
|
+
}), _el$96, _co$16);
|
|
444
|
+
insert(_el$93, () => params.label, _el$98, _co$17);
|
|
445
|
+
effect((_p$) => {
|
|
446
|
+
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
|
|
447
|
+
${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"}`;
|
|
448
|
+
_v$9 !== _p$.e && setAttribute(_el$93, "href", _p$.e = _v$9);
|
|
449
|
+
_v$0 !== _p$.t && setAttribute(_el$93, "target", _p$.t = _v$0);
|
|
450
|
+
_v$1 !== _p$.a && className(_el$93, _p$.a = _v$1);
|
|
451
|
+
return _p$;
|
|
452
|
+
}, {
|
|
453
|
+
e: void 0,
|
|
454
|
+
t: void 0,
|
|
455
|
+
a: void 0
|
|
456
|
+
});
|
|
457
|
+
runHydrationEvents();
|
|
458
|
+
return _el$93;
|
|
459
|
+
})();
|
|
460
|
+
}
|
|
461
|
+
return (() => {
|
|
462
|
+
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);
|
|
463
|
+
_el$99.$$click = handleClick;
|
|
464
|
+
insert(_el$99, createComponent(Show, {
|
|
465
|
+
get when() {
|
|
466
|
+
return params.icon;
|
|
467
|
+
},
|
|
468
|
+
get children() {
|
|
469
|
+
var _el$100 = getNextElement(_tmpl$21);
|
|
470
|
+
insert(_el$100, () => params.icon);
|
|
471
|
+
return _el$100;
|
|
472
|
+
}
|
|
473
|
+
}), _el$102, _co$18);
|
|
474
|
+
insert(_el$99, () => params.label, _el$104, _co$19);
|
|
475
|
+
effect((_p$) => {
|
|
476
|
+
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
|
|
477
|
+
${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"}
|
|
478
|
+
${params.disabled ? "opacity-50 cursor-not-allowed" : ""}
|
|
479
|
+
${params.size === "sm" ? "px-3 py-1.5 text-xs" : params.size === "lg" ? "px-6 py-3 text-base" : ""}`;
|
|
480
|
+
_v$10 !== _p$.e && setAttribute(_el$99, "type", _p$.e = _v$10);
|
|
481
|
+
_v$11 !== _p$.t && setProperty(_el$99, "disabled", _p$.t = _v$11);
|
|
482
|
+
_v$12 !== _p$.a && className(_el$99, _p$.a = _v$12);
|
|
483
|
+
return _p$;
|
|
484
|
+
}, {
|
|
485
|
+
e: void 0,
|
|
486
|
+
t: void 0,
|
|
487
|
+
a: void 0
|
|
488
|
+
});
|
|
489
|
+
runHydrationEvents();
|
|
490
|
+
return _el$99;
|
|
491
|
+
})();
|
|
492
|
+
}
|
|
273
493
|
const UIResourceRenderer = (props) => {
|
|
274
494
|
const layout = () => {
|
|
275
495
|
if ("type" in props.content && props.content.type !== "composite") {
|
|
@@ -298,18 +518,37 @@ const UIResourceRenderer = (props) => {
|
|
|
298
518
|
} = component.position;
|
|
299
519
|
return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : "auto"}`;
|
|
300
520
|
};
|
|
301
|
-
return
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
521
|
+
return (() => {
|
|
522
|
+
var _el$105 = getNextElement(_tmpl$24), _el$106 = _el$105.firstChild;
|
|
523
|
+
insert(_el$106, createComponent(For, {
|
|
524
|
+
get each() {
|
|
525
|
+
return layout().components;
|
|
526
|
+
},
|
|
527
|
+
children: (component) => (() => {
|
|
528
|
+
var _el$107 = getNextElement(_tmpl$25);
|
|
529
|
+
insert(_el$107, createComponent(ComponentRenderer, {
|
|
530
|
+
component,
|
|
531
|
+
get onError() {
|
|
532
|
+
return props.onError;
|
|
533
|
+
}
|
|
534
|
+
}));
|
|
535
|
+
effect((_$p) => style(_el$107, getGridStyleString(component), _$p));
|
|
536
|
+
return _el$107;
|
|
537
|
+
})()
|
|
538
|
+
}));
|
|
539
|
+
effect((_p$) => {
|
|
540
|
+
var _v$13 = `w-full ${props.class || ""}`, _v$14 = gridContainerStyle();
|
|
541
|
+
_v$13 !== _p$.e && className(_el$105, _p$.e = _v$13);
|
|
542
|
+
_p$.t = style(_el$106, _v$14, _p$.t);
|
|
543
|
+
return _p$;
|
|
544
|
+
}, {
|
|
545
|
+
e: void 0,
|
|
546
|
+
t: void 0
|
|
547
|
+
});
|
|
548
|
+
return _el$105;
|
|
549
|
+
})();
|
|
312
550
|
};
|
|
551
|
+
delegateEvents(["click"]);
|
|
313
552
|
export {
|
|
314
553
|
UIResourceRenderer
|
|
315
554
|
};
|