feat: improve chat scrolling to show max 3 lines of last user message

Author: theboxer

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

@@ -10,6 +10,7 @@ import { confirmDialog } from '../cofirmDialog';
 import { icon } from '../dom/icon';
 import { copy, edit, plus, textSelect, triangleError } from '../icons';
 import { createElement, nlToBr } from '../utils';
+import { scrollToBottom } from './modalActions';
 
 import type { LocalChatConfig } from './types';
 import type {
@@ -59,7 +60,6 @@ export const addUserMessage = (msg: UserMessage) => {
     'div',
     `message-wrapper user ${msg.init ? '' : 'new'}`,
   );
-  messageWrapper.style.setProperty('--user-msg-height', '-10px');
 
   const messageElement = createElement('div', 'message user');
 
@@ -160,6 +160,10 @@ export const addUserMessage = (msg: UserMessage) => {
   messageWrapper.appendChild(messageElement);
   globalState.modal.chatMessages.appendChild(messageWrapper);
 
+  const userMsgHeight = messageWrapper.firstElementChild?.clientHeight ?? 0;
+  const msgHeight = userMsgHeight < 100 ? -10 : -1 * (userMsgHeight - 62);
+  messageWrapper.style.setProperty('--user-msg-height', `${msgHeight}px`);
+
   return messageWrapper;
 };
 
@@ -187,11 +191,15 @@ export const addAssistantMessage = (msg: AssistantMessage, config: LocalChatConf
     'div',
     `message-wrapper ai ${msg.init ? '' : 'new'}`,
   );
+
   if (globalState.modal.chatMessages.lastElementChild?.firstElementChild) {
-    messageWrapper.style.setProperty(
-      '--user-msg-height',
-      `${globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight}px`,
-    );
+    const msgHeight =
+      globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight < 100
+        ? globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight
+        : globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight -
+          (globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight - 62) +
+          10;
+    messageWrapper.style.setProperty('--user-msg-height', `${msgHeight}px`);
   }
 
   const messageElement = createElement('div', 'message ai');
@@ -363,25 +371,15 @@ export const renderMessage = (msg: Message, config: LocalChatConfig) => {
 
   if (msg.__type === 'UserMessage') {
     const el = addUserMessage(msg);
-    el.firstElementChild?.scrollIntoView({
-      behavior: msg.init === true ? 'instant' : 'smooth',
-      block: 'start',
-    });
+    if (!msg.init) {
+      scrollToBottom('smooth');
+    }
 
     return el;
   }
 
   if (msg.__type === 'AssistantMessage') {
-    const el = addAssistantMessage(msg, config);
-
-    if (msg.init === true) {
-      el.firstElementChild?.scrollIntoView({
-        behavior: 'instant',
-        block: 'start',
-      });
-    }
-
-    return el;
+    return addAssistantMessage(msg, config);
   }
 
   return;

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

@@ -272,7 +272,7 @@ export const switchType = (type: ModalType, config: LocalChatConfig) => {
     });
   }
 
-  scrollToBottom();
+  scrollToBottom('instant');
 };
 
 export const clearChat = () => {
@@ -312,6 +312,9 @@ export const handleImageUpload = async (fileOrUrl: File | string, isRemoteUrl: b
   globalState.modal.attachments.addImageAttachment(dataURL);
 };
 
-export const scrollToBottom = () => {
-  globalState.modal.chatContainer.scrollTop = globalState.modal.chatContainer.scrollHeight;
+export const scrollToBottom = (behavior: 'smooth' | 'instant' = 'smooth') => {
+  globalState.modal.chatContainer.scrollTo({
+    top: globalState.modal.chatContainer.scrollHeight,
+    behavior: behavior,
+  });
 };

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

@@ -14,7 +14,7 @@ import type { UpdatableHTMLElement } from '../../chatHistory';
 
 export const buildModal = (config: LocalChatConfig) => {
   const { shadow, shadowRoot } = createModAIShadow<Modal>(true, () => {
-    scrollToBottom();
+    scrollToBottom('instant');
     shadow.messageInput.focus();
   });
 

assets/components/modai/js/modai.js

@@ -10,7 +10,6 @@
 use modAI\Services\AIServiceFactory;
 use modAI\Services\Config\CompletionsConfig;
 use modAI\Settings;
-use modAI\Tools\GetWeather;
 use Psr\Http\Message\ServerRequestInterface;
 
 class Chat extends API