Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various clean ups #3413

Merged
merged 4 commits into from
Dec 11, 2024
Merged

Various clean ups #3413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a944ab
tbd
pablonyx Dec 7, 2024
c3cb971
minor
pablonyx Dec 7, 2024
364eccb
prettify
pablonyx Dec 10, 2024
a25d339
update sidebar values
pablonyx Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions web/src/app/chat/ChatBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@ export function ChatBanner() {
<div className={`flex justify-center w-full overflow-hidden pr-8`}>
<div
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
className="prose text-sm max-w-full"
Expand All @@ -71,7 +75,11 @@ export function ChatBanner() {
<div className="absolute top-0 left-0 invisible flex justify-center max-w-full">
<div
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
className="prose text-sm max-w-full"
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/chat/ChatPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2231,7 +2231,7 @@ export function ChatPage({
ref={scrollableDivRef}
>
{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 && (
<div
style={{ transition: "width 0.30s ease-out" }}
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/chat/documentSidebar/ChatFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const ChatFilters = forwardRef<HTMLDivElement, ChatFiltersProps>(
return (
<div
id="danswer-chat-sidebar"
className={`relative py-2 max-w-full ${
className={`relative max-w-full ${
!modal ? "border-l h-full border-sidebar-border" : ""
}`}
onClick={(e) => {
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/chat/sessionSidebar/HistorySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
flex-col relative
h-screen
transition-transform
pt-2`}
`}
>
<LogoType
showArrow={true}
Expand Down
6 changes: 3 additions & 3 deletions web/src/app/chat/shared_chat_search/FixedLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function FixedLogo({
<>
<Link
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="flex-none my-auto">
Expand All @@ -46,8 +46,8 @@ export default function FixedLogo({
</div>
</div>
</Link>
<div className="mobile:hidden fixed left-2.5 bottom-4">
{/* <FiSidebar className="text-text-mobile-sidebar" /> */}
<div className="mobile:hidden fixed left-4 bottom-4">
<FiSidebar className="text-text-mobile-sidebar" />
</div>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/admin/ClientLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function ClientLayout({
return (
<div className="h-screen overflow-y-hidden">
<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
collections={[
{
Expand Down Expand Up @@ -417,7 +417,7 @@ export function ClientLayout({
/>
</div>
<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 />
</div>
<div className="pt-20 flex overflow-y-auto overflow-x-hidden h-full px-4 md:px-12">
Expand Down
40 changes: 17 additions & 23 deletions web/src/components/admin/connectors/AdminSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,31 +38,25 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
return (
<div className="text-text-settings-sidebar pl-0">
<nav className="space-y-2">
<div className="w-full justify-center mb-4 flex">
<div className="w-52">
<Link className="flex flex-col" href="/chat">
<div className="max-w-[200px] w-full flex gap-x-1 my-auto">
<div className="flex-none mb-auto">
<Logo />
</div>
<div className="flex-grow min-w-0 my-auto">
{enterpriseSettings && enterpriseSettings.application_name ? (
<div className="w-full">
<HeaderTitle backgroundToggled={true}>
{enterpriseSettings.application_name}
</HeaderTitle>
{!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 className="w-full ml-4 h-8 justify-start mb-4 flex">
<div className="flex items-center gap-x-1 my-auto">
<div className="flex-none my-auto">
<Logo height={24} width={24} />
</div>
<div className="w-full">
{enterpriseSettings && enterpriseSettings.application_name ? (
<div>
<HeaderTitle>
{enterpriseSettings.application_name}
</HeaderTitle>
{!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
<p className="text-xs text-subtle">Powered by Danswer</p>
)}
</div>
</div>
</Link>
) : (
<HeaderTitle>Danswer</HeaderTitle>
)}
</div>
</div>
</div>
<div className="flex w-full justify-center">
Expand Down
24 changes: 15 additions & 9 deletions web/src/components/chat_search/AssistantSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const AssistantSelector = ({
</Tab>
<Tab
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
? "bg-white text-gray-700 shadow"
Expand Down Expand Up @@ -290,11 +290,14 @@ const AssistantSelector = ({
return (
<div className="pointer-events-auto relative" ref={dropdownRef}>
<div
className={
(settings?.enterpriseSettings?.two_lines_for_chat_header
? "mt-20 "
: "mt-8") + " flex justify-center"
}
className={`h-12 items-end flex justify-center
${
settings?.enterpriseSettings?.custom_header_content &&
(settings?.enterpriseSettings?.two_lines_for_chat_header
? "mt-16 "
: "mt-10")
}
`}
>
<div
onClick={() => {
Expand All @@ -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"
>
<div className="flex gap-x-2 items-center">
<div className="h-4 flex gap-x-2 items-center">
<AssistantIcon assistant={liveAssistant} size="xs" />
<span className="font-bold">{liveAssistant.name}</span>
</div>
<div className="flex items-center">
<div className="h-4 flex items-center">
<span className="mr-2 text-xs">
{truncateString(getDisplayNameForModel(currentLlm), 30)}
</span>
<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" : ""
}`}
aria-hidden="true"
/>
<div className="invisible w-0">
<AssistantIcon assistant={liveAssistant} size="xs" />
</div>
</div>
</div>
</div>
Expand Down
120 changes: 69 additions & 51 deletions web/src/components/chat_search/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,18 +74,18 @@ export default function FunctionalHeader({
router.push(newChatUrl);
};
return (
<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="left-0 sticky top-0 z-20 w-full relative flex">
<div className="items-end flex cursor-pointer text-text-700 relative flex w-full">
<LogoType
assistantId={currentChatSession?.persona_id}
page={page}
toggleSidebar={toggleSidebar}
handleNewChat={handleNewChat}
/>

<div
style={{ transition: "width 0.30s ease-out" }}
className={`
<div className="mt-2 flex w-full h-8">
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
mobile:hidden
flex-none
mx-auto
Expand All @@ -96,50 +96,67 @@ export default function FunctionalHeader({
h-full
${sidebarToggled ? "w-[250px]" : "w-[0px]"}
`}
/>
/>

<div className="w-full mobile:-mx-20 desktop:px-4">
<ChatBanner />
</div>
<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="invisible">
<LogoType
page={page}
toggleSidebar={toggleSidebar}
handleNewChat={handleNewChat}
/>
</div>

<div className="absolute right-0 top-0 flex gap-x-2">
{setSharingModalVisible && (
<div
onClick={() => setSharingModalVisible(true)}
className="mobile:hidden my-auto rounded cursor-pointer hover:bg-hover-light"
>
<FiShare2 size="18" />
<div className="absolute right-0 top-2 h-8 items-end flex gap-x-2">
{setSharingModalVisible && (
<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 className="mobile:hidden flex my-auto">
<UserDropdown page={page} toggleUserSettings={toggleUserSettings} />
<Link
className="desktop:hidden my-auto"
href={
`/${page}` +
(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>
<Link
className="desktop:hidden my-auto"
href={
`/${page}` +
(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>
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
<div
style={{ transition: "width 0.30s ease-out" }}
className={`
hidden
md:flex
mx-auto
Expand All @@ -150,11 +167,11 @@ export default function FunctionalHeader({
h-full
${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
`}
/>
/>

{page != "assistants" && (
<div
className={`
{page != "assistants" && (
<div
className={`
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
transition-all duration-300 ease-in-out
Expand All @@ -164,8 +181,9 @@ export default function FunctionalHeader({
: "left-1/2 transform -translate-x-1/2"
}
`}
/>
)}
/>
)}
</div>
</div>
</div>
);
Expand Down
9 changes: 5 additions & 4 deletions web/src/components/header/LogoType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ export default function LogoType({
<div
className={`${
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" ? (
<button
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" />
{!showArrow && (
Expand Down Expand Up @@ -87,7 +87,7 @@ export default function LogoType({
<Tooltip>
<TooltipTrigger asChild>
<Link
className="my-auto mobile:hidden"
className="my-auto pt-1 mobile:hidden"
href={
`/${page}` +
(NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && assistantId
Expand All @@ -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} />
</div>
</Link>
Expand All @@ -112,6 +112,7 @@ export default function LogoType({
</Tooltip>
</TooltipProvider>
)}

{showArrow && toggleSidebar && (
<TooltipProvider delayDuration={0}>
<Tooltip>
Expand Down
Loading