| 1 | <html> |
| 2 | <head> |
| 3 | <script type="module"> |
| 4 | import { store } from "/components/chat/input/input-store.js"; |
| 5 | import { store as messageQueueStore } from "/components/chat/message-queue/message-queue-store.js"; |
| 6 | </script> |
| 7 | </head> |
| 8 | <body> |
| 9 | <div id="input-section" x-data> |
| 10 | <x-extension id="chat-input-start"></x-extension> |
| 11 | <template x-if="$store.chatInput"> |
| 12 | <div style="width: 100%; display: contents;"> |
| 13 | <!-- Message Queue section --> |
| 14 | <x-component path="chat/message-queue/message-queue.html"></x-component> |
| 15 | |
| 16 | <!-- Attachment Preview section --> |
| 17 | <div> |
| 18 | <x-component path="chat/attachments/inputPreview.html" /> |
| 19 | </div> |
| 20 | |
| 21 | <x-component path="chat/input/chat-bar-input.html"></x-component> |
| 22 | <x-component path="chat/input/bottom-actions-bar.html"></x-component> |
| 23 | </div> |
| 24 | </template> |
| 25 | <x-extension id="chat-input-end"></x-extension> |
| 26 | </div> |
| 27 | |
| 28 | |
| 29 | <style> |
| 30 | /* Input section wrapper */ |
| 31 | #input-section { |
| 32 | position: relative; |
| 33 | background-color: var(--color-panel); |
| 34 | display: -webkit-flex; |
| 35 | display: flex; |
| 36 | flex-direction: column; |
| 37 | gap: var(--spacing-xs); |
| 38 | padding: var(--spacing-xxs) var(--spacing-md) var(--spacing-sm) 0.8rem; |
| 39 | align-items: start; |
| 40 | place-items: normal; |
| 41 | flex-shrink: 0; |
| 42 | overflow: visible; |
| 43 | z-index: 1001; |
| 44 | } |
| 45 | |
| 46 | @media (max-width: 768px) { |
| 47 | #input-section { align-items: normal !important; } |
| 48 | } |
| 49 | |
| 50 | </style> |
| 51 | </body> |
| 52 | </html> |