LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback visible conditioned, update meta info in shared

Browse Source
This commit is contained in:
ManishMadan2882
2024-07-15 02:55:38 +05:30
parent 35b1a40d49
commit 84eed09a17
7 changed files with 114 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@@ -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();

122
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -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] && (

94
frontend/src/conversation/SharedConversation.tsx
View File

@@ -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>
{prepResponseView(query, index)}
</Fragment>
);
})}
</div>
</div>
return (
<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 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>
);
};

2
frontend/src/locale/en.json
View File

@@ -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",

2
frontend/src/locale/es.json
View File

@@ -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",

2
frontend/src/locale/jp.json
View File

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

2
frontend/src/locale/zh.json
View File

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