Skip to content
GitLab
Commit b1f619b0 authored by 水玉婷's avatar 水玉婷
Browse files

feat:添加option模版数据

parent 684caa69
Hide whitespace changes
Inline Side-by-side
src/views/components/AiChat.vue
View file @ b1f619b0
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<img :src="props.logoUrl || defaultAvatar" alt="avatar" class="avatar-image" /> <img :src="props.logoUrl || defaultAvatar" alt="avatar" class="avatar-image" />
</div> </div>
<div class="header-info"> <div class="header-info">
<h2>{{ props.dialogSessionId ? props?.detailData?.title || '继续对话' : '新建对话' }}</h2> <h2>{{ props.dialogSessionId ? props?.detailData?.title || '继续对话' : '新建对333话' }}</h2>
</div> </div>
</div> </div>
<!-- 当没有dialogSessionId且未开始对话时显示介绍页面 --> <!-- 当没有dialogSessionId且未开始对话时显示介绍页面 -->
<div class="chat-intro-center" v-if="!props.dialogSessionId && !hasStartedConversation"> <div class="chat-intro-center" v-if="!props.dialogSessionId && !hasStartedConversation">
<div class="intro-content"> <div class="intro-content">
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
<p>可以问我公司经营情况、制度等相关问题，<br>我还在成长中，会不断强大</p> <p>可以问我公司经营情况、制度等相关问题，<br>我还在成长中，会不断强大</p>
</div> </div>
</div> </div>
<!-- 消息区域 --> <!-- 消息区域 -->
<div class="chat-messages" ref="messagesContainer" v-if="props.dialogSessionId || hasStartedConversation"> <div class="chat-messages" ref="messagesContainer" v-if="props.dialogSessionId || hasStartedConversation">
<div v-for="(msg, index) in messages" :key="index" :class="['message', msg.type]"> <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.messageType]">
<div class="avatar-container"> <div class="avatar-container">
<div class="avatar"> <div class="avatar">
<template v-if="msg.type === 'received'"> <template v-if="msg.messageType === 'received'">
<img :src="props.logoUrl || defaultAvatar" alt="avatar" class="avatar-image" /> <img :src="props.logoUrl || defaultAvatar" alt="avatar" class="avatar-image" />
</template> </template>
<template v-else> <template v-else>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 输入区域 - 始终显示 --> <!-- 输入区域 - 始终显示 -->
<div class="chat-input-container"> <div class="chat-input-container">
<div class="chat-input"> <div class="chat-input">
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { EventSourcePolyfill } from 'event-source-polyfill'; import { EventSourcePolyfill } from 'event-source-polyfill';
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'; import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { post } from '@/utils/axios.js'; // 导入axios的post方法 import { post } from '@/utils/axios.js'; // 导入axios的post方法
import tableTemplate from './tableTemplate'; import tableTemplate from './tableTemplate';
...@@ -137,9 +137,36 @@ const contentTemplates = { ...@@ -137,9 +137,36 @@ const contentTemplates = {
table: (tableData: any) => { table: (tableData: any) => {
return tableTemplate(tableData); return tableTemplate(tableData);
}, },
// 选项数据模板 - 纯渲染，不允许点击
option: (optionData: any) => {
const { tips, options } = optionData;
// 生成选项列表HTML - 序号和标题直接放在一行
const optionsHtml = options?.map((item: any, index: number) => {
const { title, url } = item;
return `
<div class="option-item">
<div class="option-content">
<span class="option-number-title">${index + 1}. ${title}</span>
<span class="option-url">(${url})</span>
</div>
</div>
`;
}).join('') || '';
return `
<div class="message-options">
${tips ? `<div class="options-tips">${tips}</div>` : ''}
<div class="options-list">
${optionsHtml}
</div>
</div>
`;
},
// 简化的iframe模板 - 移除全屏功能，设置宽高100%固定 // 简化的iframe模板 - 移除全屏功能，设置宽高100%固定
iframe: (iframeData: any) => { iframe: (iframeData: any) => {
const src = iframeData.src; const { tips,title,url } = iframeData || {};
console.log('iframeData', iframeData);
return `<div class="message-iframe iframe-loading"> return `<div class="message-iframe iframe-loading">
<!-- 加载状态 --> <!-- 加载状态 -->
<div class="iframe-loading"> <div class="iframe-loading">
...@@ -151,8 +178,10 @@ const contentTemplates = { ...@@ -151,8 +178,10 @@ const contentTemplates = {
</div> </div>
<!-- iframe容器 --> <!-- iframe容器 -->
<div class="iframe-tips">${tips || ''}</div>
<div class="iframe-title">${title || ''}</div>
<iframe <iframe
src="${src}" src="${url}"
width="100%" width="100%"
height="100%" height="100%"
frameborder="0" frameborder="0"
...@@ -168,7 +197,8 @@ const contentTemplates = { ...@@ -168,7 +197,8 @@ const contentTemplates = {
// 定义消息类型 - 更新接口添加图表相关字段 // 定义消息类型 - 更新接口添加图表相关字段
interface Message { interface Message {
type: 'received' | 'sent'; messageType: 'received' | 'sent';
type?: number | string;
avatar: string; avatar: string;
recordId: string; recordId: string;
promptTokens: number; promptTokens: number;
...@@ -186,14 +216,10 @@ interface Message { ...@@ -186,14 +216,10 @@ interface Message {
}[]; }[];
} }
interface Token {
value: string;
expire: number;
}
interface SSEData { interface SSEData {
message: any; message: any;
status: number | string; status: number | string;
type: number | string;
} }
interface ChatParams { interface ChatParams {
...@@ -222,6 +248,76 @@ const startConversation = () => { ...@@ -222,6 +248,76 @@ const startConversation = () => {
hasStartedConversation.value = true; hasStartedConversation.value = true;
}; };
// 模拟status为3、type为options的数据返回
const simulateOptionData = () => {
// 第一个消息：展示三个options
const firstOptionData = {
status: 3,
type: 'option',
message: {
tips: "以下是三个可选的报表链接：",
options: [
{ title: "月度销售报表", url: "https://example.com/report/monthly" },
{ title: "季度业绩分析", url: "https://example.com/report/quarterly" },
{ title: "年度总结报告", url: "https://example.com/report/annual" }
]
}
};
// 第二个消息：展示一个options（会走iframe逻辑）
const secondOptionData = {
status: 3,
type: 'option',
message: {
tips: "这是单个报表的预览：",
options: [
{
title: "销售指标看板",
url: "/WeChatOauth2/MobileReport_Monthly/MonthlyReport_index.aspx?postage=384b67414b334f2f693177644246313756704a724d513d3d&company=器械整体&typename=整体指标"
}
]
}
};
// 创建AI响应消息
const aiMessage = {
messageType: 'received',
avatar: 'AI',
recordId: 'simulate-001',
promptTokens: 100,
completionTokens: 50,
totalTokens: 150,
date: dayjs().format('HH:mm'),
contentBlocks: []
};
// 处理第一个选项数据（三个options）
const firstResult = processSSEMessage(
firstOptionData,
aiMessage,
false,
-1,
false
);
// 处理第二个选项数据（一个options）
const secondResult = processSSEMessage(
secondOptionData,
firstResult.updatedResponse,
false,
-1,
false
);
// 将处理后的消息添加到消息列表
if (secondResult.updatedResponse) {
messages.value.push(secondResult.updatedResponse);
nextTick(() => {
scrollToBottom();
});
}
};
// 发送消息 // 发送消息
const sendMessage = async () => { const sendMessage = async () => {
loading.value = true; loading.value = true;
...@@ -230,13 +326,13 @@ const sendMessage = async () => { ...@@ -230,13 +326,13 @@ const sendMessage = async () => {
if (message) { if (message) {
// 开始对话 // 开始对话
startConversation(); startConversation();
isAIResponding.value = false; isAIResponding.value = false;
isInThinkingMode.value = false; isInThinkingMode.value = false;
currentAIResponse.value = null; currentAIResponse.value = null;
messages.value.push({ messages.value.push({
type: 'sent', messageType: 'sent',
avatar: '我', avatar: '我',
recordId: '', recordId: '',
promptTokens: 0, promptTokens: 0,
...@@ -262,41 +358,13 @@ const sendMessage = async () => { ...@@ -262,41 +358,13 @@ const sendMessage = async () => {
try { try {
messageText.value = ''; messageText.value = '';
// 模拟AI返回iframe数据
// 可选：在发送消息后模拟选项数据返回
// 取消注释以下代码来启用模拟
setTimeout(() => { setTimeout(() => {
// 创建AI响应消息 simulateOptionData();
const aiMessage = {
type: 'received',
avatar: 'AI',
recordId: '111',
promptTokens: 1110,
completionTokens: 11,
totalTokens: 1110,
date: dayjs().format('HH:mm'),
contentBlocks: [
{
content: contentTemplates.text('这是模拟的AI响应，包含一个嵌入的iframe：涵盖了销售指标的展示'),
thinkContent: '',
hasThinkBox: false,
thinkBoxExpanded: false,
},
{
content: contentTemplates.iframe({
src:'/WeChatOauth2/MobileReport_Monthly/MonthlyReport_index.aspx?postage=384b67414b334f2f693177644246313756704a724d513d3d&company=器械整体&typename=整体指标',
}),
thinkContent: '',
hasThinkBox: false,
thinkBoxExpanded: false,
}
],
};
messages.value.push(aiMessage);
nextTick(() => {
scrollToBottom();
});
loading.value = false; loading.value = false;
}, 1000); // 1秒后模拟AI响应 }, 1000);
// 调用外部传入的消息发送函数 // 调用外部传入的消息发送函数
if (props.onMessageSend) { if (props.onMessageSend) {
console.log('调用外部消息发送函数', message); console.log('调用外部消息发送函数', message);
...@@ -314,7 +382,7 @@ const sendMessage = async () => { ...@@ -314,7 +382,7 @@ const sendMessage = async () => {
'x-app-code': props.appCode || '', 'x-app-code': props.appCode || '',
} }
}); });
const data = response.data; const data = response.data;
if (data.code === 0) { if (data.code === 0) {
loading.value = false; loading.value = false;
...@@ -337,7 +405,8 @@ const processSSEMessage = ( ...@@ -337,7 +405,8 @@ const processSSEMessage = (
isHistoryData = false, isHistoryData = false,
) => { ) => {
let messageContent = data.message || ''; let messageContent = data.message || '';
const contentType = data.status; const contentStatus = data.status;
const contentType = data.type
let updatedResponse = currentResponse; let updatedResponse = currentResponse;
let updatedIsThinking = isThinking; let updatedIsThinking = isThinking;
let updatedBlockIndex = currentBlockIndex; let updatedBlockIndex = currentBlockIndex;
...@@ -350,7 +419,7 @@ const processSSEMessage = ( ...@@ -350,7 +419,7 @@ const processSSEMessage = (
// 根据是否为历史数据设置默认展开状态 // 根据是否为历史数据设置默认展开状态
const defaultThinkBoxExpanded = !isHistoryData; const defaultThinkBoxExpanded = !isHistoryData;
switch (contentType) { switch (contentStatus) {
case -1: // 错误信息 case -1: // 错误信息
if (updatedResponse) { if (updatedResponse) {
updatedResponse.contentBlocks.push({ updatedResponse.contentBlocks.push({
...@@ -363,33 +432,60 @@ const processSSEMessage = ( ...@@ -363,33 +432,60 @@ const processSSEMessage = (
break; break;
case 3: // 图表数据 case 3: // 图表数据
if (updatedResponse) { if (updatedResponse) {
const { rows } = messageContent; switch (contentType) {
// 表格数据处理 case 'table': // 表格数据
updatedResponse.contentBlocks.push({ const { rows } = messageContent;
content: contentTemplates.table(rows), // 表格数据处理
hasThinkBox: false, updatedResponse.contentBlocks.push({
thinkContent: '', content: contentTemplates.table(rows),
thinkBoxExpanded: false, hasThinkBox: false,
}); thinkContent: '',
// 图表数据处理 thinkBoxExpanded: false,
updatedResponse.contentBlocks.push({ });
content: '', // 图表数据处理
hasThinkBox: false, updatedResponse.contentBlocks.push({
thinkContent: '', content: '',
thinkBoxExpanded: false, hasThinkBox: false,
chartData: messageContent, // 添加图表数据 thinkContent: '',
chartType: 3, thinkBoxExpanded: false,
}); chartData: messageContent, // 添加图表数据
} chartType: 3,
break; });
case 4: // iframe数据 break;
if (updatedResponse) { case 'option': // 选项数据
updatedResponse.contentBlocks.push({ const { tips,options } = messageContent;
content: contentTemplates.iframe(messageContent), if (options?.length) {
hasThinkBox: false, if (options?.length === 1) {
thinkContent: '', // 走iframe
thinkBoxExpanded: false, updatedResponse.contentBlocks.push({
}); content: contentTemplates.iframe({
...options[0],
tips: tips || '',
}),
hasThinkBox: false,
thinkContent: '',
thinkBoxExpanded: false,
});
} else {
updatedResponse.contentBlocks.push({
content: contentTemplates.option(messageContent),
hasThinkBox: false,
thinkContent: '',
thinkBoxExpanded: false,
});
}
}
break;
default: // 默认处理
updatedResponse.contentBlocks.push({
content: contentTemplates.text(messageContent || ''),
hasThinkBox: false,
thinkContent: '',
thinkBoxExpanded: false,
});
break;
}
} }
break; break;
case 10: // 思考开始 case 10: // 思考开始
...@@ -567,7 +663,7 @@ const initSSE = () => { ...@@ -567,7 +663,7 @@ const initSSE = () => {
if (!isAIResponding.value && hasContent) { if (!isAIResponding.value && hasContent) {
isAIResponding.value = true; isAIResponding.value = true;
currentAIResponse.value = { currentAIResponse.value = {
type: 'received', messageType: 'received',
avatar: 'AI', avatar: 'AI',
recordId: '', recordId: '',
promptTokens: 0, promptTokens: 0,
...@@ -583,7 +679,7 @@ const initSSE = () => { ...@@ -583,7 +679,7 @@ const initSSE = () => {
if (!isAIResponding.value) { if (!isAIResponding.value) {
isAIResponding.value = true; isAIResponding.value = true;
currentAIResponse.value = { currentAIResponse.value = {
type: 'received', messageType: 'received',
avatar: 'AI', avatar: 'AI',
recordId: '', recordId: '',
promptTokens: 0, promptTokens: 0,
...@@ -675,7 +771,7 @@ const processHistoryData = (dataArray: any[]) => { ...@@ -675,7 +771,7 @@ const processHistoryData = (dataArray: any[]) => {
let date = dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss'); let date = dayjs(data.startTime).format('YYYY-MM-DD HH:mm:ss');
if (data.question) { if (data.question) {
result.push({ result.push({
type: 'sent', messageType: 'sent',
avatar: '我', avatar: '我',
recordId: '', recordId: '',
promptTokens: 0, promptTokens: 0,
...@@ -695,7 +791,7 @@ const processHistoryData = (dataArray: any[]) => { ...@@ -695,7 +791,7 @@ const processHistoryData = (dataArray: any[]) => {
if (data.answerInfoList && Array.isArray(data.answerInfoList)) { if (data.answerInfoList && Array.isArray(data.answerInfoList)) {
const aiMessage: Message = { const aiMessage: Message = {
type: 'received', messageType: 'received',
avatar: 'AI', avatar: 'AI',
recordId: '', recordId: '',
promptTokens: 0, promptTokens: 0,
...@@ -713,6 +809,7 @@ const processHistoryData = (dataArray: any[]) => { ...@@ -713,6 +809,7 @@ const processHistoryData = (dataArray: any[]) => {
const sseData: SSEData = { const sseData: SSEData = {
message: answer.message || '', message: answer.message || '',
status: answer.status || 0, status: answer.status || 0,
type: answer.type || 0,
}; };
const processResult = processSSEMessage( const processResult = processSSEMessage(
...@@ -763,7 +860,7 @@ const getChatRecord = async (dialogSessionId: string) => { ...@@ -763,7 +860,7 @@ const getChatRecord = async (dialogSessionId: string) => {
'x-app-code': props.appCode || '', 'x-app-code': props.appCode || '',
} }
}); });
const data = response.data; const data = response.data;
if (data.code === 0) { if (data.code === 0) {
const recordList = processHistoryData(data.data || []); const recordList = processHistoryData(data.data || []);
......
src/views/components/style.less
View file @ b1f619b0
...@@ -560,9 +560,34 @@ p, h1, h2, h3, h4, h5, h6, ul, ol, li { ...@@ -560,9 +560,34 @@ p, h1, h2, h3, h4, h5, h6, ul, ol, li {
max-width: 100%; max-width: 100%;
margin: 8px 0; margin: 8px 0;
border-radius: 8px; border-radius: 8px;
overflow: hidden; background-color: @white;
border: 1px solid @blue-light-3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative; position: relative;
min-height: 300px;
// iframe提示信息样式
.iframe-tips {
padding: 12px 16px;
background-color: @blue-light-2;
border-bottom: 1px solid @blue-light-3;
font-size: 14px;
color: @gray-7;
font-weight: 500;
line-height: 1.4;
}
// iframe标题样式
.iframe-title {
padding: 8px 16px;
background-color: @white;
border-bottom: 1px solid @gray-2;
font-size: 14px;
color: @gray-7;
font-weight: 600;
line-height: 1.4;
}
iframe { iframe {
width: 100%; width: 100%;
...@@ -726,4 +751,95 @@ p, h1, h2, h3, h4, h5, h6, ul, ol, li { ...@@ -726,4 +751,95 @@ p, h1, h2, h3, h4, h5, h6, ul, ol, li {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
}
// =============================================
// 选项消息样式 - 纯渲染版本
// =============================================
:deep(.message-options) {
width: 100%;
max-width: 100%;
margin: 8px 0;
border-radius: 8px;
background-color: @white;
border: 1px solid @blue-light-3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
.options-tips {
padding: 12px 16px;
background-color: @blue-light-2;
border-bottom: 1px solid @blue-light-3;
font-size: 14px;
color: @gray-7;
font-weight: 500;
line-height: 1.4;
}
.options-list {
padding: 8px 0;
}
.option-item {
padding: 8px 16px;
border-bottom: 1px solid @gray-2;
transition: background-color 0.2s ease;
&:last-child {
border-bottom: none;
}
&:hover {
background-color: @blue-light-1;
}
.option-content {
line-height: 1.4;
.option-number-title {
font-size: 14px;
color: @gray-7;
font-weight: 500;
// 序号部分特殊样式
&::before {
content: '';
display: inline;
}
}
.option-number-title:first-letter {
color: @primary-color;
font-weight: 600;
}
.option-url {
font-size: 12px;
color: @gray-5;
font-family: 'Courier New', monospace;
word-break: break-all;
display: block;
margin-top: 4px;
}
}
}
}
// 响应式调整
@media (max-width: 768px) {
:deep(.message-options) {
.option-item {
.option-content {
.option-number-title {
font-size: 14px;
}
.option-url {
font-size: 11px;
max-width: 100%;
}
}
}
}
} }
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment