sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add hover text descriptions of action buttons on chat message in web view

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-07-12 15:40:51 +05:30
parent 5fccccfdff
commit e00c6b486e
1 changed files with 10 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,8 +11,7 @@ import 'highlight.js/styles/github.css'
import { TeaserReferencesSection, constructAllReferences } from '../referencePanel/referencePanel';
import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, ArrowRight, SpeakerHifi } from '@phosphor-icons/react';
import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr';
import { ThumbsUp, ThumbsDown, Copy, Brain, Cloud, Folder, Book, Aperture, SpeakerHigh, MagnifyingGlass } from '@phosphor-icons/react';
import * as DomPurify from 'dompurify';
@ -132,11 +131,11 @@ function sendFeedback(uquery: string, kquery: string, sentiment: string) {
function FeedbackButtons({ uquery, kquery }: { uquery: string, kquery: string }) {
return (
<div className={`${styles.feedbackButtons} flex align-middle justify-center items-center`}>
<button className={styles.thumbsUpButton} onClick={() => sendFeedback(uquery, kquery, 'positive')}>
<ThumbsUp color='hsl(var(--muted-foreground))' />
<button title="Like" className={styles.thumbsUpButton} onClick={() => sendFeedback(uquery, kquery, 'positive')}>
<ThumbsUp alt="Like Message" color='hsl(var(--muted-foreground))' />
</button>
<button className={styles.thumbsDownButton} onClick={() => sendFeedback(uquery, kquery, 'negative')}>
<ThumbsDown color='hsl(var(--muted-foreground))' />
<button title="Dislike" className={styles.thumbsDownButton} onClick={() => sendFeedback(uquery, kquery, 'negative')}>
<ThumbsDown alt="Dislike Message" color='hsl(var(--muted-foreground))' />
</button>
</div>
)
@ -351,19 +350,19 @@ export default function ChatMessage(props: ChatMessageProps) {
{
(props.chatMessage.by === "khoj") &&
(
<button onClick={(event) => console.log("speaker")}>
<SpeakerHifi color='hsl(var(--muted-foreground))' />
<button title="Speak" onClick={(event) => console.log("speaker")}>
<SpeakerHigh alt="Speak Message" color='hsl(var(--muted-foreground))' />
</button>
)
}
<button className={`${styles.copyButton}`} onClick={() => {
<button title="Copy" className={`${styles.copyButton}`} onClick={() => {
navigator.clipboard.writeText(props.chatMessage.message);
setCopySuccess(true);
}}>
{
copySuccess ?
<Copy color='green' />
: <Copy color='hsl(var(--muted-foreground))' />
<Copy alt="Copied Message" weight="fill" color='green' />
: <Copy alt="Copy Message" color='hsl(var(--muted-foreground))' />
}
</button>
{
@ -382,7 +381,6 @@ export default function ChatMessage(props: ChatMessageProps) {
</>
)
}
</div>
</div>
)