shiyue/productcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: shiyue:18f1aba08e02ab9b89ef2b3d9192d01f689e14af
Branches Tags
shiyue:master
...
compare: shiyue:6fe5f4175da99e37c2850cd12648bd297c483cef
Branches Tags
shiyue:master

2 Commits
18f1aba08e ... 6fe5f4175d

Author SHA1 Message Date
史悦
6fe5f4175d 修复了SVG实时绘制问题： 
使用更精确的正则表达式检测SVG代码块开始
正确处理Markdown格式的SVG代码块（svg或<svg）
实时更新SVG显示区域，自动补全结束标签确保正确显示
添加了完整的Markdown支持：

集成了marked.js库用于解析Markdown内容
配置了支持GitHub风格的Markdown选项
在所有消息渲染函数中添加了Markdown解析逻辑
添加了专门的Markdown样式：

为标题、段落、列表、代码块、引用等添加了样式
确保Markdown内容在对话气泡中正确显示
保持了原有的设计风格和颜色方案
优化了流式输出体验：

SVG绘制过程中显示加载动画和"正在绘制..."提示
绘制完成后自动切换为可点击的占位符
支持SVG前后的Markdown文本内容正确渲染
 2025-10-24 18:20:43 +08:00
史悦
9032b634e6 对话框调试 2025-10-24 18:12:29 +08:00
3 changed files with 464 additions and 70 deletions
Expand all files Collapse all files

169
css/style.css
View File

@@ -33,10 +33,117 @@ body {
color: #1f2937;
padding: 10px 14px;
max-width: 85%;
max-height: 300px;
overflow-y: auto;
border: 2px solid #10b981;
box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
}
/* Markdown样式 */
.chat-bubble-ai h1 {
font-size: 1.5em;
font-weight: bold;
margin: 0.5em 0;
color: #1f2937;
}
.chat-bubble-ai h2 {
font-size: 1.3em;
font-weight: bold;
margin: 0.5em 0;
color: #1f2937;
}
.chat-bubble-ai h3 {
font-size: 1.1em;
font-weight: bold;
margin: 0.5em 0;
color: #1f2937;
}
.chat-bubble-ai p {
margin: 0.5em 0;
line-height: 1.5;
}
.chat-bubble-ai ul, .chat-bubble-ai ol {
margin: 0.5em 0;
padding-left: 1.5em;
}
.chat-bubble-ai li {
margin: 0.25em 0;
line-height: 1.4;
}
.chat-bubble-ai code {
background: #f3f4f6;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: #e11d48;
}
.chat-bubble-ai pre {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 0.75em;
overflow-x: auto;
margin: 0.5em 0;
}
.chat-bubble-ai pre code {
background: none;
padding: 0;
color: #1f2937;
}
.chat-bubble-ai blockquote {
border-left: 4px solid #d1d5db;
padding-left: 1em;
margin: 0.5em 0;
color: #6b7280;
font-style: italic;
}
.chat-bubble-ai strong {
font-weight: bold;
color: #1f2937;
}
.chat-bubble-ai em {
font-style: italic;
color: #4b5563;
}
.chat-bubble-ai a {
color: #3b82f6;
text-decoration: underline;
}
.chat-bubble-ai a:hover {
color: #1d4ed8;
}
.chat-bubble-ai table {
border-collapse: collapse;
width: 100%;
margin: 0.5em 0;
}
.chat-bubble-ai th, .chat-bubble-ai td {
border: 1px solid #e5e7eb;
padding: 0.5em;
text-align: left;
}
.chat-bubble-ai th {
background: #f9fafb;
font-weight: bold;
}
/* SVG占位符样式 - 块级换行 + 新配色 */
.svg-placeholder-block {
display: block;
@@ -59,6 +166,57 @@ body {
background: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
}
/* SVG绘制中状态占位符 */
.svg-drawing-placeholder {
display: block;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
color: white;
padding: 8px 14px;
margin: 8px 0;
border: 2px solid #000;
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
font-weight: bold;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
position: relative;
overflow: hidden;
}
.svg-drawing-placeholder:hover {
transform: translateX(2px) translateY(-2px);
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
}
/* 绘制中动画效果 */
@keyframes drawing-pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.svg-drawing-placeholder::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: drawing-shine 2s infinite;
}
@keyframes drawing-shine {
0% { left: -100%; }
100% { left: 100%; }
}
.svg-drawing-text {
animation: drawing-pulse 1.5s infinite;
}
/* 气泡操作按钮 */
.bubble-action-btn {
opacity: 0;
@@ -180,3 +338,14 @@ body {
color: #667eea;
font-weight: bold;
}
/* 清空历史按钮摇动动画 */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
}
.clear-history-btn:hover iconify-icon {
animation: shake 0.5s ease-in-out;
}

