add some quick search filterl logic (UX) (#2218)

web/src/components/header/LogoType.tsx

@@ -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 ? (

web/src/components/search/DateRangeSelector.tsx

@@ -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 
+            flex 
-              text-sm  
+            text-sm  
-              px-3
+            px-3
-              line-clamp-1
+            line-clamp-1
-              py-1.5 
+            py-1.5 
-              rounded-lg 
+            rounded-lg 
-              border 
+            border 
-              border-border 
+            border-border 
-              cursor-pointer 
+            cursor-pointer 
-              hover:bg-hover`}
+            hover:bg-hover`}
         >
           <FiCalendar className="flex-none my-auto mr-2" />{" "}
           <p className="line-clamp-1">
-            {value?.selectValue ? (
+            {isHorizontal ? (
-              <div className="text-emphasis">{value.selectValue}</div>
-            ) : isHoritontal ? (
               "Date"
+            ) : value?.selectValue ? (
+              <div className="text-emphasis">{value.selectValue}</div>
             ) : (
               "Any time..."
             )}

web/src/components/search/SearchBar.tsx

@@ -177,25 +177,25 @@ export const FullSearchBar = ({
         rows={3}
         onKeyDownCapture={handleKeyDown}
         className={`
-                m-0
+          m-0
-                w-full
+          w-full
-                shrink
+          shrink
-                resize-none
+          resize-none
-                border-0
+          border-0
-                bg-background-100
+          bg-background-100
-                whitespace-normal
+          whitespace-normal
-                rounded-lg
+          rounded-lg
-                break-word
+          break-word
-                overscroll-contain
+          overscroll-contain
-                outline-none
+          outline-none
-                placeholder-subtle
+          placeholder-subtle
-                resize-none
+          resize-none
-                pl-4
+          pl-4
-                pr-12
+          pr-12
-                max-h-[6em]
+          max-h-[6em]
-                py-4
+          py-4
-                h-14
+          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) && (

web/src/components/search/SearchSection.tsx

@@ -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

web/src/components/search/filtering/FilterDropdown.tsx

@@ -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>

web/src/components/search/filtering/Filters.tsx

@@ -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"
+            width="w-fit ellipsis truncate"
-            dropdownWidth="max-w-36 w-fit"
+            resetValues={resetSources}
-            optionClassName="truncate break-all ellipsis"
+            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: (
+              display: <>{documentSet.name}</>,
-                <>
-                  <FiBookmark />
-                  <span className="ml-2 text-sm">{documentSet.name}</span>
-                </>
-              ),
             }))}
             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"