From dc2a50034d901bfa065edd816354fabed7150f9e Mon Sep 17 00:00:00 2001 From: pablodanswer Date: Tue, 6 Aug 2024 12:44:14 -0700 Subject: [PATCH] Clean chat banner (#2056) * fully functional * formatting * ensure consistency with large logos * ensure mobile support --- .../[connector]/ConnectorWrapper.tsx | 2 +- .../admin/connectors/[connector]/Sidebar.tsx | 3 +- web/src/app/assistants/SidebarWrapper.tsx | 1 + web/src/app/chat/ChatBanner.tsx | 117 +++++++++++++----- web/src/app/chat/ChatPage.tsx | 20 +-- .../chat/sessionSidebar/HistorySidebar.tsx | 60 ++------- web/src/app/chat/shared/[chatId]/page.tsx | 4 +- .../app/chat/shared_chat_search/FixedLogo.tsx | 2 +- .../shared_chat_search/FunctionalWrapper.tsx | 9 +- web/src/app/search/page.tsx | 2 - web/src/components/admin/Layout.tsx | 16 --- .../admin/connectors/AdminSidebar.tsx | 2 +- web/src/components/chat_search/Header.tsx | 88 ++++++------- web/src/components/header/Header.tsx | 78 ------------ web/src/components/header/HeaderTitle.tsx | 14 +++ web/src/components/header/LogoType.tsx | 88 +++++++++++++ web/src/components/search/SearchSection.tsx | 7 +- 17 files changed, 263 insertions(+), 250 deletions(-) delete mode 100644 web/src/components/header/Header.tsx create mode 100644 web/src/components/header/HeaderTitle.tsx create mode 100644 web/src/components/header/LogoType.tsx diff --git a/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx b/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx index 62e77e21f..345ace085 100644 --- a/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx +++ b/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx @@ -4,7 +4,7 @@ import { ValidSources } from "@/lib/types"; import AddConnector from "./AddConnectorPage"; import { FormProvider } from "@/components/context/FormContext"; import Sidebar from "./Sidebar"; -import { HeaderTitle } from "@/components/header/Header"; +import { HeaderTitle } from "@/components/header/HeaderTitle"; import { Button } from "@tremor/react"; import { isValidSource } from "@/lib/sources"; diff --git a/web/src/app/admin/connectors/[connector]/Sidebar.tsx b/web/src/app/admin/connectors/[connector]/Sidebar.tsx index a340a5bc6..414a4d850 100644 --- a/web/src/app/admin/connectors/[connector]/Sidebar.tsx +++ b/web/src/app/admin/connectors/[connector]/Sidebar.tsx @@ -1,5 +1,6 @@ import { useFormContext } from "@/components/context/FormContext"; -import { HeaderTitle } from "@/components/header/Header"; +import { HeaderTitle } from "@/components/header/HeaderTitle"; + import { BackIcon, SettingsIcon } from "@/components/icons/icons"; import { Logo } from "@/components/Logo"; import { SettingsContext } from "@/components/settings/SettingsProvider"; diff --git a/web/src/app/assistants/SidebarWrapper.tsx b/web/src/app/assistants/SidebarWrapper.tsx index 126a0a826..c027e05e6 100644 --- a/web/src/app/assistants/SidebarWrapper.tsx +++ b/web/src/app/assistants/SidebarWrapper.tsx @@ -124,6 +124,7 @@ export default function SidebarWrapper({
(null); + const fullContentRef = useRef(null); + + useLayoutEffect(() => { + const checkOverflow = () => { + if (contentRef.current && fullContentRef.current) { + setIsOverflowing( + fullContentRef.current.scrollHeight > contentRef.current.clientHeight + ); + } + }; + + checkOverflow(); + window.addEventListener("resize", checkOverflow); + return () => window.removeEventListener("resize", checkOverflow); + }, []); + if (!settings?.enterpriseSettings?.custom_header_content) { return null; } + const renderMarkdown = (className: string) => ( + ( + + ), + p: ({ node, ...props }) => ( +

+ ), + }} + remarkPlugins={[remarkGfm]} + > + {settings.enterpriseSettings?.custom_header_content} + + ); return (

-
- diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx index 73b754f2a..70bb46058 100644 --- a/web/src/app/chat/ChatPage.tsx +++ b/web/src/app/chat/ChatPage.tsx @@ -66,7 +66,6 @@ import { useChatContext } from "@/components/context/ChatContext"; import { v4 as uuidv4 } from "uuid"; import { orderAssistantsForUser } from "@/lib/assistants/orderAssistants"; import { ChatPopup } from "./ChatPopup"; -import { ChatBanner } from "./ChatBanner"; import FunctionalHeader from "@/components/chat_search/Header"; import { useSidebarVisibility } from "@/components/chat_search/hooks"; @@ -1192,6 +1191,7 @@ export function ChatPage({
{liveAssistant && ( setMessage("")} page="chat" setSharingModalVisible={ @@ -1204,23 +1204,7 @@ export function ChatPage({ currentChatSession={selectedChatSession} /> )} -
-
- -
+ {documentSidebarInitialWidth !== undefined ? ( {({ getRootProps }) => ( diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx index 977398f87..ffd768f20 100644 --- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx +++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx @@ -11,13 +11,9 @@ import { } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; -import { BasicClickable } from "@/components/BasicClickable"; import { ChatSession } from "../interfaces"; -import { - NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED, - NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA, -} from "@/lib/constants"; +import { NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA } from "@/lib/constants"; import { Folder } from "../folders/interfaces"; import { createFolder } from "../folders/FolderManagement"; @@ -25,24 +21,16 @@ import { usePopup } from "@/components/admin/connectors/Popup"; import { SettingsContext } from "@/components/settings/SettingsProvider"; import React from "react"; -import { Logo } from "@/components/Logo"; -import { HeaderTitle } from "@/components/header/Header"; -import { TbLayoutSidebarRightExpand } from "react-icons/tb"; import { - AssistantsIcon, AssistantsIconSkeleton, - BackIcon, - BookIcon, - BookmarkIconSkeleton, ClosedBookIcon, - LefToLineIcon, - RightToLineIcon, } from "@/components/icons/icons"; import { PagesTab } from "./PagesTab"; import { Tooltip } from "@/components/tooltip/Tooltip"; import KeyboardSymbol from "@/lib/browserUtilities"; import { pageType } from "./types"; import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled"; +import LogoType from "@/components/header/LogoType"; interface HistorySidebarProps { page: pageType; @@ -115,43 +103,15 @@ export const HistorySidebar = forwardRef( flex flex-col relative h-screen - transition-transform`} + transition-transform + mt-2`} > -
-
- -
- -
- {enterpriseSettings && enterpriseSettings.application_name ? ( -
- - {enterpriseSettings.application_name} - - {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && ( -

Powered by Danswer

- )} -
- ) : ( - Danswer - )} -
- - {toggleSidebar && ( - - - - )} -
+ {page == "chat" && (
diff --git a/web/src/app/chat/shared/[chatId]/page.tsx b/web/src/app/chat/shared/[chatId]/page.tsx index 37d658eeb..a70ba5928 100644 --- a/web/src/app/chat/shared/[chatId]/page.tsx +++ b/web/src/app/chat/shared/[chatId]/page.tsx @@ -7,10 +7,10 @@ import { import { fetchSS } from "@/lib/utilsSS"; import { redirect } from "next/navigation"; import { BackendChatSession } from "../../interfaces"; -import { Header } from "@/components/header/Header"; import { SharedChatDisplay } from "./SharedChatDisplay"; import { Persona } from "@/app/admin/assistants/interfaces"; import { fetchAssistantsSS } from "@/lib/assistants/fetchAssistantsSS"; +import FunctionalHeader from "@/components/chat_search/Header"; async function getSharedChat(chatId: string) { const response = await fetchSS( @@ -57,7 +57,7 @@ export default async function Page({ params }: { params: { chatId: string } }) { return (
-
+ null} user={user} />
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx index 27a18a353..1517c45c2 100644 --- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx +++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx @@ -1,6 +1,6 @@ "use client"; -import { HeaderTitle } from "@/components/header/Header"; +import { HeaderTitle } from "@/components/header/HeaderTitle"; import { Logo } from "@/components/Logo"; import { SettingsContext } from "@/components/settings/SettingsProvider"; import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants"; diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx index 298338558..86fab2eaa 100644 --- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx +++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx @@ -115,7 +115,10 @@ export default function FunctionalWrapper({ window.removeEventListener("keydown", handleKeyDown); }; }, [router]); - const settings = useContext(SettingsContext)?.settings; + const combinedSettings = useContext(SettingsContext); + const settings = combinedSettings?.settings; + const chatBannerPresent = + combinedSettings?.enterpriseSettings?.custom_header_content; const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled); @@ -131,7 +134,9 @@ export default function FunctionalWrapper({ <> {(!settings || (settings.search_page_enabled && settings.chat_page_enabled)) && ( -
+
null, + sidebarToggled, }: { reset?: () => void; page: pageType; user: User | null; + sidebarToggled?: boolean; currentChatSession?: ChatSession | null | undefined; setSharingModalVisible?: (value: SetStateAction) => void; toggleSidebar: () => void; @@ -36,8 +33,6 @@ export default function FunctionalHeader({ const combinedSettings = useContext(SettingsContext); const enterpriseSettings = combinedSettings?.enterpriseSettings; - const commandSymbol = KeyboardSymbol(); - useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.metaKey || event.ctrlKey) { @@ -74,43 +69,40 @@ export default function FunctionalHeader({ }; return (
-
-
- -
-
- {enterpriseSettings && enterpriseSettings.application_name ? ( -
- - {enterpriseSettings.application_name} - - {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && ( -

Powered by Danswer

- )} -
- ) : ( - Danswer - )} -
-
+
+ - {page == "chat" && ( - - - - )} +
+
+
-
+
+ +
+ +
{setSharingModalVisible && (
setSharingModalVisible(true)} @@ -133,7 +125,7 @@ export default function FunctionalHeader({ : "") } > -
+
diff --git a/web/src/components/header/Header.tsx b/web/src/components/header/Header.tsx deleted file mode 100644 index 91ed0afcc..000000000 --- a/web/src/components/header/Header.tsx +++ /dev/null @@ -1,78 +0,0 @@ -"use client"; - -import { User } from "@/lib/types"; -import Link from "next/link"; -import React, { useContext } from "react"; -import { HeaderWrapper } from "./HeaderWrapper"; -import { SettingsContext } from "../settings/SettingsProvider"; -import { UserDropdown } from "../UserDropdown"; -import { Logo } from "../Logo"; -import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants"; -import { pageType } from "@/app/chat/sessionSidebar/types"; - -export function HeaderTitle({ children }: { children: JSX.Element | string }) { - const isString = typeof children === "string"; - const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl"; - - return ( -

- {children} -

- ); -} -interface HeaderProps { - user: User | null; - page?: pageType; -} - -export function Header({ user, page }: HeaderProps) { - const combinedSettings = useContext(SettingsContext); - if (!combinedSettings) { - return null; - } - const settings = combinedSettings.settings; - const enterpriseSettings = combinedSettings.enterpriseSettings; - - return ( - -
- -
-
- -
-
- {enterpriseSettings && enterpriseSettings.application_name ? ( -
- - {enterpriseSettings.application_name} - - {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && ( -

Powered by Danswer

- )} -
- ) : ( - Danswer - )} -
-
- - -
-
- -
-
-
- - ); -} - -/* - -*/ diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx new file mode 100644 index 000000000..2ec1d3cbf --- /dev/null +++ b/web/src/components/header/HeaderTitle.tsx @@ -0,0 +1,14 @@ +"use client"; + +import React from "react"; + +export function HeaderTitle({ children }: { children: JSX.Element | string }) { + const isString = typeof children === "string"; + const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl"; + + return ( +

+ {children} +

+ ); +} diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx new file mode 100644 index 000000000..123df264e --- /dev/null +++ b/web/src/components/header/LogoType.tsx @@ -0,0 +1,88 @@ +"use effect"; +import { useContext } from "react"; +import { FiSidebar } from "react-icons/fi"; +import { SettingsContext } from "../settings/SettingsProvider"; +import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants"; +import { LefToLineIcon, NewChatIcon, RightToLineIcon } from "../icons/icons"; +import { Tooltip } from "../tooltip/Tooltip"; +import { pageType } from "@/app/chat/sessionSidebar/types"; +import { Logo } from "../Logo"; +import { HeaderTitle } from "./HeaderTitle"; + +export default function LogoType({ + toggleSidebar, + hideOnMobile, + handleNewChat, + page, + toggled, + showArrow, +}: { + hideOnMobile?: boolean; + toggleSidebar?: () => void; + handleNewChat?: () => void; + page: pageType; + toggled?: boolean; + showArrow?: boolean; +}) { + const combinedSettings = useContext(SettingsContext); + const enterpriseSettings = combinedSettings?.enterpriseSettings; + + return ( +
+ {toggleSidebar && page == "chat" ? ( + + ) : ( +
+ +
+ )} +
+
+ {enterpriseSettings && enterpriseSettings.application_name ? ( +
+ {enterpriseSettings.application_name} + {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && ( +

Powered by Danswer

+ )} +
+ ) : ( + Danswer + )} +
+
+ + {page == "chat" && !showArrow && ( + + + + )} + {showArrow && ( + + + + )} +
+ ); +} diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx index a54ccf7ab..7da591077 100644 --- a/web/src/components/search/SearchSection.tsx +++ b/web/src/components/search/SearchSection.tsx @@ -514,6 +514,8 @@ export const SearchSection = ({ }); } + const chatBannerPresent = settings?.enterpriseSettings?.custom_header_content; + const { popup, setPopup } = usePopup(); return ( @@ -553,6 +555,7 @@ export const SearchSection = ({
setQuery("")} toggleSidebar={toggleSidebar} page="search" @@ -575,7 +578,9 @@ export const SearchSection = ({ /> { -
+
{!settings?.isMobile && (ccPairs.length > 0 || documentSets.length > 0) && (