Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store as speechStore } from "/components/chat/speech/speech-store.js"; | |
| import { store as attachmentsStore } from "/components/chat/attachments/attachmentsStore.js"; | |
| import { store as fullScreenStore } from "/components/modals/full-screen-input/full-screen-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="input-row"> | |
| <!-- Attachment icon with tooltip --> | |
| <div class="attachment-wrapper" x-data="{ showTooltip: false }"> | |
| <label for="file-input" class="attachment-icon" @mouseover="showTooltip = true" @mouseleave="showTooltip = false"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" /> | |
| </svg> | |
| </label> | |
| <input type="file" id="file-input" accept="*" multiple style="display: none" @change="$store.chatAttachments.handleFileUpload($event)"> | |
| <div x-show="showTooltip" class="tooltip">Add attachments to the message</div> | |
| </div> | |
| <!-- Container for textarea and expand button --> | |
| <div id="chat-input-container" style="position: relative;"> | |
| <textarea id="chat-input" placeholder="Type your message here..." rows="1" | |
| + @keydown.enter="if (!$event.shiftKey && !$event.isComposing && $event.keyCode !== 229) { $event.preventDefault(); $store.chatInput.sendMessage(); }" | |
| @input="$store.chatInput.adjustTextareaHeight()"></textarea> | |
| <button id="expand-button" @click="$store.fullScreenInputModal.openModal()" aria-label="Expand input"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div id="chat-buttons-wrapper"> | |
| <!-- Send button --> | |
| <button class="chat-button" id="send-button" aria-label="Send message" | |
| @click="$store.chatInput.sendMessage()"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> | |
| <path d="M25 20 L75 50 L25 80" fill="none" stroke="currentColor" stroke-width="15"></path> | |
| </svg> | |
| </button> | |
| <!-- Microphone button --> | |
| <button class="chat-button mic-inactive" id="microphone-button" aria-label="Start/Stop recording" | |
| @click="$store.speech.handleMicrophoneClick()" x-effect="$store.speech.updateMicrophoneButtonUI()"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18" fill="currentColor"> | |
| <path d="m8,12c1.66,0,3-1.34,3-3V3c0-1.66-1.34-3-3-3s-3,1.34-3,3v6c0,1.66,1.34,3,3,3Zm-1,1.9c-2.7-.4-4.8-2.6-5-5.4H0c.2,3.8,3.1,6.9,7,7.5v2h2v-2c3.9-.6,6.8-3.7,7-7.5h-2c-.2,2.8-2.3,5-5,5.4h-2Z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Full Screen Input Modal --> | |
| <x-component path="modals/full-screen-input/full-screen-input.html"></x-component> | |
| <style> | |
| /* Layout rows */ | |
| .input-row { display: flex; align-items: center; gap: var(--spacing-xs); width: 100%; white-space: nowrap; } | |
| /* Attachments icon + tooltip */ | |
| .attachment-wrapper { position: relative; flex-shrink: 0; } | |
| .attachment-icon { cursor: pointer; color: var(--color-text); opacity: 0.7; transition: opacity 0.2s ease; display: flex; align-items: center; } | |
| .attachment-icon:hover { opacity: 1; } | |
| .attachment-icon:active { opacity: 0.5; } | |
| .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(0%); padding: 8px; background-color: var(--color-secondary); color: var(--color-text); border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1002; } | |
| /* Text input */ | |
| #chat-input-container { | |
| position: relative; | |
| width: 100%; | |
| } | |
| #chat-input { | |
| background-color: var(--color-input); | |
| border: 1px solid var(--color-border); | |
| border-radius: 8px; | |
| color: var(--color-text); | |
| flex-grow: 1; | |
| font-family: "Roboto Mono", monospace; | |
| font-optical-sizing: auto; | |
| -webkit-font-optical-sizing: auto; | |
| font-size: 0.9rem; | |
| max-height: 7rem; | |
| min-height: 3.05rem; | |
| width: 100%; | |
| padding: 0.48rem 40px var(--spacing-sm) var(--spacing-sm); | |
| margin-right: var(--spacing-xs); | |
| overflow-y: auto; | |
| scroll-behavior: smooth; | |
| resize: none; | |
| align-content: start; | |
| background-clip: border-box; | |
| border: 6px solid transparent; | |
| outline: 1px solid var(--color-border); | |
| transition: all 0.3s ease; | |
| -webkit-transition: all 0.3s ease; | |
| } | |
| #chat-input::-webkit-scrollbar { width: 6px; height: 6px; } | |
| #chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; } | |
| #chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } | |
| #chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); } | |
| #chat-input:focus { outline: 0.05rem solid rgba(155,155,155,0.5); font-size: 0.955rem; padding-top: 0.45rem; background-color: var(--color-input-focus); } | |
| #chat-input::placeholder { color: var(--color-text-muted); opacity: 0.7; } | |
| #expand-button { position: absolute; top: 12px; right: 10px; background: transparent; border: none; cursor: pointer; font-size: 1.2rem; color: var(--color-text); opacity: 0.4; transition: opacity 0.2s; } | |
| #expand-button:hover { opacity: 0.7; } | |
| #expand-button:active { opacity: 1; } | |
| #expand-button svg { width: 1.3rem; height: 1.3rem; } | |
| /* Chat buttons (Send/Mic) */ | |
| #chat-buttons-wrapper { gap: var(--spacing-xs); padding-left: var(--spacing-xs); line-height: 0.5rem; display: -webkit-flex; display: flex; } | |
| .chat-button { border: none; border-radius: 50%; color: var(--color-background); cursor: pointer; font-size: var(--font-size-normal); height: 2.525rem; width: 2.525rem; margin: 0 0.18rem 0 0 var(--spacing-xs); display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; min-width: 2.525rem; -webkit-transition: all var(--transition-speed), transform 0.1s ease-in-out; transition: all var(--transition-speed), transform 0.1s ease-in-out; } | |
| #send-button { background-color: #4248f1; } | |
| #send-button:hover { -webkit-transform: scale(1.05); transform: scale(1.05); transform-origin: center; background-color: #353bc5; } | |
| #send-button:active { -webkit-transform: scale(1); transform: scale(1); transform-origin: center; background-color: #2b309c; } | |
| .chat-button svg { width: 1.5rem; height: 1.5rem; } | |
| /* Microphone button */ | |
| .chat-button.mic-inactive svg { /* Add specific styles if needed */ } | |
| /* Tooltip */ | |
| .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(0%); padding: 8px; background-color: var(--color-secondary); color: var(--color-text); border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1002; } | |
| /* Responsive tweaks */ | |
| @media (max-width: 640px) { | |
| #chat-input { min-height: 5.3rem; align-content: start; } | |
| #chat-buttons-wrapper { display: flex; gap: var(--spacing-xs); padding: 0 0 0 var(--spacing-sm) ; width: 3.5rem; flex-wrap: wrap; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } | |
| } | |
| @media (min-width: 768px) { #chat-buttons-wrapper { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } } | |
| </style> | |
| </body> | |
| </html> | |