@adminforth/agent 1.32.2 → 1.33.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 209,157 bytes  received 585 bytes  419,484.00 bytes/sec
-total size is 206,747  speedup is 0.99
+sent 211,007 bytes  received 585 bytes  423,184.00 bytes/sec
+total size is 208,637  speedup is 0.99

package/custom/ChatSurface.vue

@@ -20,21 +20,25 @@
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
-      class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
+      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"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'rem' }"
+      :style="{
+        width: agentStore.chatWidth + 'rem',
+        top: viewportOffsetTop + 'px',
+        height: dvh + 'px',
+      }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
         class="w-2 cursor-ew-resize absolute left-0 top-0 h-full z-30"
         @mousedown="startResize"
       ></div>
-
       <div 
-        class="w-full min-h-0 max-h-full flex flex-col"
+        class="w-full h-full min-h-0 max-h-full flex flex-col"
       >
         <div 
+          ref="headerRef"
           class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
         >
           <div 
@@ -94,7 +98,7 @@
               class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
                 text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
                 dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-              @click="agentStore.setIsChatOpen(false)" 
+              @click="agentStore.setFullScreen(false); agentStore.setIsChatOpen(false)" 
             />
           </div>
 
@@ -108,7 +112,8 @@
             :messages="agentStore.chatMessages"
           />
 
-          <div 
+          <div
+            ref="promptInput" 
             class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
             :style="{ 
               maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
@@ -122,6 +127,7 @@
                 @input="autoResize"
                 :class="[
                   'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+                  { '!text-base': coreStore.isIos }
                 ]"
                 :placeholder="agentStore.userMessagePlaceholder"
                 @keydown.enter.exact.prevent="sendMessage"
@@ -187,7 +193,7 @@
 <script setup lang="ts">
 import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
 import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-import { useTemplateRef, onMounted, ref } from 'vue';
+import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './conversation_area/ConversationArea.vue';
 import { useAgentStore } from './composables/useAgentStore';
@@ -216,6 +222,10 @@ const agentStore = useAgentStore();
 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));
+
 let startX = 0
 let startWidth = 0
 
@@ -225,8 +235,17 @@ onClickOutside(modeMenu, () => { isModeMenuOpen.value = false; });
 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 isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true' || agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
