diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue index d9429668..c421af76 100644 --- a/web/src/components/AgentMessageComponent.vue +++ b/web/src/components/AgentMessageComponent.vue @@ -33,12 +33,12 @@
-   +   正在调用工具: {{ toolCall.name || toolCall.function.name }} -   工具 {{ toolCall.name || toolCall.function.name }} 执行完成 +   工具 {{ toolCall.name || toolCall.function.name }} 执行完成
@@ -83,6 +83,7 @@ import { computed, ref } from 'vue'; import { CaretRightOutlined, ThunderboltOutlined, LoadingOutlined } from '@ant-design/icons-vue'; import RefsComponent from '@/components/RefsComponent.vue' +import { Loader, CircleCheckBig } from 'lucide-vue-next'; import { ToolResultRenderer } from '@/components/ToolCallingResult' @@ -343,6 +344,7 @@ const toggleToolCall = (toolCallId) => { user-select: none; position: relative; transition: all 0.2s ease; + align-items: center; &:hover { background-color: var(--gray-150); @@ -358,14 +360,19 @@ const toggleToolCall = (toolCallId) => { color: var(--main-700); } - .step-badge { - margin-left: auto; - background-color: var(--gray-200); - color: var(--gray-700); - padding: 2px 8px; - border-radius: 12px; - font-size: 12px; - font-weight: 500; + span { + display: flex; + align-items: center; + gap: 4px; + } + + .tool-loader { + margin-top: 2px; + color: var(--main-700); + } + + .tool-loader.rotate { + animation: rotate 2s linear infinite; } } @@ -471,6 +478,15 @@ const toggleToolCall = (toolCallId) => { transform: translateY(0); } } + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +}