feat: improve scrolling for new messages

Author: theboxer

_build/js/src/ui/index.ts

@@ -14,7 +14,7 @@ type LocalChat = {
 
 export const ui = {
   createLoadingOverlay,
-  localChat: Object.assign({}, createModal, {
+  localChat: Object.assign(createModal, {
     createModal: createModal,
     verifyPermissions,
   }) as LocalChat,

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

@@ -33,6 +33,13 @@ export const createModal = (config: LocalChatConfig) => {
     return;
   }
 
+  /**
+   * @deprecated
+   */
+  if (!config.type) {
+    config.type = 'text';
+  }
+
   if (!config.type) {
     alert(lng('modai.error.type_required'));
     return;

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

@@ -20,7 +20,13 @@ import type {
 } from '../../chatHistory';
 
 export const addUserMessage = (msg: UserMessage) => {
-  const messageElement: UpdatableHTMLElement<UserMessage> = createElement('div', 'message user');
+  const messageWrapper: UpdatableHTMLElement<UserMessage> = createElement(
+    'div',
+    'message-wrapper user',
+  );
+  messageWrapper.style.setProperty('--user-msg-height', '-10px');
+
+  const messageElement = createElement('div', 'message user');
 
   const textContent = msg.content;
   const imagesContent = [];
@@ -35,7 +41,7 @@ export const addUserMessage = (msg: UserMessage) => {
   textDiv.innerHTML = nlToBr(textContent);
   messageElement.appendChild(textDiv);
 
-  if (imagesContent) {
+  if (imagesContent.length > 0) {
     const imageRow = createElement('div', 'imageRow');
 
     for (const imgContent of imagesContent) {
@@ -103,36 +109,50 @@ export const addUserMessage = (msg: UserMessage) => {
 
   messageElement.appendChild(actionsContainer);
 
-  messageElement.update = (msg) => {
+  messageWrapper.update = (msg) => {
     const textContent = Array.isArray(msg.content) ? msg.content[0].value : msg.content;
     textDiv.innerHTML = nlToBr(textContent);
   };
 
-  globalState.modal.chatMessages.appendChild(messageElement);
+  messageWrapper.appendChild(messageElement);
+  globalState.modal.chatMessages.appendChild(messageWrapper);
 
-  return messageElement;
+  return messageWrapper;
 };
 
 export const addErrorMessage = (content: string) => {
   globalState.modal.welcomeMessage.style.display = 'none';
 
-  const messageElement: UpdatableHTMLElement = createElement('div', 'message error');
+  const messageWrapper: UpdatableHTMLElement = createElement('div', 'message-wrapper error');
+  const messageElement = createElement('div', 'message error');
 
   messageElement.appendChild(icon(14, triangleError));
 
   const textSpan = createElement('span');
   textSpan.textContent = content;
   messageElement.appendChild(textSpan);
 
-  globalState.modal.chatMessages.appendChild(messageElement);
+  messageWrapper.appendChild(messageElement);
+
+  globalState.modal.chatMessages.appendChild(messageWrapper);
 
-  return messageElement;
+  return messageWrapper;
 };
 
 export const addAssistantMessage = (msg: AssistantMessage, config: LocalChatConfig) => {
-  const messageElement: UpdatableHTMLElement<AssistantMessage> = createElement('div', 'message ai');
-  messageElement.dataset.id = msg.id;
+  const messageWrapper: UpdatableHTMLElement<AssistantMessage> = createElement(
+    'div',
+    'message-wrapper ai',
+  );
+  if (globalState.modal.chatMessages.lastElementChild?.firstElementChild) {
+    messageWrapper.style.setProperty(
+      '--user-msg-height',
+      `${globalState.modal.chatMessages.lastElementChild.firstElementChild.clientHeight}px`,
+    );
+  }
 
+  const messageElement = createElement('div', 'message ai');
+  messageElement.dataset.id = msg.id;
   const md = markdownit({
     html: true,
     xhtmlOut: true,
@@ -280,15 +300,17 @@ export const addAssistantMessage = (msg: AssistantMessage, config: LocalChatConf
 
   messageElement.appendChild(actionsContainer);
 
-  globalState.modal.chatMessages.appendChild(messageElement);
+  messageWrapper.appendChild(messageElement);
+
+  globalState.modal.chatMessages.appendChild(messageWrapper);
 
-  messageElement.update = (msg) => {
+  messageWrapper.update = (msg) => {
     const content =
       msg.contentType === 'image' ? `<img src="${textContent}" />` : md.render(msg.content ?? '');
     shadow.updateContent(content);
   };
 
-  return messageElement;
+  return messageWrapper;
 };
 
 export const renderMessage = (msg: Message, config: LocalChatConfig) => {