feature: fullscreen chat input (#269)

* feature: fullscreen chat input

* css fixes

webui/css/modals.css

@@ -75,7 +75,7 @@
 
 /* Modal Description */
 .modal-description {
-  padding: 0.8rem 2rem 0 2rem;
+  padding: 0.8rem 1rem 0 1rem;
   flex-grow: 1;
   transition: all 0.3s ease;
 }
@@ -114,6 +114,96 @@
   background-color: rgba(155, 155, 155, 0.7);
 }
 
+/* Full Screen Input Modal Styles */
+.full-screen-input-modal {
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    position: relative;
+    padding: 0;
+    background-color: rgb(20, 20, 20, 0.96);
+    border: 1.5px solid var(--color-border);
+}
+
+.full-screen-input-modal h2 {
+    margin: 0;
+    padding: 0;
+    font-size: 1.1rem;
+    color: var(--color-text);
+    opacity: 0.8;
+}
+
+.full-screen-input-modal .modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: 1.5rem;
+    padding: 0 0.5rem;
+    line-height: 0.8;
+}
+
+.full-screen-input-modal .btn-ok {
+  margin-right: 1rem;
+}
+
+.full-screen-input-modal .modal-content {
+    height: calc(80vh);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.full-screen-input-modal .modal-footer {
+    background: transparent;
+  max-height: 50px;
+}
+
+#full-screen-input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: transparent;
+    color: var(--color-text);
+    font-family: 'Roboto Mono', monospace;
+    font-optical-sizing: auto;
+    font-size: 0.955rem;
+    padding: 1.2rem 1rem;
+    resize: none;
+    outline: none;
+}
+
+#full-screen-input::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+#full-screen-input::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 14px;
+  border-radius: 6px;
+}
+
+#full-screen-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;
+}
+
+#full-screen-input::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+.light-mode .full-screen-input-modal {
+    background-color: rgb(220, 220, 220, 0.86);
+}
+
+.full-screen-input-modal .modal-footer {
+    padding: 1rem 0;
+    border-top: none;
+    background: transparent;
+}
+
 /* Buttons Container */
 #buttons-container {
   display: flex;
@@ -273,7 +363,6 @@ h2 {
   .btn {
     text-wrap: wrap;
     font-size: var(--font-size-small);
-    padding: 0.5rem 0.85rem;
   }
 
   .btn-upload {
@@ -285,4 +374,4 @@ h2 {
   .btn-upload > svg {
     width: 20px;
   }
-}
+}

webui/css/settings.css

@@ -214,13 +214,13 @@ nav ul li a img {
   }
 }
 
