feat: the chat input box supports multi-line input (#490)

RainyNight9 · web-flow · commit 3cfb03dd495b · 2025-05-12T16:03:49.000+08:00
* chore: chat input

* feat: the chat input box supports multi-line input

* docs: update notes

* chore: remove env record

* chore: remove debug
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -18,6 +18,7 @@ Information about release notes of Coco Server is provided here.
 - feat: supports Shift + Enter input box line feeds #472
 - feat: support for snapshot version updates #480
 - feat: history list add put away button #482
+- feat: the chat input box supports multi-line input #490
 
 ### 🐛 Bug fix
 
diff --git a/src/components/Assistant/Chat.tsx b/src/components/Assistant/Chat.tsx
@@ -190,10 +190,7 @@ const ChatAI = memo(
         setActiveChat(undefined);
         setCurChatEnd(true);
         clearChatPage && clearChatPage();
-      }, [
-        activeChat,
-        chatClose,
-      ]);
+      }, [activeChat, chatClose]);
 
       const init = useCallback(
         async (value: string) => {
@@ -242,13 +239,7 @@ const ChatAI = memo(
             chatHistory(response);
           }
         },
-        [
-          cancelChat,
-          activeChat,
-          chatClose,
-          openSessionChat,
-          chatHistory,
-        ]
+        [cancelChat, activeChat, chatClose, openSessionChat, chatHistory]
       );
 
       const deleteChat = useCallback(
@@ -331,7 +322,7 @@ const ChatAI = memo(
       return (
         <div
           data-tauri-drag-region
-          className={`h-full flex flex-col rounded-md relative`}
+          className={`flex flex-col rounded-md relative h-full overflow-hidden`}
         >
           {showChatHistory && !setIsSidebarOpen && (
             <ChatSidebar
@@ -360,6 +351,7 @@ const ChatAI = memo(
             showChatHistory={showChatHistory}
             assistantIDs={assistantIDs}
           />
+
           {isLogin ? (
             <ChatContent
               activeChat={activeChat}
diff --git a/src/components/Assistant/ChatContent.tsx b/src/components/Assistant/ChatContent.tsx
@@ -84,7 +84,7 @@ export const ChatContent = ({
   const allMessages = activeChat?.messages || [];
 
   return (
-    <div className="relative flex flex-col h-full justify-between overflow-hidden">
+    <div className="flex-1 overflow-hidden flex flex-col justify-between relative">
       <div className="flex-1 w-full overflow-x-hidden overflow-y-auto border-t border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.15)] custom-scrollbar relative">
         <Greetings />
 
@@ -112,7 +112,8 @@ export const ChatContent = ({
               _id: "current",
               _source: {
                 type: "assistant",
-                assistant_id: allMessages[allMessages.length-1]?._source?.assistant_id,
+                assistant_id:
+                  allMessages[allMessages.length - 1]?._source?.assistant_id,
                 message: "",
                 question: Question,
               },
@@ -129,6 +130,7 @@ export const ChatContent = ({
             loadingStep={loadingStep}
           />
         ) : null}
+
         {timedoutShow ? (
           <ChatMessage
             key={"timedout"}
diff --git a/src/components/Assistant/ChatSidebar.tsx b/src/components/Assistant/ChatSidebar.tsx
@@ -32,7 +32,7 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
     <div
       data-sidebar
       className={`
-        h-[calc(100%+90px)] absolute top-0 left-0 z-10 w-64 
+        h-screen absolute top-0 left-0 z-10 w-64 
         transform transition-all duration-300 ease-in-out 
         ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"}
         bg-gray-100 dark:bg-gray-800
diff --git a/src/components/Assistant/Splash.tsx b/src/components/Assistant/Splash.tsx
@@ -96,7 +96,7 @@ const Splash = () => {
 
   return (
     visibleStartPage && (
-      <div className="absolute inset-0 flex flex-col items-center px-6 pt-6 text-[#333] dark:text-white select-none">
+      <div className="absolute inset-0 flex flex-col items-center px-6 pt-6 text-[#333] dark:text-white select-none overflow-y-auto custom-scrollbar">
         <CircleX
           className="absolute top-3 right-3 size-4 text-[#999] cursor-pointer"
           onClick={() => {
diff --git a/src/components/Search/AutoResizeTextarea.tsx b/src/components/Search/AutoResizeTextarea.tsx
@@ -1,5 +1,11 @@
 import { useBoolean } from "ahooks";
-import { useRef, useImperativeHandle, forwardRef, KeyboardEvent } from "react";
+import {
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+  KeyboardEvent,
+  useEffect,
+} from "react";
 import { useTranslation } from "react-i18next";
 
 interface AutoResizeTextareaProps {
@@ -35,14 +41,22 @@ const AutoResizeTextarea = forwardRef<
     handleKeyDown?.(event);
   };
 
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      const newHeight = Math.min(textareaRef.current.scrollHeight, 15 * 16); // 15rem ≈ 15 * 16px
+      textareaRef.current.style.height = `${newHeight}px`;
+    }
+  }, [input]);
+
   return (
     <textarea
       ref={textareaRef}
       autoFocus
       autoComplete="off"
       autoCapitalize="none"
       spellCheck="false"
-      className="text-base flex-1 outline-none min-w-[200px] text-[#333] dark:text-[#d8d8d8] placeholder-text-xs placeholder-[#999] dark:placeholder-gray-500 bg-transparent"
+      className="text-base flex-1 outline-none min-w-[200px] text-[#333] dark:text-[#d8d8d8] placeholder-text-xs placeholder-[#999] dark:placeholder-gray-500 bg-transparent custom-scrollbar"
       placeholder={
         connected ? chatPlaceholder || t("search.textarea.placeholder") : ""
       }
@@ -58,7 +72,7 @@ const AutoResizeTextarea = forwardRef<
       style={{
         resize: "none", // Prevent manual resize
         overflow: "auto", // Enable scrollbars when needed
-        maxHeight: "4.5rem", // Limit height to 3 rows (3 * 1.5 line-height)
+        maxHeight: "15rem", // Limit height to 10 rows (10 * 1.5 line-height)
         lineHeight: "1.5rem", // Line height to match row height
       }}
     />
diff --git a/src/components/Search/InputBox.tsx b/src/components/Search/InputBox.tsx
@@ -434,7 +434,7 @@ export default function ChatInput({
 
       <div
         data-tauri-drag-region
-        className="flex justify-between items-center py-2"
+        className="flex justify-between items-center pt-2"
       >
         {isChatMode ? (
           <div className="flex gap-2 text-[12px] leading-3 text-[#333] dark:text-[#d8d8d8]">
diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx
@@ -337,7 +337,7 @@ function SearchChat({
     <div
       data-tauri-drag-region={isTauri}
       className={clsx(
-        "m-auto overflow-hidden relative bg-no-repeat bg-cover bg-center bg-white dark:bg-black",
+        "m-auto overflow-hidden relative bg-no-repeat bg-cover bg-center bg-white dark:bg-black flex flex-col",
         [
           isTransitioned
             ? "bg-chat_bg_light dark:bg-chat_bg_dark"
@@ -353,12 +353,31 @@ function SearchChat({
       )}
       style={{ opacity: blurred ? opacity / 100 : 1 }}
     >
+      {isTransitioned && (
+        <div
+          data-tauri-drag-region={isTauri}
+          className="flex-1 w-full overflow-hidden"
+        >
+          <Suspense fallback={<LoadingFallback />}>
+            <ChatAI
+              ref={chatAIRef}
+              key="ChatAI"
+              changeInput={setInput}
+              isSearchActive={isSearchActive}
+              isDeepThinkActive={isDeepThinkActive}
+              isMCPActive={isMCPActive}
+              getFileUrl={getFileUrl}
+              showChatHistory={showChatHistory}
+              assistantIDs={assistantIDs}
+            />
+          </Suspense>
+        </div>
+      )}
+
       <div
         data-tauri-drag-region={isTauri}
-        className={`p-2 absolute w-full flex justify-center transition-all duration-500 ${
-          isTransitioned
-            ? "top-[calc(100%-82px)] h-[82px] border-t"
-            : "top-0 h-[82px] border-b"
+        className={`p-2 w-full flex justify-center transition-all duration-500 min-h-[82px] ${
+          isTransitioned ? "border-t" : "border-b"
         } border-[#E6E6E6] dark:border-[#272626]`}
       >
         <InputBox
@@ -395,48 +414,25 @@ function SearchChat({
         />
       </div>
 
-      <div
-        data-tauri-drag-region={isTauri}
-        className={`absolute w-full transition-opacity duration-500 ${
-          isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
-        } bottom-0 h-[calc(100%-82px)] `}
-      >
-        <Suspense fallback={<LoadingFallback />}>
-          <Search
-            key="Search"
-            isTauri={isTauri}
-            input={input}
-            isChatMode={isChatMode}
-            changeInput={setInput}
-            hideCoco={hideCoco}
-            openSetting={openSetting}
-            setWindowAlwaysOnTop={setWindowAlwaysOnTop}
-          />
-        </Suspense>
-      </div>
-
-      <div
-        data-tauri-drag-region={isTauri}
-        className={`absolute w-full transition-all duration-500 select-auto ${
-          isTransitioned
-            ? "top-0 opacity-100 pointer-events-auto"
-            : "-top-[506px] opacity-0 pointer-events-none"
-        } h-[calc(100%-90px)]`}
-      >
-        <Suspense fallback={<LoadingFallback />}>
-          <ChatAI
-            ref={chatAIRef}
-            key="ChatAI"
-            changeInput={setInput}
-            isSearchActive={isSearchActive}
-            isDeepThinkActive={isDeepThinkActive}
-            isMCPActive={isMCPActive}
-            getFileUrl={getFileUrl}
-            showChatHistory={showChatHistory}
-            assistantIDs={assistantIDs}
-          />
-        </Suspense>
-      </div>
+      {!isTransitioned && (
+        <div
+          data-tauri-drag-region={isTauri}
+          className="flex-1 overflow-auto w-full"
+        >
+          <Suspense fallback={<LoadingFallback />}>
+            <Search
+              key="Search"
+              isTauri={isTauri}
+              input={input}
+              isChatMode={isChatMode}
+              changeInput={setInput}
+              hideCoco={hideCoco}
+              openSetting={openSetting}
+              setWindowAlwaysOnTop={setWindowAlwaysOnTop}
+            />
+          </Suspense>
+        </div>
+      )}
 
       <UpdateApp checkUpdate={checkUpdate} relaunchApp={relaunchApp} />
     </div>
diff --git a/src/hooks/useWebSocket.ts b/src/hooks/useWebSocket.ts
@@ -38,7 +38,7 @@ export default function useWebSocket({
 
   // web
   const { readyState, connect, disconnect } = useWebSocketAHook(
-    // "wss://coco.infini.cloud/ws",
+    //"wss://coco.infini.cloud/ws",
     //"ws://localhost:9000/ws",
     isTauri ? "" : endpoint_websocket,
     {

Original file line number	Diff line number	Diff line change
`@@ -434,7 +434,7 @@ export default function ChatInput({`
`434`	`434`
`435`	`435`	`<div`
`436`	`436`	`data-tauri-drag-region`
`437`		`- className="flex justify-between items-center py-2"`
	`437`	`+ className="flex justify-between items-center pt-2"`
`438`	`438`	`>`
`439`	`439`	`{isChatMode ? (`
`440`	`440`	`<div className="flex gap-2 text-[12px] leading-3 text-[#333] dark:text-[#d8d8d8]">`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default function useWebSocket({`
`38`	`38`
`39`	`39`	`// web`
`40`	`40`	`const { readyState, connect, disconnect } = useWebSocketAHook(`
`41`		`- // "wss://coco.infini.cloud/ws",`
	`41`	`+ //"wss://coco.infini.cloud/ws",`
`42`	`42`	`//"ws://localhost:9000/ws",`
`43`	`43`	`isTauri ? "" : endpoint_websocket,`
`44`	`44`	`{`