Merge pull request #134 from arc53/feature/more-ux

frontend/src/conversation/Conversation.tsx

@@ -44,11 +44,12 @@ export default function Conversation() {
         })}
         {messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
       </div>
-      <div className="fixed bottom-14 flex w-10/12 md:bottom-12 md:w-[50%]">
+      <div className="fixed bottom-6 flex w-10/12 flex-col items-end self-center md:w-[50%]">
+        <div className="flex w-full">
           <div
             ref={inputRef}
             contentEditable
-          className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+            className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-xl border bg-white py-2 pl-4 pr-9 leading-7 opacity-100 focus:outline-none`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -62,7 +63,7 @@ export default function Conversation() {
           {status === 'loading' ? (
             <img
               src={Spinner}
-            className="relative right-9 animate-spin cursor-pointer"
+              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end"
             ></img>
           ) : (
             <img
@@ -73,14 +74,15 @@ export default function Conversation() {
                 }
               }}
               src={Send}
-            className="relative right-9 cursor-pointer"
+              className="relative right-[35px] bottom-[15px] -mr-[21px] cursor-pointer self-end"
             ></img>
           )}
         </div>
-      <p className="fixed bottom-6 w-10/12 text-center text-xs text-gray-2000">
+        <p className="mt-3 w-10/12 self-center text-center text-xs text-gray-2000">
           This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
           questions.
         </p>
       </div>
+    </div>
   );
 }

frontend/src/conversation/ConversationBubble.tsx

@@ -35,7 +35,7 @@ const ConversationBubble = forwardRef<
         {type === 'ERROR' && (
           <img src={Alert} alt="alert" className="mr-2 inline" />
         )}
-        <p className="whitespace-pre-wrap break-all">{message}</p>
+        <p className="whitespace-pre-wrap break-words">{message}</p>
       </div>
     </div>
   );