Merge pull request #338 from janhq/fix324

style: better chatbox ui

web/app/_components/BasicPromptAccessories/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import SecondaryButton from "../SecondaryButton";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import SendButton from "../SendButton";
 import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 
@@ -11,22 +11,21 @@ const BasicPromptAccessories: React.FC = () => {
   const shouldShowAdvancedPrompt = false;
 
   return (
-    <div
-      style={{
-        backgroundColor: "#F8F8F8",
-        borderWidth: 1,
-        borderColor: "#D1D5DB",
-      }}
-      className="flex justify-between py-2 pl-3 pr-2 rounded-b-lg"
-    >
-      {shouldShowAdvancedPrompt && (
-        <SecondaryButton
-          title="Advanced"
-          onClick={() => setShowingAdvancedPrompt(true)}
-        />
-      )}
-      <div className="flex justify-end items-center space-x-1 w-full pr-3" />
-      {!shouldShowAdvancedPrompt && <SendButton />}
+    <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
+      {/* Add future accessories here, e.g upload a file */}
+      <div className="flex items-center space-x-5">
+        <div className="flex items-center">
+          {/* <button
+            type="button"
+            className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
+          >
+            <InformationCircleIcon className="h-5 w-5" aria-hidden="true" />
+          </button> */}
+        </div>
+      </div>
+      <div className="flex-shrink-0">
+        <SendButton />
+      </div>
     </div>
   );
 };

web/app/_components/BasicPromptInput/index.tsx

@@ -7,7 +7,7 @@ import useCreateConversation from "@/_hooks/useCreateConversation";
 import useInitModel from "@/_hooks/useInitModel";
 import useSendChatMessage from "@/_hooks/useSendChatMessage";
 import { useAtom, useAtomValue } from "jotai";
-import { ChangeEvent } from "react";
+import { ChangeEvent, useEffect, useRef } from "react";
 
 const BasicPromptInput: React.FC = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom);
@@ -18,9 +18,7 @@ const BasicPromptInput: React.FC = () => {
 
   const { initModel } = useInitModel();
 
-  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setCurrentPrompt(event.target.value);
-  };
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const handleKeyDown = async (
     event: React.KeyboardEvent<HTMLTextAreaElement>
@@ -44,17 +42,53 @@ const BasicPromptInput: React.FC = () => {
     }
   };
 
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [currentPrompt]);
+
+  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setCurrentPrompt(event.target.value);
+  };
+
+  // Auto adjust textarea height based on content
+  const MAX_ROWS = 30;
+
+  const adjustTextareaHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto"; // 1 row
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const maxScrollHeight =
+        parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
+        MAX_ROWS;
+      textareaRef.current.style.height = `${Math.min(
+        scrollHeight,
+        maxScrollHeight
+      )}px`;
+    }
+  };
+
   return (
-    <textarea
-      onKeyDown={handleKeyDown}
-      value={currentPrompt}
-      onChange={handleMessageChange}
-      rows={2}
-      name="comment"
-      id="comment"
-      className="overflow-hidden block w-full scroll resize-none border-0 bg-transparent py-1.5 text-gray-900 transition-height duration-200 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:text-white"
-      placeholder="Add your comment..."
-    />
+    <div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
+      <textarea
+        ref={textareaRef}
+        onKeyDown={handleKeyDown}
+        value={currentPrompt}
+        onChange={handleMessageChange}
+        name="comment"
+        id="comment"
+        className="block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+        placeholder="Message ..."
+        rows={1}
+        style={{ overflow: "auto" }}
+      />
+      {/* Spacer element to match the height of the toolbar */}
+      <div className="py-2" aria-hidden="true">
+        {/* Matches height of button in toolbar (1px border + 36px content height) */}
+        <div className="py-px">
+          <div className="h-9" />
+        </div>
+      </div>
+    </div>
   );
 };
 

web/app/_components/InputToolbar/index.tsx

@@ -6,11 +6,12 @@ import { useAtomValue } from "jotai";
 import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 import SecondaryButton from "../SecondaryButton";
 import { Fragment } from "react";
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon, FaceSmileIcon } from "@heroicons/react/24/outline";
 import useCreateConversation from "@/_hooks/useCreateConversation";
 import { activeAssistantModelAtom } from "@/_helpers/atoms/Model.atom";
 import LoadingIndicator from "../LoadingIndicator";
 import { currentConvoStateAtom } from "@/_helpers/atoms/Conversation.atom";
+import SendButton from "../SendButton";
 
 const InputToolbar: React.FC = () => {
   const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom);
