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

add additional theming options (#3155)

Browse Source 
* add additional theming options

* nit

* Update Filters.tsx
This commit is contained in:
pablodanswer
2024-11-18 14:56:48 -08:00
committed by GitHub
parent aa37051be9
commit d69180aeb8
11 changed files with 65 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1942,6 +1942,7 @@ export function ChatPage({
ref={innerSidebarElementRef}
toggleSidebar={toggleSidebar}
toggled={toggledSidebar && !settings?.isMobile}
backgroundToggled={toggledSidebar || showDocSidebar}
existingChats={chatSessions}
currentChatSession={selectedChatSession}
folders={folders}

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

@@ -33,6 +33,7 @@ interface HistorySidebarProps {
showDeleteModal?: (chatSession: ChatSession) => void;
stopGenerating?: () => void;
explicitlyUntoggle: () => void;
backgroundToggled?: boolean;
}
export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
@@ -51,6 +52,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
stopGenerating = () => null,
showShareModal,
showDeleteModal,
backgroundToggled,
},
ref: ForwardedRef<HTMLDivElement>
) => {
@@ -109,7 +111,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
explicitlyUntoggle={explicitlyUntoggle}
/>
{page == "chat" && (
<div className="mx-3 mt-4 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
<div className="mx-3 mt-4 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
<Link
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
href={
@@ -128,7 +130,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
}
}}
>
<FiEdit className="flex-none " />
<FiEdit className="flex-none text-text-history-sidebar-button" />
<p className="my-auto flex items-center text-sm">New Chat</p>
</Link>
<button
@@ -146,33 +148,33 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
});
})
}
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
>
<FiFolderPlus className="my-auto" />
<FiFolderPlus className="my-auto text-text-history-sidebar-button" />
<p className="my-auto flex items-center text-sm">New Folder</p>
</button>
<Link
href="/assistants/mine"
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
>
<AssistantsIconSkeleton className="h-4 w-4 my-auto" />
<AssistantsIconSkeleton className="h-4 w-4 my-auto text-text-history-sidebar-button" />
<p className="my-auto flex items-center text-sm">
Manage Assistants
</p>
</Link>
<Link
href="/prompts"
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
>
<ClosedBookIcon className="h-4 w-4 my-auto" />
<p className="my-auto flex items-center text-sm">
<ClosedBookIcon className="h-4 w-4 my-auto text-text-history-sidebar-button" />
<p className="my-auto flex items-center text-sm ">
Manage Prompts
</p>
</Link>
</div>
)}
<div className="border-b border-border pb-4 mx-3" />
<div className="border-b border-divider-history-sidebar-bar pb-4 mx-3" />
<PagesTab
newFolderId={newFolderId}
showDeleteModal={showDeleteModal}

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

@@ -49,7 +49,7 @@ export default function FixedLogo({
</div>
</Link>
<div className="mobile:hidden fixed left-2.5 bottom-4">
<FiSidebar />
<FiSidebar className="text-text-mobile-sidebar" />
</div>
</>
);

8
web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
View File

@@ -47,8 +47,8 @@ const ToggleSwitch = () => {
<button
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
activeTab === "search"
? "text-gray-800"
: "text-gray-500 hover:text-gray-700"
? "text-text-application-toggled"
: "text-text-application-untoggled hover:text-text-application-untoggled-hover"
}`}
onClick={() => handleTabChange("search")}
>
@@ -66,8 +66,8 @@ const ToggleSwitch = () => {
<button
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
activeTab === "chat"
? "text-gray-800"
: "text-gray-500 hover:text-gray-700"
? "text-text-application-toggled"
: "text-text-application-untoggled hover:text-text-application-untoggled-hover"
}`}
onClick={() => handleTabChange("chat")}
>

4
web/src/components/Dropdown.tsx
View File

