From ba90045cbfe44e037daa2d6d8d316e3e864a1f44 Mon Sep 17 00:00:00 2001
From: 0xSage <n@pragmatic.vc>
Date: Fri, 13 Oct 2023 14:08:40 +0800
Subject: [PATCH] style: convo text css, better chat box

---
 .../BasicPromptAccessories/index.tsx          | 35 ++++++++++---------
 .../_components/BasicPromptInput/index.tsx    | 32 +++++++++++------
 web/app/_components/InputToolbar/index.tsx    | 15 +++++---
 web/app/_components/SendButton/index.tsx      | 10 ++----
 .../_components/SimpleTextMessage/index.tsx   |  2 +-
 5 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/web/app/_components/BasicPromptAccessories/index.tsx b/web/app/_components/BasicPromptAccessories/index.tsx
index 332b9625e..8baf25d6a 100644
--- a/web/app/_components/BasicPromptAccessories/index.tsx
+++ b/web/app/_components/BasicPromptAccessories/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import SecondaryButton from "../SecondaryButton";
+import { FaceSmileIcon } from "@heroicons/react/24/outline";
 import SendButton from "../SendButton";
 import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 
@@ -11,22 +11,23 @@ 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">
+      {/* Emoji */}
+      <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"
+          >
+            <FaceSmileIcon className="h-5 w-5" aria-hidden="true" />
+            <span className="sr-only">Attach a file</span>
+          </button>
+        </div>
+      </div>
+      {/* send buton */}
+      <div className="flex-shrink-0">
+        <SendButton />
+      </div>
     </div>
   );
 };
diff --git a/web/app/_components/BasicPromptInput/index.tsx b/web/app/_components/BasicPromptInput/index.tsx
index 7ff99d540..2dfa4e71a 100644
--- a/web/app/_components/BasicPromptInput/index.tsx
+++ b/web/app/_components/BasicPromptInput/index.tsx
@@ -45,16 +45,28 @@ const BasicPromptInput: React.FC = () => {
   };
 
   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">
+      <label htmlFor="comment" className="sr-only">
+        Message ...
+      </label>
+      <textarea
+        onKeyDown={handleKeyDown}
+        value={currentPrompt}
+        onChange={handleMessageChange}
+        rows={2}
+        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 ..."
+      />
+      {/* 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>
   );
 };
 
diff --git a/web/app/_components/InputToolbar/index.tsx b/web/app/_components/InputToolbar/index.tsx
index 6cea8f35b..7008b4ded 100644
--- a/web/app/_components/InputToolbar/index.tsx
+++ b/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,7 +34,8 @@ const InputToolbar: React.FC = () => {
 
   return (
     <Fragment>
-      <div className="flex justify-between gap-2 mr-3 my-2">
+      <div className="flex justify-center gap-2 my-5">
+        {/* TODO: take loading out of input toolbar and into response */}
         <div className="h-6 space-x-5">
           {currentConvoState?.waitingForResponse === true && (
             <div className="ml-1 my-2" key="indicator">
@@ -56,9 +58,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-80 mb-3">
+        <div className="min-w-0 flex-1 relative">
+          <BasicPromptInput />
+          <BasicPromptAccessories />
+        </div>
       </div>
     </Fragment>
   );
diff --git a/web/app/_components/SendButton/index.tsx b/web/app/_components/SendButton/index.tsx
index 58052aa14..5d9fc7147 100644
--- a/web/app/_components/SendButton/index.tsx
+++ b/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>
   );
 };
diff --git a/web/app/_components/SimpleTextMessage/index.tsx b/web/app/_components/SimpleTextMessage/index.tsx
index bb1690f2a..0d3a9185f 100644
--- a/web/app/_components/SimpleTextMessage/index.tsx
+++ b/web/app/_components/SimpleTextMessage/index.tsx
@@ -25,7 +25,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-80 ${backgroundColor} py-5`}
     >
       <Image
         className="rounded-full"