Adjustable font size in chat input (#2692)

* adjustable prompt input text sizing * dev build --------- Co-authored-by: timothycarambat <[email protected]>
Mintplex-Labs · Nov 21, 2024 · 190a481 · 190a481
1 parent 304796e
commit 190a481
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 33 deletions.
diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml
@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['light-mode-1'] # put your current branch to create a build. Core team only.
+    branches: ['2670-feat-can-the-font-size-of-the-chat-input-box-be-increased'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -11,6 +11,7 @@ import Workspace from "@/models/workspace";
 import { useParams } from "react-router-dom";
 import paths from "@/utils/paths";
 import Appearance from "@/models/appearance";
+import useTextSize from "@/hooks/useTextSize";
 
 export default function ChatHistory({
   history = [],
@@ -26,39 +27,10 @@ export default function ChatHistory({
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const [isAtBottom, setIsAtBottom] = useState(true);
   const chatHistoryRef = useRef(null);
-  const [textSize, setTextSize] = useState("normal");
   const [isUserScrolling, setIsUserScrolling] = useState(false);
   const isStreaming = history[history.length - 1]?.animate;
   const { showScrollbar } = Appearance.getSettings();
-
-  const getTextSizeClass = (size) => {
-    switch (size) {
-      case "small":
-        return "text-[12px]";
-      case "large":
-        return "text-[18px]";
-      default:
-        return "text-[14px]";
-    }
-  };
-
-  useEffect(() => {
-    const storedTextSize = window.localStorage.getItem("anythingllm_text_size");
-    if (storedTextSize) {
-      setTextSize(getTextSizeClass(storedTextSize));
-    }
-
-    const handleTextSizeChange = (event) => {
-      const size = event.detail;
-      setTextSize(getTextSizeClass(size));
-    };
-
-    window.addEventListener("textSizeChange", handleTextSizeChange);
-
-    return () => {
-      window.removeEventListener("textSizeChange", handleTextSizeChange);
-    };
-  }, []);
+  const { textSizeClass } = useTextSize();
 
   useEffect(() => {
     if (!isUserScrolling && (isAtBottom || isStreaming)) {
@@ -204,7 +176,7 @@ export default function ChatHistory({
 
   return (
     <div
-      className={`markdown text-white/80 light:text-theme-text-primary font-light ${textSize} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${
+      className={`markdown text-white/80 light:text-theme-text-primary font-light ${textSizeClass} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${
         showScrollbar ? "show-scrollbar" : "no-scroll"
       }`}
       id="chat-history"

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -16,6 +16,7 @@ import { Tooltip } from "react-tooltip";
 import AttachmentManager from "./Attachments";
 import AttachItem from "./AttachItem";
 import { PASTE_ATTACHMENT_EVENT } from "../DnDWrapper";
+import useTextSize from "@/hooks/useTextSize";
 
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
 const MAX_EDIT_STACK_SIZE = 100;
@@ -36,6 +37,7 @@ export default function PromptInput({
   const [_, setFocused] = useState(false);
   const undoStack = useRef([]);
   const redoStack = useRef([]);
+  const { textSizeClass } = useTextSize();
 
   /**
    * To prevent too many re-renders we remotely listen for updates from the parent
@@ -269,7 +271,7 @@ export default function PromptInput({
                   adjustTextArea(e);
                 }}
                 value={promptInput}
-                className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full text-[14px] leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow"
+                className={`cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow ${textSizeClass}`}
                 placeholder={"Send a message"}
               />
               {buttonDisabled ? (

diff --git a/frontend/src/hooks/useTextSize.js b/frontend/src/hooks/useTextSize.js
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+
+export default function useTextSize() {
+  const [textSize, setTextSize] = useState("normal");
+  const [textSizeClass, setTextSizeClass] = useState("text-[14px]");
+
+  const getTextSizeClass = (size) => {
+    switch (size) {
+      case "small":
+        return "text-[12px]";
+      case "large":
+        return "text-[18px]";
+      default:
+        return "text-[14px]";
+    }
+  };
+
+  useEffect(() => {
+    const storedTextSize = window.localStorage.getItem("anythingllm_text_size");
+    if (storedTextSize) {
+      setTextSize(storedTextSize);
+      setTextSizeClass(getTextSizeClass(storedTextSize));
+    }
+
+    const handleTextSizeChange = (event) => {
+      const size = event.detail;
+      setTextSize(size);
+      setTextSizeClass(getTextSizeClass(size));
+    };
+
+    window.addEventListener("textSizeChange", handleTextSizeChange);
+    return () => {
+      window.removeEventListener("textSizeChange", handleTextSizeChange);
+    };
+  }, []);
+
+  return { textSize, textSizeClass };
+}