fix: make chat width depend of rem

Author: yaroslav8765

custom/ChatSurface.vue

@@ -23,7 +23,7 @@
       class="fixed bg-lightNavbar dark:bg-darkNavbar h-screen 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 + 'px' }"
+      :style="{ width: agentStore.chatWidth + 'rem' }"
     > 
       <div 
         v-if="!coreStore.isMobile"
@@ -103,7 +103,7 @@
           <div 
             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 ? agentStore.MAX_WIDTH+'px' : '100%',
+              maxWidth: agentStore.isFullScreen ? remToPx(agentStore.MAX_WIDTH)+'px' : '100%',
               transition: `transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out`
             }"            
           >
@@ -185,6 +185,7 @@ import { useAgentStore } from './composables/useAgentStore';
 import { useAgentTransitions } from './composables/useAgentTransitions';
 import { Button } from '@/afcl';
 import { useCoreStore } from '@/stores/core';
+import { remToPx, pxToRem } from './utils';
 
 const props = defineProps<{
   meta: {
@@ -209,7 +210,7 @@ let startWidth = 0
 
 const startResize = (e: MouseEvent) => {
   startX = e.clientX
-  startWidth = agentStore.chatWidth
+  startWidth = remToPx(agentStore.chatWidth)
 
   document.body.style.userSelect = 'none'
   document.body.style.cursor = 'ew-resize'
@@ -220,7 +221,7 @@ const startResize = (e: MouseEvent) => {
 
 const onResize = (e: MouseEvent) => {
   const dx = startX - e.clientX
-  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, agentStore.MIN_WIDTH), agentStore.MAX_WIDTH))
+  agentStore.setChatWidth(Math.min(Math.max(startWidth + dx, remToPx(agentStore.MIN_WIDTH)), remToPx(agentStore.MAX_WIDTH)))
   agentTransitions.setChatSurfaceTransition(true);
 }
 
@@ -246,7 +247,9 @@ onMounted(async () => {
   agentStore.setAvailableModes(props.meta.modes, props.meta.defaultModeName);
   agentStore.regisrerTextInput(textInput.value);
   textInput.value?.focus();
-  agentStore.setIsTeleportedToBody(props.meta.stickByDefault);
+  const isTeleportedToBodyFromLocalStorage = agentStore.getLocalStorageItem('isTeleportedToBody') === 'true';
+
+  agentStore.setIsTeleportedToBody(isTeleportedToBodyFromLocalStorage || props.meta.stickByDefault);
   await agentStore.fetchSessionsList();
 });
 

custom/ConversationArea.vue

@@ -24,7 +24,7 @@
     :threshold="10"
     behavior="smooth"
     :style="{ 
-      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'px' : '100%',
+      maxWidth: agentStore.isFullScreen ? agentStore.MAX_WIDTH+'rem' : '100%',
       transition: `
         max-width ${agentTransitions.TRANSITION_DURATION}ms ease-in-out,
         transform ${agentTransitions.TRANSITION_DURATION}ms ease-in-out

custom/composables/useAgentStore.ts

@@ -8,6 +8,7 @@ import { DefaultChatTransport } from 'ai';
 import { useCoreStore } from '@/stores/core';
 import { useAgentTransitions } from './useAgentTransitions';
 import { useWindowSize } from '@vueuse/core';
+import { remToPx, pxToRem } from '../utils';
 
 type AgentMode = {
   name: string;
@@ -19,9 +20,9 @@ const PLACEHOLDER_DELETING_DELAY_MS = 35;
 const PLACEHOLDER_HOLD_DELAY_MS = 3000;
 
 export const useAgentStore = defineStore('agent', () => {
-  const DEFAULT_CHAT_WIDTH = 600;
-  const MAX_WIDTH = 800;
-  const MIN_WIDTH = 382; //w-96
+  const DEFAULT_CHAT_WIDTH = 30;
+  const MAX_WIDTH = 60;
+  const MIN_WIDTH = 25
   const agentTransitions = useAgentTransitions();
 
   const activeSessionId = ref<string | null>(null);
@@ -71,6 +72,9 @@ export const useAgentStore = defineStore('agent', () => {
   })
   watch(chatWidth, (newVal: number) => {
     setLocalStorageItem('chatWidth', newVal.toString());
+    if (!isFullScreen.value) {
+      setLocalStorageItem('chatWidthBeforeFullScreen', newVal.toString());
+    }
   })
   watch(activeSessionId, (newVal: string | null) => {
     if (newVal) {
@@ -90,14 +94,14 @@ export const useAgentStore = defineStore('agent', () => {
   onMounted(() => {
     const chatWidthBeforeFullScreen = parseInt(getLocalStorageItem('chatWidthBeforeFullScreen') || '0', 10);
     if (chatWidthBeforeFullScreen) {
-      chatWidth.value = chatWidthBeforeFullScreen;
+      setChatWidth(remToPx(chatWidthBeforeFullScreen));
     } else {
       const savedChatWidth = parseInt(getLocalStorageItem('chatWidth') || '0', 10);
       if (savedChatWidth) {
         if (savedChatWidth > MAX_WIDTH || savedChatWidth < MIN_WIDTH) {
-          chatWidth.value = DEFAULT_CHAT_WIDTH;
+          setChatWidth(remToPx(DEFAULT_CHAT_WIDTH));
         } else {
-          chatWidth.value = savedChatWidth;
+          setChatWidth(remToPx(savedChatWidth));
         }
       }
     }
@@ -110,7 +114,7 @@ export const useAgentStore = defineStore('agent', () => {
       isChatOpen.value = getLocalStorageItem('isChatOpen') === 'true';
     }
     if (coreStore.isMobile) {
-      chatWidth.value = window.innerWidth;
+      setChatWidth(window.innerWidth);
     }
     appRoot.value = document.getElementById('app');
     header.value = document.getElementById('af-header-nav');
@@ -135,23 +139,24 @@ export const useAgentStore = defineStore('agent', () => {
       const isTeleportedBeforeFullScreen = getLocalStorageItem('isTeleportedToBodyBeforeFullScreen') === 'true';
       agentTransitions.setAppRootTransition(true);
       setIsTeleportedToBody(isTeleportedBeforeFullScreen);
-      setChatWidth(lastChatWidth, false);
+      setChatWidth(remToPx(lastChatWidth), false);
       setTimeout(() => agentTransitions.setAppRootTransition(false), agentTransitions.TRANSITION_DURATION);
     }
   }
 
+  //takes on input width in pixels, converts to rem and sets chat width
   function setChatWidth(width: number, blockTransition = true) {
     if (blockTransition) {
       agentTransitions.setAppRootTransition(true);
     }
-    chatWidth.value = width;
+    chatWidth.value = pxToRem(width);
 
   }
   watch([isTeleportedToBody, isChatOpen, chatWidth], ([newIsTeleportedToBody, newIsChatOpen, newChatWidth]: [boolean, boolean, number]) => {
     if (appRoot.value && header.value) {
       if (newIsTeleportedToBody && newIsChatOpen) {
-        appRoot.value.style.paddingRight = `${chatWidth.value}px`;
-        header.value.style.paddingRight = `${chatWidth.value}px`;
+        appRoot.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
+        header.value.style.paddingRight = `${remToPx(chatWidth.value)}px`;
       } else {
         appRoot.value.style.paddingRight = '';
         header.value.style.paddingRight = '';
@@ -572,5 +577,6 @@ export const useAgentStore = defineStore('agent', () => {
     DEFAULT_CHAT_WIDTH,
     MAX_WIDTH,
     MIN_WIDTH,
+    getLocalStorageItem
   }
 })

custom/utils.ts

@@ -0,0 +1,9 @@
+export function remToPx(rem: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return rem * rootFontSize;
+}
+
+export function pxToRem(px: number): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return px / rootFontSize;
+}