mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
feat(frontend): Add ThoughtsButton component for displaying thoughts (#2624)
This pull request adds a new component called ThoughtsButton for displaying thoughts in the chat messages. The ThoughtsButton component is used to show a tooltip with the thoughts text when the user hovers over the button.
This commit is contained in:
parent
3be1f09893
commit
e6531f1313
@ -4,6 +4,7 @@ import { useChat } from "@/app/chat/[chatId]/hooks/useChat";
|
||||
import { useChatApi } from "@/lib/api/chat/useChatApi";
|
||||
import { CopyButton } from "@/lib/components/ui/CopyButton";
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
import { ThoughtsButton } from "@/lib/components/ui/ThoughtsButton";
|
||||
import { Source } from "@/lib/types/MessageMetadata";
|
||||
|
||||
import styles from "./MessageRow.module.scss";
|
||||
@ -23,6 +24,7 @@ type MessageRowProps = {
|
||||
children?: React.ReactNode;
|
||||
metadata?: {
|
||||
sources?: Source[];
|
||||
thoughts?: string;
|
||||
};
|
||||
brainId?: string;
|
||||
index?: number;
|
||||
@ -175,6 +177,12 @@ export const MessageRow = React.forwardRef(
|
||||
</div>
|
||||
|
||||
<div className={styles.icons_wrapper}>
|
||||
{metadata?.thoughts && metadata.thoughts.trim() !== "" && (
|
||||
<ThoughtsButton
|
||||
text={metadata.thoughts}
|
||||
size="normal"
|
||||
/>
|
||||
)}
|
||||
<CopyButton handleCopy={handleCopy} size="normal" />
|
||||
<Icon
|
||||
name="thumbsUp"
|
||||
|
@ -21,6 +21,7 @@ export type ChatMessage = {
|
||||
brain_id?: UUID;
|
||||
metadata?: {
|
||||
sources?: Source[];
|
||||
thoughts?: string;
|
||||
};
|
||||
thumbs?: boolean;
|
||||
};
|
||||
|
21
frontend/lib/components/ui/ThoughtsButton.tsx
Normal file
21
frontend/lib/components/ui/ThoughtsButton.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
import Tooltip from "@/lib/components/ui/Tooltip/Tooltip";
|
||||
import { IconSize } from "@/lib/types/Icons";
|
||||
|
||||
|
||||
type ThoughtsButtonProps = {
|
||||
text: string;
|
||||
size: IconSize;
|
||||
};
|
||||
|
||||
export const ThoughtsButton = ({ text, size }: ThoughtsButtonProps): JSX.Element => {
|
||||
|
||||
return (
|
||||
<Tooltip tooltip={text}>
|
||||
<div>
|
||||
<Icon name="question" size={size} color="black" handleHover={true}/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
@ -9,4 +9,7 @@
|
||||
padding: Spacings.$spacing03;
|
||||
border-radius: Radius.$normal;
|
||||
font-size: Typography.$small;
|
||||
}
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
}
|
@ -17,6 +17,7 @@ import {
|
||||
FaKey,
|
||||
FaLinkedin,
|
||||
FaMoon,
|
||||
FaQuestionCircle,
|
||||
FaRegFileAlt,
|
||||
FaRegKeyboard,
|
||||
FaRegStar,
|
||||
@ -129,6 +130,7 @@ export const iconList: { [name: string]: IconType } = {
|
||||
options: SlOptions,
|
||||
paragraph: BsTextParagraph,
|
||||
prompt: FaRegKeyboard,
|
||||
question: FaQuestionCircle,
|
||||
redirection: BsArrowRightShort,
|
||||
radio: IoIosRadio,
|
||||
read: MdMarkEmailRead,
|
||||
|
@ -4,4 +4,5 @@ export interface Source {
|
||||
name: string;
|
||||
source_url: string;
|
||||
type: string;
|
||||
thoughts: string;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user