305 lines
15 KiB
Vue
305 lines
15 KiB
Vue
<template>
|
||
<div class="chat-page">
|
||
<header class="chat-header">
|
||
<button v-if="!isPublic" class="back-btn" @click="router.back()">‹</button>
|
||
<div class="avatar-heading">
|
||
<div class="avatar-mark">
|
||
<img v-if="avatar?.photoUrl" :src="avatar.photoUrl" alt="" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ avatar?.emoji || '🤖' }}</span>
|
||
</div>
|
||
<div>
|
||
<h1>{{ avatar?.displayName || avatar?.name || '数字分身' }}</h1>
|
||
<span class="online-state" :class="avatarStatus.tone"><i></i>{{ avatarStatus.label }}</span>
|
||
</div>
|
||
</div>
|
||
<button v-if="!isPublic" class="settings-btn" title="编辑分身" @click="router.push(`/avatar/edit/${avatarId}`)">⚙</button>
|
||
</header>
|
||
|
||
<main ref="messageList" class="message-list">
|
||
<div v-if="!messages.length" class="welcome-card">
|
||
<div class="welcome-avatar">
|
||
<img v-if="avatar?.photoUrl" :src="avatar.photoUrl" alt="" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ avatar?.emoji || '🤖' }}</span>
|
||
</div>
|
||
<h2>有什么想聊的？</h2>
|
||
<p class="welcome-description">{{ avatar?.description || '很高兴和你聊聊。' }}</p>
|
||
</div>
|
||
|
||
<article v-for="(message, index) in messages" :key="`${message.role}-${index}`" class="message-row" :class="message.role">
|
||
<div v-if="message.role === 'assistant'" class="message-avatar avatar-message-face">
|
||
<img v-if="avatar?.photoUrl" :src="avatar.photoUrl" alt="" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ avatar?.emoji || '🤖' }}</span>
|
||
</div>
|
||
<div class="message-column">
|
||
<div class="message-bubble" :class="{ streaming: sending && message.role === 'assistant' && index === messages.length - 1 }">
|
||
<template v-if="message.role === 'assistant'">
|
||
<span
|
||
v-for="character in renderChatMarkdownCharacters(message.characters?.length ? message.characters : message.content)"
|
||
:key="character.key"
|
||
class="typing-character"
|
||
:class="{
|
||
newline: character.newline,
|
||
'markdown-bold': character.bold,
|
||
'markdown-italic': character.italic,
|
||
'markdown-code': character.code,
|
||
'markdown-heading': character.heading
|
||
}"
|
||
>{{ character.text }}</span>
|
||
</template>
|
||
<template v-else>{{ message.content }}</template>
|
||
</div>
|
||
<div v-if="message.source || message.references?.length" class="message-source">
|
||
{{ sourceLabel(message.source) }}
|
||
<span v-if="message.references?.length"> · {{ message.references.map((item) => item.filename).filter(Boolean).join('、') }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="message.role === 'user'" class="message-avatar user-message-face">
|
||
<img v-if="userAvatarUrl" :src="userAvatarUrl" alt="" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ userAvatarInitial }}</span>
|
||
</div>
|
||
</article>
|
||
|
||
<div v-if="thinking" class="message-row assistant">
|
||
<div class="message-avatar avatar-message-face">
|
||
<img v-if="avatar?.photoUrl" :src="avatar.photoUrl" alt="" referrerpolicy="no-referrer" />
|
||
<span v-else>{{ avatar?.emoji || '🤖' }}</span>
|
||
</div>
|
||
<div class="message-bubble typing"><i></i><i></i><i></i></div>
|
||
</div>
|
||
<p v-if="errorMessage" class="chat-error">{{ errorMessage }} <button @click="retryLast">重试</button></p>
|
||
</main>
|
||
|
||
<form class="composer" @submit.prevent="sendMessage(inputText)">
|
||
<textarea v-model="inputText" rows="1" :disabled="sending" placeholder="输入你想聊的内容…" @keydown.enter.exact.prevent="sendMessage(inputText)"></textarea>
|
||
<button class="send-btn" type="submit" :disabled="sending || !inputText.trim()">发送</button>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { getAvatarDetail, getPublicAvatar, streamAvatarChat, streamPublicAvatarChat, type ChatMessage } from '@/api'
|
||
import { useAvatarStore } from '@/store/avatar'
|
||
import { useUserStore } from '@/store/user'
|
||
import { renderChatMarkdownCharacters } from '@/utils/chat-markdown.js'
|
||
|
||
type DisplayMessage = ChatMessage & {
|
||
source?: 'qa' | 'knowledge' | 'qwen' | 'public'
|
||
references?: Array<{ filename?: string }>
|
||
characters?: string[]
|
||
}
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const store = useAvatarStore()
|
||
const userStore = useUserStore()
|
||
const shareToken = String(route.params.shareToken || '')
|
||
const isPublic = Boolean(shareToken)
|
||
const avatarId = ref(String(route.params.id || ''))
|
||
const avatar = ref<any>(null)
|
||
const messages = ref<DisplayMessage[]>([])
|
||
const inputText = ref('')
|
||
const sending = ref(false)
|
||
const thinking = ref(false)
|
||
const errorMessage = ref('')
|
||
const lastQuestion = ref('')
|
||
const messageList = ref<HTMLElement | null>(null)
|
||
let scrollFrame: number | null = null
|
||
|
||
const userAvatarUrl = computed(() => userStore.user?.avatarUrl || store.userProfile?.avatarUrl || '')
|
||
const userAvatarInitial = computed(() => (userStore.user?.nickname || store.userProfile?.nickname || '我').trim().slice(0, 1))
|
||
const avatarStatus = computed(() => {
|
||
const status = avatar.value?.status || 'active'
|
||
if (status === 'inactive') return { tone: 'inactive', label: '当前已停用' }
|
||
if (status === 'training') return { tone: 'training', label: '知识训练中' }
|
||
return { tone: 'active', label: '在线，随时可以和我聊聊' }
|
||
})
|
||
|
||
const sourceLabels: Record<NonNullable<DisplayMessage['source']>, string> = {
|
||
qa: '标准问答对',
|
||
knowledge: '参考文件知识库',
|
||
qwen: '智能回答',
|
||
public: ''
|
||
}
|
||
const sourceLabel = (source?: DisplayMessage['source']) => source ? sourceLabels[source] : ''
|
||
|
||
const scrollToBottom = async () => {
|
||
await nextTick()
|
||
if (messageList.value) messageList.value.scrollTop = messageList.value.scrollHeight
|
||
}
|
||
|
||
const scrollDuringStream = () => {
|
||
if (scrollFrame !== null) return
|
||
scrollFrame = window.requestAnimationFrame(() => {
|
||
if (messageList.value) messageList.value.scrollTop = messageList.value.scrollHeight
|
||
scrollFrame = null
|
||
})
|
||
}
|
||
|
||
const sleep = (delay: number) => new Promise<void>((resolve) => window.setTimeout(resolve, delay))
|
||
|
||
const createStreamReply = () => {
|
||
const reply = reactive<DisplayMessage>({
|
||
role: 'assistant',
|
||
content: '',
|
||
characters: []
|
||
})
|
||
let attached = false
|
||
const attach = () => {
|
||
if (attached) return
|
||
messages.value.push(reply)
|
||
attached = true
|
||
}
|
||
const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
|
||
const queue: string[] = []
|
||
let draining: Promise<void> | null = null
|
||
|
||
const drain = async () => {
|
||
while (queue.length) {
|
||
let character = queue.shift() || ''
|
||
if (character === '\r') continue
|
||
if (/\s/.test(character) && character !== '\n') character = ' '
|
||
const previous = reply.characters?.[reply.characters.length - 1] || ''
|
||
if (character === ' ' && (!previous || previous === ' ' || previous === '\n')) continue
|
||
if (character === '\n') {
|
||
while (reply.characters?.[reply.characters.length - 1] === ' ') {
|
||
reply.characters.pop()
|
||
reply.content = reply.content.slice(0, -1)
|
||
}
|
||
if (!reply.characters?.length || reply.characters[reply.characters.length - 1] === '\n') continue
|
||
}
|
||
reply.content += character
|
||
reply.characters?.push(character)
|
||
scrollDuringStream()
|
||
await sleep(/[，。！？；：\n]/.test(character) ? 140 : 28)
|
||
}
|
||
draining = null
|
||
}
|
||
|
||
return {
|
||
reply,
|
||
append: (content: string) => {
|
||
if (!content) return
|
||
attach()
|
||
if (reduceMotion) {
|
||
reply.content += content
|
||
void scrollToBottom()
|
||
return
|
||
}
|
||
queue.push(...Array.from(content))
|
||
if (!draining) draining = drain()
|
||
},
|
||
finish: async () => {
|
||
if (draining) await draining
|
||
while (reply.characters?.length && /[\s\n]/.test(reply.characters[reply.characters.length - 1])) {
|
||
reply.characters.pop()
|
||
reply.content = reply.content.slice(0, -1)
|
||
}
|
||
if (reduceMotion) reply.characters = []
|
||
if (attached) await scrollToBottom()
|
||
}
|
||
}
|
||
}
|
||
|
||
const loadAvatar = async () => {
|
||
if (isPublic) {
|
||
avatar.value = await getPublicAvatar(shareToken)
|
||
avatarId.value = String(avatar.value?.id || '')
|
||
document.title = avatar.value?.displayName || avatar.value?.name || '会会数字分身'
|
||
return
|
||
}
|
||
avatar.value = store.avatars.find((item) => String(item.id) === avatarId.value)
|
||
if (!avatar.value) avatar.value = await getAvatarDetail(avatarId.value)
|
||
document.title = avatar.value?.displayName || avatar.value?.name || '会会数字分身'
|
||
}
|
||
|
||
const sendMessage = async (value: string) => {
|
||
const question = value.trim()
|
||
if (!question || sending.value) return
|
||
lastQuestion.value = question
|
||
inputText.value = ''
|
||
errorMessage.value = ''
|
||
messages.value.push({ role: 'user', content: question })
|
||
sending.value = true
|
||
thinking.value = true
|
||
await scrollToBottom()
|
||
try {
|
||
const payload = {
|
||
message: question,
|
||
history: messages.value.slice(-10).map(({ role, content }) => ({ role, content }))
|
||
}
|
||
const streamed = createStreamReply()
|
||
const handlers = {
|
||
onMeta: (meta: Pick<DisplayMessage, 'source' | 'references'>) => {
|
||
streamed.reply.source = meta.source
|
||
streamed.reply.references = meta.references
|
||
},
|
||
onDelta: (content: string) => {
|
||
thinking.value = false
|
||
streamed.append(content)
|
||
}
|
||
}
|
||
if (isPublic) {
|
||
await streamPublicAvatarChat(shareToken, payload, handlers)
|
||
} else {
|
||
await streamAvatarChat(avatarId.value, payload, handlers)
|
||
}
|
||
thinking.value = false
|
||
await streamed.finish()
|
||
} catch (error: any) {
|
||
errorMessage.value = error?.message || '暂时无法回答，请稍后重试'
|
||
} finally {
|
||
thinking.value = false
|
||
sending.value = false
|
||
}
|
||
}
|
||
|
||
const retryLast = () => {
|
||
if (!lastQuestion.value || sending.value) return
|
||
const last = messages.value[messages.value.length - 1]
|
||
if (last?.role === 'user') messages.value.pop()
|
||
sendMessage(lastQuestion.value)
|
||
}
|
||
|
||
onMounted(loadAvatar)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chat-page { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #FFF8F1; color: #3B2417; }
|
||
.chat-header { position: sticky; top: 0; z-index: 10; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: white; background: linear-gradient(135deg, #F97316, #FB923C); box-shadow: 0 5px 18px rgba(249, 115, 22, .2); }
|
||
.back-btn, .settings-btn { border: 0; background: transparent; color: white; cursor: pointer; font-size: 25px; padding: 2px 6px; }
|
||
.settings-btn { font-size: 20px; margin-left: auto; }
|
||
.avatar-heading { display: flex; align-items: center; gap: 10px; }
|
||
.avatar-mark { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: rgba(255,255,255,.24); font-size: 23px; }.avatar-mark img { width: 100%; height: 100%; object-fit: cover; }
|
||
.avatar-heading h1 { margin: 0; font-size: 17px; }
|
||
.online-state { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; opacity: .9; }.online-state i { width: 7px; height: 7px; border-radius: 50%; background: #86EFAC; box-shadow: 0 0 0 2px rgba(255,255,255,.22); }.online-state.training i { background: #FDE68A; }.online-state.inactive i { background: #FDA4AF; }
|
||
.message-list { min-height: 0; flex: 1 1 auto; width: min(760px, 100%); box-sizing: border-box; margin: 0 auto; padding: 24px 18px 120px; overflow-y: auto; overscroll-behavior: contain; }
|
||
.welcome-card { padding: 28px 20px; text-align: center; background: rgba(255,255,255,.72); border: 1px solid #FFE1C2; border-radius: 22px; box-shadow: 0 10px 28px rgba(181, 99, 35, .08); }
|
||
.welcome-avatar { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 14px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #FFE4C7; box-shadow: 0 7px 16px rgba(181, 99, 35, .18); font-size: 32px; }.welcome-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.welcome-card h2 { margin: 0 0 8px; font-size: 20px; }.welcome-description { max-width: 340px; margin: 0 auto; color: #8B6B58; font-size: 14px; line-height: 1.65; }
|
||
.message-row { display: flex; gap: 10px; margin: 18px 0; align-items: flex-start; }
|
||
.message-row.user { justify-content: flex-end; }
|
||
.message-avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(255,255,255,.9); border-radius: 14px; background: #FFE4C7; box-shadow: 0 3px 10px rgba(96, 52, 21, .12); font-size: 16px; }.message-avatar img { width: 100%; height: 100%; object-fit: cover; }.user-message-face { color: #fff; background: #D97706; }
|
||
.message-column { max-width: min(78%, 560px); }
|
||
.message-bubble { padding: 12px 14px; white-space: pre-wrap; line-height: 1.6; font-size: 15px; border-radius: 4px 16px 16px 16px; background: white; box-shadow: 0 3px 12px rgba(96, 52, 21, .07); }
|
||
.message-bubble.streaming::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; background: currentColor; animation: type-cursor .75s step-end infinite; }
|
||
.typing-character { display: inline-block; animation: character-in .24s cubic-bezier(.2,.72,.25,1) both; }.typing-character.newline { display: block; height: 0; }
|
||
.typing-character.markdown-bold { font-weight: 750; color: #2F1A10; }
|
||
.typing-character.markdown-italic { font-style: italic; }
|
||
.typing-character.markdown-code { margin: 0 1px; padding: 0 3px; border-radius: 4px; color: #9A3412; background: #FFF0E3; font-family: "SFMono-Regular", Consolas, monospace; font-size: .92em; }
|
||
.typing-character.markdown-heading { font-weight: 750; font-size: 1.08em; }
|
||
.user .message-bubble { color: white; border-radius: 16px 4px 16px 16px; background: #F97316; }
|
||
.message-source { margin: 5px 4px 0; font-size: 11px; color: #A77A5B; }
|
||
.typing { display: flex; gap: 4px; padding: 14px 16px; }
|
||
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #F97316; animation: blink 1s infinite alternate; }
|
||
.typing i:nth-child(2) { animation-delay: .2s; }.typing i:nth-child(3) { animation-delay: .4s; }
|
||
@keyframes blink { from { opacity: .25; } to { opacity: 1; } }
|
||
@keyframes type-cursor { 50% { opacity: 0; } }
|
||
@keyframes character-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
|
||
.chat-error { margin: 4px auto; color: #B42318; font-size: 13px; }.chat-error button { border: 0; background: none; color: #C15F18; cursor: pointer; text-decoration: underline; }
|
||
.composer { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 12px max(18px, calc((100vw - 760px) / 2 + 18px)); background: rgba(255,255,255,.92); border-top: 1px solid #F4DCC7; backdrop-filter: blur(12px); }
|
||
.composer textarea { flex: 1; resize: none; min-height: 22px; max-height: 100px; padding: 11px 13px; border: 1px solid #EED8C5; border-radius: 13px; font: inherit; color: #3B2417; outline: none; }.composer textarea:focus { border-color: #F97316; }
|
||
.send-btn { align-self: flex-end; padding: 11px 18px; border: 0; border-radius: 12px; color: white; background: #F97316; cursor: pointer; }.send-btn:disabled { opacity: .45; cursor: not-allowed; }
|
||
</style>
|