1448 lines
50 KiB
Vue
1448 lines
50 KiB
Vue
<template>
|
||
<!-- agent ui 组件根容器 -->
|
||
<view class="agent-ui">
|
||
<!-- 聊天对话区 -->
|
||
<scroll-view
|
||
@wheel="onWheel"
|
||
@tap="toBottom"
|
||
:enhanced="true"
|
||
@scroll="onScroll"
|
||
:scroll-with-animation="true"
|
||
@dragstart="handleScrollStart"
|
||
class="main"
|
||
:style="'height: ' + (windowInfo.windowHeight - footerHeight) + 'px;'"
|
||
:scroll-y="true"
|
||
:scroll-top="viewTop"
|
||
:scroll-into-view="scrollTo"
|
||
lower-threshold="1"
|
||
@scrolltolower="handleScrollToLower"
|
||
>
|
||
<view class="nav">
|
||
<image :src="bot.avatar || agentConfig.logo" mode="aspectFill" class="avatar" />
|
||
<view style="line-height: 47px">{{ agentConfig.type === 'bot' ? bot.name : agentConfig.modelName }}</view>
|
||
<view style="line-height: 26px; padding: 0px 16px">{{ agentConfig.type === 'bot' ? '' : agentConfig.welcomeMessage }}</view>
|
||
</view>
|
||
<view class="guide_system" v-if="showGuide">
|
||
<!-- <markdownPreview :markdown="guide"></markdownPreview> -->
|
||
<ua-markdown :source="guide"></ua-markdown>
|
||
</view>
|
||
<view class="bot_intro_system" v-if="agentConfig.type === 'bot'">
|
||
<!-- <markdownPreview :markdown="bot.introduction || ''"></markdownPreview> -->
|
||
<ua-markdown :source="bot.introduction || ''"></ua-markdown>
|
||
</view>
|
||
<block v-for="(item, index) in chatRecords" :key="index">
|
||
<view class="system" v-if="item.role === 'assistant'">
|
||
<!-- 联网搜索 -->
|
||
<FoldedCard v-if="item.search_info" :initStatus="false">
|
||
<view slot="title" style="opacity: 0.7; font-size: 16px">已搜索到 {{ item.search_info.search_results.length }} 个网页</view>
|
||
<view slot="content">
|
||
<block v-for="(item, index1) in item.search_info.search_results" :key="index1">
|
||
<view
|
||
@tap="copyUrl"
|
||
:data-url="item.url"
|
||
style="font-size: 14px; color: #2c56f0; line-height: 24px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
||
>
|
||
{{ index + 1 }}. {{ item.title }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</FoldedCard>
|
||
<!-- 知识库 -->
|
||
<!-- 推理过程 -->
|
||
<FoldedCard v-if="!!item.reasoning_content" :initStatus="true">
|
||
<view slot="title" style="opacity: 0.7; font-size: 16px">{{ item.reasoning_content && !item.content ? '思考中...' : '已深度思考' }}</view>
|
||
<view style="padding-left: 30rpx; border-left: rgb(165, 164, 164) solid 2px; opacity: 0.7; font-size: 12px !important" slot="content">
|
||
<!-- <markdownPreview :markdown="item.reasoning_content || ''"></markdownPreview> -->
|
||
<ua-markdown :source="item.reasoning_content || ''"></ua-markdown>
|
||
</view>
|
||
</FoldedCard>
|
||
<!-- <markdownPreview :markdown="item.content || ''"></markdownPreview> -->
|
||
<ua-markdown :source="item.content || ''"></ua-markdown>
|
||
<view style="display: flex; gap: 10px; justify-content: flex-end" v-if="!streamStatus">
|
||
<image
|
||
mode="widthFix"
|
||
@tap="copyChatRecord"
|
||
src="/static/components/agent-ui/imgs/copy.svg"
|
||
style="width: 36rpx; height: 36rpx"
|
||
:data-content="item.content"
|
||
/>
|
||
<button class="share_btn" open-type="share">
|
||
<image mode="widthFix" src="/static/components/agent-ui/imgs/share.svg" style="width: 36rpx; height: 36rpx; vertical-align: top" @tap="share" />
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="userContent" v-if="item.role === 'user'">
|
||
<view class="user">
|
||
<view>
|
||
{{ item.content }}
|
||
</view>
|
||
</view>
|
||
<view class="fileBar">
|
||
<chatFile
|
||
style="margin-right: 32rpx"
|
||
:enableDel="false"
|
||
:fileData="innerItem"
|
||
@removeChild="handleRemoveChild"
|
||
@changeChild="handleChangeChild"
|
||
v-for="(innerItem, index1) in item.fileList"
|
||
:key="index1"
|
||
></chatFile>
|
||
</view>
|
||
<view style="display: flex; flex-direction: row-reverse; overflow-x: auto; white-space: nowrap; margin: 0px 16px 0px 100rpx">
|
||
<block v-for="(item1, index1) in item.imageList" :key="index1">
|
||
<image :src="item1.tempFilePath" alt="" model="aspectFill" style="width: 80px; height: 80px; margin-left: 8px; flex-shrink: 0; border-radius: 10px" />
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 推荐问题 -->
|
||
<block v-for="(item, index) in questions" :key="index">
|
||
<view class="questions">
|
||
<view class="question_content" @tap="sendMessage" :data-message="item">{{ item }}</view>
|
||
</view>
|
||
</block>
|
||
<view id="scroll-bottom" style="width: 100%; height: 20px"></view>
|
||
</scroll-view>
|
||
<!-- 底部输入区 -->
|
||
<view class="footer">
|
||
<view class="feature_list" v-if="showFeatureList">
|
||
<view @tap="handleClickWebSearch" :class="'webSearchSwitch ' + (useWebSearch ? 'feature_enable' : '')">
|
||
<image :src="useWebSearch ? './imgs/internetUse.svg' : './imgs/internet.svg'" mode="" style="width: 40rpx; height: 30px; margin-right: 10rpx" />
|
||
<text>联网搜索</text>
|
||
</view>
|
||
</view>
|
||
<view class="file_list" v-if="showFileList">
|
||
<chatFile :fileData="item" @removeChild="handleRemoveChild" @changeChild="handleChangeChild" v-for="(item, index) in sendFileList" :key="index"></chatFile>
|
||
</view>
|
||
<view class="foot-function">
|
||
<scroll-view class="img-box" :scroll-x="true" v-if="!!imageList.length">
|
||
<block v-for="(item, index) in imageList" :key="index">
|
||
<view class="img-preview">
|
||
<image :src="item.tempFilePath" alt="" model="aspectFill" class="img-preview-image" />
|
||
<!-- 蒙层 -->
|
||
<view class="img-preview-loading" v-if="!!!item.base64Url"></view>
|
||
<!-- 删除按钮 -->
|
||
<image src="/static/components/agent-ui/imgs/close.svg" mode="aspectFill" class="img-preview-close" @tap="deleteImg" :data-index="index" />
|
||
</view>
|
||
</block>
|
||
</scroll-view>
|
||
|
||
<view class="input_box">
|
||
<input
|
||
class="input"
|
||
:value="inputValue"
|
||
type="text"
|
||
maxlength="1024"
|
||
@focus="bindInputFocus"
|
||
@input="bindKeyInput"
|
||
placeholder="说点什么吧"
|
||
@confirm="sendMessage"
|
||
confirm-type="send"
|
||
adjust-position
|
||
cursor-spacing="20"
|
||
/>
|
||
<!-- 加号 -->
|
||
<image src="/static/components/agent-ui/imgs/set.svg" class="set" mode="widthFix" @tap="handleClickTools" />
|
||
<!-- 发送按钮 -->
|
||
<image
|
||
src="/static/components/agent-ui/imgs/send.svg"
|
||
class="set"
|
||
mode="widthFix"
|
||
v-if="!!inputValue && !streamStatus"
|
||
@tap="sendMessage"
|
||
style="transform: rotate(-40deg); transform-origin: 8px 8px"
|
||
/>
|
||
<!-- 暂停按钮 -->
|
||
<image src="/static/components/agent-ui/imgs/stop.svg" class="set" mode="widthFix" v-if="!!streamStatus" @tap="stop" />
|
||
</view>
|
||
</view>
|
||
<!-- 底部工具栏 -->
|
||
<view class="tool_box" v-if="showTools">
|
||
<view class="function" @tap="clearChatRecords">
|
||
<image src="/static/components/agent-ui/imgs/clear.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">清除</text>
|
||
</view>
|
||
<view class="function" @tap="uploadImgs" v-if="agentConfig.model === 'hunyuan-vision' && agentConfig.type === 'model'">
|
||
<image src="/static/components/agent-ui/imgs/uploadImg.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">添加图片</text>
|
||
</view>
|
||
<view v-if="enableUpload && agentConfig.type === 'bot'" class="function" @tap="handleUploadImg">
|
||
<image src="/static/components/agent-ui/imgs/uploadImg.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">图片</text>
|
||
</view>
|
||
<view v-if="enableUpload && agentConfig.type === 'bot'" class="function" @tap="handleUploadFile">
|
||
<image src="/static/components/agent-ui/imgs/file.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">文件</text>
|
||
</view>
|
||
<view v-if="enableUpload && agentConfig.type === 'bot'" class="function" @tap="handleCamera">
|
||
<image src="/static/components/agent-ui/imgs/camera.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">相机</text>
|
||
</view>
|
||
</view>
|
||
<!-- 设置面板 -->
|
||
<view class="set_panel_modal" v-if="setPanelVisibility" @tap="closeSetPanel">
|
||
<view class="set_panel">
|
||
<view class="set_panel_funtion">
|
||
<view class="function" @tap="clearChatRecords">
|
||
<image src="/static/components/agent-ui/imgs/clear.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">清除对话</text>
|
||
</view>
|
||
<view class="function" @tap="uploadImgs" v-if="agentConfig.model === 'hunyuan-vision' && agentConfig.type === 'model'">
|
||
<image src="/static/components/agent-ui/imgs/uploadImg.svg" alt="widthFix" class="icon" />
|
||
<text class="text_desc">添加图片</text>
|
||
</view>
|
||
</view>
|
||
<view class="set_panel_cancel" @tap="closeSetPanel">取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image
|
||
@tap="autoToBottom"
|
||
v-if="manualScroll"
|
||
style="width: 30px; height: 30px; border-radius: 50px; position: absolute; bottom: 150px; right: 20px; background-color: white"
|
||
src="/static/components/agent-ui/imgs/toBottom.svg"
|
||
mode="aspectFit"
|
||
@error=""
|
||
@load=""
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import FoldedCard from '@/components/agent-ui/collapsibleCard/index';
|
||
import chatFile from '@/components/agent-ui/chatFile/index';
|
||
// components/agent-ui/index.js
|
||
import { guide, checkConfig } from './tools';
|
||
export default {
|
||
components: {
|
||
FoldedCard,
|
||
chatFile
|
||
},
|
||
data() {
|
||
return {
|
||
isLoading: true,
|
||
|
||
// 判断是否尚在加载中
|
||
article: {},
|
||
|
||
windowInfo: uni.getWindowInfo(),
|
||
|
||
bot: {
|
||
avatar: '',
|
||
name: '',
|
||
introduction: ''
|
||
},
|
||
|
||
inputValue: '',
|
||
output: '',
|
||
chatRecords: [],
|
||
scrollTop: 0,
|
||
streamStatus: false,
|
||
setPanelVisibility: false,
|
||
questions: [],
|
||
scrollTop: 0,
|
||
guide,
|
||
showGuide: false,
|
||
imageList: [],
|
||
scrollTop: 0,
|
||
|
||
// 文字撑起来后能滚动的最大高度
|
||
viewTop: 0,
|
||
|
||
// 根据实际情况，可能用户手动滚动，需要记录当前滚动的位置
|
||
scrollTo: '',
|
||
|
||
// 快速定位到指定元素，置底用
|
||
scrollTimer: null,
|
||
|
||
//
|
||
manualScroll: false,
|
||
|
||
// 当前为手动滚动/自动滚动
|
||
showTools: false,
|
||
|
||
// 展示底部工具栏
|
||
showFileList: false,
|
||
|
||
// 展示顶部文件行
|
||
sendFileList: [],
|
||
|
||
footerHeight: 80,
|
||
lastScrollTop: 0,
|
||
enableUpload: false,
|
||
|
||
// 待支持
|
||
showWebSearchSwitch: false,
|
||
|
||
useWebSearch: false,
|
||
showFeatureList: false,
|
||
innerItem: ''
|
||
};
|
||
},
|
||
props: {
|
||
agentConfig: {
|
||
type: Object,
|
||
default: () => ({
|
||
type: 'bot',
|
||
|
||
// 值为'bot'或'model'。当type='bot'时，botId必填；当type='model'时，model必填
|
||
botId: '',
|
||
|
||
// agent id
|
||
modelName: '',
|
||
|
||
// 大模型服务商
|
||
model: '',
|
||
|
||
// 具体的模型版本
|
||
logo: '',
|
||
|
||
// 图标(只在model模式下生效)
|
||
welcomeMessage: '',
|
||
|
||
// 欢迎语(只在model模式下生效)
|
||
allowWebSearch: true
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
showWebSearchSwitch: function (showWebSearchSwitch) {
|
||
this.setData({
|
||
showFeatureList: showWebSearchSwitch
|
||
});
|
||
},
|
||
showTools: function (isShow) {
|
||
if (isShow) {
|
||
this.setData({
|
||
footerHeight: this.footerHeight + 80
|
||
});
|
||
} else {
|
||
this.setData({
|
||
footerHeight: this.footerHeight - 80
|
||
});
|
||
}
|
||
},
|
||
showFileList: function (isShow) {
|
||
if (isShow) {
|
||
this.setData({
|
||
footerHeight: this.footerHeight + 80
|
||
});
|
||
} else {
|
||
this.setData({
|
||
footerHeight: this.footerHeight - 80
|
||
});
|
||
}
|
||
},
|
||
showFeatureList: function (isShow) {
|
||
if (isShow) {
|
||
this.setData({
|
||
footerHeight: this.footerHeight + 30
|
||
});
|
||
} else {
|
||
this.setData({
|
||
footerHeight: this.footerHeight - 30
|
||
});
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 处理小程序 attached 生命周期
|
||
this.attached();
|
||
},
|
||
methods: {
|
||
attached: async function () {
|
||
const { botId, type } = this.agentConfig;
|
||
const [check, message] = checkConfig(this.agentConfig);
|
||
if (!check) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: message
|
||
});
|
||
this.setData({
|
||
showGuide: true
|
||
});
|
||
} else {
|
||
this.setData({
|
||
showGuide: false
|
||
});
|
||
}
|
||
if (type === 'bot') {
|
||
const ai = wx.cloud.extend.AI;
|
||
const bot = await ai.bot.get({
|
||
botId
|
||
});
|
||
// 新增错误提示
|
||
if (bot.code) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: bot.message
|
||
});
|
||
return;
|
||
}
|
||
this.setData({
|
||
bot,
|
||
questions: bot.initQuestions,
|
||
showWebSearchSwitch: bot.searchEnable && this.agentConfig.allowWebSearch
|
||
});
|
||
}
|
||
},
|
||
|
||
// 滚动相关处理
|
||
calculateContentHeight() {
|
||
return new Promise((resolve) => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.selectAll('.main >>> .system, .main >>> .userContent')
|
||
.boundingClientRect((rects) => {
|
||
let totalHeight = 0;
|
||
rects.forEach((rect) => {
|
||
totalHeight += rect.height;
|
||
});
|
||
resolve(totalHeight);
|
||
})
|
||
.exec();
|
||
});
|
||
},
|
||
|
||
calculateContentInTop() {
|
||
return new Promise((resolve) => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.selectAll('.main >>> .nav, .main >>> .guide_system, .main >>> .bot_intro_system')
|
||
.boundingClientRect((rects) => {
|
||
let totalHeight = 0;
|
||
rects.forEach((rect) => {
|
||
totalHeight += rect.height;
|
||
});
|
||
// console.log('top height', totalHeight);
|
||
resolve(totalHeight);
|
||
})
|
||
.exec();
|
||
});
|
||
},
|
||
|
||
onWheel: function (e) {
|
||
// 解决小程序开发工具中滑动
|
||
if (!this.manualScroll && e.detail.deltaY < 0) {
|
||
this.setData({
|
||
manualScroll: true
|
||
});
|
||
}
|
||
},
|
||
|
||
onScroll: function (e) {
|
||
if (e.detail.scrollTop < this.lastScrollTop) {
|
||
// 鸿蒙系统上可能滚动事件，拖动事件失效，兜底处理
|
||
this.setData({
|
||
manualScroll: true
|
||
});
|
||
}
|
||
this.setData({
|
||
lastScrollTop: e.detail.scrollTop
|
||
});
|
||
|
||
// 针对连续滚动的最后一次进行处理，scroll-view的 scroll end事件不好判定
|
||
if (this.scrollTimer) {
|
||
clearTimeout(this.scrollTimer);
|
||
}
|
||
const { scrollTop, scrollHeight, height } = e.detail;
|
||
this.setData({
|
||
scrollTimer: setTimeout(() => {
|
||
// console.log(
|
||
// 'e.detail.scrollTop data.scrollTop',
|
||
// scrollTop,
|
||
// this.data.scrollTop,
|
||
// this.data.manualScroll
|
||
// );
|
||
const newTop = Math.max(this.scrollTop, e.detail.scrollTop);
|
||
if (this.manualScroll) {
|
||
this.setData({
|
||
scrollTop: newTop
|
||
});
|
||
} else {
|
||
this.setData({
|
||
scrollTop: newTop,
|
||
viewTop: newTop
|
||
});
|
||
}
|
||
}, 100)
|
||
});
|
||
},
|
||
|
||
handleScrollStart: function (e) {
|
||
console.log('drag start', e);
|
||
if (e.detail.scrollTop > 0) {
|
||
// 手动开始滚
|
||
this.setData({
|
||
manualScroll: true
|
||
});
|
||
}
|
||
},
|
||
|
||
handleScrollToLower: function (e) {
|
||
console.log('scroll to lower', e);
|
||
// 监听到底转自动
|
||
this.setData({
|
||
manualScroll: false
|
||
});
|
||
},
|
||
|
||
autoToBottom: function () {
|
||
console.log('autoToBottom');
|
||
this.setData({
|
||
manualScroll: false,
|
||
scrollTo: 'scroll-bottom'
|
||
});
|
||
// console.log('scrollTop', this.data.scrollTop);
|
||
},
|
||
|
||
bindInputFocus: function (e) {
|
||
this.setData({
|
||
manualScroll: false
|
||
});
|
||
this.autoToBottom();
|
||
},
|
||
|
||
//
|
||
bindKeyInput: function (e) {
|
||
this.setData({
|
||
inputValue: e.detail.value
|
||
});
|
||
},
|
||
|
||
clearChatRecords: function () {
|
||
this.setData({
|
||
chatRecords: [],
|
||
streamStatus: false
|
||
// setPanelVisibility: !this.data.setPanelVisibility,
|
||
});
|
||
},
|
||
|
||
handleUploadImg: function () {
|
||
const that = this;
|
||
uni.chooseMessageFile({
|
||
count: 10,
|
||
type: 'image',
|
||
success(res) {
|
||
// tempFilePath可以作为img标签的src属性显示图片
|
||
// const tempFilePaths = res.tempFiles;
|
||
console.log('res', res);
|
||
const tempFiles = res.tempFiles.map((item) => ({
|
||
tempId: `${new Date().getTime()}-${item.name}`,
|
||
rawType: item.type,
|
||
// 微信选择默认的文件类型 image/video/file
|
||
fileName: item.name,
|
||
// 文件名
|
||
tempPath: item.path,
|
||
fileSize: item.size,
|
||
fileUrl: '',
|
||
fileId: ''
|
||
}));
|
||
// 过滤掉已选择中的 file 文件（保留image）
|
||
const filterFileList = that.sendFileList.filter((item) => item.rawType !== 'file');
|
||
const finalFileList = [...filterFileList, ...tempFiles];
|
||
console.log('final', finalFileList);
|
||
that.setData({
|
||
sendFileList: finalFileList //
|
||
});
|
||
|
||
if (finalFileList.length) {
|
||
that.setData({
|
||
showFileList: true,
|
||
showTools: false
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
handleUploadFile: function () {
|
||
const that = this;
|
||
uni.chooseMessageFile({
|
||
count: 10,
|
||
type: 'file',
|
||
success(res) {
|
||
// tempFilePath可以作为img标签的src属性显示图片
|
||
// const tempFilePaths = res.tempFiles;
|
||
console.log('res', res);
|
||
const tempFiles = res.tempFiles.map((item) => ({
|
||
tempId: `${new Date().getTime()}-${item.name}`,
|
||
rawType: item.type,
|
||
// 微信选择默认的文件类型 image/video/file
|
||
fileName: item.name,
|
||
// 文件名
|
||
tempPath: item.path,
|
||
fileSize: item.size,
|
||
fileUrl: '',
|
||
fileId: ''
|
||
}));
|
||
// 过滤掉已选择中的 image 文件（保留file)
|
||
const filterFileList = that.sendFileList.filter((item) => item.rawType !== 'image');
|
||
const finalFileList = [...filterFileList, ...tempFiles];
|
||
console.log('final', finalFileList);
|
||
that.setData({
|
||
sendFileList: finalFileList //
|
||
});
|
||
|
||
if (finalFileList.length) {
|
||
that.setData({
|
||
showFileList: true,
|
||
showTools: false
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
handleCamera: function () {
|
||
const that = this;
|
||
uni.chooseMedia({
|
||
count: 9,
|
||
mediaType: ['image'],
|
||
sourceType: ['camera'],
|
||
maxDuration: 30,
|
||
camera: 'back',
|
||
success(res) {
|
||
console.log('res', res);
|
||
// console.log(res.tempFiles[0].tempFilePath)
|
||
// console.log(res.tempFiles[0].size)
|
||
const tempFiles = res.tempFiles.map((item) => {
|
||
let index = item.tempFilePath.lastIndexOf('.');
|
||
const fileExt = item.tempFilePath.substring(index + 1);
|
||
const randomFileName = new Date().getTime() + '.' + fileExt;
|
||
return {
|
||
tempId: randomFileName,
|
||
rawType: item.fileType,
|
||
// 微信选择默认的文件类型 image/video/file
|
||
fileName: randomFileName,
|
||
// 文件名
|
||
tempPath: item.tempFilePath,
|
||
fileSize: item.size,
|
||
fileUrl: '',
|
||
fileId: ''
|
||
};
|
||
});
|
||
// 过滤掉已选择中的 file 文件（保留image）
|
||
const filterFileList = that.sendFileList.filter((item) => item.rawType !== 'file');
|
||
const finalFileList = [...filterFileList, ...tempFiles];
|
||
console.log('final', finalFileList);
|
||
that.setData({
|
||
sendFileList: finalFileList //
|
||
});
|
||
|
||
if (finalFileList.length) {
|
||
that.setData({
|
||
showTools: false,
|
||
showFileList: true
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
stop: function () {
|
||
this.autoToBottom();
|
||
const { chatRecords } = this;
|
||
const newChatRecords = [...chatRecords];
|
||
const record = newChatRecords[newChatRecords.length - 1];
|
||
if (record.content === '...') {
|
||
record.content = '已暂停回复';
|
||
}
|
||
this.setData({
|
||
streamStatus: false,
|
||
chatRecords: newChatRecords,
|
||
manualScroll: false
|
||
});
|
||
},
|
||
|
||
openSetPanel: function () {
|
||
this.setData({
|
||
setPanelVisibility: true
|
||
});
|
||
},
|
||
|
||
closeSetPanel: function () {
|
||
this.setData({
|
||
setPanelVisibility: false
|
||
});
|
||
},
|
||
|
||
sendMessage: async function (event) {
|
||
if (this.showFileList) {
|
||
this.setData({
|
||
showFileList: !this.showFileList
|
||
});
|
||
}
|
||
if (this.showTools) {
|
||
this.setData({
|
||
showTools: !this.showTools
|
||
});
|
||
}
|
||
const { message } = event.currentTarget.dataset;
|
||
let { inputValue, bot, agentConfig, chatRecords, streamStatus, imageList } = this;
|
||
// 如果正在流式输出，不让发送消息
|
||
if (streamStatus) {
|
||
return;
|
||
}
|
||
// 将传进来的消息给到inputValue
|
||
if (message) {
|
||
inputValue = message;
|
||
}
|
||
// 空消息返回
|
||
if (!inputValue) {
|
||
return;
|
||
}
|
||
// 图片上传没有完成，返回
|
||
if (imageList.length) {
|
||
if (imageList.filter((item) => !item.base64Url).length) {
|
||
return;
|
||
}
|
||
}
|
||
const { type, modelName, model } = agentConfig;
|
||
// console.log(inputValue,bot.botId)
|
||
const userRecord = {
|
||
content: inputValue,
|
||
record_id: 'record_id' + String(+new Date() - 10),
|
||
role: 'user',
|
||
imageList: [...imageList]
|
||
};
|
||
userRecord.fileList = this.sendFileList;
|
||
if (this.sendFileList.length) {
|
||
this.setData({
|
||
sendFileList: []
|
||
});
|
||
}
|
||
|
||
// // TODO: 判断是否携带图片(hunyuan-vision 用到)，携带则scrollTop 增加
|
||
// if (imageList.length) {
|
||
// const newScrollTop = this.data.scrollTop;
|
||
// if (this.data.manualScroll) {
|
||
// this.setData({
|
||
// scrollTop: newScrollTop,
|
||
// });
|
||
// } else {
|
||
// this.setData({
|
||
// scrollTop: newScrollTop,
|
||
// viewTop: newScrollTop,
|
||
// });
|
||
// }
|
||
// }
|
||
|
||
const record = {
|
||
content: '...',
|
||
record_id: 'record_id' + String(+new Date() + 10),
|
||
role: 'assistant'
|
||
};
|
||
this.setData({
|
||
inputValue: '',
|
||
questions: [],
|
||
chatRecords: [...chatRecords, userRecord, record],
|
||
streamStatus: false,
|
||
imageList: []
|
||
});
|
||
|
||
// 新增一轮对话记录时 自动往下滚底
|
||
this.autoToBottom();
|
||
if (type === 'bot') {
|
||
const ai = wx.cloud.extend.AI;
|
||
const res = await ai.bot.sendMessage({
|
||
data: {
|
||
botId: bot.botId,
|
||
history: [
|
||
...chatRecords.map((item) => ({
|
||
role: item.role,
|
||
content: item.content
|
||
}))
|
||
],
|
||
msg: inputValue,
|
||
fileList: userRecord.fileList.map((item) => ({
|
||
type: item.rawType,
|
||
fileId: item.fileId
|
||
})),
|
||
searchEnable: this.useWebSearch
|
||
}
|
||
});
|
||
this.setData({
|
||
streamStatus: true
|
||
});
|
||
let contentText = '';
|
||
let reasoningContentText = '';
|
||
for await (let event of res.eventStream) {
|
||
if (!this.streamStatus) {
|
||
break;
|
||
}
|
||
this.toBottom();
|
||
const { data } = event;
|
||
try {
|
||
const dataJson = JSON.parse(data);
|
||
// console.log(dataJson)
|
||
const { type, content, reasoning_content, record_id, search_info, role, knowledge_meta, finish_reason } = dataJson;
|
||
const newValue = [...this.chatRecords];
|
||
// 取最后一条消息更新
|
||
const lastValue = newValue[newValue.length - 1];
|
||
lastValue.role = role || 'assistant';
|
||
lastValue.record_id = record_id || lastValue.record_id;
|
||
// 优先处理错误,直接中断
|
||
if (finish_reason === 'error') {
|
||
lastValue.search_info = null;
|
||
lastValue.reasoning_content = '';
|
||
lastValue.knowledge_meta = [];
|
||
lastValue.content = '网络繁忙，请稍后重试!';
|
||
this.setData({
|
||
chatRecords: newValue
|
||
});
|
||
break;
|
||
}
|
||
// 下面根据type来确定输出的内容
|
||
// 只更新一次参考文献，后续再收到这样的消息丢弃
|
||
if (type === 'search' && !lastValue.search_info) {
|
||
lastValue.search_info = search_info;
|
||
this.setData({
|
||
chatRecords: newValue
|
||
});
|
||
}
|
||
// 思考过程
|
||
if (type === 'thinking') {
|
||
reasoningContentText += reasoning_content;
|
||
lastValue.reasoning_content = reasoningContentText;
|
||
this.setData({
|
||
chatRecords: newValue
|
||
});
|
||
}
|
||
// 内容
|
||
if (type === 'text') {
|
||
contentText += content;
|
||
lastValue.content = contentText;
|
||
this.setData({
|
||
chatRecords: newValue
|
||
});
|
||
}
|
||
// 知识库，这个版本没有文件元信息，展示不更新
|
||
if (type === 'knowledge') {
|
||
// lastValue.knowledge_meta = knowledge_meta
|
||
// this.setData({ chatRecords: newValue });
|
||
}
|
||
} catch (e) {
|
||
console.log('CatchClause', e);
|
||
console.log('CatchClause', e);
|
||
// console.log('err', event, e)
|
||
break;
|
||
}
|
||
}
|
||
this.setData({
|
||
streamStatus: false
|
||
});
|
||
if (bot.isNeedRecommend) {
|
||
const ai = wx.cloud.extend.AI;
|
||
const recommendRes = await ai.bot.getRecommendQuestions({
|
||
data: {
|
||
botId: bot.botId,
|
||
history: [],
|
||
msg: inputValue,
|
||
agentSetting: '',
|
||
introduction: '',
|
||
name: ''
|
||
}
|
||
});
|
||
let result = '';
|
||
for await (let str of recommendRes.textStream) {
|
||
// console.log(str);
|
||
this.toBottom();
|
||
result += str;
|
||
this.setData({
|
||
questions: result.split('\n').filter((item) => !!item)
|
||
});
|
||
}
|
||
}
|
||
}
|
||
if (type === 'model') {
|
||
const aiModel = wx.cloud.extend.AI.createModel(modelName);
|
||
let params = {};
|
||
if (model === 'hunyuan-vision') {
|
||
params = {
|
||
model: model,
|
||
messages: [
|
||
...chatRecords.map((item) => ({
|
||
role: item.role,
|
||
content: [
|
||
{
|
||
type: 'text',
|
||
text: item.content
|
||
},
|
||
...(item.imageList || []).map((item) => ({
|
||
type: 'image_url',
|
||
image_url: {
|
||
url: item.base64Url
|
||
}
|
||
}))
|
||
]
|
||
})),
|
||
{
|
||
role: 'user',
|
||
content: [
|
||
{
|
||
type: 'text',
|
||
text: inputValue
|
||
},
|
||
...imageList.map((item) => ({
|
||
type: 'image_url',
|
||
image_url: {
|
||
url: item.base64Url
|
||
}
|
||
}))
|
||
]
|
||
}
|
||
]
|
||
};
|
||
} else {
|
||
params = {
|
||
model: model,
|
||
messages: [
|
||
...chatRecords.map((item) => ({
|
||
role: item.role,
|
||
content: item.content
|
||
})),
|
||
{
|
||
role: 'user',
|
||
content: inputValue
|
||
}
|
||
]
|
||
};
|
||
}
|
||
const res = await aiModel.streamText({
|
||
data: params
|
||
});
|
||
let contentText = '';
|
||
let reasoningText = '';
|
||
this.setData({
|
||
streamStatus: true
|
||
});
|
||
for await (let event of res.eventStream) {
|
||
if (!this.streamStatus) {
|
||
break;
|
||
}
|
||
this.toBottom();
|
||
const { data } = event;
|
||
try {
|
||
const dataJson = JSON.parse(data);
|
||
const { id, choices = [] } = dataJson || {};
|
||
const { delta, finish_reason } = choices[0] || {};
|
||
if (finish_reason === 'stop') {
|
||
break;
|
||
}
|
||
const { content, reasoning_content, role } = delta;
|
||
reasoningText += reasoning_content || '';
|
||
contentText += content || '';
|
||
const newValue = [...this.chatRecords];
|
||
newValue[newValue.length - 1] = {
|
||
content: contentText,
|
||
reasoning_content: reasoningText,
|
||
record_id: 'record_id' + String(id),
|
||
role: role
|
||
};
|
||
this.setData({
|
||
chatRecords: newValue
|
||
});
|
||
} catch (e) {
|
||
console.log('CatchClause', e);
|
||
console.log('CatchClause', e);
|
||
// console.log(e, event)
|
||
break;
|
||
}
|
||
}
|
||
this.setData({
|
||
streamStatus: false
|
||
});
|
||
}
|
||
},
|
||
|
||
toBottom: async function () {
|
||
const clientHeight = this.windowInfo.windowHeight - this.footerHeight; // 视口高度
|
||
const contentHeight = (await this.calculateContentHeight()) + (await this.calculateContentInTop()); // 内容总高度
|
||
// console.log(
|
||
// 'contentHeight clientHeight newTop',
|
||
// contentHeight,
|
||
// clientHeight,
|
||
// this.data.scrollTop + 4
|
||
// );
|
||
if (clientHeight - contentHeight < 10) {
|
||
// 只有当内容高度接近视口高度时才开始增加 scrollTop
|
||
const newTop = this.scrollTop + 4;
|
||
if (this.manualScroll) {
|
||
this.setData({
|
||
scrollTop: newTop
|
||
});
|
||
} else {
|
||
this.setData({
|
||
scrollTop: newTop,
|
||
viewTop: newTop
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
copyChatRecord: function (e) {
|
||
// console.log(e)
|
||
const { content } = e.currentTarget.dataset;
|
||
uni.setClipboardData({
|
||
data: content + '\n\n来自微信云开发AI+',
|
||
success: function (res) {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
addFileList: function () {
|
||
// 顶部文件行展现时，隐藏底部工具栏
|
||
this.setData({});
|
||
},
|
||
|
||
subFileList: function () {},
|
||
|
||
uploadImgs: function () {
|
||
const that = this;
|
||
uni.chooseMedia({
|
||
count: 9,
|
||
mediaType: ['image'],
|
||
sourceType: ['album', 'camera'],
|
||
maxDuration: 30,
|
||
camera: 'back',
|
||
success(media) {
|
||
// console.log(media.tempFiles)
|
||
const { tempFiles } = media;
|
||
that.setData({
|
||
imageList: [...tempFiles]
|
||
});
|
||
tempFiles.forEach((img, index) => {
|
||
const lastDotIndex = img.tempFilePath.lastIndexOf('.');
|
||
const fileExtension = img.tempFilePath.substring(lastDotIndex + 1);
|
||
uni.getFileSystemManager().readFile({
|
||
filePath: img.tempFilePath,
|
||
encoding: 'base64',
|
||
success(file) {
|
||
const base64String = file.data;
|
||
const base64Url = `data:image/${fileExtension};base64,${base64String}`;
|
||
const { imageList } = that;
|
||
const image = imageList[index];
|
||
image.base64Url = base64Url;
|
||
that.setData({
|
||
imageList: [...imageList]
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
fail(e) {
|
||
console.log(e);
|
||
}
|
||
});
|
||
},
|
||
|
||
deleteImg: function (e) {
|
||
const {
|
||
currentTarget: {
|
||
dataset: { index }
|
||
}
|
||
} = e;
|
||
const { imageList } = this;
|
||
const newImageList = imageList.filter((_, idx) => idx != index);
|
||
this.setData({
|
||
imageList: [...newImageList]
|
||
});
|
||
},
|
||
|
||
copyUrl: function (e) {
|
||
const { url } = e.currentTarget.dataset;
|
||
console.log(url);
|
||
uni.setClipboardData({
|
||
data: url,
|
||
success: function (res) {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
handleRemoveChild: function (e) {
|
||
console.log('remove', e.detail.tempId);
|
||
if (e.detail.tempId) {
|
||
const newSendFileList = this.sendFileList.filter((item) => item.tempId !== e.detail.tempId);
|
||
console.log('newSendFileList', newSendFileList);
|
||
this.setData({
|
||
sendFileList: newSendFileList
|
||
});
|
||
if (newSendFileList.length === 0) {
|
||
this.setData({
|
||
showFileList: false
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
handleChangeChild: function (e) {
|
||
console.log('change', e.detail);
|
||
const { fileId, tempId } = e.detail;
|
||
// const curFile = this.data.sendFileList.find(item => item.tempId === tempId)
|
||
// curFile.fileId = fileId
|
||
const newSendFileList = this.sendFileList.map((item) => {
|
||
if (item.tempId === tempId) {
|
||
return {
|
||
...item,
|
||
fileId
|
||
};
|
||
}
|
||
return item;
|
||
});
|
||
this.setData({
|
||
sendFileList: newSendFileList
|
||
});
|
||
},
|
||
|
||
handleClickTools: function () {
|
||
if (this.showTools) {
|
||
this.setData({
|
||
showTools: !this.showTools
|
||
});
|
||
} else {
|
||
this.setData({
|
||
showTools: !this.showTools
|
||
});
|
||
}
|
||
},
|
||
|
||
handleClickWebSearch: function () {
|
||
this.setData({
|
||
useWebSearch: !this.useWebSearch
|
||
});
|
||
},
|
||
|
||
share() {
|
||
console.log('占位：函数 share 未声明');
|
||
}
|
||
},
|
||
created: function () {
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
/* components/agent-ui/index.wxss */
|
||
.agent-ui {
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.nav {
|
||
width: 750rpx;
|
||
padding: 20px 0px 0px 0px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.share_btn {
|
||
background-color: #fff;
|
||
margin: 0px !important;
|
||
padding: 0px !important;
|
||
width: 36rpx !important;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 75rpx;
|
||
}
|
||
|
||
.questions {
|
||
margin: 0px 16px 10px 16px;
|
||
}
|
||
|
||
.question_content {
|
||
border: #f3f3f3 solid 1px;
|
||
background-color: #fff;
|
||
padding: 6px 12px;
|
||
border-radius: 10px;
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
min-height: 80px;
|
||
max-height: 270px;
|
||
/* background-color: aquamarine; */
|
||
position: absolute;
|
||
bottom: 0;
|
||
}
|
||
|
||
.foot-function {
|
||
border: #f3f3f3 solid 1px;
|
||
border-radius: 16px;
|
||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||
margin: 15px 16px;
|
||
padding: 4px 8px;
|
||
position: relative;
|
||
background-color: white;
|
||
}
|
||
|
||
.footer .file_list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
gap: 10px;
|
||
padding: 0px 16px;
|
||
overflow-x: scroll;
|
||
height: 80px;
|
||
}
|
||
|
||
.img-box {
|
||
position: absolute;
|
||
top: -100px;
|
||
left: 0px;
|
||
white-space: nowrap;
|
||
/* 防止内部元素换行 */
|
||
width: 100%;
|
||
/* 设置容器宽度 */
|
||
background-color: #fff;
|
||
}
|
||
|
||
.img-preview {
|
||
display: inline-block;
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.img-preview-image {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.img-preview-loading {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
background-color: #eee;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.img-preview-close {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
right: -8px;
|
||
top: -8px;
|
||
/* background-color: blueviolet; */
|
||
}
|
||
|
||
.input_box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.set_panel_modal {
|
||
position: fixed;
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
left: 0px;
|
||
top: 0px;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.set_panel {
|
||
background-color: #f3f3f3;
|
||
position: absolute;
|
||
left: 0px;
|
||
bottom: 0px;
|
||
width: 750rpx;
|
||
}
|
||
|
||
.set_panel_funtion {
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 10px 16px;
|
||
box-sizing: border-box;
|
||
gap: 10px;
|
||
}
|
||
|
||
.set_panel_cancel {
|
||
height: 60px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: black;
|
||
border-top: #cfcdcd solid 1px;
|
||
}
|
||
|
||
.function {
|
||
width: 50px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background-color: #fff;
|
||
color: black;
|
||
padding: 0px 6px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.text_desc {
|
||
font-weight: 300;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
height: 40px;
|
||
background-color: #fff;
|
||
color: black;
|
||
}
|
||
|
||
.set {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.system {
|
||
margin-left: 32rpx;
|
||
margin-right: 32rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.guide_system {
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
border-radius: 12rpx;
|
||
padding-bottom: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bot_intro_system {
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
border-radius: 12rpx;
|
||
padding-bottom: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.user {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.userContent .fileBar {
|
||
display: flex;
|
||
overflow-x: scroll;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
}
|
||
|
||
.user view {
|
||
background-color: #f3f3f3;
|
||
border-radius: 12rpx;
|
||
margin-left: 32rpx;
|
||
margin-right: 32rpx;
|
||
padding: 16rpx;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.feedback_modal {
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal {
|
||
background-color: #fff;
|
||
width: 700rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal_head {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0px 10px;
|
||
}
|
||
|
||
.modal_body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.modal_footer {
|
||
display: flex;
|
||
}
|
||
|
||
.tool_box {
|
||
height: 80px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 10px 16px;
|
||
box-sizing: border-box;
|
||
gap: 10px;
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.tool_box .function {
|
||
flex: 0 0 calc(25% - 20px);
|
||
}
|
||
|
||
.webSearchSwitch {
|
||
width: 200rpx;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f3f3f3;
|
||
border-radius: 50px;
|
||
border: 1px solid rgb(76, 76, 76);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.feature_enable {
|
||
background-color: rgb(219, 234, 254);
|
||
color: rgb(77, 107, 254);
|
||
border-color: rgba(0, 122, 255, 0.15);
|
||
}
|
||
|
||
.feature_list {
|
||
margin: 0 16px;
|
||
}
|
||
</style>
|