mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
fix: AI回复头像调整(#1592)
This commit is contained in:
wangdan-fit2cloud
parent
1a1e93296e
commit
d1002f48ab
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="item-content mb-16 lighter">
|
||||
<div v-for="(answer_text, index) in chatRecord.answer_text_list">
|
||||
<div v-for="(answer_text, index) in chatRecord.answer_text_list" :key="index">
|
||||
<div class="avatar">
|
||||
<img v-if="application.avatar" :src="application.avatar" height="30px" />
|
||||
<LogoIcon v-else height="30px" />
|
||||
<img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
|
||||
<LogoIcon v-else height="32px" width="32px" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-card shadow="always" class="dialog-card">
|
||||
|
|
@ -23,17 +23,17 @@
|
|||
<KnowledgeSource :data="chatRecord" :type="application.type" />
|
||||
</div>
|
||||
</el-card>
|
||||
<OperationButton
|
||||
:type="type"
|
||||
:application="application"
|
||||
:chat-record="chatRecord"
|
||||
:loading="loading"
|
||||
:start-chat="startChat"
|
||||
:stop-chat="stopChat"
|
||||
:regenerationChart="regenerationChart"
|
||||
></OperationButton>
|
||||
</div>
|
||||
</div>
|
||||
<OperationButton
|
||||
:type="type"
|
||||
:application="application"
|
||||
:chat-record="chatRecord"
|
||||
:loading="loading"
|
||||
:start-chat="startChat"
|
||||
:stop-chat="stopChat"
|
||||
:regenerationChart="regenerationChart"
|
||||
></OperationButton>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -80,15 +80,4 @@ const startChat = (chat: chatType) => {
|
|||
props.chatManagement.write(chat.id)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
float: left;
|
||||
}
|
||||
.content {
|
||||
padding-left: var(--padding-left);
|
||||
|
||||
:deep(ol) {
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div class="ai-chat__operate p-16-24">
|
||||
<slot name="operateBefore" />
|
||||
<div class="operate-textarea flex chat-width">
|
||||
|
|
@ -316,77 +315,5 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.ai-chat {
|
||||
&__operate {
|
||||
background: #f3f7f9;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.operate-textarea {
|
||||
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffffff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:has(.el-textarea__inner:focus) {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.operate {
|
||||
padding: 6px 10px;
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sent-button {
|
||||
max-height: none;
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
margin-top: -15px;
|
||||
|
||||
.circular {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-width {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.chat-width {
|
||||
max-width: 100% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@import '../../index.scss';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<!-- 开场白组件 -->
|
||||
<div class="item-content mb-16">
|
||||
<div class="avatar">
|
||||
<img v-if="application.avatar" :src="application.avatar" height="30px" />
|
||||
<LogoIcon v-else height="30px" />
|
||||
<img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
|
||||
<LogoIcon v-else height="32px" width="32px" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-card shadow="always" class="dialog-card">
|
||||
|
|
@ -32,4 +32,5 @@ const prologue = computed(() => {
|
|||
return temp.replace(/-\s.+/g, toQuickQuestion)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
:src="application.user_avatar"
|
||||
alt=""
|
||||
fit="cover"
|
||||
style="width: 30px; height: 30px; display: block"
|
||||
style="width: 32px; height: 32px; display: block"
|
||||
/>
|
||||
<AppAvatar v-else>
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
<img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
|
||||
</AppAvatar>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
|
@ -28,54 +28,4 @@ defineProps<{
|
|||
}>()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ai-chat {
|
||||
&__content {
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: var(--padding-left);
|
||||
|
||||
:deep(ol) {
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.problem-button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--app-layout-bg-color);
|
||||
height: 46px;
|
||||
padding: 0 12px;
|
||||
line-height: 46px;
|
||||
box-sizing: border-box;
|
||||
color: var(--el-text-color-regular);
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&:hover {
|
||||
background: var(--app-layout-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -290,15 +290,4 @@ onMounted(() => {
|
|||
handleInputFieldList()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chat-width {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.chat-width {
|
||||
max-width: 100% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
.ai-chat {
|
||||
--padding-left: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: var(--app-text-color);
|
||||
box-sizing: border-box;
|
||||
&__content {
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: var(--padding-left);
|
||||
|
||||
:deep(ol) {
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.problem-button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--app-layout-bg-color);
|
||||
height: 46px;
|
||||
padding: 0 12px;
|
||||
line-height: 46px;
|
||||
box-sizing: border-box;
|
||||
color: var(--el-text-color-regular);
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&:hover {
|
||||
background: var(--app-layout-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__operate {
|
||||
background: #f3f7f9;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.operate-textarea {
|
||||
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ffffff;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:has(.el-textarea__inner:focus) {
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.operate {
|
||||
padding: 6px 10px;
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sent-button {
|
||||
max-height: none;
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-spinner {
|
||||
margin-top: -15px;
|
||||
|
||||
.circular {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-width {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.chat-width {
|
||||
max-width: 100% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -447,25 +447,5 @@ defineExpose({
|
|||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ai-chat {
|
||||
--padding-left: 40px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: var(--app-text-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-width {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.chat-width {
|
||||
max-width: 100% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
</el-upload>
|
||||
</div>
|
||||
<el-text type="info" size="small"
|
||||
>建议尺寸 64*64，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
|
||||
>建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
|
||||
>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mb-8">
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
</el-upload>
|
||||
</div>
|
||||
<el-text type="info" size="small">
|
||||
建议尺寸 64*64，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
|
||||
建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB</el-text
|
||||
>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mb-8">
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
</el-upload>
|
||||
</div>
|
||||
<el-text type="info" size="small">
|
||||
建议尺寸 64*64，支持 JPG、PNG、GIF，大小不超过 10 MB
|
||||
建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB
|
||||
</el-text>
|
||||
<div class="border-t mt-8">
|
||||
<div class="flex-between mb-8">
|
||||
|
|
|
|||
Loading…
Reference in New Issue