@copilotkit/vue 2.0.0-rc.2 → 2.0.0-rc.21

package/src/v2/lib/__tests__/shallow-stable.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { nextTick, shallowRef } from "vue";
+import { useShallowStableRef } from "../shallow-stable";
+
+/** A stable ref over a source the test replaces with `set(next)`. */
+function stableOver<T>(initial: T) {
+  const source = shallowRef(initial);
+  const stable = useShallowStableRef(source);
+  const set = async (next: T) => {
+    source.value = next;
+    await nextTick();
+  };
+  return { stable, set };
+}
+
+describe("useShallowStableRef", () => {
+  it("keeps the reference for a shallowly equal plain object", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+    const first = stable.value;
+
+    await set({ a: 1 });
+
+    expect(stable.value).toBe(first);
+  });
+
+  it("updates the reference when a value changes", async () => {
+    const { stable, set } = stableOver({ a: 1 });
+
+    await set({ a: 2 });
+
+    expect(stable.value).toEqual({ a: 2 });
+  });
+
+  it("updates the reference when a different key holds undefined", async () => {
+    const { stable, set } = stableOver<{ a?: number; b?: number }>({
+      a: undefined,
+    });
+    const first = stable.value;
+
+    await set({ b: undefined });
+
+    expect(stable.value).not.toBe(first);
+    expect(stable.value).toEqual({ b: undefined });
+  });
+
+  it("compares arrays by reference", async () => {
+    const { stable, set } = stableOver([1, 2]);
+    const first = stable.value;
+
+    await set([1, 2]);
+
+    expect(stable.value).not.toBe(first);
+  });
+});

package/src/v2/lib/__tests__/vue-core-renderers.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { ref } from "vue";
+import { CopilotKitCoreVue } from "../vue-core";
+import type { VueActivityMessageRenderer } from "../../types";
+
+const planRenderer: VueActivityMessageRenderer<unknown> = {
+  activityType: "plan",
+  content: {
+    "~standard": {
+      version: 1,
+      vendor: "test",
+      validate: (value) => ({ value }),
+    },
+  },
+  render: () => null,
+};
+
+describe("CopilotKitCoreVue renderer lists", () => {
+  it("notifies subscribers when activity renderers change", () => {
+    const core = new CopilotKitCoreVue({});
+    const seen: string[][] = [];
+    core.subscribe({
+      onRenderActivityMessagesChanged: ({ renderActivityMessages }) => {
+        seen.push(renderActivityMessages.map((r) => r.activityType));
+      },
+    });
+
+    core.setRenderActivityMessages([planRenderer]);
+
+    expect(seen).toEqual([["plan"]]);
+  });
+
+  it("keeps working behind a Vue reactive proxy", () => {
+    const wrapped = ref(new CopilotKitCoreVue({}));
+
+    wrapped.value.addHookRenderToolCall({ name: "search", render: () => null });
+
+    expect(wrapped.value.renderToolCalls.map((r) => r.name)).toEqual([
+      "search",
+    ]);
+  });
+});

package/src/v2/lib/processPartialHtml.ts

