Merge pull request #841 from ManishMadan2882/main

Message bubble responsiveness
5 months ago · a697248b26
parent bf808811cc 6058939c00
commit a697248b26
4 changed files with 95 additions and 102 deletions
--- a/frontend/src/assets/copy.svg
+++ b/frontend/src/assets/copy.svg
@ -1,3 +1,3 @@
-<svg width="14" height="17" stroke-width="1.15" viewBox="0 0 14 17" >
+<svg width="13" height="16" stroke-width="1.15" viewBox="0 0 14 17" >
 <path d="M13.8013 5.01282L8.80645 0.191795C8.67953 0.0691399 8.50734 0.000152609 8.32774 0H6.09677C5.43801 0 4.80623 0.252586 4.34041 0.702193C3.8746 1.1518 3.6129 1.7616 3.6129 2.39744V3.48718H2.48387C1.82511 3.48718 1.19332 3.73977 0.727509 4.18937C0.261693 4.63898 0 5.24878 0 5.88462V14.6026C0 15.2384 0.261693 15.8482 0.727509 16.2978C1.19332 16.7474 1.82511 17 2.48387 17H8.80645C9.46521 17 10.097 16.7474 10.5628 16.2978C11.0286 15.8482 11.2903 15.2384 11.2903 14.6026V13.5128H11.5161C12.1749 13.5128 12.8067 13.2602 13.2725 12.8106C13.7383 12.361 14 11.7512 14 11.1154V5.44872C13.9929 5.28447 13.9219 5.12884 13.8013 5.01282ZM9.03226 2.23179L11.6877 4.79487H9.03226V2.23179ZM9.93548 14.6026C9.93548 14.8916 9.81653 15.1688 9.6048 15.3731C9.39306 15.5775 9.10589 15.6923 8.80645 15.6923H2.48387C2.18443 15.6923 1.89726 15.5775 1.68552 15.3731C1.47379 15.1688 1.35484 14.8916 1.35484 14.6026V5.88462C1.35484 5.5956 1.47379 5.31842 1.68552 5.11405C1.89726 4.90968 2.18443 4.79487 2.48387 4.79487H3.6129V11.1154C3.6129 11.7512 3.8746 12.361 4.34041 12.8106C4.80623 13.2602 5.43801 13.5128 6.09677 13.5128H9.93548V14.6026ZM11.5161 12.2051H6.09677C5.79734 12.2051 5.51016 12.0903 5.29843 11.886C5.08669 11.6816 4.96774 11.4044 4.96774 11.1154V2.39744C4.96774 2.10842 5.08669 1.83124 5.29843 1.62687C5.51016 1.4225 5.79734 1.30769 6.09677 1.30769H7.67742V5.44872C7.67976 5.62143 7.75188 5.78643 7.87842 5.90856C8.00496 6.03069 8.1759 6.10031 8.35484 6.10256H12.6452V11.1154C12.6452 11.4044 12.5262 11.6816 12.3145 11.886C12.1027 12.0903 11.8156 12.2051 11.5161 12.2051Z" fill="#949494"/>
 </svg>
--- a/frontend/src/assets/dislike.svg
+++ b/frontend/src/assets/dislike.svg
@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
 <path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/frontend/src/assets/like.svg
+++ b/frontend/src/assets/like.svg
@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="14" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
 <path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@ -13,7 +13,6 @@ import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
-
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;

 const ConversationBubble = forwardRef<
