@adminforth/agent 1.33.1 → 1.34.1

package/build.log

@@ -40,5 +40,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 211,007 bytes  received 585 bytes  423,184.00 bytes/sec
-total size is 208,637  speedup is 0.99
+sent 210,682 bytes  received 585 bytes  422,534.00 bytes/sec
+total size is 208,272  speedup is 0.99

package/custom/ChatSurface.vue

@@ -15,27 +15,26 @@
       />
     </div>
   </div>
-  
+
   <Teleport to="body">
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
       class="fixed bg-lightNavbar dark:bg-darkNavbar top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
-            flex flex z-40"
+            flex flex z-40 h-screen"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{
-        width: agentStore.chatWidth + 'rem',
-        top: viewportOffsetTop + 'px',
-        height: dvh + 'px',
-      }"
+      :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
-        class="w-2 cursor-ew-resize absolute left-0 top-0 h-full z-30"
+        class="w-2 cursor-ew-resize absolute left-0 top-0 z-30"
         @mousedown="startResize"
       ></div>
       <div 
-        class="w-full h-full min-h-0 max-h-full flex flex-col"
+        class="w-full min-h-0 max-h-full flex flex-col h-dvh"
+        :style="{
+          height: !agentStore.isIos ? dvh + 'px' : '100dvh',
+        }"
       >
         <div 
           ref="headerRef"
@@ -88,7 +87,6 @@
           <div class="flex items-center justify-center">
             <Button 
               @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
-              :disabled="agentStore.isResponseInProgress" 
               class="!py-1 !px-2 rounded-3xl text-gray-800 dark:text-gray-200 max-w-64 mr-2"
             >
               <IconPlusOutline class="w-5 h-5" />
@@ -223,8 +221,7 @@ const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
 const isModeMenuOpen = ref(false);
 
-const dvh = ref(Math.round(window.visualViewport?.height || window.innerHeight));
-const viewportOffsetTop = ref(Math.round(window.visualViewport?.offsetTop || 0));
+const dvh = ref(window.innerHeight)
 
 let startX = 0
 let startWidth = 0
@@ -236,9 +233,6 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   window.addEventListener('resize', updateHeight)
-  window.visualViewport?.addEventListener('resize', updateHeight);
-  window.visualViewport?.addEventListener('scroll', updateHeight);
-  updateHeight();
   textInput.value?.focus();
   const savedIsTeleportedToBody = agentStore.getLocalStorageItem('isTeleportedToBody');
   const savedIsTeleportedToBodyBeforeFullScreen = agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
@@ -256,8 +250,6 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateHeight)
-  window.visualViewport?.removeEventListener('resize', updateHeight);
-  window.visualViewport?.removeEventListener('scroll', updateHeight);
 })
 
 const startResize = (e: MouseEvent) => {
@@ -326,7 +318,6 @@ async function sendMessage() {
 
 function updateHeight() {
   dvh.value = Math.round(window.visualViewport?.height || window.innerHeight);
-  viewportOffsetTop.value = Math.round(window.visualViewport?.offsetTop || 0);
 }
 
 </script>

package/custom/SessionsHistory.vue

@@ -9,10 +9,6 @@
     <div class="w-full flex items-center justify-center">
     </div>
     <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">{{ $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">
         {{ group.label }}
@@ -24,10 +20,8 @@
         class=" flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
         :class="{
           '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);"
-        :disabled="agentStore.isResponseInProgress"
       >
         <p class="truncate">{{ session.title || session.sessionId }}</p>
         <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">

package/custom/composables/useAgentStore.ts

@@ -60,6 +60,10 @@ export const useAgentStore = defineStore('agent', () => {
   const activeModeName = ref<string | null>(null);
   const hasTypedMessageInPageSession = ref(false);
   const { width: windowWidth } = useWindowSize();
+
+  const chats = new Map<string, Chat<any>>();
+  const currentChat = shallowRef<Chat<any>>();
+
   let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
 
   function setLocalStorageItem(key: string, value: string) {
@@ -116,17 +120,20 @@ export const useAgentStore = defineStore('agent', () => {
         }
       }
     }
-    const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
-    const savedIsChatOpen = getLocalStorageItem('isChatOpen');
-    const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
-    setIsTeleportedToBody(shouldTeleportToBody);
+    if (!coreStore.isMobile) {
+      const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
+      const savedIsChatOpen = getLocalStorageItem('isChatOpen');
+      const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
+
+      setIsTeleportedToBody(shouldTeleportToBody);
+      if (isTeleportedToBody.value) {
+        isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
+      }
+    }
     lastSessionId.value = getLocalStorageItem('lastSessionId');
     if (lastSessionId.value && lastSessionId.value !== 'pre-session') {
       setActiveSession(lastSessionId.value);
     }
-    if (isTeleportedToBody.value) {
-      isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
-    }
     if (coreStore.isMobile) {
       setChatWidth(window.innerWidth);
     }
@@ -150,6 +157,7 @@ export const useAgentStore = defineStore('agent', () => {
 
     if (fullScreen) {
       document.body.style.overflow = 'hidden';
+      document.body.classList.add('bg-lightHtml', 'dark:bg-darkHtml');
       setTimeout(() => {
         appElement?.setAttribute('style', `opacity: 0; pointer-events: none;`);
       }, agentTransitions.TRANSITION_DURATION);
@@ -189,8 +197,6 @@ export const useAgentStore = defineStore('agent', () => {
       }
     }
   })
-  const chats = new Map<string, Chat<any>>();
-  const currentChat = shallowRef<Chat<any>>();
 
   function setAvailableModes(modes: AgentMode[], defaultModeName?: string | null) {
     availableModes.value = modes;
@@ -349,6 +355,7 @@ export const useAgentStore = defineStore('agent', () => {
       return;
     }
     isChatOpen.value = false;
+    setFullScreen(false);
     isSessionHistoryOpen.value = false;
   }
 
@@ -549,14 +556,16 @@ export const useAgentStore = defineStore('agent', () => {
     }
     currentSession.value = sessions.value[sessionId];
     setCurrentChat(sessionId);
-    currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
-      role: m.role,
-      parts:[{
-        type: 'text',
-        text: m.text,
-        state: 'done',
-      }]
-    }));
+    if (currentChat.value.messages.length === 0) {
+      currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
+        role: m.role,
+        parts:[{
+          type: 'text',
+          text: m.text,
+          state: 'done',
+        }]
+      }));
+    }
   }
 
   async function fetchSessionsList() {
@@ -578,6 +587,18 @@ export const useAgentStore = defineStore('agent', () => {
     }
   }
 
+  function addDebugMessage(message: string) {
+    const debugMessage = {
+      role: 'assistant',
+      parts: [{
+        type: 'text',
+        text: message,
+        state: 'done',
+      }]
+    };
+    currentChat.value?.messages.push(debugMessage);
+  }
+
   return {
     //_________-Sessions management-_____________
     activeSessionId,
@@ -616,6 +637,7 @@ export const useAgentStore = defineStore('agent', () => {
     DEFAULT_CHAT_WIDTH,
     MAX_WIDTH,
     MIN_WIDTH,
-    getLocalStorageItem
+    getLocalStorageItem,
+    addDebugMessage
   }
 })

package/custom/conversation_area/ProcessingTimeline.vue

@@ -12,7 +12,7 @@
         class="transition-transform duration-200"
       />
     </div>
-    <transition name="expand" class="max-h-96 overflow-y-auto mb-4 pt-1">
+    <transition name="expand" class="sm:max-h-96 max-h-48 overflow-y-auto mb-4 pt-1">
       <CustomAutoScrollContainer
         ref="scrollContainerRef"
         :enabled="isResponseInProgress"
@@ -74,6 +74,11 @@
 
   onMounted(() => {
     thinkingStartTime.value = Date.now();
+    if (isResponseInProgress.value) {
+      isExpanded.value = true;
+    } else {
+      isExpanded.value = false;
+    }
   })
 
   onUnmounted(() => {
@@ -197,6 +202,10 @@
   .expand-leave-from {
     opacity: 1;
     max-height: 384px;
+
+    @media (max-width: 640px) {
+      max-height: 192px;
+    }
   }
  
 </style>

package/custom/conversation_area/TextRenderer.vue

@@ -17,12 +17,12 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      {{ $t('Error occurred') }}
+      {{ $t('No content to render') }}
     </p>
   </div>
 </template>
 
-<script setup lang="ts">const isExpanded = ref(true);
+<script setup lang="ts">
 
   import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';

package/dist/custom/ChatSurface.vue

@@ -15,27 +15,26 @@
       />
     </div>
   </div>
-  
+
   <Teleport to="body">
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
       class="fixed bg-lightNavbar dark:bg-darkNavbar top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
-            flex flex z-40"
+            flex flex z-40 h-screen"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{
-        width: agentStore.chatWidth + 'rem',
-        top: viewportOffsetTop + 'px',
-        height: dvh + 'px',
-      }"
+      :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
-        class="w-2 cursor-ew-resize absolute left-0 top-0 h-full z-30"
+        class="w-2 cursor-ew-resize absolute left-0 top-0 z-30"
         @mousedown="startResize"
       ></div>
       <div 
-        class="w-full h-full min-h-0 max-h-full flex flex-col"
+        class="w-full min-h-0 max-h-full flex flex-col h-dvh"
+        :style="{
+          height: !agentStore.isIos ? dvh + 'px' : '100dvh',
+        }"
       >
         <div 
           ref="headerRef"
@@ -88,7 +87,6 @@
           <div class="flex items-center justify-center">
             <Button 
               @click="agentStore.createPreSession(); agentStore.setSessionHistoryOpen(false); agentStore.focusTextInput();" 
-              :disabled="agentStore.isResponseInProgress" 
               class="!py-1 !px-2 rounded-3xl text-gray-800 dark:text-gray-200 max-w-64 mr-2"
             >
               <IconPlusOutline class="w-5 h-5" />
@@ -223,8 +221,7 @@ const agentTransitions = useAgentTransitions();
 const coreStore = useCoreStore();
 const isModeMenuOpen = ref(false);
 
-const dvh = ref(Math.round(window.visualViewport?.height || window.innerHeight));
-const viewportOffsetTop = ref(Math.round(window.visualViewport?.offsetTop || 0));
+const dvh = ref(window.innerHeight)
 
 let startX = 0
 let startWidth = 0
@@ -236,9 +233,6 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   window.addEventListener('resize', updateHeight)
-  window.visualViewport?.addEventListener('resize', updateHeight);
-  window.visualViewport?.addEventListener('scroll', updateHeight);
-  updateHeight();
   textInput.value?.focus();
   const savedIsTeleportedToBody = agentStore.getLocalStorageItem('isTeleportedToBody');
   const savedIsTeleportedToBodyBeforeFullScreen = agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
@@ -256,8 +250,6 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateHeight)
-  window.visualViewport?.removeEventListener('resize', updateHeight);
-  window.visualViewport?.removeEventListener('scroll', updateHeight);
 })
 
 const startResize = (e: MouseEvent) => {
@@ -326,7 +318,6 @@ async function sendMessage() {
 
 function updateHeight() {
   dvh.value = Math.round(window.visualViewport?.height || window.innerHeight);
-  viewportOffsetTop.value = Math.round(window.visualViewport?.offsetTop || 0);
 }
 
 </script>

package/dist/custom/SessionsHistory.vue

@@ -9,10 +9,6 @@
     <div class="w-full flex items-center justify-center">
     </div>
     <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">{{ $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">
         {{ group.label }}
@@ -24,10 +20,8 @@
         class=" flex items-center justify-between w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-gray-800 dark:text-gray-200"
         :class="{
           '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);"
-        :disabled="agentStore.isResponseInProgress"
       >
         <p class="truncate">{{ session.title || session.sessionId }}</p>
         <div @click.stop="agentStore.deleteSession(session.sessionId)" class="w-7 h-7 p-1 hover:scale-110 hover:bg-gray-200 dark:hover:bg-gray-500 flex items-center justify-center rounded">

package/dist/custom/composables/useAgentStore.ts

@@ -60,6 +60,10 @@ export const useAgentStore = defineStore('agent', () => {
   const activeModeName = ref<string | null>(null);
   const hasTypedMessageInPageSession = ref(false);
   const { width: windowWidth } = useWindowSize();
+
+  const chats = new Map<string, Chat<any>>();
+  const currentChat = shallowRef<Chat<any>>();
+
   let placeholderAnimationTimer: ReturnType<typeof setTimeout> | null = null;
 
   function setLocalStorageItem(key: string, value: string) {
@@ -116,17 +120,20 @@ export const useAgentStore = defineStore('agent', () => {
         }
       }
     }
-    const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
-    const savedIsChatOpen = getLocalStorageItem('isChatOpen');
-    const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
-    setIsTeleportedToBody(shouldTeleportToBody);
+    if (!coreStore.isMobile) {
+      const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
+      const savedIsChatOpen = getLocalStorageItem('isChatOpen');
+      const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
+
+      setIsTeleportedToBody(shouldTeleportToBody);
+      if (isTeleportedToBody.value) {
+        isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
+      }
+    }
     lastSessionId.value = getLocalStorageItem('lastSessionId');
     if (lastSessionId.value && lastSessionId.value !== 'pre-session') {
       setActiveSession(lastSessionId.value);
     }
-    if (isTeleportedToBody.value) {
-      isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
-    }
     if (coreStore.isMobile) {
       setChatWidth(window.innerWidth);
     }
@@ -150,6 +157,7 @@ export const useAgentStore = defineStore('agent', () => {
 
     if (fullScreen) {
       document.body.style.overflow = 'hidden';
+      document.body.classList.add('bg-lightHtml', 'dark:bg-darkHtml');
       setTimeout(() => {
         appElement?.setAttribute('style', `opacity: 0; pointer-events: none;`);
       }, agentTransitions.TRANSITION_DURATION);
@@ -189,8 +197,6 @@ export const useAgentStore = defineStore('agent', () => {
       }
     }
   })
-  const chats = new Map<string, Chat<any>>();
-  const currentChat = shallowRef<Chat<any>>();
 
   function setAvailableModes(modes: AgentMode[], defaultModeName?: string | null) {
     availableModes.value = modes;
@@ -349,6 +355,7 @@ export const useAgentStore = defineStore('agent', () => {
       return;
     }
     isChatOpen.value = false;
+    setFullScreen(false);
     isSessionHistoryOpen.value = false;
   }
 
@@ -549,14 +556,16 @@ export const useAgentStore = defineStore('agent', () => {
     }
     currentSession.value = sessions.value[sessionId];
     setCurrentChat(sessionId);
-    currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
-      role: m.role,
-      parts:[{
-        type: 'text',
-        text: m.text,
-        state: 'done',
-      }]
-    }));
+    if (currentChat.value.messages.length === 0) {
+      currentChat.value.messages = currentSession.value?.messages.map((m: any) => ({
+        role: m.role,
+        parts:[{
+          type: 'text',
+          text: m.text,
+          state: 'done',
+        }]
+      }));
+    }
   }
 
   async function fetchSessionsList() {
@@ -578,6 +587,18 @@ export const useAgentStore = defineStore('agent', () => {
     }
   }
 
+  function addDebugMessage(message: string) {
+    const debugMessage = {
+      role: 'assistant',
+      parts: [{
+        type: 'text',
+        text: message,
+        state: 'done',
+      }]
+    };
+    currentChat.value?.messages.push(debugMessage);
+  }
+
   return {
     //_________-Sessions management-_____________
     activeSessionId,
@@ -616,6 +637,7 @@ export const useAgentStore = defineStore('agent', () => {
     DEFAULT_CHAT_WIDTH,
     MAX_WIDTH,
     MIN_WIDTH,
-    getLocalStorageItem
+    getLocalStorageItem,
+    addDebugMessage
   }
 })

package/dist/custom/conversation_area/ProcessingTimeline.vue

@@ -12,7 +12,7 @@
         class="transition-transform duration-200"
       />
     </div>
-    <transition name="expand" class="max-h-96 overflow-y-auto mb-4 pt-1">
+    <transition name="expand" class="sm:max-h-96 max-h-48 overflow-y-auto mb-4 pt-1">
       <CustomAutoScrollContainer
         ref="scrollContainerRef"
         :enabled="isResponseInProgress"
@@ -74,6 +74,11 @@
 
   onMounted(() => {
     thinkingStartTime.value = Date.now();
+    if (isResponseInProgress.value) {
+      isExpanded.value = true;
+    } else {
+      isExpanded.value = false;
+    }
   })
 
   onUnmounted(() => {
@@ -197,6 +202,10 @@
   .expand-leave-from {
     opacity: 1;
     max-height: 384px;
+
+    @media (max-width: 640px) {
+      max-height: 192px;
+    }
   }
  
 </style>

package/dist/custom/conversation_area/TextRenderer.vue

@@ -17,12 +17,12 @@
       :incremark-options="incremarkOptions"
     />
     <p v-else class="text-red-500 py-2">
-      {{ $t('Error occurred') }}
+      {{ $t('No content to render') }}
     </p>
   </div>
 </template>
 
-<script setup lang="ts">const isExpanded = ref(true);
+<script setup lang="ts">
 
   import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
   import { useRouter } from 'vue-router';

package/package.json

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