Merge branch 'main' of https://github.com/devforth/adminforth-agent

Author: NoOne7135

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;
 }
 

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' 

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>

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">

custom/ToolsGroup.vue

@@ -1,16 +1,17 @@
 <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'"
         />
       </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: {

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,

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();