@adminforth/agent 2.3.3 → 2.4.1

package/dist/custom/ChatFooter.vue

@@ -25,6 +25,7 @@
         ]"
         :placeholder="placeholderText"
         @keydown.enter.exact.prevent="sendMessage"
+        @keydown.esc="onEscape"
       />
       <div class="flex items-center justify-between px-2 py-1">
       <div
@@ -74,30 +75,16 @@
           </div>
         </Transition>
       </div>
-      <MicrophoneButton 
-        v-if="props.meta.hasAudioAdapter"
-        v-show="!agentStore.isEditingMessage"   
-      />
+      <div v-if="props.meta.hasAudioAdapter" v-show="!agentStore.isEditingMessage" class="contents">
+        <MicrophoneButton />
+      </div>
       <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: {
@@ -234,6 +222,16 @@ function cancelEdit() {
   autoResize();
 }
 
+// Esc discards an in-progress message edit; when not editing it does nothing so the
+// keystroke keeps its default textarea behaviour.
+function onEscape(event: KeyboardEvent) {
+  if (!agentStore.isEditingMessage) {
+    return;
+  }
+  event.preventDefault();
+  cancelEdit();
+}
+
 function stopCurrentRequest() {
   agentStore.abortCurrentChatRequestAndAddSystemMessage();
 }

package/dist/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>

package/dist/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,19 @@
     <!-- <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"
+        @keydown.esc.prevent="agentStore.cancelEditMessage"
+      />
+      <EditActionButtons
+        class="mt-2 self-end"
+        :confirm-disabled="!agentStore.trimmedUserMessage"
+        @cancel="agentStore.cancelEditMessage"
+        @confirm="agentStore.submitEditMessage"
+      />
+    </template>
   </div>
 </template>
 
@@ -31,6 +44,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/agent",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",