feedback visible conditioned, update meta info in shared

arc53 · Jul 14, 2024 · 84eed09 · 84eed09
1 parent 35b1a40
commit 84eed09
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 115 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -33,11 +33,7 @@ function MainLayout({ children }: { children: ReactElement }) {
 }
 
 function Layout({ children }: { children: ReactElement }) {
-  return (
-    <>
-      <div className={`h-full dark:bg-raisin-black`}>{children}</div>
-    </>
-  );
+  return <div className="h-full dark:bg-raisin-black">{children}</div>;
 }
 export default function App() {
   const [isDarkTheme] = useDarkTheme();

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useState } from 'react';
 import Avatar from '../components/Avatar';
-import CoppyButton from '../components/CopyButton';
+import CopyButton from '../components/CopyButton';
 import remarkGfm from 'remark-gfm';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import classes from './ConversationBubble.module.css';
@@ -103,7 +103,7 @@ const ConversationBubble = forwardRef<
                         className={`absolute right-3 top-3 lg:invisible 
                         ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
                       >
-                        <CoppyButton
+                        <CopyButton
                           text={String(children).replace(/\n$/, '')}
                         />
                       </div>
@@ -215,78 +215,82 @@ const ConversationBubble = forwardRef<
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
           >
             <div>
-              <CoppyButton text={message} />
+              <CopyButton text={message} />
             </div>
           </div>
-          <div
-            className={`relative mr-5 flex items-center justify-center ${
-              !isLikeClicked ? 'lg:invisible' : ''
-            } ${
-              feedback === 'LIKE' || type !== 'ERROR'
-                ? 'group-hover:lg:visible'
-                : ''
-            }`}
-          >
-            <div>
+          {handleFeedback && (
+            <>
               <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'
+                className={`relative mr-5 flex items-center justify-center ${
+                  !isLikeClicked ? 'lg:invisible' : ''
+                } ${
+                  feedback === 'LIKE' || type !== 'ERROR'
+                    ? 'group-hover:lg:visible'
+                    : ''
                 }`}
               >
-                <Like
-                  className={`cursor-pointer 
+                <div>
+                  <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>
+                      onClick={() => {
+                        handleFeedback?.('LIKE');
+                        setIsLikeClicked(true);
+                        setIsDislikeClicked(false);
+                      }}
+                      onMouseEnter={() => setIsLikeHovered(true)}
+                      onMouseLeave={() => setIsLikeHovered(false)}
+                    ></Like>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div
-            className={`mr-13 relative flex items-center justify-center ${
-              !isDislikeClicked ? 'lg:invisible' : ''
-            } ${
-              feedback === 'DISLIKE' || type !== 'ERROR'
-                ? 'group-hover:lg:visible'
-                : ''
-            }`}
-          >
-            <div>
               <div
-                className={`flex items-center justify-center rounded-full p-2 ${
-                  isDislikeHovered
-                    ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                    : 'bg-[#ffffff] dark:bg-transparent'
+                className={`mr-13 relative flex items-center justify-center ${
+                  !isDislikeClicked ? 'lg:invisible' : ''
+                } ${
+                  feedback === 'DISLIKE' || type !== 'ERROR'
+                    ? 'group-hover:lg:visible'
+                    : ''
                 }`}
               >
-                <Dislike
-                  className={`cursor-pointer ${
-                    isDislikeClicked || feedback === 'DISLIKE'
-                      ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                      : 'fill-none  stroke-gray-4000'
-                  }`}
-                  onClick={() => {
-                    handleFeedback?.('DISLIKE');
-                    setIsDislikeClicked(true);
-                    setIsLikeClicked(false);
-                  }}
-                  onMouseEnter={() => setIsDislikeHovered(true)}
-                  onMouseLeave={() => setIsDislikeHovered(false)}
-                ></Dislike>
+                <div>
+                  <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 stroke-red-2000 dark:fill-transparent'
+                          : 'fill-none  stroke-gray-4000'
+                      }`}
+                      onClick={() => {
+                        handleFeedback?.('DISLIKE');
+                        setIsDislikeClicked(true);
+                        setIsLikeClicked(false);
+                      }}
+                      onMouseEnter={() => setIsDislikeHovered(true)}
+                      onMouseLeave={() => setIsDislikeHovered(false)}
+                    ></Dislike>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+            </>
+          )}
         </div>
 
         {sources && openSource !== null && sources[openSource] && (

diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
@@ -87,58 +87,56 @@ const SharedConversation = () => {
   useEffect(() => {
     fetchQueris();
   }, []);
+
   return (
-    <div className="">
-      <div className="flex h-screen flex-col items-center justify-between">
-        {queries.length > 0 && (
-          <div className="flex w-full justify-center overflow-auto">
-            <div className="mt-0 w-11/12 md:w-6/12">
-              <div className="w-full border-b pb-2">
-                <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
-                  {title}
-                </h1>
-                <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-                  {t('sharedConv.subtitle')}{' '}
-                  <a href="/" className="text-[#007DFF]">
-                    DocsGPT
-                  </a>
-                </h2>
-                <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-                  {date}
-                </h2>
-              </div>
-              <div className="pt-2">
-                {queries.map((query, index) => {
-                  return (
-                    <Fragment key={index}>
-                      <ConversationBubble
-                        className={'mb-1 last:mb-28 md:mb-7'}
-                        key={`${index}QUESTION`}
-                        message={query.prompt}
-                        type="QUESTION"
-                        sources={query.sources}
-                      ></ConversationBubble>
+    <div className="flex h-full flex-col items-center justify-between gap-2  overflow-y-hidden">
+      <div className="flex w-full justify-center overflow-auto">
+        <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
+          <div className="mb-2 w-full border-b pb-2">
+            <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
+              {title}
+            </h1>
+            <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+              {t('sharedConv.subtitle')}{' '}
+              <a href="/" className="text-[#007DFF]">
+                DocsGPT
+              </a>
+            </h2>
+            <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+              {date}
+            </h2>
+          </div>
+          <div className="">
+            {queries?.map((query, index) => {
+              return (
+                <Fragment key={index}>
+                  <ConversationBubble
+                    className={'mb-1 last:mb-28 md:mb-7'}
+                    key={`${index}QUESTION`}
+                    message={query.prompt}
+                    type="QUESTION"
+                    sources={query.sources}
+                  ></ConversationBubble>
 
-                      {prepResponseView(query, index)}
-                    </Fragment>
-                  );
-                })}
-              </div>
-            </div>
+                  {prepResponseView(query, index)}
+                </Fragment>
+              );
+            })}
           </div>
-        )}
-        <div className=" flex flex-col items-center gap-4 p-4">
-          <button
-            onClick={() => navigate('/')}
-            className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
-          >
-            {t('sharedConv.button')}
-          </button>
-          <span className="hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
-            {t('sharedConv.meta')}
-          </span>
         </div>
       </div>
+
+      <div className=" flex flex-col items-center gap-4 pb-2">
+        <button
+          onClick={() => navigate('/')}
+          className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
+        >
+          {t('sharedConv.button')}
+        </button>
+        <span className="hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
+          {t('sharedConv.meta')}
+        </span>
+      </div>
     </div>
   );
 };

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -113,7 +113,7 @@
   "sharedConv": {
     "subtitle": "Created with",
     "button": "Get Started with DocsGPT",
-    "meta": "This is a chatbot that uses the GPT-3, Faiss and LangChain to answer questions."
+    "meta": "DocsGPT uses GenAI, please review critical information using sources."
   },
   "convTile": {
     "share": "Share",

diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
@@ -113,7 +113,7 @@
   "sharedConv": {
     "subtitle": "Creado con",
     "button": "Comienza con DocsGPT",
-    "meta": "Este es un chatbot que utiliza GPT-3, Faiss y LangChain para responder preguntas."
+    "meta": "DocsGPT utiliza GenAI, por favor revise la información crítica utilizando fuentes."
   },
   "convTile": {
     "share": "Compartir",

diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
@@ -113,7 +113,7 @@
   "sharedConv": {
     "subtitle": "作成者",
     "button": "DocsGPT を始める",
-    "meta": "GPT-3、Faiss、および LangChain を使用して質問に答えるチャットボットです"
+    "meta": "DocsGPT は GenAI を使用しています、情報源を使用して重要情報を確認してください。"
   },
   "convTile": {
     "share": "共有",

diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
@@ -113,7 +113,7 @@
   "sharedConv": {
     "subtitle": "使用创建",
     "button": "开始使用 DocsGPT",
-    "meta": "这是一个使用 GPT-3、Faiss 和 LangChain 来回答问题的聊天机器人。"
+    "meta": "DocsGPT 使用 GenAI，请使用资源查看关键信息。"
   },
   "convTile": {
     "share": "分享",