diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx index 95352308078b..ee83f747984a 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx @@ -33,7 +33,7 @@ export const ChatInput = (): JSX.Element => { }} >
- +
{ const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext(); const { setIsBrainCreationModalOpened } = useBrainCreationContext(); + const { currentBrain, setCurrentBrainId } = useBrainContext(); + const { messages } = useChatContext(); + useChatNotificationsSync(); const buttons: ButtonType[] = [ @@ -32,6 +40,7 @@ const SelectedChatPage = (): JSX.Element => { onClick: () => { setIsBrainCreationModalOpened(true); }, + iconName: "brain", }, { label: "Add knowledge", @@ -39,9 +48,24 @@ const SelectedChatPage = (): JSX.Element => { onClick: () => { setShouldDisplayFeedCard(true); }, + iconName: "upload", + }, + { + label: "Manage current brain", + color: "primary", + onClick: () => { + window.location.href = `/studio/${currentBrain?.id}`; + }, + iconName: "edit", }, ]; + useEffect(() => { + if (!currentBrain && messages.length > 0) { + setCurrentBrainId(messages[messages.length - 1].brain_id as UUID); + } + }, [messages]); + return (
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx index b33d900b980b..886a352b57ea 100644 --- a/frontend/app/search/page.tsx +++ b/frontend/app/search/page.tsx @@ -34,6 +34,7 @@ const Search = (): JSX.Element => { onClick: () => { setIsBrainCreationModalOpened(true); }, + iconName: "brain", }, { label: "Add knowledge", @@ -41,6 +42,7 @@ const Search = (): JSX.Element => { onClick: () => { setShouldDisplayFeedCard(true); }, + iconName: "upload", }, ]; diff --git a/frontend/app/studio/page.tsx b/frontend/app/studio/page.tsx index 647c304cbd26..257bce8b99ed 100644 --- a/frontend/app/studio/page.tsx +++ b/frontend/app/studio/page.tsx @@ -42,6 +42,7 @@ const Studio = (): JSX.Element => { onClick: () => { setIsBrainCreationModalOpened(true); }, + iconName: "brain", }, { label: "Add knowledge", @@ -49,6 +50,7 @@ const Studio = (): JSX.Element => { onClick: () => { setShouldDisplayFeedCard(true); }, + iconName: "upload", }, ]; diff --git a/frontend/app/user/page.tsx b/frontend/app/user/page.tsx index 07364eb115c7..1d4aaea17b6c 100644 --- a/frontend/app/user/page.tsx +++ b/frontend/app/user/page.tsx @@ -38,6 +38,7 @@ const UserPage = (): JSX.Element => { onClick: () => { setIsLogoutModalOpened(true); }, + iconName: "logout", }; const userTabs: Tab[] = [ { @@ -91,12 +92,14 @@ const UserPage = (): JSX.Element => { onClick={() => setIsLogoutModalOpened(false)} color="primary" label={t("cancel", { ns: "logout" })} + iconName="close" > void handleLogout()} label={t("logoutButton")} + iconName="logout" >
diff --git a/frontend/lib/components/CurrentBrain/CurrentBrain.tsx b/frontend/lib/components/CurrentBrain/CurrentBrain.tsx index 33f7f43ff18f..bcd5cc1d8d23 100644 --- a/frontend/lib/components/CurrentBrain/CurrentBrain.tsx +++ b/frontend/lib/components/CurrentBrain/CurrentBrain.tsx @@ -4,7 +4,13 @@ import styles from "./CurrentBrain.module.scss"; import { Icon } from "../ui/Icon/Icon"; -export const CurrentBrain = (): JSX.Element => { +interface CurrentBrainProps { + allowingRemoveBrain: boolean; +} + +export const CurrentBrain = ({ + allowingRemoveBrain, +}: CurrentBrainProps): JSX.Element => { const { currentBrain, setCurrentBrainId } = useBrainContext(); const removeCurrentBrain = (): void => { @@ -25,14 +31,16 @@ export const CurrentBrain = (): JSX.Element => { {currentBrain.name}
-
{ - event.nativeEvent.stopImmediatePropagation(); - removeCurrentBrain(); - }} - > - -
+ {allowingRemoveBrain && ( +
{ + event.nativeEvent.stopImmediatePropagation(); + removeCurrentBrain(); + }} + > + +
+ )} ); diff --git a/frontend/lib/components/PageHeader/PageHeader.tsx b/frontend/lib/components/PageHeader/PageHeader.tsx index b48ec7b71c6f..8632c464e840 100644 --- a/frontend/lib/components/PageHeader/PageHeader.tsx +++ b/frontend/lib/components/PageHeader/PageHeader.tsx @@ -32,6 +32,7 @@ export const PageHeader = ({ label={button.label} onClick={button.onClick} color={button.color} + iconName={button.iconName} /> ))} diff --git a/frontend/lib/components/ui/Icon/Icon.module.scss b/frontend/lib/components/ui/Icon/Icon.module.scss index 543c84bc88ba..570dbc10de14 100644 --- a/frontend/lib/components/ui/Icon/Icon.module.scss +++ b/frontend/lib/components/ui/Icon/Icon.module.scss @@ -51,10 +51,6 @@ .white { color: Colors.$white; - - &:hover { - color: Colors.$accent; - } } .dangerous { diff --git a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss index 4da1ce7387f3..4920283f8c4a 100644 --- a/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss +++ b/frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss @@ -1,5 +1,6 @@ @use "@/styles/Colors.module.scss"; @use "@/styles/Radius.module.scss"; +@use "@/styles/ScreenSizes.module.scss"; @use "@/styles/Spacings.module.scss"; @use "@/styles/Typography.module.scss"; @@ -11,6 +12,7 @@ border-radius: Radius.$normal; border: 1.5px solid transparent; cursor: pointer; + display: flex; &.primary { border-color: Colors.$primary; @@ -32,3 +34,16 @@ } } } + +.icon_label { + display: flex; + flex-direction: row; + gap: Spacings.$spacing02; + align-items: center; + + @media (max-width: ScreenSizes.$small) { + .label { + display: none; + } + } +} diff --git a/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx b/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx index 3d49bf9b8ea7..f71bbdd054a4 100644 --- a/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx +++ b/frontend/lib/components/ui/QuivrButton/QuivrButton.tsx @@ -1,7 +1,10 @@ +import { useState } from "react"; + import { ButtonType } from "@/lib/types/QuivrButton"; import styles from "./QuivrButton.module.scss"; +import { Icon } from "../Icon/Icon"; import { LoaderIcon } from "../LoaderIcon/LoaderIcon"; export const QuivrButton = ({ @@ -9,14 +12,27 @@ export const QuivrButton = ({ label, color, isLoading, + iconName, }: ButtonType): JSX.Element => { + const [hovered, setHovered] = useState(false); + return (
setHovered(true)} + onMouseLeave={() => setHovered(false)} > {!isLoading ? ( - {label} +
+ + {label} +
) : ( )} diff --git a/frontend/lib/components/ui/SearchBar/SearchBar.tsx b/frontend/lib/components/ui/SearchBar/SearchBar.tsx index 957790b9a739..28e63e5fb6a1 100644 --- a/frontend/lib/components/ui/SearchBar/SearchBar.tsx +++ b/frontend/lib/components/ui/SearchBar/SearchBar.tsx @@ -56,7 +56,7 @@ export const SearchBar = ({ ${currentBrain ? styles.with_brain : ""} `} > - +
void; }