diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index 7cd75f01..ec5de0c7 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -546,7 +546,7 @@ const textarea = document.getElementById('chat-input'); const scrollTop = textarea.scrollTop; textarea.style.height = '0'; - const scrollHeight = textarea.scrollHeight; + const scrollHeight = textarea.scrollHeight + 8; // +8 accounts for padding textarea.style.height = Math.min(scrollHeight, 200) + 'px'; textarea.scrollTop = scrollTop; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; @@ -676,6 +676,7 @@ let mediaRecorder; async function speechToText() { const speakButtonImg = document.getElementById('speak-button-img'); + const stopRecordButtonImg = document.getElementById('stop-record-button-img'); const chatInput = document.getElementById('chat-input'); const hostURL = await window.hostURLAPI.getURL(); @@ -716,8 +717,8 @@ }); mediaRecorder.start(); - speakButtonImg.src = './assets/icons/stop-solid.svg'; - speakButtonImg.alt = 'Stop Transcription'; + speakButtonImg.style.display = 'none'; + stopRecordButtonImg.style.display = 'initial'; }; // Toggle recording @@ -732,8 +733,8 @@ mediaRecorder.stop(); mediaRecorder.stream.getTracks().forEach(track => track.stop()); mediaRecorder = null; - speakButtonImg.src = './assets/icons/microphone-solid.svg'; - speakButtonImg.alt = 'Transcribe'; + speakButtonImg.style.display = 'initial'; + stopRecordButtonImg.style.display = 'none'; } } @@ -764,12 +765,31 @@ @@ -894,7 +914,7 @@ } #input-row { display: grid; - grid-template-columns: auto 32px 32px; + grid-template-columns: 32px auto 32px 40px; grid-column-gap: 10px; grid-row-gap: 10px; background: #f9fafc @@ -905,12 +925,13 @@ #chat-input { font-family: roboto, karma, segoe ui, sans-serif; font-size: small; - height: 54px; + height: 36px; + border-radius: 16px; resize: none; overflow-y: hidden; max-height: 200px; box-sizing: border-box; - padding: 15px; + padding: 7px 0 0 12px; line-height: 1.5em; margin: 0; } @@ -919,15 +940,19 @@ } .input-row-button { background: var(--background-color); - border: 1px solid var(--main-text-color); - box-shadow: 0 0 11px #aaa; - border-radius: 5px; + border: none; + box-shadow: none; + border-radius: 50%; font-size: 14px; font-weight: 300; padding: 0; line-height: 1.5em; cursor: pointer; transition: background 0.3s ease-in-out; + width: 40px; + height: 40px; + margin-top: -2px; + margin-left: -5px; } .input-row-button:hover { background: var(--primary-hover); @@ -937,6 +962,17 @@ } .input-row-button-img { width: 24px; + height: 24px; + } + #send-button { + padding-top: 0; + padding-right: 3px; + } + #send-button-img { + width: 28px; + height: 28px; + background: var(--primary-hover); + border-radius: 50%; } .option-enabled { @@ -1106,7 +1142,7 @@ color: #f8fafc; border-radius: 2px; box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4); - font-size small; + font-size: small; padding: 2px 4px; } } @@ -1126,6 +1162,9 @@ img.text-to-image { max-width: 100%; } + #clear-chat-button { + margin-left: 0; + } } @media only screen and (min-width: 600px) { body {