@adminforth/agent 2.9.0 → 2.10.0

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" />
+        <IconXMark16Solid v-else-if="props.data.toolInfo.error" class="w-3 h-3" />
+        <IconCheck16Solid v-else class="w-3 h-3" />
+      </span>
+      <span class="max-w-[55%] shrink-0 truncate font-mono text-xs text-gray-800 dark:text-gray-200">
+        {{ props.data.toolInfo.toolName }}
+      </span>
+      <span class="flex-1 min-w-0 truncate text-gray-500 dark:text-gray-400" :title="props.data.toolInfo.toolInfo">
+        {{ props.data.toolInfo.toolInfo }}
+      </span>
+      <span v-if="durationLabel" class="shrink-0 tabular-nums text-gray-500 dark:text-gray-400">{{ durationLabel }}</span>
+      <IconChevronDown
         v-if="hasToolSections"
+        class="w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-200"
         :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-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/40"
         >
-          <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-gray-200 px-2.5 py-1.5 text-[0.7rem] font-semibold uppercase tracking-wider text-gray-500 dark:border-gray-700 dark:text-gray-400">
             {{ 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-gray-700 dark:text-gray-200">
             <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-gray-400 dark:text-gray-500 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 { IconCheck16Solid, IconChevronDown, IconXMark16Solid } from '@iconify-prerendered/vue-heroicons';
 
   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-gray-500 dark:text-gray-400';
+    }
+    return props.data.toolInfo.error
+      ? 'bg-red-100 text-red-600 dark:bg-red-500/20 dark:text-red-400'
+      : 'bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary';
+  });
   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/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,35 @@
 <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-8 shrink-0 items-center justify-center rounded-full transition-colors duration-150"
