From 46db7903044edf76d10357a760d31ce214ab6c42 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Sat, 26 Apr 2025 17:17:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/main-panel/chat/index.vue  |  7 ++++--
 .../main-panel/chat/message/toolcall.vue      | 23 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/renderer/src/components/main-panel/chat/index.vue b/renderer/src/components/main-panel/chat/index.vue
index 6c54428..81e6fc1 100644
--- a/renderer/src/components/main-panel/chat/index.vue
+++ b/renderer/src/components/main-panel/chat/index.vue
@@ -3,13 +3,12 @@
         <el-scrollbar ref="scrollbarRef" :height="'90%'" @scroll="handleScroll" v-if="renderMessages.length > 0 || isLoading">
             <div class="message-list" :ref="el => messageListRef = el">
                 <div v-for="(message, index) in renderMessages" :key="index"
-                    :class="['message-item', message.role.split('/')[0]]"
+                    :class="['message-item', message.role.split('/')[0], message.role.split('/')[1]]"
                 >
                     <div class="message-avatar" v-if="message.role === 'assistant/content'">
                         <span class="iconfont icon-robot"></span>
                     </div>
                     <div class="message-avatar" v-else-if="message.role === 'assistant/tool_calls'">
-                        <span class="iconfont icon-tool"></span>
                     </div>
 
                     <!-- 用户输入的部分 -->
@@ -381,6 +380,10 @@ onUnmounted(() => {
     margin-top: 30px;
 }
 
+.assistant.tool_calls {
+    margin-top: 5px;
+}
+
 .chat-footer {
     padding: 16px;
     border-top: 1px solid var(--el-border-color);
diff --git a/renderer/src/components/main-panel/chat/message/toolcall.vue b/renderer/src/components/main-panel/chat/message/toolcall.vue
index 4ce3517..81806ac 100644
--- a/renderer/src/components/main-panel/chat/message/toolcall.vue
+++ b/renderer/src/components/main-panel/chat/message/toolcall.vue
@@ -15,7 +15,11 @@
                 <template #title>
                     <div class="tool-calls">
                         <div class="tool-call-header">
-                            <span class="tool-name">{{ props.message.tool_calls[0].function.name }}</span>
+                            <span class="tool-name">
+                                <span class="iconfont icon-tool"></span>
+
+                                {{ props.message.tool_calls[0].function.name }}
+                            </span>
                             <el-button size="small" @click="createTest(props.message.tool_calls[0])">
                                 <span class="iconfont icon-send"></span>
                             </el-button>
@@ -177,12 +181,17 @@ const collectErrors = computed(() => {
 
 <style>
 .message-text.tool_calls {
-    border-left: 3px solid var(--main-color);
-    padding-left: 10px;
+    border: 1px solid var(--main-color);
+    border-radius: .5em;
+    padding: 3px 10px;
 }
 
 .message-text.tool_calls.fail {
-    border-left: 3px solid var(--el-color-error);
+    border: 1px solid var(--el-color-error);
+}
+
+.message-text.tool_calls.fail .tool-name {
+    color: var(--el-color-error);
 }
 
 .message-text .el-collapse-item__header {
@@ -217,10 +226,12 @@ const collectErrors = computed(() => {
     display: flex;
     align-items: center;
     height: 26px;
+    display: flex;
+    align-items: center;
 }
 
-.tool-name.error {
-    color: var(--el-color-error);
+.tool-name .iconfont {
+    margin-right: 5px;
 }
 
 .tool-type {