highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-09-28 21:05:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Various clean ups (#3413)

Browse Source 
* tbd

* minor

* prettify

* update sidebar values
This commit is contained in:
pablonyx
2024-12-11 09:19:14 -08:00
committed by GitHub
parent b9bad8b7a0
commit 264df3441b
10 changed files with 125 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/app/chat/ChatBanner.tsx
View File

@@ -60,7 +60,11 @@ export function ChatBanner() {
<div className={`flex justify-center w-full overflow-hidden pr-8`}> <div className={`flex justify-center w-full overflow-hidden pr-8`}>
<div <div
ref={contentRef} ref={contentRef}
className={`overflow-hidden ${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center max-w-full`} className={`overflow-hidden ${
settings.enterpriseSettings.two_lines_for_chat_header
? "line-clamp-2"
: "line-clamp-1"
} text-center max-w-full`}
> >
<MinimalMarkdown <MinimalMarkdown
className="prose text-sm max-w-full" className="prose text-sm max-w-full"
@@ -71,7 +75,11 @@ export function ChatBanner() {
<div className="absolute top-0 left-0 invisible flex justify-center max-w-full"> <div className="absolute top-0 left-0 invisible flex justify-center max-w-full">
<div <div
ref={fullContentRef} ref={fullContentRef}
className={`overflow-hidden invisible ${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center max-w-full`} className={`overflow-hidden invisible ${
settings.enterpriseSettings.two_lines_for_chat_header
? "line-clamp-2"
: "line-clamp-1"
} text-center max-w-full`}
> >
<MinimalMarkdown <MinimalMarkdown
className="prose text-sm max-w-full" className="prose text-sm max-w-full"

2
web/src/app/chat/ChatPage.tsx
View File

@@ -2230,7 +2230,7 @@ export function ChatPage({
ref={scrollableDivRef} ref={scrollableDivRef}
> >
{liveAssistant && onAssistantChange && ( {liveAssistant && onAssistantChange && (
<div className="z-20 fixed top-4 pointer-events-none left-0 w-full flex justify-center overflow-visible"> <div className="z-20 fixed top-0 pointer-events-none left-0 w-full flex justify-center overflow-visible">
{!settings?.isMobile && ( {!settings?.isMobile && (
<div <div
style={{ transition: "width 0.30s ease-out" }} style={{ transition: "width 0.30s ease-out" }}

2
web/src/app/chat/documentSidebar/ChatFilters.tsx
View File

@@ -85,7 +85,7 @@ export const ChatFilters = forwardRef<HTMLDivElement, ChatFiltersProps>(
return ( return (
<div <div
id="danswer-chat-sidebar" id="danswer-chat-sidebar"
className={`relative py-2 max-w-full ${ className={`relative max-w-full ${
!modal ? "border-l h-full border-sidebar-border" : "" !modal ? "border-l h-full border-sidebar-border" : ""
}`} }`}
onClick={(e) => { onClick={(e) => {

2
web/src/app/chat/sessionSidebar/HistorySidebar.tsx
View File

@@ -101,7 +101,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
flex-col relative flex-col relative
h-screen h-screen
transition-transform transition-transform
pt-2`} `}
> >
<LogoType <LogoType
showArrow={true} showArrow={true}

6
web/src/app/chat/shared_chat_search/FixedLogo.tsx
View File

@@ -22,7 +22,7 @@ export default function FixedLogo({
<> <>
<Link <Link
href="/chat" href="/chat"
className="fixed cursor-pointer flex z-40 left-2.5 top-2" className="fixed cursor-pointer flex z-40 left-4 top-2 h-8"
> >
<div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto"> <div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto">
<div className="flex-none my-auto"> <div className="flex-none my-auto">
@@ -46,8 +46,8 @@ export default function FixedLogo({
</div> </div>
</div> </div>
</Link> </Link>
<div className="mobile:hidden fixed left-2.5 bottom-4"> <div className="mobile:hidden fixed left-4 bottom-4">
{/* <FiSidebar className="text-text-mobile-sidebar" /> */} <FiSidebar className="text-text-mobile-sidebar" />
</div> </div>
</> </>
); );

4
web/src/components/admin/ClientLayout.tsx
View File

@@ -58,7 +58,7 @@ export function ClientLayout({
return ( return (
<div className="h-screen overflow-y-hidden"> <div className="h-screen overflow-y-hidden">
<div className="flex h-full"> <div className="flex h-full">
<div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] z-20 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto"> <div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border miniscroll overflow-auto">
<AdminSidebar <AdminSidebar
collections={[ collections={[
{ {
@@ -405,7 +405,7 @@ export function ClientLayout({
/> />
</div> </div>
<div className="pb-8 relative h-full overflow-y-auto w-full"> <div className="pb-8 relative h-full overflow-y-auto w-full">
<div className="fixed bg-background left-0 gap-x-4 mb-8 px-4 py-2 w-full items-center flex justify-end"> <div className="fixed left-0 gap-x-4 px-4 top-2 h-8 px-2 w-full items-center flex justify-end">
<UserDropdown /> <UserDropdown />
</div> </div>
<div className="pt-20 flex overflow-y-auto overflow-x-hidden h-full px-4 md:px-12"> <div className="pt-20 flex overflow-y-auto overflow-x-hidden h-full px-4 md:px-12">

40
web/src/components/admin/connectors/AdminSidebar.tsx
View File

@@ -38,31 +38,25 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
return ( return (
<div className="text-text-settings-sidebar pl-0"> <div className="text-text-settings-sidebar pl-0">
<nav className="space-y-2"> <nav className="space-y-2">
<div className="w-full justify-center mb-4 flex"> <div className="w-full ml-4 h-8 justify-start mb-4 flex">
<div className="w-52"> <div className="flex items-center gap-x-1 my-auto">
<Link className="flex flex-col" href="/chat"> <div className="flex-none my-auto">
<div className="max-w-[200px] w-full flex gap-x-1 my-auto"> <Logo height={24} width={24} />
<div className="flex-none mb-auto"> </div>
<Logo /> <div className="w-full">
</div> {enterpriseSettings && enterpriseSettings.application_name ? (
<div className="flex-grow min-w-0 my-auto"> <div>
{enterpriseSettings && enterpriseSettings.application_name ? ( <HeaderTitle>
<div className="w-full"> {enterpriseSettings.application_name}
<HeaderTitle backgroundToggled={true}> </HeaderTitle>
{enterpriseSettings.application_name} {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
</HeaderTitle> <p className="text-xs text-subtle">Powered by Danswer</p>
{!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
<p className="text-xs text-subtle">
Powered by Danswer
</p>
)}
</div>
) : (
<HeaderTitle backgroundToggled={true}>Danswer</HeaderTitle>
)} )}
</div> </div>
</div> ) : (
</Link> <HeaderTitle>Danswer</HeaderTitle>
)}
</div>
</div> </div>
</div> </div>
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">

24
web/src/components/chat_search/AssistantSelector.tsx
View File

@@ -135,7 +135,7 @@ const AssistantSelector = ({
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`w-full py-2.5 text-sm leading-5 font-medium rounded-md `w-full py-2.5 text-sm leading-5 font-medium rounded-md
${ ${
selected selected
? "bg-white text-gray-700 shadow" ? "bg-white text-gray-700 shadow"
@@ -290,11 +290,14 @@ const AssistantSelector = ({
return ( return (
<div className="pointer-events-auto relative" ref={dropdownRef}> <div className="pointer-events-auto relative" ref={dropdownRef}>
<div <div
className={ className={`h-12 items-end flex justify-center
(settings?.enterpriseSettings?.two_lines_for_chat_header ${
? "mt-20 " settings?.enterpriseSettings?.custom_header_content &&
: "mt-8") + " flex justify-center" (settings?.enterpriseSettings?.two_lines_for_chat_header
} ? "mt-16 "
: "mt-10")
}
`}
> >
<div <div
onClick={() => { onClick={() => {
@@ -307,20 +310,23 @@ const AssistantSelector = ({
}} }}
className="flex items-center gap-x-2 justify-between px-6 py-3 text-sm font-medium text-white bg-black rounded-full shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer" className="flex items-center gap-x-2 justify-between px-6 py-3 text-sm font-medium text-white bg-black rounded-full shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
> >
<div className="flex gap-x-2 items-center"> <div className="h-4 flex gap-x-2 items-center">
<AssistantIcon assistant={liveAssistant} size="xs" /> <AssistantIcon assistant={liveAssistant} size="xs" />
<span className="font-bold">{liveAssistant.name}</span> <span className="font-bold">{liveAssistant.name}</span>
</div> </div>
<div className="flex items-center"> <div className="h-4 flex items-center">
<span className="mr-2 text-xs"> <span className="mr-2 text-xs">
{truncateString(getDisplayNameForModel(currentLlm), 30)} {truncateString(getDisplayNameForModel(currentLlm), 30)}
</span> </span>
<FiChevronDown <FiChevronDown
className={`w-5 h-5 text-white transition-transform duration-300 transform ${ className={`w-3 h-3 text-white transition-transform duration-300 transform ${
isOpen ? "rotate-180" : "" isOpen ? "rotate-180" : ""
}`} }`}
aria-hidden="true" aria-hidden="true"
/> />
<div className="invisible w-0">
<AssistantIcon assistant={liveAssistant} size="xs" />
</div>
</div> </div>
</div> </div>
</div> </div>

122
web/src/components/chat_search/Header.tsx
View File

@@ -74,18 +74,18 @@ export default function FunctionalHeader({
router.push(newChatUrl); router.push(newChatUrl);
}; };
return ( return (
<div className="left-0 sticky top-0 z-20 w-full relative flex"> <div className="left-0 sticky top-0 z-20 w-full relative flex">
<div className="mt-2 cursor-pointer text-text-700 relative flex w-full"> <div className="items-end flex cursor-pointer text-text-700 relative flex w-full">
<LogoType <LogoType
assistantId={currentChatSession?.persona_id} assistantId={currentChatSession?.persona_id}
page={page} page={page}
toggleSidebar={toggleSidebar} toggleSidebar={toggleSidebar}
handleNewChat={handleNewChat} handleNewChat={handleNewChat}
/> />
<div className="mt-2 flex w-full h-8">
<div <div
style={{ transition: "width 0.30s ease-out" }} style={{ transition: "width 0.30s ease-out" }}
className={` className={`
mobile:hidden mobile:hidden
flex-none flex-none
mx-auto mx-auto
@@ -96,50 +96,67 @@ export default function FunctionalHeader({
h-full h-full
${sidebarToggled ? "w-[250px]" : "w-[0px]"} ${sidebarToggled ? "w-[250px]" : "w-[0px]"}
`} `}
/>
<div className="w-full mobile:-mx-20 desktop:px-4">
<ChatBanner />
</div>
<div className="invisible">
<LogoType
page={page}
toggleSidebar={toggleSidebar}
handleNewChat={handleNewChat}
/> />
</div>
<div className="absolute right-0 top-0 flex gap-x-2"> <div className="w-full mobile:-mx-20 desktop:px-4">
{setSharingModalVisible && ( <ChatBanner />
<div
onClick={() => setSharingModalVisible(true)}
className="mobile:hidden my-auto rounded cursor-pointer hover:bg-hover-light"
>
<FiShare2 size="18" />
</div>
)}
<div className="mobile:hidden flex my-auto">
<UserDropdown page={page} toggleUserSettings={toggleUserSettings} />
</div> </div>
<Link
className="desktop:hidden my-auto" <div className="invisible">
href={ <LogoType
`/${page}` + page={page}
(NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && toggleSidebar={toggleSidebar}
currentChatSession handleNewChat={handleNewChat}
? `?assistantId=${currentChatSession.persona_id}` />
: "") </div>
}
> <div className="absolute right-0 top-2 h-8 items-end flex gap-x-2">
<div className="cursor-pointer mr-4 flex-none text-text-700 hover:text-text-600 transition-colors duration-300"> {setSharingModalVisible && (
<NewChatIcon size={20} /> <div
onClick={() => setSharingModalVisible(true)}
className="mobile:hidden p-1 my-auto rounded cursor-pointer hover:bg-hover-light"
>
<FiShare2 size="16" />
</div>
)}
<div className="mobile:hidden flex my-auto">
<UserDropdown
page={page}
toggleUserSettings={toggleUserSettings}
/>
</div> </div>
</Link> <Link
</div> className="desktop:hidden my-auto"
<div href={
style={{ transition: "width 0.30s ease-out" }} `/${page}` +
className={` (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
currentChatSession
? `?assistantId=${currentChatSession.persona_id}`
: "")
}
>
<div className="cursor-pointer mr-4 flex-none text-text-700 hover:text-text-600 transition-colors duration-300">
<NewChatIcon size={20} />
</div>
</Link>
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
hidden
md:flex
mx-auto
overflow-y-hidden
transition-all
duration-300
ease-in-out
h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
`}
/>
</div>
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
hidden hidden
md:flex md:flex
mx-auto mx-auto
@@ -150,11 +167,11 @@ export default function FunctionalHeader({
h-full h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"} ${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
`} `}
/> />
{page != "assistants" && ( {page != "assistants" && (
<div <div
className={` className={`
h-20 absolute top-0 z-10 w-full sm:w-[90%] lg:w-[70%] h-20 absolute top-0 z-10 w-full sm:w-[90%] lg:w-[70%]
bg-gradient-to-b via-50% z-[-1] from-background via-background to-background/10 flex bg-gradient-to-b via-50% z-[-1] from-background via-background to-background/10 flex
transition-all duration-300 ease-in-out transition-all duration-300 ease-in-out
@@ -164,8 +181,9 @@ export default function FunctionalHeader({
: "left-1/2 transform -translate-x-1/2" : "left-1/2 transform -translate-x-1/2"
} }
`} `}
/> />
)} )}
</div>
</div> </div>
</div> </div>
); );

9
web/src/components/header/LogoType.tsx
View File

@@ -44,12 +44,12 @@ export default function LogoType({
<div <div
className={`${ className={`${
hideOnMobile && "mobile:hidden" hideOnMobile && "mobile:hidden"
} z-[100] mb-auto shrink-0 flex items-center text-xl`} } z-[100] mt-2 h-8 mb-auto shrink-0 flex items-center text-xl`}
> >
{toggleSidebar && page == "chat" ? ( {toggleSidebar && page == "chat" ? (
<button <button
onClick={() => toggleSidebar()} onClick={() => toggleSidebar()}
className="pt-[2px] flex gap-x-2 items-center ml-4 desktop:invisible mb-auto" className="flex gap-x-2 items-center ml-4 desktop:invisible "
> >
<FiSidebar size={20} className="text-text-mobile-sidebar" /> <FiSidebar size={20} className="text-text-mobile-sidebar" />
{!showArrow && ( {!showArrow && (
@@ -87,7 +87,7 @@ export default function LogoType({
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Link <Link
className="my-auto mobile:hidden" className="my-auto pt-1 mobile:hidden"
href={ href={
`/${page}` + `/${page}` +
(NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && assistantId (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && assistantId
@@ -103,7 +103,7 @@ export default function LogoType({
} }
}} }}
> >
<div className="cursor-pointer ml-2 flex-none text-text-700 hover:text-text-600 transition-colors duration-300"> <div className="cursor-pointer ml-2 my-auto text-text-700 hover:text-text-600 transition-colors duration-300">
<NewChatIcon size={20} /> <NewChatIcon size={20} />
</div> </div>
</Link> </Link>
@@ -112,6 +112,7 @@ export default function LogoType({
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
{showArrow && toggleSidebar && ( {showArrow && toggleSidebar && (
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>