@copilotkit/vue 1.57.1

package/src/v2/components/a2ui/adapter.ts

@@ -0,0 +1,156 @@
+/**
+ * Vue adapter for @a2ui/web_core v0.9 component rendering.
+ *
+ * Provides createVueComponent — the Vue equivalent of createReactComponent
+ * from the React renderer. Uses GenericBinder for reactive data binding
+ * and Vue's render functions for component output.
+ */
+
+import {
+  defineComponent,
+  ref,
+  onUnmounted,
+  watch,
+  type VNode,
+  type PropType,
+} from "vue";
+import {
+  ComponentContext,
+  GenericBinder,
+  type ComponentApi,
+  type InferredComponentApiSchemaType,
+  type ResolveA2uiProps,
+} from "@a2ui/web_core/v0_9";
+
+/** Props passed to a Vue A2UI component's render function. */
+export interface VueA2uiComponentProps<T, S = void> {
+  props: T;
+  buildChild: (id: string, basePath?: string) => VNode;
+  context: ComponentContext;
+  state: S;
+}
+
+/**
+ * A Vue component implementation registered with the A2UI Catalog.
+ * Mirrors ReactComponentImplementation but uses Vue's component system.
+ */
+export interface VueComponentImplementation extends ComponentApi {
+  /** The Vue component that handles rendering. */
+  render: ReturnType<typeof defineComponent>;
+}
+
+/**
+ * Creates a Vue component implementation using the GenericBinder.
+ * This is the Vue equivalent of createReactComponent from the React adapter.
+ */
+export function createVueComponent<Api extends ComponentApi, S = void>(
+  api: Api,
+  renderFn: (
+    componentProps: VueA2uiComponentProps<
+      ResolveA2uiProps<InferredComponentApiSchemaType<Api>>,
+      S
+    >,
+  ) => VNode | VNode[] | null,
+  setupState?: () => S,
+): VueComponentImplementation {
+  type Props = ResolveA2uiProps<InferredComponentApiSchemaType<Api>>;
+
+  const VueWrapper = defineComponent({
+    name: `A2UI_${api.name}`,
+    props: {
+      context: {
+        type: Object as PropType<ComponentContext>,
+        required: true,
+      },
+      buildChild: {
+        type: Function as PropType<(id: string, basePath?: string) => VNode>,
+        required: true,
+      },
+    },
+    setup(wrapperProps) {
+      const resolvedProps = ref<Props>({} as Props);
+      let binder: GenericBinder<Props> | null = null;
+      const state = setupState ? setupState() : (undefined as S);
+
+      function initBinder(context: ComponentContext) {
+        if (binder) {
+          binder.dispose();
+        }
+        binder = new GenericBinder<Props>(context, api.schema);
+        resolvedProps.value = binder.snapshot;
+        binder.subscribe((newProps: Props) => {
+          resolvedProps.value = newProps;
+        });
+      }
+
+      initBinder(wrapperProps.context);
+
+      watch(
+        () => wrapperProps.context,
+        (newContext) => {
+          initBinder(newContext);
+        },
+      );
+
+      onUnmounted(() => {
+        if (binder) {
+          binder.dispose();
+          binder = null;
+        }
+      });
+
+      return () =>
+        renderFn({
+          props: resolvedProps.value,
+          buildChild: wrapperProps.buildChild,
+          context: wrapperProps.context,
+          state,
+        });
+    },
+  });
+
+  return {
+    name: api.name,
+    schema: api.schema,
+    render: VueWrapper,
+  };
+}
+
+/**
+ * Creates a Vue component implementation without the generic binder
+ * (for components that manage their own context bindings).
+ */
+export function createBinderlessVueComponent(
+  api: ComponentApi,
+  renderFn: (componentProps: {
+    context: ComponentContext;
+    buildChild: (id: string, basePath?: string) => VNode;
+  }) => VNode | VNode[] | null,
+): VueComponentImplementation {
+  const VueWrapper = defineComponent({
+    name: `A2UI_${api.name}`,
+    props: {
+      context: {
+        type: Object as PropType<ComponentContext>,
+        required: true,
+      },
+      buildChild: {
+        type: Function as PropType<(id: string, basePath?: string) => VNode>,
+        required: true,
+      },
+    },
+    setup(wrapperProps) {
+      return () =>
+        renderFn({
+          context: wrapperProps.context,
+          buildChild: wrapperProps.buildChild,
+        });
+    },
+  });
+
+  return {
+    name: api.name,
+    schema: api.schema,
+    render: VueWrapper,
+  };
+}