@copilotkitnext/react 1.54.0-next.4 → 1.54.0-next.5
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/a2ui/A2UIMessageRenderer.cjs +1 -1
- package/dist/a2ui/A2UIMessageRenderer.cjs.map +1 -1
- package/dist/a2ui/A2UIMessageRenderer.mjs +1 -1
- package/dist/a2ui/A2UIMessageRenderer.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -7
|
@@ -66,7 +66,7 @@ function createA2UIMessageRenderer(options) {
|
|
|
66
66
|
*/
|
|
67
67
|
function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
|
|
68
68
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
69
|
-
className: "cpk:flex cpk:w-full cpk:flex-none cpk:
|
|
69
|
+
className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
|
|
70
70
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
|
|
71
71
|
onAction: (0, react.useCallback)(async (message) => {
|
|
72
72
|
if (!agent) return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A2UIMessageRenderer.cjs","names":["z","useCopilotKit","DEFAULT_SURFACE_ID","A2UIProvider","A2UIRenderer"],"sources":["../../src/a2ui/A2UIMessageRenderer.tsx"],"sourcesContent":["import { useCopilotKit } from \"../providers\";\nimport type { ReactActivityMessageRenderer } from \"../types/react-activity-message-renderer\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n A2UIProvider,\n useA2UIActions,\n A2UIRenderer,\n initializeDefaultCatalog,\n injectStyles,\n DEFAULT_SURFACE_ID,\n} from \"@copilotkit/a2ui-renderer\";\nimport type { Theme, A2UIClientEventMessage } from \"@copilotkit/a2ui-renderer\";\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\nexport type A2UIMessageRendererOptions = {\n theme: Theme;\n};\n\nexport function createA2UIMessageRenderer(\n options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n const { theme } = options;\n\n return {\n activityType: \"a2ui-surface\",\n content: z.any(),\n render: ({ content, agent }) => {\n ensureInitialized();\n\n const [operations, setOperations] = useState<any[]>([]);\n const lastSignatureRef = useRef<string | null>(null);\n const { copilotkit } = useCopilotKit();\n\n useEffect(() => {\n if (!content || !Array.isArray(content.operations)) {\n lastSignatureRef.current = null;\n setOperations([]);\n return;\n }\n\n const incoming = content.operations as any[];\n const signature = stringifyOperations(incoming);\n\n if (signature && signature === lastSignatureRef.current) {\n return;\n }\n\n lastSignatureRef.current = signature;\n setOperations(incoming);\n }, [content]);\n\n // Group operations by surface ID\n const groupedOperations = useMemo(() => {\n const groups = new Map<string, any[]>();\n\n for (const operation of operations) {\n const surfaceId =\n getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;\n\n if (!groups.has(surfaceId)) {\n groups.set(surfaceId, []);\n }\n groups.get(surfaceId)!.push(operation);\n }\n\n return groups;\n }, [operations]);\n\n if (!groupedOperations.size) {\n return null;\n }\n\n return (\n <div className=\"cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6\">\n {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n <ReactSurfaceHost\n key={surfaceId}\n surfaceId={surfaceId}\n operations={ops}\n theme={theme}\n agent={agent}\n copilotkit={copilotkit}\n />\n ))}\n </div>\n );\n },\n };\n}\n\ntype ReactSurfaceHostProps = {\n surfaceId: string;\n operations: any[];\n theme: Theme;\n agent: any;\n copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n surfaceId,\n operations,\n theme,\n agent,\n copilotkit,\n}: ReactSurfaceHostProps) {\n // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n const handleAction = useCallback(\n async (message: A2UIClientEventMessage) => {\n if (!agent) return;\n\n try {\n console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n copilotkit.setProperties({\n ...(copilotkit.properties ?? {}),\n a2uiAction: message,\n });\n\n await copilotkit.runAgent({ agent });\n } finally {\n if (copilotkit.properties) {\n const { a2uiAction, ...rest } = copilotkit.properties;\n copilotkit.setProperties(rest);\n }\n }\n },\n [agent, copilotkit],\n );\n\n return (\n <div className=\"cpk:flex cpk:w-full cpk:flex-none cpk:
|
|
1
|
+
{"version":3,"file":"A2UIMessageRenderer.cjs","names":["z","useCopilotKit","DEFAULT_SURFACE_ID","A2UIProvider","A2UIRenderer"],"sources":["../../src/a2ui/A2UIMessageRenderer.tsx"],"sourcesContent":["import { useCopilotKit } from \"../providers\";\nimport type { ReactActivityMessageRenderer } from \"../types/react-activity-message-renderer\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n A2UIProvider,\n useA2UIActions,\n A2UIRenderer,\n initializeDefaultCatalog,\n injectStyles,\n DEFAULT_SURFACE_ID,\n} from \"@copilotkit/a2ui-renderer\";\nimport type { Theme, A2UIClientEventMessage } from \"@copilotkit/a2ui-renderer\";\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\nexport type A2UIMessageRendererOptions = {\n theme: Theme;\n};\n\nexport function createA2UIMessageRenderer(\n options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n const { theme } = options;\n\n return {\n activityType: \"a2ui-surface\",\n content: z.any(),\n render: ({ content, agent }) => {\n ensureInitialized();\n\n const [operations, setOperations] = useState<any[]>([]);\n const lastSignatureRef = useRef<string | null>(null);\n const { copilotkit } = useCopilotKit();\n\n useEffect(() => {\n if (!content || !Array.isArray(content.operations)) {\n lastSignatureRef.current = null;\n setOperations([]);\n return;\n }\n\n const incoming = content.operations as any[];\n const signature = stringifyOperations(incoming);\n\n if (signature && signature === lastSignatureRef.current) {\n return;\n }\n\n lastSignatureRef.current = signature;\n setOperations(incoming);\n }, [content]);\n\n // Group operations by surface ID\n const groupedOperations = useMemo(() => {\n const groups = new Map<string, any[]>();\n\n for (const operation of operations) {\n const surfaceId =\n getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;\n\n if (!groups.has(surfaceId)) {\n groups.set(surfaceId, []);\n }\n groups.get(surfaceId)!.push(operation);\n }\n\n return groups;\n }, [operations]);\n\n if (!groupedOperations.size) {\n return null;\n }\n\n return (\n <div className=\"cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6\">\n {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n <ReactSurfaceHost\n key={surfaceId}\n surfaceId={surfaceId}\n operations={ops}\n theme={theme}\n agent={agent}\n copilotkit={copilotkit}\n />\n ))}\n </div>\n );\n },\n };\n}\n\ntype ReactSurfaceHostProps = {\n surfaceId: string;\n operations: any[];\n theme: Theme;\n agent: any;\n copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n surfaceId,\n operations,\n theme,\n agent,\n copilotkit,\n}: ReactSurfaceHostProps) {\n // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n const handleAction = useCallback(\n async (message: A2UIClientEventMessage) => {\n if (!agent) return;\n\n try {\n console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n copilotkit.setProperties({\n ...(copilotkit.properties ?? {}),\n a2uiAction: message,\n });\n\n await copilotkit.runAgent({ agent });\n } finally {\n if (copilotkit.properties) {\n const { a2uiAction, ...rest } = copilotkit.properties;\n copilotkit.setProperties(rest);\n }\n }\n },\n [agent, copilotkit],\n );\n\n return (\n <div className=\"cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4\">\n <A2UIProvider onAction={handleAction} theme={theme}>\n <SurfaceMessageProcessor\n surfaceId={surfaceId}\n operations={operations}\n />\n <A2UIRenderer surfaceId={surfaceId} className=\"cpk:flex cpk:flex-1\" />\n </A2UIProvider>\n </div>\n );\n}\n\n/**\n * Processes A2UI operations into the provider's message processor.\n * Must be a child of A2UIProvider to access the actions context.\n */\nfunction SurfaceMessageProcessor({\n surfaceId,\n operations,\n}: {\n surfaceId: string;\n operations: any[];\n}) {\n const { processMessages } = useA2UIActions();\n const lastProcessedRef = useRef<string>(\"\");\n\n useEffect(() => {\n const key = `${surfaceId}-${JSON.stringify(operations)}`;\n if (key === lastProcessedRef.current) return;\n lastProcessedRef.current = key;\n\n processMessages(operations);\n }, [processMessages, surfaceId, operations]);\n\n return null;\n}\n\nfunction getOperationSurfaceId(operation: any): string | null {\n if (!operation || typeof operation !== \"object\") {\n return null;\n }\n\n if (typeof operation.surfaceId === \"string\") {\n return operation.surfaceId;\n }\n\n return (\n operation?.beginRendering?.surfaceId ??\n operation?.surfaceUpdate?.surfaceId ??\n operation?.dataModelUpdate?.surfaceId ??\n operation?.deleteSurface?.surfaceId ??\n null\n );\n}\n\nfunction stringifyOperations(ops: any[]): string | null {\n try {\n return JSON.stringify(ops);\n } catch (error) {\n return null;\n }\n}\n"],"mappings":";;;;;;;;;AAeA,IAAI,cAAc;AAClB,SAAS,oBAAoB;AAC3B,KAAI,CAAC,aAAa;AAChB,2DAA0B;AAC1B,+CAAc;AACd,gBAAc;;;AAQlB,SAAgB,0BACd,SACmC;CACnC,MAAM,EAAE,UAAU;AAElB,QAAO;EACL,cAAc;EACd,SAASA,MAAE,KAAK;EAChB,SAAS,EAAE,SAAS,YAAY;AAC9B,sBAAmB;GAEnB,MAAM,CAAC,YAAY,qCAAiC,EAAE,CAAC;GACvD,MAAM,qCAAyC,KAAK;GACpD,MAAM,EAAE,eAAeC,0CAAe;AAEtC,8BAAgB;AACd,QAAI,CAAC,WAAW,CAAC,MAAM,QAAQ,QAAQ,WAAW,EAAE;AAClD,sBAAiB,UAAU;AAC3B,mBAAc,EAAE,CAAC;AACjB;;IAGF,MAAM,WAAW,QAAQ;IACzB,MAAM,YAAY,oBAAoB,SAAS;AAE/C,QAAI,aAAa,cAAc,iBAAiB,QAC9C;AAGF,qBAAiB,UAAU;AAC3B,kBAAc,SAAS;MACtB,CAAC,QAAQ,CAAC;GAGb,MAAM,6CAAkC;IACtC,MAAM,yBAAS,IAAI,KAAoB;AAEvC,SAAK,MAAM,aAAa,YAAY;KAClC,MAAM,YACJ,sBAAsB,UAAU,IAAIC;AAEtC,SAAI,CAAC,OAAO,IAAI,UAAU,CACxB,QAAO,IAAI,WAAW,EAAE,CAAC;AAE3B,YAAO,IAAI,UAAU,CAAE,KAAK,UAAU;;AAGxC,WAAO;MACN,CAAC,WAAW,CAAC;AAEhB,OAAI,CAAC,kBAAkB,KACrB,QAAO;AAGT,UACE,2CAAC;IAAI,WAAU;cACZ,MAAM,KAAK,kBAAkB,SAAS,CAAC,CAAC,KAAK,CAAC,WAAW,SACxD,2CAAC;KAEY;KACX,YAAY;KACL;KACA;KACK;OALP,UAML,CACF;KACE;;EAGX;;;;;;AAeH,SAAS,iBAAiB,EACxB,WACA,YACA,OACA,OACA,cACwB;AAyBxB,QACE,2CAAC;EAAI,WAAU;YACb,4CAACC;GAAa,iCAxBhB,OAAO,YAAoC;AACzC,QAAI,CAAC,MAAO;AAEZ,QAAI;AACF,aAAQ,KAAK,4BAA4B,QAAQ,WAAW;AAE5D,gBAAW,cAAc;MACvB,GAAI,WAAW,cAAc,EAAE;MAC/B,YAAY;MACb,CAAC;AAEF,WAAM,WAAW,SAAS,EAAE,OAAO,CAAC;cAC5B;AACR,SAAI,WAAW,YAAY;MACzB,MAAM,EAAE,YAAY,GAAG,SAAS,WAAW;AAC3C,iBAAW,cAAc,KAAK;;;MAIpC,CAAC,OAAO,WAAW,CACpB;GAIgD;cAC3C,2CAAC;IACY;IACC;KACZ,EACF,2CAACC;IAAwB;IAAW,WAAU;KAAwB;IACzD;GACX;;;;;;AAQV,SAAS,wBAAwB,EAC/B,WACA,cAIC;CACD,MAAM,EAAE,mEAAoC;CAC5C,MAAM,qCAAkC,GAAG;AAE3C,4BAAgB;EACd,MAAM,MAAM,GAAG,UAAU,GAAG,KAAK,UAAU,WAAW;AACtD,MAAI,QAAQ,iBAAiB,QAAS;AACtC,mBAAiB,UAAU;AAE3B,kBAAgB,WAAW;IAC1B;EAAC;EAAiB;EAAW;EAAW,CAAC;AAE5C,QAAO;;AAGT,SAAS,sBAAsB,WAA+B;AAC5D,KAAI,CAAC,aAAa,OAAO,cAAc,SACrC,QAAO;AAGT,KAAI,OAAO,UAAU,cAAc,SACjC,QAAO,UAAU;AAGnB,QACE,WAAW,gBAAgB,aAC3B,WAAW,eAAe,aAC1B,WAAW,iBAAiB,aAC5B,WAAW,eAAe,aAC1B;;AAIJ,SAAS,oBAAoB,KAA2B;AACtD,KAAI;AACF,SAAO,KAAK,UAAU,IAAI;UACnB,OAAO;AACd,SAAO"}
|
|
@@ -65,7 +65,7 @@ function createA2UIMessageRenderer(options) {
|
|
|
65
65
|
*/
|
|
66
66
|
function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
|
|
67
67
|
return /* @__PURE__ */ jsx("div", {
|
|
68
|
-
className: "cpk:flex cpk:w-full cpk:flex-none cpk:
|
|
68
|
+
className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
|
|
69
69
|
children: /* @__PURE__ */ jsxs(A2UIProvider, {
|
|
70
70
|
onAction: useCallback(async (message) => {
|
|
71
71
|
if (!agent) return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"A2UIMessageRenderer.mjs","names":[],"sources":["../../src/a2ui/A2UIMessageRenderer.tsx"],"sourcesContent":["import { useCopilotKit } from \"../providers\";\nimport type { ReactActivityMessageRenderer } from \"../types/react-activity-message-renderer\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n A2UIProvider,\n useA2UIActions,\n A2UIRenderer,\n initializeDefaultCatalog,\n injectStyles,\n DEFAULT_SURFACE_ID,\n} from \"@copilotkit/a2ui-renderer\";\nimport type { Theme, A2UIClientEventMessage } from \"@copilotkit/a2ui-renderer\";\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\nexport type A2UIMessageRendererOptions = {\n theme: Theme;\n};\n\nexport function createA2UIMessageRenderer(\n options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n const { theme } = options;\n\n return {\n activityType: \"a2ui-surface\",\n content: z.any(),\n render: ({ content, agent }) => {\n ensureInitialized();\n\n const [operations, setOperations] = useState<any[]>([]);\n const lastSignatureRef = useRef<string | null>(null);\n const { copilotkit } = useCopilotKit();\n\n useEffect(() => {\n if (!content || !Array.isArray(content.operations)) {\n lastSignatureRef.current = null;\n setOperations([]);\n return;\n }\n\n const incoming = content.operations as any[];\n const signature = stringifyOperations(incoming);\n\n if (signature && signature === lastSignatureRef.current) {\n return;\n }\n\n lastSignatureRef.current = signature;\n setOperations(incoming);\n }, [content]);\n\n // Group operations by surface ID\n const groupedOperations = useMemo(() => {\n const groups = new Map<string, any[]>();\n\n for (const operation of operations) {\n const surfaceId =\n getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;\n\n if (!groups.has(surfaceId)) {\n groups.set(surfaceId, []);\n }\n groups.get(surfaceId)!.push(operation);\n }\n\n return groups;\n }, [operations]);\n\n if (!groupedOperations.size) {\n return null;\n }\n\n return (\n <div className=\"cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6\">\n {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n <ReactSurfaceHost\n key={surfaceId}\n surfaceId={surfaceId}\n operations={ops}\n theme={theme}\n agent={agent}\n copilotkit={copilotkit}\n />\n ))}\n </div>\n );\n },\n };\n}\n\ntype ReactSurfaceHostProps = {\n surfaceId: string;\n operations: any[];\n theme: Theme;\n agent: any;\n copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n surfaceId,\n operations,\n theme,\n agent,\n copilotkit,\n}: ReactSurfaceHostProps) {\n // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n const handleAction = useCallback(\n async (message: A2UIClientEventMessage) => {\n if (!agent) return;\n\n try {\n console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n copilotkit.setProperties({\n ...(copilotkit.properties ?? {}),\n a2uiAction: message,\n });\n\n await copilotkit.runAgent({ agent });\n } finally {\n if (copilotkit.properties) {\n const { a2uiAction, ...rest } = copilotkit.properties;\n copilotkit.setProperties(rest);\n }\n }\n },\n [agent, copilotkit],\n );\n\n return (\n <div className=\"cpk:flex cpk:w-full cpk:flex-none cpk:
|
|
1
|
+
{"version":3,"file":"A2UIMessageRenderer.mjs","names":[],"sources":["../../src/a2ui/A2UIMessageRenderer.tsx"],"sourcesContent":["import { useCopilotKit } from \"../providers\";\nimport type { ReactActivityMessageRenderer } from \"../types/react-activity-message-renderer\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n A2UIProvider,\n useA2UIActions,\n A2UIRenderer,\n initializeDefaultCatalog,\n injectStyles,\n DEFAULT_SURFACE_ID,\n} from \"@copilotkit/a2ui-renderer\";\nimport type { Theme, A2UIClientEventMessage } from \"@copilotkit/a2ui-renderer\";\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\nexport type A2UIMessageRendererOptions = {\n theme: Theme;\n};\n\nexport function createA2UIMessageRenderer(\n options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer<any> {\n const { theme } = options;\n\n return {\n activityType: \"a2ui-surface\",\n content: z.any(),\n render: ({ content, agent }) => {\n ensureInitialized();\n\n const [operations, setOperations] = useState<any[]>([]);\n const lastSignatureRef = useRef<string | null>(null);\n const { copilotkit } = useCopilotKit();\n\n useEffect(() => {\n if (!content || !Array.isArray(content.operations)) {\n lastSignatureRef.current = null;\n setOperations([]);\n return;\n }\n\n const incoming = content.operations as any[];\n const signature = stringifyOperations(incoming);\n\n if (signature && signature === lastSignatureRef.current) {\n return;\n }\n\n lastSignatureRef.current = signature;\n setOperations(incoming);\n }, [content]);\n\n // Group operations by surface ID\n const groupedOperations = useMemo(() => {\n const groups = new Map<string, any[]>();\n\n for (const operation of operations) {\n const surfaceId =\n getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;\n\n if (!groups.has(surfaceId)) {\n groups.set(surfaceId, []);\n }\n groups.get(surfaceId)!.push(operation);\n }\n\n return groups;\n }, [operations]);\n\n if (!groupedOperations.size) {\n return null;\n }\n\n return (\n <div className=\"cpk:flex cpk:min-h-0 cpk:flex-1 cpk:flex-col cpk:gap-6 cpk:overflow-auto cpk:py-6\">\n {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n <ReactSurfaceHost\n key={surfaceId}\n surfaceId={surfaceId}\n operations={ops}\n theme={theme}\n agent={agent}\n copilotkit={copilotkit}\n />\n ))}\n </div>\n );\n },\n };\n}\n\ntype ReactSurfaceHostProps = {\n surfaceId: string;\n operations: any[];\n theme: Theme;\n agent: any;\n copilotkit: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n surfaceId,\n operations,\n theme,\n agent,\n copilotkit,\n}: ReactSurfaceHostProps) {\n // Bridge: when the React renderer dispatches an action, send it to CopilotKit\n const handleAction = useCallback(\n async (message: A2UIClientEventMessage) => {\n if (!agent) return;\n\n try {\n console.info(\"[A2UI] Action dispatched\", message.userAction);\n\n copilotkit.setProperties({\n ...(copilotkit.properties ?? {}),\n a2uiAction: message,\n });\n\n await copilotkit.runAgent({ agent });\n } finally {\n if (copilotkit.properties) {\n const { a2uiAction, ...rest } = copilotkit.properties;\n copilotkit.setProperties(rest);\n }\n }\n },\n [agent, copilotkit],\n );\n\n return (\n <div className=\"cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4\">\n <A2UIProvider onAction={handleAction} theme={theme}>\n <SurfaceMessageProcessor\n surfaceId={surfaceId}\n operations={operations}\n />\n <A2UIRenderer surfaceId={surfaceId} className=\"cpk:flex cpk:flex-1\" />\n </A2UIProvider>\n </div>\n );\n}\n\n/**\n * Processes A2UI operations into the provider's message processor.\n * Must be a child of A2UIProvider to access the actions context.\n */\nfunction SurfaceMessageProcessor({\n surfaceId,\n operations,\n}: {\n surfaceId: string;\n operations: any[];\n}) {\n const { processMessages } = useA2UIActions();\n const lastProcessedRef = useRef<string>(\"\");\n\n useEffect(() => {\n const key = `${surfaceId}-${JSON.stringify(operations)}`;\n if (key === lastProcessedRef.current) return;\n lastProcessedRef.current = key;\n\n processMessages(operations);\n }, [processMessages, surfaceId, operations]);\n\n return null;\n}\n\nfunction getOperationSurfaceId(operation: any): string | null {\n if (!operation || typeof operation !== \"object\") {\n return null;\n }\n\n if (typeof operation.surfaceId === \"string\") {\n return operation.surfaceId;\n }\n\n return (\n operation?.beginRendering?.surfaceId ??\n operation?.surfaceUpdate?.surfaceId ??\n operation?.dataModelUpdate?.surfaceId ??\n operation?.deleteSurface?.surfaceId ??\n null\n );\n}\n\nfunction stringifyOperations(ops: any[]): string | null {\n try {\n return JSON.stringify(ops);\n } catch (error) {\n return null;\n }\n}\n"],"mappings":";;;;;;;;AAeA,IAAI,cAAc;AAClB,SAAS,oBAAoB;AAC3B,KAAI,CAAC,aAAa;AAChB,4BAA0B;AAC1B,gBAAc;AACd,gBAAc;;;AAQlB,SAAgB,0BACd,SACmC;CACnC,MAAM,EAAE,UAAU;AAElB,QAAO;EACL,cAAc;EACd,SAAS,EAAE,KAAK;EAChB,SAAS,EAAE,SAAS,YAAY;AAC9B,sBAAmB;GAEnB,MAAM,CAAC,YAAY,iBAAiB,SAAgB,EAAE,CAAC;GACvD,MAAM,mBAAmB,OAAsB,KAAK;GACpD,MAAM,EAAE,eAAe,eAAe;AAEtC,mBAAgB;AACd,QAAI,CAAC,WAAW,CAAC,MAAM,QAAQ,QAAQ,WAAW,EAAE;AAClD,sBAAiB,UAAU;AAC3B,mBAAc,EAAE,CAAC;AACjB;;IAGF,MAAM,WAAW,QAAQ;IACzB,MAAM,YAAY,oBAAoB,SAAS;AAE/C,QAAI,aAAa,cAAc,iBAAiB,QAC9C;AAGF,qBAAiB,UAAU;AAC3B,kBAAc,SAAS;MACtB,CAAC,QAAQ,CAAC;GAGb,MAAM,oBAAoB,cAAc;IACtC,MAAM,yBAAS,IAAI,KAAoB;AAEvC,SAAK,MAAM,aAAa,YAAY;KAClC,MAAM,YACJ,sBAAsB,UAAU,IAAI;AAEtC,SAAI,CAAC,OAAO,IAAI,UAAU,CACxB,QAAO,IAAI,WAAW,EAAE,CAAC;AAE3B,YAAO,IAAI,UAAU,CAAE,KAAK,UAAU;;AAGxC,WAAO;MACN,CAAC,WAAW,CAAC;AAEhB,OAAI,CAAC,kBAAkB,KACrB,QAAO;AAGT,UACE,oBAAC;IAAI,WAAU;cACZ,MAAM,KAAK,kBAAkB,SAAS,CAAC,CAAC,KAAK,CAAC,WAAW,SACxD,oBAAC;KAEY;KACX,YAAY;KACL;KACA;KACK;OALP,UAML,CACF;KACE;;EAGX;;;;;;AAeH,SAAS,iBAAiB,EACxB,WACA,YACA,OACA,OACA,cACwB;AAyBxB,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAa,UAzBG,YACnB,OAAO,YAAoC;AACzC,QAAI,CAAC,MAAO;AAEZ,QAAI;AACF,aAAQ,KAAK,4BAA4B,QAAQ,WAAW;AAE5D,gBAAW,cAAc;MACvB,GAAI,WAAW,cAAc,EAAE;MAC/B,YAAY;MACb,CAAC;AAEF,WAAM,WAAW,SAAS,EAAE,OAAO,CAAC;cAC5B;AACR,SAAI,WAAW,YAAY;MACzB,MAAM,EAAE,YAAY,GAAG,SAAS,WAAW;AAC3C,iBAAW,cAAc,KAAK;;;MAIpC,CAAC,OAAO,WAAW,CACpB;GAIgD;cAC3C,oBAAC;IACY;IACC;KACZ,EACF,oBAAC;IAAwB;IAAW,WAAU;KAAwB;IACzD;GACX;;;;;;AAQV,SAAS,wBAAwB,EAC/B,WACA,cAIC;CACD,MAAM,EAAE,oBAAoB,gBAAgB;CAC5C,MAAM,mBAAmB,OAAe,GAAG;AAE3C,iBAAgB;EACd,MAAM,MAAM,GAAG,UAAU,GAAG,KAAK,UAAU,WAAW;AACtD,MAAI,QAAQ,iBAAiB,QAAS;AACtC,mBAAiB,UAAU;AAE3B,kBAAgB,WAAW;IAC1B;EAAC;EAAiB;EAAW;EAAW,CAAC;AAE5C,QAAO;;AAGT,SAAS,sBAAsB,WAA+B;AAC5D,KAAI,CAAC,aAAa,OAAO,cAAc,SACrC,QAAO;AAGT,KAAI,OAAO,UAAU,cAAc,SACjC,QAAO,UAAU;AAGnB,QACE,WAAW,gBAAgB,aAC3B,WAAW,eAAe,aAC1B,WAAW,iBAAiB,aAC5B,WAAW,eAAe,aAC1B;;AAIJ,SAAS,oBAAoB,KAA2B;AACtD,KAAI;AACF,SAAO,KAAK,UAAU,IAAI;UACnB,OAAO;AACd,SAAO"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1873,7 +1873,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
1873
1873
|
*/
|
|
1874
1874
|
function ReactSurfaceHost({ surfaceId, operations, theme, agent, copilotkit }) {
|
|
1875
1875
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1876
|
-
className: "cpk:flex cpk:w-full cpk:flex-none cpk:
|
|
1876
|
+
className: "cpk:flex cpk:w-full cpk:flex-none cpk:flex-col cpk:gap-4",
|
|
1877
1877
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_copilotkit_a2ui_renderer.A2UIProvider, {
|
|
1878
1878
|
onAction: (0, react.useCallback)(async (message) => {
|
|
1879
1879
|
if (!agent) return;
|