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

adds click event to the like/dislike icon

Browse Source
This commit is contained in:
ajaythapliyal
2023-03-06 08:32:57 +05:30
parent 7a74c60fd1
commit 533053f66f
2 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/conversation/Conversation.tsx
View File

@@ -50,6 +50,7 @@ export default function Conversation() {
key={`${index}ANSWER`}
message={query.response}
type={'ANSWER'}
feedback={query.feedback}
></ConversationBubble>
);
}

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

@@ -1,6 +1,6 @@
import { forwardRef, useState } from 'react';
import Avatar from '../Avatar';
import { MESSAGE_TYPE } from './conversationModels';
import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
import Alert from './../assets/alert.svg';
import { ReactComponent as Like } from './../assets/like.svg';
import { ReactComponent as Dislike } from './../assets/dislike.svg';
@@ -11,10 +11,20 @@ const ConversationBubble = forwardRef<
message: string;
type: MESSAGE_TYPE;
className?: string;
feedback?: FEEDBACK;
handleFeedback?: () => Promise<void>;
}
>(function ConversationBubble({ message, type, className }, ref) {
>(function ConversationBubble(
{ message, type, className, feedback, handleFeedback },
ref,
) {
const [showFeedback, setShowFeedback] = useState(false);
const [overriddenFeedback, setOverriddenFeedback] = useState<
FEEDBACK | undefined
>(undefined);
const effectiveFeedback = overriddenFeedback ?? feedback;
let bubble;
if (type === 'QUESTION') {
bubble = (
<div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
@@ -47,17 +57,38 @@ const ConversationBubble = forwardRef<
</div>
<div
className={`mr-2 flex items-center justify-center ${
type !== 'ERROR' && showFeedback ? '' : 'invisible'
effectiveFeedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
? ''
: 'invisible'
}`}
>
<Like fill="none" className="hover:fill-gray-4000"></Like>
<Like
fill="none"
className={`cursor-pointer ${
effectiveFeedback === 'LIKE'
? 'fill-blue-1000'
: 'hover:fill-gray-4000'
}`}
onClick={() => setOverriddenFeedback('LIKE')}
></Like>
</div>
<div
className={`mr-10 flex items-center justify-center ${
type !== 'ERROR' && showFeedback ? '' : 'invisible'
effectiveFeedback === 'DISLIKE' ||
(type !== 'ERROR' && showFeedback)
? ''
: 'invisible'
}`}
>
<Dislike fill="none" className="hover:fill-gray-4000"></Dislike>
<Dislike
fill="none"
className={`cursor-pointer ${
effectiveFeedback === 'DISLIKE'
? 'fill-red-2000'
: 'hover:fill-gray-4000'
}`}
onClick={() => setOverriddenFeedback('DISLIKE')}
></Dislike>
</div>
</div>
);