@seed-ship/mcp-ui-solid 1.0.6 → 1.0.7
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/CHANGELOG.md +22 -0
- package/dist/components/StreamingUIRenderer.cjs +25 -23
- package/dist/components/StreamingUIRenderer.cjs.map +1 -1
- package/dist/components/StreamingUIRenderer.d.ts.map +1 -1
- package/dist/components/StreamingUIRenderer.js +27 -25
- package/dist/components/StreamingUIRenderer.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.0.7] - 2025-11-16
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
- **CRITICAL SSR FIX**: Replaced `ref` callback with `onMount` to eliminate `use()` directive
|
|
12
|
+
- Previous versions (1.0.5, 1.0.6) used `ref={() => handleComponentRender(component.id)}`
|
|
13
|
+
- vite-plugin-solid@2.11.8 transforms ref callbacks into `use()` directive calls
|
|
14
|
+
- `use` is NOT exported from `solid-js/web` in Node/SSR environment (only in browser)
|
|
15
|
+
- This caused SSR crashes on Railway: `SyntaxError: The requested module 'solid-js/web' does not provide an export named 'use'`
|
|
16
|
+
- Solution: Replaced `ref` callback with `onMount()` which is SSR-safe
|
|
17
|
+
- Affected file: `StreamingUIRenderer.tsx` (line 207)
|
|
18
|
+
|
|
19
|
+
### Technical Details
|
|
20
|
+
- `onMount` only executes client-side (after hydration), perfect for animations
|
|
21
|
+
- No `use()` directive needed, no SSR/browser export mismatch
|
|
22
|
+
- Maintains same functionality: animation triggers when component mounts
|
|
23
|
+
- Fully compatible with solid-js@1.9.10 in both browser and Node environments
|
|
24
|
+
|
|
25
|
+
### Migration Notes
|
|
26
|
+
- No breaking changes for consumers
|
|
27
|
+
- Drop-in replacement for v1.0.6
|
|
28
|
+
- Fixes production SSR crashes on Railway and similar Node.js SSR platforms
|
|
29
|
+
|
|
8
30
|
## [1.0.6] - 2025-11-16
|
|
9
31
|
|
|
10
32
|
### Fixed
|
|
@@ -169,29 +169,31 @@ function StreamingUIRenderer(props) {
|
|
|
169
169
|
get each() {
|
|
170
170
|
return components();
|
|
171
171
|
},
|
|
172
|
-
children: (component) =>
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
172
|
+
children: (component) => {
|
|
173
|
+
solidJs.onMount(() => handleComponentRender(component.id));
|
|
174
|
+
return (() => {
|
|
175
|
+
var _el$50 = _tmpl$13();
|
|
176
|
+
web.insert(_el$50, web.createComponent(StreamingComponentRenderer, {
|
|
177
|
+
component,
|
|
178
|
+
get onError() {
|
|
179
|
+
return props.onRenderError;
|
|
180
|
+
}
|
|
181
|
+
}));
|
|
182
|
+
web.effect((_p$) => {
|
|
183
|
+
var _v$ = `
|
|
184
|
+
col-span-${component.position.colSpan}
|
|
185
|
+
${animatingComponents().has(component.id) ? "animate-fade-in-up" : ""}
|
|
186
|
+
`, _v$2 = `grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`;
|
|
187
|
+
_v$ !== _p$.e && web.className(_el$50, _p$.e = _v$);
|
|
188
|
+
_p$.t = web.style(_el$50, _v$2, _p$.t);
|
|
189
|
+
return _p$;
|
|
190
|
+
}, {
|
|
191
|
+
e: void 0,
|
|
192
|
+
t: void 0
|
|
193
|
+
});
|
|
194
|
+
return _el$50;
|
|
195
|
+
})();
|
|
196
|
+
}
|
|
195
197
|
}), null);
|
|
196
198
|
web.insert(_el$28, web.createComponent(solidJs.Show, {
|
|
197
199
|
get when() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n}) {\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {validation.errors?.[0]?.message || 'Unknown validation error'}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n Retry\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components */}\n <For each={components()}>\n {(component) => (\n <div\n ref={() => handleComponentRender(component.id)}\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <StreamingComponentRenderer component={component} onError={props.onRenderError} />\n </div>\n )}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["StreamingComponentRenderer","props","validation","validateComponent","component","valid","onError","type","message","componentId","id","details","errors","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$4","_tmpl$5","_el$5","_el$6","_el$1","_el$10","_el$12","Show","when","title","_el$7","_tmpl$2","_$memo","value","_el$8","_tmpl$4","_el$9","unit","_el$0","_tmpl$3","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$13","_tmpl$12","_el$28","showProgress","_el$14","_tmpl$8","_el$15","_el$16","_el$19","_el$20","totalCount","_el$17","_tmpl$6","_el$18","receivedCount","_tmpl$7","_$effect","_$p","_$style","_el$22","_tmpl$0","_el$23","_el$24","_el$25","_el$26","recoverable","_el$27","_tmpl$9","$$click","For","each","_el$50","_tmpl$13","_$use","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$11","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$45","_el$46","_el$47","_el$48","provider","model","executionTimeMs","costUSD","_el$41","_tmpl$1","_el$42","_el$43","toFixed","firstTokenMs","cached","_tmpl$10","class","_tmpl$14","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n}) {\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {validation.errors?.[0]?.message || 'Unknown validation error'}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n Retry\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components */}\n <For each={components()}>\n {(component) => {\n // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n onMount(() => handleComponentRender(component.id))\n\n return (\n <div\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <StreamingComponentRenderer component={component} onError={props.onRenderError} />\n </div>\n )\n }}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["StreamingComponentRenderer","props","validation","validateComponent","component","valid","onError","type","message","componentId","id","details","errors","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$4","_tmpl$5","_el$5","_el$6","_el$1","_el$10","_el$12","Show","when","title","_el$7","_tmpl$2","_$memo","value","_el$8","_tmpl$4","_el$9","unit","_el$0","_tmpl$3","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$13","_tmpl$12","_el$28","showProgress","_el$14","_tmpl$8","_el$15","_el$16","_el$19","_el$20","totalCount","_el$17","_tmpl$6","_el$18","receivedCount","_tmpl$7","_$effect","_$p","_$style","_el$22","_tmpl$0","_el$23","_el$24","_el$25","_el$26","recoverable","_el$27","_tmpl$9","$$click","For","each","onMount","_el$50","_tmpl$13","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$11","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$45","_el$46","_el$47","_el$48","provider","model","executionTimeMs","costUSD","_el$41","_tmpl$1","_el$42","_el$43","toFixed","firstTokenMs","cached","_tmpl$10","class","_tmpl$14","_$delegateEvents"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAI1D,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CAC/C;AAkED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAI1D,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CAC/C;AAkED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCA2KlE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { delegateEvents, template, insert, createComponent, memo, effect, style,
|
|
2
|
-
import { createSignal, Show, For } from "solid-js";
|
|
1
|
+
import { delegateEvents, template, insert, createComponent, memo, effect, style, className } from "solid-js/web";
|
|
2
|
+
import { createSignal, Show, For, onMount } from "solid-js";
|
|
3
3
|
import { useStreamingUI } from "../hooks/useStreamingUI.js";
|
|
4
4
|
import { validateComponent } from "../services/validation.js";
|
|
5
5
|
import { GenerativeUIErrorBoundary } from "./GenerativeUIErrorBoundary.js";
|
|
@@ -167,29 +167,31 @@ function StreamingUIRenderer(props) {
|
|
|
167
167
|
get each() {
|
|
168
168
|
return components();
|
|
169
169
|
},
|
|
170
|
-
children: (component) =>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
170
|
+
children: (component) => {
|
|
171
|
+
onMount(() => handleComponentRender(component.id));
|
|
172
|
+
return (() => {
|
|
173
|
+
var _el$50 = _tmpl$13();
|
|
174
|
+
insert(_el$50, createComponent(StreamingComponentRenderer, {
|
|
175
|
+
component,
|
|
176
|
+
get onError() {
|
|
177
|
+
return props.onRenderError;
|
|
178
|
+
}
|
|
179
|
+
}));
|
|
180
|
+
effect((_p$) => {
|
|
181
|
+
var _v$ = `
|
|
182
|
+
col-span-${component.position.colSpan}
|
|
183
|
+
${animatingComponents().has(component.id) ? "animate-fade-in-up" : ""}
|
|
184
|
+
`, _v$2 = `grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`;
|
|
185
|
+
_v$ !== _p$.e && className(_el$50, _p$.e = _v$);
|
|
186
|
+
_p$.t = style(_el$50, _v$2, _p$.t);
|
|
187
|
+
return _p$;
|
|
188
|
+
}, {
|
|
189
|
+
e: void 0,
|
|
190
|
+
t: void 0
|
|
191
|
+
});
|
|
192
|
+
return _el$50;
|
|
193
|
+
})();
|
|
194
|
+
}
|
|
193
195
|
}), null);
|
|
194
196
|
insert(_el$28, createComponent(Show, {
|
|
195
197
|
get when() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreamingUIRenderer.js","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n}) {\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {validation.errors?.[0]?.message || 'Unknown validation error'}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n Retry\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components */}\n <For each={components()}>\n {(component) => (\n <div\n ref={() => handleComponentRender(component.id)}\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <StreamingComponentRenderer component={component} onError={props.onRenderError} />\n </div>\n )}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["StreamingComponentRenderer","props","validation","validateComponent","component","valid","onError","type","message","componentId","id","details","errors","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$4","_tmpl$5","_el$5","_el$6","_el$1","_el$10","_el$12","Show","when","title","_el$7","_tmpl$2","_$memo","value","_el$8","_tmpl$4","_el$9","unit","_el$0","_tmpl$3","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$13","_tmpl$12","_el$28","showProgress","_el$14","_tmpl$8","_el$15","_el$16","_el$19","_el$20","totalCount","_el$17","_tmpl$6","_el$18","receivedCount","_tmpl$7","_$effect","_$p","_$style","_el$22","_tmpl$0","_el$23","_el$24","_el$25","_el$26","recoverable","_el$27","_tmpl$9","$$click","For","each","_el$50","_tmpl$13","_$use","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$11","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$45","_el$46","_el$47","_el$48","provider","model","executionTimeMs","costUSD","_el$41","_tmpl$1","_el$42","_el$43","toFixed","firstTokenMs","cached","_tmpl$10","class","_tmpl$14","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StreamingUIRenderer.js","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n}) {\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {validation.errors?.[0]?.message || 'Unknown validation error'}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n Retry\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components */}\n <For each={components()}>\n {(component) => {\n // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n onMount(() => handleComponentRender(component.id))\n\n return (\n <div\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <StreamingComponentRenderer component={component} onError={props.onRenderError} />\n </div>\n )\n }}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["StreamingComponentRenderer","props","validation","validateComponent","component","valid","onError","type","message","componentId","id","details","errors","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$insert","params","_$createComponent","GenerativeUIErrorBoundary","componentType","allowRetry","children","_el$4","_tmpl$5","_el$5","_el$6","_el$1","_el$10","_el$12","Show","when","title","_el$7","_tmpl$2","_$memo","value","_el$8","_tmpl$4","_el$9","unit","_el$0","_tmpl$3","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$13","_tmpl$12","_el$28","showProgress","_el$14","_tmpl$8","_el$15","_el$16","_el$19","_el$20","totalCount","_el$17","_tmpl$6","_el$18","receivedCount","_tmpl$7","_$effect","_$p","_$style","_el$22","_tmpl$0","_el$23","_el$24","_el$25","_el$26","recoverable","_el$27","_tmpl$9","$$click","For","each","onMount","_el$50","_tmpl$13","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$11","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$45","_el$46","_el$47","_el$48","provider","model","executionTimeMs","costUSD","_el$41","_tmpl$1","_el$42","_el$43","toFixed","firstTokenMs","cached","_tmpl$10","class","_tmpl$14","_$delegateEvents"],"mappings":"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"}
|