+
`;
- return messageDiv;
- }
-
- // 更新流式消息内容
- updateStreamingMessage(container, content) {
- const contentDiv = container.querySelector('.typing-cursor');
- if (contentDiv) {
- // 使用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 = `
-
-
- ${parsedBeforeText}
-
- 🎨 正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...
-
-
-
-
- `;
- 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}')`);
- }
- }
-
+ return messageDiv;
+ }
+
+ // 更新流式消息内容
+ updateStreamingMessage(container, content) {
+ const contentDiv = container.querySelector('.typing-cursor');
+ if (contentDiv) {
+ // 使用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 = `
+
+
+ ${parsedBeforeText}
+
+ 🎨 正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...
+
+
+
+
+ `;
+ 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 = `
-
-
- ${parsedBeforeText}
-
- 📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-
-
${parsedAfterText}
-
-
+
+ container.innerHTML = `
+
+
+ ${parsedBeforeText}
+
+ 📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
+
+
${parsedAfterText}
+
+
`;
Utils.scrollToBottom(this.chatHistory);
}
+ buildActionToolbar(messageId, { allowRegenerate = false, allowRollback = true } = {}) {
+ const actions = [];
+
+ if (allowRollback) {
+ actions.push(`
+
+ `);
+ }
+
+ if (allowRegenerate) {
+ actions.push(`
+
+ `);
+ }
+
+ if (!actions.length) {
+ return '';
+ }
+
+ return `
+
+ ${actions.join('')}
+
+ `;
+ }
+
// 组装标准化的SVG消息字符串
buildSVGMessageContent(beforeText = '', svgBody = '', afterText = '') {
const segments = [];
@@ -487,17 +615,6 @@ class ProductCanvasApp {
// 完成流式消息
finalizeStreamingMessage(messageId, fullContent, svgId = null) {
- let container = document.querySelector(`.chat-bubble-ai[data-message-id="${messageId}"]`);
- if (!container) {
- const fallback = document.querySelector(`[data-message-id="${messageId}"]`);
- if (fallback) {
- container = fallback.classList.contains('chat-bubble-ai')
- ? fallback
- : fallback.querySelector('.chat-bubble-ai');
- }
- }
- if (!container) return;
-
const parsed = Utils.parseSVGResponse(fullContent);
const timestamp = new Date().toISOString();
@@ -508,28 +625,14 @@ class ProductCanvasApp {
timestamp
};
- container.classList.remove('streaming-text');
- container.setAttribute('data-message-id', messageId);
-
- const actionFooter = `
-
-
-
-
- `;
+ let targetSvgId = svgId || null;
if (parsed.svgContent && parsed.svgContent.includes('
')
? parsed.svgContent.trim()
- : `${parsed.svgContent.trim()}\n`;
+ : `${parsed.svgContent.trim()}
+`;
- let targetSvgId = svgId || null;
if (!targetSvgId || !this.svgStorage[this.currentMode][targetSvgId]) {
targetSvgId = targetSvgId || Utils.generateId('svg');
}
@@ -541,235 +644,182 @@ class ProductCanvasApp {
timestamp
};
- const beforeHtml = parsed.beforeText
- ? (typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText))
- : '';
- const afterHtml = parsed.afterText
- ? (typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText))
- : '';
-
- container.innerHTML = `
-
- ${beforeHtml}
-
- 📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-
- ${afterHtml}
-
- ${parsedContent}
-
- ${actionFooter}
- `;
-
+ const sanitizedText = fullContent.replace(/^[\s`]+/, '').replace(/[\s`]+$/, '').trim();
message.content = sanitizedText;
}
this.conversationHistory[this.currentMode].push(message);
+ 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();
+ this.renderSvgViewerForMode();
+ Utils.scrollToBottom(this.chatHistory);
+ }
+
+ // 清空当前对话
+ clearCurrentConversation() {
+ if (!confirm(`确定要清空当前的${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}对话吗？`)) {
+ return;
+ }
+
+ // 清空当前模式的对话历史
+ this.conversationHistory[this.currentMode] = [];
+
+ // 清空当前模式的SVG存储
+ this.svgStorage[this.currentMode] = {};
+ this.showSvgPlaceholder();
+
// 保存数据
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);
- Utils.scrollToBottom(this.chatHistory);
+
+ // 重新渲染对话历史
+ this.renderConversationHistory();
+ this.renderSvgViewerForMode();
}
-
- // 清空当前对话
- clearCurrentConversation() {
- if (!confirm(`确定要清空当前的${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}对话吗？`)) {
- return;
- }
-
- // 清空当前模式的对话历史
- this.conversationHistory[this.currentMode] = [];
-
- // 清空当前模式的SVG存储
- this.svgStorage[this.currentMode] = {};
-
- // 如果当前显示的是被清空的模式的SVG，清空显示
- if (this.currentSvgId && this.svgStorage[this.currentMode][this.currentSvgId]) {
- this.currentSvgId = null;
- this.svgViewer.innerHTML = `
-
-
-
生成的${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}将在此处显示
-
- ${Utils.escapeHtml(message.content)}
-
- `;
- } else if (message.type === 'error') {
- messageDiv.className = 'flex justify-start';
- messageDiv.innerHTML = `
-
-
- ${Utils.escapeHtml(message.content)}
-
- `;
- } else {
- messageDiv.className = 'flex justify-start';
- messageDiv.innerHTML = `
-
-
- ${typeof marked !== 'undefined' ? marked.parse(message.content) : Utils.escapeHtml(message.content)}
-
-
-
-
-
-
-
-
- ${typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText)}
-
- 📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-
- ${typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText)}
-
-
-
-
-
-
-
+ ${Utils.escapeHtml(message.content)}
+
+ `;
+ } else if (message.type === 'error') {
+ messageDiv.className = 'flex justify-start';
+ messageDiv.innerHTML = `
+
+
+ ${Utils.escapeHtml(message.content)}
+
+ `;
+ } else if (message.type === 'ai') {
+ const parsedContent = typeof marked !== 'undefined' ? marked.parse(message.content) : Utils.escapeHtml(message.content);
+ const actions = this.buildActionToolbar(message.id, { allowRegenerate, allowRollback });
+ messageDiv.className = 'flex justify-start';
+ messageDiv.innerHTML = `
+
+
+ ${parsedContent}
+
+ ${actions}
+
+
+ ${beforeHtml}
+
+ 📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
+
+ ${afterHtml}
+
+ ${actions}
+
-
-
生成的${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}将在此处显示
-
-
-
-
${Utils.escapeHtml(svgContent)}
-
-
-
-
-
+
+
+
${Utils.escapeHtml(svgContent)}
+
+
+
+
+