@@ -1,21 +1,6 @@
-export function extractCompleteStyles(html: string): string {
-  const matches = html.match(/<style\b[^>]*>[\s\S]*?<\/style>/gi);
-  return matches ? matches.join("") : "";
-}
-
-export function processPartialHtml(html: string): string {
-  let result = html;
-
-  result = result.replace(/<[^>]*$/, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*?<\/\1>/gi, "");
-  result = result.replace(/<(style|script|head)\b[^>]*>[\s\S]*$/gi, "");
-  result = result.replace(/&[a-zA-Z0-9#]*$/, "");
-
-  const bodyMatch = result.match(/<body[^>]*>([\s\S]*)/i);
-  if (bodyMatch) {
-    result = bodyMatch[1]!;
-    result = result.replace(/<\/body>[\s\S]*/i, "");
-  }
-
-  return result;
-}
+// The partial-HTML helpers live in @copilotkit/core; these names stay for
+// existing imports.
+export {
+  ɵextractCompleteStyles as extractCompleteStyles,
+  ɵprocessPartialHtml as processPartialHtml,
+} from "@copilotkit/core";

package/src/v2/lib/shallow-stable.ts

@@ -1,21 +1,7 @@
+import { ɵshallowEqualRecord } from "@copilotkit/core";
 import { shallowRef, toValue, watch } from "vue";
 import type { MaybeRefOrGetter, ShallowRef } from "vue";
 
-function shallowEqualObjects(
-  first: Record<string, unknown>,
-  second: Record<string, unknown>,
-): boolean {
-  const firstKeys = Object.keys(first);
-  const secondKeys = Object.keys(second);
-  if (firstKeys.length !== secondKeys.length) return false;
-
-  for (const key of firstKeys) {
-    if (first[key] !== second[key]) return false;
-  }
-
-  return true;
-}
-
 function isPlainObject(value: unknown): value is Record<string, unknown> {
   return (
     value !== null &&
@@ -40,7 +26,7 @@ export function useShallowStableRef<T>(
       if (previous === next) return;
 
       if (isPlainObject(previous) && isPlainObject(next)) {
-        if (shallowEqualObjects(previous, next)) {
+        if (ɵshallowEqualRecord(previous, next)) {
           return;
         }
       }

package/src/v2/lib/vue-core.ts

@@ -5,11 +5,12 @@ import type {
   VueCustomMessageRenderer,
 } from "../types";
 import type { InterruptRenderProps } from "../types/interrupt";
-import { CopilotKitCore } from "@copilotkit/core";
+import { CopilotKitCore, ɵRendererRegistry } from "@copilotkit/core";
 import type {
   CopilotKitCoreConfig,
   CopilotKitCoreSubscriber,
   CopilotKitCoreSubscription,
+  ɵRendererKind,
 } from "@copilotkit/core";
 
 export interface CopilotKitCoreVueConfig extends CopilotKitCoreConfig {
@@ -27,6 +28,10 @@ export interface CopilotKitCoreVueSubscriber extends CopilotKitCoreSubscriber {
     copilotkit: CopilotKitCoreVue;
     renderCustomMessages: VueCustomMessageRenderer[];
   }) => void | Promise<void>;
+  onRenderActivityMessagesChanged?: (event: {
+    copilotkit: CopilotKitCoreVue;
+    renderActivityMessages: VueActivityMessageRenderer<unknown>[];
+  }) => void | Promise<void>;
   onInterruptStateChanged?: (event: {
     copilotkit: CopilotKitCoreVue;
     interruptState: InterruptRenderProps<unknown, unknown> | null;
@@ -34,119 +39,109 @@ export interface CopilotKitCoreVueSubscriber extends CopilotKitCoreSubscriber {
 }
 
 export class CopilotKitCoreVue extends CopilotKitCore {
-  private _renderToolCalls: VueToolCallRenderer<unknown>[] = [];
-  private _hookRenderToolCalls: Map<string, VueToolCallRenderer<unknown>> =
-    new Map();
-  private _cachedMergedRenderToolCalls: VueToolCallRenderer<unknown>[] | null =
-    null;
-  private _renderCustomMessages: VueCustomMessageRenderer[] = [];
-  private _renderActivityMessages: VueActivityMessageRenderer<unknown>[] = [];
-  private _interruptState: InterruptRenderProps<unknown, unknown> | null = null;
+  private readonly _renderers: ɵRendererRegistry<
+    VueToolCallRenderer<unknown>,
+    VueActivityMessageRenderer<unknown>,
+    VueCustomMessageRenderer
+  >;
 
   constructor(config: CopilotKitCoreVueConfig) {
-    super(config);
-    this._renderToolCalls = config.renderToolCalls ?? [];
-    this._renderCustomMessages = config.renderCustomMessages ?? [];
-    this._renderActivityMessages = config.renderActivityMessages ?? [];
+    // Tool handlers can change reactive state. `nextTick` lets Vue flush those
+    // updates before core starts the follow-up run.
+    super({ ...config, ɵwaitForFrameworkUpdates: () => nextTick() });
+    this._renderers = new ɵRendererRegistry({
+      toolCalls: config.renderToolCalls,
+      activity: config.renderActivityMessages,
+      custom: config.renderCustomMessages,
+    });
+    this._renderers.subscribe((kind) => this.notifyRenderersChanged(kind));
+    // The props live in core's generic interrupt slot; keep the Vue
+    // subscriber event for existing listeners.
+    this.ɵsubscribeToInterruptPayload(() => {
+      void this.notifySubscribers((subscriber) => {
+        const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
+        return vueSubscriber.onInterruptStateChanged?.({
+          copilotkit: this,
+          interruptState: this.interruptState,
+        });
+      }, "Subscriber onInterruptStateChanged error:");
+    });
   }
 
-  get renderCustomMessages(): Readonly<VueCustomMessageRenderer[]> {
-    return this._renderCustomMessages;
+  get renderCustomMessages() {
+    return this._renderers.custom;
   }
 
-  get renderActivityMessages(): Readonly<
-    VueActivityMessageRenderer<unknown>[]
-  > {
-    return this._renderActivityMessages;
+  get renderActivityMessages() {
+    return this._renderers.activity;
   }
 
   setRenderActivityMessages(
     renderers: VueActivityMessageRenderer<unknown>[],
   ): void {
-    this._renderActivityMessages = [...renderers];
+    this._renderers.setActivity(renderers);
   }
 
   setRenderCustomMessages(renderers: VueCustomMessageRenderer[]): void {
-    this._renderCustomMessages = [...renderers];
-    void this.notifySubscribers((subscriber) => {
-      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onRenderCustomMessagesChanged?.({
-        copilotkit: this,
-        renderCustomMessages: [...this.renderCustomMessages],
-      });
-    }, "Subscriber onRenderCustomMessagesChanged error:");
+    this._renderers.setCustom(renderers);
   }
 
-  get propRenderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
-    return this._renderToolCalls;
+  /** The renderers the provider was given, without hook renderers. */
+  get propRenderToolCalls() {
+    return this._renderers.propToolCalls;
   }
 
-  get renderToolCalls(): Readonly<VueToolCallRenderer<unknown>[]> {
-    if (this._hookRenderToolCalls.size === 0) {
-      return this._renderToolCalls;
-    }
-    if (this._cachedMergedRenderToolCalls) {
-      return this._cachedMergedRenderToolCalls;
-    }
-    const merged = new Map<string, VueToolCallRenderer<unknown>>();
-    for (const rc of this._renderToolCalls) {
-      merged.set(`${rc.agentId ?? ""}:${rc.name}`, rc);
-    }
-    for (const [key, rc] of this._hookRenderToolCalls) {
-      merged.set(key, rc);
-    }
-    this._cachedMergedRenderToolCalls = Array.from(merged.values());
-    return this._cachedMergedRenderToolCalls;
+  /** Prop and hook renderers merged; a hook renderer wins over a prop one. */
+  get renderToolCalls() {
+    return this._renderers.toolCalls;
   }
 
   get interruptState(): InterruptRenderProps<unknown, unknown> | null {
-    return this._interruptState;
+    return this.ɵinterruptPayload as InterruptRenderProps<
+      unknown,
+      unknown
+    > | null;
   }
 
   setRenderToolCalls(renderToolCalls: VueToolCallRenderer<unknown>[]): void {
-    this._renderToolCalls = [...renderToolCalls];
-    this._cachedMergedRenderToolCalls = null;
-    this._notifyRenderToolCallsChanged();
+    this._renderers.setPropToolCalls(renderToolCalls);
   }
 
   addHookRenderToolCall(entry: VueToolCallRenderer<unknown>): void {
-    const key = `${entry.agentId ?? ""}:${entry.name}`;
-    this._hookRenderToolCalls.set(key, entry);
-    this._cachedMergedRenderToolCalls = null;
-    this._notifyRenderToolCallsChanged();
+    this._renderers.addHookToolCall(entry);
   }
 
   removeHookRenderToolCall(name: string, agentId?: string): void {
-    const key = `${agentId ?? ""}:${name}`;
-    if (this._hookRenderToolCalls.delete(key)) {
-      this._cachedMergedRenderToolCalls = null;
-      this._notifyRenderToolCallsChanged();
-    }
+    this._renderers.removeHookToolCall(name, agentId);
   }
 
-  private _notifyRenderToolCallsChanged(): void {
+  private notifyRenderersChanged(kind: ɵRendererKind): void {
     void this.notifySubscribers((subscriber) => {
       const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      if (vueSubscriber.onRenderToolCallsChanged) {
-        vueSubscriber.onRenderToolCallsChanged({
-          copilotkit: this,
-          renderToolCalls: [...this.renderToolCalls],
-        });
+      switch (kind) {
+        case "toolCalls":
+          return vueSubscriber.onRenderToolCallsChanged?.({
+            copilotkit: this,
+            renderToolCalls: [...this.renderToolCalls],
+          });
+        case "activity":
+          return vueSubscriber.onRenderActivityMessagesChanged?.({
+            copilotkit: this,
+            renderActivityMessages: [...this.renderActivityMessages],
+          });
+        case "custom":
+          return vueSubscriber.onRenderCustomMessagesChanged?.({
+            copilotkit: this,
+            renderCustomMessages: [...this.renderCustomMessages],
+          });
       }
-    }, "Subscriber onRenderToolCallsChanged error:");
+    }, `Subscriber renderer change (${kind}) error:`);
   }
 
   setInterruptState(
     interruptState: InterruptRenderProps<unknown, unknown> | null,
   ): void {
-    this._interruptState = interruptState;
-    void this.notifySubscribers((subscriber) => {
-      const vueSubscriber = subscriber as CopilotKitCoreVueSubscriber;
-      vueSubscriber.onInterruptStateChanged?.({
-        copilotkit: this,
-        interruptState: this._interruptState,
-      });
-    }, "Subscriber onInterruptStateChanged error:");
+    this.ɵsetInterruptPayload(interruptState);
   }
 
   subscribe(
@@ -154,8 +149,4 @@ export class CopilotKitCoreVue extends CopilotKitCore {
   ): CopilotKitCoreSubscription {
     return super.subscribe(subscriber);
   }
-
-  async waitForPendingFrameworkUpdates(): Promise<void> {
-    await nextTick();
-  }
 }

package/src/v2/providers/CopilotChatConfigurationProvider.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, provide, ref, watch } from "vue";
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  shallowRef,
+  watch,
+} from "vue";
+import { ɵChatConfigurationStore } from "@copilotkit/core";
 import type { ComputedRef } from "vue";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkit/shared";
-import type { OpenThreadRegistration } from "@copilotkit/core";
 import { CopilotChatConfigurationKey, CopilotKitKey } from "./keys";
+import { ChatConfigurationStoreKey } from "./chat-configuration-store-key";
 import { CopilotChatDefaultLabels } from "./types";
 import type { CopilotChatConfigurationValue, CopilotChatLabels } from "./types";
 import type { CopilotChatConfigurationProviderProps } from "./CopilotChatConfigurationProvider.types";
 import { useShallowStableRef } from "../lib/shallow-stable";
-import { isMobileViewport } from "../lib/is-mobile-viewport";
 
-// Vue normalizes optional Boolean props to `false` when not supplied; declare
-// `undefined` defaults so we can faithfully distinguish "caller passed false"
-// from "caller did not pass the prop", matching React's prop semantics.
 const props = withDefaults(
   defineProps<CopilotChatConfigurationProviderProps>(),
   {
@@ -25,210 +29,68 @@ const parentConfig = inject<ComputedRef<CopilotChatConfigurationValue> | null>(
   CopilotChatConfigurationKey,
   null,
 );
-const parentConfigValue = computed(() => parentConfig?.value ?? null);
 
-// Caller-authoritative when a threadId prop is supplied AND not explicitly
-// flagged non-explicit. A <CopilotKit>-seeded non-explicit id
-// (threadId + hasExplicitThreadId=false) stays overridable — the round-2 fix.
-const propIsAuthoritative = computed(
-  () => props.threadId !== undefined && props.hasExplicitThreadId !== false,
+// Core owns thread, agent, modal and drawer resolution across the provider
+// chain; this component feeds it props and projects its snapshot.
+const readOptions = () => ({
+  agentId: props.agentId,
+  threadId: props.threadId,
+  hasExplicitThreadId: props.hasExplicitThreadId,
+  isModalDefaultOpen: props.isModalDefaultOpen,
+});
+const store = new ɵChatConfigurationStore(
+  readOptions(),
+  inject(ChatConfigurationStoreKey, null),
 );
-
-// Imperative active-thread override (a picked row or a fresh startNewThread).
-const activeThreadOverride = ref<{
-  threadId: string;
-  explicit: boolean;
-} | null>(null);
+const snapshot = shallowRef(store.getSnapshot());
+const unsubscribe = store.subscribe(() => {
+  snapshot.value = store.getSnapshot();
+});
+watch(readOptions, (options) => store.update(options));
+onBeforeUnmount(() => {
+  unsubscribe();
+  store.dispose();
+});
 
 const stableLabels = useShallowStableRef(computed(() => props.labels));
 
 const mergedLabels = computed<CopilotChatLabels>(() => ({
   ...CopilotChatDefaultLabels,
-  ...parentConfigValue.value?.labels,
+  ...parentConfig?.value?.labels,
   ...stableLabels.value,
 }));
 
-const resolvedAgentId = computed(
-  () => props.agentId ?? parentConfigValue.value?.agentId ?? DEFAULT_AGENT_ID,
-);
-
-const fallbackThreadId = randomUUID();
-const resolvedThreadId = computed(() => {
-  if (propIsAuthoritative.value) return props.threadId as string;
-  if (activeThreadOverride.value) return activeThreadOverride.value.threadId;
-  if (props.threadId) return props.threadId;
-  if (parentConfigValue.value?.threadId)
-    return parentConfigValue.value.threadId;
-  return fallbackThreadId;
-});
-
 // Tell Core which Thread this view shows, so captured interactions can link
-// to it. This provider also works without a CopilotKitProvider, and then there
-// is nothing to register with. Registration starts on mount, so a server
-// render never registers a Thread that it can't unregister.
+// to it. Works without a CopilotKitProvider: then there is nothing to register.
 const copilotKitContext = inject(CopilotKitKey, null);
-let openThread: OpenThreadRegistration | null = null;
 onMounted(() => {
   watch(
-    () => [copilotKitContext?.copilotkit.value, resolvedAgentId.value] as const,
-    ([core, agentId], _previous, onCleanup) => {
+    () => copilotKitContext?.copilotkit.value,
+    (core, _previous, onCleanup) => {
       if (!core) return;
-      const registration = core.registerOpenThread({
-        agentId,
-        threadId: resolvedThreadId.value,
-      });
-      openThread = registration;
-      onCleanup(() => {
-        registration.unregister();
-        openThread = null;
-      });
+      onCleanup(store.bindOpenThread(core));
     },
     { immediate: true },
   );
-  watch(resolvedThreadId, (threadId) => openThread?.update(threadId));
-});
-
-const resolvedHasExplicitThreadId = computed(() => {
-  if (propIsAuthoritative.value) return true;
-  const own = activeThreadOverride.value
-    ? activeThreadOverride.value.explicit
-    : props.hasExplicitThreadId !== undefined
-      ? props.hasExplicitThreadId
-      : !!props.threadId;
-  return own || !!parentConfigValue.value?.hasExplicitThreadId;
-});
-
-const shouldCreateModalState = computed(
-  () => props.isModalDefaultOpen !== undefined,
-);
-const resolvedDefaultOpen = computed(() => props.isModalDefaultOpen ?? true);
-
-const internalModalOpen = ref<boolean>(
-  parentConfigValue.value?.isModalOpen ?? resolvedDefaultOpen.value,
-);
-
-function setInternalModalOpen(open: boolean) {
-  internalModalOpen.value = open;
-}
-
-const resolvedIsModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? internalModalOpen.value
-    : parentConfigValue.value?.isModalOpen,
-);
-const resolvedSetModalOpen = computed(() =>
-  shouldCreateModalState.value
-    ? setInternalModalOpen
-    : parentConfigValue.value?.setModalOpen,
-);
-
-function setActiveThreadId(threadId: string, options?: { explicit?: boolean }) {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring setActiveThreadId(): threadId is controlled " +
-        "via the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = {
-    threadId,
-    explicit: options?.explicit ?? true,
-  };
-}
-
-function startNewThread() {
-  if (propIsAuthoritative.value) {
-    console.warn(
-      "[CopilotKit] Ignoring startNewThread(): threadId is controlled via " +
-        "the `threadId` prop on CopilotChatConfigurationProvider.",
-    );
-    return;
-  }
-  activeThreadOverride.value = { threadId: randomUUID(), explicit: false };
-}
-
-// Drawer presence + open state. The top-most provider owns the state; a nested
-// provider proxies its parent so the whole chain shares one drawer.
-const ownDrawerOpen = ref(false);
-const ownDrawerCount = ref(0);
-
-function ownSetDrawerOpen(open: boolean) {
-  ownDrawerOpen.value = open;
-  // Mobile mutual-exclusion: opening the drawer closes the chat modal.
-  if (open && isMobileViewport()) {
-    resolvedSetModalOpen.value?.(false);
-  }
-}
-
-function ownRegisterDrawer(): () => void {
-  ownDrawerCount.value += 1;
-  return () => {
-    ownDrawerCount.value = Math.max(0, ownDrawerCount.value - 1);
-  };
-}
-
-const resolvedDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerOpen
-    : ownDrawerOpen.value,
-);
-const resolvedSetDrawerOpen = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.setDrawerOpen
-    : ownSetDrawerOpen,
-);
-const resolvedDrawerRegistered = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.drawerRegistered
-    : ownDrawerCount.value > 0,
-);
-const resolvedRegisterDrawer = computed(() =>
-  parentConfigValue.value
-    ? parentConfigValue.value.registerDrawer
-    : ownRegisterDrawer,
-);
-
-// Public modal setter (mobile mutual-exclusion, other direction: opening the
-// chat modal closes the drawer). Preserve the contract that it is `undefined`
-// when this provider owns no modal state AND no parent provides one —
-// CopilotChatToggleButton relies on that absence to fall back to its own
-// local open-state. When a real modal setter exists (own `isModalDefaultOpen`
-// state or an inherited parent setter), wrap it so opening the modal on
-// mobile also closes the drawer.
-//
-// Note: this diverges from the React reference (CopilotChatConfigurationProvider.tsx),
-// which keeps `setModalOpen` always-defined and always backed by internal state. We
-// intentionally take the minimal Vue-local fix here — preserving the `undefined`
-// contract CopilotChatToggleButton depends on — rather than also reworking
-// `resolvedIsModalOpen`'s backing, to avoid changing bare-provider modal-open
-// semantics.
-const publicSetModalOpen = computed(() => {
-  const base = resolvedSetModalOpen.value; // undefined when no modal state + no parent
-  if (!base) return undefined;
-  return (open: boolean) => {
-    if (open && isMobileViewport()) {
-      resolvedSetDrawerOpen.value?.(false);
-    }
-    base(open);
-  };
 });
 
 const configurationValue = computed<CopilotChatConfigurationValue>(() => ({
   labels: mergedLabels.value,
-  agentId: resolvedAgentId.value,
-  threadId: resolvedThreadId.value,
-  hasExplicitThreadId: resolvedHasExplicitThreadId.value,
-  isModalOpen: resolvedIsModalOpen.value,
-  setModalOpen: publicSetModalOpen.value,
-  drawerOpen: resolvedDrawerOpen.value,
-  setDrawerOpen: resolvedSetDrawerOpen.value,
-  drawerRegistered: resolvedDrawerRegistered.value,
-  registerDrawer: resolvedRegisterDrawer.value,
-  setActiveThreadId,
-  startNewThread,
+  agentId: snapshot.value.agentId,
+  threadId: snapshot.value.threadId,
+  hasExplicitThreadId: snapshot.value.hasExplicitThreadId,
+  isModalOpen: snapshot.value.isModalOpen,
+  setModalOpen: store.setModalOpen,
+  drawerOpen: snapshot.value.drawerOpen,
+  setDrawerOpen: store.setDrawerOpen,
+  drawerRegistered: snapshot.value.drawerRegistered,
+  registerDrawer: store.registerDrawer,
+  setActiveThreadId: store.setActiveThreadId,
+  startNewThread: store.startNewThread,
 }));
 
 provide(CopilotChatConfigurationKey, configurationValue);
+provide(ChatConfigurationStoreKey, store);
 </script>
 
 <template>