kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化

Browse Source
This commit is contained in:
锦恢 2025-04-26 17:17:57 +08:00
parent a328929296
commit 46db790304
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
renderer/src/components/main-panel/chat/index.vue
View File

@ -3,13 +3,12 @@
<el-scrollbar ref="scrollbarRef" :height="'90%'" @scroll="handleScroll" v-if="renderMessages.length > 0 || isLoading"> <el-scrollbar ref="scrollbarRef" :height="'90%'" @scroll="handleScroll" v-if="renderMessages.length > 0 || isLoading">
<div class="message-list" :ref="el => messageListRef = el"> <div class="message-list" :ref="el => messageListRef = el">
<div v-for="(message, index) in renderMessages" :key="index" <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'"> <div class="message-avatar" v-if="message.role === 'assistant/content'">
<span class="iconfont icon-robot"></span> <span class="iconfont icon-robot"></span>
</div> </div>
<div class="message-avatar" v-else-if="message.role === 'assistant/tool_calls'"> <div class="message-avatar" v-else-if="message.role === 'assistant/tool_calls'">
<span class="iconfont icon-tool"></span>
</div> </div>
<!-- 用户输入的部分 --> <!-- 用户输入的部分 -->
@ -381,6 +380,10 @@ onUnmounted(() => {
margin-top: 30px; margin-top: 30px;
} }
.assistant.tool_calls {
margin-top: 5px;
}
.chat-footer { .chat-footer {
padding: 16px; padding: 16px;
border-top: 1px solid var(--el-border-color); border-top: 1px solid var(--el-border-color);

23
renderer/src/components/main-panel/chat/message/toolcall.vue
View File

@ -15,7 +15,11 @@
<template #title> <template #title>
<div class="tool-calls"> <div class="tool-calls">
<div class="tool-call-header"> <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])"> <el-button size="small" @click="createTest(props.message.tool_calls[0])">
<span class="iconfont icon-send"></span> <span class="iconfont icon-send"></span>
</el-button> </el-button>
@ -177,12 +181,17 @@ const collectErrors = computed(() => {
<style> <style>
.message-text.tool_calls { .message-text.tool_calls {
border-left: 3px solid var(--main-color); border: 1px solid var(--main-color);
padding-left: 10px; border-radius: .5em;
padding: 3px 10px;
} }
.message-text.tool_calls.fail { .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 { .message-text .el-collapse-item__header {
@ -217,10 +226,12 @@ const collectErrors = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
height: 26px; height: 26px;
display: flex;
align-items: center;
} }
.tool-name.error { .tool-name .iconfont {
color: var(--el-color-error); margin-right: 5px;
} }
.tool-type { .tool-type {