mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-08-17 02:10:31 +03:00
feat(frontend): Uniformize brain icon (#2802)
# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
This commit is contained in:
parent
12de0f7b03
commit
78004e8de9
@ -12,17 +12,15 @@
|
||||
padding: Spacings.$spacing02;
|
||||
min-height: 2rem;
|
||||
|
||||
&:hover,
|
||||
&:hover {
|
||||
background-color: var(--background-3);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--background-special-1);
|
||||
font-weight: 550;
|
||||
color: var(--primary-0);
|
||||
}
|
||||
|
||||
.brain_name {
|
||||
@include Typography.EllipsisOverflow;
|
||||
}
|
||||
|
||||
.dark_image {
|
||||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,4 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
|
||||
|
||||
import styles from "./MentionItem.module.scss";
|
||||
|
||||
@ -10,30 +7,20 @@ import { SuggestionDataType, SuggestionItem } from "../../types";
|
||||
type MentionItemProps = {
|
||||
item: SuggestionItem;
|
||||
type: SuggestionDataType;
|
||||
isSelected: boolean;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
export const MentionItem = ({
|
||||
item,
|
||||
onClick,
|
||||
isSelected,
|
||||
}: MentionItemProps): JSX.Element => {
|
||||
|
||||
const { isDarkMode } = useUserSettingsContext();
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`${styles.mention_item_wrapper} ${isSelected ? styles.selected : ""
|
||||
}`}
|
||||
className={styles.mention_item_wrapper}
|
||||
key={item.id}
|
||||
onClick={onClick}
|
||||
>
|
||||
{item.iconUrl ? (
|
||||
<Image src={item.iconUrl} width={18} height={18} alt="logo_url" className={isDarkMode ? styles.dark_image : ""} />
|
||||
) : (
|
||||
<Icon color="primary" size="normal" name="brain" />
|
||||
)}
|
||||
<Icon name="brain" size="normal" color={"black"} />
|
||||
<span className={styles.brain_name}>{item.label}</span>
|
||||
</span>
|
||||
);
|
||||
|
@ -12,7 +12,7 @@ export type MentionListRef = {
|
||||
|
||||
export const MentionList = forwardRef<MentionListRef, MentionListProps>(
|
||||
(props, ref) => {
|
||||
const { selectItem, selectedIndex } = useMentionList({
|
||||
const { selectItem } = useMentionList({
|
||||
...props,
|
||||
ref,
|
||||
});
|
||||
@ -29,7 +29,6 @@ export const MentionList = forwardRef<MentionListRef, MentionListProps>(
|
||||
<MentionItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
isSelected={index === selectedIndex}
|
||||
onClick={() => selectItem(index)}
|
||||
type={props.suggestionData.type}
|
||||
/>
|
||||
|
@ -13,15 +13,8 @@ export const QADisplay = ({
|
||||
index,
|
||||
lastMessage,
|
||||
}: QADisplayProps): JSX.Element => {
|
||||
const {
|
||||
assistant,
|
||||
message_id,
|
||||
user_message,
|
||||
brain_name,
|
||||
metadata,
|
||||
brain_id,
|
||||
thumbs,
|
||||
} = content;
|
||||
const { assistant, message_id, user_message, brain_name, metadata, thumbs } =
|
||||
content;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -36,7 +29,6 @@ export const QADisplay = ({
|
||||
speaker={"assistant"}
|
||||
text={assistant}
|
||||
brainName={brain_name}
|
||||
brainId={brain_id}
|
||||
index={index}
|
||||
metadata={metadata} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
messageId={message_id}
|
||||
|
@ -25,7 +25,6 @@ type MessageRowProps = {
|
||||
thoughts?: string;
|
||||
followup_questions?: string[];
|
||||
};
|
||||
brainId?: string;
|
||||
index?: number;
|
||||
messageId?: string;
|
||||
thumbs?: boolean;
|
||||
@ -37,7 +36,6 @@ export const MessageRow = ({
|
||||
text,
|
||||
brainName,
|
||||
children,
|
||||
brainId,
|
||||
messageId,
|
||||
thumbs: initialThumbs,
|
||||
metadata,
|
||||
@ -102,7 +100,7 @@ export const MessageRow = ({
|
||||
return (
|
||||
<div className={styles.message_header_wrapper}>
|
||||
<div className={styles.message_header}>
|
||||
<QuestionBrain brainName={brainName} brainId={brainId} />
|
||||
<QuestionBrain brainName={brainName} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -9,11 +9,7 @@
|
||||
color: var(--text-3);
|
||||
overflow: hidden;
|
||||
|
||||
.dark_image {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.brain_name {
|
||||
@include Typography.EllipsisOverflow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,53 +1,22 @@
|
||||
import Image from "next/image";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
|
||||
import { useBrainApi } from "@/lib/api/brain/useBrainApi";
|
||||
import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
|
||||
import Icon from "@/lib/components/ui/Icon/Icon";
|
||||
|
||||
import styles from "./QuestionBrain.module.scss";
|
||||
|
||||
type QuestionBrainProps = {
|
||||
brainName?: string | null;
|
||||
brainId?: string;
|
||||
};
|
||||
export const QuestionBrain = ({
|
||||
brainName,
|
||||
brainId,
|
||||
}: QuestionBrainProps): JSX.Element => {
|
||||
const [brainLogoUrl, setBrainLogoUrl] = useState<string | undefined>(
|
||||
undefined
|
||||
);
|
||||
const { isDarkMode } = useUserSettingsContext();
|
||||
const { getBrain } = useBrainApi();
|
||||
|
||||
const getBrainLogoUrl = async () => {
|
||||
if (brainId) {
|
||||
try {
|
||||
const brain = await getBrain(brainId.toString());
|
||||
setBrainLogoUrl(brain?.integration_description?.integration_logo_url);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void getBrainLogoUrl();
|
||||
}, [brainId]);
|
||||
|
||||
if (brainName === undefined || brainName === null) {
|
||||
return <Fragment />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div data-testid="brain-tags" className={styles.brain_name_wrapper}>
|
||||
<Image
|
||||
className={isDarkMode ? styles.dark_image : ""}
|
||||
src={brainLogoUrl ? brainLogoUrl : "/default_brain_image.png"}
|
||||
alt="logo_image"
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
<Icon name="brain" size="normal" color="black" />
|
||||
<span className={styles.brain_name}>{brainName}</span>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,7 +1,4 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
|
||||
import { useUserSettingsContext } from "@/lib/context/UserSettingsProvider/hooks/useUserSettingsContext";
|
||||
|
||||
import styles from "./CurrentBrain.module.scss";
|
||||
|
||||
@ -17,7 +14,6 @@ export const CurrentBrain = ({
|
||||
remainingCredits,
|
||||
}: CurrentBrainProps): JSX.Element => {
|
||||
const { currentBrain, setCurrentBrainId } = useBrainContext();
|
||||
const { isDarkMode } = useUserSettingsContext();
|
||||
const removeCurrentBrain = (): void => {
|
||||
setCurrentBrainId(null);
|
||||
};
|
||||
@ -48,17 +44,7 @@ export const CurrentBrain = ({
|
||||
<div className={styles.left}>
|
||||
<span className={styles.title}>Talking to</span>
|
||||
<div className={styles.brain_name_wrapper}>
|
||||
<Image
|
||||
className={isDarkMode ? styles.dark_image : ""}
|
||||
src={
|
||||
currentBrain.integration_logo_url
|
||||
? currentBrain.integration_logo_url
|
||||
: "/default_brain_image.png"
|
||||
}
|
||||
alt="logo_image"
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
<Icon name="brain" size="small" color="black" />
|
||||
<span className={styles.brain_name}>{currentBrain.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user