From 0e784c50ad11079d7af5537c0e9cc28bf84c7ac9 Mon Sep 17 00:00:00 2001
From: Yifei Zhang <yidadaa@qq.com>
Date: Mon, 3 Apr 2023 03:27:36 +0000
Subject: [PATCH] fix: #384 improve scroll

---
 app/components/chat.tsx   |  8 ++++++--
 app/styles/highlight.scss | 15 ++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 3864a3292..f13ba6e70 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -461,8 +461,9 @@ export function Chat(props: {
 
   // Auto focus
   useEffect(() => {
+    if (props.sideBarShowing) return;
     inputRef.current?.focus();
-  }, []);
+  }, [props.sideBarShowing]);
 
   return (
     <div className={styles.chat} key={session.id}>
@@ -530,7 +531,6 @@ export function Chat(props: {
         className={styles["chat-body"]}
         ref={scrollRef}
         onScroll={(e) => onChatBodyScroll(e.currentTarget)}
-        onMouseOver={() => inputRef.current?.blur()}
         onTouchStart={() => inputRef.current?.blur()}
       >
         {messages.map((message, i) => {
@@ -592,6 +592,7 @@ export function Chat(props: {
                         if (!isMobileScreen()) return;
                         setUserInput(message.content);
                       }}
+                      onMouseOver={() => inputRef.current?.blur()}
                     >
                       <Markdown content={message.content} />
                     </div>
@@ -626,6 +627,9 @@ export function Chat(props: {
               setAutoScroll(false);
               setTimeout(() => setPromptHints([]), 500);
             }}
+            onMouseOver={() => {
+              inputRef.current?.focus();
+            }}
             autoFocus={!props?.sideBarShowing}
           />
           <IconButton
diff --git a/app/styles/highlight.scss b/app/styles/highlight.scss
index f1314a263..8aee8b6c6 100644
--- a/app/styles/highlight.scss
+++ b/app/styles/highlight.scss
@@ -8,16 +8,22 @@
     font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   }
 
-  pre code.hljs {
+  pre code {
     display: block;
     overflow-x: auto;
     padding: 1em;
   }
 
-  code.hljs {
+  code {
     padding: 3px 5px;
   }
 
+  .hljs,
+  pre {
+    background: #1a1b26;
+    color: #cbd2ea;
+  }
+
   /*!
   Theme: Tokyo-night-Dark
   origin: https://github.com/enkia/tokyo-night-vscode-theme
@@ -99,11 +105,6 @@
     color: #c0caf5;
   }
 
-  .hljs {
-    background: #1a1b26;
-    color: #9aa5ce;
-  }
-
   .hljs-emphasis {
     font-style: italic;
   }