dhruv_employee/ai_live_chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
dhruv
2026-05-17 15:30:11 +05:30
commit cae37e5af7
23 changed files with 3607 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
public/3/Chat_page.html Normal file
View File

@@ -0,0 +1,151 @@
<!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>

102
public/3/arc_reactor.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jarvis</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../style/Style.css" />
</head>
<body >
<div class="flex_parent">
<div id="arc_container">
<!-- <div id="titleBar" style="align-items: center;">
<div id="pointer" style="color: black;font-size: 20px;display: inline;">Hello</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div id="pointer" style="color: black;font-size: 30px;display: inline;">Hello</div>
</div> -->
<div class="arc_reactor">
<div class="case_container">
<div class="e7">
<div class="semi_arc_3 e5_1">
<div class="semi_arc_3 e5_2">
<div class="semi_arc_3 e5_3">
<div class="semi_arc_3 e5_4" id="mainCircle"></div>
</div>
</div>
</div>
<div class="core2"></div>
</div>
<ul class="marks">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

89
public/3/center.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stacked Iframes with Opacity & Scrollbar</title>
<style>
/* common full-screen container */
.full-screen {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
margin: 0; padding: 0;
overflow: hidden;
}
/* background layer (fills entire screen again) */
#layer1 {
z-index: 1;
}
/* top layer: semi-transparent + scrollable */
#layer2 {
z-index: 2;
opacity: 0.7;
/* overflow-y: scroll; */
}
/* restore: every full-screen iframe fills its parent */
.full-screen iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
/* stack two 100vh-high iframes inside layer2 */
#layer2 iframe {
height: 100vh; /* overrides the 100% so each iframe is full viewport */
}
/* custom cyan scrollbar for WebKit */
#layer2::-webkit-scrollbar {
width: 12px;
}
#layer2::-webkit-scrollbar-thumb {
background: cyan;
border-radius: 6px;
}
/* custom scrollbar for Firefox */
#layer2 {
scrollbar-color: cyan transparent;
scrollbar-width: thin;
}
</style>
</head>
<body>
<!-- Background layer, now again truly full-screen -->
<div id="layer1" class="full-screen">
<iframe src="../3/arc_reactor.html"></iframe>
</div>
<!-- Top layer: semi-transparent, scrollable, two iframes -->
<div id="layer2" class="full-screen">
<iframe id="chat" src="../3/Chat_page.html"></iframe>
<!-- <iframe src="../3/Chat_page.html"></iframe> -->
</div>
<script>
// Listen for messages from the parent
window.addEventListener('message', (event) => {
if (event.origin !== window.location.origin) return; // Security check
const message__object = event.data;
const id_of_recipant__iframe_element = document.getElementById('chat').contentWindow;
id_of_recipant__iframe_element.postMessage(message__object, '*'); // Forward to iframe2
});
</script>
<!-- <p id="output">No message yet.</p> -->
</body>
</html>