+      :class="isAudioChatMode
+        ? `w-40 gap-2 px-3 text-sm font-medium
+          bg-lightPrimary/10 text-gray-800 hover:bg-lightPrimary/15
+          dark:bg-darkPrimary/20 dark:text-gray-100 dark:hover:bg-darkPrimary/30`
+        : 'w-8 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'"
+      :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 +64,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 {

package/dist/domain/agentEvents.d.ts

@@ -1,4 +1,5 @@
 import type { ToolCallEvent } from "./toolCallEvents.js";
+import type { ApprovalDescription } from "../tools/approvalFormatter.js";
 export type AgentEvent = {
     type: "turn-started";
     messageId: string;
@@ -19,8 +20,8 @@ export type AgentEvent = {
     type: "interrupt";
     sessionId: string;
     interrupt: unknown;
-    /** One plain-language line per pending tool call, for the approval card. */
-    approvals: string[];
+    /** One description per pending tool call, for the approval card. */
+    approvals: ApprovalDescription[];
 } | {
     type: "steer-applied";
     count: number;

package/dist/tools/approvalFormatter.d.ts

@@ -1,12 +1,26 @@
-import type { IAdminForth } from "adminforth";
+import { type IAdminForth } from "adminforth";
 /** One tool call awaiting approval, normalized out of the provider interrupt payload. */
 export type ApprovalRequest = {
     toolName: string;
     args: Record<string, unknown>;
 };
+/** One value on the approval card; `from` is the stored value an update replaces. */
+export type ApprovalField = {
+    label: string;
+    from?: string;
+    to: string;
+};
+/** A tool call awaiting approval, described for the approval card. */
+export type ApprovalDescription = {
+    /** What the call does and to which record, e.g. `Update record with id:10 in Cars`. */
+    summary: string;
+    /** The values the call writes, in the resource's own wording. */
+    fields: ApprovalField[];
+};
 /**
- * Describe a tool call awaiting approval in a sentence an admin (not a developer) can
- * act on — resource and column labels instead of ids, values instead of raw JSON.
- * Falls back to a key/value dump for tool calls it does not recognize.
+ * Describe a tool call awaiting approval so an admin (not a developer) can act on it —
+ * resource and column labels instead of ids, values instead of raw JSON, and for an
+ * update the current value next to each new one. Tool calls it does not recognize are
+ * shown as their arguments.
  */
-export declare function formatApprovalRequest(adminforth: IAdminForth, request: ApprovalRequest): string;
+export declare function formatApprovalRequest(adminforth: IAdminForth, request: ApprovalRequest): Promise<ApprovalDescription>;

package/dist/tools/approvalFormatter.js

@@ -1,7 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { logger } from "adminforth";
+import { getErrorMessage } from "../shared/errors.js";
 /** Argument keys that address the call itself rather than the data being changed. */
 const NON_FIELD_KEYS = new Set(["resourceId", "recordId", "primaryKey", "requiredColumnsToSkip", "meta", "extra"]);
 const MAX_VALUE_LENGTH = 80;
-const MAX_FIELDS = 12;
 function truncate(text, limit = MAX_VALUE_LENGTH) {
     return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
 }
@@ -45,23 +55,46 @@ function formatValue(value, column) {
     }
     return truncate(String(value));
 }
-/** `Brand: Tesla, Price: 45000` — the record payload in the resource's own wording. */
-function formatRecord(record, resource) {
+/**
+ * The record payload as labelled values in the resource's own wording. Every field is
+ * listed: the admin approves exactly what will be written. With `oldRecord` each value is
+ * paired with the one it replaces.
+ */
+function describeFields(record, resource, oldRecord) {
     var _a;
     if (record === null || typeof record !== "object" || Array.isArray(record)) {
-        return "";
+        return [];
     }
     const columnsByName = new Map(((_a = resource === null || resource === void 0 ? void 0 : resource.columns) !== null && _a !== void 0 ? _a : []).map((column) => [column.name, column]));
-    const entries = Object.entries(record)
-        .filter(([key]) => !NON_FIELD_KEYS.has(key));
-    const shown = entries.slice(0, MAX_FIELDS).map(([name, value]) => {
+    return Object.entries(record)
+        .filter(([key]) => !NON_FIELD_KEYS.has(key))
+        .map(([name, value]) => {
         const column = columnsByName.get(name);
-        return `${(column === null || column === void 0 ? void 0 : column.label) || humanize(name)}: ${formatValue(value, column)}`;
+        return {
+            label: (column === null || column === void 0 ? void 0 : column.label) || humanize(name),
+            from: oldRecord ? formatValue(oldRecord[name], column) : undefined,
+            to: formatValue(value, column),
+        };
+    });
+}
+/**
+ * The stored record an update would change, read the same way the update endpoint reads it.
+ * The preview must never block the approval prompt, so a failed read only drops the old values.
+ */
+function loadRecord(adminforth, resource, recordId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!resource) {
+            return undefined;
+        }
+        try {
+            return (_a = yield adminforth.connectors[resource.dataSource].getRecordByPrimaryKey(resource, String(recordId))) !== null && _a !== void 0 ? _a : undefined;
+        }
+        catch (error) {
+            logger.warn(`Approval preview: failed to read record ${String(recordId)} of "${resource.resourceId}": ${getErrorMessage(error)}`);
+            return undefined;
+        }
     });
-    const hidden = entries.length - shown.length;
-    const lines = hidden > 0 ? [...shown, `and ${hidden} more`] : shown;
-    // One field per line: a wide record is unreadable as a single run-on sentence.
-    return lines.join(",\n");
 }
 function actionLabel(resource, actionId) {
     var _a, _b;
@@ -72,35 +105,50 @@ function actionLabel(resource, actionId) {
     return `"${(action === null || action === void 0 ? void 0 : action.name) || humanize(actionId)}"`;
 }
 /**
- * Describe a tool call awaiting approval in a sentence an admin (not a developer) can
- * act on — resource and column labels instead of ids, values instead of raw JSON.
- * Falls back to a key/value dump for tool calls it does not recognize.
+ * Describe a tool call awaiting approval so an admin (not a developer) can act on it —
+ * resource and column labels instead of ids, values instead of raw JSON, and for an
+ * update the current value next to each new one. Tool calls it does not recognize are
+ * shown as their arguments.
  */
 export function formatApprovalRequest(adminforth, request) {
-    const { args, toolName } = request;
-    const resource = findResource(adminforth, args.resourceId);
-    const label = resourceLabel(resource, args);
-    switch (toolName) {
-        case "create_record": {
-            const fields = formatRecord(args.record, resource);
-            return `Create a new record in ${label}${fields ? `:\n${fields}` : ""}`;
-        }
-        case "update_record": {
-            const fields = formatRecord(args.record, resource);
-            return `Update record with id:${formatValue(args.recordId)} in ${label}${fields ? `, set:\n${fields}` : ""}`;
-        }
-        case "delete_record":
-            return `Delete record with id:${formatValue(args.primaryKey)} from ${label} — this cannot be undone`;
-        case "start_custom_action":
-            return `Run ${actionLabel(resource, args.actionId)} on record ${formatValue(args.recordId)} in ${label}`;
-        case "start_custom_bulk_action":
-        case "start_bulk_action": {
-            const count = Array.isArray(args.recordIds) ? args.recordIds.length : 0;
-            return `Run ${actionLabel(resource, args.actionId)} on ${count} record(s) in ${label}`;
+    return __awaiter(this, void 0, void 0, function* () {
+        const { args, toolName } = request;
+        const resource = findResource(adminforth, args.resourceId);
+        const label = resourceLabel(resource, args);
+        switch (toolName) {
+            case "create_record":
+                return {
+                    summary: `Create a new record in ${label}`,
+                    fields: describeFields(args.record, resource),
+                };
+            case "update_record":
+                return {
+                    summary: `Update record with id:${formatValue(args.recordId)} in ${label}`,
+                    fields: describeFields(args.record, resource, yield loadRecord(adminforth, resource, args.recordId)),
+                };
+            case "delete_record":
+                return {
+                    summary: `Delete record with id:${formatValue(args.primaryKey)} from ${label} — this cannot be undone`,
+                    fields: [],
+                };
+            case "start_custom_action":
+                return {
+                    summary: `Run ${actionLabel(resource, args.actionId)} on record ${formatValue(args.recordId)} in ${label}`,
+                    fields: [],
+                };
+            case "start_custom_bulk_action":
+            case "start_bulk_action": {
+                const count = Array.isArray(args.recordIds) ? args.recordIds.length : 0;
+                return {
+                    summary: `Run ${actionLabel(resource, args.actionId)} on ${count} record(s) in ${label}`,
+                    fields: [],
+                };
+            }
+            default:
+                return {
+                    summary: humanize(toolName),
+                    fields: describeFields(args, resource),
+                };
         }
-        default: {
-            const fields = formatRecord(args, resource);
-            return `${humanize(toolName)}${fields ? `:\n${fields}` : ""}`;
-        }
-    }
+    });
 }

package/dist/transport/http/context.d.ts

@@ -1,6 +1,7 @@
 import type { ChatSurfaceAdapter, ChatSurfaceEventSink, ChatSurfaceIncomingMessage, IAdminForth, IAdminForthEndpointHandlerInput } from "adminforth";
 import type { HandleEditTurnInput, HandleSpeechTurnInput, HandleTurnInput, RunAndPersistAgentResponseInput, RunAndPersistAgentResponseResult } from "../../domain/turnTypes.js";
 import type { PluginOptions } from "../../types.js";
+import type { ApprovalDescription } from "../../tools/approvalFormatter.js";
 export type SessionTurn = {
     id: string;
     prompt: string;
@@ -22,7 +23,7 @@ export type AgentEndpointsContext = {
     }>;
     runAndPersistAgentResponse(input: RunAndPersistAgentResponseInput): Promise<RunAndPersistAgentResponseResult>;
     getSessionTurns(sessionId: string): Promise<SessionTurn[]>;
-    getPendingApprovals(sessionId: string): Promise<string[]>;
+    getPendingApprovals(sessionId: string): Promise<ApprovalDescription[]>;
     createNewTurn(sessionId: string, prompt: string, response?: string): Promise<string>;
     createSystemTurn(sessionId: string, systemMessage: string): Promise<string>;
     appendSteerToCurrentTurn(sessionId: string, steerText: string): Promise<void>;

package/package.json

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

package/dist/custom/conversation_area/ToolsGroup.vue

@@ -1,59 +0,0 @@
-<template >
-  <template v-if="toolGroup.length > 0">
-    <li class="mb-6 ms-2 z-50">
-      <span class="text-listTableHeadingText dark:text-darkListTableHeadingText bg-lightNavbar dark:bg-darkNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar dark:ring-darkNavbar ring-default">
-        <div class="w-5 h-5 rounded-full flex items-center justify-center">
-          <IconWrenchSolid class="w-4 h-4" />
-        </div>
-      </span>
-      <h3 
-        class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 text-listTableHeadingText dark:text-darkListTableHeadingText"      
-      >
-        <span class="font-semibold select-none ">{{ $t('Call tools') }}</span>
-      </h3>
-      <div class="flex flex-wrap">
-        <template v-for="group in props.toolGroup" :key="group.title">
-          <ToolRenderer
-            v-if="isExpanded" 
-            v-for="part in group.groupedTools" 
-            :key="part.toolInfo.toolCallId" 
-            :data="part"
-          />
-        </template> 
-      </div>
-    </li>
-  </template>
-</template>
-
-<script setup lang="ts">
-import ToolRenderer from './ToolRenderer.vue';
-import type { IToolGroup } from '../types';
-import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
-
-const props = defineProps<{
-  toolGroup: IToolGroup[]
-  isExpanded: boolean
-}>();
-
-</script>
-
-<style scoped>
-
-.expand-enter-active,
-.expand-leave-active {
-  transition: all 0.3s ease;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.expand-enter-to,
-.expand-leave-from {
-  opacity: 1;
-  max-height: 288px;
-}
-
-</style>