@adminforth/agent 2.9.1 → 3.0.0

package/dist/custom/conversation_area/ToolApprovalRenderer.vue

@@ -1,79 +1,112 @@
 <template>
-  <div class="mx-4 my-3 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-lg border border-lightPrimary/30 bg-lightNavbar p-4 text-lightListTableHeadingText shadow-sm dark:border-darkPrimary/40 dark:bg-darkNavbar dark:text-darkListTableHeadingText">
-    <div class="flex items-start gap-3">
-      <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/15 dark:text-darkPrimary">
-        <IconExclamationCircleOutline class="h-5 w-5" />
-      </div>
+  <div
+    class="af-agent-approval mx-4 my-2 max-w-[min(34rem,calc(100%-2rem))] z-20 rounded-lg border p-3.5"
+    :class="isAwaitingDecision
+      ? 'border-lightWarningBorder bg-lightWarningSoft dark:border-darkWarningBorder dark:bg-darkWarningSoft'
+      : 'border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground'"
+  >
+    <div class="flex items-start gap-2.5">
+      <IconShieldAlert
+        class="mt-0.5 h-4 w-4 shrink-0"
+        :class="isAwaitingDecision ? 'text-lightWarning dark:text-darkWarning' : 'text-lightInputIconColor dark:text-darkInputIconColor'"
+      />
       <div class="min-w-0 flex-1">
-        <h3 class="text-sm font-semibold leading-5">{{ $t('Approval required') }}</h3>
-        <p class="mt-1 text-sm leading-5 text-lightListTableText dark:text-darkListTableText">
+        <h3 class="text-sm font-semibold leading-5 text-lightCardTitle dark:text-darkCardTitle">{{ $t('Approval needed') }}</h3>
+        <p class="text-[0.8125rem] leading-5 text-lightCardDescription dark:text-darkCardDescription">
           {{ $t('Review what the agent is about to do before continuing.') }}
         </p>
-        <ul
-          v-if="data.messages?.length"
-          class="mt-3 space-y-1 text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText"
+      </div>
+    </div>
+    <ul
+      class="mt-3 divide-y rounded-default border text-[0.8125rem] leading-5
+        divide-lightCardBorder border-lightCardBorder bg-lightCardBackground text-lightTableText
+        dark:divide-darkCardBorder dark:border-darkCardBorder dark:bg-darkCardBackground dark:text-darkTableText"
+    >
+      <li
+        v-for="(approval, approvalIndex) in data.approvals"
+        :key="approvalIndex"
+        class="px-3 py-2.5"
+      >
+        <p class="font-medium [overflow-wrap:anywhere]">{{ approval.summary }}</p>
+        <dl
+          v-if="approval.fields.length"
+          class="mt-2 grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1.5"
         >
