fix: update style for the tool call renderer

Author: yaroslav8765

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

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: {

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