style: chat style
This commit is contained in:
wangdan-fit2cloud
parent
41131d57e1
commit
bc85b91196
@ -2,6 +2,9 @@
|
||||
<el-dialog
|
||||
v-model="resetPasswordDialog"
|
||||
:title="$t('views.login.resetPassword')"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
@ -53,12 +56,12 @@ import { useRouter } from 'vue-router'
|
||||
import { t } from '@/locales'
|
||||
|
||||
const props = defineProps<{
|
||||
emitConfirm?: boolean; // 在父级调接口
|
||||
emitConfirm?: boolean // 在父级调接口
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'confirm', value: ResetCurrentUserPasswordRequest): void;
|
||||
}>();
|
||||
(e: 'confirm', value: ResetCurrentUserPasswordRequest): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const { login } = useStore()
|
||||
@ -141,7 +144,7 @@ const open = () => {
|
||||
}
|
||||
const resetPassword = () => {
|
||||
resetPasswordFormRef1.value?.validate().then(() => {
|
||||
if(props.emitConfirm) {
|
||||
if (props.emitConfirm) {
|
||||
emit('confirm', resetPasswordForm.value)
|
||||
} else {
|
||||
return UserApi.resetCurrentPassword(resetPasswordForm.value).then(() => {
|
||||
|
||||
@ -4,6 +4,7 @@ export default {
|
||||
confirmModification: 'Confirm modification',
|
||||
noHistory: 'No Chat History',
|
||||
createChat: 'New Chat',
|
||||
clearChat: 'Clear Chat',
|
||||
history: 'Chat History',
|
||||
only20history: 'Showing only the last 20 chats',
|
||||
question_count: 'Questions',
|
||||
@ -15,7 +16,7 @@ export default {
|
||||
passwordValidator: {
|
||||
title: 'Enter Password to Access',
|
||||
errorMessage1: 'Password cannot be empty',
|
||||
errorMessage2: 'Incorrect password'
|
||||
errorMessage2: 'Incorrect password',
|
||||
},
|
||||
operation: {
|
||||
play: 'Play',
|
||||
@ -32,8 +33,10 @@ export default {
|
||||
tip: {
|
||||
error500Message: 'Sorry, the service is currently under maintenance. Please try again later!',
|
||||
errorIdentifyMessage: 'Unable to verify user identity',
|
||||
errorLimitMessage: 'Sorry, you have reached the maximum number of questions. Please try again tomorrow!',
|
||||
answerMessage: 'Sorry, no relevant content found. Please rephrase your question or provide more details.',
|
||||
errorLimitMessage:
|
||||
'Sorry, you have reached the maximum number of questions. Please try again tomorrow!',
|
||||
answerMessage:
|
||||
'Sorry, no relevant content found. Please rephrase your question or provide more details.',
|
||||
stopAnswer: 'Response Stopped',
|
||||
answerLoading: 'Generating Response...',
|
||||
recorderTip: `<p>This feature requires microphone access. Browsers block recording on insecure pages. Solutions:<br/>
|
||||
@ -46,12 +49,12 @@ export default {
|
||||
requiredMessage: 'Please fill in all required fields',
|
||||
inputParamMessage1: 'Please specify a parameter in the URL',
|
||||
inputParamMessage2: 'value',
|
||||
prologueMessage: 'Sorry, the service is currently under maintenance. Please try again later!'
|
||||
prologueMessage: 'Sorry, the service is currently under maintenance. Please try again later!',
|
||||
},
|
||||
inputPlaceholder: {
|
||||
speaking: 'Speaking...',
|
||||
recorderLoading: 'Transcribing...',
|
||||
default: 'Type your question'
|
||||
default: 'Type your question',
|
||||
},
|
||||
uploadFile: {
|
||||
label: 'Upload File',
|
||||
@ -63,7 +66,7 @@ export default {
|
||||
limitMessage2: 'files',
|
||||
sizeLimit: 'Each file must not exceed',
|
||||
imageMessage: 'Please process the image content',
|
||||
errorMessage: 'Upload Failed'
|
||||
errorMessage: 'Upload Failed',
|
||||
},
|
||||
executionDetails: {
|
||||
title: 'Execution Details',
|
||||
@ -82,18 +85,18 @@ export default {
|
||||
rerankerResult: 'Re-ranking Results',
|
||||
paragraph: 'Segment',
|
||||
noSubmit: 'No submission from user',
|
||||
errMessage: 'Error Log'
|
||||
errMessage: 'Error Log',
|
||||
},
|
||||
KnowledgeSource: {
|
||||
title: 'Knowledge Source',
|
||||
referenceParagraph: 'Cited Segment',
|
||||
consume: 'Tokens',
|
||||
consumeTime: 'Runtime'
|
||||
consumeTime: 'Runtime',
|
||||
},
|
||||
paragraphSource: {
|
||||
title: 'Knowledge Quote',
|
||||
question: 'User Question',
|
||||
optimizationQuestion: 'Optimized Question'
|
||||
optimizationQuestion: 'Optimized Question',
|
||||
},
|
||||
editTitle: 'Edit Title',
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ export default {
|
||||
confirmModification: '确认修改',
|
||||
noHistory: '暂无历史记录',
|
||||
createChat: '新建对话',
|
||||
clearChat: '清空对话',
|
||||
history: '历史记录',
|
||||
only20history: '仅显示最近 20 条对话',
|
||||
question_count: '条提问',
|
||||
|
||||
@ -4,6 +4,7 @@ export default {
|
||||
confirmModification: '確認修改',
|
||||
noHistory: '暫無歷史記錄',
|
||||
createChat: '新建對話',
|
||||
clearChat: '清空對話',
|
||||
history: '歷史記錄',
|
||||
only20history: '僅顯示最近 20 條對話',
|
||||
question_count: '條提問',
|
||||
@ -15,7 +16,7 @@ export default {
|
||||
passwordValidator: {
|
||||
title: '請輸入密碼打開連結',
|
||||
errorMessage1: '密碼不能為空',
|
||||
errorMessage2: '密碼錯誤'
|
||||
errorMessage2: '密碼錯誤',
|
||||
},
|
||||
operation: {
|
||||
play: '點擊播放',
|
||||
@ -46,12 +47,12 @@ export default {
|
||||
requiredMessage: '請填寫所有必填欄位',
|
||||
inputParamMessage1: '請在 URL 中填寫參數',
|
||||
inputParamMessage2: '的值',
|
||||
prologueMessage: '抱歉，當前正在維護，無法提供服務，請稍後再試！'
|
||||
prologueMessage: '抱歉，當前正在維護，無法提供服務，請稍後再試！',
|
||||
},
|
||||
inputPlaceholder: {
|
||||
speaking: '說話中',
|
||||
recorderLoading: '轉文字中',
|
||||
default: '請輸入問題'
|
||||
default: '請輸入問題',
|
||||
},
|
||||
uploadFile: {
|
||||
label: '上傳文件',
|
||||
@ -63,7 +64,7 @@ export default {
|
||||
limitMessage2: '個文件',
|
||||
sizeLimit: '單個文件大小不能超過',
|
||||
imageMessage: '請解析圖片內容',
|
||||
errorMessage: '上傳失敗'
|
||||
errorMessage: '上傳失敗',
|
||||
},
|
||||
executionDetails: {
|
||||
title: '執行詳細',
|
||||
@ -82,18 +83,18 @@ export default {
|
||||
rerankerResult: '重排結果',
|
||||
paragraph: '段落',
|
||||
noSubmit: '用戶未提交',
|
||||
errMessage: '錯誤日誌'
|
||||
errMessage: '錯誤日誌',
|
||||
},
|
||||
KnowledgeSource: {
|
||||
title: '知識來源',
|
||||
referenceParagraph: '引用段落',
|
||||
consume: '消耗tokens',
|
||||
consumeTime: '耗時'
|
||||
consumeTime: '耗時',
|
||||
},
|
||||
paragraphSource: {
|
||||
title: '知識庫引用',
|
||||
question: '用戶問題',
|
||||
optimizationQuestion: '優化後問題'
|
||||
optimizationQuestion: '優化後問題',
|
||||
},
|
||||
editTitle: '編輯標題',
|
||||
}
|
||||
|
||||
@ -36,42 +36,6 @@ const useChatLogStore = defineStore('chatLog',{
|
||||
})
|
||||
})
|
||||
},
|
||||
async asyncGetChatLogClient(id: string, page: pageRequest, loading?: Ref<boolean>) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// chatLogApi
|
||||
// .getChatLogClient(id, page, loading)
|
||||
// .then((data) => {
|
||||
// resolve(data)
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error)
|
||||
// })
|
||||
})
|
||||
},
|
||||
async asyncDelChatClientLog(id: string, chatId: string, loading?: Ref<boolean>) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// chatLogApi
|
||||
// .delChatClientLog(id, chatId, loading)
|
||||
// .then((data) => {
|
||||
// resolve(data)
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error)
|
||||
// })
|
||||
})
|
||||
},
|
||||
async asyncPutChatClientLog(id: string, chatId: string, data: any, loading?: Ref<boolean>) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// chatLogApi
|
||||
// .putChatClientLog(id, chatId, data, loading)
|
||||
// .then((data) => {
|
||||
// resolve(data)
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error)
|
||||
// })
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -34,11 +34,14 @@
|
||||
</el-button>
|
||||
<div v-show="!isPcCollapse" class="flex-between p-8 pb-0 color-secondary mt-8">
|
||||
<span>{{ $t('chat.history') }}</span>
|
||||
<el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
|
||||
<!-- // TODO: 清空 -->
|
||||
<el-button text>
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!isPcCollapse" class="left-height">
|
||||
@ -55,7 +58,7 @@
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex-between">
|
||||
<span :title="row.abstract">
|
||||
<span :title="row.abstract" class="ellipsis" style="max-width: 180px">
|
||||
{{ row.abstract }}
|
||||
</span>
|
||||
<div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
|
||||
@ -97,27 +100,40 @@
|
||||
<AppIcon iconName="app-create-chat"></AppIcon>
|
||||
<template #title>{{ $t('chat.createChat') }}</template>
|
||||
</el-menu-item>
|
||||
|
||||
<el-sub-menu v-show="isPcCollapse" index="2">
|
||||
<template #title>
|
||||
<AppIcon iconName="app-history-outlined" />
|
||||
</template>
|
||||
<el-menu-item-group v-loading="leftLoading">
|
||||
<template #title
|
||||
><span>{{ $t('chat.history') }}</span></template
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex-between w-full">
|
||||
<span>{{ $t('chat.history') }}</span>
|
||||
<el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
|
||||
<!-- // TODO: 清空 -->
|
||||
<el-button text>
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="row in chatLogData"
|
||||
:index="row.id"
|
||||
:key="row.id"
|
||||
@click="handleClickList(row)"
|
||||
@mouseenter="mouseenter(row)"
|
||||
@mouseleave="mouseId = ''"
|
||||
>
|
||||
<div class="flex-between w-full lighter">
|
||||
<span :title="row.abstract">
|
||||
<span :title="row.abstract" class="ellipsis">
|
||||
{{ row.abstract }}
|
||||
</span>
|
||||
<div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
|
||||
<el-dropdown trigger="click" :teleported="false">
|
||||
<el-icon class="rotate-90 mt-4">
|
||||
<el-icon class="mt-4 lighter">
|
||||
<MoreFilled />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
@ -161,7 +177,7 @@ const props = defineProps<{
|
||||
chatLogData: any[]
|
||||
leftLoading: boolean
|
||||
currentChatId: string
|
||||
isPcCollapse: boolean
|
||||
isPcCollapse?: boolean
|
||||
}>()
|
||||
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
|
||||
|
||||
@ -188,8 +204,8 @@ function editLogTitle(row: any) {
|
||||
EditTitleDialogRef.value.open(row, props.applicationDetail.id)
|
||||
}
|
||||
|
||||
function refreshFieldTitle() {
|
||||
emit('refreshFieldTitle')
|
||||
function refreshFieldTitle(chatId: string, abstract: string) {
|
||||
emit('refreshFieldTitle', chatId, abstract)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -200,12 +216,17 @@ function refreshFieldTitle() {
|
||||
background:
|
||||
linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
|
||||
#eef1f4;
|
||||
.el-menu {
|
||||
:deep(.el-menu) {
|
||||
background: none;
|
||||
border: none;
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 280px;
|
||||
}
|
||||
&.el-menu--collapse {
|
||||
.el-sub-menu.is-active .el-sub-menu__title {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-height {
|
||||
@ -237,7 +258,7 @@ function refreshFieldTitle() {
|
||||
background: transparent;
|
||||
}
|
||||
.el-menu-item-group__title {
|
||||
padding-bottom: 16px;
|
||||
padding: 8px 8px 8px 16px;
|
||||
font-weight: 500;
|
||||
color: var(--app-text-color-secondary);
|
||||
}
|
||||
@ -248,15 +269,14 @@ function refreshFieldTitle() {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
&:hover {
|
||||
background-color: #1f23291a;
|
||||
background-color: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
&.is-active {
|
||||
background-color: #ffffff;
|
||||
|
||||
color: var(--el-text-color-primary);
|
||||
& > div {
|
||||
font-weight: 500;
|
||||
}
|
||||
// & > div {
|
||||
// font-weight: 500;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
149
ui/src/views/chat/embed/component/ChatHistoryDrawer.vue
Normal file
149
ui/src/views/chat/embed/component/ChatHistoryDrawer.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
v-model="show"
|
||||
:with-header="false"
|
||||
class="chat-history-drawer"
|
||||
direction="ltr"
|
||||
:size="280"
|
||||
style="--el-drawer-padding-primary: 0"
|
||||
>
|
||||
<HistoryPanel
|
||||
:application-detail="applicationDetail"
|
||||
:chat-log-data="chatLogData"
|
||||
:left-loading="leftLoading"
|
||||
:currentChatId="currentChatId"
|
||||
@new-chat="newChat"
|
||||
@clickLog="handleClickList"
|
||||
@delete-log="deleteChatLog"
|
||||
@refreshFieldTitle="refreshFieldTitle"
|
||||
>
|
||||
<div class="user-info p-16 cursor">
|
||||
<el-avatar
|
||||
:size="32"
|
||||
v-if="
|
||||
!chatUser.chat_profile?.authentication ||
|
||||
chatUser.chat_profile.authentication_type === 'password'
|
||||
"
|
||||
>
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
</el-avatar>
|
||||
<el-dropdown v-else trigger="click" type="primary" class="w-full">
|
||||
<div class="flex align-center">
|
||||
<el-avatar :size="32">
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
</el-avatar>
|
||||
<span class="ml-8 color-text-primary">{{ chatUser.chatUserProfile?.nick_name }}</span>
|
||||
</div>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu style="min-width: 260px">
|
||||
<div class="flex align-center p-8">
|
||||
<div class="mr-8 flex align-center">
|
||||
<el-avatar :size="40">
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="medium mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h4>
|
||||
<div class="color-secondary">
|
||||
{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown-item
|
||||
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
||||
class="border-t"
|
||||
style="padding-top: 8px; padding-bottom: 8px"
|
||||
@click="openResetPassword"
|
||||
>
|
||||
<el-icon><Lock /></el-icon>
|
||||
{{ $t('views.login.resetPassword') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
||||
class="border-t"
|
||||
style="padding-top: 8px; padding-bottom: 8px"
|
||||
@click="logout"
|
||||
>
|
||||
<AppIcon iconName="app-export" />
|
||||
{{ $t('layout.logout') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</HistoryPanel>
|
||||
</el-drawer>
|
||||
|
||||
<ResetPassword
|
||||
ref="resetPasswordRef"
|
||||
emitConfirm
|
||||
@confirm="handleResetPassword"
|
||||
></ResetPassword>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, defineModel } from 'vue'
|
||||
import useStore from '@/stores'
|
||||
import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
|
||||
import ResetPassword from '@/layout/layout-header/avatar/ResetPassword.vue'
|
||||
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
|
||||
import chatAPI from '@/api/chat/chat'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
const show = defineModel<boolean>('show')
|
||||
|
||||
const props = defineProps<{
|
||||
applicationDetail: any
|
||||
chatLogData: any[]
|
||||
leftLoading: boolean
|
||||
currentChatId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
|
||||
|
||||
const { chatUser, chatLog } = useStore()
|
||||
|
||||
const newChat = () => {
|
||||
emit('newChat')
|
||||
}
|
||||
|
||||
const handleClickList = (item: any) => {
|
||||
emit('clickLog', item)
|
||||
}
|
||||
|
||||
const deleteChatLog = (row: any) => {
|
||||
emit('deleteLog', row)
|
||||
}
|
||||
function refreshFieldTitle(chatId: string, abstract: string) {
|
||||
emit('refreshFieldTitle', chatId, abstract)
|
||||
}
|
||||
|
||||
const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
|
||||
const openResetPassword = () => {
|
||||
resetPasswordRef.value?.open()
|
||||
}
|
||||
|
||||
const handleResetPassword = (param: ResetCurrentUserPasswordRequest) => {
|
||||
chatAPI.resetCurrentPassword(param).then(() => {
|
||||
logout()
|
||||
})
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
chatUser.logout().then(() => {
|
||||
router.push({ name: 'login' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.chat-history-drawer) {
|
||||
.el-drawer__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
class="chat-embed layout-bg chat-background"
|
||||
:class="{ 'chat-embed--popup': isPopup }"
|
||||
v-loading="loading"
|
||||
:style="{
|
||||
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
|
||||
'--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
|
||||
'--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
|
||||
backgroundImage: `url(${applicationDetail?.chat_background})`,
|
||||
}"
|
||||
>
|
||||
<div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
|
||||
<div class="flex-between">
|
||||
<div class="flex align-center">
|
||||
<!-- TODO icon更换 -->
|
||||
<AppIcon
|
||||
iconName="app-mobile-open-history"
|
||||
style="font-size: 20px"
|
||||
@ -35,6 +35,10 @@
|
||||
|
||||
<h4>{{ applicationDetail?.name }}</h4>
|
||||
</div>
|
||||
<el-button text @click="newChat" style="margin-right: 85px">
|
||||
<AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="chat-embed__main">
|
||||
@ -50,13 +54,6 @@
|
||||
@scroll="handleScroll"
|
||||
class="AiChat-embed"
|
||||
>
|
||||
<template #operateBefore>
|
||||
<div>
|
||||
<el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
|
||||
<el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</AiChat>
|
||||
</div>
|
||||
|
||||
@ -75,20 +72,14 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, nextTick, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
import { hexToRgba } from '@/utils/theme'
|
||||
import useStore from '@/stores'
|
||||
import { t } from '@/locales'
|
||||
import ChatHistoryDrawer from '../mobile/component/ChatHistoryDrawer.vue'
|
||||
import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
|
||||
import chatAPI from '@/api/chat/chat'
|
||||
|
||||
const { user, chatLog } = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
const isPopup = computed(() => {
|
||||
return route.query.popup !== 'no'
|
||||
})
|
||||
const { user } = useStore()
|
||||
const AiChatRef = ref()
|
||||
const loading = ref(false)
|
||||
const left_loading = ref(false)
|
||||
@ -121,7 +112,7 @@ const customStyle = computed(() => {
|
||||
})
|
||||
|
||||
function deleteLog(row: any) {
|
||||
chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
|
||||
chatAPI.deleteChat(row.id, left_loading).then(() => {
|
||||
if (currentChatId.value === row.id) {
|
||||
currentChatId.value = 'new'
|
||||
paginationConfig.current_page = 1
|
||||
@ -252,10 +243,7 @@ onMounted(() => {
|
||||
height: calc(100vh - var(--app-header-height) - 16px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.new-chat-button {
|
||||
z-index: 11;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.chat-embed--popup {
|
||||
.chat-popover-button {
|
||||
right: 85px;
|
||||
|
||||
@ -39,4 +39,10 @@ const loading = ref(false)
|
||||
|
||||
const applicationAvailable = ref<boolean>(true)
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
@media only screen and (max-width: 768px) {
|
||||
.el-dialog {
|
||||
width: 90% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,81 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer v-model="show" :with-header="false" class="left-drawer" direction="ltr" :size="280">
|
||||
<div>
|
||||
<div class="flex align-center mb-16">
|
||||
<div class="flex mr-8">
|
||||
<el-avatar
|
||||
v-if="isAppIcon(applicationDetail?.icon)"
|
||||
shape="square"
|
||||
:size="32"
|
||||
style="background: none"
|
||||
<el-drawer
|
||||
v-model="show"
|
||||
:with-header="false"
|
||||
class="chat-history-drawer"
|
||||
direction="ltr"
|
||||
:size="280"
|
||||
style="--el-drawer-padding-primary: 0"
|
||||
>
|
||||
<img :src="applicationDetail?.icon" alt="" />
|
||||
</el-avatar>
|
||||
<LogoIcon v-else height="32px" />
|
||||
</div>
|
||||
<h4>{{ applicationDetail?.name }}</h4>
|
||||
</div>
|
||||
<el-button size="large" class="add-button w-full primary" @click="emit('newChat')">
|
||||
<AppIcon iconName="app-create-chat"></AppIcon>
|
||||
<span class="ml-4">{{ $t('chat.createChat') }}</span>
|
||||
</el-button>
|
||||
<p class="mt-20 mb-8 color-secondary">{{ $t('chat.history') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="left-height pt-0">
|
||||
<el-scrollbar>
|
||||
<div>
|
||||
<common-list
|
||||
:style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
|
||||
:data="chatLogData"
|
||||
v-loading="leftLoading"
|
||||
:defaultActive="currentChatId"
|
||||
@click="handleClickList"
|
||||
@mouseenter="mouseenter"
|
||||
@mouseleave="mouseId = ''"
|
||||
<HistoryPanel
|
||||
:application-detail="applicationDetail"
|
||||
:chat-log-data="chatLogData"
|
||||
:left-loading="leftLoading"
|
||||
:currentChatId="currentChatId"
|
||||
@new-chat="newChat"
|
||||
@clickLog="handleClickList"
|
||||
@delete-log="deleteChatLog"
|
||||
@refreshFieldTitle="refreshFieldTitle"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex-between">
|
||||
<ReadWrite
|
||||
@change="(val: string) => updateChatName(val, row)"
|
||||
:data="row.abstract"
|
||||
trigger="manual"
|
||||
:write="row.writeStatus"
|
||||
@close="() => (row.writeStatus = false)"
|
||||
:maxlength="1024"
|
||||
/>
|
||||
<div
|
||||
@click.stop
|
||||
v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
|
||||
class="flex"
|
||||
>
|
||||
<el-button style="padding: 0" link @click.stop="() => (row.writeStatus = true)">
|
||||
<el-icon>
|
||||
<EditPen />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button style="padding: 0" link @click.stop="() => deleteChatLog(row)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="text-center mt-24">
|
||||
<el-text type="info">{{ $t('chat.noHistory') }}</el-text>
|
||||
</div>
|
||||
</template>
|
||||
</common-list>
|
||||
</div>
|
||||
<div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
|
||||
<span>{{ $t('chat.only20history') }}</span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="flex align-center user-info" @click="toUserCenter">
|
||||
<div class="flex align-center user-info p-16" @click="toUserCenter">
|
||||
<el-avatar
|
||||
:size="32"
|
||||
:class="`${!chatUser.chat_profile?.authentication || chatUser.chat_profile.authentication_type === 'password' ? 'cursor-default' : ''}`"
|
||||
@ -86,20 +29,18 @@
|
||||
{{ chatUser.chatUserProfile?.nick_name }}
|
||||
</span>
|
||||
</div>
|
||||
</HistoryPanel>
|
||||
</el-drawer>
|
||||
|
||||
<UserCenter v-model:show="userCenterDrawerShow" />
|
||||
<UserCenterDrawer v-model:show="userCenterDrawerShow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, defineModel } from 'vue'
|
||||
import { isAppIcon } from '@/utils/common'
|
||||
import { t } from '@/locales'
|
||||
import { Delete, EditPen } from '@element-plus/icons-vue'
|
||||
import useStore from '@/stores'
|
||||
import { MsgError } from '@/utils/message'
|
||||
import UserCenter from './UserCenter.vue'
|
||||
import UserCenterDrawer from './UserCenterDrawer.vue'
|
||||
import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
|
||||
|
||||
const show = defineModel<boolean>('show')
|
||||
|
||||
@ -110,32 +51,26 @@ const props = defineProps<{
|
||||
currentChatId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog'])
|
||||
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
|
||||
|
||||
const { chatUser, chatLog } = useStore()
|
||||
|
||||
const newChat = () => {
|
||||
emit('newChat')
|
||||
}
|
||||
|
||||
const handleClickList = (item: any) => {
|
||||
emit('clickLog', item)
|
||||
}
|
||||
|
||||
const updateChatName = (val: string, item: any) => {
|
||||
if (!val) return MsgError(t('views.applicationWorkflow.tip.nameMessage'))
|
||||
const obj = { abstract: val }
|
||||
chatLog.asyncPutChatClientLog(props.applicationDetail.id, item.id, obj, ref(false)).then(() => {
|
||||
item.abstract = val
|
||||
item.writeStatus = false
|
||||
})
|
||||
}
|
||||
|
||||
const deleteChatLog = (row: any) => {
|
||||
emit('deleteLog', row)
|
||||
}
|
||||
|
||||
const mouseId = ref('')
|
||||
const mouseenter = (row: any) => {
|
||||
mouseId.value = row.id
|
||||
function refreshFieldTitle(chatId: string, abstract: string) {
|
||||
emit('refreshFieldTitle', chatId, abstract)
|
||||
}
|
||||
|
||||
|
||||
const userCenterDrawerShow = ref(false)
|
||||
function toUserCenter() {
|
||||
if (
|
||||
@ -148,69 +83,9 @@ function toUserCenter() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.left-drawer) {
|
||||
:deep(.chat-history-drawer) {
|
||||
.el-drawer__body {
|
||||
padding: 16px;
|
||||
background:
|
||||
linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
|
||||
#eef1f4;
|
||||
overflow: hidden;
|
||||
|
||||
// .add-button {
|
||||
// border: 1px solid var(--el-color-primary);
|
||||
// color: var(--el-color-primary);
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
.left-height {
|
||||
height: calc(100vh - 212px);
|
||||
}
|
||||
|
||||
.common-list li.active {
|
||||
background-color: #ffffff;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
&:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
margin-top: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-divider {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: var(--el-color-info);
|
||||
|
||||
::before {
|
||||
content: '';
|
||||
width: 17%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
::after {
|
||||
content: '';
|
||||
width: 17%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,17 +9,28 @@
|
||||
|
||||
<el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="rules">
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" size="large" v-model="resetPasswordForm.password"
|
||||
:placeholder="$t('views.login.loginForm.new_password.placeholder')" show-password>
|
||||
<el-input
|
||||
type="password"
|
||||
size="large"
|
||||
v-model="resetPasswordForm.password"
|
||||
:placeholder="$t('views.login.loginForm.new_password.placeholder')"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="re_password">
|
||||
<el-input type="password" size="large" v-model="resetPasswordForm.re_password"
|
||||
:placeholder="$t('views.login.loginForm.re_password.placeholder')" show-password>
|
||||
<el-input
|
||||
type="password"
|
||||
size="large"
|
||||
v-model="resetPasswordForm.re_password"
|
||||
:placeholder="$t('views.login.loginForm.re_password.placeholder')"
|
||||
show-password
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="large" class="w-full" @click="resetPassword">{{ $t('chat.confirmModification')
|
||||
<el-button type="primary" size="large" class="w-full" @click="resetPassword">{{
|
||||
$t('chat.confirmModification')
|
||||
}}</el-button>
|
||||
</el-drawer>
|
||||
</template>
|
||||
@ -39,7 +50,7 @@ const { chatUser } = useStore()
|
||||
|
||||
const show = defineModel<boolean>('show', {
|
||||
required: true,
|
||||
});
|
||||
})
|
||||
|
||||
const resetPasswordFormRef = ref<FormInstance>()
|
||||
|
||||
@ -104,7 +115,7 @@ function resetPassword() {
|
||||
.el-drawer__body {
|
||||
padding: 16px;
|
||||
padding-top: 0;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff !important;
|
||||
|
||||
.navigation {
|
||||
height: 44px;
|
||||
|
||||
@ -11,13 +11,18 @@
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
</el-avatar>
|
||||
<h2 class="mt-12 mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h2>
|
||||
<div class="color-secondary lighter">{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}</div>
|
||||
<div class="color-secondary lighter">
|
||||
{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-item reset-password flex-between" v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
||||
@click="resetPassword">
|
||||
<div
|
||||
class="card-item reset-password flex-between"
|
||||
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
||||
@click="resetPassword"
|
||||
>
|
||||
<div class="flex align-center">
|
||||
<AppIcon iconName="app-copy" class="mr-12"></AppIcon>
|
||||
<el-icon class="mr-12"><Lock /></el-icon>
|
||||
<h4 class="lighter">{{ $t('views.login.resetPassword') }}</h4>
|
||||
</div>
|
||||
<el-icon size="16">
|
||||
@ -25,7 +30,11 @@
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div v-if="chatUser.chatUserProfile?.source === 'LOCAL'" class="card-item logout" @click="logout">
|
||||
<div
|
||||
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
||||
class="card-item logout"
|
||||
@click="logout"
|
||||
>
|
||||
<h4 class="lighter">{{ $t('layout.logout') }}</h4>
|
||||
</div>
|
||||
|
||||
@ -46,7 +55,7 @@ const { chatUser } = useStore()
|
||||
|
||||
const show = defineModel<boolean>('show', {
|
||||
required: true,
|
||||
});
|
||||
})
|
||||
|
||||
const resetPasswordDrawerShow = ref(false)
|
||||
function resetPassword() {
|
||||
@ -54,15 +63,10 @@ function resetPassword() {
|
||||
}
|
||||
|
||||
function logout() {
|
||||
MsgConfirm(
|
||||
t('layout.logout'),
|
||||
t('chat.logoutContent'),
|
||||
{
|
||||
MsgConfirm(t('layout.logout'), t('chat.logoutContent'), {
|
||||
confirmButtonText: t('layout.logout'),
|
||||
confirmButtonClass: 'danger',
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
}).then(() => {
|
||||
chatUser.logout().then(() => {
|
||||
router.push({ name: 'login' })
|
||||
})
|
||||
@ -76,7 +80,8 @@ function logout() {
|
||||
padding: 16px;
|
||||
padding-top: 0;
|
||||
background:
|
||||
linear-gradient(187.61deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%), #EFF0F1;
|
||||
linear-gradient(187.61deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%),
|
||||
#eff0f1;
|
||||
|
||||
.navigation {
|
||||
height: 44px;
|
||||
@ -89,7 +94,7 @@ function logout() {
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -105,7 +110,7 @@ function logout() {
|
||||
}
|
||||
|
||||
&.logout {
|
||||
color: #F54A45;
|
||||
color: #f54a45;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -6,10 +6,13 @@
|
||||
:style="{
|
||||
'--el-color-primary': applicationDetail?.custom_theme?.theme_color,
|
||||
'--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
|
||||
'--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
|
||||
|
||||
backgroundImage: `url(${applicationDetail?.chat_background})`,
|
||||
}"
|
||||
>
|
||||
<div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
|
||||
<div class="chat-mobile__header" :style="(user.isEE() || user.isPE()) && customStyle">
|
||||
<div class="flex-between">
|
||||
<div class="flex align-center">
|
||||
<AppIcon
|
||||
iconName="app-mobile-open-history"
|
||||
@ -34,9 +37,13 @@
|
||||
|
||||
<h4>{{ applicationDetail?.name }}</h4>
|
||||
</div>
|
||||
<el-button text @click="newChat" class="mr-16">
|
||||
<AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="chat-embed__main">
|
||||
<div class="chat-mobile__main">
|
||||
<AiChat
|
||||
ref="AiChatRef"
|
||||
v-model:applicationDetails="applicationDetail"
|
||||
@ -49,13 +56,6 @@
|
||||
@scroll="handleScroll"
|
||||
class="AiChat-embed"
|
||||
>
|
||||
<template #operateBefore>
|
||||
<div>
|
||||
<el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
|
||||
<el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</AiChat>
|
||||
</div>
|
||||
|
||||
@ -81,7 +81,7 @@ import { t } from '@/locales'
|
||||
import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
|
||||
import chatAPI from '@/api/chat/chat'
|
||||
|
||||
const { user, chatLog, common } = useStore()
|
||||
const { user, common } = useStore()
|
||||
|
||||
const AiChatRef = ref()
|
||||
const loading = ref(false)
|
||||
@ -121,7 +121,7 @@ const classObj = computed(() => {
|
||||
})
|
||||
|
||||
function deleteLog(row: any) {
|
||||
chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
|
||||
chatAPI.deleteChat(row.id, left_loading).then(() => {
|
||||
if (currentChatId.value === row.id) {
|
||||
currentChatId.value = 'new'
|
||||
paginationConfig.current_page = 1
|
||||
@ -230,7 +230,7 @@ onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.chat-mobile {
|
||||
overflow: hidden;
|
||||
&__header {
|
||||
@ -250,21 +250,6 @@ onMounted(() => {
|
||||
height: calc(100vh - var(--app-header-height) - 16px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.new-chat-button {
|
||||
z-index: 11;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// &.chat-embed--popup {
|
||||
// .chat-popover-button {
|
||||
// right: 85px;
|
||||
// }
|
||||
// }
|
||||
// .AiChat-embed {
|
||||
// .ai-chat__operate {
|
||||
// padding-top: 12px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
>
|
||||
<div class="flex h-full w-full">
|
||||
<div class="chat-pc__left">
|
||||
<history-component
|
||||
<HistoryPanel
|
||||
:application-detail="applicationDetail"
|
||||
:chat-log-data="chatLogData"
|
||||
:left-loading="left_loading"
|
||||
@ -43,8 +43,8 @@
|
||||
</div>
|
||||
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="avatar-dropdown">
|
||||
<div class="flex align-center" style="padding: 8px 12px">
|
||||
<el-dropdown-menu style="min-width: 260px">
|
||||
<div class="flex align-center p-8">
|
||||
<div class="mr-8 flex align-center">
|
||||
<el-avatar :size="40">
|
||||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||||
@ -63,7 +63,7 @@
|
||||
style="padding-top: 8px; padding-bottom: 8px"
|
||||
@click="openResetPassword"
|
||||
>
|
||||
<AppIcon iconName="app-export" />
|
||||
<el-icon><Lock /></el-icon>
|
||||
{{ $t('views.login.resetPassword') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
@ -79,7 +79,7 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</history-component>
|
||||
</HistoryPanel>
|
||||
<el-button
|
||||
v-if="!common.isMobile()"
|
||||
class="pc-collapse cursor"
|
||||
@ -201,7 +201,7 @@ import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
|
||||
import ExecutionDetailContent from '@/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue'
|
||||
import ParagraphSourceContent from '@/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue'
|
||||
import ParagraphDocumentContent from '@/components/ai-chat/component/knowledge-source-component/ParagraphDocumentContent.vue'
|
||||
import HistoryComponent from '@/views/chat/history-component/index.vue'
|
||||
import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
useResize()
|
||||
@ -487,9 +487,11 @@ function closeExecutionDetail() {
|
||||
.pc-collapse {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -15px;
|
||||
right: -13px;
|
||||
box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
|
||||
z-index: 1;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -522,10 +524,6 @@ function closeExecutionDetail() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-width {
|
||||
@ -538,7 +536,4 @@ function closeExecutionDetail() {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.avatar-dropdown {
|
||||
min-width: 240px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user