-          <li
-            v-for="message in data.messages"
-            :key="message"
-            class="flex gap-2"
-          >
-            <span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-lightListTableHeadingText dark:bg-darkListTableHeadingText" />
-            <span class="min-w-0 whitespace-pre-line break-words">{{ message }}</span>
-          </li>
-        </ul>
-        <div class="mt-4 flex flex-wrap gap-2">
-          <template v-if="data.status === 'pending'">
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightButtonsBorder bg-lightButtonsBackground px-3 text-sm font-medium text-lightButtonsText transition hover:bg-lightButtonsHover dark:border-darkButtonsBorder dark:bg-darkButtonsBackground dark:text-darkButtonsText dark:hover:bg-darkButtonsHover"
-              @click="submit('approve')"
-            >
-              <IconCheckOutline class="h-4 w-4" />
-              {{ $t('Approve') }}
-            </button>
-            <button
-              type="button"
-              class="inline-flex h-9 items-center gap-2 rounded-md border border-lightListTableText/20 bg-transparent px-3 text-sm font-medium text-lightListTableHeadingText transition hover:bg-lightListTableText/10 dark:border-darkListTableText/20 dark:text-darkListTableHeadingText dark:hover:bg-darkListTableText/10"
-              @click="submit('reject')"
-            >
-              <IconCloseOutline class="h-4 w-4" />
-              {{ $t('Reject') }}
-            </button>
+          <template v-for="(field, fieldIndex) in approval.fields" :key="fieldIndex">
+            <dt class="text-lightInputIconColor dark:text-darkInputIconColor [overflow-wrap:anywhere]">{{ field.label }}</dt>
+            <dd class="flex min-w-0 flex-wrap items-center gap-1.5">
+              <template v-if="field.from !== undefined && field.from !== field.to">
+                <span
+                  class="min-w-0 rounded px-1.5 line-through [overflow-wrap:anywhere]
+                    bg-lightDangerSoft text-lightDanger decoration-lightDanger/50 dark:bg-darkDangerSoft dark:text-darkDanger dark:decoration-darkDanger/50"
+                >
+                  {{ field.from }}
+                </span>
+                <IconArrowRight class="h-3.5 w-3.5 shrink-0 text-lightInputIconColor dark:text-darkInputIconColor" />
+                <span
+                  class="min-w-0 rounded px-1.5 font-medium [overflow-wrap:anywhere]
+                    bg-lightSuccessSoft text-lightSuccess dark:bg-darkSuccessSoft dark:text-darkSuccess"
+                >
+                  {{ field.to }}
+                </span>
+              </template>
+              <span v-else class="min-w-0 font-medium [overflow-wrap:anywhere]">{{ field.to }}</span>
+            </dd>
           </template>
-          <span
-            v-else
-            class="inline-flex h-8 items-center gap-2 rounded-md border border-lightListTableText/20 bg-lightListTableText/10 px-2.5 text-sm font-medium text-lightListTableHeadingText dark:border-darkListTableText/20 dark:bg-darkListTableText/10 dark:text-darkListTableHeadingText"
-          >
-            <Spinner v-if="data.status === 'processing'" class="h-4 w-4" />
-            <IconCheckOutline v-else-if="data.status === 'approved'" class="h-4 w-4" />
-            <IconCloseOutline v-else class="h-4 w-4" />
-            {{ data.status === 'processing' ? $t('Processing') : data.status === 'approved' ? $t('Approved') : $t('Rejected') }}
-          </span>
-        </div>
-        <p
-          v-if="data.error"
-          class="mt-3 text-sm leading-5 text-red-600 dark:text-red-400"
-        >
-          {{ data.error }}
-        </p>
-      </div>
+        </dl>
+      </li>
+    </ul>
+    <div class="mt-3 flex flex-wrap gap-2">
+      <template v-if="data.status === 'pending'">
+        <Button size="sm" type="button" @click="submit('approve')">
+          <IconCheck class="h-4 w-4" />
+          {{ $t('Approve') }}
+        </Button>
+        <Button variant="secondary" size="sm" type="button" @click="submit('reject')">
+          {{ $t('Reject') }}
+        </Button>
+      </template>
+      <span
+        v-else
+        class="inline-flex h-6 items-center gap-1.5 rounded-full border px-2 text-xs font-medium"
+        :class="STATUS_BADGE_CLASSES[data.status]"
+      >
+        <Spinner v-if="data.status === 'processing'" class="h-3.5 w-3.5" />
+        <IconCheck v-else-if="data.status === 'approved'" class="h-3.5 w-3.5" />
+        <IconX v-else class="h-3.5 w-3.5" />
+        {{ data.status === 'processing' ? $t('Processing') : data.status === 'approved' ? $t('Approved') : $t('Rejected') }}
+      </span>
     </div>
+    <p
+      v-if="data.error"
+      class="mt-3 text-sm leading-5 text-lightDanger dark:text-darkDanger"
+    >
+      {{ data.error }}
+    </p>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { IPartData } from '../types';
 import { useAgentStore } from '../composables/useAgentStore';
