style: convo text css, better chat box

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"
+    <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"
           >
-      {shouldShowAdvancedPrompt && (
-        <SecondaryButton
-          title="Advanced"
-          onClick={() => setShowingAdvancedPrompt(true)}
-        />
-      )}
-      <div className="flex justify-end items-center space-x-1 w-full pr-3" />
-      {!shouldShowAdvancedPrompt && <SendButton />}
+            <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>
   );
 };

web/app/_components/BasicPromptInput/index.tsx

@@ -45,6 +45,10 @@ const BasicPromptInput: React.FC = () => {
   };
 
   return (
+    <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}
@@ -52,9 +56,17 @@ const BasicPromptInput: React.FC = () => {
         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..."
+        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>
   );
 };
 

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,10 +58,13 @@ 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">
+      {/* 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>
   );
 };

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

@@ -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"