From df9472d04cb99e2dbaab3d19384d8cd2e7a06c97 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 26 Feb 2023 08:49:53 +0530
Subject: [PATCH 1/3] increases line height to center the text in input

---
 frontend/src/conversation/Conversation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 3dc49f3..9a30c4a 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -48,7 +48,7 @@ export default function Conversation() {
         <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 p-2 pr-9 leading-7 opacity-100 focus:border-2 focus:outline-none`}
           onKeyDown={(e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();

From 2348848c18b7e88b9aa77388ebf1eeeed9b2d4cc Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 26 Feb 2023 17:19:35 +0530
Subject: [PATCH 2/3] this fixes 5 from nick's list

---
 frontend/src/conversation/Conversation.tsx | 70 +++++++++++-----------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 9a30c4a..89ce3b9 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -44,43 +44,45 @@ 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
-          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 leading-7 opacity-100 focus:border-2 focus:outline-none`}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              if (inputRef.current?.textContent && status !== 'loading') {
-                handleQuestion(inputRef.current.textContent);
-                inputRef.current.textContent = '';
-              }
-            }
-          }}
-        ></div>
-        {status === 'loading' ? (
-          <img
-            src={Spinner}
-            className="relative right-9 animate-spin cursor-pointer"
-          ></img>
-        ) : (
-          <img
-            onClick={() => {
-              if (inputRef.current?.textContent) {
-                handleQuestion(inputRef.current.textContent);
-                inputRef.current.textContent = '';
+      <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 leading-7 opacity-100 focus:outline-none`}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (inputRef.current?.textContent && status !== 'loading') {
+                  handleQuestion(inputRef.current.textContent);
+                  inputRef.current.textContent = '';
+                }
               }
             }}
-            src={Send}
-            className="relative right-9 cursor-pointer"
-          ></img>
-        )}
+          ></div>
+          {status === 'loading' ? (
+            <img
+              src={Spinner}
+              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end"
+            ></img>
+          ) : (
+            <img
+              onClick={() => {
+                if (inputRef.current?.textContent) {
+                  handleQuestion(inputRef.current.textContent);
+                  inputRef.current.textContent = '';
+                }
+              }}
+              src={Send}
+              className="relative right-[35px] bottom-[15px] -mr-[21px] cursor-pointer self-end"
+            ></img>
+          )}
+        </div>
+        <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>
-      <p className="fixed bottom-6 w-10/12 text-center text-xs text-gray-2000">
-        This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
-        questions.
-      </p>
     </div>
   );
 }

From b4a4007f6640e11d49ce0761f2753df50ee93fc1 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 26 Feb 2023 20:04:55 +0530
Subject: [PATCH 3/3] word wrap fix

---
 frontend/src/conversation/Conversation.tsx       | 2 +-
 frontend/src/conversation/ConversationBubble.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 89ce3b9..2102ec2 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -49,7 +49,7 @@ export default function Conversation() {
           <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 leading-7 opacity-100 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();
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 9a1fd43..1573a92 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/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>
   );