From 97b8749dd1e382d05ab01828b0f932906127b10b Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 12 Oct 2024 14:03:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=80=E9=94=AE=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E5=88=B0=E6=B6=88=E6=81=AF=E9=A1=B6=E9=83=A8=20#166?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #166
---
 src/renderer/src/pages/home/Messages/Message.tsx   | 14 ++++++++------
 .../src/pages/home/Messages/MessageTokens.tsx      | 10 ++++++++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 1b84abea..cc279f58 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -42,15 +42,17 @@ const MessageItem: FC<Props> = ({ message, index, lastMessage, showMenu = true,
 
   useEffect(() => {
     const unsubscribes = [
-      EventEmitter.on(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, () => {
+      EventEmitter.on(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, (highlight: boolean = true) => {
         if (messageRef.current) {
           messageRef.current.scrollIntoView({ behavior: 'smooth' })
-          setTimeout(() => {
-            messageRef.current?.classList.add('message-highlight')
+          if (highlight) {
             setTimeout(() => {
-              messageRef.current?.classList.remove('message-highlight')
-            }, 2500)
-          }, 500)
+              messageRef.current?.classList.add('message-highlight')
+              setTimeout(() => {
+                messageRef.current?.classList.remove('message-highlight')
+              }, 2500)
+            }, 500)
+          }
         }
       })
     ]
diff --git a/src/renderer/src/pages/home/Messages/MessageTokens.tsx b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
index 24e81d3c..263e97a7 100644
--- a/src/renderer/src/pages/home/Messages/MessageTokens.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
@@ -1,16 +1,21 @@
 import { useRuntime } from '@renderer/hooks/useStore'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Message } from '@renderer/types'
 import styled from 'styled-components'
 
 const MessgeTokens: React.FC<{ message: Message }> = ({ message }) => {
   const { generating } = useRuntime()
 
+  const locateMessage = () => {
+    EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false)
+  }
+
   if (!message.usage) {
     return null
   }
 
   if (message.role === 'user') {
-    return <MessageMetadata>Tokens: {message?.usage?.total_tokens}</MessageMetadata>
+    return <MessageMetadata onClick={locateMessage}>Tokens: {message?.usage?.total_tokens}</MessageMetadata>
   }
 
   if (generating) {
@@ -19,7 +24,7 @@ const MessgeTokens: React.FC<{ message: Message }> = ({ message }) => {
 
   if (message.role === 'assistant') {
     return (
-      <MessageMetadata>
+      <MessageMetadata onClick={locateMessage}>
         Tokens: {message?.usage?.total_tokens} | ↑{message?.usage?.prompt_tokens} | ↓{message?.usage?.completion_tokens}
       </MessageMetadata>
     )
@@ -33,6 +38,7 @@ const MessageMetadata = styled.div`
   color: var(--color-text-2);
   user-select: text;
   margin: 2px 0;
+  cursor: pointer;
 `
 
 export default MessgeTokens