feat: dublicate text input on message itstelf on message edit

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

Author: yaroslav8765

custom/ChatFooter.vue

@@ -80,24 +80,11 @@
       />
       <template v-if="!agentStore.isAudioChatMode">
         <template v-if="agentStore.isEditingMessage">
-          <div class="flex items-center gap-3">
-            <Button
-              variant="secondary"
-              class="!p-0 h-7 w-7 mr-1 bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
-              title="Cancel edit"
-              @click="cancelEdit"
-            >
-              <IconCloseOutline class="w-5 h-5" />
-            </Button>
-            <Button
-              class="!p-0 h-7 w-7"
-              title="Send edited message"
-              @click="sendMessage"
-              :disabled="!agentStore.trimmedUserMessage"
-            >
-              <IconCheckOutline class="w-6 h-6 text-white" />
-            </Button>
-          </div>
+          <EditActionButtons
+            :confirm-disabled="!agentStore.trimmedUserMessage"
+            @cancel="cancelEdit"
+            @confirm="sendMessage"
+          />
         </template>
         <template v-else>
           <Button
@@ -128,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { IconArrowUpOutline, IconAngleDownOutline, IconCloseOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconArrowUpOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
 import { useTemplateRef, onMounted, ref, onUnmounted, watch, computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import { useAgentStore } from './composables/useAgentStore';
@@ -139,6 +126,7 @@ import { remToPx } from './utils';
 import MicrophoneButton from './speech_recognition_frontend/MicrophoneButon.vue';
 import SteerQueue from './SteerQueue.vue';
 import SteerDebugPanel from './SteerDebugPanel.vue';
+import EditActionButtons from './EditActionButtons.vue';
 
 const props = defineProps<{
   meta: {

custom/EditActionButtons.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex items-center gap-3">
+    <Button
+      variant="secondary"
+      class="!p-0 h-7 w-7 mr-1 bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
+      title="Cancel edit"
+      @click="emit('cancel')"
+    >
+      <IconCloseOutline class="w-5 h-5" />
+    </Button>
+    <Button
+      class="!p-0 h-7 w-7"
+      title="Send edited message"
+      :disabled="confirmDisabled"
+      @click="emit('confirm')"
+    >
+      <IconCheckOutline class="w-6 h-6 text-white" />
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconCloseOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { Button } from '@/afcl';
+
+defineProps<{
+  confirmDisabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'cancel'): void;
+  (e: 'confirm'): void;
+}>();
+</script>

custom/conversation_area/TextRenderer.vue

@@ -4,14 +4,14 @@
     @click="handleMarkdownLinkClick"
     :class="[
       hasVegaLite ? 'w-full my-2' : 'm-2',
-      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4' 
+      props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end max-w-[80%] mr-4'
         : 'border-none self-start max-w-full',
-      props.editMode ? '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)] flex-col items-stretch py-3' : ''
     ]"
   >
     <IncremarkContent
       class="text-wrap break-words w-full max-w-full"
-      v-if="content"
+      v-if="content && !props.editMode"
       :key="renderNonce"
       :content="content"
       :is-finished="isFinished"
@@ -21,6 +21,18 @@
     <!-- <p v-else class="text-red-500 py-2">
       {{ $t('No content to render') }}
     </p> -->
+    <template v-if="props.editMode">
+      <textarea
+        v-model="agentStore.userMessageInput"
+        class="w-full min-h-24 resize-y bg-transparent text-sm text-gray-900 dark:text-gray-100 border-none focus:outline-none focus:ring-0 p-0"
+      />
+      <EditActionButtons
+        class="mt-2 self-end"
+        :confirm-disabled="!agentStore.trimmedUserMessage"
+        @cancel="agentStore.cancelEditMessage"
+        @confirm="agentStore.submitEditMessage"
+      />
+    </template>
   </div>
 </template>
 
@@ -31,6 +43,7 @@
   import { useAgentStore } from '../composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
   import type { IMessage } from '../types';
+  import EditActionButtons from '../EditActionButtons.vue';
 
   const props = defineProps<{
     message: string | undefined,