From 27dbcc59f526593119b4bca3a66a1c7899e5a3e1 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Thu, 14 Sep 2023 07:06:42 -0300
Subject: [PATCH] Make the chat input expand upwards (#3920)

---
 css/main.css        |  2 +-
 js/main.js          |  6 ++++++
 js/show_controls.js |  4 +++-
 modules/ui_chat.py  | 26 ++++++++++++++------------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/css/main.css b/css/main.css
index 8f3597f6..22962dce 100644
--- a/css/main.css
+++ b/css/main.css
@@ -359,7 +359,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
 #chat-input {
     padding: 0;
     padding-top: 18px;
-    background: var(--background-fill-primary);
+    background: transparent;
     border: none;
 }
 
diff --git a/js/main.js b/js/main.js
index b9bc05a7..e6a23726 100644
--- a/js/main.js
+++ b/js/main.js
@@ -332,6 +332,12 @@ for (var i = 0; i < 2; i++) {
 
 parent.insertBefore(elementToMove, parent.firstChild);
 
+//------------------------------------------------
+// Make the chat input grow upwards instead of downwards
+//------------------------------------------------
+document.getElementById('show-controls').parentNode.style.position = 'absolute';
+document.getElementById('show-controls').parentNode.style.bottom = '0px';
+
 //------------------------------------------------
 // Focus on the chat input
 //------------------------------------------------
diff --git a/js/show_controls.js b/js/show_controls.js
index 8d90aa53..89908795 100644
--- a/js/show_controls.js
+++ b/js/show_controls.js
@@ -1,4 +1,4 @@
-const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+3), #extensions");
+const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions");
 const chatParent = document.getElementById("chat").parentNode.parentNode.parentNode;
 
 function toggle_controls(value) {
@@ -9,6 +9,7 @@ function toggle_controls(value) {
 
         chatParent.classList.remove("bigchat");
         document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '20px';
+        document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '115px';
     } else {
         belowChatInput.forEach(element => {
           element.style.display = "none";
@@ -16,5 +17,6 @@ function toggle_controls(value) {
 
         chatParent.classList.add("bigchat");
         document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px';
+        document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '95px';
     }
 }
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 0639ef60..92bf748a 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -21,21 +21,23 @@ def create_ui():
     shared.gradio['history'] = gr.State({'internal': [], 'visible': []})
 
     with gr.Tab('Chat', elem_id='chat-tab'):
-        shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
-
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
+            with gr.Column():
+                shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'))
 
-            with gr.Column(scale=10):
-                shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')
-                shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
-                shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
-
-            with gr.Column(scale=1):
                 with gr.Row():
-                    shared.gradio['Stop'] = gr.Button('■', elem_id='stop', visible=False)
-                    shared.gradio['Generate'] = gr.Button('▶', elem_id='Generate', variant='primary')
+                    with gr.Column(scale=1):
+                        gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
+
+                    with gr.Column(scale=10):
+                        shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input', elem_classes=['add_scrollbar'])
+                        shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
+                        shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
+
+                    with gr.Column(scale=1):
+                        with gr.Row():
+                            shared.gradio['Stop'] = gr.Button('■', elem_id='stop', visible=False)
+                            shared.gradio['Generate'] = gr.Button('▶', elem_id='Generate', variant='primary')
 
         # Hover menu buttons
         shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')