mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-06 17:36:48 +08:00
feat(router): 新增客服助手页面路由
- 在路由配置中添加了 '/customer' 路由，对应客服助手页面 - 新增了客服助手页面的组件结构 - 重构了 AI智能助手页面，提取了聊天组件 - 优化了首页布局，增加了导航功能
This commit is contained in:
陈昱达
@@ -4,7 +4,15 @@ export default [
|
||||
name: 'chatPage',
|
||||
component: () => import('@/views/AI/index.vue'),
|
||||
meta: {
|
||||
title: '智能助手'
|
||||
}
|
||||
title: '智能助手',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/customer',
|
||||
name: 'customer',
|
||||
component: () => import('@/views/customer/index.vue'),
|
||||
meta: {
|
||||
title: '客服助手',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
506
src/views/AI/components/chat.vue
Normal file
506
src/views/AI/components/chat.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isVoiceMode && newMessage" class="isVoiceModeText">
|
||||
<textarea class="textarea" placeholder="请输入内容" v-model="newMessage"></textarea>
|
||||
</div>
|
||||
<section class="section">
|
||||
<button @click="searchInternet" :class="{ active: isSearching }" class="ml10">
|
||||
<svg-icon icon-class="earth" class-name="chat-icon"></svg-icon>
|
||||
联网搜索
|
||||
</button>
|
||||
<button @click="deepInternet" :class="{ active: isDeep }">
|
||||
<svg-icon icon-class="think" class-name="chat-icon"></svg-icon>
|
||||
深度思考
|
||||
</button>
|
||||
<button @click="startNewConversation" class="active">
|
||||
<svg-icon icon-class="add" class-name="chat-icon"></svg-icon>
|
||||
新建会话
|
||||
</button>
|
||||
</section>
|
||||
<footer class="chat-footer">
|
||||
<!-- 输入框 or 按住说话提示 -->
|
||||
<div class="input-wrapper ml10">
|
||||
<input v-if="!isVoiceMode" type="text" v-model="newMessage" placeholder="请简短描述您的问题" @keyup.enter="sendMessage" />
|
||||
<div
|
||||
v-else
|
||||
class="voice-hint-container"
|
||||
:class="{ disabled: messageStatus === 'send' }"
|
||||
@mousedown="startRecording"
|
||||
@selectstart="() => false"
|
||||
@mouseup="stopRecording"
|
||||
@mouseleave="stopRecording"
|
||||
@touchend="stopRecording"
|
||||
@touchstart="startRecording"
|
||||
>
|
||||
<div class="waveform" :class="{ active: isRecording }">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</div>
|
||||
<!-- <div class="hint-text" v-if='!isRecording'>按住说话</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 语音按钮：按住说话 -->
|
||||
<button @click="isVoiceMode = !isVoiceMode" class="mic-button ml10 mr10">
|
||||
<svg-icon v-if="!isVoiceMode" icon-class="voice" class-name="chat-icon ml10" style="width: 25px; height: 25px"></svg-icon>
|
||||
<span v-else style="font-size: 20px; color: #707070" class="ml15 mr5">⌨</span>
|
||||
</button>
|
||||
<!-- 发送按钮 -->
|
||||
<button @click="sendMessage" :disabled="messageStatus === 'send'" :class="{ disabled: messageStatus === 'send' }" class="mr10 fs16">发送</button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from '@/components/svg-icon/index.vue'
|
||||
import { audioToText, chat, chatProduct } from '@/api/generatedApi'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
},
|
||||
props: {
|
||||
messages: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
messageStatus: {
|
||||
type: String,
|
||||
default: 'stop',
|
||||
},
|
||||
isDeep: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSearching: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
conversationId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
productName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
autoScrollEnabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// isThink: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isThink: false,
|
||||
newMessage: '',
|
||||
// 录音相关状态
|
||||
isRecording: false,
|
||||
mediaRecorder: null,
|
||||
audioChunks: [],
|
||||
isRecognizing: false,
|
||||
// 语音模式开关
|
||||
isVoiceMode: false,
|
||||
answerMap: '',
|
||||
currentMessage: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deepInternet() {
|
||||
// this.isDeep = !this.isDeep
|
||||
this.$emit('update:isDeep', !this.isDeep)
|
||||
},
|
||||
searchInternet() {
|
||||
// this.isSearching = !this.isSearching
|
||||
this.$emit('update:isSearching', !this.isSearching)
|
||||
},
|
||||
startNewConversation() {
|
||||
this.$emit('update:messages', [])
|
||||
this.$emit('update:conversationId', '')
|
||||
this.$emit('update:productName', '')
|
||||
},
|
||||
|
||||
async startRecording() {
|
||||
if (this.messageStatus === 'send') return
|
||||
if (this.isRecognizing) return
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
this.mediaRecorder = new MediaRecorder(stream)
|
||||
this.audioChunks = []
|
||||
this.mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
this.audioChunks.push(event.data)
|
||||
}
|
||||
}
|
||||
this.mediaRecorder.onstop = () => {
|
||||
this.handleStopRecording()
|
||||
}
|
||||
this.mediaRecorder.start()
|
||||
this.isRecording = true
|
||||
} catch (err) {
|
||||
alert('无法访问麦克风，请检查权限')
|
||||
console.error(err)
|
||||
}
|
||||
},
|
||||
hasTreasureBox() {
|
||||
chatProduct({ query: this.newMessage })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
this.messageStatus = 'stop'
|
||||
this.messages.push({ type: 'box', text: this.newMessage, detail: res.content })
|
||||
this.newMessage = ''
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.messageStatus = 'stop'
|
||||
})
|
||||
},
|
||||
stopRecording() {
|
||||
if (this.mediaRecorder && this.isRecording) {
|
||||
this.mediaRecorder.stop()
|
||||
this.isRecording = false
|
||||
}
|
||||
},
|
||||
async handleStopRecording() {
|
||||
this.isRecognizing = true
|
||||
const blob = new Blob(this.audioChunks, { type: 'audio/webm' })
|
||||
try {
|
||||
const text = await this.callVoiceRecognitionAPI(blob)
|
||||
if (text) {
|
||||
this.newMessage = text
|
||||
// this.messageStatus = 'stop'
|
||||
this.$emit('update:messageStatus', 'stop')
|
||||
// this.sendMessage()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('语音识别失败:', error)
|
||||
this.newMessage = ''
|
||||
} finally {
|
||||
this.isRecognizing = false
|
||||
}
|
||||
},
|
||||
callVoiceRecognitionAPI(blob) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', blob)
|
||||
formData.append('appType', 'haslBigHelper')
|
||||
formData.append('user', 'chenyuda')
|
||||
audioToText(formData)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
resolve(res.content)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
axiosGetAiChat() {
|
||||
const abortController = new AbortController()
|
||||
this.currentMessage = JSON.parse(
|
||||
JSON.stringify({
|
||||
type: 'bot',
|
||||
text: '',
|
||||
isThink: this.isDeep,
|
||||
showThink: true,
|
||||
think: '',
|
||||
isLike: false,
|
||||
isDisLike: false,
|
||||
}),
|
||||
)
|
||||
this.messages.push(this.currentMessage)
|
||||
const params = {
|
||||
query: this.newMessage,
|
||||
isDeep: this.isDeep ? 1 : 0,
|
||||
isOnline: this.isSearching ? 1 : 0,
|
||||
user: 'chenyuda',
|
||||
conversationId: this.conversationId,
|
||||
productName: this.productName,
|
||||
}
|
||||
fetch(chat(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
signal: abortController.signal,
|
||||
body: JSON.stringify(params),
|
||||
})
|
||||
.then(async (res) => {
|
||||
this.newMessage = ''
|
||||
await this.processStreamResponse(res)
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$emit('update:messageStatus', 'stop')
|
||||
})
|
||||
},
|
||||
async processStreamResponse(response) {
|
||||
if (!response.ok) throw new Error(`HTTP错误: ${response.status}`)
|
||||
if (!response.body) {
|
||||
console.error('响应体不存在:', response)
|
||||
return
|
||||
}
|
||||
const reader = response.body.getReader()
|
||||
let buffer = ''
|
||||
while (true) {
|
||||
try {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
buffer += new TextDecoder().decode(value)
|
||||
const lines = buffer.split('\n')
|
||||
lines.slice(0, -1).forEach((line) => {
|
||||
const parsed = this.parseStreamLine(line)
|
||||
if (parsed) this.updateMessageContent(parsed)
|
||||
})
|
||||
buffer = lines[lines.length - 1] || ''
|
||||
} catch (error) {
|
||||
console.error('读取流数据时发生错误:', error)
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
parseStreamLine(line) {
|
||||
try {
|
||||
const cleanLine = line.replace(/^data:\s*/, '')
|
||||
if (!cleanLine) return null
|
||||
const data = JSON.parse(cleanLine)
|
||||
// console.log(data)
|
||||
if (data.answer) {
|
||||
this.answerMap += data.answer
|
||||
}
|
||||
this.updateConversationState(data)
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('流数据解析失败:', error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
updateConversationState(data) {
|
||||
// this.conversationId =
|
||||
this.$emit('update:conversationId', data.conversation_id || conversationId.value)
|
||||
if (data.answer && data.answer.indexOf('<think>') !== -1) {
|
||||
this.isThink = true
|
||||
this.$emit('getIsThink', true)
|
||||
}
|
||||
|
||||
if (data.answer && data.answer.indexOf('</think>') !== -1) {
|
||||
this.isThink = false
|
||||
this.$emit('getIsThink', false)
|
||||
// this.$emit('update:isThink', false)
|
||||
}
|
||||
},
|
||||
updateMessageContent({ answer, event }) {
|
||||
if (event === 'message_end') {
|
||||
// this.messageStatus = 'stop'
|
||||
this.$emit('update:messageStatus', 'stop')
|
||||
}
|
||||
|
||||
// console.log(answer)
|
||||
// console.log(this.currentMessage)
|
||||
if (!this.currentMessage || !answer) return
|
||||
const mode = this.isThink ? 'think' : 'text'
|
||||
this.currentMessage[mode] += answer
|
||||
},
|
||||
sendMessage() {
|
||||
if (this.messageStatus === 'send') return
|
||||
if (this.newMessage.trim() === '') return
|
||||
this.messages.push({ type: 'user', text: this.newMessage })
|
||||
this.$emit('update:messageStatus', 'send')
|
||||
// this.messageStatus = 'send'
|
||||
if (this.newMessage.includes('工具箱')) {
|
||||
this.hasTreasureBox()
|
||||
return
|
||||
}
|
||||
|
||||
if (this.newMessage.includes('产品对比')) {
|
||||
// this.hasTreasureBox()
|
||||
return
|
||||
}
|
||||
|
||||
// this.autoScrollEnabled = true
|
||||
this.$emit('update:autoScrollEnabled', true)
|
||||
|
||||
this.axiosGetAiChat()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$primary-color: #2e5ca9;
|
||||
$primary-text-color: #f6aa21;
|
||||
$primary-trans-color: rgba(135, 162, 208, 0.5);
|
||||
.isVoiceModeText {
|
||||
display: flex;
|
||||
textarea {
|
||||
flex: 1;
|
||||
max-height: 80px;
|
||||
resize: none;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px 0 10px;
|
||||
background-color: #fff;
|
||||
gap: 10px;
|
||||
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
background-color: $primary-trans-color;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.chat-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px 20px 10px;
|
||||
//padding-bottom: constant(safe-area-inset-bottom);
|
||||
//padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: #fff;
|
||||
|
||||
.input-wrapper {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.voice-hint-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
//-webkit-user-select: none;
|
||||
//-moz-user-select: none;
|
||||
//-ms-user-select: none;
|
||||
//user-select: none;
|
||||
&:active {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
//height: 30px;
|
||||
//width: 60px;
|
||||
gap: 2px;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
background: red;
|
||||
}
|
||||
&.active .bar {
|
||||
animation: wave-animation 1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 4px;
|
||||
background-color: $primary-color;
|
||||
margin: 0 1px;
|
||||
|
||||
&:nth-child(1) {
|
||||
height: 10px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
height: 16px;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
height: 12px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
height: 18px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
height: 14px;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
margin-top: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mic-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
|
||||
&:active {
|
||||
color: #e6454a; /* 按下变红 */
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
color: $primary-text-color;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-animation {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<!--机器人消息-->
|
||||
<div v-else-if="message.type === 'bot'" class="bot-message mb10">
|
||||
<span v-if="message.isThink">
|
||||
<span v-if="message.isThink" style="width: 100%">
|
||||
<!-- loading-->
|
||||
<span class="speakLoadingToast pv10">
|
||||
<van-loading type="spinner" color="#2e5ca9" size="20px" v-if="!message.text" />
|
||||
@@ -17,11 +17,12 @@
|
||||
<!--开启思考-->
|
||||
<p v-html="md.render(message.think)" v-if="message.think && message.showThink" class="thinkText" />
|
||||
</span>
|
||||
<div>
|
||||
<div style="width: 100%">
|
||||
<p v-html="md.render(message.text)" v-if="message.text"></p>
|
||||
<span class="speakLoadingToast pv10" v-else-if="!message.text && !thinkOk && !message.isThink">
|
||||
<van-loading type="spinner" color="#2e5ca9" size="20px" v-if="!message.text" />
|
||||
</span>
|
||||
<div class="text-right fs12 mb5 mr10" style="font-size: 10px; color: #f6aa21">此内容由AI生成</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--百宝箱-->
|
||||
@@ -127,8 +128,8 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透
|
||||
p {
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
//max-width: 70%;
|
||||
//max-width: 80%;
|
||||
}
|
||||
@@ -146,6 +147,7 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透
|
||||
max-width: calc(80% + 20px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 20px;
|
||||
|
||||
.bot-avatar {
|
||||
margin-left: 10px;
|
||||
@@ -169,6 +171,7 @@ $primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透
|
||||
|
||||
p {
|
||||
background-color: #fff;
|
||||
padding: 10px 10px 2px 10px;
|
||||
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
@@ -97,6 +97,14 @@ export default {
|
||||
value: '1',
|
||||
// icon: 'more-o',
|
||||
},
|
||||
{
|
||||
text: '关闭产品询问',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
text: '产品比对',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
//
|
||||
}
|
||||
@@ -112,6 +120,9 @@ export default {
|
||||
})
|
||||
this.$emit('update:messageList', this.messagesList)
|
||||
break
|
||||
case '2':
|
||||
this.$emit('setProductName', '')
|
||||
break
|
||||
}
|
||||
|
||||
this.value2 = ''
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
<TabBox :list="tools"></TabBox>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<div class="text-right fs12 mr10" style="font-size: 10px; color: #f6aa21">此内容由AI生成</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -28,57 +28,16 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div v-if="isVoiceMode && newMessage" class="isVoiceModeText">
|
||||
<textarea class="textarea" placeholder="请输入内容" v-model="newMessage"></textarea>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<button @click="searchInternet" :class="{ active: isSearching }" class="ml10">
|
||||
<svg-icon icon-class="earth" class-name="chat-icon"></svg-icon>
|
||||
联网搜索
|
||||
</button>
|
||||
<button @click="deepInternet" :class="{ active: isDeep }">
|
||||
<svg-icon icon-class="think" class-name="chat-icon"></svg-icon>
|
||||
深度思考
|
||||
</button>
|
||||
<button @click="startNewConversation" class="active">
|
||||
<svg-icon icon-class="add" class-name="chat-icon"></svg-icon>
|
||||
新建会话
|
||||
</button>
|
||||
</section>
|
||||
<footer class="chat-footer">
|
||||
<!-- 输入框 or 按住说话提示 -->
|
||||
<div class="input-wrapper ml10">
|
||||
<input v-if="!isVoiceMode" type="text" v-model="newMessage" placeholder="请简短描述您的问题" @keyup.enter="sendMessage" />
|
||||
<div
|
||||
v-else
|
||||
class="voice-hint-container"
|
||||
:class="{ disabled: messageStatus === 'send' }"
|
||||
@mousedown="startRecording"
|
||||
@selectstart="() => false"
|
||||
@mouseup="stopRecording"
|
||||
@mouseleave="stopRecording"
|
||||
@touchend="stopRecording"
|
||||
@touchstart="startRecording"
|
||||
>
|
||||
<div class="waveform" :class="{ active: isRecording }">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</div>
|
||||
<!-- <div class="hint-text" v-if='!isRecording'>按住说话</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 语音按钮：按住说话 -->
|
||||
<button @click="isVoiceMode = !isVoiceMode" class="mic-button ml10 mr10">
|
||||
<svg-icon v-if="!isVoiceMode" icon-class="voice" class-name="chat-icon ml10" style="width: 25px; height: 25px"></svg-icon>
|
||||
<span v-else style="font-size: 20px; color: #707070" class="ml15 mr5">⌨</span>
|
||||
</button>
|
||||
<!-- 发送按钮 -->
|
||||
<button @click="sendMessage" :disabled="messageStatus === 'send'" :class="{ disabled: messageStatus === 'send' }" class="mr10 fs16">发送</button>
|
||||
</footer>
|
||||
<chatMessage
|
||||
:messages.sync="messages"
|
||||
:messageStatus.sync="messageStatus"
|
||||
:is-deep.sync="isDeep"
|
||||
:conversation-id.sync="conversationId"
|
||||
:is-searching.sync="isSearching"
|
||||
:product-name.sync="productName"
|
||||
:autoScrollEnabled.sync="autoScrollEnabled"
|
||||
@getIsThink="getIsThink"
|
||||
></chatMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -88,7 +47,7 @@ import messageComponent from './components/message.vue'
|
||||
import SvgIcon from '@/components/svg-icon/index.vue'
|
||||
import HotProducts from '@/views/AI/components/HotProducts.vue'
|
||||
import sticky from '@/views/AI/components/sticky.vue'
|
||||
import { chat, chatProduct, audioToText } from '@/api/generatedApi'
|
||||
import chatMessage from '@/views/AI/components/chat.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -96,85 +55,37 @@ export default {
|
||||
[Icon.name]: Icon,
|
||||
messageComponent,
|
||||
HotProducts,
|
||||
chatMessage,
|
||||
sticky,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hotList: [],
|
||||
productName: '',
|
||||
answerMap: '',
|
||||
timer: null,
|
||||
answerIndex: 0,
|
||||
conversationId: '',
|
||||
currentMessage: null,
|
||||
messageStatus: 'stop',
|
||||
isThink: false,
|
||||
newMessage: '',
|
||||
messages: [],
|
||||
isThink: null,
|
||||
messages: [
|
||||
{
|
||||
type: 'bot',
|
||||
text: '欢迎使用AI智能助手，请输入问题开始对话或输入关键词 "xxx工具箱","产品对比"。',
|
||||
},
|
||||
],
|
||||
isSearching: false,
|
||||
isDeep: false,
|
||||
autoScrollEnabled: true,
|
||||
scrollPosition: 0,
|
||||
// 录音相关状态
|
||||
isRecording: false,
|
||||
mediaRecorder: null,
|
||||
audioChunks: [],
|
||||
isRecognizing: false,
|
||||
// 语音模式开关
|
||||
isVoiceMode: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIsThink(e) {
|
||||
this.isThink = e
|
||||
},
|
||||
getHotProducts(e) {
|
||||
console.log(e)
|
||||
this.hotList = e
|
||||
},
|
||||
deepInternet() {
|
||||
this.isDeep = !this.isDeep
|
||||
},
|
||||
searchInternet() {
|
||||
this.isSearching = !this.isSearching
|
||||
},
|
||||
startNewConversation() {
|
||||
this.messages = []
|
||||
this.conversationId = ''
|
||||
this.productName = ''
|
||||
},
|
||||
hasTreasureBox() {
|
||||
chatProduct({ query: this.newMessage })
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
this.messageStatus = 'stop'
|
||||
this.messages.push({ type: 'box', text: this.newMessage, detail: res.content })
|
||||
this.newMessage = ''
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.messageStatus = 'stop'
|
||||
})
|
||||
},
|
||||
sendMessage() {
|
||||
if (this.messageStatus === 'send') return
|
||||
if (this.newMessage.trim() === '') return
|
||||
this.messages.push({ type: 'user', text: this.newMessage })
|
||||
this.messageStatus = 'send'
|
||||
if (this.newMessage.includes('工具箱')) {
|
||||
this.hasTreasureBox()
|
||||
return
|
||||
}
|
||||
this.autoScrollEnabled = true
|
||||
this.axiosGetAiChat()
|
||||
},
|
||||
throttle(fn, delay = 50) {
|
||||
let lastCall = 0
|
||||
return (...args) => {
|
||||
const now = Date.now()
|
||||
if (now - lastCall >= delay) {
|
||||
lastCall = now
|
||||
fn.apply(this, args)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
const messageArea = this.$refs.messageArea
|
||||
if (messageArea) {
|
||||
@@ -201,166 +112,6 @@ export default {
|
||||
this.autoScrollEnabled = isAtBottom
|
||||
this.scrollPosition = messageArea.scrollTop
|
||||
},
|
||||
async startRecording() {
|
||||
if (this.messageStatus === 'send') return
|
||||
if (this.isRecognizing) return
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
this.mediaRecorder = new MediaRecorder(stream)
|
||||
this.audioChunks = []
|
||||
this.mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
this.audioChunks.push(event.data)
|
||||
}
|
||||
}
|
||||
this.mediaRecorder.onstop = () => {
|
||||
this.handleStopRecording()
|
||||
}
|
||||
this.mediaRecorder.start()
|
||||
this.isRecording = true
|
||||
} catch (err) {
|
||||
alert('无法访问麦克风，请检查权限')
|
||||
console.error(err)
|
||||
}
|
||||
},
|
||||
stopRecording() {
|
||||
if (this.mediaRecorder && this.isRecording) {
|
||||
this.mediaRecorder.stop()
|
||||
this.isRecording = false
|
||||
}
|
||||
},
|
||||
async handleStopRecording() {
|
||||
this.isRecognizing = true
|
||||
const blob = new Blob(this.audioChunks, { type: 'audio/webm' })
|
||||
try {
|
||||
const text = await this.callVoiceRecognitionAPI(blob)
|
||||
if (text) {
|
||||
this.newMessage = text
|
||||
this.messageStatus = 'stop'
|
||||
// this.sendMessage()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('语音识别失败:', error)
|
||||
this.newMessage = ''
|
||||
} finally {
|
||||
this.isRecognizing = false
|
||||
}
|
||||
},
|
||||
callVoiceRecognitionAPI(blob) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', blob)
|
||||
formData.append('appType', 'haslBigHelper')
|
||||
formData.append('user', 'chenyuda')
|
||||
audioToText(formData)
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
resolve(res.content)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
axiosGetAiChat() {
|
||||
const abortController = new AbortController()
|
||||
this.currentMessage = JSON.parse(
|
||||
JSON.stringify({
|
||||
type: 'bot',
|
||||
text: '',
|
||||
isThink: this.isDeep,
|
||||
showThink: true,
|
||||
think: '',
|
||||
isLike: false,
|
||||
isDisLike: false,
|
||||
}),
|
||||
)
|
||||
this.messages.push(this.currentMessage)
|
||||
const params = {
|
||||
query: this.newMessage,
|
||||
isDeep: this.isDeep ? 1 : 0,
|
||||
isOnline: this.isSearching ? 1 : 0,
|
||||
user: 'chenyuda',
|
||||
conversationId: this.conversationId,
|
||||
productName: this.productName,
|
||||
}
|
||||
fetch(chat(), {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
signal: abortController.signal,
|
||||
body: JSON.stringify(params),
|
||||
})
|
||||
.then(async (res) => {
|
||||
this.newMessage = ''
|
||||
await this.processStreamResponse(res)
|
||||
})
|
||||
.catch((err) => {
|
||||
this.messageStatus = 'stop'
|
||||
})
|
||||
},
|
||||
async processStreamResponse(response) {
|
||||
if (!response.ok) throw new Error(`HTTP错误: ${response.status}`)
|
||||
if (!response.body) {
|
||||
console.error('响应体不存在:', response)
|
||||
return
|
||||
}
|
||||
const reader = response.body.getReader()
|
||||
let buffer = ''
|
||||
while (true) {
|
||||
try {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
buffer += new TextDecoder().decode(value)
|
||||
const lines = buffer.split('\n')
|
||||
lines.slice(0, -1).forEach((line) => {
|
||||
const parsed = this.parseStreamLine(line)
|
||||
if (parsed) this.updateMessageContent(parsed)
|
||||
})
|
||||
buffer = lines[lines.length - 1] || ''
|
||||
} catch (error) {
|
||||
console.error('读取流数据时发生错误:', error)
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
parseStreamLine(line) {
|
||||
try {
|
||||
const cleanLine = line.replace(/^data:\s*/, '')
|
||||
if (!cleanLine) return null
|
||||
const data = JSON.parse(cleanLine)
|
||||
// console.log(data)
|
||||
if (data.answer) {
|
||||
this.answerMap += data.answer
|
||||
}
|
||||
this.updateConversationState(data)
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('流数据解析失败:', error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
updateConversationState(data) {
|
||||
this.conversationId = data.conversation_id || conversationId.value
|
||||
if (data.answer && data.answer.indexOf('<think>') !== -1) {
|
||||
this.isThink = true
|
||||
}
|
||||
|
||||
if (data.answer && data.answer.indexOf('</think>') !== -1) {
|
||||
this.isThink = false
|
||||
}
|
||||
},
|
||||
updateMessageContent({ answer, event }) {
|
||||
if (event === 'message_end') {
|
||||
this.messageStatus = 'stop'
|
||||
}
|
||||
|
||||
// console.log(answer)
|
||||
// console.log(this.currentMessage)
|
||||
if (!this.currentMessage || !answer) return
|
||||
const mode = this.isThink ? 'think' : 'text'
|
||||
this.currentMessage[mode] += answer
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
messages: {
|
||||
@@ -382,10 +133,10 @@ $primary-trans-color: rgba(135, 162, 208, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
//-webkit-user-select: none;
|
||||
//-moz-user-select: none;
|
||||
//-ms-user-select: none;
|
||||
//user-select: none;
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
@@ -410,177 +161,5 @@ $primary-trans-color: rgba(135, 162, 208, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.isVoiceModeText {
|
||||
display: flex;
|
||||
textarea {
|
||||
flex: 1;
|
||||
max-height: 80px;
|
||||
resize: none;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px 0 10px;
|
||||
background-color: #fff;
|
||||
gap: 10px;
|
||||
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
background-color: $primary-trans-color;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px 20px 10px;
|
||||
//padding-bottom: constant(safe-area-inset-bottom);
|
||||
//padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: #fff;
|
||||
|
||||
.input-wrapper {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.voice-hint-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
&:active {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
//height: 30px;
|
||||
//width: 60px;
|
||||
gap: 2px;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
background: red;
|
||||
}
|
||||
&.active .bar {
|
||||
animation: wave-animation 1s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 4px;
|
||||
background-color: $primary-color;
|
||||
margin: 0 1px;
|
||||
|
||||
&:nth-child(1) {
|
||||
height: 10px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
height: 16px;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
height: 12px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
height: 18px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
height: 14px;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
margin-top: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mic-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
|
||||
&:active {
|
||||
color: #e6454a; /* 按下变红 */
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
color: $primary-text-color;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-animation {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +1,97 @@
|
||||
<!--
|
||||
Codes Generated By ebiz-lowcode:
|
||||
http://www.ebiz-interactive.com/
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
<div class="home-container">
|
||||
<van-swipe class="my-swipe">
|
||||
<van-swipe-item class="item">
|
||||
<div v-for="item in navigationItems" @click="jumpPage(item)">
|
||||
<div class="icon-contact mt20">
|
||||
<svg-icon :icon-class="item.icon" class-name="icon "></svg-icon>
|
||||
</div>
|
||||
<div class="nav-title mb10">{{ item.title }}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
<!-- <van-swipe-item>2</van-swipe-item>-->
|
||||
</van-swipe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swipe, SwipeItem } from 'vant'
|
||||
import SvgIcon from '@/components/svg-icon/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'NavigationList',
|
||||
components: {
|
||||
SvgIcon,
|
||||
[Swipe.name]: Swipe,
|
||||
[SwipeItem.name]: SwipeItem,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
mtab37656ActiveTab: 'tab1',
|
||||
mtab49216ActiveTab: 'tab1'
|
||||
navigationItems: [
|
||||
{ title: 'AI智能助手', icon: 'product', path: '/chatPage' },
|
||||
{ title: 'AI客服助手', icon: 'sale', path: '/customer' },
|
||||
{ title: '产品对比', icon: 'earth', path: '' },
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// H5提交函数
|
||||
submitForm() {}
|
||||
}
|
||||
jumpPage(item) {
|
||||
if (!item.path) {
|
||||
return this.$toast('功能开发中')
|
||||
}
|
||||
this.$router.push(item.path)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style scoped lang="scss">
|
||||
// 主题颜色定义
|
||||
$primary-color: #2e5ca9;
|
||||
$primary-text-color: #f6aa21;
|
||||
$primary-trans-color: #87a2d0;
|
||||
|
||||
.home-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.my-swipe {
|
||||
background: $primary-color;
|
||||
border-radius: 5px;
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
div {
|
||||
flex: 1;
|
||||
padding: 10px 5px;
|
||||
text-align: center;
|
||||
.icon-contact {
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
background: $primary-trans-color;
|
||||
text-align: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
//justify-items: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
.icon {
|
||||
flex: 1;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
154
src/views/customer/index.vue
Normal file
154
src/views/customer/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="chat-page">
|
||||
<main class="chat-main">
|
||||
<div class="chat-content">
|
||||
<div class="message-area" ref="messageArea" @scroll="handleScroll">
|
||||
<!-- -->
|
||||
<messageComponent
|
||||
:messagesList="messages"
|
||||
:is-deep="isDeep"
|
||||
:is-search="isSearching"
|
||||
:think-ok="isThink"
|
||||
@setProductName="setProductName"
|
||||
></messageComponent>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动到顶部按钮 -->
|
||||
<div class="button-container" style="background: #fff">
|
||||
<van-icon name="upgrade" size="2em" @click="scrollToTop" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<chatMessage
|
||||
:messages.sync="messages"
|
||||
:messageStatus.sync="messageStatus"
|
||||
:is-deep.sync="isDeep"
|
||||
:conversation-id.sync="conversationId"
|
||||
:is-searching.sync="isSearching"
|
||||
:product-name.sync="productName"
|
||||
:autoScrollEnabled.sync="autoScrollEnabled"
|
||||
@getIsThink="getIsThink"
|
||||
></chatMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Icon } from 'vant'
|
||||
import SvgIcon from '@/components/svg-icon/index.vue'
|
||||
import HotProducts from '@/views/AI/components/HotProducts.vue'
|
||||
import chatMessage from '@/views/AI/components/chat.vue'
|
||||
import messageComponent from '@/views/AI/components/message.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
messageComponent,
|
||||
[Icon.name]: Icon,
|
||||
HotProducts,
|
||||
chatMessage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hotList: [],
|
||||
productName: '',
|
||||
conversationId: '',
|
||||
messageStatus: 'stop',
|
||||
isThink: null,
|
||||
messages: [
|
||||
{
|
||||
type: 'bot',
|
||||
text: '欢迎使用AI客服助手，请输入问题开始对话。',
|
||||
},
|
||||
],
|
||||
isSearching: false,
|
||||
isDeep: false,
|
||||
autoScrollEnabled: true,
|
||||
scrollPosition: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIsThink(e) {
|
||||
this.isThink = e
|
||||
},
|
||||
getHotProducts(e) {
|
||||
console.log(e)
|
||||
this.hotList = e
|
||||
},
|
||||
|
||||
scrollToTop() {
|
||||
const messageArea = this.$refs.messageArea
|
||||
if (messageArea) {
|
||||
messageArea.scrollTop = 0
|
||||
}
|
||||
},
|
||||
scrollToBottom() {
|
||||
if (!this.autoScrollEnabled) return
|
||||
this.$nextTick(() => {
|
||||
const messageArea = this.$refs.messageArea
|
||||
if (messageArea) {
|
||||
messageArea.scrollTop = messageArea.scrollHeight
|
||||
}
|
||||
})
|
||||
},
|
||||
setProductName(e) {
|
||||
this.productName = e
|
||||
},
|
||||
handleScroll() {
|
||||
const messageArea = this.$refs.messageArea
|
||||
if (!messageArea) return
|
||||
const threshold = 10
|
||||
const isAtBottom = messageArea.scrollHeight - messageArea.clientHeight <= messageArea.scrollTop + threshold
|
||||
this.autoScrollEnabled = isAtBottom
|
||||
this.scrollPosition = messageArea.scrollTop
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
messages: {
|
||||
handler() {
|
||||
this.$nextTick(() => this.scrollToBottom())
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$primary-color: #2e5ca9;
|
||||
$primary-text-color: #f6aa21;
|
||||
$primary-trans-color: rgba(135, 162, 208, 0.5);
|
||||
|
||||
.chat-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
//-webkit-user-select: none;
|
||||
//-moz-user-select: none;
|
||||
//-ms-user-select: none;
|
||||
//user-select: none;
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background: #f7f8fa;
|
||||
position: relative;
|
||||
|
||||
.button-container {
|
||||
position: fixed;
|
||||
bottom: 150px;
|
||||
right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
height: 100%;
|
||||
.message-area {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user