klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 21:29:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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