From d1e6f5a29e86278c89d3f1d3439eaff27f3aff03 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Thu, 24 Apr 2025 15:35:34 +0800
Subject: [PATCH] refactor: enhance ChatMessage component for improved user
 experience

- Added loading indicator for streaming messages to inform users during processing.
- Updated token usage display to use an icon for better visual clarity and interaction.
- Refactored CSS styles for token usage to improve layout and hover effects.
- Removed redundant code for displaying message time, streamlining the template structure.
---
 .../src/components/ui/chat/ChatMessage.vue    | 60 ++++++++++++-------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/ui/chat/ChatMessage.vue b/frontend/crawlab-ui/src/components/ui/chat/ChatMessage.vue
index d477a8b3..5a02d954 100644
--- a/frontend/crawlab-ui/src/components/ui/chat/ChatMessage.vue
+++ b/frontend/crawlab-ui/src/components/ui/chat/ChatMessage.vue
@@ -5,6 +5,7 @@ import hljs from 'highlight.js';
 import { computed, ref, watch } from 'vue';
 import 'highlight.js/styles/github.css';
 import ClChatMessageAction from '@/components/ui/chat/ChatMessageAction.vue';
+import { Document } from '@element-plus/icons-vue';
 
 const { t } = useI18n();
 
@@ -119,7 +120,20 @@ defineOptions({ name: 'ClChatMessage' });
     </div>
 
     <div class="message-footer">
-      <!-- Token usage display -->
+      <!-- Show 'Generating...' for streaming messages -->
+      <template v-if="message.isStreaming">
+        <cl-loading-text
+          class="typing-text"
+          :text="t('components.ai.chatbot.generating')"
+        />
+      </template>
+      <template v-else>
+        <span class="message-time">
+          {{ formatTime(message.timestamp) }}
+        </span>
+      </template>
+
+      <!-- Token usage display as icon -->
       <el-popover
         v-if="hasTokenUsage && !message.isStreaming && message.role === 'assistant'"
         placement="top"
@@ -128,9 +142,9 @@ defineOptions({ name: 'ClChatMessage' });
         popper-class="token-usage-popover"
       >
         <template #reference>
-          <span class="token-usage">
-            {{ formatTokenCount(message.usage?.total_tokens) }} {{ t('components.ai.chatbot.tokens') }}
-          </span>
+          <div class="token-usage-icon" :title="formatTokenCount(message.usage?.total_tokens) + ' ' + t('components.ai.chatbot.tokens')">
+            <cl-icon :icon="['fa', 'calculator']" />
+          </div>
         </template>
         <div class="token-usage-details">
           <div class="token-usage-row">
@@ -147,19 +161,6 @@ defineOptions({ name: 'ClChatMessage' });
           </div>
         </div>
       </el-popover>
-
-      <!-- Show 'Generating...' for streaming messages -->
-      <template v-if="message.isStreaming">
-        <cl-loading-text
-          class="typing-text"
-          :text="t('components.ai.chatbot.generating')"
-        />
-      </template>
-      <template v-else>
-        <span class="message-time">
-          {{ formatTime(message.timestamp) }}
-        </span>
-      </template>
     </div>
   </div>
 </template>
@@ -171,6 +172,12 @@ defineOptions({ name: 'ClChatMessage' });
   margin: 0 12px;
   padding: 12px;
   position: relative;
+
+  &:hover {
+    .token-usage-icon {
+      visibility: visible;
+    }
+  }
 }
 
 .message-container:first-child.user {
@@ -371,6 +378,7 @@ defineOptions({ name: 'ClChatMessage' });
 }
 
 .message-footer {
+  height: 16px;
   font-size: 10px;
   opacity: 0.7;
   margin-top: 6px;
@@ -406,12 +414,22 @@ defineOptions({ name: 'ClChatMessage' });
   color: var(--el-color-primary);
 }
 
-/* Token usage styles */
-.token-usage {
-  font-size: 10px;
+.token-usage-icon {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
   cursor: pointer;
+  gap: 4px;
   color: var(--el-color-info);
-  margin-right: 8px;
+  visibility: hidden;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.token-count {
+  font-size: 10px;
 }
 
 .token-usage-details {