Hello! I would like to ask for some advice on a current requirement. The design is as follows: I want the upper part to have a typewriter effect and render in Markdown format. However, when rendering, I used HTML, but the Markdown style did not take effect. Can you help me solve this problem? Here is my relevant code.
onmessage(message) {
console.log('onmessage')
const data = JSON.parse(message.data)
currentMesImportantInfo.id = data.id
if (data.status_code === 'SUCCESS') {
reference = {}
if (data?.references?.doc?.length > 0) {
// 引用部分
const titleText = data.references.doc.map(item => `《${item.title}》`)
const titleHtml =
`
<div style="font-size: 14px; background-color: #f2f6fc; padding: 11px 16px; border-radius: 8px; margin-top: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span style="color: #67696d;">引用:</span>
<span style="color: #728cb6;">
来源${titleText}
</span>
</div>
`
signals.onResponse({ html: titleHtml })
// 文件链接
// ====盒子内部的html
const linkContentHtml = data.references.doc.map(item => `
<a
onmouseover="this.style.color='#409eff'; this.style.textDecoration='underline';"
onmouseout="this.style.color='#606266'; this.style.textDecoration='none';"
style="font-size: 14px; color: #606266 ; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;" href="${item.documentUrl}"
target="_blank"
>
${item.content}
</a>
`).join('')
// ===包裹文件链接的盒子的html
const linkBoxHtml =
`
<div style="background-color: #f2f6fc; padding: 16px; border-radius: 8px; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column;">
${linkContentHtml}
</div>
`
signals.onResponse({ html: linkBoxHtml }) // 添加消息内容
reference = data
} else {
textContent += data.message.content.replace(/\n/g, '<br />')
signals.onResponse({ html: data.message.content.replace(/\n/g, '<br />') }) // 添加消息内容
}
} else {
signals.onResponse({ error: data.message.content })
}
}
async onclose() {
await signals.onResponse({
html: `
<div style="margin-top: 15px; display: flex; display: flex; flex-direction: row; justify-content: flex-end">
<svg id="${currentMesImportantInfo.id}up" conversationid="${currentMesImportantInfo.id}" class="icon icon-thumb-up" style="width: 1.5em;height: 1.5em; margin-right: 10px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" p-id="2208">
<path style="pointer-events: none;" d="M732.522667 840.832l122.197333-384H595.050667l51.349333-134.186667a85.333333 85.333333 0 0 0-29.056-99.2L580.053333 195.989333l-200.661333 260.864H337.066667v384h395.456z m76.586666 40.746667a64 64 0 0 1-60.970666 44.586666H251.733333v-554.666666h85.653334L525.162667 127.36a64 64 0 0 1 88.704-12.501333l54.101333 39.893333a170.666667 170.666667 0 0 1 58.133333 198.357333l-7.04 18.346667h135.658667c57.749333 0 98.816 56.192 81.322667 111.232l-126.933334 398.869333zM102.4 926.165333v-554.666666h85.333333v554.666666h-85.333333z" fill="#4E5969" p-id="2209"></path>
</svg>
<svg id="${currentMesImportantInfo.id}down" conversationid="${currentMesImportantInfo.id}" class="icon icon-thumb-down" style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" p-id="2238">
<path style="pointer-events: none;" d="M287.189333 192L165.013333 576h259.669334L373.333333 710.186667a85.333333 85.333333 0 0 0 29.056 99.2l37.290667 27.456L640.298667 576H682.666667V192H287.189333z m-76.586666-40.746667A64 64 0 0 1 271.616 106.666667H768v554.666666h-85.653333l-187.776 244.117334a64 64 0 0 1-88.704 12.48l-54.101334-39.872a170.666667 170.666667 0 0 1-58.133333-198.378667l7.04-18.346667H164.992c-57.749333 0-98.816-56.170667-81.322667-111.210666L210.624 151.253333zM917.333333 106.666667v554.666666h-85.333333V106.666667h85.333333z" fill="#4E5969" p-id="2239"></path>
</svg>
</div>
`
})
signals.onClose()
eventSourceInstance = null
textContent = ''
}
At the same time, I'm not sure why there are so many tags when the format is set to HTML.
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too