From b3eb9fb6fa606dd0d6b07edbe6a8a7673a5510d7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 8 May 2024 15:56:52 +0530
Subject: [PATCH 1/4] fix(conversation): mobile abnormal overflows

---
 frontend/src/conversation/Conversation.tsx | 81 +++++++++++-----------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index c6632dab..eac5d7c5 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -56,7 +56,7 @@ export default function Conversation() {
         setHasScrolledToLast(entry.isIntersecting);
       });
     };
-
+ 
     const observer = new IntersectionObserver(observerCallback, {
       root: null,
       threshold: [1, 0.8],
@@ -130,45 +130,48 @@ export default function Conversation() {
   };
 
   return (
-    <div
-      onWheel={handleUserInterruption}
-      onTouchMove={handleUserInterruption}
-      className="flex w-full justify-center p-4 h-full"
-    >
-      {queries.length > 0 && !hasScrolledToLast && (
-        <button
-          onClick={scrollIntoView}
-          aria-label="scroll to bottom"
-          className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
-        >
-          <img
-            src={ArrowDown}
-            alt="arrow down"
-            className="h-4 w-4 opacity-50 md:h-5 md:w-5"
-          />
-        </button>
-      )}
+    <div className='flex flex-col gap-1 h-screen'>
+      <div
+        onWheel={handleUserInterruption}
+        onTouchMove={handleUserInterruption}
+        className="flex w-full justify-center p-4 h-[86vh] overflow-y-scroll"
+      >
+        {queries.length > 0 && !hasScrolledToLast && (
+          <button
+            onClick={scrollIntoView}
+            aria-label="scroll to bottom"
+            className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
+          >
+            <img
+              src={ArrowDown}
+              alt="arrow down"
+              className="h-4 w-4 opacity-50 md:h-5 md:w-5"
+            />
+          </button>
+        )}
 
-      {queries.length > 0 && (
-        <div className="w-full md:w-8/12">
-          {queries.map((query, index) => {
-            return (
-              <Fragment key={index}>
-                <ConversationBubble
-                  className={'mb-7 last:mb-28'}
-                  key={`${index}QUESTION`}
-                  message={query.prompt}
-                  type="QUESTION"
-                  sources={query.sources}
-                ></ConversationBubble>
-                {prepResponseView(query, index)}
-              </Fragment>
-            );
-          })}
-        </div>
-      )}
-      {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-      <div className="absolute bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-4 dark:bg-raisin-black md:fixed md:w-[65%]">
+        {queries.length > 0 && (
+          <div className="w-full md:w-8/12 first:mt-20">
+            {queries.map((query, index) => {
+              return (
+                <Fragment key={index}>
+                  <ConversationBubble
+                    className={'mb-1 md:mb-7 last:mb-28'}
+                    key={`${index}QUESTION`}
+                    message={query.prompt}
+                    type="QUESTION"
+                    sources={query.sources}
+                  ></ConversationBubble>
+                  {prepResponseView(query, index)}
+                </Fragment>
+              );
+            })}
+          </div>
+        )}
+        {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
+
+      </div>
+      <div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-4 dark:bg-raisin-black md:fixed md:w-[65%]">
         <div className="flex h-full w-full">
           <div
             id="inputbox"

From f9c985310207749785e9ea2e5fab3fe39aabab2d Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 8 May 2024 16:07:49 +0530
Subject: [PATCH 2/4] fix(conversation) word breaks

---
 frontend/src/conversation/ConversationBubble.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 7bd26f24..f7a15459 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -47,13 +47,13 @@ const ConversationBubble = forwardRef<
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
 
   let bubble;
-
+  
   if (type === 'QUESTION') {
     bubble = (
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-2 text-2xl" avatar="🧑‍💻"></Avatar>
         <div className="mr-2 ml-10 flex items-center rounded-3xl bg-purple-30 p-3.5 text-white">
-          <ReactMarkdown className="whitespace-pre-wrap break-all">
+          <ReactMarkdown className="whitespace-pre-wrap break-normal leading-normal">
             {message}
           </ReactMarkdown>
         </div>
@@ -88,7 +88,7 @@ const ConversationBubble = forwardRef<
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="whitespace-pre-wrap break-words leading-normal"
+              className="whitespace-pre-wrap break-normal leading-normal"
               remarkPlugins={[remarkGfm]}
               components={{
                 code({ node, inline, className, children, ...props }) {

From afb18a3e4d7bdf6e72cba587442c8a3c387915ec Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 8 May 2024 16:17:16 +0530
Subject: [PATCH 3/4] (conversation) makes overflow auto

---
 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 eac5d7c5..ed66a13b 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -134,7 +134,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex w-full justify-center p-4 h-[86vh] overflow-y-scroll"
+        className="flex w-full justify-center p-4 h-[86vh] overflow-y-auto"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button

From ea79494b6d3612080d1b7ec2fb9e903c182df326 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 8 May 2024 20:50:20 +0530
Subject: [PATCH 4/4] fix(conversation): overflows in sources, removed tagline
 below input

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

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index ed66a13b..f09ec08a 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -134,7 +134,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex w-full justify-center p-4 h-[86vh] overflow-y-auto"
+        className="flex w-full justify-center p-4 h-[87vh] overflow-y-auto"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -151,7 +151,7 @@ export default function Conversation() {
         )}
 
         {queries.length > 0 && (
-          <div className="w-full md:w-8/12 first:mt-20">
+          <div className="w-full md:w-8/12 mt-16">
             {queries.map((query, index) => {
               return (
                 <Fragment key={index}>
@@ -171,7 +171,7 @@ export default function Conversation() {
         {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
 
       </div>
-      <div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-4 dark:bg-raisin-black md:fixed md:w-[65%]">
+      <div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 md:w-[60%]">
         <div className="flex h-full w-full">
           <div
             id="inputbox"
@@ -211,7 +211,7 @@ export default function Conversation() {
             </div>
           )}
         </div>
-        <p className="text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
+        <p className="hidden md:inline text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
           DocsGPT uses GenAI, please review critial information using sources.
         </p>
       </div>
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index f7a15459..bce831f7 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -172,7 +172,7 @@ const ConversationBubble = forwardRef<
                     {sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
+                        className={`max-w-xs sm:max-w-sm md:max-w-md cursor-pointer rounded-[28px] py-1 px-4 ${
                           openSource === index
                             ? 'bg-[#007DFF]'
                             : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'