Merge pull request #942 from ManishMadan2882/main

Fix: Abnormal overflow on mobile screens and arbitrary word breaks.

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-[87vh] overflow-y-auto"
+      >
+        {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 mt-16">
+            {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 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"
@@ -208,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>

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 }) {
@@ -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]'