@adminforth/agent 1.0.0 → 1.1.1

package/agent/middleware/apiBasedTools.ts

@@ -1,7 +1,11 @@
 import { ToolMessage } from "@langchain/core/messages";
 import { createMiddleware } from "langchain";
 import { logger } from "adminforth";
-import type { ApiBasedTool } from "../../apiBasedTools.js";
+import { type ApiBasedTool } from "../../apiBasedTools.js";
+import {
+  createToolCallTracker,
+  type ToolCallEventSink,
+} from "../toolCallEvents.js";
 import { ALWAYS_AVAILABLE_API_TOOL_NAMES } from "../tools/index.js";
 import { createApiTool } from "../tools/apiTool.js";
 
@@ -67,30 +71,46 @@ export function createApiBasedToolsMiddleware(
     async wrapToolCall(request, handler) {
       const startedAt = Date.now();
       const toolInput = JSON.stringify(request.toolCall.args ?? {});
+      const { emitToolCallEvent } = request.runtime.context as {
+        emitToolCallEvent: ToolCallEventSink;
+      };
+      const toolCallTracker = createToolCallTracker({
+        emit: emitToolCallEvent,
+        toolCallId: request.toolCall.id,
+        toolName: request.toolCall.name,
+        input: (request.toolCall.args ?? {}) as Record<string, unknown>,
+        startedAt,
+      });
+      toolCallTracker.start();
       logger.info(
         `Invoking tool "${request.toolCall.name}" with input: ${toolInput}`,
       );
 
       try {
-        if (request.tool) {
-          return await handler(request);
-        }
+        let result;
 
-        const enabledApiToolNames = getEnabledApiToolNames(request.state.messages);
+        if (request.tool) {
+          result = await handler(request);
+        } else {
+          const enabledApiToolNames = getEnabledApiToolNames(request.state.messages);
 
-        if (enabledApiToolNames.has(request.toolCall.name)) {
-          return await handler({
-            ...request,
-            tool: dynamicTools[request.toolCall.name],
-          });
+          if (enabledApiToolNames.has(request.toolCall.name)) {
+            result = await handler({
+              ...request,
+              tool: dynamicTools[request.toolCall.name],
+            });
+          } else {
+            result = new ToolMessage({
+              content: `Tool "${request.toolCall.name}" is not loaded. Call fetch_tool_schema first.`,
+              tool_call_id: request.toolCall.id ?? "",
+              name: request.toolCall.name,
+              status: "error",
+            });
+          }
         }
 
-        return new ToolMessage({
-          content: `Tool "${request.toolCall.name}" is not loaded. Call fetch_tool_schema first.`,
-          tool_call_id: request.toolCall.id ?? "",
-          name: request.toolCall.name,
-          status: "error",
-        });
+        toolCallTracker.finishSuccess(result);
+        return result;
       } catch (error) {
         const errorDetails =
           error instanceof Error ? error.stack ?? error.message : String(error);
@@ -98,6 +118,7 @@ export function createApiBasedToolsMiddleware(
         logger.error(
           `Tool "${request.toolCall.name}" failed after ${Date.now() - startedAt}ms with input: ${toolInput}\n${errorDetails}`,
         );
+        toolCallTracker.finishError(error);
         throw error;
       } finally {
         logger.info(

package/agent/toolCallEvents.ts

@@ -1,3 +1,7 @@
+import { randomUUID } from "crypto";
+import YAML from "yaml";
+import { serializeUnknownError } from "../apiBasedTools.js";
+
 export type ToolCallEvent =
   | {
       toolCallId: string;
@@ -15,3 +19,45 @@ export type ToolCallEvent =
     };
 
 export type ToolCallEventSink = (event: ToolCallEvent) => void;
+
+export function createToolCallTracker(params: {
+  emit: ToolCallEventSink;
+  toolCallId?: string;
+  toolName: string;
+  input?: Record<string, unknown>;
+  startedAt?: number;
+}) {
+  const toolCallId = params.toolCallId ?? randomUUID();
+  const startedAt = params.startedAt ?? Date.now();
+
+  return {
+    start() {
+      params.emit({
+        toolCallId,
+        toolName: params.toolName,
+        phase: "start",
+        input: YAML.stringify(params.input ?? {}),
+      });
+    },
+    finishSuccess(output: unknown) {
+      params.emit({
+        toolCallId,
+        toolName: params.toolName,
+        phase: "end",
+        durationMs: Date.now() - startedAt,
+        output: YAML.stringify(output).trimEnd(),
+        error: null,
+      });
+    },
+    finishError(error: unknown) {
+      params.emit({
+        toolCallId,
+        toolName: params.toolName,
+        phase: "end",
+        durationMs: Date.now() - startedAt,
+        output: null,
+        error: YAML.stringify(serializeUnknownError(error)).trimEnd(),
+      });
+    },
+  };
+}

package/agent/tools/apiTool.ts

@@ -1,8 +1,5 @@
 import { tool } from "langchain";
-import { randomUUID } from "crypto";
-import YAML from "yaml";
 import type { ApiBasedTool } from "../../apiBasedTools.js";
-import { serializeUnknownError } from "../../apiBasedTools.js";
 
 const emptyToolSchema = {
   type: "object",
@@ -52,43 +49,11 @@ export function createApiTool(toolName: string, apiBasedTool: ApiBasedTool) {
   return tool(
     async (input, runtime) => {
       const normalizedInput = (input ?? {}) as Record<string, unknown>;
-      const toolCallId = randomUUID();
-      const startedAt = Date.now();
-      runtime.context.emitToolCallEvent({
-        toolCallId,
-        toolName,
-        phase: "start",
-        input: YAML.stringify(normalizedInput),
+      return apiBasedTool.call({
+        adminUser: runtime.context.adminUser,
+        inputs: normalizedInput,
+        userTimeZone: runtime.context.userTimeZone,
       });
-
-      try {
-        const output = await apiBasedTool.call({
-          adminUser: runtime.context.adminUser,
-          inputs: normalizedInput,
-          userTimeZone: runtime.context.userTimeZone,
-        });
-
-        runtime.context.emitToolCallEvent({
-          toolCallId,
-          toolName,
-          phase: "end",
-          durationMs: Date.now() - startedAt,
-          output,
-          error: null,
-        });
-
-        return output;
-      } catch (error) {
-        runtime.context.emitToolCallEvent({
-          toolCallId,
-          toolName,
-          phase: "end",
-          durationMs: Date.now() - startedAt,
-          output: null,
-          error: YAML.stringify(serializeUnknownError(error)),
-        });
-        throw error;
-      }
     },
     {
       name: toolName,

package/build.log

@@ -26,5 +26,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 136,251 bytes  received 367 bytes  273,236.00 bytes/sec
-total size is 134,767  speedup is 0.99
+sent 136,840 bytes  received 367 bytes  274,414.00 bytes/sec
+total size is 135,334  speedup is 0.99

package/custom/ConversationArea.vue

@@ -17,9 +17,10 @@
 
   </div>
   <AutoScrollContainer
-    enabled 
+    :enabled="!showScrollToBottomButton" 
     class="flex flex-col overflow-y-auto border-t border-gray-200 dark:border-gray-700"
     ref="scrollContainer"
+    :threshold="10"
     behavior="smooth"
   > 
 
@@ -57,8 +58,8 @@
       v-if="props.messages.length === 0"
       class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
     >
-      <p>Start the conversation</p>
-      <p class="tracking-normal text-base text">Give any input to begin</p>
+      <p>{{ $t('Start the conversation') }}</p>
+      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
     </div>
   </AutoScrollContainer>
 </template>
@@ -151,20 +152,16 @@ const groupToolCallParts = (message: IMessage) => {
     if(!part?.toolInfo) {
       continue;
     }
-    console.log('part', part);
     if (part.toolInfo.toolName === currentToolName) {
-      console.log('grouping part with tool name', currentToolName);
       groupedParts[groupedParts.length - 1].groupedTools.push(part);
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    console.log('starting new group with tool name', currentToolName);
     groupedParts.push({
       title: currentToolName,
       groupedTools: [part]
     });
   }  
-  console.log('groupedParts', groupedParts);
   return groupedParts;
 }
 

package/custom/Message.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="max-w-[80%] flex px-4 py-2 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
+    class="max-w-[80%] flex px-4 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
     @click="handleMarkdownLinkClick"
     :class="props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
       : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 

package/custom/SessionsHistory.vue

@@ -6,14 +6,14 @@
     "
   >
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
-    <Button @click="agentStore.createPreSession()" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
+    <Button @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false)" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
       <IconPlusOutline class="w-5 h-5" />
       {{ $t('New chat') }}
     </Button>
     <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
     <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
       <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
-      <p class="mt-2 text-gray-800 dark:text-gray-200">generation in progress...</p>
+      <p class="mt-2 text-gray-800 dark:text-gray-200">{{ $t('Generation in progress...') }}</p>
     </div>
     <div v-for="group in groupedSessions" :key="group.dayKey" class="w-full py-2">
       <div class="px-4 pb-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
@@ -38,7 +38,7 @@
       v-if="!groupedSessions || groupedSessions.length === 0"
       class="w-full h-full flex items-center justify-center text-gray-800 dark:text-gray-200"
     >
-      There is no previous chat sessions
+      {{ $t('There are no previous chat sessions') }}
     </p>
   </div>
 </template>

package/custom/ToolRenderer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="props.data?.toolInfo" class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 text-lightListTableHeadingText dark:text-darkListTableHeadingText">
+  <div 
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
+    @click="isInputOutputExpanded = !isInputOutputExpanded"
+  >
     <div class="flex items-center gap-3">
       <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
         <Spinner v-if="isRunning" class="h-4 w-4" />
@@ -18,8 +21,7 @@
       <IconAngleDownOutline
         v-if="hasToolSections"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        class="cursor-pointer transition-transform duration-200 hover:scale-105 hover:opacity-75"
-        @click="isInputOutputExpanded = !isInputOutputExpanded"
+        class="cursor-pointer transition-transform duration-200 hover:scale-105"
       />
     </div>
     <transition name="expand">

package/custom/ToolsGroup.vue

@@ -1,8 +1,9 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
-    <div v-if="group.groupedTools.length > 1" class="mb-4 flex flex-col">
-      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5" @click="toggleGroup(group.title)">
-        - {{ group.title }} {{ 'x' + group.groupedTools.length }} 
+    <div v-if="group.groupedTools.length > 1" class="flex flex-col">
+      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
+        <IconMinusOutline  class="w-6 h-6 p-1"/> 
+        {{ group.title }} {{ 'x' + group.groupedTools.length }} 
         <IconAngleDownOutline 
           class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
           :class="expandedGroups.includes(group.title) ? 'rotate-180' : 'rotate-0'"
@@ -10,7 +11,7 @@
       </div>
       <transition name="expand">
         <div v-show="expandedGroups.includes(group.title)" class="flex flex-col"> 
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" />
+        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" class="ml-8"/>
         </div>
       </transition>
     </div>
@@ -24,7 +25,7 @@ import { Tool } from 'langchain';
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {

package/custom/useAgentStore.ts

@@ -120,6 +120,10 @@ export const useAgentStore = defineStore('agent', () => {
   });
   const blockCloseOfChat = ref(false);
 
+  function sortSessionsListByTimestamp(sessionsList: ISessionsListItem[]) {
+    return [...sessionsList].sort((a: ISessionsListItem, b: ISessionsListItem) => b.timestamp.localeCompare(a.timestamp));
+  }
+
   async function sendMessage() {
     const message = trimmedUserMessage.value;
     if (!message || isResponseInProgress.value) {
@@ -128,6 +132,11 @@ export const useAgentStore = defineStore('agent', () => {
     if (!currentSession.value || currentSession.value.sessionId === 'pre-session') {
       await createNewSession(message);
     }
+    currentSession.value.timestamp = new Date().toISOString();
+    sessionList.value = sortSessionsListByTimestamp(sessionList.value.map((s: ISessionsListItem) => s.sessionId === currentSession.value?.sessionId ? {
+      ...s,
+      timestamp: currentSession.value?.timestamp || s.timestamp,
+    } : s));
     lastMessage.value = message;
     currentChat.value?.sendMessage({
       text: message,

package/dist/agent/middleware/apiBasedTools.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { ToolMessage } from "@langchain/core/messages";
 import { createMiddleware } from "langchain";
 import { logger } from "adminforth";
+import { createToolCallTracker, } from "../toolCallEvents.js";
 import { ALWAYS_AVAILABLE_API_TOOL_NAMES } from "../tools/index.js";
 import { createApiTool } from "../tools/apiTool.js";
 function getEnabledApiToolNames(messages) {
@@ -58,28 +59,45 @@ export function createApiBasedToolsMiddleware(apiBasedTools) {
         },
         wrapToolCall(request, handler) {
             return __awaiter(this, void 0, void 0, function* () {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 const startedAt = Date.now();
                 const toolInput = JSON.stringify((_a = request.toolCall.args) !== null && _a !== void 0 ? _a : {});
+                const { emitToolCallEvent } = request.runtime.context;
+                const toolCallTracker = createToolCallTracker({
+                    emit: emitToolCallEvent,
+                    toolCallId: request.toolCall.id,
+                    toolName: request.toolCall.name,
+                    input: ((_b = request.toolCall.args) !== null && _b !== void 0 ? _b : {}),
+                    startedAt,
+                });
+                toolCallTracker.start();
                 logger.info(`Invoking tool "${request.toolCall.name}" with input: ${toolInput}`);
                 try {
+                    let result;
                     if (request.tool) {
-                        return yield handler(request);
+                        result = yield handler(request);
                     }
-                    const enabledApiToolNames = getEnabledApiToolNames(request.state.messages);
-                    if (enabledApiToolNames.has(request.toolCall.name)) {
-                        return yield handler(Object.assign(Object.assign({}, request), { tool: dynamicTools[request.toolCall.name] }));
+                    else {
+                        const enabledApiToolNames = getEnabledApiToolNames(request.state.messages);
+                        if (enabledApiToolNames.has(request.toolCall.name)) {
+                            result = yield handler(Object.assign(Object.assign({}, request), { tool: dynamicTools[request.toolCall.name] }));
+                        }
+                        else {
+                            result = new ToolMessage({
+                                content: `Tool "${request.toolCall.name}" is not loaded. Call fetch_tool_schema first.`,
+                                tool_call_id: (_c = request.toolCall.id) !== null && _c !== void 0 ? _c : "",
+                                name: request.toolCall.name,
+                                status: "error",
+                            });
+                        }
                     }
-                    return new ToolMessage({
-                        content: `Tool "${request.toolCall.name}" is not loaded. Call fetch_tool_schema first.`,
-                        tool_call_id: (_b = request.toolCall.id) !== null && _b !== void 0 ? _b : "",
-                        name: request.toolCall.name,
-                        status: "error",
-                    });
+                    toolCallTracker.finishSuccess(result);
+                    return result;
                 }
                 catch (error) {
-                    const errorDetails = error instanceof Error ? (_c = error.stack) !== null && _c !== void 0 ? _c : error.message : String(error);
+                    const errorDetails = error instanceof Error ? (_d = error.stack) !== null && _d !== void 0 ? _d : error.message : String(error);
                     logger.error(`Tool "${request.toolCall.name}" failed after ${Date.now() - startedAt}ms with input: ${toolInput}\n${errorDetails}`);
+                    toolCallTracker.finishError(error);
                     throw error;
                 }
                 finally {

package/dist/agent/toolCallEvents.js

@@ -1 +1,39 @@
-export {};
+import { randomUUID } from "crypto";
+import YAML from "yaml";
+import { serializeUnknownError } from "../apiBasedTools.js";
+export function createToolCallTracker(params) {
+    var _a, _b;
+    const toolCallId = (_a = params.toolCallId) !== null && _a !== void 0 ? _a : randomUUID();
+    const startedAt = (_b = params.startedAt) !== null && _b !== void 0 ? _b : Date.now();
+    return {
+        start() {
+            var _a;
+            params.emit({
+                toolCallId,
+                toolName: params.toolName,
+                phase: "start",
+                input: YAML.stringify((_a = params.input) !== null && _a !== void 0 ? _a : {}),
+            });
+        },
+        finishSuccess(output) {
+            params.emit({
+                toolCallId,
+                toolName: params.toolName,
+                phase: "end",
+                durationMs: Date.now() - startedAt,
+                output: YAML.stringify(output).trimEnd(),
+                error: null,
+            });
+        },
+        finishError(error) {
+            params.emit({
+                toolCallId,
+                toolName: params.toolName,
+                phase: "end",
+                durationMs: Date.now() - startedAt,
+                output: null,
+                error: YAML.stringify(serializeUnknownError(error)).trimEnd(),
+            });
+        },
+    };
+}

package/dist/agent/tools/apiTool.js

@@ -8,9 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { tool } from "langchain";
-import { randomUUID } from "crypto";
-import YAML from "yaml";
-import { serializeUnknownError } from "../../apiBasedTools.js";
 const emptyToolSchema = {
     type: "object",
     properties: {},
@@ -50,41 +47,11 @@ export function createApiTool(toolName, apiBasedTool) {
     var _a;
     return tool((input, runtime) => __awaiter(this, void 0, void 0, function* () {
         const normalizedInput = (input !== null && input !== void 0 ? input : {});
-        const toolCallId = randomUUID();
-        const startedAt = Date.now();
-        runtime.context.emitToolCallEvent({
-            toolCallId,
-            toolName,
-            phase: "start",
-            input: YAML.stringify(normalizedInput),
+        return apiBasedTool.call({
+            adminUser: runtime.context.adminUser,
+            inputs: normalizedInput,
+            userTimeZone: runtime.context.userTimeZone,
         });
-        try {
-            const output = yield apiBasedTool.call({
-                adminUser: runtime.context.adminUser,
-                inputs: normalizedInput,
-                userTimeZone: runtime.context.userTimeZone,
-            });
-            runtime.context.emitToolCallEvent({
-                toolCallId,
-                toolName,
-                phase: "end",
-                durationMs: Date.now() - startedAt,
-                output,
-                error: null,
-            });
-            return output;
-        }
-        catch (error) {
-            runtime.context.emitToolCallEvent({
-                toolCallId,
-                toolName,
-                phase: "end",
-                durationMs: Date.now() - startedAt,
-                output: null,
-                error: YAML.stringify(serializeUnknownError(error)),
-            });
-            throw error;
-        }
     }), {
         name: toolName,
         description: (_a = apiBasedTool.description) !== null && _a !== void 0 ? _a : `${toolName} tool`,

package/dist/custom/ConversationArea.vue

@@ -17,9 +17,10 @@
 
   </div>
   <AutoScrollContainer
-    enabled 
+    :enabled="!showScrollToBottomButton" 
     class="flex flex-col overflow-y-auto border-t border-gray-200 dark:border-gray-700"
     ref="scrollContainer"
+    :threshold="10"
     behavior="smooth"
   > 
 
@@ -57,8 +58,8 @@
       v-if="props.messages.length === 0"
       class="flex-1 flex flex-col items-center justify-center text-gray-400 tracking-widest text-xl font-medium"
     >
-      <p>Start the conversation</p>
-      <p class="tracking-normal text-base text">Give any input to begin</p>
+      <p>{{ $t('Start the conversation') }}</p>
+      <p class="tracking-normal text-base text">{{ $t('Give any input to begin') }}</p>
     </div>
   </AutoScrollContainer>
 </template>
@@ -151,20 +152,16 @@ const groupToolCallParts = (message: IMessage) => {
     if(!part?.toolInfo) {
       continue;
     }
-    console.log('part', part);
     if (part.toolInfo.toolName === currentToolName) {
-      console.log('grouping part with tool name', currentToolName);
       groupedParts[groupedParts.length - 1].groupedTools.push(part);
       continue;
     }
     currentToolName = part.toolInfo.toolName;
-    console.log('starting new group with tool name', currentToolName);
     groupedParts.push({
       title: currentToolName,
       groupedTools: [part]
     });
   }  
-  console.log('groupedParts', groupedParts);
   return groupedParts;
 }
 

package/dist/custom/Message.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="max-w-[80%] flex px-4 py-2 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
+    class="max-w-[80%] flex px-4 m-2 rounded-xl border border-gray-200 dark:border-gray-700"
     @click="handleMarkdownLinkClick"
     :class="props.role === 'user' ? 'bg-lightListTableHeading dark:bg-darkListTableHeading self-end' 
       : isTypeReasoning || isTypeToolCall ? 'bg-transparent border-none self-start' 

package/dist/custom/SessionsHistory.vue

@@ -6,14 +6,14 @@
     "
   >
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
-    <Button @click="agentStore.createPreSession()" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
+    <Button @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false)" :disabled="agentStore.isResponseInProgress" class="w-[360px] mx-4 my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200">
       <IconPlusOutline class="w-5 h-5" />
       {{ $t('New chat') }}
     </Button>
     <div class="w-full border-b border-gray-200 dark:border-gray-700"/>
     <div class="absolute w-full h-full flex flex-col items-center justify-center bg-gray-100/50 dark:bg-gray-700/50 z-10" v-if="agentStore.isResponseInProgress">
       <Spinner class="w-8 h-8" v-if="agentStore.isResponseInProgress" />
-      <p class="mt-2 text-gray-800 dark:text-gray-200">generation in progress...</p>
+      <p class="mt-2 text-gray-800 dark:text-gray-200">{{ $t('Generation in progress...') }}</p>
     </div>
     <div v-for="group in groupedSessions" :key="group.dayKey" class="w-full py-2">
       <div class="px-4 pb-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
@@ -38,7 +38,7 @@
       v-if="!groupedSessions || groupedSessions.length === 0"
       class="w-full h-full flex items-center justify-center text-gray-800 dark:text-gray-200"
     >
-      There is no previous chat sessions
+      {{ $t('There are no previous chat sessions') }}
     </p>
   </div>
 </template>

package/dist/custom/ToolRenderer.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="props.data?.toolInfo" class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 text-lightListTableHeadingText dark:text-darkListTableHeadingText">
+  <div 
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl p-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
+    @click="isInputOutputExpanded = !isInputOutputExpanded"
+  >
     <div class="flex items-center gap-3">
       <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
         <Spinner v-if="isRunning" class="h-4 w-4" />
@@ -18,8 +21,7 @@
       <IconAngleDownOutline
         v-if="hasToolSections"
         :class="isInputOutputExpanded ? 'rotate-180' : 'rotate-0'"
-        class="cursor-pointer transition-transform duration-200 hover:scale-105 hover:opacity-75"
-        @click="isInputOutputExpanded = !isInputOutputExpanded"
+        class="cursor-pointer transition-transform duration-200 hover:scale-105"
       />
     </div>
     <transition name="expand">

package/dist/custom/ToolsGroup.vue

@@ -1,8 +1,9 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
-    <div v-if="group.groupedTools.length > 1" class="mb-4 flex flex-col">
-      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5" @click="toggleGroup(group.title)">
-        - {{ group.title }} {{ 'x' + group.groupedTools.length }} 
+    <div v-if="group.groupedTools.length > 1" class="flex flex-col">
+      <div class="flex items-center gap-2 p-2 m-2 cursor-pointer hover:opacity-75 break-all font-mono text-sm leading-5 text-lightListTableHeadingText dark:text-darkListTableHeadingText" @click="toggleGroup(group.title)">
+        <IconMinusOutline  class="w-6 h-6 p-1"/> 
+        {{ group.title }} {{ 'x' + group.groupedTools.length }} 
         <IconAngleDownOutline 
           class="transition-transform duration-200 hover:scale-105 hover:opacity-75"
           :class="expandedGroups.includes(group.title) ? 'rotate-180' : 'rotate-0'"
@@ -10,7 +11,7 @@
       </div>
       <transition name="expand">
         <div v-show="expandedGroups.includes(group.title)" class="flex flex-col"> 
-        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" />
+        <ToolRenderer v-for="part in group.groupedTools" :key="part.text + part.type" :data="part" class="ml-8"/>
         </div>
       </transition>
     </div>
@@ -24,7 +25,7 @@ import { Tool } from 'langchain';
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {

package/dist/custom/useAgentStore.ts

@@ -120,6 +120,10 @@ export const useAgentStore = defineStore('agent', () => {
   });
   const blockCloseOfChat = ref(false);
 
+  function sortSessionsListByTimestamp(sessionsList: ISessionsListItem[]) {
+    return [...sessionsList].sort((a: ISessionsListItem, b: ISessionsListItem) => b.timestamp.localeCompare(a.timestamp));
+  }
+
   async function sendMessage() {
     const message = trimmedUserMessage.value;
     if (!message || isResponseInProgress.value) {
@@ -128,6 +132,11 @@ export const useAgentStore = defineStore('agent', () => {
     if (!currentSession.value || currentSession.value.sessionId === 'pre-session') {
       await createNewSession(message);
     }
+    currentSession.value.timestamp = new Date().toISOString();
+    sessionList.value = sortSessionsListByTimestamp(sessionList.value.map((s: ISessionsListItem) => s.sessionId === currentSession.value?.sessionId ? {
+      ...s,
+      timestamp: currentSession.value?.timestamp || s.timestamp,
+    } : s));
     lastMessage.value = message;
     currentChat.value?.sendMessage({
       text: message,

package/dist/index.js

@@ -71,6 +71,14 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
             return { ok: true };
         });
     }
+    updateSessionDate(sessionId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.adminforth.resource(this.options.sessionResource.resourceId).update(sessionId, {
+                [this.options.sessionResource.createdAtField]: new Date().toISOString(),
+            });
+            return { ok: true };
+        });
+    }
     getSessionTurns(sessionId) {
         return __awaiter(this, void 0, void 0, function* () {
             const turns = yield this.adminforth.resource(this.options.turnResource.resourceId).list([Filters.EQ(this.options.turnResource.sessionIdField, sessionId)], undefined, undefined, [Sorts.ASC(this.options.turnResource.createdAtField)]);
@@ -134,6 +142,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
                 const userTimeZone = (_e = body.timeZone) !== null && _e !== void 0 ? _e : 'UTC';
                 const sessionId = body.sessionId || (adminUser === null || adminUser === void 0 ? void 0 : adminUser.pk) || (adminUser === null || adminUser === void 0 ? void 0 : adminUser.username) || 'default';
                 const turnId = yield this.createNewTurn(sessionId, prompt);
+                yield this.updateSessionDate(sessionId);
                 let fullResponse = "";
                 let isStreamClosed = false;
                 const sequenceDebugCollector = createSequenceDebugCollector();

package/index.ts

@@ -87,6 +87,13 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
     return {ok: true};
   }
 
+  private async updateSessionDate(sessionId: string) {
+    await this.adminforth.resource(this.options.sessionResource.resourceId).update(sessionId, {
+      [this.options.sessionResource.createdAtField]: new Date().toISOString(),
+    });
+    return {ok: true};
+  }
+
   private async getSessionTurns(sessionId: string) {
     const turns = await this.adminforth.resource(this.options.turnResource.resourceId).list(
       [Filters.EQ(this.options.turnResource.sessionIdField, sessionId)],
@@ -150,6 +157,7 @@ export default class AdminForthAgentPlugin extends AdminForthPlugin {
         const userTimeZone = (body.timeZone as string | undefined) ?? 'UTC';
         const sessionId = body.sessionId || adminUser?.pk || adminUser?.username || 'default';
         const turnId = await this.createNewTurn(sessionId, prompt);
+        await this.updateSessionDate(sessionId);
         let fullResponse = "";
         let isStreamClosed = false;
         const sequenceDebugCollector = createSequenceDebugCollector();

package/package.json

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