Update static/index.html
Browse files- static/index.html +20 -7
static/index.html
CHANGED
|
@@ -1,5 +1,4 @@
|
|
| 1 |
|
| 2 |
-
<!DOCTYPE html>
|
| 3 |
<html lang="en" dir="ltr">
|
| 4 |
<head>
|
| 5 |
<meta charset="utf-8">
|
|
@@ -85,6 +84,7 @@
|
|
| 85 |
justify-content: center;
|
| 86 |
color: var(--text-color);
|
| 87 |
position: relative;
|
|
|
|
| 88 |
}
|
| 89 |
.chat-container .chat.outgoing {
|
| 90 |
background: var(--outgoing-chat-bg);
|
|
@@ -100,6 +100,13 @@
|
|
| 100 |
width: 100%;
|
| 101 |
align-items: flex-start;
|
| 102 |
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
}
|
| 104 |
span.material-symbols-rounded {
|
| 105 |
user-select: none;
|
|
@@ -354,7 +361,7 @@
|
|
| 354 |
regenerateIcon.classList.add("material-symbols-rounded");
|
| 355 |
regenerateIcon.textContent = "refresh";
|
| 356 |
regenerateIcon.addEventListener("click", () => regenerateResponse(chatElement, userMessage));
|
| 357 |
-
chatElement.querySelector(".
|
| 358 |
|
| 359 |
}).catch(() => {
|
| 360 |
chatElement.querySelector(".typing-animation").remove();
|
|
@@ -372,7 +379,12 @@
|
|
| 372 |
};
|
| 373 |
|
| 374 |
const copyMessage = (element) => {
|
| 375 |
-
navigator.clipboard.writeText(element.innerText)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 376 |
};
|
| 377 |
|
| 378 |
const createChatElement = (message, className) => {
|
|
@@ -385,8 +397,10 @@
|
|
| 385 |
<img src="${className === "outgoing" ? "img/user.jpg" : "img/chatbot.jpg"}" alt="">
|
| 386 |
<p>${message}</p>
|
| 387 |
</div>
|
| 388 |
-
<
|
| 389 |
-
|
|
|
|
|
|
|
| 390 |
</div>`;
|
| 391 |
chatElement.innerHTML = html;
|
| 392 |
|
|
@@ -400,7 +414,7 @@
|
|
| 400 |
}
|
| 401 |
|
| 402 |
const copyIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(2)");
|
| 403 |
-
copyIcon.addEventListener("click", () => copyMessage(
|
| 404 |
|
| 405 |
return chatElement;
|
| 406 |
};
|
|
@@ -440,4 +454,3 @@
|
|
| 440 |
</script>
|
| 441 |
</body>
|
| 442 |
</html>
|
| 443 |
-
|
|
|
|
| 1 |
|
|
|
|
| 2 |
<html lang="en" dir="ltr">
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
|
|
|
| 84 |
justify-content: center;
|
| 85 |
color: var(--text-color);
|
| 86 |
position: relative;
|
| 87 |
+
flex-direction: column;
|
| 88 |
}
|
| 89 |
.chat-container .chat.outgoing {
|
| 90 |
background: var(--outgoing-chat-bg);
|
|
|
|
| 100 |
width: 100%;
|
| 101 |
align-items: flex-start;
|
| 102 |
justify-content: space-between;
|
| 103 |
+
flex-direction: column;
|
| 104 |
+
}
|
| 105 |
+
.chat .chat-content .icon-container {
|
| 106 |
+
display: flex;
|
| 107 |
+
gap: 10px;
|
| 108 |
+
justify-content: flex-end;
|
| 109 |
+
margin-top: 10px;
|
| 110 |
}
|
| 111 |
span.material-symbols-rounded {
|
| 112 |
user-select: none;
|
|
|
|
| 361 |
regenerateIcon.classList.add("material-symbols-rounded");
|
| 362 |
regenerateIcon.textContent = "refresh";
|
| 363 |
regenerateIcon.addEventListener("click", () => regenerateResponse(chatElement, userMessage));
|
| 364 |
+
chatElement.querySelector(".icon-container").appendChild(regenerateIcon);
|
| 365 |
|
| 366 |
}).catch(() => {
|
| 367 |
chatElement.querySelector(".typing-animation").remove();
|
|
|
|
| 379 |
};
|
| 380 |
|
| 381 |
const copyMessage = (element) => {
|
| 382 |
+
navigator.clipboard.writeText(element.innerText).then(() => {
|
| 383 |
+
element.textContent = "Copied";
|
| 384 |
+
setTimeout(() => {
|
| 385 |
+
element.textContent = "content_copy";
|
| 386 |
+
}, 1000);
|
| 387 |
+
});
|
| 388 |
};
|
| 389 |
|
| 390 |
const createChatElement = (message, className) => {
|
|
|
|
| 397 |
<img src="${className === "outgoing" ? "img/user.jpg" : "img/chatbot.jpg"}" alt="">
|
| 398 |
<p>${message}</p>
|
| 399 |
</div>
|
| 400 |
+
<div class="icon-container">
|
| 401 |
+
<span class="material-symbols-rounded">content_copy</span>
|
| 402 |
+
${className === "outgoing" ? '<span class="material-symbols-rounded">edit</span>' : ''}
|
| 403 |
+
</div>
|
| 404 |
</div>`;
|
| 405 |
chatElement.innerHTML = html;
|
| 406 |
|
|
|
|
| 414 |
}
|
| 415 |
|
| 416 |
const copyIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(2)");
|
| 417 |
+
copyIcon.addEventListener("click", () => copyMessage(copyIcon));
|
| 418 |
|
| 419 |
return chatElement;
|
| 420 |
};
|
|
|
|
| 454 |
</script>
|
| 455 |
</body>
|
| 456 |
</html>
|
|
|