-import { Spinner } from '@/afcl';
-import { IconCheckOutline, IconCloseOutline, IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
+import { Button, Spinner } from '@/afcl';
+import { IconArrowRight, IconCheck, IconShieldAlert, IconX } from '@iconify-prerendered/vue-lucide';
 
 const props = defineProps<{
   data: IPartData;
 }>();
 
+const STATUS_BADGE_CLASSES: Record<string, string> = {
+  processing: 'border-transparent bg-lightSecondaryDarken text-lightInputIconColor dark:bg-darkSecondaryLighten dark:text-darkInputIconColor',
+  approved: 'border-lightSuccessBorder bg-lightSuccessSoft text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess',
+  rejected: 'border-lightDangerBorder bg-lightDangerSoft text-lightDanger dark:border-darkDangerBorder dark:bg-darkDangerSoft dark:text-darkDanger',
+};
+
 const agentStore = useAgentStore();
 
+const isAwaitingDecision = computed(() => props.data.status === 'pending' || props.data.status === 'processing');
+
 function submit(decision: 'approve' | 'reject') {
   if (!props.data.sessionId || props.data.status !== 'pending') {
     return;

package/dist/custom/conversation_area/ToolRenderer.vue

@@ -1,68 +1,56 @@
 <template>
-  <div
-    ref="toolRendererRef" 
-    class="py-1 inline-flex justify-center m-2 max-w-full min-w-0
-      flex-col gap-3 rounded-xl px-2 text-lightListTableHeadingText
-      dark:text-darkListTableHeadingText select-none
-    "
-    :class="[
-      isInputOutputExpanded ? 'items-start border-none' : '', 
-      activateShrinkedStyle ? 'border items-center' : '',
-      activateFullWidth ? 'w-full' : '',
-    ]"
-    :style="{
-      maxWidth: activateShrinkedStyle ? toolRendererInitialWidth + 'px' : '',
-    }"
-  >
-    <div 
-      class="flex items-center gap-1 cursor-pointer"     
-      @click="toggleInputOutput()"
+  <li>
+    <button
+      type="button"
+      class="flex items-center gap-2 w-full py-0.5 text-left text-[0.8125rem] leading-5 select-none"
+      :class="hasToolSections ? 'cursor-pointer' : 'cursor-default'"
+      @click="hasToolSections && (isInputOutputExpanded = !isInputOutputExpanded)"
     >
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-lightNavbar dark:bg-darkNavbar">
-        <Spinner v-if="isRunning" class="h-4 w-4" />
-        <IconCheckOutline v-else-if="!props.data.toolInfo.error" class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
-        <IconCloseOutline v-else class="h-4 w-4 text-red-500" />
-      </div>
-
-      <div class="min-w-0">
-        <p class="break-words font-mono text-sm leading-5">
-          {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
-        </p>
-      </div>
-      <IconAngleDownOutline
+      <span class="flex items-center justify-center w-4 h-4 shrink-0 rounded-full" :class="statusClasses">
+        <Spinner v-if="isRunning" class="w-3 h-3" />
+        <IconX v-else-if="props.data.toolInfo.error" class="w-3 h-3" />
+        <IconCheck v-else class="w-3 h-3" />
+      </span>
+      <span class="max-w-[55%] shrink-0 truncate font-mono text-xs text-lightInputText dark:text-darkInputText">
+        {{ props.data.toolInfo.toolName }}
+      </span>
+      <span class="flex-1 min-w-0 truncate text-lightInputIconColor dark:text-darkInputIconColor" :title="props.data.toolInfo.toolInfo">
+        {{ props.data.toolInfo.toolInfo }}
+      </span>
+      <span v-if="durationLabel" class="shrink-0 tabular-nums text-lightInputIconColor dark:text-darkInputIconColor">{{ durationLabel }}</span>
+      <IconChevronDown
         v-if="hasToolSections"
+        class="w-3.5 h-3.5 shrink-0 text-lightInputIconColor transition-transform duration-200 dark:text-darkInputIconColor"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        @transitionend="finishTransition()"
-        class="shrink-0 cursor-pointer transition-transform duration-300 hover:scale-105"
       />
-    </div>
+    </button>
     <transition name="expand">
-      <div v-if="isInputOutputExpanded" v-show="isInputOutputExpanded" class="max-h-72 space-y-3 overflow-y-auto pr-1 w-full">
+      <div v-if="isInputOutputExpanded" class="max-h-72 mt-1.5 mb-1 ml-6 space-y-2 overflow-y-auto">
         <section
           v-for="section in toolSections"
           :key="section.label"
-          class="overflow-hidden rounded-xl border border-black/5 bg-white/70 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-slate-900/50"
+          class="overflow-hidden rounded-default border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
         >
-          <header class="border-b border-black/5 px-3 py-2 text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-gray-500 dark:border-white/10 dark:text-gray-400">
+          <header class="border-b border-lightCardBorder px-2.5 py-1.5 text-xs font-medium text-lightInputIconColor dark:border-darkCardBorder dark:text-darkInputIconColor">
             {{ section.label }}
           </header>
-          <div class="select-all grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 px-3 py-3 font-mono text-xs leading-5 text-gray-700 dark:text-gray-200">
+          <div class="select-all grid grid-cols-[auto,1fr] gap-x-3 gap-y-0.5 px-2.5 py-2 font-mono text-xs leading-5 text-lightTableText dark:text-darkTableText">
             <template v-for="line in section.lines" :key="`${section.label}-${line.number}`">
-              <span class=" text-[0.7rem] text-gray-400 dark:text-gray-500 select-none">{{ line.number }}</span>
+              <span class="text-[0.7rem] text-lightInputPlaceholderText dark:text-darkInputPlaceholderText select-none">{{ line.number }}</span>
               <span class="whitespace-pre-wrap break-words">{{ line.content || ' ' }}</span>
             </template>
           </div>
         </section>
       </div>
     </transition>
-  </div>
+  </li>
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, watch, onMounted, nextTick } from 'vue';
+  import { computed, ref } from 'vue';
   import { type IFormattedToolCallPart } from '../types';
   import { Spinner } from '@/afcl';
-  import { IconAngleDownOutline, IconCheckOutline, IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconCheck, IconChevronDown, IconX } from '@iconify-prerendered/vue-lucide';
 
   const props = defineProps<{
     data: IFormattedToolCallPart
@@ -77,14 +65,20 @@
   }
 
   const isInputOutputExpanded = ref(false);
-  const activateShrinkedStyle = ref(true);
-  const toolRendererInitialWidth = ref<number | null>(null);
-  const toolRendererRef = ref<HTMLElement | null>(null);
-  const activateFullWidth = ref(false);
-  const blockClicksDuringAnimation = ref(false);
-  const ANIMATION_DURATION = 300;
-
-  const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
+
+  const isRunning = computed(() => props.data.toolInfo.phase === 'start');
+  const durationLabel = computed(() => {
+    const { durationMs } = props.data.toolInfo;
+    return durationMs === undefined ? null : `${(durationMs / 1000).toFixed(1)}s`;
+  });
+  const statusClasses = computed(() => {
+    if (isRunning.value) {
+      return 'text-lightInputIconColor dark:text-darkInputIconColor';
+    }
+    return props.data.toolInfo.error
+      ? 'bg-lightDangerSoft text-lightDanger dark:bg-darkDangerSoft dark:text-darkDanger'
+      : 'bg-lightSuccessSoft text-lightSuccess dark:bg-darkSuccessSoft dark:text-darkSuccess';
+  });
   const toolSections = computed<IToolSection[]>(() => {
     const sections = [
       {
@@ -109,38 +103,6 @@
   });
   const hasToolSections = computed(() => toolSections.value.length > 0);
 
-  onMounted(async () => {
-    await nextTick();
-    if (toolRendererRef.value && props.data.toolInfo) {
-      const contentWidth = Math.ceil(toolRendererRef.value.getBoundingClientRect().width);
-      const parentWidth = toolRendererRef.value.parentElement?.clientWidth ?? Infinity;
-      toolRendererInitialWidth.value = Math.min(contentWidth, parentWidth);
-    }
-  });
-
-  watch(isInputOutputExpanded, (newValue) => {
-    if (newValue) {
-      activateShrinkedStyle.value = false;
-      activateFullWidth.value = true;
-    }
-  });
-
-  function finishTransition() {
-    if (!isInputOutputExpanded.value) {
-      activateFullWidth.value = false;
-      activateShrinkedStyle.value = true;
-    }
-  }
-
-  function toggleInputOutput() {
-    if (blockClicksDuringAnimation.value) return;
-    isInputOutputExpanded.value = !isInputOutputExpanded.value;
-    blockClicksDuringAnimation.value = true;
-    setTimeout(() => {
-      blockClicksDuringAnimation.value = false;
-    }, ANIMATION_DURATION);
-  }
-
   const normalizeToolPayload = (value: unknown): string | null => {
     if (value === null || value === undefined || value === '') {
       return null;
@@ -175,4 +137,4 @@
   max-height: 288px;
 }
 
-</style>
+</style>

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -205,6 +205,9 @@ async function renderHighlight() {
       const result = await embed(vegaContainer.value, spec, {
         actions: false,
         renderer: 'svg',
+        // the chart sits on the surface of the code block, so it takes the theme of the page
+        theme: codeTheme.value === 'dark' ? 'dark' : undefined,
+        config: { background: 'transparent' },
       });
 
       if (requestId !== renderRequestId) {
@@ -259,70 +262,36 @@ function clearVega() {
 
 <style scoped>
 .incremark-shiki-code {
-  --incremark-code-border: rgba(148, 163, 184, 0.24);
-  --incremark-code-toolbar-bg: rgba(248, 250, 252, 0.9);
-  --incremark-code-toolbar-text: #475569;
-  --incremark-code-copy-bg: rgba(226, 232, 240, 0.9);
-  --incremark-code-copy-text: #0f172a;
-  border: 1px solid var(--incremark-code-border);
-  border-radius: 16px;
+  @apply border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground;
+  border-radius: 8px;
   overflow: hidden;
   width: 100%;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.96));
-  box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.45);
-  margin: 16px 0 ;
-}
-
-.dark .incremark-shiki-code {
-  --incremark-code-border: rgba(100, 116, 139, 0.38);
-  --incremark-code-toolbar-bg: rgba(15, 23, 42, 0.88);
-  --incremark-code-toolbar-text: #cbd5e1;
-  --incremark-code-copy-bg: rgba(30, 41, 59, 0.88);
-  --incremark-code-copy-text: #e2e8f0;
-  background:
-    linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.98));
-}
-
-.incremark-shiki-code[data-stream-state='pending'],
-.incremark-shiki-code[data-stream-state='stable'] {
-  box-shadow: 0 10px 24px -24px rgba(15, 23, 42, 0.8);
+  margin: 0 0 8px;
 }
 
 .incremark-shiki-toolbar {
+  @apply border-b border-lightCardBorder bg-lightCardBackgroundHover dark:border-darkCardBorder dark:bg-darkCardBackgroundHover;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--incremark-code-border);
-  background: var(--incremark-code-toolbar-bg);
-  backdrop-filter: blur(10px);
+  padding: 4px 4px 4px 12px;
 }
 
 .incremark-shiki-language {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--incremark-code-toolbar-text);
+  @apply text-xs font-medium text-lightInputIconColor dark:text-darkInputIconColor;
 }
 
 .incremark-shiki-copy {
-  border: none;
-  border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  background: var(--incremark-code-copy-bg);
-  color: var(--incremark-code-copy-text);
-  cursor: pointer;
-  transition: transform 0.16s ease, opacity 0.16s ease, background-color 0.16s ease;
+  @apply h-6 rounded-default px-2 text-xs font-medium transition-colors text-lightInputIconColor dark:text-darkInputIconColor;
 }
 
 .incremark-shiki-copy:hover:not(:disabled) {
-  transform: translateY(-1px);
+  @apply bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
+}
+
+.incremark-shiki-copy:focus-visible {
+  @apply outline-none ring-[3px] ring-lightFocusRing dark:ring-darkFocusRing;
 }
 
 .incremark-shiki-copy:disabled {
@@ -331,13 +300,7 @@ function clearVega() {
 }
 
 .incremark-shiki-copy.is-copied {
-  background: rgba(16, 185, 129, 0.16);
-  color: #059669;
-}
-
-.dark .incremark-shiki-copy.is-copied {
-  background: rgba(16, 185, 129, 0.24);
-  color: #6ee7b7;
+  @apply text-lightSuccess dark:text-darkSuccess;
 }
 
 .incremark-shiki-body {
@@ -345,13 +308,13 @@ function clearVega() {
 }
 
 .incremark-vega {
-  padding: 18px;
+  padding: 12px;
   width: 100%;
 }
 
 .incremark-shiki-fallback {
   margin: 0;
-  padding: 18px;
+  padding: 12px;
   overflow-x: auto;
   background: transparent;
   color: inherit;
@@ -359,7 +322,7 @@ function clearVega() {
 
 .incremark-shiki-fallback code {
   display: block;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: theme('fontFamily.mono');
   font-size: 13px;
   line-height: 1.65;
   white-space: pre;
@@ -367,7 +330,7 @@ function clearVega() {
 
 :deep(.incremark-shiki-html pre.shiki) {
   margin: 0;
-  padding: 18px;
+  padding: 12px;
   overflow-x: auto;
   background: transparent !important;
   font-size: 13px;
@@ -376,7 +339,7 @@ function clearVega() {
 
 :deep(.incremark-shiki-html code) {
   display: block;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: theme('fontFamily.mono');
 }
 
 :deep(.incremark-shiki-html .line) {
@@ -387,7 +350,5 @@ function clearVega() {
   width: 100%;
 }
 
-:deep(.incremark-vega){
-  padding: 0;
-}
+
 </style>

package/dist/custom/speech_recognition_frontend/AudioLines.vue

@@ -2,10 +2,9 @@
   <div
     v-for="(height, index) in lineHeights"
     :key="index"
-    class="bg-white w-[0.2rem] rounded-sm transition-all duration-100 ease-out"
+    class="bg-current w-[0.2rem] rounded-sm transition-all duration-100 ease-out"
     :style="{ height }"
   />
-  <p v-if="isRecording" class="text-white ml-2">{{ $t('End') }}</p>
 </template>
 
 <script setup lang="ts">

package/dist/custom/speech_recognition_frontend/MicrophoneButon.vue

@@ -1,40 +1,37 @@
 <template>
   <div
     v-show="!agentStore.isResponseInProgress || isAudioChatMode"
-    class="absolute bottom-1 flex items-center justify-center z-10 gap-4"
-    :class="[!agentStore.isAudioChatMode ? 'right-16': agentStore.isMobile ? 'right-1/2 translate-x-1/2' : 'right-1/2 translate-x-1/2']"
-  > 
-    <button 
-      v-if="isAudioChatMode && microphoneButtonMode === 'generating'"
-      class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 h-9 flex items-center justify-center rounded-full gap-2 text-white px-4"
-      @click="stopCurrentGeneration()"
-    >
-      <div class="w-3 h-3 bg-white rounded-full"/>
-      {{ $t('Stop') }}
-    </button>
+    class="flex items-center"
+  >
+    <!-- One button for the whole voice flow: the icon shows the state, the label what a click does -->
     <button
-      v-else 
-      class="h-7 bg-lightPrimary dark:bg-darkPrimary 
-        hover:opacity-90 rounded-full flex items-center justify-center
-        transition-all duration-300 ease-in-out overflow-hidden"
-      :class="[isAudioChatMode ? 'w-32 px-2': 'w-7']" 
-      @click="toggleChatMode"
+      type="button"
+      class="flex h-[2.125rem] shrink-0 items-center justify-center rounded-full transition-colors duration-150
+        focus:outline-none focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing"
+      :class="isAudioChatMode
+        ? `w-40 gap-2 px-3 text-sm font-medium
+          bg-lightPrimary/10 text-lightInputText hover:bg-lightPrimary/15
+          dark:bg-darkPrimary/20 dark:text-darkInputText dark:hover:bg-darkPrimary/30`
+        : `w-[2.125rem] text-lightInputIconColor hover:bg-lightSecondaryDarken hover:text-lightInputText
+          dark:text-darkInputIconColor dark:hover:bg-darkSecondaryLighten dark:hover:text-darkInputText`"
+      :title="$t(buttonTitle)"
+      :aria-label="$t(buttonTitle)"
+      @click="isGenerating ? stopCurrentGeneration() : toggleChatMode()"
     >
-      <div class="w-5 h-5 flex items-center justify-center">
-        <div v-if="microphoneButtonMode === 'listen' || microphoneButtonMode === 'off'" class="flex justify-evenly items-center gap-[0.1rem]">
-          <AudioLines
-            :showAnimation="showAudioWavesAnimation"
-            :isRecording="microphoneButtonMode === 'listen'"
-            :amplitude="audioAmplitude"
-          />
-          <Spinner v-if="isPolling" class="ml-2 w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary" />
-        </div>
-        <div v-else-if="microphoneButtonMode === 'generating'" class="flex items-center justify-center gap-2 text-white text-sm">
-          <span class="w-3 h-3 bg-white rounded-sm" />
-          {{ $t('End') }}
-        </div>
-        <Spinner v-else class="w-4 h-4 text-lightButtonsText dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary" />
-      </div>
+      <span
+        class="flex h-5 items-center gap-[0.1rem]"
+        :class="isAudioChatMode ? 'text-lightPrimary dark:text-darkPrimary' : ''"
+      >
+        <span v-if="isGenerating" class="w-2.5 h-2.5 rounded-sm bg-current" />
+        <Spinner v-else-if="isPolling || microphoneButtonMode === 'transcribing'" class="w-4 h-4" />
+        <AudioLines
+          v-else
+          :showAnimation="showAudioWavesAnimation"
+          :isRecording="microphoneButtonMode === 'listen'"
+          :amplitude="audioAmplitude"
+        />
+      </span>
+      <template v-if="isAudioChatMode">{{ isGenerating ? $t('Stop') : $t('End') }}</template>
     </button>
   </div>
 </template>
@@ -69,6 +66,13 @@ const sendUserRecordDebounced = debounce(() => {
 const isPolling = ref(false);
 
 const isAudioChatMode = computed(() => agentStore.isAudioChatMode);
+const isGenerating = computed(() => microphoneButtonMode.value === 'generating');
+const buttonTitle = computed(() => {
+  if (!isAudioChatMode.value) {
+    return 'Start voice chat';
+  }
+  return isGenerating.value ? 'Stop response' : 'End voice chat';
+});
 
 onMounted(() => {
   agentStore.registerOnBeforeChatCloseCallback(async () => {

package/dist/custom/types.ts

@@ -1,3 +1,16 @@
+/** One value on the approval card; `from` is the stored value an update replaces. */
+export interface IApprovalField {
+  label: string;
+  from?: string;
+  to: string;
+}
+
+/** A tool call awaiting approval, as described by the backend. */
+export interface IApprovalDescription {
+  summary: string;
+  fields: IApprovalField[];
+}
+
 export interface IPartData {
   toolCallId?: string;
   toolName?: string;
@@ -9,7 +22,7 @@ export interface IPartData {
   durationMs?: number;
   toolInfo?: string;
   status?: 'pending' | 'processing' | 'approved' | 'rejected';
-  messages?: string[];
+  approvals?: IApprovalDescription[];
   error?: string;
 }
 export interface IPart {
@@ -24,11 +37,6 @@ export interface IFormattedToolCallPart {
   toolInfo: IPartData;
 }
 
-export interface IToolGroup {
-  title: string;
-  groupedTools: IFormattedToolCallPart[];
-}
-
 export interface IMessage {
   id?: string;
   role: 'user' | 'assistant' | 'system';
@@ -47,8 +55,8 @@ export interface IAgentSession {
   title: string;
   timestamp: string;
   messages: IMessage[];
-  /** Tool calls this session is still waiting for the user to approve, in plain language. */
-  pendingApprovals?: string[];
+  /** Tool calls this session is still waiting for the user to approve. */
+  pendingApprovals?: IApprovalDescription[];
 }
 
 export interface ISessionsListItem {