sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-17 18:17:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Give visual feedback when interact with chat message feedback buttons

Browse source 
- Use color to provide visual feedback when hover, click on feedback
  buttons
- Use color to provide visual feedback when hover on speech, copy
  buttons click
- Add cooldown period before being able to send feedback on that message again.
  Avoids inadvertent multiple consecutive clicks on feedback buttons
This commit is contained in:
Debanjum Singh Solanky 2024-08-10 19:40:33 +05:30
parent b3c6c8c84b
commit 5075d13902
1 changed files with 49 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/interface/web/app/components/chatMessage/chatMessage.tsx
View file

@ -142,21 +142,55 @@ function sendFeedback(uquery: string, kquery: string, sentiment: string) {
}
function FeedbackButtons({ uquery, kquery }: { uquery: string; kquery: string }) {
// Tri-state feedback state.
// Null = no feedback, true = positive feedback, false = negative feedback.
const [feedbackState, setFeedbackState] = useState<boolean | null>(null);
useEffect(() => {
if (feedbackState !== null) {
setTimeout(() => {
setFeedbackState(null);
}, 2000);
}
}, [feedbackState]);
return (
<div className={`${styles.feedbackButtons} flex align-middle justify-center items-center`}>
<button
title="Like"
className={styles.thumbsUpButton}
onClick={() => sendFeedback(uquery, kquery, "positive")}
disabled={feedbackState !== null}
onClick={() => {
sendFeedback(uquery, kquery, "positive");
setFeedbackState(true);
}}
>
<ThumbsUp alt="Like Message" color="hsl(var(--muted-foreground))" />
{feedbackState === true ? (
<ThumbsUp alt="Liked Message" className="text-green-500" weight="fill" />
) : (
<ThumbsUp
alt="Like Message"
className="hsl(var(--muted-foreground)) hover:text-green-500"
/>
)}
</button>
<button
title="Dislike"
className={styles.thumbsDownButton}
onClick={() => sendFeedback(uquery, kquery, "negative")}
disabled={feedbackState !== null}
onClick={() => {
sendFeedback(uquery, kquery, "negative");
setFeedbackState(false);
}}
>
<ThumbsDown alt="Dislike Message" color="hsl(var(--muted-foreground))" />
{feedbackState === false ? (
<ThumbsDown alt="Disliked Message" className="text-red-500" weight="fill" />
) : (
<ThumbsDown
alt="Dislike Message"
className="hsl(var(--muted-foreground)) hover:text-red-500"
/>
)}
</button>
</div>
);
@ -547,7 +581,7 @@ export default function ChatMessage(props: ChatMessageProps) {
>
<Pause
alt="Pause Message"
color="hsl(var(--muted-foreground))"
className="hsl(var(--muted-foreground))"
/>
</button>
)
@ -555,7 +589,7 @@ export default function ChatMessage(props: ChatMessageProps) {
<button title="Speak" onClick={(event) => playTextToSpeech()}>
<SpeakerHigh
alt="Speak Message"
color="hsl(var(--muted-foreground))"
className="hsl(var(--muted-foreground)) hover:text-green-500"
/>
</button>
))}
@ -568,9 +602,16 @@ export default function ChatMessage(props: ChatMessageProps) {
}}
>
{copySuccess ? (
<Copy alt="Copied Message" weight="fill" color="green" />
<Copy
alt="Copied Message"
weight="fill"
className="text-green-500"
/>
) : (
<Copy alt="Copy Message" color="hsl(var(--muted-foreground))" />
<Copy
alt="Copy Message"
className="hsl(var(--muted-foreground)) hover:text-green-500"
/>
)}
</button>
{props.chatMessage.by === "khoj" &&