[UX Fix] Improve chat layout/UX with auto scroll and input focus

MorpheusAIs · Mar 1, 2024 · 8ca03e7 · 8ca03e7
1 parent 6469425
commit 8ca03e7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/frontend/components/layout/main.tsx b/src/frontend/components/layout/main.tsx
@@ -38,18 +38,21 @@ const Main = {
     display: flex;
     width: 100%;
     height: ${(props) => props.theme.layout.topBarHeight}px;
+    flex-shrink: 0;
   `,
   MainWrapper: Styled.div`
     display: flex;
     width: 80%;
     height: 70%;
+    flex-grow: 1;
     border-radius: 30px;
     border: 5px solid ${(props) => props.theme.colors.hunter};
     padding: 10px;
   `,
   BottomWrapper: Styled.div`
     display: flex;
     width: 100%;
-    height: 20%;
+    height:  ${(props) => props.theme.layout.bottomBarHeight}px;
+    flex-shrink: 0;
   `,
 };
diff --git a/src/frontend/theme/theme.ts b/src/frontend/theme/theme.ts
@@ -8,6 +8,7 @@ export interface ITheme {
   };
   layout: {
     topBarHeight: number;
+    bottomBarHeight: number;
   };
   fonts: {
     family: {
@@ -38,8 +39,8 @@ const common = {
     balance: '#FFFFFF',
   },
   layout: {
-    leftBarWidth: 200,
     topBarHeight: 130,
+    bottomBarHeight: 130,
   },
   fonts: {
     size: {

diff --git a/src/frontend/views/chat.tsx b/src/frontend/views/chat.tsx
@@ -1,5 +1,5 @@
 // libs
-import React, { FormEvent, useEffect, useState } from 'react';
+import React, { FormEvent, useEffect, useState, useRef } from 'react';
 import Styled from 'styled-components';
 import { useSDK } from '@metamask/sdk-react';
 import { ThreeDots } from 'react-loader-spinner';
@@ -28,6 +28,9 @@ const ChatView = (): JSX.Element => {
   const ethInWei = '1000000000000000000';
   const [selectedNetwork, setSelectedNetwork] = useState('');
 
+  const chatMainRef = useRef<HTMLDivElement>(null);
+  const chatInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     window.backendBridge.ollama.onAnswer((response) => {
       setDialogueEntries([
@@ -43,6 +46,32 @@ const ChatView = (): JSX.Element => {
     };
   });
 
+  // Scroll to bottom of chat when user adds new dialogue
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (chatMainRef.current && mutation.type === 'childList') {
+          chatMainRef.current.scrollTop = chatMainRef.current.scrollHeight;
+        }
+      }
+    });
+
+    if (chatMainRef.current) {
+      observer.observe(chatMainRef?.current, {
+        childList: true, // observe direct children
+      });
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Refocus onto input field once new dialogue entry is added
+  useEffect(() => {
+    if (chatInputRef.current) {
+      chatInputRef.current.focus();
+    }
+  }, [dialogueEntries]);
+
   //Function to update dialogue entries
   const updateDialogueEntries = (question: string, message: string) => {
     setCurrentQuestion(undefined);
@@ -211,7 +240,7 @@ const ChatView = (): JSX.Element => {
         <option value="0xa4b1">Arbitrum</option>
         <option value="0x64">Gnosis</option>
       </Chat.Dropdown>
-      <Chat.Main>
+      <Chat.Main ref={chatMainRef}>
         {dialogueEntries.map((entry, index) => {
           return (
             <Chat.QuestionWrapper
@@ -236,6 +265,7 @@ const ChatView = (): JSX.Element => {
         <Chat.InputWrapper>
           <Chat.Arrow>&gt;</Chat.Arrow>
           <Chat.Input
+            ref={chatInputRef}
             disabled={isOllamaBeingPolled}
             value={inputValue}
             onChange={handleQuestionChange}