@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
|
@@ -5,7 +5,7 @@ const solidJs = require("solid-js");
|
|
|
5
5
|
const validation = require("../services/validation.cjs");
|
|
6
6
|
const GenerativeUIErrorBoundary = require("./GenerativeUIErrorBoundary.cjs");
|
|
7
7
|
const marked_esm = require("../../../node_modules/.pnpm/marked@16.4.2/node_modules/marked/lib/marked.esm.cjs");
|
|
8
|
-
var _tmpl$ =
|
|
8
|
+
var _tmpl$ = /* @__PURE__ */ web.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__ */ web.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__ */ web.template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">`), _tmpl$4 = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<tr>`), _tmpl$0 = /* @__PURE__ */ web.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__ */ web.template(`<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">`), _tmpl$10 = /* @__PURE__ */ web.template(`<div class="mt-3 flex items-center"><span><!$><!/> <!$><!/>%`), _tmpl$11 = /* @__PURE__ */ web.template(`<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ web.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__ */ web.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__ */ web.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__ */ web.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__ */ web.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__ */ web.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__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400 truncate">`), _tmpl$19 = /* @__PURE__ */ web.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__ */ web.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__ */ web.template(`<span>`), _tmpl$22 = /* @__PURE__ */ web.template(`<a rel="noopener noreferrer"><!$><!/><!$><!/>`), _tmpl$23 = /* @__PURE__ */ web.template(`<button><!$><!/><!$><!/>`), _tmpl$24 = /* @__PURE__ */ web.template(`<div><div class="grid gap-4">`), _tmpl$25 = /* @__PURE__ */ web.template(`<div>`);
|
|
9
9
|
function ChartRenderer(props) {
|
|
10
10
|
const [iframeUrl, setIframeUrl] = solidJs.createSignal();
|
|
11
11
|
const [isLoading, setIsLoading] = solidJs.createSignal(true);
|
|
@@ -26,95 +26,164 @@ function ChartRenderer(props) {
|
|
|
26
26
|
setIframeUrl(url);
|
|
27
27
|
setIsLoading(false);
|
|
28
28
|
});
|
|
29
|
-
return
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
29
|
+
return (() => {
|
|
30
|
+
var _el$ = web.getNextElement(_tmpl$5), _el$11 = _el$.firstChild, [_el$12, _co$2] = web.getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = web.getNextMarker(_el$13.nextSibling), _el$15 = _el$14.nextSibling, [_el$16, _co$4] = web.getNextMarker(_el$15.nextSibling);
|
|
31
|
+
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
32
|
+
get when() {
|
|
33
|
+
return isLoading();
|
|
34
|
+
},
|
|
35
|
+
get children() {
|
|
36
|
+
return web.getNextElement(_tmpl$);
|
|
37
|
+
}
|
|
38
|
+
}), _el$12, _co$2);
|
|
39
|
+
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
40
|
+
get when() {
|
|
41
|
+
return error();
|
|
42
|
+
},
|
|
43
|
+
get children() {
|
|
44
|
+
var _el$3 = web.getNextElement(_tmpl$2), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
|
|
45
|
+
web.insert(_el$6, error);
|
|
46
|
+
return _el$3;
|
|
47
|
+
}
|
|
48
|
+
}), _el$14, _co$3);
|
|
49
|
+
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
50
|
+
get when() {
|
|
51
|
+
return web.memo(() => !!iframeUrl())() && !error();
|
|
52
|
+
},
|
|
53
|
+
get children() {
|
|
54
|
+
var _el$7 = web.getNextElement(_tmpl$4), _el$1 = _el$7.firstChild, [_el$10, _co$] = web.getNextMarker(_el$1.nextSibling), _el$9 = _el$10.nextSibling, _el$0 = _el$9.firstChild;
|
|
55
|
+
web.insert(_el$7, web.createComponent(solidJs.Show, {
|
|
56
|
+
get when() {
|
|
57
|
+
return props.component.params.title;
|
|
58
|
+
},
|
|
59
|
+
get children() {
|
|
60
|
+
var _el$8 = web.getNextElement(_tmpl$3);
|
|
61
|
+
web.insert(_el$8, () => props.component.params.title);
|
|
62
|
+
return _el$8;
|
|
63
|
+
}
|
|
64
|
+
}), _el$10, _co$);
|
|
65
|
+
_el$0.addEventListener("error", () => {
|
|
66
|
+
var _a;
|
|
67
|
+
setError("Failed to load chart");
|
|
68
|
+
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
69
|
+
type: "render",
|
|
70
|
+
message: "Chart rendering failed",
|
|
71
|
+
componentId: props.component.id
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
web.effect(() => web.setAttribute(_el$0, "src", iframeUrl()));
|
|
75
|
+
return _el$7;
|
|
76
|
+
}
|
|
77
|
+
}), _el$16, _co$4);
|
|
78
|
+
return _el$;
|
|
79
|
+
})();
|
|
58
80
|
}
|
|
59
81
|
function TableRenderer(props) {
|
|
60
82
|
const tableParams = props.component.params;
|
|
61
|
-
return
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
} : {}), web.escape(column.label))
|
|
75
|
-
})), web.escape(web.createComponent(solidJs.For, {
|
|
76
|
-
get each() {
|
|
77
|
-
return tableParams.rows.slice(0, validation.DEFAULT_RESOURCE_LIMITS.maxTableRows);
|
|
78
|
-
},
|
|
79
|
-
children: (row) => web.ssr(_tmpl$9, web.ssrHydrationKey(), web.escape(web.createComponent(solidJs.For, {
|
|
83
|
+
return (() => {
|
|
84
|
+
var _el$17 = web.getNextElement(_tmpl$7), _el$18 = _el$17.firstChild, _el$38 = _el$18.firstChild, [_el$39, _co$8] = web.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] = web.getNextMarker(_el$40.nextSibling);
|
|
85
|
+
web.insert(_el$18, web.createComponent(solidJs.Show, {
|
|
86
|
+
get when() {
|
|
87
|
+
return tableParams.title;
|
|
88
|
+
},
|
|
89
|
+
get children() {
|
|
90
|
+
var _el$19 = web.getNextElement(_tmpl$3);
|
|
91
|
+
web.insert(_el$19, () => tableParams.title);
|
|
92
|
+
return _el$19;
|
|
93
|
+
}
|
|
94
|
+
}), _el$39, _co$8);
|
|
95
|
+
web.insert(_el$23, web.createComponent(solidJs.For, {
|
|
80
96
|
get each() {
|
|
81
97
|
return tableParams.columns;
|
|
82
98
|
},
|
|
83
|
-
children: (column) =>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
99
|
+
children: (column) => (() => {
|
|
100
|
+
var _el$42 = web.getNextElement(_tmpl$8);
|
|
101
|
+
web.insert(_el$42, () => column.label);
|
|
102
|
+
web.effect((_$p) => web.style(_el$42, column.width ? {
|
|
103
|
+
width: column.width
|
|
104
|
+
} : {}, _$p));
|
|
105
|
+
return _el$42;
|
|
106
|
+
})()
|
|
107
|
+
}));
|
|
108
|
+
web.insert(_el$24, web.createComponent(solidJs.For, {
|
|
109
|
+
get each() {
|
|
110
|
+
return tableParams.rows.slice(0, validation.DEFAULT_RESOURCE_LIMITS.maxTableRows);
|
|
111
|
+
},
|
|
112
|
+
children: (row, i) => (() => {
|
|
113
|
+
var _el$43 = web.getNextElement(_tmpl$9);
|
|
114
|
+
web.insert(_el$43, web.createComponent(solidJs.For, {
|
|
115
|
+
get each() {
|
|
116
|
+
return tableParams.columns;
|
|
117
|
+
},
|
|
118
|
+
children: (column) => (() => {
|
|
119
|
+
var _el$44 = web.getNextElement(_tmpl$0);
|
|
120
|
+
web.insert(_el$44, () => row[column.key] || "-");
|
|
121
|
+
return _el$44;
|
|
122
|
+
})()
|
|
123
|
+
}));
|
|
124
|
+
web.effect(() => web.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"}`));
|
|
125
|
+
return _el$43;
|
|
126
|
+
})()
|
|
127
|
+
}));
|
|
128
|
+
web.insert(_el$18, web.createComponent(solidJs.Show, {
|
|
129
|
+
get when() {
|
|
130
|
+
return tableParams.pagination;
|
|
131
|
+
},
|
|
132
|
+
get children() {
|
|
133
|
+
var _el$25 = web.getNextElement(_tmpl$6), _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$32 = _el$27.nextSibling, [_el$33, _co$5] = web.getNextMarker(_el$32.nextSibling), _el$28 = _el$33.nextSibling, _el$34 = _el$28.nextSibling, [_el$35, _co$6] = web.getNextMarker(_el$34.nextSibling), _el$30 = _el$35.nextSibling, _el$36 = _el$30.nextSibling, [_el$37, _co$7] = web.getNextMarker(_el$36.nextSibling);
|
|
134
|
+
web.insert(_el$26, () => tableParams.pagination.currentPage * tableParams.pagination.pageSize + 1, _el$33, _co$5);
|
|
135
|
+
web.insert(_el$26, () => Math.min((tableParams.pagination.currentPage + 1) * tableParams.pagination.pageSize, tableParams.pagination.totalRows), _el$35, _co$6);
|
|
136
|
+
web.insert(_el$26, () => tableParams.pagination.totalRows, _el$37, _co$7);
|
|
137
|
+
return _el$25;
|
|
138
|
+
}
|
|
139
|
+
}), _el$41, _co$9);
|
|
140
|
+
return _el$17;
|
|
141
|
+
})();
|
|
93
142
|
}
|
|
94
143
|
function MetricRenderer(props) {
|
|
95
144
|
const metricParams = props.component.params;
|
|
96
|
-
return
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
145
|
+
return (() => {
|
|
146
|
+
var _el$45 = web.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] = web.getNextMarker(_el$52.nextSibling), _el$63 = _el$47.nextSibling, [_el$64, _co$11] = web.getNextMarker(_el$63.nextSibling), _el$65 = _el$64.nextSibling, [_el$66, _co$12] = web.getNextMarker(_el$65.nextSibling);
|
|
147
|
+
web.insert(_el$48, () => metricParams.title);
|
|
148
|
+
web.insert(_el$50, () => metricParams.value);
|
|
149
|
+
web.insert(_el$49, web.createComponent(solidJs.Show, {
|
|
150
|
+
get when() {
|
|
151
|
+
return metricParams.unit;
|
|
152
|
+
},
|
|
153
|
+
get children() {
|
|
154
|
+
var _el$51 = web.getNextElement(_tmpl$1);
|
|
155
|
+
web.insert(_el$51, () => metricParams.unit);
|
|
156
|
+
return _el$51;
|
|
157
|
+
}
|
|
158
|
+
}), _el$53, _co$0);
|
|
159
|
+
web.insert(_el$46, web.createComponent(solidJs.Show, {
|
|
160
|
+
get when() {
|
|
161
|
+
return metricParams.trend;
|
|
162
|
+
},
|
|
163
|
+
get children() {
|
|
164
|
+
var _el$54 = web.getNextElement(_tmpl$10), _el$55 = _el$54.firstChild, _el$58 = _el$55.firstChild, [_el$59, _co$1] = web.getNextMarker(_el$58.nextSibling), _el$56 = _el$59.nextSibling, _el$60 = _el$56.nextSibling, [_el$61, _co$10] = web.getNextMarker(_el$60.nextSibling);
|
|
165
|
+
_el$61.nextSibling;
|
|
166
|
+
web.insert(_el$55, (() => {
|
|
167
|
+
var _c$ = web.memo(() => metricParams.trend.direction === "up");
|
|
168
|
+
return () => _c$() ? "�" : metricParams.trend.direction === "down" ? "�" : "�";
|
|
169
|
+
})(), _el$59, _co$1);
|
|
170
|
+
web.insert(_el$55, () => Math.abs(metricParams.trend.value), _el$61, _co$10);
|
|
171
|
+
web.effect(() => web.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"}`));
|
|
172
|
+
return _el$54;
|
|
173
|
+
}
|
|
174
|
+
}), _el$64, _co$11);
|
|
175
|
+
web.insert(_el$46, web.createComponent(solidJs.Show, {
|
|
176
|
+
get when() {
|
|
177
|
+
return metricParams.subtitle;
|
|
178
|
+
},
|
|
179
|
+
get children() {
|
|
180
|
+
var _el$62 = web.getNextElement(_tmpl$11);
|
|
181
|
+
web.insert(_el$62, () => metricParams.subtitle);
|
|
182
|
+
return _el$62;
|
|
183
|
+
}
|
|
184
|
+
}), _el$66, _co$12);
|
|
185
|
+
return _el$45;
|
|
186
|
+
})();
|
|
118
187
|
}
|
|
119
188
|
function TextRenderer(props) {
|
|
120
189
|
const textParams = props.component.params;
|
|
@@ -126,43 +195,99 @@ function TextRenderer(props) {
|
|
|
126
195
|
}
|
|
127
196
|
return textParams.content;
|
|
128
197
|
});
|
|
129
|
-
return
|
|
198
|
+
return (() => {
|
|
199
|
+
var _el$67 = web.getNextElement(_tmpl$13), _el$68 = _el$67.firstChild;
|
|
200
|
+
web.effect((_p$) => {
|
|
201
|
+
var _v$ = `prose prose-sm dark:prose-invert max-w-none ${textParams.className || ""}`, _v$2 = htmlContent();
|
|
202
|
+
_v$ !== _p$.e && web.className(_el$68, _p$.e = _v$);
|
|
203
|
+
_v$2 !== _p$.t && web.setProperty(_el$68, "innerHTML", _p$.t = _v$2);
|
|
204
|
+
return _p$;
|
|
205
|
+
}, {
|
|
206
|
+
e: void 0,
|
|
207
|
+
t: void 0
|
|
208
|
+
});
|
|
209
|
+
return _el$67;
|
|
210
|
+
})();
|
|
130
211
|
}
|
|
131
212
|
function IframeRenderer(props) {
|
|
132
213
|
const params = props.component.params;
|
|
133
|
-
return
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
214
|
+
return (() => {
|
|
215
|
+
var _el$69 = web.getNextElement(_tmpl$15), _el$73 = _el$69.firstChild, [_el$74, _co$13] = web.getNextMarker(_el$73.nextSibling), _el$72 = _el$74.nextSibling;
|
|
216
|
+
web.insert(_el$69, web.createComponent(solidJs.Show, {
|
|
217
|
+
get when() {
|
|
218
|
+
return params.title;
|
|
219
|
+
},
|
|
220
|
+
get children() {
|
|
221
|
+
var _el$70 = web.getNextElement(_tmpl$14), _el$71 = _el$70.firstChild;
|
|
222
|
+
web.insert(_el$71, () => params.title);
|
|
223
|
+
return _el$70;
|
|
224
|
+
}
|
|
225
|
+
}), _el$74, _co$13);
|
|
226
|
+
web.effect((_p$) => {
|
|
227
|
+
var _v$3 = params.url, _v$4 = params.title || "Embedded content", _v$5 = `height: ${params.height || "400px"}; min-height: 300px;`;
|
|
228
|
+
_v$3 !== _p$.e && web.setAttribute(_el$72, "src", _p$.e = _v$3);
|
|
229
|
+
_v$4 !== _p$.t && web.setAttribute(_el$72, "title", _p$.t = _v$4);
|
|
230
|
+
_p$.a = web.style(_el$72, _v$5, _p$.a);
|
|
231
|
+
return _p$;
|
|
232
|
+
}, {
|
|
233
|
+
e: void 0,
|
|
234
|
+
t: void 0,
|
|
235
|
+
a: void 0
|
|
236
|
+
});
|
|
237
|
+
return _el$69;
|
|
238
|
+
})();
|
|
141
239
|
}
|
|
142
240
|
function ImageRenderer(props) {
|
|
143
241
|
const params = props.component.params;
|
|
144
|
-
return
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
242
|
+
return (() => {
|
|
243
|
+
var _el$75 = web.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] = web.getNextMarker(_el$81.nextSibling);
|
|
244
|
+
web.insert(_el$75, web.createComponent(solidJs.Show, {
|
|
245
|
+
get when() {
|
|
246
|
+
return params.caption;
|
|
247
|
+
},
|
|
248
|
+
get children() {
|
|
249
|
+
var _el$79 = web.getNextElement(_tmpl$16), _el$80 = _el$79.firstChild;
|
|
250
|
+
web.insert(_el$80, () => params.caption);
|
|
251
|
+
return _el$79;
|
|
252
|
+
}
|
|
253
|
+
}), _el$82, _co$14);
|
|
254
|
+
web.effect((_p$) => {
|
|
255
|
+
var _v$6 = params.url, _v$7 = params.url, _v$8 = params.alt || "Image";
|
|
256
|
+
_v$6 !== _p$.e && web.setAttribute(_el$77, "href", _p$.e = _v$6);
|
|
257
|
+
_v$7 !== _p$.t && web.setAttribute(_el$78, "src", _p$.t = _v$7);
|
|
258
|
+
_v$8 !== _p$.a && web.setAttribute(_el$78, "alt", _p$.a = _v$8);
|
|
259
|
+
return _p$;
|
|
260
|
+
}, {
|
|
261
|
+
e: void 0,
|
|
262
|
+
t: void 0,
|
|
263
|
+
a: void 0
|
|
264
|
+
});
|
|
265
|
+
return _el$75;
|
|
266
|
+
})();
|
|
152
267
|
}
|
|
153
268
|
function LinkRenderer(props) {
|
|
154
269
|
const params = props.component.params;
|
|
155
|
-
return
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
270
|
+
return (() => {
|
|
271
|
+
var _el$83 = web.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] = web.getNextMarker(_el$88.nextSibling);
|
|
272
|
+
_el$83.$$click = (e) => e.stopPropagation();
|
|
273
|
+
web.insert(_el$86, () => params.label || params.url);
|
|
274
|
+
web.insert(_el$85, web.createComponent(solidJs.Show, {
|
|
275
|
+
get when() {
|
|
276
|
+
return params.description;
|
|
277
|
+
},
|
|
278
|
+
get children() {
|
|
279
|
+
var _el$87 = web.getNextElement(_tmpl$18);
|
|
280
|
+
web.insert(_el$87, () => params.description);
|
|
281
|
+
return _el$87;
|
|
282
|
+
}
|
|
283
|
+
}), _el$89, _co$15);
|
|
284
|
+
web.effect(() => web.setAttribute(_el$83, "href", params.url));
|
|
285
|
+
web.runHydrationEvents();
|
|
286
|
+
return _el$83;
|
|
287
|
+
})();
|
|
163
288
|
}
|
|
164
289
|
function ComponentRenderer(props) {
|
|
165
|
-
var _a
|
|
290
|
+
var _a;
|
|
166
291
|
const validation$1 = validation.validateComponent(props.component);
|
|
167
292
|
if (!validation$1.valid) {
|
|
168
293
|
(_a = props.onError) == null ? void 0 : _a.call(props, {
|
|
@@ -171,7 +296,14 @@ function ComponentRenderer(props) {
|
|
|
171
296
|
componentId: props.component.id,
|
|
172
297
|
details: validation$1.errors
|
|
173
298
|
});
|
|
174
|
-
return
|
|
299
|
+
return (() => {
|
|
300
|
+
var _el$90 = web.getNextElement(_tmpl$20), _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling;
|
|
301
|
+
web.insert(_el$92, () => {
|
|
302
|
+
var _a2, _b;
|
|
303
|
+
return ((_b = (_a2 = validation$1.errors) == null ? void 0 : _a2[0]) == null ? void 0 : _b.message) || "Unknown validation error";
|
|
304
|
+
});
|
|
305
|
+
return _el$90;
|
|
306
|
+
})();
|
|
175
307
|
}
|
|
176
308
|
return web.createComponent(GenerativeUIErrorBoundary.GenerativeUIErrorBoundary, {
|
|
177
309
|
get componentId() {
|
|
@@ -268,10 +400,99 @@ function ComponentRenderer(props) {
|
|
|
268
400
|
}
|
|
269
401
|
});
|
|
270
402
|
}
|
|
403
|
+
}), web.createComponent(solidJs.Show, {
|
|
404
|
+
get when() {
|
|
405
|
+
return props.component.type === "action";
|
|
406
|
+
},
|
|
407
|
+
get children() {
|
|
408
|
+
return web.createComponent(ActionRenderer, {
|
|
409
|
+
get component() {
|
|
410
|
+
return props.component;
|
|
411
|
+
}
|
|
412
|
+
});
|
|
413
|
+
}
|
|
271
414
|
})];
|
|
272
415
|
}
|
|
273
416
|
});
|
|
274
417
|
}
|
|
418
|
+
function ActionRenderer(props) {
|
|
419
|
+
const params = props.component.params;
|
|
420
|
+
const handleClick = (e) => {
|
|
421
|
+
if (params.action === "tool-call" && params.toolName) {
|
|
422
|
+
e.preventDefault();
|
|
423
|
+
const event = new CustomEvent("mcp-action", {
|
|
424
|
+
detail: {
|
|
425
|
+
toolName: params.toolName,
|
|
426
|
+
params: params.params || {}
|
|
427
|
+
},
|
|
428
|
+
bubbles: true
|
|
429
|
+
});
|
|
430
|
+
window.dispatchEvent(event);
|
|
431
|
+
}
|
|
432
|
+
};
|
|
433
|
+
if (params.type === "link" || params.action === "link") {
|
|
434
|
+
return (() => {
|
|
435
|
+
var _el$93 = web.getNextElement(_tmpl$22), _el$95 = _el$93.firstChild, [_el$96, _co$16] = web.getNextMarker(_el$95.nextSibling), _el$97 = _el$96.nextSibling, [_el$98, _co$17] = web.getNextMarker(_el$97.nextSibling);
|
|
436
|
+
_el$93.$$click = handleClick;
|
|
437
|
+
web.insert(_el$93, web.createComponent(solidJs.Show, {
|
|
438
|
+
get when() {
|
|
439
|
+
return params.icon;
|
|
440
|
+
},
|
|
441
|
+
get children() {
|
|
442
|
+
var _el$94 = web.getNextElement(_tmpl$21);
|
|
443
|
+
web.insert(_el$94, () => params.icon);
|
|
444
|
+
return _el$94;
|
|
445
|
+
}
|
|
446
|
+
}), _el$96, _co$16);
|
|
447
|
+
web.insert(_el$93, () => params.label, _el$98, _co$17);
|
|
448
|
+
web.effect((_p$) => {
|
|
449
|
+
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
|
|
450
|
+
${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"}`;
|
|
451
|
+
_v$9 !== _p$.e && web.setAttribute(_el$93, "href", _p$.e = _v$9);
|
|
452
|
+
_v$0 !== _p$.t && web.setAttribute(_el$93, "target", _p$.t = _v$0);
|
|
453
|
+
_v$1 !== _p$.a && web.className(_el$93, _p$.a = _v$1);
|
|
454
|
+
return _p$;
|
|
455
|
+
}, {
|
|
456
|
+
e: void 0,
|
|
457
|
+
t: void 0,
|
|
458
|
+
a: void 0
|
|
459
|
+
});
|
|
460
|
+
web.runHydrationEvents();
|
|
461
|
+
return _el$93;
|
|
462
|
+
})();
|
|
463
|
+
}
|
|
464
|
+
return (() => {
|
|
465
|
+
var _el$99 = web.getNextElement(_tmpl$23), _el$101 = _el$99.firstChild, [_el$102, _co$18] = web.getNextMarker(_el$101.nextSibling), _el$103 = _el$102.nextSibling, [_el$104, _co$19] = web.getNextMarker(_el$103.nextSibling);
|
|
466
|
+
_el$99.$$click = handleClick;
|
|
467
|
+
web.insert(_el$99, web.createComponent(solidJs.Show, {
|
|
468
|
+
get when() {
|
|
469
|
+
return params.icon;
|
|
470
|
+
},
|
|
471
|
+
get children() {
|
|
472
|
+
var _el$100 = web.getNextElement(_tmpl$21);
|
|
473
|
+
web.insert(_el$100, () => params.icon);
|
|
474
|
+
return _el$100;
|
|
475
|
+
}
|
|
476
|
+
}), _el$102, _co$18);
|
|
477
|
+
web.insert(_el$99, () => params.label, _el$104, _co$19);
|
|
478
|
+
web.effect((_p$) => {
|
|
479
|
+
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
|
|
480
|
+
${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"}
|
|
481
|
+
${params.disabled ? "opacity-50 cursor-not-allowed" : ""}
|
|
482
|
+
${params.size === "sm" ? "px-3 py-1.5 text-xs" : params.size === "lg" ? "px-6 py-3 text-base" : ""}`;
|
|
483
|
+
_v$10 !== _p$.e && web.setAttribute(_el$99, "type", _p$.e = _v$10);
|
|
484
|
+
_v$11 !== _p$.t && web.setProperty(_el$99, "disabled", _p$.t = _v$11);
|
|
485
|
+
_v$12 !== _p$.a && web.className(_el$99, _p$.a = _v$12);
|
|
486
|
+
return _p$;
|
|
487
|
+
}, {
|
|
488
|
+
e: void 0,
|
|
489
|
+
t: void 0,
|
|
490
|
+
a: void 0
|
|
491
|
+
});
|
|
492
|
+
web.runHydrationEvents();
|
|
493
|
+
return _el$99;
|
|
494
|
+
})();
|
|
495
|
+
}
|
|
275
496
|
const UIResourceRenderer = (props) => {
|
|
276
497
|
const layout = () => {
|
|
277
498
|
if ("type" in props.content && props.content.type !== "composite") {
|
|
@@ -300,17 +521,36 @@ const UIResourceRenderer = (props) => {
|
|
|
300
521
|
} = component.position;
|
|
301
522
|
return `grid-column: ${colStart} / span ${colSpan}; grid-row: ${rowStart ? `${rowStart} / span ${rowSpan}` : "auto"}`;
|
|
302
523
|
};
|
|
303
|
-
return
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
524
|
+
return (() => {
|
|
525
|
+
var _el$105 = web.getNextElement(_tmpl$24), _el$106 = _el$105.firstChild;
|
|
526
|
+
web.insert(_el$106, web.createComponent(solidJs.For, {
|
|
527
|
+
get each() {
|
|
528
|
+
return layout().components;
|
|
529
|
+
},
|
|
530
|
+
children: (component) => (() => {
|
|
531
|
+
var _el$107 = web.getNextElement(_tmpl$25);
|
|
532
|
+
web.insert(_el$107, web.createComponent(ComponentRenderer, {
|
|
533
|
+
component,
|
|
534
|
+
get onError() {
|
|
535
|
+
return props.onError;
|
|
536
|
+
}
|
|
537
|
+
}));
|
|
538
|
+
web.effect((_$p) => web.style(_el$107, getGridStyleString(component), _$p));
|
|
539
|
+
return _el$107;
|
|
540
|
+
})()
|
|
541
|
+
}));
|
|
542
|
+
web.effect((_p$) => {
|
|
543
|
+
var _v$13 = `w-full ${props.class || ""}`, _v$14 = gridContainerStyle();
|
|
544
|
+
_v$13 !== _p$.e && web.className(_el$105, _p$.e = _v$13);
|
|
545
|
+
_p$.t = web.style(_el$106, _v$14, _p$.t);
|
|
546
|
+
return _p$;
|
|
547
|
+
}, {
|
|
548
|
+
e: void 0,
|
|
549
|
+
t: void 0
|
|
550
|
+
});
|
|
551
|
+
return _el$105;
|
|
552
|
+
})();
|
|
314
553
|
};
|
|
554
|
+
web.delegateEvents(["click"]);
|
|
315
555
|
exports.UIResourceRenderer = UIResourceRenderer;
|
|
316
556
|
//# sourceMappingURL=UIResourceRenderer.cjs.map
|