fix: implement edit of steeres messages (only loaded from backend)

AdminForth/1786/ability-to-edit-agent-prompt-a

Author: yaroslav8765

custom/ChatFooter.vue

@@ -215,9 +215,11 @@ async function sendMessage() {
   // While editing a message, the same send action commits the edit (regenerating
   // from that turn) instead of starting/steering a turn.
   if (agentStore.isEditingMessage) {
-    await agentStore.submitEditMessage();
-    autoResize();
-    props.conversationAreaRef?.handleSendMessage();
+    const editSubmitted = await agentStore.submitEditMessage();
+    if (editSubmitted) {
+      autoResize();
+      props.conversationAreaRef?.handleSendMessage();
+    }
     return;
   }
   // Routes to a steer (folded into the running turn) while generating, or a normal

custom/composables/agentStore/useAgentChat.ts

@@ -100,12 +100,14 @@ export function createAgentChatManager({
     }
     for (let i = messages.length - 1; i >= 0; i--) {
       const message = messages[i];
-      if (message.role === 'user' && !message.metadata?.steer) {
+      if (message.role === 'user') {
         messages.splice(i, 1, {
           ...message,
           metadata: { ...(message.metadata ?? {}), turnId },
         });
-        return;
+        if (!message.metadata?.steer) {
+          return;
+        }
       }
     }
   }
@@ -310,10 +312,6 @@ export function createAgentChatManager({
     if (!chat) {
       return;
     }
-    const currentMessage = chat.messages.find((m: any) => m.id === messageId);
-    if (!currentMessage || currentMessage.parts[0].text.trim() === text.trim()) {
-      return;
-    }
     await stopActiveTurnAndWaitForIdle();
     editingTurnId.value = turnId;
     lastMessage.value = text;

custom/composables/agentStore/useAgentSteerQueue.ts

@@ -55,6 +55,7 @@ export function createAgentSteerQueue({
       return;
     }
     const steerMessage: IMessage = {
+      id: crypto.randomUUID(),
       role: 'user',
       metadata: { steer: true },
       parts: [{ type: 'text', text, state: 'done' }],

custom/composables/useAgentStore.ts

@@ -19,6 +19,7 @@ import { createAgentChatManager } from './agentStore/useAgentChat';
 import { createAgentPlaceholderController } from './agentStore/useAgentPlaceholder';
 import { createAgentSessionManager } from './agentStore/useAgentSessions';
 import { createAgentSteerQueue } from './agentStore/useAgentSteerQueue';
+import { STEER_PERSIST_PREFIX } from './agentStore/constants';
 
 export const useAgentStore = defineStore('agent', () => {
   const agentTransitions = useAgentTransitions();
@@ -465,6 +466,19 @@ export const useAgentStore = defineStore('agent', () => {
     editingEnabled.value = enabled;
   }
 
+
+  function getCompiledMessageTextWithSteeredParts(message: any): string {
+    const currentTurnUserMessages = currentChat.value?.messages.filter((msg: any) => msg.metadata?.turnId === message?.metadata?.turnId && msg.role === 'user');
+    let messageToCompile = '';
+    for(const msg of currentTurnUserMessages) {
+      const text = (msg.parts ?? [])
+        .filter((part: any) => part.type === 'text')
+        .map((part: any) => part.text ?? '')
+        .join('');
+      messageToCompile += text + ' ';
+    }
+    return messageToCompile.trim();
+  }
   // Enter edit mode for a user message: stash the current input, then load the
   // message's text into the textarea for the user to amend. Allowed mid-generation —
   // committing the edit stops the running turn (see submitEditMessage).
@@ -480,10 +494,7 @@ export const useAgentStore = defineStore('agent', () => {
     if (editingMessageId.value === null) {
       savedUserInput.value = userMessageInput.value ?? '';
     }
-    const text = (message.parts ?? [])
-      .filter((part: any) => part.type === 'text')
-      .map((part: any) => part.text ?? '')
-      .join('');
+    const text = getCompiledMessageTextWithSteeredParts(message);
     editingMessageId.value = messageId;
     editingMessageTurnId.value = turnId;
     userMessageInput.value = text;
@@ -506,20 +517,25 @@ export const useAgentStore = defineStore('agent', () => {
     nextTick(() => focusTextInput());
   }
 
-  async function submitEditMessage() {
+  async function submitEditMessage(): Promise<boolean> {
     if (editingMessageId.value === null) {
-      return;
+      return false;
     }
     const text = trimmedUserMessage.value;
     if (!text) {
-      return;
+      return false;
     }
     const messageId = editingMessageId.value;
     const turnId = editingMessageTurnId.value!;
     steerBuffer.clear();
     // Restore the stashed input and leave edit mode before the regeneration streams in.
     exitEditMode();
+    const lastMessageText = getCompiledMessageTextWithSteeredParts(currentChat.value?.messages.find((m: any) => m.id === messageId));
+    if (lastMessageText.trim() === text.trim()) {
+      return false;
+    }
     await sendEditMessage({ messageId, turnId, text });
+    return true;
   }
 
   function resolveInternalRoute(href: string): string | null {
@@ -612,6 +628,7 @@ export const useAgentStore = defineStore('agent', () => {
     setEditingEnabled,
     isEditingMessage,
     editingMessageId,
+    editingMessageTurnId,
     startEditMessage,
     cancelEditMessage,
     submitEditMessage,

custom/conversation_area/MessageRenderer.vue

@@ -41,7 +41,7 @@
         </div>
       </Transition>
     <div
-      v-if="message.role === 'user' && message.metadata?.steer"
+      v-if="message.role === 'user' && message.metadata?.steer && !isBeingEditedTurn"
       class="self-end mr-4 mb-0.5 text-xs italic text-gray-400 dark:text-gray-500"
     >
       {{ $t('Steering instruction') }}
@@ -55,10 +55,10 @@
       :key="part.type"
     >
       <TextRenderer
-        v-if="part.type === 'text' && !checkIfMessageSystemMessage(part.text ?? '')"
-        :message="part.text"
+        v-if="part.type === 'text' && !checkIfMessageSystemMessage(part.text ?? '') && shouldBeShownWhileEditing"
+        :message="isBeingEditedMessage ? agentStore.userMessageInput : part.text"
         :role="props.message.role"
-        :highlight="isBeingEdited"
+        :editMode="isBeingEditedMessage"
         :state="part.state ?? (props.message.role === 'user' ? 'done' : undefined)"
       />
       <ToolApprovalRenderer
@@ -105,15 +105,27 @@
   const canEdit = computed(() =>
     agentStore.editingEnabled
     && props.message.role === 'user'
-    && !props.message.metadata?.steer
+    // && !props.message.metadata?.steer
     && Boolean(props.message.metadata?.turnId)
     && !agentStore.isEditingMessage
   );
 
-  const isBeingEdited = computed(() =>
+  const isBeingEditedMessage = computed(() =>
     Boolean(props.message.id) && props.message.id === agentStore.editingMessageId
   );
 
+  const isBeingEditedTurn = computed(() =>
+    Boolean(agentStore.editingMessageTurnId && props.message?.metadata?.turnId === agentStore.editingMessageTurnId)
+  );
+
+  const isUserMessage = computed(() => props.message.role === 'user');
+
+  // While editing, hide only the *other* user messages of the edited turn (its steer
+  // sub-messages); the edited message itself and all non-user parts stay visible.
+  const shouldBeShownWhileEditing = computed(() =>
+    !(isBeingEditedTurn.value && isUserMessage.value && !isBeingEditedMessage.value)
+  );
+
   function checkIfMessageSystemMessage(message: IMessage): boolean {
     const isReserved = Object.values(RESERVED_SYSTEM_MESSAGE_CONTENT).includes(message as RESERVED_SYSTEM_MESSAGE_CONTENT);
     return isReserved;

custom/conversation_area/TextRenderer.vue

@@ -6,7 +6,7 @@
       hasVegaLite ? 'w-full my-2' : 'm-2',
       props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4' 
         : 'border-none self-start max-w-full',
-      props.highlight ? 'ring-2 ring-lightPrimary dark:ring-darkPrimary w-full max-w-[calc(100%-2rem)]' : ''
+      props.editMode ? 'ring-2 ring-lightPrimary dark:ring-darkPrimary w-full max-w-[calc(100%-2rem)]' : ''
     ]"
   >
     <IncremarkContent
@@ -36,7 +36,7 @@
     message: string | undefined,
     state: string | undefined,
     role: IMessage['role'],
-    highlight?: boolean
+    editMode?: boolean
   }>();
 
   const emit = defineEmits(['toggle-thoughts']);