@adminforth/agent 1.27.2 → 1.27.3

package/build.log

@@ -38,5 +38,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 208,293 bytes  received 562 bytes  417,710.00 bytes/sec
-total size is 206,013  speedup is 0.99
+sent 207,560 bytes  received 562 bytes  416,244.00 bytes/sec
+total size is 205,246  speedup is 0.99

package/custom/SessionsHistory.vue

@@ -55,18 +55,9 @@ import { useAgentStore } from './composables/useAgentStore';
 const agentStore = useAgentStore();
 
 const h3Style = "text-gray-800 dark:text-gray-200 font-medium text-xl tracking-widest my-2"
-
 const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
 const dayLabelWithYearFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
 
-function getLocalDayKey(date: Date) {
-  const year = date.getFullYear();
-  const month = `${date.getMonth() + 1}`.padStart(2, '0');
-  const day = `${date.getDate()}`.padStart(2, '0');
-
-  return `${year}-${month}-${day}`;
-}
-
 const groupedSessions = computed(() => {
   const groups = new Map<string, { dayKey: string; label: string; sessions: ISessionsListItem[] }>();
 
@@ -91,4 +82,13 @@ const groupedSessions = computed(() => {
   return Array.from(groups.values());
 });
 
+
+function getLocalDayKey(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
 </script>

package/custom/conversation_area/ConversationArea.vue

@@ -89,9 +89,8 @@ const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const showScrollContainer = ref(true);
 const chatContainerRef = ref<HTMLElement | null>(null);
-
 const messagesRefs = ref<Array<HTMLElement | null>>([]);
-
+const useWaitingForHeight = ref(false);
 
 /*
 * Whenever user sends a message, it adds a bottom spacer, that takes the remaining height
@@ -116,15 +115,60 @@ let messageResizeObserver: ResizeObserver | null = null;
 let observedLastUserMessageElement: HTMLElement | null = null;
 let observedLastAgentMessageElement: HTMLElement | null = null;
 
-function resetSpacer() {
-  showBottomSpacer.value = false;
-  spacerHeight.value = 0;
-}
+onMounted(async () => {
+  messageResizeObserver = new ResizeObserver(() => {
+    updateSpacerHeight();
+  });
+
+  await import('@incremark/theme/styles.css')
+  await agentStore.fetchPlaceholderMessages()
+  await refreshSpacerTracking();
+});
+
+onUnmounted(() => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  stopObservingLastMessages();
+  messageResizeObserver?.disconnect();
+  agentStore.stopPlaceholderAnimation();
+});
 
 watch(() => agentStore.activeSessionId, () => {
   resetSpacer();
 });
 
+watch(() => agentStore.activeSessionId, async () => {
+  showScrollContainer.value = false;
+  await nextTick();
+  showScrollContainer.value = true;
+  await refreshSpacerTracking();
+  recalculateScroll();
+});
+
+watch(() => props.messages.length, async () => {
+  await refreshSpacerTracking();
+});
+
+watch(scrollContainer, async () => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  if (scrollContainer.value) {
+    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
+
+    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
+    await refreshSpacerTracking();
+  }
+})
+
+function resetSpacer() {
+  showBottomSpacer.value = false;
+  spacerHeight.value = 0;
+}
+
 function getLastMessageElement(role: 'user' | 'assistant') {
   const lastMessageIndex = props.messages.findLastIndex((message: IMessage) => message.role === role);
   return messagesRefs.value[lastMessageIndex] ?? null;
@@ -156,7 +200,6 @@ async function waitForRealHeight(role: 'user' | 'assistant'): Promise<number> {
   });
 }
 
-const useWaitingForHeight = ref(false);
 async function updateSpacerHeight() {
   if (!showBottomSpacer.value) {
     return;
@@ -238,51 +281,4 @@ function recalculateScroll() {
   }
 }
 
-watch(() => agentStore.activeSessionId, async () => {
-  showScrollContainer.value = false;
-  await nextTick();
-  showScrollContainer.value = true;
-  await refreshSpacerTracking();
-  recalculateScroll();
-});
-
-watch(() => props.messages.length, async () => {
-  await refreshSpacerTracking();
-});
-
-onMounted(async () => {
-  messageResizeObserver = new ResizeObserver(() => {
-    updateSpacerHeight();
-  });
-
-  await import('@incremark/theme/styles.css')
-  await agentStore.fetchPlaceholderMessages()
-  await refreshSpacerTracking();
-});
-
-onUnmounted(() => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  stopObservingLastMessages();
-  messageResizeObserver?.disconnect();
-  agentStore.stopPlaceholderAnimation();
-});
-
-watch(scrollContainer, async () => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
-
-    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
-    await refreshSpacerTracking();
-  }
-})
-
-
-
 </script>

package/custom/conversation_area/ProcessingTimeline.vue

@@ -4,7 +4,7 @@
       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
+      {{ $t('Thoughts') }}
       <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
       <ThreeDotsAnimation v-if="isResponseInProgress || showFakeThinkingMessage" />
       <IconAngleDownOutline 
@@ -59,11 +59,27 @@
   const thinkingDuration = ref(0);
   const scrollContainerRef = ref<InstanceType<typeof CustomAutoScrollContainer> | null>(null);
   const innerScrollContainerRef = ref<HTMLElement | null>(null);
+  const isExpanded = ref(true);
+  const ToolOrReasoningParts = computed(() => {
+    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
+  });
+  const isResponseInProgress = computed(() =>{
+    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
+  });
+  
+  const showFakeThinkingMessage = computed(() => {
+    if (props.message.parts.length === 0) return true;
+    return false;
+  })
 
   onMounted(() => {
     thinkingStartTime.value = Date.now();
   })
 
+  onUnmounted(() => {
+    scrollContainerRef.value?.container.scrollEl?.removeEventListener('scroll', handleScroll);
+  })
+
   watch(scrollContainerRef, async () => {
     if (innerScrollContainerRef.value) {
       innerScrollContainerRef.value.removeEventListener('scroll', handleScroll);
@@ -75,34 +91,12 @@
     }
   })
 
-  onUnmounted(() => {
-    scrollContainerRef.value?.container.scrollEl?.removeEventListener('scroll', handleScroll);
-  })
-
-  function handleScroll() {
-    scrollContainerRef.value?.handleScroll();
-  }
-
-  const ToolOrReasoningParts = computed(() => {
-    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
-  });
-  const isExpanded = ref(true);
-
-  const isResponseInProgress = computed(() =>{
-    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
-  });
-  
   watch(isResponseInProgress, (newValue: boolean) => {
     if (!newValue) {
       isExpanded.value = false;
       thinkingDuration.value = Date.now() - (thinkingStartTime.value ?? Date.now());
     }
   });
-  
-  const showFakeThinkingMessage = computed(() => {
-    if (props.message.parts.length === 0) return true;
-    return false;
-  })
 
   const formatToolCallPart = (part: IPart, currentMessage: IMessage): IFormattedToolCallPart | null => {
     if (part.type !== 'data-tool-call' || part.data?.phase !== 'start') {
@@ -182,7 +176,9 @@
     return groupedParts;
   };
 
-
+  function handleScroll() {
+    scrollContainerRef.value?.handleScroll();
+  }
 </script>
 
 <style scoped>

package/custom/conversation_area/ReasoningRenderer.vue

@@ -35,17 +35,16 @@ import type { IPart } from '../types';
 import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
 import { extractTitleAndTextFromReasoning } from '../utils';
-import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
-
-const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
 
 const props = defineProps<{
   state?: IPart['state']
   text?: string
 }>();
 
-const isStreaming = computed(() => props.state === 'streaming');
+const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
+
 const isExpanded = ref(true);
+const isStreaming = computed(() => props.state === 'streaming');
 const parsedReasoning = computed(() => extractTitleAndTextFromReasoning(props.text ?? ''));
 const reasoningTitle = computed(() => parsedReasoning.value.title ?? '');
 const reasoningText = computed(() => parsedReasoning.value.body);
@@ -56,8 +55,6 @@ watch(() => props.state, (newValue: IPart['state']) => {
   } 
 });
 
-
-
 </script>
 
 

package/custom/conversation_area/TextRenderer.vue

@@ -17,27 +17,43 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      Error occurred
+      {{ $t('Error occurred') }}
     </p>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">const isExpanded = ref(true);
+
   import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
   import { useAgentStore } from '../composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
 
+  const props = defineProps<{
+    message: string | undefined,
+    state: string | undefined,
+    role: 'user' | 'assistant'
+  }>();
+
+  const emit = defineEmits(['toggle-thoughts']);
+
   const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
   const ShikiCodeBlock = defineAsyncComponent(() => import('../incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
 
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
+  const router = useRouter();
+
+  const isThoughtsExpanded = ref(true);
+
+  const content = computed(() => props.message)
+  const isFinished = computed(() => props.state === 'done')
+  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
+  const isStateStreaming = computed(() => props.state === 'streaming')
 
   const incremarkComponents = {
     code: ShikiCodeBlock,
   };
-
   const incremarkOptions = {
 		gfm: true,
 		math: { tex: true },
@@ -45,27 +61,10 @@
 		htmlTree: true,
 	};
 
-  const router = useRouter();
-
   onMounted(async () => {
     void import('katex/dist/katex.min.css')
   })
 
-  const props = defineProps<{
-    message: string | undefined,
-    state: string | undefined,
-    role: 'user' | 'assistant'
-  }>();
-
-  const emit = defineEmits(['toggle-thoughts']);
-
-  const content = computed(() => props.message)
-  const isFinished = computed(() => props.state === 'done')
-  const isThoughtsExpanded = ref(true);
-  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
-
-  const isStateStreaming = computed(() => props.state === 'streaming')
-
   watch(isStateStreaming, (newValue: boolean) => {
     if (!newValue) {
       isThoughtsExpanded.value = false;
@@ -125,12 +124,6 @@
 
 </script>
 
-<style lang="scss">
-  .incremark-paragraph {
-    margin: 8px 0;
-  }
-</style>
-
 <style lang="scss">
 .incremark a.incremark-link,
 .incremark a.incremark-link:visited {
@@ -173,4 +166,8 @@ a.incremark-link::after {
 .incremark-list {
   list-style: disc;
 }
+
+.incremark-paragraph {
+  margin: 8px 0;
+}
 </style>

package/custom/conversation_area/ToolRenderer.vue

@@ -24,10 +24,6 @@
       </div>
 
       <div class="min-w-0">
-        <!-- <p class="text-xs text-gray-500 dark:text-gray-400 font-bold">
-          {{ statusLabel }}
-          <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
-        </p> -->
         <p class="break-all font-mono text-sm leading-5 text-nowrap">
           {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
         </p>
@@ -67,27 +63,57 @@
   import { Spinner } from '@/afcl';
   import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
+  const props = defineProps<{
+    data: IFormattedToolCallPart
+  }>();
+
+  interface IToolSection {
+    label: string;
+    lines: Array<{
+      number: number;
+      content: string;
+    }>;
+  }
+
   const isInputOutputExpanded = ref(false);
   const activateShrinkedStyle = ref(true);
-  const isAnimatingShrinkFinal = ref(false);
   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 toolSections = computed<IToolSection[]>(() => {
+    const sections = [
+      {
+        label: 'Input',
+        content: normalizeToolPayload(props.data.toolInfo.input),
+      },
+      {
+        label: 'Output',
+        content: normalizeToolPayload(props.data.toolInfo.output),
+      },
+    ];
+
+    return sections
+      .filter((section): section is { label: string; content: string } => Boolean(section.content))
+      .map(section => ({
+        label: section.label,
+        lines: section.content.split('\n').map((content, index) => ({
+          number: index + 1,
+          content,
+        })),
+      }));
+  });
+  const hasToolSections = computed(() => toolSections.value.length > 0);
+
   onMounted(() => {
     if (toolRendererRef.value) {
       toolRendererInitialWidth.value = toolRendererRef.value.offsetWidth;
     }
   });  
 
-  function finishTransition() {
-    if (!isInputOutputExpanded.value) {
-      activateFullWidth.value = false;
-      activateShrinkedStyle.value = true;
-    }
-  }
   watch(isInputOutputExpanded, (newValue) => {
     if (newValue) {
       activateShrinkedStyle.value = false;
@@ -95,6 +121,13 @@
     }
   });
 
+  function finishTransition() {
+    if (!isInputOutputExpanded.value) {
+      activateFullWidth.value = false;
+      activateShrinkedStyle.value = true;
+    }
+  }
+
   function toggleInputOutput() {
     if (blockClicksDuringAnimation.value) return;
     isInputOutputExpanded.value = !isInputOutputExpanded.value;
@@ -104,21 +137,6 @@
     }, ANIMATION_DURATION);
   }
 
-  interface IToolSection {
-    label: string;
-    lines: Array<{
-      number: number;
-      content: string;
-    }>;
-  }
-
-  const props = defineProps<{
-    data: IFormattedToolCallPart
-  }>();
-
-  const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
-  const statusLabel = computed(() => isRunning.value ? 'Running tool' : 'Tool finished');
-
   const normalizeToolPayload = (value: unknown): string | null => {
     if (value === null || value === undefined || value === '') {
       return null;
@@ -131,30 +149,6 @@
     return JSON.stringify(value, null, 2);
   };
 
-  const toolSections = computed<IToolSection[]>(() => {
-    const sections = [
-      {
-        label: 'Input',
-        content: normalizeToolPayload(props.data.toolInfo.input),
-      },
-      {
-        label: 'Output',
-        content: normalizeToolPayload(props.data.toolInfo.output),
-      },
-    ];
-
-    return sections
-      .filter((section): section is { label: string; content: string } => Boolean(section.content))
-      .map(section => ({
-        label: section.label,
-        lines: section.content.split('\n').map((content, index) => ({
-          number: index + 1,
-          content,
-        })),
-      }));
-  });
-
-  const hasToolSections = computed(() => toolSections.value.length > 0);
 </script>
 
 

package/custom/conversation_area/ToolsGroup.vue

@@ -9,7 +9,7 @@
       <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 ">Call tools</span>
+        <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">
@@ -23,24 +23,12 @@
 <script setup lang="ts">
 import ToolRenderer from './ToolRenderer.vue';
 import type { IToolGroup } from '../types';
-import { ref } from 'vue';
 import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
 
-
 const props = defineProps<{
   toolGroup: IToolGroup[]
 }>();
 
-const expandedGroups = ref<string[]>([]);
-
-function toggleGroup(groupTitle: string) {
-  if (expandedGroups.value.includes(groupTitle)) {
-    expandedGroups.value = expandedGroups.value.filter((title: string) => title !== groupTitle);
-  } else {
-    expandedGroups.value.push(groupTitle);
-  }
-}
-
 </script>
 
 <style scoped>

package/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -12,7 +12,7 @@
         :disabled="!sourceCode"
         @click="copyCode"
       >
-        {{ copied ? 'Copied' : 'Copy' }}
+        {{ copied ? $t('Copied') : $t('Copy') }}
       </button>
     </div>
 

package/dist/custom/SessionsHistory.vue

@@ -55,18 +55,9 @@ import { useAgentStore } from './composables/useAgentStore';
 const agentStore = useAgentStore();
 
 const h3Style = "text-gray-800 dark:text-gray-200 font-medium text-xl tracking-widest my-2"
-
 const dayLabelFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
 const dayLabelWithYearFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
 
-function getLocalDayKey(date: Date) {
-  const year = date.getFullYear();
-  const month = `${date.getMonth() + 1}`.padStart(2, '0');
-  const day = `${date.getDate()}`.padStart(2, '0');
-
-  return `${year}-${month}-${day}`;
-}
-
 const groupedSessions = computed(() => {
   const groups = new Map<string, { dayKey: string; label: string; sessions: ISessionsListItem[] }>();
 
@@ -91,4 +82,13 @@ const groupedSessions = computed(() => {
   return Array.from(groups.values());
 });
 
+
+function getLocalDayKey(date: Date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
 </script>

package/dist/custom/conversation_area/ConversationArea.vue

@@ -89,9 +89,8 @@ const agentStore = useAgentStore();
 const agentTransitions = useAgentTransitions();
 const showScrollContainer = ref(true);
 const chatContainerRef = ref<HTMLElement | null>(null);
-
 const messagesRefs = ref<Array<HTMLElement | null>>([]);
-
+const useWaitingForHeight = ref(false);
 
 /*
 * Whenever user sends a message, it adds a bottom spacer, that takes the remaining height
@@ -116,15 +115,60 @@ let messageResizeObserver: ResizeObserver | null = null;
 let observedLastUserMessageElement: HTMLElement | null = null;
 let observedLastAgentMessageElement: HTMLElement | null = null;
 
-function resetSpacer() {
-  showBottomSpacer.value = false;
-  spacerHeight.value = 0;
-}
+onMounted(async () => {
+  messageResizeObserver = new ResizeObserver(() => {
+    updateSpacerHeight();
+  });
+
+  await import('@incremark/theme/styles.css')
+  await agentStore.fetchPlaceholderMessages()
+  await refreshSpacerTracking();
+});
+
+onUnmounted(() => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  stopObservingLastMessages();
+  messageResizeObserver?.disconnect();
+  agentStore.stopPlaceholderAnimation();
+});
 
 watch(() => agentStore.activeSessionId, () => {
   resetSpacer();
 });
 
+watch(() => agentStore.activeSessionId, async () => {
+  showScrollContainer.value = false;
+  await nextTick();
+  showScrollContainer.value = true;
+  await refreshSpacerTracking();
+  recalculateScroll();
+});
+
+watch(() => props.messages.length, async () => {
+  await refreshSpacerTracking();
+});
+
+watch(scrollContainer, async () => {
+  if (innerScrollContainerRef.value) {
+    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
+  }
+
+  if (scrollContainer.value) {
+    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
+
+    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
+    await refreshSpacerTracking();
+  }
+})
+
+function resetSpacer() {
+  showBottomSpacer.value = false;
+  spacerHeight.value = 0;
+}
+
 function getLastMessageElement(role: 'user' | 'assistant') {
   const lastMessageIndex = props.messages.findLastIndex((message: IMessage) => message.role === role);
   return messagesRefs.value[lastMessageIndex] ?? null;
@@ -156,7 +200,6 @@ async function waitForRealHeight(role: 'user' | 'assistant'): Promise<number> {
   });
 }
 
-const useWaitingForHeight = ref(false);
 async function updateSpacerHeight() {
   if (!showBottomSpacer.value) {
     return;
@@ -238,51 +281,4 @@ function recalculateScroll() {
   }
 }
 
-watch(() => agentStore.activeSessionId, async () => {
-  showScrollContainer.value = false;
-  await nextTick();
-  showScrollContainer.value = true;
-  await refreshSpacerTracking();
-  recalculateScroll();
-});
-
-watch(() => props.messages.length, async () => {
-  await refreshSpacerTracking();
-});
-
-onMounted(async () => {
-  messageResizeObserver = new ResizeObserver(() => {
-    updateSpacerHeight();
-  });
-
-  await import('@incremark/theme/styles.css')
-  await agentStore.fetchPlaceholderMessages()
-  await refreshSpacerTracking();
-});
-
-onUnmounted(() => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  stopObservingLastMessages();
-  messageResizeObserver?.disconnect();
-  agentStore.stopPlaceholderAnimation();
-});
-
-watch(scrollContainer, async () => {
-  if (innerScrollContainerRef.value) {
-    innerScrollContainerRef.value.removeEventListener('scroll', recalculateScroll);
-  }
-
-  if (scrollContainer.value) {
-    innerScrollContainerRef.value = scrollContainer.value.container.scrollEl;
-
-    innerScrollContainerRef.value.addEventListener('scroll', recalculateScroll);
-    await refreshSpacerTracking();
-  }
-})
-
-
-
 </script>

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -4,7 +4,7 @@
       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
+      {{ $t('Thoughts') }}
       <span v-if="thinkingDuration > 0">({{ (thinkingDuration/1000).toFixed(2) }} s)</span>
       <ThreeDotsAnimation v-if="isResponseInProgress || showFakeThinkingMessage" />
       <IconAngleDownOutline 
@@ -59,11 +59,27 @@
   const thinkingDuration = ref(0);
   const scrollContainerRef = ref<InstanceType<typeof CustomAutoScrollContainer> | null>(null);
   const innerScrollContainerRef = ref<HTMLElement | null>(null);
+  const isExpanded = ref(true);
+  const ToolOrReasoningParts = computed(() => {
+    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
+  });
+  const isResponseInProgress = computed(() =>{
+    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
+  });
+  
+  const showFakeThinkingMessage = computed(() => {
+    if (props.message.parts.length === 0) return true;
+    return false;
+  })
 
   onMounted(() => {
     thinkingStartTime.value = Date.now();
   })
 
+  onUnmounted(() => {
+    scrollContainerRef.value?.container.scrollEl?.removeEventListener('scroll', handleScroll);
+  })
+
   watch(scrollContainerRef, async () => {
     if (innerScrollContainerRef.value) {
       innerScrollContainerRef.value.removeEventListener('scroll', handleScroll);
@@ -75,34 +91,12 @@
     }
   })
 
-  onUnmounted(() => {
-    scrollContainerRef.value?.container.scrollEl?.removeEventListener('scroll', handleScroll);
-  })
-
-  function handleScroll() {
-    scrollContainerRef.value?.handleScroll();
-  }
-
-  const ToolOrReasoningParts = computed(() => {
-    return props.message.parts.filter((part: IPart) => part.type === 'data-tool-call' || part.type === 'reasoning');
-  });
-  const isExpanded = ref(true);
-
-  const isResponseInProgress = computed(() =>{
-    return props.isLastMessageInChat && agentStore.isResponseInProgress; 
-  });
-  
   watch(isResponseInProgress, (newValue: boolean) => {
     if (!newValue) {
       isExpanded.value = false;
       thinkingDuration.value = Date.now() - (thinkingStartTime.value ?? Date.now());
     }
   });
-  
-  const showFakeThinkingMessage = computed(() => {
-    if (props.message.parts.length === 0) return true;
-    return false;
-  })
 
   const formatToolCallPart = (part: IPart, currentMessage: IMessage): IFormattedToolCallPart | null => {
     if (part.type !== 'data-tool-call' || part.data?.phase !== 'start') {
@@ -182,7 +176,9 @@
     return groupedParts;
   };
 
-
+  function handleScroll() {
+    scrollContainerRef.value?.handleScroll();
+  }
 </script>
 
 <style scoped>

package/dist/custom/conversation_area/ReasoningRenderer.vue

@@ -35,17 +35,16 @@ import type { IPart } from '../types';
 import { ref, computed, watch, defineAsyncComponent } from 'vue';
 import ThreeDotsAnimation from './ThreeDotsAnimation.vue';
 import { extractTitleAndTextFromReasoning } from '../utils';
-import CustomAutoScrollContainer from '../CustomAutoScrollContainer.vue';
-
-const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
 
 const props = defineProps<{
   state?: IPart['state']
   text?: string
 }>();
 
-const isStreaming = computed(() => props.state === 'streaming');
+const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
+
 const isExpanded = ref(true);
+const isStreaming = computed(() => props.state === 'streaming');
 const parsedReasoning = computed(() => extractTitleAndTextFromReasoning(props.text ?? ''));
 const reasoningTitle = computed(() => parsedReasoning.value.title ?? '');
 const reasoningText = computed(() => parsedReasoning.value.body);
@@ -56,8 +55,6 @@ watch(() => props.state, (newValue: IPart['state']) => {
   } 
 });
 
-
-
 </script>
 
 

package/dist/custom/conversation_area/TextRenderer.vue

@@ -17,27 +17,43 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      Error occurred
+      {{ $t('Error occurred') }}
     </p>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">const isExpanded = ref(true);
+
   import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';
   import { useAgentStore } from '../composables/useAgentStore';
   import { useCoreStore } from '@/stores/core';
 
+  const props = defineProps<{
+    message: string | undefined,
+    state: string | undefined,
+    role: 'user' | 'assistant'
+  }>();
+
+  const emit = defineEmits(['toggle-thoughts']);
+
   const IncremarkContent = defineAsyncComponent(() => import('@incremark/vue').then(module => module.IncremarkContent))
   const ShikiCodeBlock = defineAsyncComponent(() => import('../incremark_code_renderers/IncremarkShikiCodeBlock.vue'))
 
   const agentStore = useAgentStore();
   const coreStore = useCoreStore();
+  const router = useRouter();
+
+  const isThoughtsExpanded = ref(true);
+
+  const content = computed(() => props.message)
+  const isFinished = computed(() => props.state === 'done')
+  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
+  const isStateStreaming = computed(() => props.state === 'streaming')
 
   const incremarkComponents = {
     code: ShikiCodeBlock,
   };
-
   const incremarkOptions = {
 		gfm: true,
 		math: { tex: true },
@@ -45,27 +61,10 @@
 		htmlTree: true,
 	};
 
-  const router = useRouter();
-
   onMounted(async () => {
     void import('katex/dist/katex.min.css')
   })
 
-  const props = defineProps<{
-    message: string | undefined,
-    state: string | undefined,
-    role: 'user' | 'assistant'
-  }>();
-
-  const emit = defineEmits(['toggle-thoughts']);
-
-  const content = computed(() => props.message)
-  const isFinished = computed(() => props.state === 'done')
-  const isThoughtsExpanded = ref(true);
-  const hasVegaLite = computed(() => props.message?.includes('```vega-lite'))
-
-  const isStateStreaming = computed(() => props.state === 'streaming')
-
   watch(isStateStreaming, (newValue: boolean) => {
     if (!newValue) {
       isThoughtsExpanded.value = false;
@@ -125,12 +124,6 @@
 
 </script>
 
-<style lang="scss">
-  .incremark-paragraph {
-    margin: 8px 0;
-  }
-</style>
-
 <style lang="scss">
 .incremark a.incremark-link,
 .incremark a.incremark-link:visited {
@@ -173,4 +166,8 @@ a.incremark-link::after {
 .incremark-list {
   list-style: disc;
 }
+
+.incremark-paragraph {
+  margin: 8px 0;
+}
 </style>

package/dist/custom/conversation_area/ToolRenderer.vue

@@ -24,10 +24,6 @@
       </div>
 
       <div class="min-w-0">
-        <!-- <p class="text-xs text-gray-500 dark:text-gray-400 font-bold">
-          {{ statusLabel }}
-          <span v-if="props.data?.toolInfo?.durationMs" class="text-xs">({{ (props.data.toolInfo.durationMs / 1000).toFixed(2) }}s)</span>
-        </p> -->
         <p class="break-all font-mono text-sm leading-5 text-nowrap">
           {{ props.data?.toolInfo?.toolInfo ? props.data.toolInfo.toolInfo : props.data?.toolInfo?.toolName}}
         </p>
@@ -67,27 +63,57 @@
   import { Spinner } from '@/afcl';
   import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
+  const props = defineProps<{
+    data: IFormattedToolCallPart
+  }>();
+
+  interface IToolSection {
+    label: string;
+    lines: Array<{
+      number: number;
+      content: string;
+    }>;
+  }
+
   const isInputOutputExpanded = ref(false);
   const activateShrinkedStyle = ref(true);
-  const isAnimatingShrinkFinal = ref(false);
   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 toolSections = computed<IToolSection[]>(() => {
+    const sections = [
+      {
+        label: 'Input',
+        content: normalizeToolPayload(props.data.toolInfo.input),
+      },
+      {
+        label: 'Output',
+        content: normalizeToolPayload(props.data.toolInfo.output),
+      },
+    ];
+
+    return sections
+      .filter((section): section is { label: string; content: string } => Boolean(section.content))
+      .map(section => ({
+        label: section.label,
+        lines: section.content.split('\n').map((content, index) => ({
+          number: index + 1,
+          content,
+        })),
+      }));
+  });
+  const hasToolSections = computed(() => toolSections.value.length > 0);
+
   onMounted(() => {
     if (toolRendererRef.value) {
       toolRendererInitialWidth.value = toolRendererRef.value.offsetWidth;
     }
   });  
 
-  function finishTransition() {
-    if (!isInputOutputExpanded.value) {
-      activateFullWidth.value = false;
-      activateShrinkedStyle.value = true;
-    }
-  }
   watch(isInputOutputExpanded, (newValue) => {
     if (newValue) {
       activateShrinkedStyle.value = false;
@@ -95,6 +121,13 @@
     }
   });
 
+  function finishTransition() {
+    if (!isInputOutputExpanded.value) {
+      activateFullWidth.value = false;
+      activateShrinkedStyle.value = true;
+    }
+  }
+
   function toggleInputOutput() {
     if (blockClicksDuringAnimation.value) return;
     isInputOutputExpanded.value = !isInputOutputExpanded.value;
@@ -104,21 +137,6 @@
     }, ANIMATION_DURATION);
   }
 
-  interface IToolSection {
-    label: string;
-    lines: Array<{
-      number: number;
-      content: string;
-    }>;
-  }
-
-  const props = defineProps<{
-    data: IFormattedToolCallPart
-  }>();
-
-  const isRunning = computed(() => props.data?.toolInfo?.phase === 'start');
-  const statusLabel = computed(() => isRunning.value ? 'Running tool' : 'Tool finished');
-
   const normalizeToolPayload = (value: unknown): string | null => {
     if (value === null || value === undefined || value === '') {
       return null;
@@ -131,30 +149,6 @@
     return JSON.stringify(value, null, 2);
   };
 
-  const toolSections = computed<IToolSection[]>(() => {
-    const sections = [
-      {
-        label: 'Input',
-        content: normalizeToolPayload(props.data.toolInfo.input),
-      },
-      {
-        label: 'Output',
-        content: normalizeToolPayload(props.data.toolInfo.output),
-      },
-    ];
-
-    return sections
-      .filter((section): section is { label: string; content: string } => Boolean(section.content))
-      .map(section => ({
-        label: section.label,
-        lines: section.content.split('\n').map((content, index) => ({
-          number: index + 1,
-          content,
-        })),
-      }));
-  });
-
-  const hasToolSections = computed(() => toolSections.value.length > 0);
 </script>
 
 

package/dist/custom/conversation_area/ToolsGroup.vue

@@ -9,7 +9,7 @@
       <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 ">Call tools</span>
+        <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">
@@ -23,24 +23,12 @@
 <script setup lang="ts">
 import ToolRenderer from './ToolRenderer.vue';
 import type { IToolGroup } from '../types';
-import { ref } from 'vue';
 import { IconWrenchSolid } from '@iconify-prerendered/vue-heroicons';
 
-
 const props = defineProps<{
   toolGroup: IToolGroup[]
 }>();
 
-const expandedGroups = ref<string[]>([]);
-
-function toggleGroup(groupTitle: string) {
-  if (expandedGroups.value.includes(groupTitle)) {
-    expandedGroups.value = expandedGroups.value.filter((title: string) => title !== groupTitle);
-  } else {
-    expandedGroups.value.push(groupTitle);
-  }
-}
-
 </script>
 
 <style scoped>

package/dist/custom/incremark_code_renderers/IncremarkShikiCodeBlock.vue

@@ -12,7 +12,7 @@
         :disabled="!sourceCode"
         @click="copyCode"
       >
-        {{ copied ? 'Copied' : 'Copy' }}
+        {{ copied ? $t('Copied') : $t('Copy') }}
       </button>
     </div>
 

package/package.json

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