mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-31 18:22:49 +00:00
feat: 对话增加历史记录
This commit is contained in:
wangdan-fit2cloud
parent
f9a23f8ee1
commit
e44190470d
|
|
@ -54,13 +54,16 @@ const chatButtonHtml=
|
|||
const getChatContainerHtml=(protocol,host,token)=>{
|
||||
return `<div id="maxkb-chat-container">
|
||||
<iframe id="maxkb-chat" src=${protocol}://${host}/ui/chat/${token}?mode=embed></iframe>
|
||||
<div class="maxkb-operate"><div class="maxkb-closeviewport maxkb-viewportnone"><svg style="vertical-align: middle;overflow: hidden;" t="1710214539671" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="rgb(100, 106, 115)" width="16" height="16"><path d="M85.333333 384c25.6 0 42.666667-17.066667 42.666667-42.666667V128h213.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v256c0 25.6 17.066667 42.666667 42.666666 42.666667zM938.666667 640c-25.6 0-42.666667 17.066667-42.666667 42.666667v213.333333h-213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h256c25.6 0 42.666667-17.066667 42.666666-42.666666v-256c0-25.6-17.066667-42.666667-42.666666-42.666667zM601.6 401.066667c4.266667 8.533333 12.8 17.066667 21.333333 21.333333 4.266667 4.266667 12.8 4.266667 17.066667 4.266667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-153.6l226.133333-226.133333c17.066667-17.066667 17.066667-42.666667 0-59.733333-8.533333-8.533333-17.066667-12.8-29.866666-12.8s-21.333333 4.266667-29.866667 12.8L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 4.266667 0 12.8 4.266667 17.066667zM115.2 968.533333L341.333333 742.4V896c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-4.266667 0-12.8-4.266667-17.066667-4.266667-8.533333-12.8-17.066667-21.333333-21.333333-4.266667-4.266667-12.8-4.266667-17.066667-4.266667H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6l-226.133333 226.133333c-17.066667 17.066667-17.066667 42.666667 0 59.733333s42.666667 17.066667 59.733333 0z" p-id="10189"></path></svg></div>
|
||||
<div class="maxkb-operate"><div class="maxkb-closeviewport maxkb-viewportnone"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.507 11.6645C7.73712 11.6645 7.94545 11.7578 8.09625 11.9086C8.24706 12.0594 8.34033 12.2677 8.34033 12.4978V16.7976C8.34033 17.0277 8.15378 17.2143 7.92366 17.2143H7.09033C6.86021 17.2143 6.67366 17.0277 6.67366 16.7976V14.5812L3.41075 17.843C3.24803 18.0057 2.98421 18.0057 2.82149 17.843L2.23224 17.2537C2.06952 17.091 2.06952 16.8272 2.23224 16.6645L5.56668 13.3311H3.19634C2.96622 13.3311 2.77967 13.1446 2.77967 12.9145V12.0811C2.77967 11.851 2.96622 11.6645 3.19634 11.6645H7.507ZM16.5991 2.1572C16.7619 1.99448 17.0257 1.99448 17.1884 2.1572L17.7777 2.74645C17.9404 2.90917 17.9404 3.17299 17.7777 3.33571L14.4432 6.66904H16.8136C17.0437 6.66904 17.2302 6.85559 17.2302 7.08571V7.91904C17.2302 8.14916 17.0437 8.33571 16.8136 8.33571H12.5029C12.2728 8.33571 12.0644 8.24243 11.9136 8.09163C11.7628 7.94082 11.6696 7.73249 11.6696 7.50237V3.20257C11.6696 2.97245 11.8561 2.7859 12.0862 2.7859H12.9196C13.1497 2.7859 13.3362 2.97245 13.3362 3.20257V5.419L16.5991 2.1572Z" fill="#646A73"/>
|
||||
</svg></div>
|
||||
<div class="maxkb-openviewport">
|
||||
<svg t="1710150885892" style="vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="rgb(100, 106, 115)" width="16" height="16" ><path d="M85.333333 384c25.6 0 42.666667-17.066667 42.666667-42.666667V128h213.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v256c0 25.6 17.066667 42.666667 42.666666 42.666667zM938.666667 640c-25.6 0-42.666667 17.066667-42.666667 42.666667v213.333333h-213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h256c25.6 0 42.666667-17.066667 42.666666-42.666666v-256c0-25.6-17.066667-42.666667-42.666666-42.666667zM977.066667 68.266667c-4.266667-8.533333-12.8-17.066667-21.333334-21.333334-4.266667-4.266667-12.8-4.266667-17.066666-4.266666h-256c-25.6 0-42.666667 17.066667-42.666667 42.666666s17.066667 42.666667 42.666667 42.666667h153.6l-226.133334 226.133333c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 17.066667 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8L896 187.733333V341.333333c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666666-42.666667V85.333333c0-4.266667 0-12.8-4.266666-17.066666zM354.133333 610.133333L128 836.266667V682.666667c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667v256c0 4.266667 0 12.8 4.266666 17.066666 4.266667 8.533333 12.8 17.066667 21.333334 21.333334 4.266667 4.266667 12.8 4.266667 17.066666 4.266666h256c25.6 0 42.666667-17.066667 42.666667-42.666666s-17.066667-42.666667-42.666667-42.666667H187.733333l226.133334-226.133333c17.066667-17.066667 17.066667-42.666667 0-59.733334s-42.666667-17.066667-59.733334 0z" p-id="8645"></path></svg>
|
||||
</div>
|
||||
<div class="maxkb-chat-close"><svg style="vertical-align: middle;overflow: hidden;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.95317 8.73169L15.5511 3.13376C15.7138 2.97104 15.9776 2.97104 16.1403 3.13376L16.7296 3.72301C16.8923 3.88573 16.8923 4.14955 16.7296 4.31227L11.1317 9.9102L16.7296 15.5081C16.8923 15.6708 16.8923 15.9347 16.7296 16.0974L16.1403 16.6866C15.9776 16.8494 15.7138 16.8494 15.5511 16.6866L9.95317 11.0887L4.35524 16.6866C4.19252 16.8494 3.9287 16.8494 3.76598 16.6866L3.17673 16.0974C3.01401 15.9347 3.01401 15.6708 3.17673 15.5081L8.77465 9.9102L3.17673 4.31227C3.01401 4.14955 3.01401 3.88573 3.17673 3.72301L3.76598 3.13376C3.9287 2.97104 4.19252 2.97104 4.35524 3.13376L9.95317 8.73169Z" fill="#646A73"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.15209 11.5968C7.31481 11.4341 7.57862 11.4341 7.74134 11.5968L8.3306 12.186C8.49332 12.3487 8.49332 12.6126 8.3306 12.7753L4.99615 16.1086H7.3665C7.59662 16.1086 7.78316 16.2952 7.78316 16.5253V17.3586C7.78316 17.5887 7.59662 17.7753 7.3665 17.7753H3.05584C2.82572 17.7753 2.61738 17.682 2.46658 17.5312C2.31578 17.3804 2.2225 17.1721 2.2225 16.9419V12.6421C2.2225 12.412 2.40905 12.2255 2.63917 12.2255H3.4725C3.70262 12.2255 3.88917 12.412 3.88917 12.6421V14.8586L7.15209 11.5968ZM16.937 2.22217C17.1671 2.22217 17.3754 2.31544 17.5262 2.46625C17.677 2.61705 17.7703 2.82538 17.7703 3.0555V7.35531C17.7703 7.58543 17.5837 7.77198 17.3536 7.77198H16.5203C16.2902 7.77198 16.1036 7.58543 16.1036 7.35531V5.13888L12.8407 8.40068C12.678 8.5634 12.4142 8.5634 12.2515 8.40068L11.6622 7.81142C11.4995 7.64871 11.4995 7.38489 11.6622 7.22217L14.9966 3.88883H12.6263C12.3962 3.88883 12.2096 3.70229 12.2096 3.47217V2.63883C12.2096 2.40872 12.3962 2.22217 12.6263 2.22217H16.937Z" fill="#646A73"/>
|
||||
</svg></div>
|
||||
<div class="maxkb-chat-close"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.95317 8.73169L15.5511 3.13376C15.7138 2.97104 15.9776 2.97104 16.1403 3.13376L16.7296 3.72301C16.8923 3.88573 16.8923 4.14955 16.7296 4.31227L11.1317 9.9102L16.7296 15.5081C16.8923 15.6708 16.8923 15.9347 16.7296 16.0974L16.1403 16.6866C15.9776 16.8494 15.7138 16.8494 15.5511 16.6866L9.95317 11.0887L4.35524 16.6866C4.19252 16.8494 3.9287 16.8494 3.76598 16.6866L3.17673 16.0974C3.01401 15.9347 3.01401 15.6708 3.17673 15.5081L8.77465 9.9102L3.17673 4.31227C3.01401 4.14955 3.01401 3.88573 3.17673 3.72301L3.76598 3.13376C3.9287 2.97104 4.19252 2.97104 4.35524 3.13376L9.95317 8.73169Z" fill="#646A73"/>
|
||||
</svg>
|
||||
</div></div>
|
||||
`
|
||||
}
|
||||
|
|
@ -254,8 +257,8 @@ function initMaxkbStyle(root){
|
|||
}
|
||||
|
||||
#maxkb #maxkb-chat-container .maxkb-operate{
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
top: 18px;
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<el-empty description="暂无数据" v-else />
|
||||
<slot name="empty" v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -848,5 +848,30 @@ export const iconMap: any = {
|
|||
)
|
||||
])
|
||||
}
|
||||
},
|
||||
'app-history-outlined': {
|
||||
iconReader: () => {
|
||||
return h('i', [
|
||||
h(
|
||||
'svg',
|
||||
{
|
||||
style: { height: '100%', width: '100%' },
|
||||
viewBox: '0 0 20 20',
|
||||
version: '1.1',
|
||||
xmlns: 'http://www.w3.org/2000/svg'
|
||||
},
|
||||
[
|
||||
h('path', {
|
||||
d: 'M18.6667 10.0001C18.6667 14.6025 14.9358 18.3334 10.3334 18.3334C7.68359 18.3334 5.32266 17.0967 3.79633 15.1689L5.12054 14.1563C6.3421 15.6864 8.22325 16.6667 10.3334 16.6667C14.0153 16.6667 17 13.682 17 10.0001C17 6.31818 14.0153 3.33341 10.3334 3.33341C7.03005 3.33341 4.28786 5.73596 3.75889 8.88897H4.3469C4.70187 8.88897 4.9136 9.28459 4.7167 9.57995L3.32493 11.6676C3.14901 11.9315 2.76125 11.9315 2.58533 11.6676L1.19356 9.57995C0.996651 9.28459 1.20838 8.88897 1.56336 8.88897H2.07347C2.61669 4.8119 6.10774 1.66675 10.3334 1.66675C14.9358 1.66675 18.6667 5.39771 18.6667 10.0001Z',
|
||||
fill: 'currentColor'
|
||||
}),
|
||||
h('path', {
|
||||
d: 'M10.8334 9.7223V7.11119C10.8334 6.86573 10.6344 6.66675 10.3889 6.66675H9.61115C9.36569 6.66675 9.16671 6.86573 9.16671 7.11119V10.9445C9.16671 11.19 9.36569 11.389 9.61115 11.389H13.1667C13.4122 11.389 13.6112 11.19 13.6112 10.9445V10.1667C13.6112 9.92129 13.4122 9.7223 13.1667 9.7223H10.8334Z',
|
||||
fill: 'currentColor'
|
||||
})
|
||||
]
|
||||
)
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="chat-embed" v-loading="loading">
|
||||
<div class="chat-embed" v-loading="loading" @click="closePopover($event)">
|
||||
<div class="chat-embed__header">
|
||||
<div class="chat-width">
|
||||
<h2 class="ml-24">{{ applicationDetail?.name }}</h2>
|
||||
<h4 class="ml-24">{{ applicationDetail?.name }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-embed__main chat-width">
|
||||
|
|
@ -10,13 +10,56 @@
|
|||
v-model:data="applicationDetail"
|
||||
:available="applicationAvailable"
|
||||
:appId="applicationDetail?.id"
|
||||
:record="currentRecordList"
|
||||
:chatId="currentChatId"
|
||||
></AiChat>
|
||||
</div>
|
||||
<!-- <div class="chat__footer"></div> -->
|
||||
|
||||
<el-button type="primary" link class="new-chat-button" @click="newChat">
|
||||
<el-icon><Plus /></el-icon><span class="ml-4">新建对话</span>
|
||||
</el-button>
|
||||
<!-- 历史记录弹出层 -->
|
||||
<div @click.prevent.stop="show = !show" class="chat-popover-button cursor color-secondary">
|
||||
<AppIcon iconName="app-history-outlined"></AppIcon>
|
||||
</div>
|
||||
|
||||
<el-collapse-transition>
|
||||
<div v-show="show" class="chat-popover w-full" id="chat-popover">
|
||||
<div class="border-b p-16-24">
|
||||
<span>历史记录</span>
|
||||
</div>
|
||||
|
||||
<el-scrollbar>
|
||||
<div class="p-8">
|
||||
<common-list
|
||||
:data="chatLogeData"
|
||||
v-loading="loading"
|
||||
:defaultActive="currentChatId"
|
||||
@click="clickListHandle"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<auto-tooltip :content="row.abstract">
|
||||
{{ row.abstract }}
|
||||
</auto-tooltip>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="text-center">
|
||||
<el-text type="info">暂无历史记录</el-text>
|
||||
</div>
|
||||
</template>
|
||||
</common-list>
|
||||
</div>
|
||||
<div v-if="chatLogeData.length" class="gradient-divider lighter mt-8">
|
||||
<span>仅显示最近 20 条对话</span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<div class="chat-popover-mask" v-show="show"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import applicationApi from '@/api/application'
|
||||
import useStore from '@/stores'
|
||||
|
|
@ -31,6 +74,31 @@ const loading = ref(false)
|
|||
const applicationDetail = ref<any>({})
|
||||
const applicationAvailable = ref<boolean>(true)
|
||||
const chatLogeData = ref<any[]>([])
|
||||
const show = ref(false)
|
||||
|
||||
const paginationConfig = reactive({
|
||||
current_page: 1,
|
||||
page_size: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const currentRecordList = ref<any>([])
|
||||
const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
|
||||
|
||||
function closePopover(event: any) {
|
||||
const popover = document.getElementById('chat-popover')
|
||||
if (popover) {
|
||||
if (!popover.contains(event.target)) {
|
||||
show.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function newChat() {
|
||||
paginationConfig.current_page = 1
|
||||
currentRecordList.value = []
|
||||
currentChatId.value = 'new'
|
||||
}
|
||||
|
||||
function getAccessToken(token: string) {
|
||||
application
|
||||
|
|
@ -47,6 +115,7 @@ function getProfile() {
|
|||
.getProfile(loading)
|
||||
.then((res) => {
|
||||
applicationDetail.value = res.data
|
||||
getChatLog(applicationDetail.value.id)
|
||||
})
|
||||
.catch(() => {
|
||||
applicationAvailable.value = false
|
||||
|
|
@ -64,6 +133,29 @@ function getChatLog(id: string) {
|
|||
})
|
||||
}
|
||||
|
||||
function getChatRecord() {
|
||||
log
|
||||
.asyncChatRecordLog(applicationDetail.value.id, currentChatId.value, paginationConfig, loading)
|
||||
.then((res: any) => {
|
||||
paginationConfig.total = res.data.total
|
||||
const list = res.data.records
|
||||
list.map((v: any) => {
|
||||
v['write_ed'] = true
|
||||
})
|
||||
currentRecordList.value = [...currentRecordList.value, ...list]
|
||||
})
|
||||
}
|
||||
|
||||
const clickListHandle = (item: any) => {
|
||||
paginationConfig.current_page = 1
|
||||
currentRecordList.value = []
|
||||
currentChatId.value = item.id
|
||||
if (currentChatId.value !== 'new') {
|
||||
getChatRecord()
|
||||
}
|
||||
show.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
user.changeUserType(2)
|
||||
getAccessToken(accessToken)
|
||||
|
|
@ -90,25 +182,37 @@ onMounted(() => {
|
|||
height: calc(100vh - var(--app-header-height) - 24px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background: #f3f7f9;
|
||||
height: 80px;
|
||||
.new-chat-button {
|
||||
position: absolute;
|
||||
bottom: 84px;
|
||||
left: 18px;
|
||||
z-index: 11;
|
||||
}
|
||||
// 历史对话弹出层
|
||||
.chat-popover {
|
||||
position: absolute;
|
||||
top: var(--app-header-height);
|
||||
background: #ffffff;
|
||||
padding-bottom: 24px;
|
||||
z-index: 2009;
|
||||
}
|
||||
.chat-popover-button {
|
||||
z-index: 2009;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 85px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.chat-popover-mask {
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px !important;
|
||||
&:before {
|
||||
background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
}
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: var(--app-header-height);
|
||||
z-index: 2008;
|
||||
}
|
||||
.gradient-divider {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -26,9 +26,16 @@
|
|||
{{ row.abstract }}
|
||||
</auto-tooltip>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="text-center">
|
||||
<el-text type="info">暂无历史记录</el-text>
|
||||
</div>
|
||||
</template>
|
||||
</common-list>
|
||||
</div>
|
||||
<div class="gradient-divider lighter mt-8"><span>仅显示最近 20 条对话</span></div>
|
||||
<div v-if="chatLogeData.length" class="gradient-divider lighter mt-8">
|
||||
<span>仅显示最近 20 条对话</span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,6 +48,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="right-height">
|
||||
<!-- 对话 -->
|
||||
<AiChat
|
||||
v-model:data="applicationDetail"
|
||||
:available="applicationAvailable"
|
||||
|
|
|
|||
Loading…
Reference in New Issue