25
index.html
View File

@@ -6,6 +6,7 @@
<title>产品画布 / SWOT分析</title>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
@@ -46,6 +47,17 @@
<!-- 左侧对话面板 -->
<div class="md:col-span-1 bg-white wild-border border-cyan-500 flex flex-col">
<!-- 对话历史顶部栏 -->
<div class="p-3 border-b-3 border-gray-300 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between">
<div class="flex items-center gap-2">
<iconify-icon icon="ph:chats-circle-fill" class="text-2xl text-white"></iconify-icon>
<span class="font-black text-white">对话历史</span>
</div>
<button id="clear-history-btn" class="clear-history-btn bg-red-500 text-white px-3 py-1 border-2 border-black hover:bg-red-600 transition-all flex items-center gap-1 font-bold" title="清空对话历史">
<iconify-icon icon="ph:trash-bold" class="text-lg"></iconify-icon>
<span class="text-sm">清空</span>
</button>
</div>
<!-- 对话历史区 -->
<div id="chat-history" class="flex-1 p-4 overflow-y-auto space-y-3">
<!-- 欢迎消息 -->
@@ -58,21 +70,16 @@
<!-- 输入区 -->
<div class="p-3 border-t-3 border-gray-300 bg-yellow-50">
<div class="relative flex items-start gap-2">
<div class="relative flex items-center gap-2">
<textarea
id="chat-input"
placeholder="输入您的想法，按Enter发送，Shift+Enter换行..."
class="flex-1 auto-resize-input border-2 border-gray-800 focus:border-cyan-500 focus:outline-none transition-colors font-medium"
rows="1"
></textarea>
<div class="flex flex-col gap-2">
<button id="clear-button" class="clear-btn text-red-500 hover:text-red-600 transition-colors p-2 hover:scale-110 transform duration-200" title="清空当前对话">
<iconify-icon icon="ph:trash-bold" class="text-2xl"></iconify-icon>
</button>
<button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
<iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
</button>
</div>
<button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
<iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
</button>
</div>
</div>
</div>

340
js/app.js
View File

