Find similar footage from review item snapshots (#13662)

* Find similar footage from review item snapshots

* Include confidence score for similarity search

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -25,7 +25,7 @@ import { cn } from "@/lib/utils";
 import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
 import ObjectLifecycle from "./ObjectLifecycle";
 import Chip from "@/components/indicators/Chip";
-import { FaDownload } from "react-icons/fa";
+import { FaDownload, FaImages } from "react-icons/fa";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FaArrowsRotate } from "react-icons/fa6";
 import {
@@ -33,6 +33,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useNavigate } from "react-router-dom";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -234,6 +235,8 @@ function EventItem({
 
   const [hovered, setHovered] = useState(isMobile);
 
+  const navigate = useNavigate();
+
   return (
     <>
       <div
@@ -328,6 +331,27 @@ function EventItem({
                   <TooltipContent>View Object Lifecycle</TooltipContent>
                 </Tooltip>
               )}
+
+              {event.has_snapshot && config?.semantic_search.enabled && (
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Chip
+                      className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+                      onClick={() => {
+                        const similaritySearchParams = new URLSearchParams({
+                          search_type: "similarity",
+                          event_id: event.id,
+                        }).toString();
+
+                        navigate(`/search?${similaritySearchParams}`);
+                      }}
+                    >
+                      <FaImages className="size-4 text-white" />
+                    </Chip>
+                  </TooltipTrigger>
+                  <TooltipContent>Find Similar</TooltipContent>
+                </Tooltip>
+              )}
             </div>
           </div>
         )}