91 lines
3.5 KiB
JavaScript
91 lines
3.5 KiB
JavaScript
const messageInputTemplate = document.createElement('template');
|
|
messageInputTemplate.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 24px;
|
|
margin: var(--margin);
|
|
margin-bottom: 20px;
|
|
}
|
|
#messageInputField {
|
|
flex-grow: 1;
|
|
padding: 10px; /* Increased padding */
|
|
font-size: 1rem; /* Adjusted font size to match message output */
|
|
border: 1px solid lightgrey; /* Light grey border */
|
|
border-radius: 10px; /* More rounded edges */
|
|
margin-right: var(--padding);
|
|
outline: none;
|
|
}
|
|
#messageInputField:focus {
|
|
border-color: darkgrey; /* Dark grey border on focus */
|
|
}
|
|
#sendButton {
|
|
width: 44px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
border: 2px solid darkgrey;
|
|
}
|
|
</style>
|
|
<input type="text" id="messageInputField" placeholder="" focus="true" autocomplete="off">
|
|
<button id="sendButton"><span class="" height="24" width="24" data-state="closed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" class="text-white dark:text-black"><path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></button>
|
|
`;
|
|
|
|
// stop button <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-2 w-2 text-gizmo-gray-950 dark:text-gray-200" height="16" width="16"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z" stroke-width="0"></path></svg>
|
|
class MessageInput extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
shadowRoot.appendChild(messageInputTemplate.content.cloneNode(true));
|
|
|
|
this._messageInputField = shadowRoot.querySelector('#messageInputField');
|
|
this._sendButton = shadowRoot.querySelector('#sendButton');
|
|
|
|
this._messageInputField.addEventListener('keydown', this._handleKeyDown.bind(this));
|
|
this._sendButton.addEventListener('click', this._handleClick.bind(this));
|
|
}
|
|
|
|
connectedCallback() {
|
|
// Set focus to the input field when the element is added to the DOM
|
|
this._messageInputField.focus();
|
|
}
|
|
|
|
init(worker) {
|
|
this.worker = worker;
|
|
}
|
|
|
|
setMessagesArea(messagesAreaComponent) {
|
|
this.messagesAreaComponent = messagesAreaComponent;
|
|
}
|
|
|
|
handleMessageSent() {
|
|
console.log("handleMessageSent");
|
|
this._messageInputField.value = '';
|
|
this._sendButton.removeAttribute('disabled');
|
|
this._messageInputField.removeAttribute('disabled');
|
|
}
|
|
|
|
_handleKeyDown(event) {
|
|
if (event.key === 'Enter') {
|
|
this._handleNewChatMessage();
|
|
}
|
|
}
|
|
|
|
_handleClick() {
|
|
this._handleNewChatMessage();
|
|
}
|
|
|
|
_handleNewChatMessage() {
|
|
// prevent user from interacting while we're waiting
|
|
this._sendButton.setAttribute('disabled', 'disabled');
|
|
this._messageInputField.setAttribute('disabled', 'disabled');
|
|
let messageContent = this._messageInputField.value;
|
|
if (this.messagesAreaComponent) {
|
|
this.messagesAreaComponent.appendUserMessage(messageContent);
|
|
}
|
|
this.worker.postMessage({ type: 'chatMessage', message: messageContent });
|
|
}
|
|
}
|
|
customElements.define('message-input', MessageInput);
|