enh: make inputbar scrollable (#1932)

* enh: make inputbar scrollable * no scrollbar
dust-tt · Oct 3, 2023 · 08a2356 · 08a2356
1 parent 6a07f79
commit 08a2356
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 40 deletions.
diff --git 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
@@ -393,7 +393,12 @@ export function AssistantInputBar({
               Ask a question
             </div>
             <div
-              className={contentEditableClasses}
+              className={classNames(
+                contentEditableClasses,
+                "scrollbar-hide",
+                "overflow-y-auto",
+                "max-h-96"
+              )}
               contentEditable={true}
               ref={inputRef}
               id={"dust-input-bar"}
@@ -442,14 +447,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 +702,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>

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git 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
@@ -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}",