@@ -262,9 +262,9 @@ export function DefaultDropdownElement({
my-1
select-none
cursor-pointer
bg-background
bg-transparent
rounded
hover:bg-hover-light
hover:bg-hover
`}
onClick={onSelect}
>

2
web/src/components/assistants/StarterMessage.tsx
View File

@@ -37,7 +37,7 @@ export function StarterMessages({
onClick={() => onSubmit(starterMessage.message)}
className={`relative flex ${
!isMobile && "w-40"
} flex-col gap-2 rounded-2xl shadow-sm border border-border px-3 py-2 text-start align-to text-wrap text-[15px] shadow-xs transition enabled:hover:bg-background-100 disabled:cursor-not-allowed line-clamp-3`}
} flex-col gap-2 rounded-2xl shadow-sm border border-border bg-background-starter-message px-3 py-2 text-start align-to text-wrap text-[15px] shadow-xs transition enabled:hover:bg-background-starter-message-hover disabled:cursor-not-allowed line-clamp-3`}
style={{ height: `5.2rem` }}
>
{starterMessage.name}

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

@@ -51,7 +51,7 @@ export default function LogoType({
onClick={() => toggleSidebar()}
className="pt-[2px] flex gap-x-2 items-center ml-4 desktop:invisible mb-auto"
>
<FiSidebar size={20} />
<FiSidebar size={20} className="text-text-mobile-sidebar" />
{!showArrow && (
<Logo className="desktop:hidden -my-2" height={24} width={24} />
)}
@@ -69,13 +69,15 @@ export default function LogoType({
<div className="max-w-[175px]">
{enterpriseSettings && enterpriseSettings.application_name ? (
<div className="w-full">
<HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
<HeaderTitle backgroundToggled={toggled}>
{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>Danswer</HeaderTitle>
<HeaderTitle backgroundToggled={toggled}>Danswer</HeaderTitle>
)}
</div>
</div>

19
web/src/components/search/DateRangeSelector.tsx
View File

@@ -3,15 +3,18 @@ import { FiCalendar, FiChevronDown, FiXCircle } from "react-icons/fi";
import { CustomDropdown } from "../Dropdown";
import { timeRangeValues } from "@/app/config/timeRange";
import { TimeRangeSelector } from "@/components/filters/TimeRangeSelector";
import { cn } from "@/lib/utils";
export function DateRangeSelector({
value,
onValueChange,
isHorizontal,
className,
}: {
value: DateRangePickerValue | null;
onValueChange: (value: DateRangePickerValue | null) => void;
isHorizontal?: boolean;
className?: string;
}) {
return (
<div>
@@ -19,18 +22,10 @@ export function DateRangeSelector({
dropdown={
<TimeRangeSelector
value={value}
className={`
border
border-border
bg-background
rounded-lg
flex
flex-col
w-64
max-h-96
overflow-y-auto
flex
overscroll-contain`}
className={cn(
"border border-border bg-background rounded-lg flex flex-col w-64 max-h-96 overflow-y-auto flex overscroll-contain",
className
)}
timeRangeValues={timeRangeValues}
onValueChange={onValueChange}
/>

10
web/src/components/search/filtering/FilterDropdown.tsx
View File

@@ -16,6 +16,8 @@ export function FilterDropdown({
dropdownWidth,
optionClassName,
resetValues,
backgroundColor,
dropdownColor,
}: {
options: Option[];
selected: string[];
@@ -26,6 +28,8 @@ export function FilterDropdown({
dropdownWidth?: string;
optionClassName?: string;
resetValues?: () => void;
backgroundColor?: string;
dropdownColor?: string;
}) {
return (
<div>
@@ -36,7 +40,7 @@ export function FilterDropdown({
border
border-border
rounded-lg
bg-background
${backgroundColor || "bg-background"}
flex
flex-col
${dropdownWidth || width}
@@ -62,7 +66,8 @@ export function FilterDropdown({
w-fit
text-emphasis
gap-x-1
hover:bg-hover-light
${dropdownColor || "bg-background"}
hover:bg-hover
${
ind === options.length - 1
? ""
@@ -99,6 +104,7 @@ export function FilterDropdown({
gap-x-2
border-border
cursor-pointer
${backgroundColor || "bg-background"}
hover:bg-hover-light`}
>
<div className="flex-none my-auto">{icon}</div>

9
web/src/components/search/filtering/Filters.tsx
View File

@@ -429,11 +429,13 @@ export function HorizontalSourceSelector({
isHorizontal
value={timeRange}
onValueChange={setTimeRange}
className="bg-background-search-filter"
/>
</div>
{existingSources.length > 0 && (
<FilterDropdown
backgroundColor="bg-background-search-filter"
options={listSourceMetadata()
.filter((source) => existingSources.includes(source.internalName))
.map((source) => ({
@@ -453,6 +455,7 @@ export function HorizontalSourceSelector({
}
icon={<FiMap size={16} />}
defaultDisplay="Sources"
dropdownColor="bg-background-search-filter-dropdown"
width="w-fit ellipsis truncate"
resetValues={resetSources}
dropdownWidth="w-40"
@@ -462,6 +465,7 @@ export function HorizontalSourceSelector({
{availableDocumentSets.length > 0 && (
<FilterDropdown
backgroundColor="bg-background-search-filter"
options={availableDocumentSets.map((documentSet) => ({
key: documentSet.name,
display: <>{documentSet.name}</>,
@@ -471,7 +475,8 @@ export function HorizontalSourceSelector({
icon={<FiBook size={16} />}
defaultDisplay="Sets"
resetValues={resetDocuments}
width="w-fit max-w-24 etext-llipsis truncate"
width="w-fit max-w-24 text-ellipsis truncate"
dropdownColor="bg-background-search-filter-dropdown"
dropdownWidth="max-w-36 w-fit"
optionClassName="truncate w-full break-all"
/>
@@ -479,6 +484,7 @@ export function HorizontalSourceSelector({
{availableTags.length > 0 && (
<FilterDropdown
backgroundColor="bg-background-search-filter"
options={availableTags.map((tag) => ({
key: `${tag.tag_key}=${tag.tag_value}`,
display: (
@@ -504,6 +510,7 @@ export function HorizontalSourceSelector({
icon={<FiTag size={16} />}
defaultDisplay="Tags"
resetValues={resetTags}
dropdownColor="bg-background-search-filter-dropdown"
width="w-fit max-w-24 ellipsis truncate"
dropdownWidth="max-w-80 w-fit"
optionClassName="truncate w-full break-all ellipsis"

16
web/tailwind-themes/tailwind.config.js
View File

@@ -101,6 +101,13 @@ module.exports = {
"background-strong": "var(--background-strong)",
"background-search": "var(--white)",
"background-history-sidebar-button-hover": "var(--background-200)",
"text-history-sidebar-button": "var(--text-800)",
"divider-history-sidebar-bar": "var(--border)",
"text-mobile-sidebar": "var(--text-800)",
"background-search-filter": "var(--background-100)",
"background-search-filter-dropdown": "var(--background-100)",
// colors for sidebar in chat, search, and manage settings
"background-sidebar": "var(--background-100)",
"background-chatbar": "var(--background-100)",
@@ -108,6 +115,11 @@ module.exports = {
"toggled-background": "var(--background-400)",
"untoggled-background": "var(--background-200)",
"background-starter-message": "var(--background)",
"background-starter-message-hover": "var(--background-100)",
"text-sidebar-toggled-header": "var(--text-800)",
"text-sidebar-header": "var(--text-800)",
"background-back-button": "var(--background-200)",
"text-back-button": "var(--text-800)",
@@ -119,6 +131,10 @@ module.exports = {
"text-settings-sidebar-strong": "var(--text-900)",
"background-settings-hover": "var(--background-200)",
"text-application-toggled": "var(--text-800)",
"text-application-untoggled": "var(--text-500)",
"text-application-untoggled-hover": "var(--text-700)",
"background-chat-hover": "var(--background-200)",
"background-chat-selected": "var(--background-200)",