@adminforth/agent 1.16.1 → 1.16.3

package/build.log

@@ -31,5 +31,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 184,388 bytes  received 436 bytes  369,648.00 bytes/sec
-total size is 182,599  speedup is 0.99
+sent 184,918 bytes  received 428 bytes  370,692.00 bytes/sec
+total size is 183,164  speedup is 0.99

package/custom/ChatSurface.vue

@@ -125,14 +125,20 @@
             >
               <button
                 aria-label="Select mode"
-                class="flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-lightNavbarIcons transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-darkNavbarIcons dark:hover:bg-gray-700"
+                class="flex px-2 py-1 items-center text-sm justify-center 
+                  rounded-md bg-white text-lightListTableHeadingText 
+                  transition-colors duration-200 hover:bg-gray-100 
+                  dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
                 :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
                 :disabled="agentStore.isResponseInProgress"
                 title="Select mode"
                 type="button"
                 @click="toggleModeMenu"
               >
-                <IconBrainOutline class="h-4 w-4" />
+                {{ agentStore.activeModeName }}
+                <IconAngleDownOutline 
+                  class="w-4 h-4 ml-1" 
+                />
               </button>
 
               <div
@@ -171,7 +177,7 @@
 
 <script setup lang="ts">
 import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
-import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
 import { useTemplateRef, onMounted, ref,computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './ConversationArea.vue';

package/custom/ToolRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <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"         
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
     @click="isInputOutputExpanded = !isInputOutputExpanded"
   >
     <div class="flex items-center gap-3">

package/custom/ToolsGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
     <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"/> 
+      <div class="flex items-center gap-2 px-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)">
+        <IconCheckOutline  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"
@@ -24,7 +24,7 @@
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {

package/custom/composables/useAgentStore.ts

@@ -7,6 +7,7 @@ import { Chat } from '../chat';
 import { DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 import { useAgentTransitions } from './useAgentTransitions';
+import { useWindowSize } from '@vueuse/core';
 
 type AgentMode = {
   name: string;
@@ -48,6 +49,7 @@ export const useAgentStore = defineStore('agent', () => {
   const availableModes = ref<AgentMode[]>([]);
   const activeModeName = ref<string | null>(null);
   const hasTypedMessageInPageSession = ref(false);
+  const { width: windowWidth } = useWindowSize();
   let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
 
   function setLocalStorageItem(key: string, value: string) {
@@ -56,6 +58,11 @@ export const useAgentStore = defineStore('agent', () => {
   function getLocalStorageItem(key: string) {
     return window.localStorage.getItem(`${coreStore.config.brandName || 'adminforth'}-${key}`);
   }
+  watch(windowWidth, (newWidth: number) => {
+    if (isFullScreen.value) {
+      setChatWidth(newWidth, false);
+    }
+  })
   watch(isTeleportedToBody, (newVal: boolean) => {
     setLocalStorageItem('isTeleportedToBody', newVal ? 'true' : 'false');
   })
@@ -85,7 +92,14 @@ export const useAgentStore = defineStore('agent', () => {
     if (chatWidthBeforeFullScreen) {
       chatWidth.value = chatWidthBeforeFullScreen;
     } else {
-      chatWidth.value = parseInt(getLocalStorageItem('chatWidth') || DEFAULT_CHAT_WIDTH.toString(), 10);
+      const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
+      if (savedChatWidth) {
+        if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
+          chatWidth.value = DEFAULT_CHAT_WIDTH;
+        } else {
+          chatWidth.value = savedChatWidth;
+        }
+      }
     }
     isTeleportedToBody.value = getLocalStorageItem('isTeleportedToBody') === 'true';
     lastSessionId.value = getLocalStorageItem('lastSessionId');

package/dist/custom/ChatSurface.vue

@@ -125,14 +125,20 @@
             >
               <button
                 aria-label="Select mode"
-                class="flex h-9 w-9 items-center justify-center rounded-md border border-gray-200 bg-white text-lightNavbarIcons transition-colors duration-200 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-darkNavbarIcons dark:hover:bg-gray-700"
+                class="flex px-2 py-1 items-center text-sm justify-center 
+                  rounded-md bg-white text-lightListTableHeadingText 
+                  transition-colors duration-200 hover:bg-gray-100 
+                  dark:text-darkListTableHeadingText dark:bg-gray-700 dark:hover:bg-gray-800"
                 :class="isModeMenuOpen ? 'bg-gray-100 dark:bg-gray-700' : ''"
                 :disabled="agentStore.isResponseInProgress"
                 title="Select mode"
                 type="button"
                 @click="toggleModeMenu"
               >
-                <IconBrainOutline class="h-4 w-4" />
+                {{ agentStore.activeModeName }}
+                <IconAngleDownOutline 
+                  class="w-4 h-4 ml-1" 
+                />
               </button>
 
               <div
@@ -171,7 +177,7 @@
 
 <script setup lang="ts">
 import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
-import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconBrainOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline } from '@iconify-prerendered/vue-flowbite';
 import { useTemplateRef, onMounted, ref,computed } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './ConversationArea.vue';

package/dist/custom/ToolRenderer.vue

@@ -1,6 +1,6 @@
 <template>
   <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"         
+    class="inline-flex m-2 max-w-[80%] flex-col gap-3 rounded-xl px-2 cursor-pointer text-lightListTableHeadingText dark:text-darkListTableHeadingText hover:opacity-75"         
     @click="isInputOutputExpanded = !isInputOutputExpanded"
   >
     <div class="flex items-center gap-3">

package/dist/custom/ToolsGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <template v-for="group in props.toolGroup" :key="group.title">
     <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"/> 
+      <div class="flex items-center gap-2 px-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)">
+        <IconCheckOutline  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"
@@ -24,7 +24,7 @@
 import ToolRenderer from './ToolRenderer.vue';
 import type { IPart } from './types';
 import { ref } from 'vue';
-import { IconAngleDownOutline, IconMinusOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconAngleDownOutline, IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 
 const props = defineProps<{
   toolGroup: {

package/dist/custom/composables/useAgentStore.ts

@@ -7,6 +7,7 @@ import { Chat } from '../chat';
 import { DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 import { useAgentTransitions } from './useAgentTransitions';
+import { useWindowSize } from '@vueuse/core';
 
 type AgentMode = {
   name: string;
@@ -48,6 +49,7 @@ export const useAgentStore = defineStore('agent', () => {
   const availableModes = ref<AgentMode[]>([]);
   const activeModeName = ref<string | null>(null);
   const hasTypedMessageInPageSession = ref(false);
+  const { width: windowWidth } = useWindowSize();
   let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
 
   function setLocalStorageItem(key: string, value: string) {
@@ -56,6 +58,11 @@ export const useAgentStore = defineStore('agent', () => {
   function getLocalStorageItem(key: string) {
     return window.localStorage.getItem(`${coreStore.config.brandName || 'adminforth'}-${key}`);
   }
+  watch(windowWidth, (newWidth: number) => {
+    if (isFullScreen.value) {
+      setChatWidth(newWidth, false);
+    }
+  })
   watch(isTeleportedToBody, (newVal: boolean) => {
     setLocalStorageItem('isTeleportedToBody', newVal ? 'true' : 'false');
   })
@@ -85,7 +92,14 @@ export const useAgentStore = defineStore('agent', () => {
     if (chatWidthBeforeFullScreen) {
       chatWidth.value = chatWidthBeforeFullScreen;
     } else {
-      chatWidth.value = parseInt(getLocalStorageItem('chatWidth') || DEFAULT_CHAT_WIDTH.toString(), 10);
+      const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
+      if (savedChatWidth) {
+        if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
+          chatWidth.value = DEFAULT_CHAT_WIDTH;
+        } else {
+          chatWidth.value = savedChatWidth;
+        }
+      }
     }
     isTeleportedToBody.value = getLocalStorageItem('isTeleportedToBody') === 'true';
     lastSessionId.value = getLocalStorageItem('lastSessionId');

package/package.json

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