fix: added required changes

frontend/src/assets/document.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9294 5.375V12.4583C12.9294 12.8341 12.7801 13.1944 12.5145 13.4601C12.2488 13.7257 11.8885 13.875 11.5127 13.875H3.01274C2.63701 13.875 2.27668 13.7257 2.011 13.4601C1.74532 13.1944 1.59607 12.8341 1.59607 12.4583V2.54167C1.59607 2.16594 1.74532 1.80561 2.011 1.53993C2.27668 1.27426 2.63701 1.125 3.01274 1.125H8.6794M12.9294 5.375V5.25317C12.9293 4.87747 12.78 4.5172 12.5143 4.25158L9.80282 1.54008C9.53721 1.27439 9.17693 1.12508 8.80124 1.125H8.6794M12.9294 5.375H10.0961C9.72035 5.375 9.36001 5.22574 9.09434 4.96007C8.82866 4.69439 8.6794 4.33406 8.6794 3.95833V1.125" stroke="#949494" stroke-width="1.41667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/conversation/ConversationBubble.tsx

@@ -7,7 +7,9 @@ import remarkGfm from 'remark-gfm';
 import Alert from '../assets/alert.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
+import Document from '../assets/document.svg';
 import Like from '../assets/like.svg?react';
+import Link from '../assets/link.svg';
 import Sources from '../assets/sources.svg';
 import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
@@ -32,14 +34,12 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources, retryBtn },
   ref,
 ) {
-  const [openSource, setOpenSource] = useState<number | null>(null);
-
   const [isLikeHovered, setIsLikeHovered] = useState(false);
   const [isDislikeHovered, setIsDislikeHovered] = useState(false);
   const [isLikeClicked, setIsLikeClicked] = useState(false);
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
 
   let bubble;
   if (type === 'QUESTION') {
@@ -94,7 +94,7 @@ const ConversationBubble = forwardRef<
           <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <div className="my-2 flex flex-row items-center justify-center gap-3">
               <Avatar
-                className="h-[38px] w-[42px] text-xl"
+                className="h-[26px] w-[30px] text-xl"
                 avatar={
                   <img
                     src={Sources}
@@ -103,29 +103,54 @@ const ConversationBubble = forwardRef<
                   />
                 }
               />
-              <p className="text-lg font-semibold">Sources</p>
+              <p className="text-base font-semibold">Sources</p>
             </div>
             <div className="ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
               <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
                 {sources?.slice(0, 3)?.map((source, index) => (
                   <div key={index} className="relative">
                     <div
-                      className="h-24 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
+                      className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
                       onMouseOver={() => setActiveTooltip(index)}
                       onMouseOut={() => setActiveTooltip(null)}
-                      onClick={() =>
-                        source.source && source.source !== 'local'
-                          ? window.open(
-                              source.source,
-                              '_blank',
-                              'noopener, noreferrer',
-                            )
-                          : setOpenSource(openSource === index ? null : index)
-                      }
                     >
-                      <p className="ellipsis-text h-22 break-words text-xs">
-                        {source.title}
+                      <p className="ellipsis-text h-12 break-words text-xs">
+                        {source.text}
                       </p>
+                      <div
+                        className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
+                          source.source && source.source !== 'local'
+                            ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
+                            : ''
+                        }`}
+                        onClick={() =>
+                          source.source && source.source !== 'local'
+                            ? window.open(
+                                source.source,
+                                '_blank',
+                                'noopener, noreferrer',
+                              )
+                            : null
+                        }
+                      >
+                        <img
+                          src={Document}
+                          alt="Document"
+                          className="h-[17px] w-[17px] object-fill"
+                        />
+                        <p
+                          className="mt-[2px] truncate text-xs"
+                          title={
+                            source.source && source.source !== 'local'
+                              ? source.source
+                              : source.title
+                          }
+                        >
+                          {source.source && source.source !== 'local'
+                            ? source.source
+                            : source.title}
+                        </p>
+                      </div>
                     </div>
                     {activeTooltip === index && (
                       <div
@@ -157,7 +182,7 @@ const ConversationBubble = forwardRef<
         <div className="flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
           <div className="my-2 flex flex-row items-center justify-center gap-3">
             <Avatar
-              className="h-12 w-12 text-2xl"
+              className="h-[34px] w-[34px] text-2xl"
               avatar={
                 <img
                   src={DocsGPT3}
@@ -166,7 +191,7 @@ const ConversationBubble = forwardRef<
                 />
               }
             />
-            <p className="text-lg font-semibold">Answer</p>
+            <p className="text-base font-semibold">Answer</p>
           </div>
           <div
             className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
@@ -380,9 +405,24 @@ function AllSources(sources: AllSourcesProps) {
       <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
         {sources.sources.map((source, index) => (
           <div className="min-h-32 w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]">
-            <p className="ellipsis-text break-words text-left text-sm font-semibold">
-              {`${index + 1}. ${source.title}`}
-            </p>
+            <span className="flex flex-row">
+              <p
+                title={source.title}
+                className="ellipsis-text break-words text-left text-sm font-semibold"
+              >
+                {`${index + 1}. ${source.title}`}
+              </p>
+              {source.source && source.source !== 'local' ? (
+                <img
+                  src={Link}
+                  alt="Link"
+                  className="h-3 w-3 cursor-pointer object-fill"
+                  onClick={() =>
+                    window.open(source.source, '_blank', 'noopener, noreferrer')
+                  }
+                ></img>
+              ) : null}
+            </span>
             <p className="mt-3 max-h-24 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
               {source.text}
             </p>

frontend/src/index.css

@@ -437,7 +437,7 @@ template {
 .ellipsis-text {
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }