@adminforth/agent 1.34.0 → 1.34.2

package/build.log

@@ -40,5 +40,5 @@ custom/skills/fetch_data/SKILL.md
 custom/skills/mutate_data/
 custom/skills/mutate_data/SKILL.md
 
-sent 210,673 bytes  received 585 bytes  422,516.00 bytes/sec
-total size is 208,263  speedup is 0.99
+sent 210,653 bytes  received 585 bytes  422,476.00 bytes/sec
+total size is 208,279  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 h-full 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"
@@ -222,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
@@ -235,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');
@@ -255,8 +250,6 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateHeight)
-  window.visualViewport?.removeEventListener('resize', updateHeight);
-  window.visualViewport?.removeEventListener('scroll', updateHeight);
 })
 
 const startResize = (e: MouseEvent) => {
@@ -325,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/composables/useAgentStore.ts

@@ -120,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);
     }
@@ -154,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);
@@ -351,6 +355,7 @@ export const useAgentStore = defineStore('agent', () => {
       return;
     }
     isChatOpen.value = false;
+    setFullScreen(false);
     isSessionHistoryOpen.value = false;
   }
 
@@ -582,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,
@@ -620,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"
@@ -202,6 +202,10 @@
   .expand-leave-from {
     opacity: 1;
     max-height: 384px;
+
+    @media (max-width: 640px) {
+      max-height: 192px;
+    }
   }
  
 </style>

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 h-full 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"
@@ -222,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
@@ -235,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');
@@ -255,8 +250,6 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateHeight)
-  window.visualViewport?.removeEventListener('resize', updateHeight);
-  window.visualViewport?.removeEventListener('scroll', updateHeight);
 })
 
 const startResize = (e: MouseEvent) => {
@@ -325,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/composables/useAgentStore.ts

@@ -120,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);
     }
@@ -154,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);
@@ -351,6 +355,7 @@ export const useAgentStore = defineStore('agent', () => {
       return;
     }
     isChatOpen.value = false;
+    setFullScreen(false);
     isSessionHistoryOpen.value = false;
   }
 
@@ -582,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,
@@ -620,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"
@@ -202,6 +202,10 @@
   .expand-leave-from {
     opacity: 1;
     max-height: 384px;
+
+    @media (max-width: 640px) {
+      max-height: 192px;
+    }
   }
  
 </style>

package/package.json

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