From 1fc050f5f21ed885641b2de0403fe0352842ad66 Mon Sep 17 00:00:00 2001
From: lhuans <lhs.c@qq.com>
Date: Wed, 26 Aug 2026 17:13:21 +0800
Subject: [PATCH 1/2] fix(playground): inject Vue cardIdSymbol for Angular
 saveState

Angular renderer and Vue Chat used different Symbol instances for card id,
so saveState could not locate the message. Bind cardId into actions at the
playground Angular bridge.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/frameworks/vue/src/chat/index.ts     |  1 +
 .../ng-renderer/message-renderer-angular.ts   | 23 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/frameworks/vue/src/chat/index.ts b/packages/frameworks/vue/src/chat/index.ts
index db0e6b64..138c5716 100644
--- a/packages/frameworks/vue/src/chat/index.ts
+++ b/packages/frameworks/vue/src/chat/index.ts
@@ -1,4 +1,5 @@
 export { default as GenuiChat } from './GenuiChat.vue';
+export { cardIdSymbol } from './useChat.js';
 export * from './CustomModelProvider.js';
 export * from './response-handler.js';
 export * from './chat.types.js';
diff --git a/sites/playground/web/src/ng-renderer/message-renderer-angular.ts b/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
index 33f57dbd..8961f335 100644
--- a/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
+++ b/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
@@ -1,13 +1,30 @@
 import { defineAsyncComponent, h } from 'vue';
-import type { GenuiChat } from '@opentiny/genui-sdk-vue';
+import { cardIdSymbol, type GenuiChat } from '@opentiny/genui-sdk-vue';
 
 const GenuiRendererNg = defineAsyncComponent(() =>
   import('schema-renderer-ng-adpater').then((m) => m.SchemaRendererNgAdapter),
 );
+
+/** Angular context 用的是另一份 CARD_ID Symbol，注入 Vue Chat 的 cardIdSymbol 才能让 saveState 定位到消息 */
+function bindCardIdToAction<T extends { execute: (params: any, context: Record<string | symbol, any>) => any }>(
+  action: T,
+  cardId: string,
+): T {
+  return {
+    ...action,
+    execute: (params: any, context: Record<string | symbol, any> = {}) =>
+      action.execute(params, {
+        ...context,
+        [cardIdSymbol]: cardId,
+      }),
+  };
+}
+
 export function getMessageRendererAngular(instance: InstanceType<typeof GenuiChat>) {
   return (schemaCardProps) => {
     const props = instance.getProps();
     const { continueChatAction, saveStateAction } = instance;
+    const cardId = schemaCardProps.id;
     return h(
       'div',
       h(GenuiRendererNg, {
@@ -15,8 +32,8 @@ export function getMessageRendererAngular(instance: InstanceType<typeof GenuiCha
         requiredCompleteFieldSelectors: props.requiredCompleteFieldSelectors || [],
         generating: instance.lastSchemaCardId === schemaCardProps.id ? instance.generating : false,
         customActions: {
-          continueChat: continueChatAction,
-          saveState: saveStateAction,
+          continueChat: bindCardIdToAction(continueChatAction, cardId),
+          saveState: bindCardIdToAction(saveStateAction, cardId),
         },
         key: schemaCardProps.id,
       }),

From 515d020617e0f7fbec3b11d20fea5cdddd7ecea5 Mon Sep 17 00:00:00 2001
From: lhuans <lhs.c@qq.com>
Date: Tue, 1 Sep 2026 17:17:33 +0800
Subject: [PATCH 2/2] fix(playground): hoist customActions binding above h() in
 Angular renderer

Address review feedback by moving bound continueChat/saveState actions
out of the h() props object for clearer render structure.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../web/src/ng-renderer/message-renderer-angular.ts      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/sites/playground/web/src/ng-renderer/message-renderer-angular.ts b/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
index 8961f335..65be40c5 100644
--- a/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
+++ b/sites/playground/web/src/ng-renderer/message-renderer-angular.ts
@@ -25,16 +25,17 @@ export function getMessageRendererAngular(instance: InstanceType<typeof GenuiCha
     const props = instance.getProps();
     const { continueChatAction, saveStateAction } = instance;
     const cardId = schemaCardProps.id;
+    const customActions = {
+      continueChat: bindCardIdToAction(continueChatAction, cardId),
+      saveState: bindCardIdToAction(saveStateAction, cardId),
+    };
     return h(
       'div',
       h(GenuiRendererNg, {
         ...schemaCardProps,
         requiredCompleteFieldSelectors: props.requiredCompleteFieldSelectors || [],
         generating: instance.lastSchemaCardId === schemaCardProps.id ? instance.generating : false,
-        customActions: {
-          continueChat: bindCardIdToAction(continueChatAction, cardId),
-          saveState: bindCardIdToAction(saveStateAction, cardId),
-        },
+        customActions,
         key: schemaCardProps.id,
       }),
     );