@@ -33,22 +34,14 @@ const InputToolbar: React.FC = () => {
 
   return (
     <Fragment>
-      <div className="flex justify-between gap-2 mr-3 my-2">
-        <div className="h-6 space-x-5">
-          {currentConvoState?.waitingForResponse === true && (
-            <div className="ml-1 my-2" key="indicator">
-              <LoadingIndicator />
-            </div>
-          )}
-          {!currentConvoState?.waitingForResponse &&
-            currentConvoState?.error && (
-              <div className="flex flex-row justify-center">
-                <span className="mx-5 my-2 text-red-500 text-sm">
-                  {currentConvoState?.error?.toString()}
-                </span>
-              </div>
-            )}
+      {currentConvoState?.error && (
+        <div className="flex flex-row justify-center">
+          <span className="mx-5 my-2 text-red-500 text-sm">
+            {currentConvoState?.error?.toString()}
+          </span>
         </div>
+      )}
+      <div className="flex justify-center gap-2 my-3">
         {/* <SecondaryButton title="Regenerate" onClick={onRegenerateClick} /> */}
         <SecondaryButton
           onClick={onNewConversationClick}
@@ -56,9 +49,12 @@ const InputToolbar: React.FC = () => {
           icon={<PlusIcon width={16} height={16} />}
         />
       </div>
-      <div className="mx-3 mb-3 flex-none overflow-hidden shadow-sm ring-1 ring-inset ring-gray-300 rounded-lg dark:bg-gray-800">
-        <BasicPromptInput />
-        <BasicPromptAccessories />
+      {/* My text input */}
+      <div className="flex items-start space-x-4 mx-12 md:mx-32 2xl:mx-64 mb-5">
+        <div className="min-w-0 flex-1 relative">
+          <BasicPromptInput />
+          <BasicPromptAccessories />
+        </div>
       </div>
     </Fragment>
   );

web/app/_components/SendButton/index.tsx

@@ -12,10 +12,6 @@ const SendButton: React.FC = () => {
   const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false;
   const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse;
 
-  const enabledStyle = {
-    backgroundColor: "#FACA15",
-  };
-
   const disabledStyle = {
     backgroundColor: "#F3F4F6",
   };
@@ -23,11 +19,11 @@ const SendButton: React.FC = () => {
   return (
     <button
       onClick={sendChatMessage}
-      style={disabled ? disabledStyle : enabledStyle}
+      style={disabled ? disabledStyle : {}}
       type="submit"
-      className="p-2 gap-2.5 inline-flex items-center rounded-xl text-sm font-semibold shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
     >
-      <ArrowRightIcon width={16} height={16} />
+      Send
     </button>
   );
 };

web/app/_components/SimpleTextMessage/index.tsx

@@ -4,6 +4,7 @@ import { TextCode } from "../TextCode";
 import { getMessageCode } from "@/_utils/message";
 import Image from "next/image";
 import { MessageSenderType } from "@/_models/ChatMessage";
+import LoadingIndicator from "../LoadingIndicator";
 
 type Props = {
   avatarUrl: string;
@@ -13,6 +14,17 @@ type Props = {
   text?: string;
 };
 
+const renderMessageCode = (text: string) => {
+  return getMessageCode(text).map((item, i) => (
+    <div className="flex gap-1 flex-col" key={i}>
+      <p className="leading-[20px] whitespace-break-spaces text-sm font-normal dark:text-[#d1d5db]">
+        {item.text}
+      </p>
+      {item.code.trim().length > 0 && <TextCode text={item.code} />}
+    </div>
+  ));
+};
+
 const SimpleTextMessage: React.FC<Props> = ({
   senderName,
   createdAt,
@@ -25,7 +37,7 @@ const SimpleTextMessage: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex items-start gap-2 px-[148px] ${backgroundColor} py-5`}
+      className={`flex items-start gap-2 px-12 md:px-32 2xl:px-64 ${backgroundColor} py-5`}
     >
       <Image
         className="rounded-full"
@@ -43,15 +55,10 @@ const SimpleTextMessage: React.FC<Props> = ({
             {displayDate(createdAt)}
           </div>
         </div>
-        {text.includes("```") ? (
-          getMessageCode(text).map((item, i) => (
-            <div className="flex gap-1 flex-col" key={i}>
-              <p className="leading-[20px] whitespace-break-spaces text-sm font-normal dark:text-[#d1d5db]">
-                {item.text}
-              </p>
-              {item.code.trim().length > 0 && <TextCode text={item.code} />}
-            </div>
-          ))
+        {text === "" ? (
+          <LoadingIndicator />
+        ) : text.includes("```") ? (
+          renderMessageCode(text)
         ) : (
           <span className="text-sm leading-loose font-normal">{text}</span>
         )}