@adminforth/agent 1.22.0 → 1.22.2

package/build.log

@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 199,171 bytes  received 562 bytes  399,466.00 bytes/sec
-total size is 196,867  speedup is 0.99
+sent 199,703 bytes  received 562 bytes  400,530.00 bytes/sec
+total size is 197,399  speedup is 0.99

package/custom/ChatSurface.vue

@@ -195,6 +195,7 @@ const props = defineProps<{
     defaultModeName: string | null;
     stickByDefault: boolean;
   }
+  adminUser: any
 }>();
 
 const chatSurface = useTemplateRef('chatSurface');

package/custom/SessionsHistory.vue

@@ -8,7 +8,7 @@
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
     <div class="w-full flex items-center justify-center">
       <Button 
-        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
+        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput(); recalculateScroll();" 
         :disabled="agentStore.isResponseInProgress" 
         class="w-[90%] my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200"
       >
@@ -34,7 +34,7 @@
           'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 
           'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress,
          }"
-        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
+        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false); recalculateScroll();"
         :disabled="agentStore.isResponseInProgress"
       >
         <p class="truncate">{{ session.title || session.sessionId }}</p>
@@ -99,4 +99,13 @@ const groupedSessions = computed(() => {
   return Array.from(groups.values());
 });
 
+const emit = defineEmits<{
+  (e: 'recalculateScroll'): void
+}>()
+
+function recalculateScroll() {
+  // Emit an event to notify the parent component to recalculate scroll
+  emit('recalculateScroll');
+}
+
 </script>

package/custom/composables/useAgentStore.ts

@@ -524,10 +524,8 @@ export const useAgentStore = defineStore('agent', () => {
     if (!sessions.value[sessionId]) {
       await fetchSession(sessionId);    
     }
-    console.log('Set active session from sessions', sessionId, sessions.value[sessionId]);
     currentSession.value = sessions.value[sessionId];
     setCurrentChat(sessionId);
-    console.log('Set active session chat', sessionId, currentSession.value);
     currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
       role: m.role,
       parts:[{

package/custom/conversation_area/ConversationArea.vue

@@ -9,6 +9,7 @@
   
   <SessionsHistory 
     :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
+    @recalculateScroll="recalculateScroll"
   />
   <div 
     v-if="agentStore.isSessionHistoryOpen"
@@ -51,18 +52,19 @@
 
 
 <script setup lang="ts">
-import Message from './Message.vue';
 import type { IMessage, IPart } from '../types';
-import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed } from 'vue';
+import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
-import ToolsGroup from './ToolsGroup.vue';
 import { useAgentTransitions } from '../composables/useAgentTransitions';
-import { getMessageParts } from '../utils';
 import MessageRenderer from './MessageRenderer.vue';
 import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
 
+const props = defineProps<{
+  messages: IMessage[]
+}>();
+
 const scrollContainer = useTemplateRef('scrollContainer');
 const showScrollToBottomButton = ref(false);
 const innerScrollContainerRef = ref(null);
@@ -101,9 +103,4 @@ watch(clicks, () => {
 })
 
 
-
-const props = defineProps<{
-  messages: IMessage[]
-}>();
-
 </script>

package/custom/conversation_area/ProcessingTimeline.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="ToolOrReasoningParts.length > 0 || isResponseInProgress || showFakeThinkingMessage">
     <div 
-      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm"
+      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm text-listTableHeadingText dark:text-darkListTableHeadingText"
       @click="isExpanded = !isExpanded"
     >
       Thoughts
@@ -20,7 +20,7 @@
         v-show="isExpanded"
         class="mask-y"
       >
-        <ol class="ml-8 relative border-l border-l-2 border-black border-default">
+        <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
             <ToolsGroup v-else :toolGroup="groupToolCallParts(message, part)" />

package/custom/conversation_area/ReasoningRenderer.vue

@@ -1,11 +1,11 @@
 <template>
-  <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+  <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText 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">
       <IconBrainOutline class="w-4 h-4" />
     </div>
   </span>
   <h3 
-    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80"      
+    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
     @click="isExpanded = !isExpanded"
   >
     <span class="font-semibold">{{ reasoningTitle }}</span>

package/custom/conversation_area/ThreeDotsAnimation.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
+  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
 </template>
 
 <style scoped>

package/custom/conversation_area/ToolRenderer.vue

@@ -19,7 +19,7 @@
       class="flex items-center gap-1 cursor-pointer"     
       @click="toggleInputOutput()"
     >
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
+      <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 class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
       </div>

package/custom/conversation_area/ToolsGroup.vue

@@ -1,12 +1,12 @@
 <template >
   <template v-if="toolGroup.length > 0">
-    <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+    <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"      
+      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 ">Call tools</span>
     </h3>

package/dist/custom/ChatSurface.vue

@@ -195,6 +195,7 @@ const props = defineProps<{
     defaultModeName: string | null;
     stickByDefault: boolean;
   }
+  adminUser: any
 }>();
 
 const chatSurface = useTemplateRef('chatSurface');

package/dist/custom/SessionsHistory.vue

@@ -8,7 +8,7 @@
     <h3 :class="h3Style">{{ $t('Chat history') }}</h3>
     <div class="w-full flex items-center justify-center">
       <Button 
-        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
+        @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput(); recalculateScroll();" 
         :disabled="agentStore.isResponseInProgress" 
         class="w-[90%] my-2 mb-4 rounded-3xl text-gray-800 dark:text-gray-200"
       >
@@ -34,7 +34,7 @@
           'bg-lightPrimary/20 hover:bg-lightPrimary/20 dark:bg-darkPrimary/20 dark:hover:bg-darkPrimary/20': agentStore.activeSessionId === session.sessionId, 
           'cursor-default opacity-50 pointer-events-none': agentStore.isResponseInProgress,
          }"
-        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false);"
+        @click="agentStore.setActiveSession(session.sessionId); agentStore.setSessionHistoryOpen(false); recalculateScroll();"
         :disabled="agentStore.isResponseInProgress"
       >
         <p class="truncate">{{ session.title || session.sessionId }}</p>
