Add some throttling to clean up scrolling, tweak textarea styles

DeabLabs · Oct 19, 2023 · ce2aafe · ce2aafe
1 parent c78867f
commit ce2aafe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/apps/web/src/lib/components/message.svelte b/apps/web/src/lib/components/message.svelte
@@ -6,4 +6,4 @@
   $: html = Markdoc.renderers.html(Markdoc.transform(Markdoc.parse(content || '')));
 </script>
 
-<div class="prose min-w-0 m-0 p-0 w-full max-w-full">{@html html}</div>
+<div class="prose min-w-0 m-0 p-0 w-full max-w-full min-h-8">{@html html}</div>
diff --git a/apps/web/src/lib/stores/messages.ts b/apps/web/src/lib/stores/messages.ts
@@ -6,6 +6,7 @@ import type { SafePartyEvents, SafePartyResponses } from 'mclient';
 import PartySocket from 'partysocket';
 import { createPartyClient } from 'partyrpc';
 import invariant from 'tiny-invariant';
+import throttle from 'just-throttle';
 
 type OptimisticMessage = {
   content: string;
@@ -59,20 +60,28 @@ export function createMessagesStore({ partyOptions, callbacks }: CreateMessagesS
       callbacks?.SetMessages?.();
     });
 
+    const updateMessages = throttle(
+      (newMessage: Schema.Message) => {
+        update((state) => {
+          const newState = {
+            ...state,
+            messages: state.messages.map((message) => {
+              if ('id' in message && message.id === newMessage.id) {
+                return newMessage;
+              }
+              return message;
+            })
+          };
+          return newState;
+        });
+        callbacks?.MessageEdited?.();
+      },
+      16,
+      { trailing: true, leading: true }
+    );
+
     client.on('MessageEdited', (e) => {
-      update((state) => {
-        const newState = {
-          ...state,
-          messages: state.messages.map((message) => {
-            if ('id' in message && message.id === e.message.id) {
-              return e.message;
-            }
-            return message;
-          })
-        };
-        return newState;
-      });
-      callbacks?.MessageEdited?.();
+      updateMessages(e.message);
     });
 
     client.on('UserJoined', (e) => {

diff --git a/apps/web/src/routes/(app)/projects/[projectId]/topics/[topicId]/chat/chat.svelte b/apps/web/src/routes/(app)/projects/[projectId]/topics/[topicId]/chat/chat.svelte
@@ -22,12 +22,16 @@
     if (messagesEl instanceof HTMLElement) {
       const lastMessageEl = messagesEl.lastElementChild;
       if (lastMessageEl instanceof HTMLElement) {
-        lastMessageEl.scrollIntoView({ behavior: smooth ? 'smooth' : undefined });
+        // select the last message's element with the .prose class
+        const lastMessageContent = lastMessageEl.querySelector('.prose');
+        if (lastMessageContent instanceof HTMLElement) {
+          lastMessageContent.scrollIntoView({ behavior: smooth ? 'smooth' : undefined });
+        }
       }
     }
   }
 
-  const throttledScroll = throttle(scrollToEndOfMessages, 1000, { leading: true });
+  const throttledScroll = throttle(scrollToEndOfMessages, 256, { leading: true, trailing: true });
 
   $: messagesStore = createMessagesStore({
     partyOptions: data.partyOptions,
@@ -195,7 +199,7 @@
       use:autosize
       name="content"
       style="overflow-x: hidden;"
-      class="input input-bordered w-full join-item max-h-36 !overflow-x-hidden resize-none"
+      class="input input-bordered w-full join-item max-h-36 !overflow-x-hidden resize-none pt-3"
     />
     <button id="send-btn" type="submit" class="join-item btn btn-ghost rounded-lg self-center"
       >Send</button