feat: enhance token usage display in ChatMessage component

- Added computed properties to display token usage details, including prompt, completion, and total tokens.
- Implemented formatting for token counts with comma separators for better readability.
- Updated internationalization files to include new labels for token usage.
- Refactored styles in ChatMessage to accommodate token usage display, improving user experience.

Author: Marvin Zhang

src/components/core/ai/AssistantConsole.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, reactive, ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ClChatInput } from '@/components';
-import useRequest from '@/services/request';
-import { getRequestBaseUrl } from '@/utils';
 import { debounce } from 'lodash';
-import { ElMessage } from 'element-plus';
-import { AxiosError } from 'axios';
 import { useRouter } from 'vue-router';
 import useAssistantConsole from './useAssistantConsole';
 
@@ -19,12 +15,10 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const { get } = useRequest();
 
 const router = useRouter();
 
 const {
-  currentConversation,
   currentConversationId,
   conversations,
   chatHistory,

src/components/ui/chat/ChatMessage.vue

@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import markdownit from 'markdown-it';
 import hljs from 'highlight.js';
-import { computed, ref, watch, onUnmounted } from 'vue';
+import { computed, ref, watch } from 'vue';
 import 'highlight.js/styles/github.css';
 
 const { t } = useI18n();
@@ -66,6 +66,20 @@ const filteredContents = computed<ChatMessageContent[]>(() => {
   return message.contents?.filter(content => !content.hidden) || [];
 });
 
+// Compute token usage display
+const hasTokenUsage = computed(() => {
+  const { message } = props;
+  return message.usage && 
+    (message.usage.total_tokens || 
+     message.usage.prompt_tokens || 
+     message.usage.completion_tokens);
+});
+
+// Format token count with comma separators
+const formatTokenCount = (count?: number): string => {
+  return count ? count.toLocaleString() : '0';
+};
+
 defineOptions({ name: 'ClChatMessage' });
 </script>
 
@@ -102,6 +116,35 @@ defineOptions({ name: 'ClChatMessage' });
     </div>
 
     <div class="message-footer">
+      <!-- Token usage display -->
+      <el-popover
+        v-if="hasTokenUsage && !message.isStreaming && message.role === 'assistant'"
+        placement="top"
+        trigger="hover"
+        :width="220"
+        popper-class="token-usage-popover"
+      >
+        <template #reference>
+          <span class="token-usage">
+            {{ formatTokenCount(message.usage?.total_tokens) }} {{ t('components.ai.chatbot.tokens') }}
+          </span>
+        </template>
+        <div class="token-usage-details">
+          <div class="token-usage-row">
+            <span>{{ t('components.ai.chatbot.promptTokens') }}:</span>
+            <span>{{ formatTokenCount(message.usage?.prompt_tokens) }}</span>
+          </div>
+          <div class="token-usage-row">
+            <span>{{ t('components.ai.chatbot.completionTokens') }}:</span>
+            <span>{{ formatTokenCount(message.usage?.completion_tokens) }}</span>
+          </div>
+          <div class="token-usage-row total">
+            <span>{{ t('components.ai.chatbot.totalTokens') }}:</span>
+            <span>{{ formatTokenCount(message.usage?.total_tokens) }}</span>
+          </div>
+        </div>
+      </el-popover>
+
       <!-- Show 'Generating...' for streaming messages -->
       <template v-if="message.isStreaming">
         <cl-loading-text
@@ -328,6 +371,9 @@ defineOptions({ name: 'ClChatMessage' });
   font-size: 10px;
   opacity: 0.7;
   margin-top: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .message-container.user .message-content {
@@ -357,6 +403,31 @@ defineOptions({ name: 'ClChatMessage' });
   color: var(--el-color-primary);
 }
 
+/* Token usage styles */
+.token-usage {
+  font-size: 10px;
+  cursor: pointer;
+  color: var(--el-color-info);
+  margin-right: 8px;
+}
+
+.token-usage-details {
+  font-size: 12px;
+}
+
+.token-usage-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.token-usage-row.total {
+  margin-top: 4px;
+  border-top: 1px solid var(--el-border-color-lighter);
+  padding-top: 4px;
+  font-weight: bold;
+}
+
 @keyframes loadingDots {
   to {
     width: 1.25em;

src/i18n/lang/en/components/ai.ts

@@ -31,6 +31,10 @@ const ai: LangAi = {
       tooltip:
         "You haven't configured any models yet. Add a model to get started.",
     },
+    tokens: 'Tokens',
+    promptTokens: 'Prompt Tokens',
+    completionTokens: 'Completion Tokens',
+    totalTokens: 'Total Tokens',
   },
 };
 

src/i18n/lang/zh/components/ai.ts

@@ -30,6 +30,10 @@ const ai: LangAi = {
       label: '添加模型',
       tooltip: '您还没有配置任何模型。添加一个模型开始聊天',
     },
+    tokens: '词元数',
+    promptTokens: '输入词元数',
+    completionTokens: '输出词元数',
+    totalTokens: '总词元数',
   },
 };
 

src/interfaces/i18n/components/ai.d.ts

@@ -31,6 +31,10 @@ export declare global {
         label: string;
         tooltip: string;
       };
+      tokens: string;
+      promptTokens: string;
+      completionTokens: string;
+      totalTokens: string;
     };
   }
 }

src/interfaces/models/llm.d.ts

@@ -44,6 +44,7 @@ export declare global {
     metadata?: Record<string, any>;
     status: ChatMessageStatus;
     error?: string;
+    usage?: ChatMessageUsage;
 
     // Frontend UI-specific properties
     timestamp?: Date;
@@ -61,11 +62,18 @@ export declare global {
     action?: string;
     action_status?: ChatMessageActionStatus;
     hidden?: boolean;
+    usage?: ChatMessageUsage;
 
     // Frontend UI-specific properties
     isStreaming?: boolean;
   }
 
+  interface ChatMessageUsage {
+    prompt_tokens?: number;
+    completion_tokens?: number;
+    total_tokens?: number;
+  }
+
   type ChatConversationStatus = 'active' | 'archived' | 'deleted';
 
   interface ChatConversation extends BaseModel {