Merge branch 'main' of https://github.com/SamsShow/DocsGPT

frontend/src/Navigation.tsx

@@ -255,7 +255,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 src={Arrow2}
                 alt="arrow"
                 className={`${
-                  isDocsListOpen ? 'rotate-0' : 'rotate-180'
+                  !isDocsListOpen ? 'rotate-0' : 'rotate-180'
                 } ml-auto mr-3 w-3 transition-all`}
               />
             </div>

frontend/src/conversation/ConversationBubble.module.css

@@ -0,0 +1,11 @@
+.list p {
+  display: inline;
+}
+
+.list li:not(:first-child) {
+  margin-top: 1em;
+}
+
+.list li > .list {
+  margin-top: 1em;
+}

frontend/src/conversation/ConversationBubble.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useState } from 'react';
 import Avatar from '../Avatar';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
 import { ReactComponent as Like } from './../assets/like.svg';
 import { ReactComponent as Dislike } from './../assets/dislike.svg';
@@ -27,7 +28,6 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources },
   ref,
 ) {
-  const [showFeedback, setShowFeedback] = useState(false);
   const [openSource, setOpenSource] = useState<number | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -40,16 +40,6 @@ const ConversationBubble = forwardRef<
     }, 2000);
   };
 
-  const List = ({
-    ordered,
-    children,
-  }: {
-    ordered?: boolean;
-    children: React.ReactNode;
-  }) => {
-    const Tag = ordered ? 'ol' : 'ul';
-    return <Tag className="list-inside list-disc">{children}</Tag>;
-  };
   let bubble;
 
   if (type === 'QUESTION') {
@@ -65,12 +55,7 @@ const ConversationBubble = forwardRef<
     );
   } else {
     bubble = (
-      <div
-        ref={ref}
-        className={`flex self-start ${className} flex-col`}
-        onMouseEnter={() => setShowFeedback(true)}
-        onMouseLeave={() => setShowFeedback(false)}
-      >
+      <div ref={ref} className={`flex self-start ${className} group flex-col`}>
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
@@ -104,11 +89,23 @@ const ConversationBubble = forwardRef<
                     </code>
                   );
                 },
-                ul({ node, children }) {
-                  return <List>{children}</List>;
+                ul({ children }) {
+                  return (
+                    <ul
+                      className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ul>
+                  );
                 },
-                ol({ node, children }) {
-                  return <List ordered>{children}</List>;
+                ol({ children }) {
+                  return (
+                    <ol
+                      className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ol>
+                  );
                 },
               }}
             >
@@ -118,9 +115,7 @@ const ConversationBubble = forwardRef<
               <>
                 <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
                 <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-                  <div className="py-1 text-base font-semibold">
-                    Sources:
-                  </div>
+                  <div className="py-1 text-base font-semibold">Sources:</div>
                   <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                     {sources?.map((source, index) => (
                       <div
@@ -151,8 +146,8 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
-              type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
+              type !== 'ERROR' ? 'group-hover:md:visible' : ''
             }`}
           >
             {copied ? (
@@ -167,10 +162,10 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
-              feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
+              feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
             }`}
           >
             <Like
@@ -183,10 +178,10 @@ const ConversationBubble = forwardRef<
             ></Like>
           </div>
           <div
-            className={`relative mr-10 flex items-center justify-center ${
-              feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
-                ? ''
-                : 'md:invisible'
+            className={`relative mr-10 flex items-center justify-center md:invisible ${
+              feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:md:visible'
+                : ''
             }`}
           >
             <Dislike