Implement chat history caching and enhance message rendering in Step5Interaction component
- Added chat history caching to preserve conversation records for report agents and selected agents. - Introduced a method to save and restore chat history based on the selected target. - Improved message rendering by cleaning up unnecessary <br> tags and ensuring proper list formatting with CSS. - Automatically save chat history upon sending messages for better user experience.
This commit is contained in:
parent
78c8c43699
commit
cc094e48ce
1 changed files with 68 additions and 4 deletions
|
|
@ -433,6 +433,7 @@ const showToolsDetail = ref(true)
|
||||||
// Chat State
|
// Chat State
|
||||||
const chatInput = ref('')
|
const chatInput = ref('')
|
||||||
const chatHistory = ref([])
|
const chatHistory = ref([])
|
||||||
|
const chatHistoryCache = ref({}) // 缓存所有对话记录: { 'report_agent': [], 'agent_0': [], 'agent_1': [], ... }
|
||||||
const isSending = ref(false)
|
const isSending = ref(false)
|
||||||
const chatMessages = ref(null)
|
const chatMessages = ref(null)
|
||||||
const chatInputRef = ref(null)
|
const chatInputRef = ref(null)
|
||||||
|
|
@ -482,13 +483,29 @@ const selectChatTarget = (target) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 保存当前对话记录到缓存
|
||||||
|
const saveChatHistory = () => {
|
||||||
|
if (chatHistory.value.length === 0) return
|
||||||
|
|
||||||
|
if (chatTarget.value === 'report_agent') {
|
||||||
|
chatHistoryCache.value['report_agent'] = [...chatHistory.value]
|
||||||
|
} else if (selectedAgentIndex.value !== null) {
|
||||||
|
chatHistoryCache.value[`agent_${selectedAgentIndex.value}`] = [...chatHistory.value]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const selectReportAgentChat = () => {
|
const selectReportAgentChat = () => {
|
||||||
|
// 保存当前对话记录
|
||||||
|
saveChatHistory()
|
||||||
|
|
||||||
activeTab.value = 'chat'
|
activeTab.value = 'chat'
|
||||||
chatTarget.value = 'report_agent'
|
chatTarget.value = 'report_agent'
|
||||||
selectedAgent.value = null
|
selectedAgent.value = null
|
||||||
selectedAgentIndex.value = null
|
selectedAgentIndex.value = null
|
||||||
showAgentDropdown.value = false
|
showAgentDropdown.value = false
|
||||||
chatHistory.value = []
|
|
||||||
|
// 恢复 Report Agent 的对话记录
|
||||||
|
chatHistory.value = chatHistoryCache.value['report_agent'] || []
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectSurveyTab = () => {
|
const selectSurveyTab = () => {
|
||||||
|
|
@ -507,11 +524,16 @@ const toggleAgentDropdown = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectAgent = (agent, idx) => {
|
const selectAgent = (agent, idx) => {
|
||||||
|
// 保存当前对话记录
|
||||||
|
saveChatHistory()
|
||||||
|
|
||||||
selectedAgent.value = agent
|
selectedAgent.value = agent
|
||||||
selectedAgentIndex.value = idx
|
selectedAgentIndex.value = idx
|
||||||
chatTarget.value = 'agent'
|
chatTarget.value = 'agent'
|
||||||
showAgentDropdown.value = false
|
showAgentDropdown.value = false
|
||||||
chatHistory.value = [] // Reset chat history for new agent
|
|
||||||
|
// 恢复该 Agent 的对话记录
|
||||||
|
chatHistory.value = chatHistoryCache.value[`agent_${idx}`] || []
|
||||||
addLog(`选择对话对象: ${agent.username}`)
|
addLog(`选择对话对象: ${agent.username}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -577,8 +599,12 @@ const renderMarkdown = (content) => {
|
||||||
html = html.replace(/<p class="md-p">(<ul|<ol|<blockquote|<pre|<hr)/g, '$1')
|
html = html.replace(/<p class="md-p">(<ul|<ol|<blockquote|<pre|<hr)/g, '$1')
|
||||||
html = html.replace(/(<\/ul>|<\/ol>|<\/blockquote>|<\/pre>)<\/p>/g, '$1')
|
html = html.replace(/(<\/ul>|<\/ol>|<\/blockquote>|<\/pre>)<\/p>/g, '$1')
|
||||||
// 清理列表前后的 <br> 标签
|
// 清理列表前后的 <br> 标签
|
||||||
html = html.replace(/<br>(<ul|<ol)/g, '$1')
|
html = html.replace(/<br>\s*(<ul|<ol)/g, '$1')
|
||||||
html = html.replace(/(<\/ul>|<\/ol>)<br>/g, '$1')
|
html = html.replace(/(<\/ul>|<\/ol>)\s*<br>/g, '$1')
|
||||||
|
// 清理连续的 <br> 标签
|
||||||
|
html = html.replace(/(<br>\s*){2,}/g, '<br>')
|
||||||
|
// 清理列表后紧跟的段落开始标签前的 <br>
|
||||||
|
html = html.replace(/(<\/ol>|<\/ul>)<br>(<p|<div)/g, '$1$2')
|
||||||
|
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
|
|
@ -616,6 +642,8 @@ const sendMessage = async () => {
|
||||||
} finally {
|
} finally {
|
||||||
isSending.value = false
|
isSending.value = false
|
||||||
scrollToBottom()
|
scrollToBottom()
|
||||||
|
// 自动保存对话记录到缓存
|
||||||
|
saveChatHistory()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1922,6 +1950,42 @@ watch(() => props.simulationId, (newId) => {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 修复有序列表编号 - 使用 CSS 计数器让多个 ol 连续编号 */
|
||||||
|
.message-text {
|
||||||
|
counter-reset: list-counter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text :deep(.md-ol) {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text :deep(.md-oli) {
|
||||||
|
counter-increment: list-counter;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text :deep(.md-oli)::before {
|
||||||
|
content: counter(list-counter) ".";
|
||||||
|
font-weight: 600;
|
||||||
|
color: #374151;
|
||||||
|
min-width: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 无序列表样式 */
|
||||||
|
.message-text :deep(.md-ul) {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-text :deep(.md-li) {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Typing Indicator */
|
/* Typing Indicator */
|
||||||
.typing-indicator {
|
.typing-indicator {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue