Merge pull request #222 from opentiny/fix/json-patch-ids-apply-failed

fix(playground): harden jsonPatch apply and component id assignment

Author: rhlin

sites/playground/web/src/assets/images/chevron-down.svg

@@ -26,8 +26,13 @@ import type {
 } from './chat.types';
 import {
   finalizePendingSchemaCard,
+  findLatestPendingSchemaCard,
+  findSchemaCardByCardId,
+  generateIdForComponents,
   getLastUserMessage,
   isManualSchemaSaveMessage,
+  resolveJsonPatchApplyFailed,
+  setJsonPatchApplyResult,
 } from './template-chat-utils';
 import { generateId } from '../../utils';
 import { useTemplateContext } from './composables';
@@ -48,7 +53,6 @@ const { setColorMode } = useTheme();
 const prevSchema = ref<string>('');
 const { schema, conversation, versionControl, stream, emitter } = useTemplateContext();
 const {
-  errorMessagesMap,
   handleSchemaJsonChanged,
   resetLastPreviewSchema,
 } = stream;
@@ -195,7 +199,6 @@ const createSchemaMessageRenderer = (type: 'json-patch' | 'schema-card' | 'schem
     itemProps: props,
     type,
     prevSchema: prevSchema.value,
-    errorMessagesMap: errorMessagesMap.value,
   });
 
 const messageRenderers = {
@@ -292,21 +295,33 @@ const handleSendMessage = async () => {
   scrollToBottom();
 };
 
-const finalizeStreamingSchemaCard = () => {
+const handleNotification = (event: INotificationPayload) => {
+  if (event.type !== 'done') {
+    return;
+  }
+
+  const cardId =
+    schema.currentCardId
+    || findLatestPendingSchemaCard(messages.value)?.cardId
+    || '';
+  const card = cardId ? findSchemaCardByCardId(messages.value, cardId) : null;
+  let applyFailed = false;
+  if (card?.type === 'json-patch') {
+    applyFailed = resolveJsonPatchApplyFailed(card, messages.value);
+    setJsonPatchApplyResult(applyFailed ? 'failed' : 'success', messages.value, cardId);
+  }
+  const preview = schema.currentPreviewSchema;
+  if (preview && !applyFailed) {
+    generateIdForComponents(preview);
+  }
+  schema.setCurrentSchema(preview);
   finalizePendingSchemaCard(messages.value, {
-    cardId: schema.currentCardId,
-    schema: schema.currentPreviewSchema ?? schema.currentSchema,
+    cardId: cardId || undefined,
+    ...(applyFailed || !preview ? {} : { schema: preview }),
     prevSchema: prevSchema.value || '',
   });
 };
 
-const handleNotification = (event: INotificationPayload) => {
-  if (event.type === 'done') {
-    schema.setCurrentSchema(schema.currentPreviewSchema);
-    finalizeStreamingSchemaCard();
-  }
-};
-
 watch(() => messages.value, throttledScrollToBottom, { deep: true });
 
 onMounted(() => {

sites/playground/web/src/components/genui-template/GenuiTemplateChat.vue

@@ -28,7 +28,7 @@ export interface IRendererProps {
   generatedTime: string;
   schema: string;
   prevSchema: string;
-  errorMessagesMap?: Map<string, string>;
+  applyFailed?: boolean;
 }
 
 defineOptions({ inheritAttrs: false });
@@ -66,7 +66,9 @@ const visible = ref(false);
 const currentSchema = ref<string>('');
 const jsonPatch = ref<string>('');
 const prevSchema = ref<string>('');
-const errorMessage = computed(() => props.errorMessagesMap?.get(props.cardId) ?? '');
+const errorMessage = computed(() =>
+  props.applyFailed ? 'jsonPatch apply failed' : ''
+);
 
 const handleClick = () => {
   emit('card-select', props.cardId);
@@ -85,7 +87,12 @@ const handleDev = () => {
     return;
   }
 
-  jsonPatch.value = JSON.stringify(formatJsonPatch(baseline, operations), null, 2);
+  try {
+    jsonPatch.value = JSON.stringify(formatJsonPatch(baseline, operations), null, 2);
+  } catch (error) {
+    console.error(error);
+    jsonPatch.value = JSON.stringify(operations, null, 2);
+  }
   prevSchema.value = prevSchemaStr;
   currentSchema.value = cardMessage.schema ?? '';
   visible.value = true;

sites/playground/web/src/components/genui-template/SchemaVersionCard.vue

@@ -4,6 +4,7 @@ import { TinyButton } from '@opentiny/vue';
 import { iconClose } from '@opentiny/vue-icon';
 import type { PlaygroundColorTheme } from './composables/use-monaco-playground-theme';
 import { useTemplateContext } from './composables';
+import chevronDownIcon from '../../assets/images/chevron-down.svg';
 import { t } from '../../i18n';
 
 const props = defineProps<{
@@ -68,23 +69,15 @@ const toggleGroup = (label: string) => {
               :aria-expanded="!isGroupCollapsed(group.label)"
               @click="toggleGroup(group.label)"
             >
-              <svg
+              <img
                 class="schema-version-history-panel__section-chevron"
                 :class="{ 'is-collapsed': isGroupCollapsed(group.label) }"
+                :src="chevronDownIcon"
+                alt=""
                 width="10"
                 height="10"
-                viewBox="0 0 10 10"
                 aria-hidden="true"
-              >
-                <path
-                  d="M2 3.5L5 6.5L8 3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
+              />
               <span class="schema-version-history-panel__section-label">{{ group.label }}</span>
             </button>
             <div
@@ -96,7 +89,7 @@ const toggleGroup = (label: string) => {
                 :key="entry.cardId"
                 type="button"
                 class="schema-version-history-panel__item"
-                :class="{ 'is-active': entry.isCurrent, 'is-pending': entry.isPending }"
+                :class="{ 'is-pending': entry.isPending }"
                 @click="actions.handleHistoryEntrySelect(entry)"
               >
                 <div class="schema-version-history-panel__item-main">
@@ -146,10 +139,6 @@ const toggleGroup = (label: string) => {
       }
     }
 
-    .schema-version-history-panel__section-chevron {
-      color: #8c8c8c;
-    }
-
     .schema-version-history-panel__item {
       color: #f0f0f0;
 
@@ -237,7 +226,6 @@ const toggleGroup = (label: string) => {
   &__section-chevron {
     flex-shrink: 0;
     display: block;
-    color: #8c8c8c;
     transition: transform 0.15s ease;
 
     &.is-collapsed {

sites/playground/web/src/components/genui-template/SchemaVersionHistoryPanel.vue

@@ -10,7 +10,6 @@ const props = defineProps<{
   itemProps: any;
   type: 'json-patch' | 'schema-card' | 'schema-manual';
   prevSchema: string;
-  errorMessagesMap: Map<string, string>;
 }>();
 
 const { isMobile } = useIsMobile();
@@ -49,7 +48,6 @@ const handleSchemaVersionCardClick = (cardId: string) => {
     v-else
     :key="itemProps?.cardId"
     :type="type"
-    :error-messages-map="errorMessagesMap"
     v-bind="schemaVersionCardProps"
     @card-select="handleSchemaVersionCardClick"
   />

sites/playground/web/src/components/genui-template/TemplateSchemaMessageRenderer.vue

@@ -13,8 +13,6 @@ export interface ISchemaCardMessageItem {
   cardId: string;
   generatedTime: string;
   schema: string;
-  id?: string;
-  state?: Record<string, any>;
   prevSchema: string;
 }
 
@@ -26,6 +24,7 @@ export interface IJsonPatchMessageItem {
   generatedTime: string;
   schema: string;
   prevSchema: string;
+  applyFailed?: boolean;
 }
 
 export type SchemaManualInputType = 'manual_edit_save' | 'user';

sites/playground/web/src/components/genui-template/chat.types.ts

@@ -4,6 +4,7 @@ import { useTemplateConversation } from './use-template-conversation';
 import {
   findLatestSchemaInConversation,
   resolveRenderableSchemaFromMessages,
+  backfillJsonPatchApplyFailedFlags,
 } from '../template-chat-utils';
 
 const currentSchema = shallowRef<any>(null);
@@ -12,7 +13,7 @@ const currentPreviewSchemaComplete = ref(true);
 const currentCardId = ref<string>('');
 
 export function useTemplateSchema() {
-  const { setTemplateSchema } = useTemplateConversation();
+  const { setTemplateSchema, saveConversations } = useTemplateConversation();
 
   function setCurrentPreviewSchema(schema: any, isComplete: boolean = true) {
     currentPreviewSchema.value = schema;
@@ -39,6 +40,9 @@ export function useTemplateSchema() {
     options: { clearIfMissing?: boolean } = {},
   ) {
     const { clearIfMissing = true } = options;
+    if (backfillJsonPatchApplyFailedFlags(messages)) {
+      saveConversations();
+    }
     const latestSchemaInfo = findLatestSchemaInConversation(messages);
 
     if (latestSchemaInfo) {

sites/playground/web/src/components/genui-template/composables/use-template-schema.ts

@@ -4,21 +4,20 @@ import {
   validateJsonPatch,
   PARSE_PARTIAL_JSON_STATE,
   applyJsonPatchOperations,
-  generateIdForComponents,
+  setJsonPatchApplyResult,
 } from '../template-chat-utils';
 import { clonePlainJson } from '../template-chat-utils/json-patch-format';
 import { stripSchemaFieldsWhileStreaming } from '../../../utils';
 import { useTemplateSchema } from './use-template-schema';
+import { useTemplateConversation } from './use-template-conversation';
 
-const errorMessagesMap = ref(new Map<string, string>());
 const lastPreviewSchema = ref<Record<string, unknown> | null>(null);
 
 async function schemaCardRenderer(props: {
   content: string;
   cardId: string;
 }) {
   const {
-    currentPreviewSchema,
     currentCardId,
     setCurrentPreviewSchema,
   } = useTemplateSchema();
@@ -41,13 +40,9 @@ async function schemaCardRenderer(props: {
     }
 
     const json = stripSchemaFieldsWhileStreaming(value as Record<string, unknown>, isCompleted);
-    const schemaWithId = generateIdForComponents(json, {
-      previousSchema: currentPreviewSchema.value,
-    });
-    setCurrentPreviewSchema(schemaWithId, isCompleted);
+    setCurrentPreviewSchema(json, isCompleted);
   } catch (error) {
     console.error('schemaCardRenderer error ===>', error);
-    errorMessagesMap.value.set(props.cardId, (error as Error).message);
   }
 }
 
@@ -69,9 +64,9 @@ async function jsonPatchRenderer(props: {
     currentSchema,
     currentPreviewSchema,
     currentCardId,
-    setCurrentSchema,
     setCurrentPreviewSchema,
   } = useTemplateSchema();
+  const { messages } = useTemplateConversation();
 
   try {
     const { content, cardId, newMessage } = props;
@@ -116,23 +111,19 @@ async function jsonPatchRenderer(props: {
       return;
     }
 
+    const isStreamComplete = isSuccessfulParse || lastOperationComplete;
     const targetSchema = applyJsonPatchOperations(patchBaseline, operations as never[]);
     if (!targetSchema) {
+      if (isStreamComplete) {
+        setJsonPatchApplyResult('failed', messages.value, cardId);
+      }
       return;
     }
 
-    const isStreamComplete = isSuccessfulParse || lastOperationComplete;
     const strippedSchema = stripSchemaFieldsWhileStreaming(targetSchema, isStreamComplete);
-
-    setCurrentPreviewSchema(
-      generateIdForComponents(strippedSchema, { previousSchema: currentPreviewSchema.value }),
-      isStreamComplete,
-    );
-    if (isStreamComplete) {
-      setCurrentSchema(targetSchema);
-    }
+    setCurrentPreviewSchema(strippedSchema, isStreamComplete);
   } catch (error) {
-    errorMessagesMap.value.set(props.cardId, (error as Error).message);
+    setJsonPatchApplyResult('failed', messages.value, props.cardId);
     console.error('jsonPatch error ===>', error);
   }
 }
@@ -159,7 +150,6 @@ function resetLastPreviewSchema(schema: Record<string, unknown> | null) {
 
 export function useTemplateStreamRender() {
   return {
-    errorMessagesMap,
     lastPreviewSchema,
     handleSchemaJsonChanged,
     resetLastPreviewSchema,

sites/playground/web/src/components/genui-template/composables/use-template-stream-render.ts

@@ -50,7 +50,6 @@ export function useTemplateVersionControl() {
 
   const allSchemaVersionHistoryEntries = computed(() =>
     collectSchemaVersionHistory(messages.value, {
-      currentCardId: currentCardId.value,
       latestCardId: latestSchemaCardId.value,
     }),
   );