@adminforth/agent 2.9.1 → 3.0.0

package/README.md

@@ -424,6 +424,10 @@ approval interrupt: generation pauses and the UI shows an approve/reject prompt.
 resolves it via `POST /agent/approval`, and the run resumes (or, on reject, the model is
 told the action was declined).
 
+The prompt names the resource and columns by their labels and lists every value the tool
+would write; for `update_record` each field shows its current value next to the new one.
+Values of `masked` and `backendOnly` columns are never shown.
+
 Where the pending approval lives depends on your setup: with `checkpointResource` configured
 the LangGraph checkpoint is authoritative, so a resume survives a restart and works across
 instances; with the in-memory fallback the state is held per process instance.

package/dist/application/runTurnUseCase.d.ts

@@ -3,6 +3,7 @@ import type { AgentSessionStore } from "../persistence/sessionStore.js";
 import type { SteerBuffer } from "../domain/steerBuffer.js";
 import type { PluginOptions } from "../types.js";
 import type { LlmPort } from "./ports.js";
+import { type ApprovalDescription } from "../tools/approvalFormatter.js";
 import type { BaseAgentTurnInput, DebugSink, HandleTurnInput, HandleEditTurnInput, PendingInterrupt, RunAndPersistAgentResponseInput, RunAndPersistAgentResponseResult } from "../domain/turnTypes.js";
 /**
  * Build the provider-agnostic resume payload for a human-in-the-loop turn.
@@ -78,7 +79,7 @@ export declare class RunTurnUseCase {
      * page reload would otherwise leave the user with no way to answer it. Empty when
      * nothing is pending.
      */
-    getPendingApprovals(sessionId: string, modeName?: string | null): Promise<string[]>;
+    getPendingApprovals(sessionId: string, modeName?: string | null): Promise<ApprovalDescription[]>;
     private requiresSessionOwnership;
     /** Verify the session exists and belongs to the requesting admin user. */
     assertSessionOwnership(sessionId: string, adminUser: BaseAgentTurnInput["adminUser"]): Promise<void>;

package/dist/application/runTurnUseCase.js

