From 0f3af1d9d79452e837206878a671406d989883f3 Mon Sep 17 00:00:00 2001
From: Henry Fontanier <h.fontanier@gmail.com>
Date: Tue, 3 Oct 2023 18:00:15 +0200
Subject: [PATCH 1/2] enh: make inputbar scrollable

---
 .../assistant/conversation/InputBar.tsx       | 94 +++++++++++--------
 1 file changed, 56 insertions(+), 38 deletions(-)

diff --git a/front/components/assistant/conversation/InputBar.tsx b/front/components/assistant/conversation/InputBar.tsx
index ced676e5d8c3..4c21efe0abe1 100644
--- a/front/components/assistant/conversation/InputBar.tsx
+++ b/front/components/assistant/conversation/InputBar.tsx
@@ -374,7 +374,7 @@ export function AssistantInputBar({
         <div className="flex flex-1 flex-row items-center">
           <div
             className={classNames(
-              "relative flex flex-1 flex-row items-end items-stretch px-4",
+              "relative flex flex-1 flex-row items-stretch px-4",
               "border-2 border-action-300 bg-white focus-within:border-action-400",
               "rounded-xl drop-shadow-2xl transition-all duration-300",
               isAnimating
@@ -394,6 +394,7 @@ export function AssistantInputBar({
             </div>
             <div
               className={contentEditableClasses}
+              style={{ overflowY: "auto", maxHeight: "500px" }}
               contentEditable={true}
               ref={inputRef}
               id={"dust-input-bar"}
@@ -442,14 +443,24 @@ export function AssistantInputBar({
                     node.textContent?.slice(0, offset) +
                     text +
                     node.textContent?.slice(offset);
+                }
 
-                  // Move the cursor to the end of the past.
-                  const newRange = document.createRange();
-                  newRange.setStart(node, offset + text.length);
-                  newRange.setEnd(node, offset + text.length);
-                  selection.removeAllRanges();
-                  selection.addRange(newRange);
+                // Scroll to the end of the input
+                if (inputRef.current) {
+                  setTimeout(() => {
+                    const element = inputRef.current;
+                    if (element) {
+                      element.scrollTop = element.scrollHeight;
+                    }
+                  }, 0);
                 }
+
+                // Move the cursor to the end of the paste.
+                const newRange = document.createRange();
+                newRange.setStart(node, offset + text.length);
+                newRange.setEnd(node, offset + text.length);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
               }}
               onKeyDown={(e) => {
                 // We prevent the content editable from creating italics, bold and underline.
@@ -687,38 +698,45 @@ export function AssistantInputBar({
               }}
             ></div>
 
-            <div className={classNames("z-10 flex flex-row space-x-4 pr-2")}>
-              <div className="flex flex-col justify-center">
-                <AssistantPicker
-                  owner={owner}
-                  onItemClick={(c) => {
-                    // We construct the HTML for an AgentMention and inject it in the content
-                    // editable with an extra space after it.
-                    const mentionNode = getAgentMentionNode(c);
-                    const contentEditable =
-                      document.getElementById("dust-input-bar");
-                    if (contentEditable && mentionNode) {
-                      // Add mentionNode as last childe of contentEditable.
-                      contentEditable.appendChild(mentionNode);
-                      const afterTextNode = document.createTextNode(" ");
-                      contentEditable.appendChild(afterTextNode);
-                      contentEditable.focus();
-                      moveCursorToEnd(contentEditable);
-                    }
-                  }}
-                  assistants={activeAgents}
-                  showBuilderButtons={true}
-                />
+            <div
+              className={classNames(
+                "z-10 flex flex-row items-end space-x-4 pb-4 pl-2 pr-2"
+              )}
+            >
+              <div className="flex h-full flex-col justify-end">
+                <div className="flex flex-row items-center space-x-4 pr-2">
+                  <AssistantPicker
+                    owner={owner}
+                    onItemClick={(c) => {
+                      // We construct the HTML for an AgentMention and inject it in the content
+                      // editable with an extra space after it.
+                      const mentionNode = getAgentMentionNode(c);
+                      const contentEditable =
+                        document.getElementById("dust-input-bar");
+                      if (contentEditable && mentionNode) {
+                        // Add mentionNode as last childe of contentEditable.
+                        contentEditable.appendChild(mentionNode);
+                        const afterTextNode = document.createTextNode(" ");
+                        contentEditable.appendChild(afterTextNode);
+                        contentEditable.focus();
+                        moveCursorToEnd(contentEditable);
+                      }
+                    }}
+                    assistants={activeAgents}
+                    showBuilderButtons={true}
+                  />
+
+                  <IconButton
+                    variant="primary"
+                    icon={PaperAirplaneIcon}
+                    size="md"
+                    disabled={empty}
+                    onClick={() => {
+                      void handleSubmit();
+                    }}
+                  />
+                </div>
               </div>
-              <IconButton
-                variant="primary"
-                icon={PaperAirplaneIcon}
-                size="md"
-                disabled={empty}
-                onClick={() => {
-                  void handleSubmit();
-                }}
-              />
             </div>
           </div>
         </div>

From be10beb4c6879f0ccede919d9657bedf72b6905c Mon Sep 17 00:00:00 2001
From: Henry Fontanier <h.fontanier@gmail.com>
Date: Tue, 3 Oct 2023 18:31:20 +0200
Subject: [PATCH 2/2] no scrollbar

---
 front/components/assistant/conversation/InputBar.tsx | 8 ++++++--
 front/package-lock.json                              | 6 ++++++
 front/package.json                                   | 1 +
 front/tailwind.config.js                             | 2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/front/components/assistant/conversation/InputBar.tsx b/front/components/assistant/conversation/InputBar.tsx
index 4c21efe0abe1..5bb91f88d792 100644
--- a/front/components/assistant/conversation/InputBar.tsx
+++ b/front/components/assistant/conversation/InputBar.tsx
@@ -393,8 +393,12 @@ export function AssistantInputBar({
               Ask a question
             </div>
             <div
-              className={contentEditableClasses}
-              style={{ overflowY: "auto", maxHeight: "500px" }}
+              className={classNames(
+                contentEditableClasses,
+                "scrollbar-hide",
+                "overflow-y-auto",
+                "max-h-96"
+              )}
               contentEditable={true}
               ref={inputRef}
               id={"dust-input-bar"}
diff --git a/front/package-lock.json b/front/package-lock.json
index 96efb89b2587..327c9b7db419 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -65,6 +65,7 @@
         "sqlite3": "^5.1.4",
         "sse.js": "^0.6.1",
         "swr": "^2.0.2",
+        "tailwind-scrollbar-hide": "^1.1.7",
         "tailwindcss": "^3.2.4",
         "three": "^0.155.0",
         "uuid": "^9.0.0"
@@ -12178,6 +12179,11 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "license": "MIT",
diff --git a/front/package.json b/front/package.json
index 16f4fcdcd0c1..14607ae70021 100644
--- a/front/package.json
+++ b/front/package.json
@@ -73,6 +73,7 @@
     "sqlite3": "^5.1.4",
     "sse.js": "^0.6.1",
     "swr": "^2.0.2",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.2.4",
     "three": "^0.155.0",
     "uuid": "^9.0.0"
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
index f821b9e57255..ed020c356363 100644
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@@ -161,7 +161,7 @@ module.exports = {
       backgroundColor: ["dark"],
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [require("@tailwindcss/forms"), require("tailwind-scrollbar-hide")],
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",