@seed-ship/mcp-ui-solid 3.0.5 → 4.0.1

package/dist/components/ScratchpadPanel.js

@@ -1,6 +1,10 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, setProperty } from "solid-js/web";
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, mergeProps, setProperty } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from "solid-js";
 import { FormFieldRenderer } from "./FormFieldRenderer.js";
+import { VerifiedText } from "./VerifiedText.js";
+import { DataPreviewSection } from "./DataPreviewSection.js";
+import { MapRenderer } from "./MapRenderer.js";
+import { ChartJSRenderer } from "./ChartJSRenderer.js";
 var _tmpl$ = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"aria-label=Close><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-1.5">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400">No results for these filters</p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">Modify filters`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">Code: <!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors flex items-center gap-1">&#128260; Retry`), _tmpl$9 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Close`), _tmpl$0 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-red-100 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10"><div class="flex items-start gap-2 text-sm text-red-700 dark:text-red-400"><span class="flex-shrink-0 mt-0.5">⚠️</span><div class=flex-1><p class=font-medium></p><!$><!/></div></div><div class="flex gap-2 mt-2"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search`), _tmpl$10 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class="absolute bottom-1 right-1 px-2 py-1 text-[9px] font-mono bg-black/80 text-green-400 rounded z-50 pointer-events-none"><!$><!/> | ev:<!$><!/> | sec:<!$><!/> | <!$><!/> | last:<!$><!/>`), _tmpl$12 = /* @__PURE__ */ template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
         @keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
       </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-gray-300 dark:text-gray-600 flex-shrink-0"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$14 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Preview</span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="px-4 py-3"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$27 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><button type=button class=hover:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$33 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$34 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$36 = /* @__PURE__ */ template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$37 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ template(`<form class="flex flex-col gap-3"><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$40 = /* @__PURE__ */ template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1">Next <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$41 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$42 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$43 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$44 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$46 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$47 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$49 = /* @__PURE__ */ template(`<div class="flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400"><span class=flex-shrink-0>⚠️</span><span>`), _tmpl$50 = /* @__PURE__ */ template(`<div class="flex gap-1"><input type=text class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send`), _tmpl$51 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><div class="flex flex-wrap gap-2"></div><!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<span>`), _tmpl$53 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$54 = /* @__PURE__ */ template(`<div class="mt-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/10 rounded-lg text-sm text-blue-700 dark:text-blue-300"><span class=font-medium>Plan:</span> <!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; Modify`), _tmpl$56 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-medium min-w-[80px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$58 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$59 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$60 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$61 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$62 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$63 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$64 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$65 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$66 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; Details`), _tmpl$67 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$68 = /* @__PURE__ */ template(`<div><div class="flex items-start gap-2"><span class=flex-shrink-0></span><div class=flex-1><p></p><div class="flex gap-2 mt-2"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$69 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400"><!$><!/> results`), _tmpl$70 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$71 = /* @__PURE__ */ template(`<div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2"><div class="flex items-center justify-between mb-1.5"><span class="text-sm font-medium text-gray-900 dark:text-white"><!$><!/> <!$><!/></span><!$><!/></div><div class="flex flex-wrap gap-1.5 mb-1"></div><!$><!/>`), _tmpl$72 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$73 = /* @__PURE__ */ template(`<div class=overflow-x-auto><table class="min-w-full text-xs"><thead><tr><th class="px-2 py-1 text-left text-gray-500 dark:text-gray-400"></th><th class="px-2 py-1 text-left font-medium text-blue-600 dark:text-blue-400"></th><th class="px-2 py-1 text-left font-medium text-purple-600 dark:text-purple-400"></th></tr></thead><tbody>`), _tmpl$74 = /* @__PURE__ */ template(`<tr><td class="px-2 py-1 font-mono text-gray-500 dark:text-gray-400"></td><td class="px-2 py-1 text-gray-900 dark:text-white"></td><td class="px-2 py-1 text-gray-900 dark:text-white">`);
@@ -611,6 +615,76 @@ const SectionRenderer = (props) => {
               }
             });
           }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "verified_text";
+          },
+          get children() {
+            return createComponent(VerifiedText, mergeProps(() => props.section.content, {
+              onHallucinationClick: (h) => {
+                var _a;
+                return (_a = props.onAction) == null ? void 0 : _a.call(props, "hallucination_click", h);
+              }
+            }));
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "data_preview";
+          },
+          get children() {
+            return createComponent(DataPreviewSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "map";
+          },
+          get children() {
+            return (() => {
+              const c = props.section.content;
+              return createComponent(MapRenderer, {
+                get params() {
+                  return {
+                    geojson: c.geojson,
+                    center: c.center,
+                    zoom: c.zoom,
+                    geojsonStyle: c.style,
+                    popup: c.popup,
+                    layers: c.layers,
+                    height: c.height || "300px",
+                    fitBounds: true
+                  };
+                }
+              });
+            })();
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "chart";
+          },
+          get children() {
+            return createComponent(ChartJSRenderer, {
+              get component() {
+                var _a;
+                return {
+                  id: props.section.id,
+                  type: "chart",
+                  position: {
+                    colStart: 1,
+                    colSpan: 12
+                  },
+                  params: {
+                    ...props.section.content,
+                    renderer: "native",
+                    height: ((_a = props.section.content) == null ? void 0 : _a.height) || "250px"
+                  }
+                };
+              }
+            });
+          }
         }), createComponent(Match, {
           when: true,
           get children() {
@@ -989,7 +1063,15 @@ const EnrichedStepsSection = (props) => {
   })();
 };
 const ActionSection = (props) => {
-  const actions = () => Array.isArray(props.content) ? props.content : [];
+  const actions = () => {
+    if (Array.isArray(props.content)) return props.content;
+    const obj = props.content;
+    if (obj && Array.isArray(obj.actions)) {
+      console.warn("[MCP-UI] ActionSection: content should be an array, got { actions: [...] }. Unwrapping automatically.");
+      return obj.actions;
+    }
+    return [];
+  };
   return (() => {
     var _el$178 = getNextElement(_tmpl$45);
     insert(_el$178, createComponent(For, {