Adjust Explore settings (#14409)

* Re-add search source chip without confidence percentage

* add confidence to tooltip only

* move search type to settings

* padding tweak

* docs update

* docs clarity

web/src/components/settings/SearchSettings.tsx

@@ -13,23 +13,36 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+import FilterSwitch from "../filter/FilterSwitch";
+import { SearchFilter, SearchSource } from "@/types/search";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 type SearchSettingsProps = {
   className?: string;
   columns: number;
   defaultView: string;
+  filter?: SearchFilter;
   setColumns: (columns: number) => void;
   setDefaultView: (view: string) => void;
+  onUpdateFilter: (filter: SearchFilter) => void;
 };
 export default function SearchSettings({
   className,
   columns,
   setColumns,
   defaultView,
+  filter,
   setDefaultView,
+  onUpdateFilter,
 }: SearchSettingsProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [open, setOpen] = useState(false);
 
+  const [searchSources, setSearchSources] = useState<SearchSource[]>([
+    "thumbnail",
+  ]);
+
   const trigger = (
     <Button className="flex items-center gap-2" size="sm">
       <FaCog className="text-secondary-foreground" />
@@ -94,6 +107,15 @@ export default function SearchSettings({
           </div>
         </>
       )}
+      {config?.semantic_search?.enabled && (
+        <SearchTypeContent
+          searchSources={searchSources}
+          setSearchSources={(sources) => {
+            setSearchSources(sources as SearchSource[]);
+            onUpdateFilter({ ...filter, search_type: sources });
+          }}
+        />
+      )}
     </div>
   );
 
@@ -113,3 +135,65 @@ export default function SearchSettings({
     />
   );
 }
+
+type SearchTypeContentProps = {
+  searchSources: SearchSource[] | undefined;
+  setSearchSources: (sources: SearchSource[] | undefined) => void;
+};
+export function SearchTypeContent({
+  searchSources,
+  setSearchSources,
+}: SearchTypeContentProps) {
+  return (
+    <>
+      <div className="overflow-x-hidden">
+        <DropdownMenuSeparator className="mb-3" />
+        <div className="space-y-0.5">
+          <div className="text-md">Search Source</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            Choose whether to search the thumbnails or descriptions of your
+            tracked objects.
+          </div>
+        </div>
+        <div className="mt-2.5 flex flex-col gap-2.5">
+          <FilterSwitch
+            label="Thumbnail Image"
+            isChecked={searchSources?.includes("thumbnail") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = searchSources ? [...searchSources] : [];
+
+              if (isChecked) {
+                updatedSources.push("thumbnail");
+                setSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("thumbnail");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+          <FilterSwitch
+            label="Description"
+            isChecked={searchSources?.includes("description") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = searchSources ? [...searchSources] : [];
+
+              if (isChecked) {
+                updatedSources.push("description");
+                setSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("description");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+}