custom scrollbar and text input became text area for chat

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -0,0 +1,57 @@
+import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { classNames } from "../../../utils";
+import { useRef } from "react";
+
+export default function ChatInput({
+	lockChat,
+	chatValue,
+	sendMessage,
+	setChatValue,
+}: {
+	lockChat:boolean;
+	chatValue:string;
+	sendMessage:Function;
+	setChatValue:Function;
+}) {
+    const inputRef = useRef(null);
+	return (
+		<>
+			<textarea
+				onKeyDown={(event) => {
+					if (event.key === "Enter" && !lockChat && !event.shiftKey) {
+						sendMessage();
+					}
+				}}
+				ref={inputRef}
+				disabled={lockChat}
+				style={{ minHeight: "50px", maxHeight: "100px", resize: "none" }}
+				value={lockChat ? "Thinking..." : chatValue}
+				onChange={(e) => {
+					inputRef.current.style.height = "auto";
+					inputRef.current.style.height = inputRef.current.scrollHeight + "px";
+					setChatValue(e.target.value);
+				}}
+				className={classNames(
+					lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700",
+					"form-input block w-full  custom-scroll rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
+				)}
+				placeholder={"Send a message..."}
+			/>
+			<div className="absolute inset-y-0 right-0 flex items-center pr-3">
+				<button disabled={lockChat} onClick={() => sendMessage()}>
+					{lockChat ? (
+						<LockClosedIcon
+							className="h-5 w-5 text-gray-400  dark:hover:text-gray-300 animate-pulse"
+							aria-hidden="true"
+						/>
+					) : (
+						<PaperAirplaneIcon
+							className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+							aria-hidden="true"
+						/>
+					)}
+				</button>
+			</div>
+		</>
+	);
+}

src/frontend/src/modals/chatModal/index.tsx

@@ -11,6 +11,7 @@ import ChatMessage from "./chatMessage";
 import { FaEraser } from "react-icons/fa";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType, ChatType } from "../../types/chat";
+import ChatInput from "./chatInput";
 
 const _ = require("lodash");
 
@@ -69,14 +70,14 @@ export default function ChatModal({
 							newChatHistory.push({
 								isSend: !chatItem.is_bot,
 								message: chatItem.message,
-								thought:chatItem.intermediate_steps
+								thought: chatItem.intermediate_steps,
 							});
 						}
 					);
 					return newChatHistory;
 				});
 			}
-			if(data.type==='end'){
+			if (data.type === "end") {
 				addChatHistory(data.message, false, data.intermediate_steps);
 			}
 			// Do something with the data received from the WebSocket
@@ -255,41 +256,12 @@ export default function ChatModal({
 								</div>
 								<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
 									<div className="relative w-full mt-1 rounded-md shadow-sm">
-										<input
+										<ChatInput
-											onKeyDown={(event) => {
+											chatValue={chatValue}
-												if (event.key === "Enter" && !lockChat) {
+											lockChat={lockChat}
-													sendMessage();
+											sendMessage={sendMessage}
-												}
+											setChatValue={setChatValue}
-											}}
-											type="text"
-											disabled={lockChat}
-											value={lockChat ? "Thinking..." : chatValue}
-											onChange={(e) => {
-												setChatValue(e.target.value);
-											}}
-											className={classNames(
-												lockChat
-													? "bg-gray-500 text-white"
-													: "dark:bg-gray-700",
-												"form-input block w-full rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
-											)}
-											placeholder={"Send a message..."}
 										/>
-										<div className="absolute inset-y-0 right-0 flex items-center pr-3">
-											<button disabled={lockChat} onClick={() => sendMessage()}>
-												{lockChat ? (
-													<LockClosedIcon
-														className="h-5 w-5 text-gray-400  dark:hover:text-gray-300 animate-pulse"
-														aria-hidden="true"
-													/>
-												) : (
-													<PaperAirplaneIcon
-														className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-														aria-hidden="true"
-													/>
-												)}
-											</button>
-										</div>
 									</div>
 								</div>
 							</Dialog.Panel>

src/frontend/tailwind.config.js

@@ -37,9 +37,23 @@ module.exports = {
           "-webkit-text-security":"disc",
           "font-family": "text-security-disc"
 
+        },
+        '.custom-scroll':{
+          '&::-webkit-scrollbar': {
+            'width': '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            'backgroundColor': '#f1f1f1',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            'backgroundColor': '#ccc',
+            'borderRadius': '999px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            'backgroundColor': '#bbb'
         }
       }
-      )
+    })
     }),require('@tailwindcss/line-clamp')
   ],
 }