@@ -2,6 +2,17 @@
* 应用核心逻辑
*/
// 配置Markdown解析器
if (typeof marked !== 'undefined') {
marked.setOptions({
breaks: true, // 支持换行
gfm: true, // 支持GitHub风格的Markdown
sanitize: false, // 允许HTML（因为我们自己处理SVG）
smartLists: true, // 智能列表
smartypants: true // 智能标点
});
}
class ProductCanvasApp {
constructor() {
this.currentMode = 'canvas'; // 'canvas' 或 'swot'
@@ -27,7 +38,7 @@ class ProductCanvasApp {
// 对话相关
this.chatInput = document.getElementById('chat-input');
this.sendButton = document.getElementById('send-button');
this.clearButton = document.getElementById('clear-button');
this.clearHistoryBtn = document.getElementById('clear-history-btn');
this.chatHistory = document.getElementById('chat-history');
// SVG显示
@@ -60,7 +71,7 @@ class ProductCanvasApp {
// 发送消息
this.sendButton.addEventListener('click', () => this.sendMessage());
this.clearButton.addEventListener('click', () => this.clearCurrentConversation());
this.clearHistoryBtn.addEventListener('click', () => this.clearCurrentConversation());
// 输入框事件
this.chatInput.addEventListener('keypress', (e) => {
@@ -206,18 +217,112 @@ class ProductCanvasApp {
Utils.scrollToBottom(this.chatHistory);
let fullContent = '';
let svgStarted = false;
let svgContent = '';
let svgId = null;
let beforeText = '';
const onChunk = (chunk) => {
if (chunk.choices && chunk.choices[0] && chunk.choices[0].delta) {
const content = chunk.choices[0].delta.content || '';
fullContent += content;
this.updateStreamingMessage(messageContainer, fullContent);
// 检测SVG开始标记
if (!svgStarted) {
// 使用正则表达式更准确地检测SVG代码块开始
const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
if (svgStartMatch) {
svgStarted = true;
svgId = Utils.generateId('svg');
// 提取SVG开始前的文本
const svgStartIndex = svgStartMatch.index;
beforeText = fullContent.substring(0, svgStartIndex);
// 显示绘制中占位符
this.updateStreamingMessageWithPlaceholder(messageContainer, beforeText, svgId);
// 初始化SVG显示区域
this.svgViewer.innerHTML = `
<div class="flex items-center justify-center h-full">
<div class="text-center">
<iconify-icon icon="ph:spinner-gap" class="text-6xl text-purple-500 animate-spin"></iconify-icon>
<p class="mt-4 font-bold text-gray-600">正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</p>
</div>
</div>
`;
}
}
// 如果SVG已经开始，收集SVG内容
if (svgStarted) {
// 检查是否有SVG结束标记
if (fullContent.includes('</svg>')) {
const svgEndIndex = fullContent.indexOf('</svg>') + 6; // +6 是 '</svg>' 的长度
// 提取完整的SVG内容
const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
if (svgStartMatch) {
const svgStartIndex = svgStartMatch.index;
let svgWithMarkers = fullContent.substring(svgStartIndex, svgEndIndex);
// 移除代码块标记
svgContent = svgWithMarkers.replace(/```(?:svg)?\s*/, '').replace(/```$/, '').trim();
// 补全SVG结束标签（如果没有的话）
if (!svgContent.endsWith('</svg>')) {
svgContent += '</svg>';
}
// 实时显示SVG
this.svgViewer.innerHTML = svgContent;
// 存储SVG内容
this.svgStorage[this.currentMode][svgId] = {
content: svgContent,
messageId: messageId,
mode: this.currentMode,
timestamp: new Date().toISOString()
};
// 更新占位符为可点击状态
this.updatePlaceholderToClickable(messageContainer, svgId);
// 重置SVG状态，继续接收剩余文本
svgStarted = false;
const afterText = fullContent.substring(svgEndIndex);
this.updateStreamingMessageAfterSVG(messageContainer, beforeText, svgId, afterText);
}
} else {
// SVG还在继续，更新内容
const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
if (svgStartMatch) {
const svgStartIndex = svgStartMatch.index;
let svgWithMarkers = fullContent.substring(svgStartIndex);
// 移除代码块标记
svgContent = svgWithMarkers.replace(/```(?:svg)?\s*/, '').replace(/```$/, '').trim();
// 补全SVG结束标签以便实时显示
let tempSvgContent = svgContent;
if (!tempSvgContent.endsWith('</svg>')) {
tempSvgContent += '</svg>';
}
// 实时更新SVG显示
this.svgViewer.innerHTML = tempSvgContent;
}
}
} else {
// 普通文本更新
this.updateStreamingMessage(messageContainer, fullContent);
}
}
};
const onComplete = () => {
// 流式接收完成，处理完整消息
this.finalizeStreamingMessage(messageId, fullContent);
this.finalizeStreamingMessage(messageId, fullContent, svgId, beforeText);
this.isProcessing = false;
this.sendButton.disabled = false;
@@ -248,18 +353,71 @@ class ProductCanvasApp {
updateStreamingMessage(container, content) {
const contentDiv = container.querySelector('.typing-cursor');
if (contentDiv) {
contentDiv.textContent = content;
// 使用Markdown解析内容
if (typeof marked !== 'undefined') {
contentDiv.innerHTML = marked.parse(content);
} else {
contentDiv.textContent = content;
}
Utils.scrollToBottom(this.chatHistory);
}
}
// 更新流式消息内容并显示SVG占位符
updateStreamingMessageWithPlaceholder(container, beforeText, svgId) {
// 使用Markdown解析beforeText
const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
container.innerHTML = `
<div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
<div>
${parsedBeforeText}
<div class="svg-drawing-placeholder" data-svg-id="${svgId}">
<span class="svg-drawing-text">🎨 正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</span>
</div>
<div class="typing-cursor"></div>
</div>
</div>
`;
Utils.scrollToBottom(this.chatHistory);
}
// 更新占位符为可点击状态
updatePlaceholderToClickable(container, svgId) {
const placeholder = container.querySelector('.svg-drawing-placeholder');
if (placeholder) {
placeholder.classList.remove('svg-drawing-placeholder');
placeholder.classList.add('svg-placeholder-block');
placeholder.innerHTML = `📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG`;
placeholder.setAttribute('onclick', `app.viewSVG('${svgId}')`);
}
}
// 更新SVG后的消息内容
updateStreamingMessageAfterSVG(container, beforeText, svgId, afterText) {
// 使用Markdown解析文本
const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(afterText) : Utils.escapeHtml(afterText);
container.innerHTML = `
<div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
<div>
${parsedBeforeText}
<div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
</div>
<div class="typing-cursor">${parsedAfterText}</div>
</div>
</div>
`;
Utils.scrollToBottom(this.chatHistory);
}
// 完成流式消息
finalizeStreamingMessage(messageId, fullContent) {
finalizeStreamingMessage(messageId, fullContent, svgId = null, beforeText = '') {
const container = document.querySelector(`[data-message-id="${messageId}"]`);
if (!container) return;
const parsed = Utils.parseSVGResponse(fullContent);
const message = {
id: messageId,
type: 'ai',
@@ -269,26 +427,27 @@ class ProductCanvasApp {
this.conversationHistory[this.currentMode].push(message);
// 如果包含SVG，存储SVG内容
if (parsed.svgContent) {
const svgId = Utils.generateId('svg');
this.svgStorage[this.currentMode][svgId] = {
content: parsed.svgContent,
messageId: messageId,
mode: this.currentMode,
timestamp: new Date().toISOString()
};
// 如果已经有SVG ID（从流式处理中获得），直接使用
if (svgId && this.svgStorage[this.currentMode][svgId]) {
// 提取SVG后的文本
let afterText = '';
if (fullContent.includes('</svg>')) {
const svgEndIndex = fullContent.indexOf('</svg>') + 6;
afterText = fullContent.substring(svgEndIndex);
}
this.viewSVG(svgId);
// 使用Markdown解析文本
const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(afterText) : Utils.escapeHtml(afterText);
// 更新容器内容为包含SVG的消息
container.innerHTML = `
<div>
${Utils.escapeHtml(parsed.beforeText)}
${parsedBeforeText}
<div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
</div>
${Utils.escapeHtml(parsed.afterText)}
${parsedAfterText}
</div>
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -303,28 +462,75 @@ class ProductCanvasApp {
</div>
`;
} else {
// 更新容器内容为普通消息
container.innerHTML = `
<div class="mb-1">
${Utils.escapeHtml(fullContent)}
</div>
// 使用原有的解析方法作为后备
const parsed = Utils.parseSVGResponse(fullContent);
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
<iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
<span>退回</span>
</button>
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
<iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
<span>重新生成</span>
</button>
</div>
`;
// 如果包含SVG，存储SVG内容
if (parsed.svgContent) {
const newSvgId = Utils.generateId('svg');
this.svgStorage[this.currentMode][newSvgId] = {
content: parsed.svgContent,
messageId: messageId,
mode: this.currentMode,
timestamp: new Date().toISOString()
};
this.viewSVG(newSvgId);
// 使用Markdown解析文本
const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText);
const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText);
// 更新容器内容为包含SVG的消息
container.innerHTML = `
<div>
${parsedBeforeText}
<div class="svg-placeholder-block" data-svg-id="${newSvgId}" onclick="app.viewSVG('${newSvgId}')">
📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
</div>
${parsedAfterText}
</div>
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
<iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
<span>退回</span>
</button>
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
<iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
<span>重新生成</span>
</button>
</div>
`;
} else {
// 使用Markdown解析内容
const parsedContent = typeof marked !== 'undefined' ? marked.parse(fullContent) : Utils.escapeHtml(fullContent);
// 更新容器内容为普通消息
container.innerHTML = `
<div class="mb-1">
${parsedContent}
</div>
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
<iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
<span>退回</span>
</button>
<button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
<iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
<span>重新生成</span>
</button>
</div>
`;
}
}
// 保存数据
Utils.storage.set(`conversationHistory`, this.conversationHistory);
Utils.storage.set(`svgStorage`, this.svgStorage);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
Utils.storage.set('swotSVGs', this.svgStorage.swot);
}
// 清空当前对话
@@ -351,8 +557,10 @@ class ProductCanvasApp {
}
// 保存数据
Utils.storage.set('conversationHistory', this.conversationHistory);
Utils.storage.set('svgStorage', this.svgStorage);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
Utils.storage.set('swotSVGs', this.svgStorage.swot);
// 重新渲染对话历史
this.renderConversationHistory();
@@ -371,7 +579,8 @@ class ProductCanvasApp {
this.conversationHistory[this.currentMode].push(message);
this.renderMessage(message);
Utils.scrollToBottom(this.chatHistory);
Utils.storage.set('conversationHistory', this.conversationHistory);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
}
// 添加AI消息（非流式，保留用于错误情况）
@@ -398,7 +607,8 @@ class ProductCanvasApp {
timestamp: new Date().toISOString()
};
Utils.storage.set('svgStorage', this.svgStorage);
Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
Utils.storage.set('swotSVGs', this.svgStorage.swot);
this.viewSVG(svgId);
// 渲染包含SVG占位符的消息
@@ -409,7 +619,8 @@ class ProductCanvasApp {
}
Utils.scrollToBottom(this.chatHistory);
Utils.storage.set('conversationHistory', this.conversationHistory);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
}
// 添加错误消息
@@ -425,7 +636,8 @@ class ProductCanvasApp {
this.conversationHistory[this.currentMode].push(message);
this.renderMessage(message);
Utils.scrollToBottom(this.chatHistory);
Utils.storage.set('conversationHistory', this.conversationHistory);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
}
// 渲染消息
@@ -452,7 +664,7 @@ class ProductCanvasApp {
messageDiv.innerHTML = `
<div class="chat-bubble-ai relative group" data-message-id="${message.id}">
<div class="mb-1">
${Utils.escapeHtml(message.content)}
${typeof marked !== 'undefined' ? marked.parse(message.content) : Utils.escapeHtml(message.content)}
</div>
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -479,11 +691,11 @@ class ProductCanvasApp {
messageDiv.innerHTML = `
<div class="chat-bubble-ai relative group" data-message-id="${message.id}">
<div>
${Utils.escapeHtml(parsed.beforeText)}
${typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText)}
<div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
</div>
${Utils.escapeHtml(parsed.afterText)}
${typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText)}
</div>
<div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -506,13 +718,17 @@ class ProductCanvasApp {
renderConversationHistory() {
this.chatHistory.innerHTML = '';
for (const message of this.conversationHistory) {
// 获取当前模式的对话历史
const currentHistory = this.conversationHistory[this.currentMode] || [];
for (const message of currentHistory) {
if (message.type === 'ai') {
const parsed = Utils.parseSVGResponse(message.content);
// 查找对应的SVG
let svgId = null;
for (const [id, svg] of Object.entries(this.svgStorage)) {
const currentSvgStorage = this.svgStorage[this.currentMode] || {};
for (const [id, svg] of Object.entries(currentSvgStorage)) {
if (svg.messageId === message.id) {
svgId = id;
break;
@@ -532,29 +748,29 @@ class ProductCanvasApp {
// 显示SVG
viewSVG(svgId) {
if (!this.svgStorage[svgId]) {
if (!this.svgStorage[this.currentMode][svgId]) {
console.error('SVG not found:', svgId);
return;
}
this.currentSvgId = svgId;
const svgContent = this.svgStorage[svgId].content;
const svgContent = this.svgStorage[this.currentMode][svgId].content;
this.svgViewer.innerHTML = svgContent;
}
// 退回到指定消息
rollbackToMessage(messageId) {
const messageIndex = this.conversationHistory.findIndex(msg => msg.id === messageId);
const messageIndex = this.conversationHistory[this.currentMode].findIndex(msg => msg.id === messageId);
if (messageIndex === -1) return;
// 删除指定消息之后的所有消息
const messagesToRemove = this.conversationHistory.slice(messageIndex + 1);
const messagesToRemove = this.conversationHistory[this.currentMode].slice(messageIndex + 1);
// 删除相关的SVG
for (const message of messagesToRemove) {
for (const [svgId, svg] of Object.entries(this.svgStorage)) {
for (const [svgId, svg] of Object.entries(this.svgStorage[this.currentMode])) {
if (svg.messageId === message.id) {
delete this.svgStorage[svgId];
delete this.svgStorage[this.currentMode][svgId];
// 如果当前显示的是被删除的SVG，清空显示
if (this.currentSvgId === svgId) {
@@ -571,11 +787,13 @@ class ProductCanvasApp {
}
// 更新对话历史
this.conversationHistory = this.conversationHistory.slice(0, messageIndex + 1);
this.conversationHistory[this.currentMode] = this.conversationHistory[this.currentMode].slice(0, messageIndex + 1);
// 保存数据
Utils.storage.set('conversationHistory', this.conversationHistory);
Utils.storage.set('svgStorage', this.svgStorage);
Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
Utils.storage.set('swotHistory', this.conversationHistory.swot);
Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
Utils.storage.set('swotSVGs', this.svgStorage.swot);
// 重新渲染对话历史
this.renderConversationHistory();
@@ -591,7 +809,7 @@ class ProductCanvasApp {
try {
// 重新生成响应
const response = await window.apiClient.regenerateResponse(messageId, this.conversationHistory);
const response = await window.apiClient.regenerateResponse(messageId, this.conversationHistory[this.currentMode]);
// 退回到指定消息
this.rollbackToMessage(messageId);
@@ -616,7 +834,7 @@ class ProductCanvasApp {
return;
}
const svgContent = this.svgStorage[this.currentSvgId].content;
const svgContent = this.svgStorage[this.currentMode][this.currentSvgId].content;
const filename = `${this.currentMode}-${Utils.formatDateTime().replace(/[/:]/g, '-')}.svg`;
Utils.downloadFile(svgContent, filename, 'image/svg+xml');
}
@@ -640,7 +858,7 @@ class ProductCanvasApp {
return;
}
const svgContent = this.svgStorage[this.currentSvgId].content;
const svgContent = this.svgStorage[this.currentMode][this.currentSvgId].content;
// 创建代码查看模态窗
const modal = document.createElement('div');