mirror of
https://github.com/danswer-ai/danswer.git
synced 2025-04-08 11:58:34 +02:00
add some quick search filterl logic (UX) (#2218)
This commit is contained in:
pablodanswer
GitHub
parent
c1c35b00cb
commit
1e1b2a0901
@ -52,7 +52,7 @@ export default function LogoType({
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`bg-black cursor-pointer ${showArrow ? "desktop:invisible" : "invisible"} break-words inline-block w-fit ml-2 text-text-700 text-xl`}
|
||||
className={`cursor-pointer ${showArrow ? "desktop:invisible" : "invisible"} break-words inline-block w-fit ml-2 text-text-700 text-xl`}
|
||||
>
|
||||
<div className="max-w-[175px]">
|
||||
{enterpriseSettings && enterpriseSettings.application_name ? (
|
||||
|
||||
@ -3,34 +3,6 @@ import { DateRangePickerValue } from "@tremor/react";
|
||||
import { FiCalendar, FiChevronDown, FiXCircle } from "react-icons/fi";
|
||||
import { CustomDropdown, DefaultDropdownElement } from "../Dropdown";
|
||||
|
||||
function DateSelectorItem({
|
||||
children,
|
||||
onClick,
|
||||
skipBottomBorder,
|
||||
}: {
|
||||
children: string | JSX.Element;
|
||||
onClick?: () => void;
|
||||
skipBottomBorder?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
px-3
|
||||
text-sm
|
||||
bg-background
|
||||
hover:bg-hover
|
||||
py-2.5
|
||||
select-none
|
||||
cursor-pointer
|
||||
${skipBottomBorder ? "" : "border-b border-border"}
|
||||
`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const LAST_30_DAYS = "Last 30 days";
|
||||
export const LAST_7_DAYS = "Last 7 days";
|
||||
export const TODAY = "Today";
|
||||
@ -38,11 +10,11 @@ export const TODAY = "Today";
|
||||
export function DateRangeSelector({
|
||||
value,
|
||||
onValueChange,
|
||||
isHoritontal,
|
||||
isHorizontal,
|
||||
}: {
|
||||
value: DateRangePickerValue | null;
|
||||
onValueChange: (value: DateRangePickerValue | null) => void;
|
||||
isHoritontal?: boolean;
|
||||
isHorizontal?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
@ -105,23 +77,23 @@ export function DateRangeSelector({
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
flex
|
||||
text-sm
|
||||
px-3
|
||||
line-clamp-1
|
||||
py-1.5
|
||||
rounded-lg
|
||||
border
|
||||
border-border
|
||||
cursor-pointer
|
||||
hover:bg-hover`}
|
||||
flex
|
||||
text-sm
|
||||
px-3
|
||||
line-clamp-1
|
||||
py-1.5
|
||||
rounded-lg
|
||||
border
|
||||
border-border
|
||||
cursor-pointer
|
||||
hover:bg-hover`}
|
||||
>
|
||||
<FiCalendar className="flex-none my-auto mr-2" />{" "}
|
||||
<p className="line-clamp-1">
|
||||
{value?.selectValue ? (
|
||||
<div className="text-emphasis">{value.selectValue}</div>
|
||||
) : isHoritontal ? (
|
||||
{isHorizontal ? (
|
||||
"Date"
|
||||
) : value?.selectValue ? (
|
||||
<div className="text-emphasis">{value.selectValue}</div>
|
||||
) : (
|
||||
"Any time..."
|
||||
)}
|
||||
|
||||
@ -177,25 +177,25 @@ export const FullSearchBar = ({
|
||||
rows={3}
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={`
|
||||
m-0
|
||||
w-full
|
||||
shrink
|
||||
resize-none
|
||||
border-0
|
||||
bg-background-100
|
||||
whitespace-normal
|
||||
rounded-lg
|
||||
break-word
|
||||
overscroll-contain
|
||||
outline-none
|
||||
placeholder-subtle
|
||||
resize-none
|
||||
pl-4
|
||||
pr-12
|
||||
max-h-[6em]
|
||||
py-4
|
||||
h-14
|
||||
`}
|
||||
m-0
|
||||
w-full
|
||||
shrink
|
||||
resize-none
|
||||
border-0
|
||||
bg-background-100
|
||||
whitespace-normal
|
||||
rounded-lg
|
||||
break-word
|
||||
overscroll-contain
|
||||
outline-none
|
||||
placeholder-subtle
|
||||
resize-none
|
||||
pl-4
|
||||
pr-12
|
||||
max-h-[6em]
|
||||
py-4
|
||||
h-14
|
||||
`}
|
||||
autoFocus
|
||||
style={{ scrollbarWidth: "thin" }}
|
||||
role="textarea"
|
||||
@ -208,7 +208,7 @@ export const FullSearchBar = ({
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`flex ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full items-center space-x-3 py-3 px-4 `}
|
||||
className={`flex ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full items-center space-x-3 py-3 px-4`}
|
||||
>
|
||||
<div className={`-my-1 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}>
|
||||
{(ccPairs.length > 0 || documentSets.length > 0) && (
|
||||
|
||||
@ -659,7 +659,7 @@ export const SearchSection = ({
|
||||
<div
|
||||
className={`desktop:px-24 w-full ${chatBannerPresent && "mt-10"} pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto`}
|
||||
>
|
||||
<div className="absolute z-10 mobile:px-4 mobile:max-w-searchbar-max mobile:w-[90%] top-12 desktop:left-0 hidden 2xl:block mobile:left-1/2 mobile:transform mobile:-translate-x-1/2 desktop:w-52 3xl:w-64">
|
||||
<div className="absolute z-10 mobile:px-4 mobile:max-w-searchbar-max mobile:w-[90%] top-12 desktop:left-4 hidden 2xl:block mobile:left-1/2 mobile:transform mobile:-translate-x-1/2 desktop:w-52 3xl:w-64">
|
||||
{!settings?.isMobile &&
|
||||
(ccPairs.length > 0 || documentSets.length > 0) && (
|
||||
<SourceSelector
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FiCheck, FiChevronDown } from "react-icons/fi";
|
||||
import { FiCheck, FiChevronDown, FiX, FiXCircle } from "react-icons/fi";
|
||||
import { CustomDropdown } from "../../Dropdown";
|
||||
|
||||
interface Option {
|
||||
@ -15,6 +15,7 @@ export function FilterDropdown({
|
||||
width = "w-64",
|
||||
dropdownWidth,
|
||||
optionClassName,
|
||||
resetValues,
|
||||
}: {
|
||||
options: Option[];
|
||||
selected: string[];
|
||||
@ -24,6 +25,7 @@ export function FilterDropdown({
|
||||
width?: string;
|
||||
dropdownWidth?: string;
|
||||
optionClassName?: string;
|
||||
resetValues?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
@ -57,6 +59,7 @@ export function FilterDropdown({
|
||||
cursor-pointer
|
||||
w-fit
|
||||
text-emphasis
|
||||
gap-x-1
|
||||
hover:bg-hover-light
|
||||
${
|
||||
ind === options.length - 1 ? "" : "border-b border-border"
|
||||
@ -70,7 +73,7 @@ export function FilterDropdown({
|
||||
>
|
||||
{option.display}
|
||||
{isSelected && (
|
||||
<div className="ml-auto mr-1">
|
||||
<div className="ml-auto my-auto mr-1">
|
||||
<FiCheck />
|
||||
</div>
|
||||
)}
|
||||
@ -95,12 +98,24 @@ export function FilterDropdown({
|
||||
hover:bg-hover-light`}
|
||||
>
|
||||
<div className="flex-none my-auto">{icon}</div>
|
||||
{selected.length === 0 ? (
|
||||
{selected.length === 0 || resetValues ? (
|
||||
defaultDisplay
|
||||
) : (
|
||||
<p className="line-clamp-1">{selected.join(", ")}</p>
|
||||
)}
|
||||
<FiChevronDown className="my-auto ml-auto" />
|
||||
{resetValues && selected.length !== 0 ? (
|
||||
<div
|
||||
className="my-auto ml-auto p-0.5 rounded-full w-fit"
|
||||
onClick={(e) => {
|
||||
resetValues();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<FiXCircle />
|
||||
</div>
|
||||
) : (
|
||||
<FiChevronDown className="my-auto ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
</CustomDropdown>
|
||||
</div>
|
||||
|
||||
@ -411,12 +411,23 @@ export function HorizontalSourceSelector({
|
||||
});
|
||||
};
|
||||
|
||||
const resetSources = () => {
|
||||
setSelectedSources([]);
|
||||
};
|
||||
const resetDocuments = () => {
|
||||
setSelectedDocumentSets([]);
|
||||
};
|
||||
|
||||
const resetTags = () => {
|
||||
setSelectedTags([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-24">
|
||||
<DateRangeSelector
|
||||
isHoritontal
|
||||
isHorizontal
|
||||
value={timeRange}
|
||||
onValueChange={setTimeRange}
|
||||
/>
|
||||
@ -446,9 +457,10 @@ export function HorizontalSourceSelector({
|
||||
}
|
||||
icon={<FiMap size={16} />}
|
||||
defaultDisplay="Sources"
|
||||
width="w-fit max-w-24 ellipsis truncate"
|
||||
dropdownWidth="max-w-36 w-fit"
|
||||
optionClassName="truncate break-all ellipsis"
|
||||
width="w-fit ellipsis truncate"
|
||||
resetValues={resetSources}
|
||||
dropdownWidth="w-40"
|
||||
optionClassName="truncate w-full break-all ellipsis"
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -456,17 +468,13 @@ export function HorizontalSourceSelector({
|
||||
<FilterDropdown
|
||||
options={availableDocumentSets.map((documentSet) => ({
|
||||
key: documentSet.name,
|
||||
display: (
|
||||
<>
|
||||
<FiBookmark />
|
||||
<span className="ml-2 text-sm">{documentSet.name}</span>
|
||||
</>
|
||||
),
|
||||
display: <>{documentSet.name}</>,
|
||||
}))}
|
||||
selected={selectedDocumentSets}
|
||||
handleSelect={(option) => handleDocumentSetSelect(option.key)}
|
||||
icon={<FiBook size={16} />}
|
||||
defaultDisplay="Sets"
|
||||
resetValues={resetDocuments}
|
||||
width="w-fit max-w-24 ellipsis truncate"
|
||||
dropdownWidth="max-w-36 w-fit"
|
||||
optionClassName="truncate break-all ellipsis"
|
||||
@ -499,6 +507,7 @@ export function HorizontalSourceSelector({
|
||||
}}
|
||||
icon={<FiTag size={16} />}
|
||||
defaultDisplay="Tags"
|
||||
resetValues={resetTags}
|
||||
width="w-fit max-w-24 ellipsis truncate"
|
||||
dropdownWidth="max-w-80 w-fit"
|
||||
optionClassName="truncate break-all ellipsis"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user