@ -64,9 +63,9 @@ const ConversationBubble = forwardRef<
    bubble = (
      <div
        ref={ref}
-        className={`flex self-start ${className} group flex-col pr-20  dark:text-bright-gray`}
+        className={`flex self-start flex-wrap ${className} group flex-col pr-20  dark:text-bright-gray`}
      >
-        <div className="flex self-start">
+        <div className="flex self-start flex-wrap lg:flex-nowrap">
          <Avatar
            className="mt-2 h-12 w-12 text-2xl"
            avatar={
@ -79,17 +78,16 @@ const ConversationBubble = forwardRef<
          />

          <div
-            className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${
-              type === 'ERROR'
-                ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
-                : 'flex-col rounded-3xl'
-            }`}
+            className={`ml-2 lg:max-w-[50vw] md:max-w-[70vw] max-w-[90vw] mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${type === 'ERROR'
+              ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+              : 'flex-col rounded-3xl'
+              }`}
          >
            {type === 'ERROR' && (
              <img src={Alert} alt="alert" className="mr-2 inline" />
            )}
            <ReactMarkdown
-              className="max-w-screen-md whitespace-pre-wrap break-words"
+              className="whitespace-pre-wrap break-words"
              remarkPlugins={[remarkGfm]}
              components={{
                code({ node, inline, className, children, ...props }) {
@ -170,21 +168,19 @@ const ConversationBubble = forwardRef<
                    {sources?.map((source, index) => (
                      <div
                        key={index}
-                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
-                          openSource === index
-                            ? 'bg-[#007DFF]'
-                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
-                        }`}
+                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${openSource === index
+                          ? 'bg-[#007DFF]'
+                          : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
+                          }`}
                        onClick={() =>
                          setOpenSource(openSource === index ? null : index)
                        }
                      >
                        <p
-                          className={`truncate text-center text-base font-medium ${
-                            openSource === index
-                              ? 'text-white'
-                              : 'text-[#007DFF]'
-                          }`}
+                          className={`truncate text-center text-base font-medium ${openSource === index
+                            ? 'text-white'
+                            : 'text-[#007DFF]'
+                            }`}
                        >
                          {index + 1}. {source.title.substring(0, 45)}
                        </p>
@ -195,100 +191,97 @@ const ConversationBubble = forwardRef<
              </>
            )}
          </div>
-          <div
-            className={`relative mr-5 flex items-center justify-center md:invisible ${
-              type !== 'ERROR' ? 'group-hover:md:visible' : ''
-            }`}
-          >
-            <div className="absolute left-2 top-4">
-              <div
-                className={`flex items-center justify-center rounded-full p-2 
+          <div className='flex justify-center'>
+            <div
+              className={`relative mr-5  items-center justify-center lg:invisible block 
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
+                }`}
+            >
+              <div className="absolute left-2 top-4">
+                <div
+                  className={`flex items-center justify-center rounded-full p-2 
                ${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
-              >
-                {copied ? (
-                  <CheckMark
-                    className="cursor-pointer stroke-green-2000"
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  />
-                ) : (
-                  <Copy
-                    className={`cursor-pointer fill-none`}
-                    onClick={() => {
-                      handleCopyClick(message);
-                    }}
-                    onMouseEnter={() => setIsCopyHovered(true)}
-                    onMouseLeave={() => setIsCopyHovered(false)}
-                  ></Copy>
-                )}
+                >
+                  {copied ? (
+                    <CheckMark
+                      className="cursor-pointer stroke-green-2000"
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    />
+                  ) : (
+                    <Copy
+                      className={`cursor-pointer fill-none`}
+                      onClick={() => {
+                        handleCopyClick(message);
+                      }}
+                      onMouseEnter={() => setIsCopyHovered(true)}
+                      onMouseLeave={() => setIsCopyHovered(false)}
+                    ></Copy>
+                  )}
+                </div>
              </div>
            </div>
-          </div>
-          <div
-            className={`relative mr-5 flex items-center justify-center ${
-              !isLikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'LIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
-                : ''
-            }`}
-          >
-            <div className="absolute left-6 top-4">
-              <div
-                className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
-              >
-                <Like
-                  className={`cursor-pointer 
+            <div
+              className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
+                } ${feedback === 'LIKE' || type !== 'ERROR'
+                  ? 'group-hover:lg:visible'
+                  : ''
+                }`}
+            >
+              <div className="absolute left-6 top-4">
+                <div
+                  className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
+                >
+                  <Like
+                    className={`cursor-pointer 
                  ${isLikeClicked || feedback === 'LIKE'
-                      ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
-                      : 'fill-none  stroke-gray-4000'
-                  }`}
-                  onClick={() => {
-                    handleFeedback?.('LIKE');
-                    setIsLikeClicked(true);
-                    setIsDislikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsLikeHovered(true)}
-                  onMouseLeave={() => setIsLikeHovered(false)}
-                ></Like>
+                        ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
+                        : 'fill-none  stroke-gray-4000'
+                      }`}
+                    onClick={() => {
+                      handleFeedback?.('LIKE');
+                      setIsLikeClicked(true);
+                      setIsDislikeClicked(false);
+                    }}
+                    onMouseEnter={() => setIsLikeHovered(true)}
+                    onMouseLeave={() => setIsLikeHovered(false)}
+                  ></Like>
+                </div>
              </div>
            </div>
-          </div>
-          <div
-            className={`mr-13 relative flex items-center justify-center ${
-              !isDislikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'DISLIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
-                : ''
-            }`}
-          >
-            <div className="absolute left-10 top-4">
-              <div
-                
-                className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
-              >
-                <Dislike
-                  className={`cursor-pointer ${
-                    isDislikeClicked || feedback === 'DISLIKE'
+            <div
+              className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
+                } ${feedback === 'DISLIKE' || type !== 'ERROR'
+                  ? 'group-hover:lg:visible'
+                  : ''
+                }`}
+            >
+              <div className="absolute left-10 top-4">
+                <div
+
+                  className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
+                >
+                  <Dislike
+                    className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
                      ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
                      : 'fill-none  stroke-gray-4000'
-                  }`}
-                  onClick={() => {
-                    handleFeedback?.('DISLIKE');
-                    setIsDislikeClicked(true);
-                    setIsLikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsDislikeHovered(true)}
-                  onMouseLeave={() => setIsDislikeHovered(false)}
-                ></Dislike>
+                      }`}
+                    onClick={() => {
+                      handleFeedback?.('DISLIKE');
+                      setIsDislikeClicked(true);
+                      setIsLikeClicked(false);
+                    }}
+                    onMouseEnter={() => setIsDislikeHovered(true)}
+                    onMouseLeave={() => setIsDislikeHovered(false)}
+                  ></Dislike>
+                </div>
              </div>
            </div>
          </div>
        </div>

        {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
+          <div className="ml-10 mt-12 lg:mt-2 max-w-[300px] sm:max-w-[800px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
            <p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
              Source: {sources[openSource].title}
            </p>