130 lines
4 KiB
JavaScript
130 lines
4 KiB
JavaScript
const messagesAreaTemplate = document.createElement('template');
|
|
messagesAreaTemplate.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%; /* Adjust as needed */
|
|
overflow-y: auto; /* Makes the area scrollable */
|
|
}
|
|
#messages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end; /* Align messages to the bottom */
|
|
min-height: 100%; /* Ensure it takes the full height */
|
|
margin: var(--margin);
|
|
}
|
|
.message {
|
|
margin-bottom: var(--margin);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.token {
|
|
display: inline; /* Tokens are inline elements */
|
|
opacity: 0; /* Start with the token invisible */
|
|
animation: fadeIn 1000ms forwards; /* Apply the fade-in animation */
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
</style>
|
|
<div id="messages"></div>
|
|
`;
|
|
|
|
|
|
class MessagesArea extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.accumulatingMessageEl = null; // No initial message container
|
|
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(messagesAreaTemplate.content.cloneNode(true));
|
|
|
|
this.messages = shadowRoot.querySelector('#messages');
|
|
}
|
|
|
|
createNewAccumulatingMessage() {
|
|
const lastMessage = this.messages.lastElementChild;
|
|
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');
|
|
|
|
if (isLastMessageFromUser) {
|
|
const header = document.createElement('h2');
|
|
header.textContent = "Bot";
|
|
this.messages.appendChild(header);
|
|
}
|
|
|
|
this.accumulatingMessageEl = document.createElement('div');
|
|
this.accumulatingMessageEl.classList.add('message', 'bot'); // Tag as 'bot' message
|
|
this.messages.appendChild(this.accumulatingMessageEl);
|
|
}
|
|
|
|
init(worker) {
|
|
this.worker = worker;
|
|
}
|
|
|
|
handleTokensDone() {
|
|
this.flushAccumulatingMessage();
|
|
}
|
|
|
|
appendUserMessage(messageText, source="You") {
|
|
console.log("appendUserMessage: "+messageText);
|
|
const header = document.createElement('h2');
|
|
header.textContent = source;
|
|
this.messages.appendChild(header);
|
|
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', 'user'); // Tag as 'user' message
|
|
messageElement.textContent = messageText;
|
|
this.messages.appendChild(messageElement);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
handleNewToken(token) {
|
|
if (!this.accumulatingMessageEl) {
|
|
this.createNewAccumulatingMessage();
|
|
}
|
|
|
|
const newTokenElement = document.createElement('span');
|
|
newTokenElement.classList.add('token');
|
|
newTokenElement.textContent = token;
|
|
this.accumulatingMessageEl.appendChild(newTokenElement);
|
|
|
|
this.scrollToBottom();
|
|
|
|
if (token === '\n') {
|
|
this.flushAccumulatingMessage();
|
|
}
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.messages.scrollTop = this.messages.scrollHeight;
|
|
}
|
|
flushAccumulatingMessage() {
|
|
if (this.accumulatingMessageEl) {
|
|
// remove all the animation spans and interpret the text as markdown.
|
|
let fullText = '';
|
|
this.accumulatingMessageEl.querySelectorAll('.token').forEach(tokenEl => {
|
|
fullText += tokenEl.textContent;
|
|
});
|
|
|
|
// Convert Markdown to HTML
|
|
let htmlText = marked.parse(fullText);
|
|
console.log("htmlText: "+htmlText);
|
|
this.accumulatingMessageEl.innerHTML = htmlText;
|
|
|
|
this.accumulatingMessageEl = null; // Clear the reference for the next message
|
|
}
|
|
//this.scrollToBottom();
|
|
}
|
|
}
|
|
|
|
customElements.define('messages-area', MessagesArea);
|