Skip to content

Commit

Permalink
Perf: Support DeepSeek
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhaoJiSen
ZhaoJiSen committed Feb 8, 2025
1 parent 3f2b8ff commit 2472c99
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 106 deletions.
Binary file added src/assets/img/deepSeek.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
299 changes: 198 additions & 101 deletions src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,71 @@
<template>
<div :class="{'user-role': isUserRole}" class="chat-item">
<div class="avatar">
<el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
</div>
<div class="content">
<div class="operational">
<span class="date">
{{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
</span>
<div :class="{ 'user-role': isUserRole }" class="chat-item">
<div class="chart-item-container">
<div class="avatar">
<el-avatar
:src="isUserRole ? userUrl : chatUrl"
class="header-avatar"
/>
</div>
<div class="message">
<div class="message-content">
<span v-if="isSystemError" class="error">
{{ item.message.content }}
</span>
<span v-else class="chat-text">
<MessageText :message="item.message" />
</span>
<div class="content">
<div class="operational">
<div v-if="!item.reasoning" class="date">
{{
$moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
}}
</div>

<div v-else class="thinking-time">已深度思考</div>
</div>
<div class="action">
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
:open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />
</el-tooltip>
<el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<i class="fa fa-ellipsis-v" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
{{ i.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div :class="item.reasoning ? 'reasoning' : 'message'">
<div class="message-content">
<div v-if="!item.reasoning">
<span v-if="isSystemError" class="error">
{{ item.message.content }}
</span>
<span v-else class="chat-text">
<MessageText :message="item.message" />
</span>
</div>

<div v-else class="thinking-wrapper">
<div class="thinking-content">
<!-- eslint-disable-next-line -->
<div class="divider"></div>
<p>
<MessageText :message="item.reasoning" />
</p>
</div>

<div class="thinking-result">
<MessageText :message="item.result" />
</div>
</div>
</div>
<div class="action">
<el-tooltip
v-if="isSystemError && isLoading"
:content="$tc('Reconnect')"
:open-delay="500"
placement="top"
>
<svg-icon icon-class="refresh" @click="onRefresh" />
</el-tooltip>
<el-dropdown v-else size="small" @command="handleCommand">
<span class="el-dropdown-link">
<i class="fa fa-ellipsis-v" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="i in dropdownOptions"
:key="i.action"
:command="i.action"
>
{{ i.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
Expand All @@ -45,7 +74,7 @@

<script>
import MessageText from './MessageText.vue'
import { mapState } from 'vuex'
import { mapGetters, mapState } from 'vuex'
import { copy } from '@/utils/common'
import { useChat } from '../../useChat.js'
import { reconnect } from '@/utils/socket'
Expand All @@ -65,7 +94,6 @@ export default {
},
data() {
return {
chatUrl: require('@/assets/img/chat.png'),
userUrl: '/api/v1/settings/logo/',
dropdownOptions: [
{
Expand All @@ -79,11 +107,21 @@ export default {
...mapState({
isLoading: state => state.chat.loading
}),
...mapGetters([
'publicSettings'
]),
isUserRole() {
return this.item.message?.role === 'user'
},
isSystemError() {
return this.item.type === 'error' && this.item.message?.role === 'assistant'
return (
this.item.type === 'error' && this.item?.role === 'assistant'
)
},
chatUrl() {
return this.publicSettings.CHAT_AI_TYPE === 'gpt'
? require('@/assets/img/chat.png')
: require('@/assets/img/deepSeek.png')
}
},
methods: {
Expand All @@ -94,7 +132,7 @@ export default {
},
handleCommand(value) {
if (value === 'copy') {
copy(this.item.message.content)
copy(this.item.result.content)
}
}
}
Expand All @@ -104,101 +142,160 @@ export default {
<style lang="scss" scoped>
.chat-item {
display: flex;
padding: 16px 14px 0;
padding: 0.5rem;
&:last-child {
padding-bottom: 16px;
}
.chart-item-container {
display: flex;
gap: 0.5rem;
.avatar {
width: 22px;
height: 22px;
margin-top: 2px;
.avatar {
width: 24px;
height: 24px;
margin-top: 2px;
.header-avatar {
width: 100%;
height: 100%;
.header-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
&::v-deep img {
background-color: #e5e5e7;
&::v-deep img {
background-color: #fff;
}
}
}
}
.content {
margin-left: 6px;
overflow: hidden;
.operational {
.content {
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 0.5rem;
overflow: hidden;
.copy {
float: right;
cursor: pointer;
}
}
.operational {
display: flex;
justify-content: space-between;
overflow: hidden;
.message {
display: -webkit-box;
.date {
padding-top: 5px;
}
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.thinking-time {
width: 6rem;
display: flex;
justify-content: center;
padding: 5px 10px;
border-radius: 0.5rem;
background-color: #f5f5f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
.copy {
float: right;
cursor: pointer;
}
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.reasoning {
display: flex;
gap: 0.5rem;
align-items: flex-end;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
.message-content .thinking-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
&:hover {
color: #7b8085
.thinking-content {
position: relative;
color: #8b8b8b;
.divider {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 2px solid #e5e5e5;
}
p {
margin: unset;
padding-left: 0.5rem;
::v-deep p {
color: #8b8b8b;
}
}
}
}
}
.error {
color: red;
.message {
display: -webkit-box;
.message-content {
flex: 1;
padding: 6px 10px;
border-radius: 2px 12px 12px;
background-color: #f0f1f5;
}
.action {
.svg-icon {
transform: translateY(50%);
margin-left: 3px;
cursor: pointer;
}
.el-dropdown {
height: 32px;
line-height: 37px;
font-size: 13px;
.el-dropdown-link {
i {
padding: 4px 5px;
font-size: 15px;
color: #8d9091;
&:hover {
color: #7b8085;
}
}
}
}
}
.error {
color: red;
}
}
}
}
}
.user-role {
flex-direction: row-reverse;
&:last-child {
padding-bottom: 16px;
}
.content {
margin-right: 10px;
&.user-role {
flex-direction: row-reverse;
.operational {
.chart-item-container {
flex-direction: row-reverse;
}
.message {
flex-direction: row-reverse;
.content {
margin-right: 10px;
.operational {
flex-direction: row-reverse;
}
.message-content {
background-color: var(--menu-hover);
border-radius: 12px 2px 12px 12px;
.message {
flex-direction: row-reverse;
.message-content {
background-color: var(--menu-hover);
border-radius: 12px 2px 12px 12px;
}
}
}
}
Expand Down
12 changes: 11 additions & 1 deletion src/components/Apps/ChatAi/components/ChitChat/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,17 @@ export default {
setLoading(true)
removeLoadingMessageInChat()
this.conversationId = data.id
updateChaMessageContentById(data.message.id, data)
const newFragment = {
message: { id: data.message.id },
reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
result: { content: data.message.is_reasoning ? '' : data.message.content },
role: data.message.role,
type: data.message.type,
create_time: data.message.create_time
}
updateChaMessageContentById(data.message.id, newFragment)
}
if (data.message?.type === 'finish') {
setLoading(false)
Expand Down
Loading

0 comments on commit 2472c99

Please sign in to comment.