+  const savedIsTeleportedToBody = agentStore.getLocalStorageItem('isTeleportedToBody');
+  const savedIsTeleportedToBodyBeforeFullScreen = agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
+  let isTeleportedToBodyFromLocalStorage = true;
+  if (savedIsTeleportedToBody !== null || savedIsTeleportedToBodyBeforeFullScreen !== null) {
+    isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+  }
   if( coreStore.isMobile ) {
     agentStore.setIsTeleportedToBody(false);
   } else {
@@ -235,6 +254,11 @@ onMounted(async () => {
   await agentStore.fetchSessionsList();
 });
 
+onUnmounted(() => {
+  window.removeEventListener('resize', updateHeight)
+  window.visualViewport?.removeEventListener('resize', updateHeight);
+  window.visualViewport?.removeEventListener('scroll', updateHeight);
+})
 
 const startResize = (e: MouseEvent) => {
   startX = e.clientX
@@ -300,4 +324,9 @@ async function sendMessage() {
   conversationArea.value?.handleSendMessage();
 }
 
+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

@@ -116,13 +116,16 @@ export const useAgentStore = defineStore('agent', () => {
         }
       }
     }
-    setIsTeleportedToBody(getLocalStorageItem('isTeleportedToBody') === 'true' || getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true');
+    const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
+    const savedIsChatOpen = getLocalStorageItem('isChatOpen');
+    const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
+    setIsTeleportedToBody(shouldTeleportToBody);
     lastSessionId.value = getLocalStorageItem('lastSessionId');
     if (lastSessionId.value && lastSessionId.value !== 'pre-session') {
       setActiveSession(lastSessionId.value);
     }
     if (isTeleportedToBody.value) {
-      isChatOpen.value = getLocalStorageItem('isChatOpen') === 'true';
+      isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
     }
     if (coreStore.isMobile) {
       setChatWidth(window.innerWidth);
@@ -143,14 +146,20 @@ export const useAgentStore = defineStore('agent', () => {
   const isFullScreen = ref(false);
   function setFullScreen(fullScreen: boolean) {
     isFullScreen.value = fullScreen;
+    const appElement = document.getElementById('app');
+
     if (fullScreen) {
       document.body.style.overflow = 'hidden';
+      setTimeout(() => {
+        appElement?.setAttribute('style', `opacity: 0; pointer-events: none;`);
+      }, agentTransitions.TRANSITION_DURATION);
       setLocalStorageItem('chatWidthBeforeFullScreen', chatWidth.value.toString());
       setLocalStorageItem('isTeleportedToBodyBeforeFullScreen', isTeleportedToBody.value ? 'true' : 'false');
       setIsTeleportedToBody(false);
       useAgentTransitions().setChatSurfaceTransition(false);
       setChatWidth(window.innerWidth, false);
     } else {
+      appElement?.setAttribute('style', `opacity: 100; pointer-events: all;`);
       document.body.style.overflow = '';
       const lastChatWidth = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || DEFAULT_CHAT_WIDTH.toString(), 10);
       const isTeleportedBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';

package/custom/conversation_area/ConversationArea.vue

@@ -55,7 +55,9 @@
     </CustomAutoScrollContainer>
     <button @click="scrollContainer.scrollToBottom();">
       <IconArrowDownOutline 
-        class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
+        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 bg-lightPrimary/20 dark:bg-darkPrimary/10
+          border border-lightPrimary dark:border-darkPrimary text-lightPrimary dark:text-darkPrimary p-2 w-10 h-10
+          rounded-full transition-opacity duration-100 ease-in backdrop-blur-sm" 
         :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
         :disabled="!showScrollToBottomButton"
       />

package/dist/custom/ChatSurface.vue

@@ -20,21 +20,25 @@
     <div 
       ref="chatSurface"
       id="adminforth-agent-chat-surface"
-      class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen top-0 right-0 border-x border-b border-gray-200 dark:border-gray-700 
+      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"
       :class="[agentStore.isChatOpen ? 'translate-x-0' : 'translate-x-full', !agentStore.isTeleportedToBody ? 'shadow-2xl' : '']"
-      :style="{ width: agentStore.chatWidth + 'rem' }"
+      :style="{
+        width: agentStore.chatWidth + 'rem',
+        top: viewportOffsetTop + 'px',
+        height: dvh + 'px',
+      }"
     > 
       <div 
         v-if="!(coreStore.isMobile || agentStore.isFullScreen)"
         class="w-2 cursor-ew-resize absolute left-0 top-0 h-full z-30"
         @mousedown="startResize"
       ></div>
-
       <div 
-        class="w-full min-h-0 max-h-full flex flex-col"
+        class="w-full h-full min-h-0 max-h-full flex flex-col"
       >
         <div 
+          ref="headerRef"
           class="flex items-center justify-between h-14 border-b border-gray-200 dark:border-gray-700"         
         >
           <div 
@@ -94,7 +98,7 @@
               class="m-2 w-8 h-8 p-1 cursor-pointer hover:scale-110 rounded transition-colors duration-200
                 text-lightNavbarIcons hover:text-lightNavbarIcons/80 hover:bg-lightNavbarIcons/20 
                 dark:text-darkNavbarIcons hover:text-darkNavbarIcons/80 hover:bg-darkNavbarIcons/20 " 
-              @click="agentStore.setIsChatOpen(false)" 
+              @click="agentStore.setFullScreen(false); agentStore.setIsChatOpen(false)" 
             />
           </div>
 
@@ -108,7 +112,8 @@
             :messages="agentStore.chatMessages"
           />
 
-          <div 
+          <div
+            ref="promptInput" 
             class="w-full mb-2 flex items-center justify-center px-2 bg-transparent relative translate-x-[-50%] left-1/2"
             :style="{ 
               maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
@@ -122,6 +127,7 @@
                 @input="autoResize"
                 :class="[
                   'min-h-12 px-4 pt-4 rounded-xl w-full resize-none overflow-hidden text-lightInputText dark:text-darkInputText rounded-md bg-transparent text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 focus:outline-none',
+                  { '!text-base': coreStore.isIos }
                 ]"
                 :placeholder="agentStore.userMessagePlaceholder"
                 @keydown.enter.exact.prevent="sendMessage"
@@ -187,7 +193,7 @@
 <script setup lang="ts">
 import { IconChatBubbleLeft20Solid, IconSparklesSolid, IconArrowsPointingOut, IconArrowsPointingIn } from '@iconify-prerendered/vue-heroicons';
 import { IconCloseOutline, IconBarsOutline, IconArrowUpOutline, IconCloseSidebarSolid, IconOpenSidebarSolid, IconAngleDownOutline, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-import { useTemplateRef, onMounted, ref } from 'vue';
+import { useTemplateRef, onMounted, ref, onUnmounted } from 'vue';
 import { onClickOutside } from '@vueuse/core'
 import ConversationArea from './conversation_area/ConversationArea.vue';
 import { useAgentStore } from './composables/useAgentStore';
@@ -216,6 +222,10 @@ const agentStore = useAgentStore();
 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));
+
 let startX = 0
 let startWidth = 0
 
@@ -225,8 +235,17 @@ onClickOutside(modeMenu, () => { isModeMenuOpen.value = false; });
 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 isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true' || agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
+  const savedIsTeleportedToBody = agentStore.getLocalStorageItem('isTeleportedToBody');
+  const savedIsTeleportedToBodyBeforeFullScreen = agentStore.getLocalStorageItem('isTeleportedToBodyBeforeFullScreen');
+  let isTeleportedToBodyFromLocalStorage = true;
+  if (savedIsTeleportedToBody !== null || savedIsTeleportedToBodyBeforeFullScreen !== null) {
+    isTeleportedToBodyFromLocalStorage = savedIsTeleportedToBody === 'true' || savedIsTeleportedToBodyBeforeFullScreen === 'true';
+  }
   if( coreStore.isMobile ) {
     agentStore.setIsTeleportedToBody(false);
   } else {
@@ -235,6 +254,11 @@ onMounted(async () => {
   await agentStore.fetchSessionsList();
 });
 
+onUnmounted(() => {
+  window.removeEventListener('resize', updateHeight)
+  window.visualViewport?.removeEventListener('resize', updateHeight);
+  window.visualViewport?.removeEventListener('scroll', updateHeight);
+})
 
 const startResize = (e: MouseEvent) => {
   startX = e.clientX
@@ -300,4 +324,9 @@ async function sendMessage() {
   conversationArea.value?.handleSendMessage();
 }
 
+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

@@ -116,13 +116,16 @@ export const useAgentStore = defineStore('agent', () => {
         }
       }
     }
-    setIsTeleportedToBody(getLocalStorageItem('isTeleportedToBody') === 'true' || getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true');
+    const savedIsTeleportedToBody = getLocalStorageItem('isTeleportedToBody');
+    const savedIsChatOpen = getLocalStorageItem('isChatOpen');
+    const shouldTeleportToBody = savedIsTeleportedToBody === null ? true : savedIsTeleportedToBody === 'true';
+    setIsTeleportedToBody(shouldTeleportToBody);
     lastSessionId.value = getLocalStorageItem('lastSessionId');
     if (lastSessionId.value && lastSessionId.value !== 'pre-session') {
       setActiveSession(lastSessionId.value);
     }
     if (isTeleportedToBody.value) {
-      isChatOpen.value = getLocalStorageItem('isChatOpen') === 'true';
+      isChatOpen.value = savedIsChatOpen === null ? true : savedIsChatOpen === 'true';
     }
     if (coreStore.isMobile) {
       setChatWidth(window.innerWidth);
@@ -143,14 +146,20 @@ export const useAgentStore = defineStore('agent', () => {
   const isFullScreen = ref(false);
   function setFullScreen(fullScreen: boolean) {
     isFullScreen.value = fullScreen;
+    const appElement = document.getElementById('app');
+
     if (fullScreen) {
       document.body.style.overflow = 'hidden';
+      setTimeout(() => {
+        appElement?.setAttribute('style', `opacity: 0; pointer-events: none;`);
+      }, agentTransitions.TRANSITION_DURATION);
       setLocalStorageItem('chatWidthBeforeFullScreen', chatWidth.value.toString());
       setLocalStorageItem('isTeleportedToBodyBeforeFullScreen', isTeleportedToBody.value ? 'true' : 'false');
       setIsTeleportedToBody(false);
       useAgentTransitions().setChatSurfaceTransition(false);
       setChatWidth(window.innerWidth, false);
     } else {
+      appElement?.setAttribute('style', `opacity: 100; pointer-events: all;`);
       document.body.style.overflow = '';
       const lastChatWidth = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || DEFAULT_CHAT_WIDTH.toString(), 10);
       const isTeleportedBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';

package/dist/custom/conversation_area/ConversationArea.vue

@@ -55,7 +55,9 @@
     </CustomAutoScrollContainer>
     <button @click="scrollContainer.scrollToBottom();">
       <IconArrowDownOutline 
-        class="absolute z-10 bottom-8 left-1/2 bg-lightPrimary dark:bg-darkPrimary text-white p-2 w-10 h-10 rounded-full transition-opacity duration-100 ease-in" 
+        class="absolute z-10 bottom-8 left-1/2 -translate-x-1/2 bg-lightPrimary/20 dark:bg-darkPrimary/10
+          border border-lightPrimary dark:border-darkPrimary text-lightPrimary dark:text-darkPrimary p-2 w-10 h-10
+          rounded-full transition-opacity duration-100 ease-in backdrop-blur-sm" 
         :class="showScrollToBottomButton ? 'opacity-100' : 'opacity-0 pointer-events-none'"
         :disabled="!showScrollToBottomButton"
       />

package/package.json

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