@@ -99,4 +99,13 @@ const groupedSessions = computed(() => {
   return Array.from(groups.values());
 });
 
+const emit = defineEmits<{
+  (e: 'recalculateScroll'): void
+}>()
+
+function recalculateScroll() {
+  // Emit an event to notify the parent component to recalculate scroll
+  emit('recalculateScroll');
+}
+
 </script>

package/dist/custom/composables/useAgentStore.ts

@@ -524,10 +524,8 @@ export const useAgentStore = defineStore('agent', () => {
     if (!sessions.value[sessionId]) {
       await fetchSession(sessionId);    
     }
-    console.log('Set active session from sessions', sessionId, sessions.value[sessionId]);
     currentSession.value = sessions.value[sessionId];
     setCurrentChat(sessionId);
-    console.log('Set active session chat', sessionId, currentSession.value);
     currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
       role: m.role,
       parts:[{

package/dist/custom/conversation_area/ConversationArea.vue

@@ -9,6 +9,7 @@
   
   <SessionsHistory 
     :class="agentStore.isSessionHistoryOpen ? 'translate-x-0' : '-translate-x-full'"
+    @recalculateScroll="recalculateScroll"
   />
   <div 
     v-if="agentStore.isSessionHistoryOpen"
@@ -51,18 +52,19 @@
 
 
 <script setup lang="ts">
-import Message from './Message.vue';
 import type { IMessage, IPart } from '../types';
-import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed } from 'vue';
+import { useTemplateRef, ref, defineAsyncComponent, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
 import { IconArrowDownOutline } from '@iconify-prerendered/vue-flowbite';
 import SessionsHistory from '../SessionsHistory.vue';
 import { useAgentStore } from '../composables/useAgentStore';
-import ToolsGroup from './ToolsGroup.vue';
 import { useAgentTransitions } from '../composables/useAgentTransitions';
-import { getMessageParts } from '../utils';
 import MessageRenderer from './MessageRenderer.vue';
 import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
 
+const props = defineProps<{
+  messages: IMessage[]
+}>();
+
 const scrollContainer = useTemplateRef('scrollContainer');
 const showScrollToBottomButton = ref(false);
 const innerScrollContainerRef = ref(null);
@@ -101,9 +103,4 @@ watch(clicks, () => {
 })
 
 
-
-const props = defineProps<{
-  messages: IMessage[]
-}>();
-
 </script>

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="ToolOrReasoningParts.length > 0 || isResponseInProgress || showFakeThinkingMessage">
     <div 
-      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm"
+      class="ml-2 px-4 flex items-center gap-1 cursor-pointer select-none hover:opacity-80 tracking-wide font-medium text-sm text-listTableHeadingText dark:text-darkListTableHeadingText"
       @click="isExpanded = !isExpanded"
     >
       Thoughts
@@ -20,7 +20,7 @@
         v-show="isExpanded"
         class="mask-y"
       >
-        <ol class="ml-8 relative border-l border-l-2 border-black border-default">
+        <ol class="ml-8 relative border-l border-l-2 border-black border-default border-listTableHeadingText dark:border-darkListTableHeadingText">
           <li class="mb-6 ms-2 z-50" v-for="(part, index) in ToolOrReasoningParts" :key="index"> 
             <ReasoningRenderer v-if="part.type === 'reasoning'" :state="part.state" :text="part.text" />
             <ToolsGroup v-else :toolGroup="groupToolCallParts(message, part)" />

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -1,11 +1,11 @@
 <template>
-  <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+  <span class="bg-lightNavbar dark:bg-darkNavbar absolute flex items-center text-listTableHeadingText dark:text-darkListTableHeadingText 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">
       <IconBrainOutline class="w-4 h-4" />
     </div>
   </span>
   <h3 
-    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80"      
+    class="flex items-center mb-1 text-sm my-2 ml-3 gap-1 cursor-pointer select-none hover:opacity-80 text-listTableHeadingText dark:text-darkListTableHeadingText"      
     @click="isExpanded = !isExpanded"
   >
     <span class="font-semibold">{{ reasoningTitle }}</span>

package/dist/custom/conversation_area/ThreeDotsAnimation.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary"></span>
-  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary"></span>
+  <span class="bounce-dot1 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot2 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
+  <span class="bounce-dot3 rounded-full w-2 h-2 bg-lightPrimary dark:bg-darkPrimary"></span>
 </template>
 
 <style scoped>

package/dist/custom/conversation_area/ToolRenderer.vue

@@ -19,7 +19,7 @@
       class="flex items-center gap-1 cursor-pointer"     
       @click="toggleInputOutput()"
     >
-      <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/70 dark:bg-blue-700/20">
+      <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 class="h-4 w-4 text-lightPrimary dark:text-darkPrimary" />
       </div>

package/dist/custom/conversation_area/ToolsGroup.vue

@@ -1,12 +1,12 @@
 <template >
   <template v-if="toolGroup.length > 0">
-    <span class="bg-lightNavbar absolute flex items-center justify-center w-5 h-5 bg-brand-softer rounded-full -start-[0.68rem] ring-4 ring-lightNavbar ring-default">
+    <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"      
+      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 ">Call tools</span>
     </h3>

package/package.json

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