@@ -125,9 +125,9 @@ export class RunTurnUseCase {
     /** Describe pending tool calls in plain language an admin (not a developer) can act on. */
     describeApprovals(interrupts) {
         const adminforth = this.deps.getAdminforth();
-        return interrupts
+        return Promise.all(interrupts
             .flatMap((interrupt) => interrupt.requests)
-            .map((request) => formatApprovalRequest(adminforth, request));
+            .map((request) => formatApprovalRequest(adminforth, request)));
     }
     /**
      * Describe what a session is still waiting for approval on, so a client that (re)loads
@@ -322,7 +322,7 @@ export class RunTurnUseCase {
                 type: "interrupt",
                 sessionId: prepared.sessionId,
                 interrupt,
-                approvals: this.describeApprovals(descriptors),
+                approvals: yield this.describeApprovals(descriptors),
             }));
         });
     }

package/dist/custom/ChatFooter.vue

@@ -1,17 +1,19 @@
 <template>
   <div
-    ref="promptInput" 
-    class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
-    :style="{ 
+    ref="promptInput"
+    class="w-full mb-3 px-3 relative translate-x-[-50%] left-1/2"
+    :style="{
       maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
       transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
-    }"            
+    }"
   >
     <SteerQueue />
-    <!-- <SteerDebugPanel /> -->
     <div
-      class="w-full border rounded-lg flex flex-col"
-      :class="agentStore.isAudioChatMode ? 'border-none mt-8' : 'border dark:bg-gray-700'"
+      class="af-agent-composer w-full flex flex-col rounded-xl border transition-colors duration-150
+        border-lightInputBorder bg-lightInputBackground hover:border-lightInputBorderHover
+        focus-within:border-lightInputFocusBorder focus-within:ring-[3px] focus-within:ring-lightInputFocusRing
+        dark:border-darkInputBorder dark:bg-darkInputBackground dark:hover:border-darkInputBorderHover
+        dark:focus-within:border-darkInputFocusBorder dark:focus-within:ring-darkInputFocusRing"
     >
       <textarea
         v-if="!agentStore.isAudioChatMode"
@@ -20,112 +22,106 @@
         rows="1"
         @input="autoResize"
         :class="[
-          'h-8 px-4 py-3 rounded-xl rounded-b-none w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+          `block w-full px-3 pt-2.5 pb-1 resize-none overflow-hidden bg-transparent border-none text-sm leading-[22px]
+            focus:outline-none focus:ring-0
+            text-lightInputText placeholder:text-lightInputPlaceholderText dark:text-darkInputText dark:placeholder:text-darkInputPlaceholderText`,
           { '!text-base': coreStore.isIos }
         ]"
         :placeholder="placeholderText"
         @keydown.enter.exact.prevent="sendMessage"
         @keydown.esc="onEscape"
       />
-      <div class="flex items-center justify-between px-2 py-1">
+      <!-- in audio chat mode the voice button is centered between the mode picker and an empty column -->
       <div
-        v-if="agentStore.availableModes.length > 1"
-        ref="modeMenu"
-        class="relative"
+        class="items-center gap-1 px-2 pb-2"
+        :class="agentStore.isAudioChatMode ? 'grid grid-cols-[1fr_auto_1fr] pt-2' : 'flex pt-1'"
       >
-        <button
-          aria-label="Select mode"
-          class="flex px-2 py-1 items-center text-sm justify-center 
-            rounded-md bg-white text-lightListTableHeadingText 
-            transition-colors duration-200 hover:bg-gray-100 
-            dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
-          :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
-          title="Select mode"
-          type="button"
-          @click="toggleModeMenu"
+        <DropdownMenu
+          v-if="agentStore.availableModes.length > 1"
+          v-model:open="isModeMenuOpen"
+          class="af-agent-mode-menu justify-self-start"
+          teleportToBody
         >
-          {{ agentStore.activeModeName }}
-          <IconAngleDownOutline 
-            class="w-4 h-4 ml-1 transition-transform duration-200" 
-            :class="isModeMenuOpen ? '!rotate-180' : '!rotate-0'"
-          />
-        </button>
-          <Transition
-            enter-active-class="transition ease-out duration-200"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-150"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-          >
-          <div
-            v-if="isModeMenuOpen"
-            class="absolute z-20 bottom-full left-0 mb-2 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
-          >
-            <button
-              v-for="mode in agentStore.availableModes"
-              :key="mode.name"
-              class="block w-full px-3 py-2 text-left text-sm text-lightInputText transition-colors duration-150 hover:bg-gray-100 dark:text-darkInputText dark:hover:bg-gray-700"
-              :class="mode.name === agentStore.activeModeName ? 'bg-gray-100 dark:bg-gray-700' : ''"
+          <template #trigger="{ open }">
+            <Button
+              variant="ghost"
+              size="sm"
               type="button"
-              @click="selectMode(mode.name)"
+              :class="open && 'bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText'"
+              :aria-label="$t('Select mode')"
+              :aria-expanded="open"
+              :title="$t('Select mode')"
             >
-              {{ mode.name }}
-            </button>
-          </div>
-        </Transition>
-      </div>
-      <div v-if="props.meta.hasAudioAdapter" v-show="!agentStore.isEditingMessage" class="contents">
-        <MicrophoneButton />
-      </div>
-      <template v-if="!agentStore.isAudioChatMode">
-        <template v-if="agentStore.isEditingMessage">
-          <EditActionButtons
-            :confirm-disabled="!agentStore.trimmedUserMessage"
-            @cancel="cancelEdit"
-            @confirm="sendMessage"
-          />
-        </template>
-        <template v-else>
-          <Button
-            v-if="!agentStore.isResponseInProgress"
-            class=" !p-0 h-7 w-7 transition-opacity duration-200"
-            @click="sendMessage"
-            :disabled="!agentStore.trimmedUserMessage"
+              <IconSparkles class="w-4 h-4" />
+              {{ agentStore.activeModeName }}
+              <IconChevronDown class="w-3.5 h-3.5 transition-transform duration-200" :class="open && 'rotate-180'" />
+            </Button>
+          </template>
+          <DropdownMenuItem
+            v-for="mode in agentStore.availableModes"
+            :key="mode.name"
+            @click="agentStore.setActiveMode(mode.name)"
           >
-            <IconArrowUpOutline
-              class="w-6 h-6
-                text-white"
-            />
-          </Button>
-          <Button
-            v-else
-            class="right-4 bottom-2 !p-0 h-7 w-7"
-            @click="stopCurrentRequest"
-          >
-            <div
-              class="w-2.5 h-2.5 bg-white rounded-sm"
+            {{ mode.name }}
+            <template v-if="mode.name === agentStore.activeModeName" #suffix>
+              <IconCheck class="w-4 h-4 text-lightPrimary dark:text-darkPrimary" />
+            </template>
+          </DropdownMenuItem>
+        </DropdownMenu>
+        <div
+          class="ml-auto flex items-center gap-1"
+          :class="agentStore.isAudioChatMode ? 'col-start-2' : ''"
+        >
+          <div v-if="props.meta.hasAudioAdapter" v-show="!agentStore.isEditingMessage" class="contents">
+            <MicrophoneButton />
+          </div>
+          <template v-if="!agentStore.isAudioChatMode">
+            <EditActionButtons
+              v-if="agentStore.isEditingMessage"
+              :confirm-disabled="!agentStore.trimmedUserMessage"
+              @cancel="cancelEdit"
+              @confirm="sendMessage"
             />
-          </Button>
-        </template>
-      </template>
+            <Button
+              v-else-if="!agentStore.isResponseInProgress"
+              type="button"
+              iconOnly
+              class="rounded-full"
+              :disabled="!agentStore.trimmedUserMessage"
+              :title="$t('Send message')"
+              :aria-label="$t('Send message')"
+              @click="sendMessage"
+            >
+              <IconArrowUp />
+            </Button>
+            <Button
+              v-else
+              type="button"
+              iconOnly
+              class="rounded-full"
+              :title="$t('Stop')"
+              :aria-label="$t('Stop')"
+              @click="stopCurrentRequest"
+            >
+              <span class="w-2.5 h-2.5 rounded-sm bg-current" />
+            </Button>
+          </template>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { IconArrowUpOutline, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
-import { useTemplateRef, onMounted, ref, onUnmounted, watch, computed } from 'vue';
-import { onClickOutside } from '@vueuse/core'
+import { IconArrowUp, IconCheck, IconChevronDown, IconSparkles } from '@iconify-prerendered/vue-lucide';
+import { useTemplateRef, onMounted, ref, watch, computed } from 'vue';
+import { Button, DropdownMenu, DropdownMenuItem } from '@/afcl';
 import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
-import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
 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<{
@@ -144,7 +140,6 @@ const props = defineProps<{
 }>();
 
 const textInput = useTemplateRef('textInput');
-const modeMenu = useTemplateRef('modeMenu');
 const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
@@ -157,20 +152,21 @@ const placeholderText = computed(() => {
   return agentStore.userMessagePlaceholder;
 });
 
-onClickOutside(modeMenu as any, () => { isModeMenuOpen.value = false; });
-
 onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.setCurrentGenerationModeFromLocalStorage();
   agentStore.setEditingEnabled(props.meta.editingEnabled);
-  agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
   autoResize();
 });
 
-watch(() => textInput.value?.value, () => {
-  autoResize();
-});
+// The textarea is re-created after leaving audio chat mode; keep the store pointing at the
+// live element, otherwise focusTextInput() targets a detached one and does nothing.
+watch(textInput, (el) => agentStore.regisrerTextInput(el), { immediate: true, flush: 'post' });
+
+// Re-measure whenever the text changes programmatically (suggestion picked, edit restored)
+// or the textarea is re-mounted after leaving audio chat mode.
+watch([() => agentStore.userMessageInput, textInput], autoResize, { flush: 'post' });
 
 function autoResize() {
   const el = textInput.value
@@ -188,15 +184,6 @@ function autoResize() {
   }
 }
 
-function toggleModeMenu() {
-  isModeMenuOpen.value = !isModeMenuOpen.value;
-}
-
-function selectMode(modeName: string) {
-  agentStore.setActiveMode(modeName);
-  isModeMenuOpen.value = false;
-}
-
 async function sendMessage() {
   if (agentStore.isAudioChatMode) return;
   isModeMenuOpen.value = false;

package/dist/custom/ChatHeader.vue

@@ -1,78 +1,79 @@
 <template>
-  <div 
+  <div
     ref="headerRef"
-    class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
+    class="af-agent-header flex items-center gap-0.5 h-12 px-2 border-b border-lightNavbarBorder dark:border-darkNavbarBorder"
   >
-    <div 
-      class="flex items-center"
+    <Button
+      variant="ghost"
+      iconOnly
+      :class="agentStore.isSessionHistoryOpen && PRESSED_CLASSES"
+      :aria-pressed="agentStore.isSessionHistoryOpen"
+      :aria-label="$t('Chat history')"
+      :title="$t('Chat history')"
+      @click="agentStore.setSessionHistoryOpen(!agentStore.isSessionHistoryOpen)"
     >
-      <IconBarsOutline 
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 "
-        :class="agentStore.isSessionHistoryOpen ? 
-          'bg-lightNavbarIcons/20 text-lightNavbarIcons/80 dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80' : 
-          ''" 
-        @click="agentStore.setSessionHistoryOpen(!agentStore.isSessionHistoryOpen)" 
-      />
-      <IconOpenSidebarSolid 
-        v-if="!agentStore.isTeleportedToBody && !coreStore.isMobile && !agentStore.isFullScreen"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsTeleportedToBody(true)" 
-      />
-      <IconCloseSidebarSolid 
-        v-else-if="!coreStore.isMobile && !agentStore.isFullScreen"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 bg-lightNavbarIcons/20 
-          dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80 hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsTeleportedToBody(false)" 
-      />
-      <IconArrowsPointingOut 
-        v-if="!agentStore.isFullScreen && !coreStore.isMobile"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setFullScreen(true)" 
-      />
-      <IconArrowsPointingIn 
-        v-else-if="!coreStore.isMobile"
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 "
-        :class="agentStore.isFullScreen ? 
-          'bg-lightNavbarIcons/20 text-lightNavbarIcons/80 dark:bg-darkNavbarIcons/20 dark:text-darkNavbarIcons/80' : 
-          ''" 
-        @click="agentStore.setFullScreen(false)" 
-      />
-    </div>
-    <div class="flex items-center justify-center">
-      <Button 
-        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
-        class="!py-1 !px-2 max-w-64 mr-2"
-      >
-        <IconPlusOutline class="w-5 h-5" />
-        {{ $t('New chat') }}
-      </Button>
-      <IconCloseOutline 
-        class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
-          text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
-          dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-        @click="agentStore.setIsChatOpen(false)" 
-      />
-    </div>
+      <IconHistory />
+    </Button>
+    <Button
+      v-if="!coreStore.isMobile && !agentStore.isFullScreen"
+      variant="ghost"
+      iconOnly
+      :class="agentStore.isTeleportedToBody && PRESSED_CLASSES"
+      :aria-pressed="agentStore.isTeleportedToBody"
+      :aria-label="$t('Dock to the side')"
+      :title="$t('Dock to the side')"
+      @click="agentStore.setIsTeleportedToBody(!agentStore.isTeleportedToBody)"
+    >
+      <IconPanelRight />
+    </Button>
+    <Button
+      v-if="!coreStore.isMobile"
+      variant="ghost"
+      iconOnly
+      :aria-label="agentStore.isFullScreen ? $t('Exit full screen') : $t('Full screen')"
+      :title="agentStore.isFullScreen ? $t('Exit full screen') : $t('Full screen')"
+      @click="agentStore.setFullScreen(!agentStore.isFullScreen)"
+    >
+      <IconMinimize2 v-if="agentStore.isFullScreen" />
+      <IconMaximize2 v-else />
+    </Button>
+    <p class="flex-1 min-w-0 truncate px-1 text-[13px] font-semibold text-lightNavbarText dark:text-darkNavbarText">
+      {{ isNewChat ? $t('New chat') : agentStore.currentSession.title }}
+    </p>
+    <Button
+      variant="secondary"
+      class="shrink-0"
+      @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();"
+    >
+      <IconPlus class="w-4 h-4" />
+      {{ $t('New chat') }}
+    </Button>
+    <Button
+      variant="ghost"
+      iconOnly
+      :aria-label="$t('Close')"
+      :title="$t('Close')"
+      @click="agentStore.setIsChatOpen(false)"
+    >
+      <IconX />
+    </Button>
   </div>
 </template>
 
 
 <script setup>
-  import { IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
-  import { IconCloseOutline, IconBarsOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import { computed } from 'vue';
+  import { IconHistory, IconMaximize2, IconMinimize2, IconPanelRight, IconPlus, IconX } from '@iconify-prerendered/vue-lucide';
   import { useAgentStore } from './composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
   import { Button } from '@/afcl';
+  import { PRE_SESSION_ID } from './composables/agentStore/constants';
+
+  // a toggle in the on state, same fill as the hover of a ghost button
+  const PRESSED_CLASSES = 'bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText';
 
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
+
+  const isNewChat = computed(() => !agentStore.currentSession || agentStore.currentSession.sessionId === PRE_SESSION_ID);
 </script>

package/dist/custom/ChatSurface.vue

@@ -1,28 +1,20 @@
 <template>
-  <div 
-    class="relative w-6 h-6 cursor-pointer mr-1 mt-1
-      text-lightNavbarIcons hover:text-lightNavbarIcons/80 
-      dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80
-      hover:scale-110 transition-colors duration-200"       
+  <Button
+    variant="secondary"
+    :class="{ 'bg-lightButtonGroupActiveBackground hover:bg-lightButtonGroupActiveBackground dark:bg-darkButtonGroupActiveBackground dark:hover:bg-darkButtonGroupActiveBackground': agentStore.isChatOpen }"
+    :aria-expanded="agentStore.isChatOpen"
     @click="agentStore.setIsChatOpen(!agentStore.isChatOpen)"
   >
-    <IconChatBubbleLeft20Solid 
-      class="w-6 h-6" 
-    />
-    <div class="absolute w-4 h-4 bg-lightNavbar dark:bg-darkNavbar rounded-full -top-1 -right-2">
-      <IconSparklesSolid 
-        class="w-4 h-4"
-      />
-    </div>
-  </div>
+    <IconBot class="w-4 h-4" />
+    {{ $t('Agent') }}
+  </Button>
 
   <Teleport to="body">
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
-      class="fixed bg-lightNavbar dark:bg-darkNavbar top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
-            flex flex z-40 h-screen"
-      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
+      class="fixed top-0 right-0 z-40 flex h-screen border-l border-lightNavbarBorder bg-lightNavbar dark:border-darkNavbarBorder dark:bg-darkNavbar"
+      :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-popover dark:shadow-darkPopover' : '']"
       :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
@@ -58,7 +50,8 @@
 </template>
 
 <script setup lang="ts">
-import { IconChatBubbleLeft20Solid, IconSparklesSolid } from '@iconify-prerendered/vue-heroicons';
+import { IconBot } from '@iconify-prerendered/vue-lucide';
+import { Button } from '@/afcl';
 import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './conversation_area/ConversationArea.vue';

package/dist/custom/EditActionButtons.vue

@@ -1,26 +1,30 @@
 <template>
-  <div class="flex items-center gap-3">
+  <div class="flex items-center gap-2">
     <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"
+      size="sm"
+      iconOnly
+      :title="$t('Cancel edit')"
+      :aria-label="$t('Cancel edit')"
       @click="emit('cancel')"
     >
-      <IconCloseOutline class="w-5 h-5" />
+      <IconX />
     </Button>
     <Button
-      class="!p-0 h-7 w-7"
-      title="Send edited message"
+      size="sm"
+      iconOnly
+      :title="$t('Send edited message')"
+      :aria-label="$t('Send edited message')"
       :disabled="confirmDisabled"
       @click="emit('confirm')"
     >
-      <IconCheckOutline class="w-6 h-6 text-white" />
+      <IconCheck />
     </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { IconCloseOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCheck, IconX } from '@iconify-prerendered/vue-lucide';
 import { Button } from '@/afcl';
 
 defineProps<{