feat: store modal's position to the local storage

Author: theboxer

_build/gpm.yaml

@@ -1,5 +1,5 @@
 name: modAI
-version: 0.12.0-alpha4
+version: 0.12.0-alpha5
 lowCaseName: modai
 namespace: modAI
 author: 'John Peca'

_build/js/src/ui/localChat/modalBuilder.ts

@@ -1,9 +1,10 @@
-import { createElement } from '../utils';
+import { createElement, debounce } from '../utils';
 import { renderMessage } from './messageHandlers';
 import { scrollToBottom } from './modalActions';
 import { buildModalChat } from './modalChat';
 import { buildModalHeader } from './modalHeader';
 import { buildModalInput } from './modalInput';
+import { loadModalState, saveModalState } from './state';
 import { chatHistory } from '../../chatHistory';
 import { globalState } from '../../globalState';
 import { lng } from '../../lng';
@@ -12,6 +13,8 @@ import { createModAIShadow } from '../dom/modAIShadow';
 import type { Modal, LocalChatConfig } from './types';
 import type { UpdatableHTMLElement } from '../../chatHistory';
 
+const debouncedSaveModalState = debounce(saveModalState, 300);
+
 export const buildModal = (config: LocalChatConfig) => {
   const { shadow, shadowRoot } = createModAIShadow<Modal>(true, () => {
     scrollToBottom('instant');
@@ -22,7 +25,17 @@ export const buildModal = (config: LocalChatConfig) => {
     ariaLabel: lng('modai.ui.modai_assistant_chat_dialog'),
   });
 
+  const modalState = loadModalState();
+  if (modalState.position) {
+    chatModal.style.width = modalState.position.width ?? '';
+    chatModal.style.height = modalState.position.height ?? '';
+    chatModal.style.top = modalState.position.top ?? '';
+    chatModal.style.left = modalState.position.left ?? '';
+    chatModal.style.transform = 'none';
+  }
+
   const resizeObserver = new ResizeObserver(() => {
+    debouncedSaveModalState();
     const msg = globalState.modal.chatMessages.lastElementChild as UpdatableHTMLElement | null;
 
     if (msg) {

_build/js/src/ui/localChat/modalHeader.ts

@@ -6,6 +6,7 @@ import { globalState } from '../../globalState';
 import { lng } from '../../lng';
 import { icon } from '../dom/icon';
 import { expand, minimize, x } from '../icons';
+import { saveModalState } from './state';
 
 const centerModal = (element: HTMLElement) => {
   const modalWidth = element.offsetWidth;
@@ -31,15 +32,20 @@ export const buildModalHeader = () => {
     { ariaLabel: lng('modai.ui.close_dialog') },
   );
 
+  const isMaximized = globalState.modal.modal.style.width === '90%';
+
   const buttonsWrapper = createElement('div', 'buttonsWrapper', [
     button(
-      icon(24, expand),
+      icon(24, isMaximized ? minimize : expand),
       (e) => {
         const self = e.currentTarget as HTMLButtonElement;
 
         if (globalState.modal.modal.style.width === '90%') {
           globalState.modal.modal.style.width = '';
           globalState.modal.modal.style.height = '';
+          globalState.modal.modal.style.transform = 'none';
+
+          saveModalState();
 
           self.ariaLabel = lng('modai.ui.maximize_dialog');
           self.innerHTML = '';
@@ -51,6 +57,9 @@ export const buildModalHeader = () => {
 
         globalState.modal.modal.style.width = '90%';
         globalState.modal.modal.style.height = '90%';
+        globalState.modal.modal.style.transform = 'none';
+
+        saveModalState();
 
         self.ariaLabel = lng('modai.ui.minimize_dialog');
         self.innerHTML = '';
@@ -60,10 +69,7 @@ export const buildModalHeader = () => {
       },
       '',
       {
-        ariaLabel:
-          globalState.modal.modal.style.width === '90%'
-            ? lng('modai.ui.minimize_dialog')
-            : lng('modai.ui.maximize_dialog'),
+        ariaLabel: isMaximized ? lng('modai.ui.minimize_dialog') : lng('modai.ui.maximize_dialog'),
       },
     ),
     closeModalBtn,
@@ -81,6 +87,7 @@ export const buildModalHeader = () => {
       endDrag();
       document.removeEventListener('mousemove', drag);
       document.removeEventListener('mouseup', endDrag);
+      saveModalState();
     });
   });
 

_build/js/src/ui/localChat/state.ts

@@ -1,5 +1,6 @@
 import { globalState } from '../../globalState';
 
+import type { ModalState } from './types';
 import type { Button } from '../dom/button';
 
 export const setLoadingState = (loading: boolean) => {
@@ -53,3 +54,34 @@ export const setLoadingState = (loading: boolean) => {
     }
   });
 };
+
+const MODAL_STORAGE_KEY = 'modai__state';
+
+export const saveModalState = () => {
+  const currentState = loadModalState();
+  currentState.position = {
+    width: globalState.modal.modal.style.width,
+    height: globalState.modal.modal.style.height,
+    left: globalState.modal.modal.style.left,
+    top: globalState.modal.modal.style.top,
+  };
+
+  try {
+    localStorage.setItem(MODAL_STORAGE_KEY, JSON.stringify(currentState));
+  } catch {
+    /* not needed */
+  }
+};
+
+export const loadModalState = (): ModalState => {
+  try {
+    const savedStateString = localStorage.getItem(MODAL_STORAGE_KEY);
+    if (savedStateString) {
+      return JSON.parse(savedStateString);
+    }
+
+    return {};
+  } catch {
+    return {};
+  }
+};

_build/js/src/ui/localChat/types.ts

@@ -67,3 +67,12 @@ export type LocalChatConfig = {
     mediaSource?: number | string;
   };
 };
+
+export type ModalState = {
+  position?: {
+    width?: string;
+    height?: string;
+    left?: string;
+    top?: string;
+  };
+};

_build/js/src/ui/utils.ts

@@ -50,3 +50,14 @@ export const createElement = <K extends keyof HTMLElementTagNameMap>(
 export const nlToBr = (content: string) => {
   return /<[^>]*>/g.test(content) ? content : content.replace(/\r\n|\n|\r/g, '<br>');
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce<T extends (...args: any[]) => void>(func: T, delay: number) {
+  let timeoutId: number | undefined;
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}