-@media (max-width: 480px) { 
+@media (max-width: 640px) { 
   nav ul {
     grid-template-columns: repeat(2, 1.2fr);
   }
 }
 
-@media (max-width: 380px) {
+@media (max-width: 480px) {
   nav ul {
     grid-template-columns: 1fr;
   }

webui/index.css

@@ -7,30 +7,30 @@
 
 :root {
   /* Dark mode */
-  --color-background-dark: #171717;
-  --color-text-dark: #e0e0e0;
-  --color-primary-dark: #86929d;
-  --color-secondary-dark: #3f3f3f;
+  --color-background-dark: #131313;
+  --color-text-dark: #d4d4d4;
+  --color-primary-dark: #737a81;
+  --color-secondary-dark: #656565;
   --color-accent-dark: #cf6679;
   --color-message-bg-dark: #2d2d2d;
   --color-message-text-dark: #e0e0e0;
-  --color-panel-dark: #1e1e1e;
+  --color-panel-dark: #171717;
   --color-border-dark: #444444a8;
-  --color-input-dark: #222;
-  --color-input-focus-dark: #1b1b1b;
+  --color-input-dark: #131313;
+  --color-input-focus-dark: #101010;
 
   /* Light mode */
-  --color-background-light: #e8e9e9;
+  --color-background-light: #dbdbdb;
   --color-text-light: #333333;
-  --color-primary-light: #324d66;
+  --color-primary-light: #384653;
   --color-secondary-light: #e8eaf6;
   --color-accent-light: #b00020;
   --color-message-bg-light: #ffffff;
   --color-message-text-light: #333333;
-  --color-panel-light: #ffffff;
+  --color-panel-light: #f0f0f0;
   --color-border-light: #e0e0e0c7;
-  --color-input-light: #f1f1f1;
-  --color-input-focus-light: #ebeced;
+  --color-input-light: #e4e4e4;
+  --color-input-focus-light: #dadada;
 
   /* Default to dark mode */
   --color-background: var(--color-background-dark);
@@ -752,6 +752,11 @@ pre {
 }
 
 /* Text input */
+#chat-input-container {
+  position: relative;
+  width: 100%;
+}
+
 #chat-input {
   background-color: var(--color-input);
   border: 1px solid var(--color-border);
@@ -763,8 +768,10 @@ pre {
   -webkit-font-optical-sizing: auto;
   font-size: 0.875rem;
   max-height: 7rem;
-  min-height: 2.8rem;
-  padding: 0.65rem var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
+  min-height: 3rem;
+  width: 100%;
+  padding: 0.5rem 40px var(--spacing-sm) var(--spacing-sm);
+  margin-right: var(--spacing-xs);
   overflow-y: auto;
   scroll-behavior: smooth;
   resize: none;
@@ -775,6 +782,36 @@ pre {
   -webkit-transition: all 0.3s ease;
 }
 
+#chat-input {
+  outline: 1px solid var(--color-border);
+}
+
+#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-input::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -798,9 +835,9 @@ pre {
 }
 
 #chat-input:focus {
-  outline: 0.05rem solid rgba(155, 155, 155, 0.3);
+  outline: 0.05rem solid rgba(155, 155, 155, 0.5);
   font-size: 0.955rem;
-  padding-top: 0.58rem;
+  padding-top: 0.5rem;
   background-color: var(--color-input-focus);
 }
 
@@ -1011,6 +1048,7 @@ pre {
   gap: 8px;
   margin-bottom: 10px;
   padding: var(--spacing-xs);
+  background-color: var(--color-border);
 }
 
 .preview-item {
@@ -1098,18 +1136,6 @@ pre {
 }
 
 /* Text input */
-#chat-input {
-  flex-grow: 1;
-  min-height: 2.7rem;
-  padding: var(--spacing-sm) var(--spacing-sm);
-  padding-top: 0.65rem;
-  margin-right: var(--spacing-xs);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  resize: none;
-  align-content: start;
-}
-
 .input-row {
   width: 100%;
   white-space: nowrap;
@@ -1164,6 +1190,7 @@ pre {
 
 #chat-buttons-wrapper {
     gap: var(--spacing-xs);
+    padding-left: var(--spacing-xs);
   }
 
 .chat-button {
@@ -1245,7 +1272,10 @@ pre {
 .preview-item {
   position: relative;
   flex-shrink: 0;
+  padding: 4px;
   animation: fadeIn 0.3s ease;
+  min-width: min-content;
+  background-color: var(--color-background);
 }
 
 .preview-item img {
@@ -1778,57 +1808,57 @@ input:checked + .slider:before {
 }
 
 .light-mode .message-default {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #1a242f;
 }
 
 .light-mode .message-agent {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #356ca3;
 }
 
 .light-mode .message-agent-response {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #188216;
 }
 
 .light-mode .message-agent-delegation {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #12685e;
 }
 
 .light-mode .message-tool {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #1c3c88;
 }
 
 .light-mode .message-code-exe {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #6c43b0;
 }
 
 .light-mode .message-info {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #3f3f3f;
 }
 
 .light-mode .message-util {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #5b5540;
 }
 
 .light-mode .message-warning {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #8f4800;
 }
 
 .light-mode .message-error {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #8f1010;
 }
 
 .light-mode .message-user {
-  background-color: #ffffff;
+  background-color: #f3f3f3;
   color: #4e4e4e;
 }
 
@@ -1950,4 +1980,4 @@ input:checked + .slider:before {
   100% {
     transform: scale(1);
   }
-}
+}

webui/index.html

@@ -304,10 +304,20 @@
                         </div>
                     </div>
 
-                    <!-- Text input -->
-                    <textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
-
+                    <!-- Container for textarea and button -->
+                    <div id="chat-input-container" style="position: relative;">
+                        <textarea id="chat-input" placeholder="Type your message here..." rows="1"></textarea>
+                        
+                        <!-- Expand button inside the textarea container -->
+                        <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">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@@ -682,6 +692,28 @@
         </template>
     </div>
 
+    <!-- Full Screen Input Modal -->
+    <div id="fullScreenInputModal" x-data="fullScreenInputModalProxy">
+        <template x-teleport="body">
+            <div x-show="isOpen" class="modal-overlay" @click.self="handleClose()" 
+                @keydown.escape.window="handleClose()" x-transition>
+                <div class="modal-container full-screen-input-modal">
+                    <div class="modal-content">
+                        <button class="modal-close" @click="handleClose()">&times;</button>
+                        <textarea id="full-screen-input" x-model="inputText" 
+                            placeholder="Type your message here..." 
+                            @keydown.ctrl.enter="handleClose()"></textarea>
+                    </div>
+                    <div class="modal-footer">
+                        <div id="buttons-container">
+                            <button class="btn btn-ok" @click="handleClose()">Done (Ctrl+Enter)</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+
 </body>
 
 </html>

webui/js/modal.js

@@ -1,3 +1,37 @@
+const fullScreenInputModalProxy = {
+    isOpen: false,
+    inputText: '',
+
+    openModal() {
+        const chatInput = document.getElementById('chat-input');
+        this.inputText = chatInput.value;
+        this.isOpen = true;
+        
+        // Focus the full screen input after a short delay to ensure the modal is rendered
+        setTimeout(() => {
+            const fullScreenInput = document.getElementById('full-screen-input');
+            fullScreenInput.focus();
+        }, 100);
+    },
+
+    handleClose() {
+        const chatInput = document.getElementById('chat-input');
+        chatInput.value = this.inputText;
+        chatInput.dispatchEvent(new Event('input')); // Trigger input event for textarea auto-resize
+        this.isOpen = false;
+    }
+};
+
+// Register the full screen input modal with Alpine as a store
+document.addEventListener('alpine:init', () => {
+    Alpine.store('fullScreenInputModal', fullScreenInputModalProxy);
+});
+
+// Also register as a component for x-data usage
+document.addEventListener('alpine:init', () => {
+    Alpine.data('fullScreenInputModalProxy', () => fullScreenInputModalProxy);
+});
+
 const genericModalProxy = {
     isOpen: false,
     isLoading: false,