@copilotkit/a2ui-renderer
Version:
A2UI Renderer for CopilotKit - render A2UI surfaces in React applications
1 lines • 4.75 kB
Source Map (JSON)
{"version":3,"file":"node.mjs","names":[],"sources":["../../src/web-components/node.ts"],"sourcesContent":["import { html, LitElement, nothing } from \"lit\";\nimport { ComponentContext } from \"@a2ui/web_core/v0_9\";\nimport type { SurfaceModel } from \"@a2ui/web_core/v0_9\";\nimport type { LitComponentImplementation } from \"./types\";\n\ntype SubscriptionLike = { unsubscribe: () => void };\n\nexport class CpkA2uiNode extends LitElement {\n static properties = {\n surface: { attribute: false },\n componentId: { attribute: false },\n basePath: { attribute: false },\n };\n\n surface?: SurfaceModel<LitComponentImplementation>;\n componentId = \"root\";\n basePath = \"/\";\n private subscriptions: SubscriptionLike[] = [];\n private subscribedSurface?: SurfaceModel<LitComponentImplementation>;\n private subscribedComponentId?: string;\n\n protected createRenderRoot() {\n return this;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.style.display = \"contents\";\n }\n\n disconnectedCallback(): void {\n this.unsubscribe();\n super.disconnectedCallback();\n }\n\n private unsubscribe(): void {\n this.subscriptions.forEach((sub) => sub.unsubscribe());\n this.subscriptions = [];\n this.subscribedSurface = undefined;\n this.subscribedComponentId = undefined;\n }\n\n private ensureSubscriptions(): void {\n if (!this.surface) return;\n if (\n this.subscribedSurface === this.surface &&\n this.subscribedComponentId === this.componentId\n ) {\n return;\n }\n\n this.unsubscribe();\n this.subscribedSurface = this.surface;\n this.subscribedComponentId = this.componentId;\n this.subscriptions.push(\n this.surface.componentsModel.onCreated.subscribe((comp) => {\n if (comp.id === this.componentId) this.requestUpdate();\n }),\n this.surface.componentsModel.onDeleted.subscribe((id) => {\n if (id === this.componentId) this.requestUpdate();\n }),\n );\n }\n\n render() {\n this.ensureSubscriptions();\n const surface = this.surface;\n if (!surface) return nothing;\n\n const componentModel = surface.componentsModel.get(this.componentId);\n if (!componentModel) {\n return html`\n <div\n style=\"\n padding: 12px 16px;\n border-radius: 8px;\n background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);\n background-size: 200% 100%;\n animation: a2ui-shimmer 1.5s ease-in-out infinite;\n min-height: 2rem;\n \"\n >\n <style>\n @keyframes a2ui-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n </style>\n </div>\n `;\n }\n\n const compImpl = surface.catalog.components.get(componentModel.type);\n if (!compImpl) {\n return html`\n <div style=\"color: red;\">Unknown component: ${componentModel.type}</div>\n `;\n }\n\n const context = new ComponentContext(\n surface,\n this.componentId,\n this.basePath,\n );\n const buildChild = (childId: string, specificPath?: string) => html`\n <cpk-a2ui-node\n .surface=${surface}\n .componentId=${childId}\n .basePath=${specificPath || context.dataContext.path}\n ></cpk-a2ui-node>\n `;\n\n return compImpl.render(context, buildChild);\n }\n}\n"],"mappings":";;;;AAOA,IAAa,cAAb,cAAiC,WAAW;;;qBAQ5B;kBACH;uBACiC,EAAE;;;oBAT1B;GAClB,SAAS,EAAE,WAAW,OAAO;GAC7B,aAAa,EAAE,WAAW,OAAO;GACjC,UAAU,EAAE,WAAW,OAAO;GAC/B;;CASD,AAAU,mBAAmB;AAC3B,SAAO;;CAGT,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,MAAM,UAAU;;CAGvB,uBAA6B;AAC3B,OAAK,aAAa;AAClB,QAAM,sBAAsB;;CAG9B,AAAQ,cAAoB;AAC1B,OAAK,cAAc,SAAS,QAAQ,IAAI,aAAa,CAAC;AACtD,OAAK,gBAAgB,EAAE;AACvB,OAAK,oBAAoB;AACzB,OAAK,wBAAwB;;CAG/B,AAAQ,sBAA4B;AAClC,MAAI,CAAC,KAAK,QAAS;AACnB,MACE,KAAK,sBAAsB,KAAK,WAChC,KAAK,0BAA0B,KAAK,YAEpC;AAGF,OAAK,aAAa;AAClB,OAAK,oBAAoB,KAAK;AAC9B,OAAK,wBAAwB,KAAK;AAClC,OAAK,cAAc,KACjB,KAAK,QAAQ,gBAAgB,UAAU,WAAW,SAAS;AACzD,OAAI,KAAK,OAAO,KAAK,YAAa,MAAK,eAAe;IACtD,EACF,KAAK,QAAQ,gBAAgB,UAAU,WAAW,OAAO;AACvD,OAAI,OAAO,KAAK,YAAa,MAAK,eAAe;IACjD,CACH;;CAGH,SAAS;AACP,OAAK,qBAAqB;EAC1B,MAAM,UAAU,KAAK;AACrB,MAAI,CAAC,QAAS,QAAO;EAErB,MAAM,iBAAiB,QAAQ,gBAAgB,IAAI,KAAK,YAAY;AACpE,MAAI,CAAC,eACH,QAAO,IAAI;;;;;;;;;;;;;;;;;;;;;;;EAyBb,MAAM,WAAW,QAAQ,QAAQ,WAAW,IAAI,eAAe,KAAK;AACpE,MAAI,CAAC,SACH,QAAO,IAAI;sDACqC,eAAe,KAAK;;EAItE,MAAM,UAAU,IAAI,iBAClB,SACA,KAAK,aACL,KAAK,SACN;EACD,MAAM,cAAc,SAAiB,iBAA0B,IAAI;;mBAEpD,QAAQ;uBACJ,QAAQ;oBACX,gBAAgB,QAAQ,YAAY,KAAK;;;AAIzD,SAAO,SAAS,OAAO,SAAS,WAAW"}