1 line
8.3 KiB
Plaintext
1 line
8.3 KiB
Plaintext
{"version":3,"file":"A2UIViewer.mjs","names":["viewerTheme"],"sources":["../src/A2UIViewer.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useMemo, useEffect, useRef } from \"react\";\nimport type { Types } from \"@a2ui/lit/0.8\";\nimport { v0_8 } from \"@a2ui/lit\";\nimport {\n A2UIProvider,\n useA2UIActions,\n} from \"./react-renderer/core/A2UIProvider\";\nimport { A2UIRenderer } from \"./react-renderer/core/A2UIRenderer\";\nimport { initializeDefaultCatalog } from \"./react-renderer/registry/defaultCatalog\";\nimport { litTheme } from \"./react-renderer/theme/litTheme\";\nimport { injectStyles } from \"./react-renderer/styles\";\nimport { theme as viewerTheme } from \"./theme/viewer-theme.js\";\n\n// Re-export types that consumers may need\nexport interface ComponentInstance {\n id: string;\n component: Record<string, unknown>;\n}\n\nexport interface A2UIActionEvent {\n actionName: string;\n sourceComponentId: string;\n timestamp: string;\n context: Record<string, unknown>;\n}\n\nexport interface A2UIViewerProps {\n /** ID of the root component to render */\n root: string;\n /** Component definitions - array of ComponentInstance */\n components: v0_8.Types.ComponentInstance[];\n /** Data model - nested object, e.g. { user: { name: \"John\" }, items: [\"a\", \"b\"] } */\n data?: Record<string, unknown>;\n /** Called when user triggers an action (button click, etc.) */\n onAction?: (action: A2UIActionEvent) => void;\n /** Surface styles (primaryColor, font, logoUrl) */\n styles?: Record<string, string>;\n /** Optional className for the container */\n className?: string;\n}\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n if (!initialized) {\n initializeDefaultCatalog();\n injectStyles();\n initialized = true;\n }\n}\n\n/**\n * A2UIViewer renders an A2UI component tree from a JSON definition and data.\n * It re-renders cleanly when props change, discarding previous state.\n */\nexport function A2UIViewer({\n root,\n components,\n data,\n onAction,\n styles,\n className,\n}: A2UIViewerProps): React.JSX.Element {\n ensureInitialized();\n\n // Use React's useId for SSR-safe base ID\n const baseId = useId();\n\n // Generate a stable surfaceId that changes when definition changes\n const surfaceId = useMemo(() => {\n const definitionKey = `${root}-${JSON.stringify(components)}`;\n let hash = 0;\n for (let i = 0; i < definitionKey.length; i++) {\n const char = definitionKey.charCodeAt(i);\n hash = (hash << 5) - hash + char;\n hash = hash & hash;\n }\n return `surface${baseId.replace(/:/g, \"-\")}${hash}`;\n }, [baseId, root, components]);\n\n // Convert onAction callback to internal format\n const handleAction = useMemo(() => {\n if (!onAction) return undefined;\n\n return (message: Types.A2UIClientEventMessage) => {\n const userAction = message.userAction;\n if (userAction) {\n onAction({\n actionName: userAction.name,\n sourceComponentId: userAction.sourceComponentId,\n timestamp: userAction.timestamp,\n context: userAction.context ?? {},\n });\n }\n };\n }, [onAction]);\n\n // Show placeholder if no components provided\n if (!components || components.length === 0) {\n return (\n <div\n className={className}\n style={{ padding: 16, color: \"#666\", fontFamily: \"system-ui\" }}\n >\n No content to display\n </div>\n );\n }\n\n return (\n <A2UIProvider onAction={handleAction} theme={viewerTheme}>\n <A2UIViewerInner\n surfaceId={surfaceId}\n root={root}\n components={components}\n data={data ?? {}}\n styles={styles}\n className={className}\n />\n </A2UIProvider>\n );\n}\n\n/**\n * Inner component that processes messages within the provider context.\n */\nfunction A2UIViewerInner({\n surfaceId,\n root,\n components,\n data,\n styles,\n className,\n}: {\n surfaceId: string;\n root: string;\n components: v0_8.Types.ComponentInstance[];\n data: Record<string, unknown>;\n styles?: Record<string, string>;\n className?: string;\n}) {\n const { processMessages } = useA2UIActions();\n const lastProcessedRef = useRef<string>(\"\");\n\n // Process messages when props change\n useEffect(() => {\n const key = `${surfaceId}-${JSON.stringify(components)}-${JSON.stringify(data)}`;\n if (key === lastProcessedRef.current) return;\n lastProcessedRef.current = key;\n\n const messages: Types.ServerToClientMessage[] = [\n { beginRendering: { surfaceId, root, styles: styles ?? {} } },\n { surfaceUpdate: { surfaceId, components } },\n ];\n\n // Add data model updates\n if (data && Object.keys(data).length > 0) {\n const contents = objectToValueMaps(data);\n if (contents.length > 0) {\n messages.push({\n dataModelUpdate: { surfaceId, path: \"/\", contents },\n });\n }\n }\n\n processMessages(messages);\n }, [processMessages, surfaceId, root, components, data, styles]);\n\n return (\n <div className={className}>\n <A2UIRenderer surfaceId={surfaceId} />\n </div>\n );\n}\n\n/**\n * Converts a nested JavaScript object to the ValueMap[] format\n * expected by A2UI's dataModelUpdate message.\n */\nfunction objectToValueMaps(obj: Record<string, unknown>): Types.ValueMap[] {\n return Object.entries(obj).map(([key, value]) => valueToValueMap(key, value));\n}\n\n/**\n * Converts a single key-value pair to a ValueMap.\n */\nfunction valueToValueMap(key: string, value: unknown): Types.ValueMap {\n if (typeof value === \"string\") {\n return { key, valueString: value };\n }\n if (typeof value === \"number\") {\n return { key, valueNumber: value };\n }\n if (typeof value === \"boolean\") {\n return { key, valueBoolean: value };\n }\n if (value === null || value === undefined) {\n return { key };\n }\n if (Array.isArray(value)) {\n const valueMap = value.map((item, index) =>\n valueToValueMap(String(index), item),\n );\n return { key, valueMap };\n }\n if (typeof value === \"object\") {\n const valueMap = objectToValueMaps(value as Record<string, unknown>);\n return { key, valueMap };\n }\n return { key };\n}\n"],"mappings":"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"} |