152 lines
3.8 KiB
HTML
152 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Processed Content</title>
|
|
<style>
|
|
.chat-block {
|
|
background-color: #f9f9f9;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin: 20px auto;
|
|
width: 80%;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.chat-block time {
|
|
font-size: 12px;
|
|
color: #555;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
.question-text {
|
|
background-color: lightgrey;
|
|
color: black;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.normal-text {
|
|
background-color: #a1a0a0;
|
|
color: black;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.code-block {
|
|
background-color: black;
|
|
color: white;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
border-radius: 5px;
|
|
padding: 24px 8px 8px 8px;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
}
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 8px;
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: #01e0ce;
|
|
color: rgb(0, 0, 0);
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main"></div>
|
|
|
|
<script>
|
|
const inputStrings = [
|
|
`
|
|
<date_time>07/14/2025, 06:43:02 PM</date_time>
|
|
<think>This is my first thought block for the first message.</think>
|
|
Here's a regular message.
|
|
\`\`\`js
|
|
console.log('This is code block 1');
|
|
\`\`\``,
|
|
|
|
|
|
`
|
|
<date_time>07/14/2025, 07:15:30 PM</date_time>
|
|
<think>This is a second thought block for the second message.</think>
|
|
This is another message body.
|
|
\`\`\`python
|
|
def say_hello():
|
|
print("Hello from second block")
|
|
\`\`\`
|
|
More explanation here.`,
|
|
|
|
|
|
`
|
|
<date_time>07/14/2025, 06:43:02 PM</date_time>
|
|
<think>This is my first thought block for the first message.</think>
|
|
Here's a regular message.
|
|
\`\`\`js
|
|
console.log('This is code block 1');
|
|
\`\`\``,
|
|
|
|
|
|
|
|
`
|
|
<date_time>07/14/2025, 06:43:02 PM</date_time>
|
|
<think>This is my first thought block for the first message.</think>
|
|
Here's a regular message.
|
|
\`\`\`js
|
|
console.log('This is code block 1');
|
|
\`\`\`
|
|
hello`,
|
|
];
|
|
|
|
function processContent(str) {
|
|
const timestampMatch = str.match(/<date_time>([\s\S]*?)<\/date_time>/);
|
|
const timestamp = timestampMatch ? timestampMatch[1] : 'Unknown time';
|
|
|
|
let html = `<div class="chat-block"><time>${timestamp}</time>`;
|
|
|
|
// <think> block
|
|
const thinkMatch = str.match(/<think>([\s\S]*?)<\/think>/);
|
|
if (thinkMatch) {
|
|
html += `<details style="margin-bottom: 10px;"><summary>Think</summary><div>${thinkMatch[1]}</div></details>`;
|
|
str = str.replace(/<think>[\s\S]*?<\/think>/, '');
|
|
}
|
|
|
|
// Remove <date_time> tag from remaining string
|
|
str = str.replace(/<date_time>[\s\S]*?<\/date_time>/, '');
|
|
|
|
// Split into code and text
|
|
str.split(/\`\`\`/).forEach((part, i) => {
|
|
if (i % 2 === 0) {
|
|
if (part.trim()) html += `<div class="normal-text">${part}</div>`;
|
|
} else {
|
|
html += `
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="navigator.clipboard.writeText(this.nextElementSibling.textContent).then(() => this.textContent='Copied!').catch(() => this.textContent='Error'); setTimeout(() => this.textContent='Copy', 1500)">Copy</button>
|
|
<code>${part}</code>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
|
|
// Render all messages
|
|
const container = document.getElementById('main');
|
|
inputStrings.forEach(str => {
|
|
container.innerHTML += processContent(str);
|
|
});
|
|
</script>
|
|
|
|
<div >
|
|
<!-- input -->
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|