web/public/locales/en/views/events.json

@@ -9,11 +9,7 @@
   "empty": {
     "alert": "There are no alerts to review",
     "detection": "There are no detections to review",
-    "motion": "No motion data found",
+    "motion": "No motion data found"
-    "recordingsDisabled": {
-      "title": "Recordings must be enabled",
-      "description": "Review items can only be created for a camera when recordings are enabled for that camera."
-    }
   },
   "timeline": "Timeline",
   "timeline.aria": "Select timeline",

web/public/locales/en/views/explore.json

@@ -166,9 +166,6 @@
     "tips": {
       "descriptionSaved": "Successfully saved description",
       "saveDescriptionFailed": "Failed to update the description: {{errorMessage}}"
-    },
-    "title": {
-      "label": "Title"
     }
   },
   "itemMenu": {

web/src/components/card/EmptyCard.tsx

@@ -2,18 +2,15 @@ import React from "react";
 import { Button } from "../ui/button";
 import Heading from "../ui/heading";
 import { Link } from "react-router-dom";
-import { cn } from "@/lib/utils";
 
 type EmptyCardProps = {
-  className?: string;
   icon: React.ReactNode;
   title: string;
-  description?: string;
+  description: string;
   buttonText?: string;
   link?: string;
 };
 export function EmptyCard({
-  className,
   icon,
   title,
   description,
@@ -21,12 +18,10 @@ export function EmptyCard({
   link,
 }: EmptyCardProps) {
   return (
-    <div className={cn("flex flex-col items-center gap-2", className)}>
+    <div className="flex flex-col items-center gap-2">
       {icon}
       <Heading as="h4">{title}</Heading>
-      {description && (
+      <div className="mb-3 text-secondary-foreground">{description}</div>
-        <div className="mb-3 text-secondary-foreground">{description}</div>
-      )}
       {buttonText?.length && (
         <Button size="sm" variant="select">
           <Link to={link ?? "#"}>{buttonText}</Link>

web/src/components/card/ReviewCard.tsx

@@ -39,7 +39,6 @@ import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { LuCircle } from "react-icons/lu";
 import { MdAutoAwesome } from "react-icons/md";
-import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -220,14 +219,12 @@ export default function ReviewCard({
         />
       </div>
       {event.data.metadata?.title && (
-        <GenAISummaryDialog review={event}>
+        <div className="flex items-center gap-1.5 rounded bg-secondary/50">
-          <div className="flex items-center gap-1.5 rounded bg-secondary/50 hover:underline">
+          <MdAutoAwesome className="size-3 shrink-0 text-primary" />
-            <MdAutoAwesome className="size-3 shrink-0 text-primary" />
+          <span className="truncate text-xs text-primary">
-            <span className="truncate text-xs text-primary">
+            {event.data.metadata.title}
-              {event.data.metadata.title}
+          </span>
-            </span>
+        </div>
-          </div>
-        </GenAISummaryDialog>
       )}
     </div>
   );

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -6,15 +6,16 @@ import {
   ThreatLevel,
   THREAT_LEVEL_LABELS,
 } from "@/types/review";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { MdAutoAwesome } from "react-icons/md";
 
 type GenAISummaryChipProps = {
   review?: ReviewSegment;
+  onClick: () => void;
 };
-export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
+export function GenAISummaryChip({ review, onClick }: GenAISummaryChipProps) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -28,6 +29,7 @@ export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
         isVisible ? "translate-y-0 opacity-100" : "-translate-y-4 opacity-0",
         isDesktop ? "bg-card" : "bg-secondary-foreground",
       )}
+      onClick={onClick}
     >
       <MdAutoAwesome className="shrink-0" />
       <span className="truncate">{review?.data.metadata?.title}</span>
@@ -38,12 +40,10 @@ export function GenAISummaryChip({ review }: GenAISummaryChipProps) {
 type GenAISummaryDialogProps = {
   review?: ReviewSegment;
   onOpen?: (open: boolean) => void;
-  children: React.ReactNode;
 };
 export function GenAISummaryDialog({
   review,
   onOpen,
-  children,
 }: GenAISummaryDialogProps) {
   const { t } = useTranslation(["views/explore"]);
 
@@ -104,7 +104,7 @@ export function GenAISummaryDialog({
   return (
     <Overlay open={open} onOpenChange={setOpen}>
       <Trigger asChild>
-        <div>{children}</div>
+        <GenAISummaryChip review={review} onClick={() => setOpen(true)} />
       </Trigger>
       <Content
         className={cn(
@@ -115,10 +115,6 @@ export function GenAISummaryDialog({
         )}
       >
         {t("aiAnalysis.title")}
-        <div className="text-sm text-primary/40">
-          {t("details.title.label")}
-        </div>
-        <div className="text-sm">{aiAnalysis.title}</div>
         <div className="text-sm text-primary/40">
           {t("details.description.label")}
         </div>

web/src/components/timeline/DetailStream.tsx

@@ -31,7 +31,6 @@ import { PiSlidersHorizontalBold } from "react-icons/pi";
 import { MdAutoAwesome } from "react-icons/md";
 import { isPWA } from "@/utils/isPWA";
 import { isInIframe } from "@/utils/isIFrame";
-import { GenAISummaryDialog } from "../overlay/chip/GenAISummaryChip";
 
 type DetailStreamProps = {
   reviewItems?: ReviewSegment[];
@@ -439,18 +438,7 @@ function ReviewGroup({
                       {review.data.metadata.title}
                     </TooltipContent>
                   </Tooltip>
-                  <GenAISummaryDialog
+                  <span className="truncate">{review.data.metadata.title}</span>
-                    review={review}
-                    onOpen={(open) => {
-                      if (open) {
-                        onSeek(review.start_time, false);
-                      }
-                    }}
-                  >
-                    <span className="truncate hover:underline">
-                      {review.data.metadata.title}
-                    </span>
-                  </GenAISummaryDialog>
                 </div>
               )}
               <div className="flex flex-row items-center gap-1.5">

web/src/types/card.ts

@@ -1,4 +0,0 @@
-export type EmptyCardData = {
-  title: string;
-  description?: string;
-};

web/src/views/events/EventView.tsx

@@ -56,8 +56,6 @@ import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
-import { EmptyCard } from "@/components/card/EmptyCard";
-import { EmptyCardData } from "@/types/card";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -134,24 +132,6 @@ export default function EventView({
     }
   }, [filter, showReviewed, reviewSummary]);
 
-  const emptyCardData: EmptyCardData = useMemo(() => {
-    if (
-      !config ||
-      Object.values(config.cameras).find(
-        (cam) => cam.record.enabled_in_config,
-      ) != undefined
-    ) {
-      return {
-        title: t("empty." + severity.replace(/_/g, " ")),
-      };
-    }
-
-    return {
-      title: t("empty.recordingsDisabled.title"),
-      description: t("empty.recordingsDisabled.description"),
-    };
-  }, [config, severity, t]);
-
   // review interaction
 
   const [selectedReviews, setSelectedReviews] = useState<ReviewSegment[]>([]);
@@ -432,7 +412,6 @@ export default function EventView({
             timeRange={timeRange}
             startTime={startTime}
             loading={severity != severityToggle}
-            emptyCardData={emptyCardData}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -451,7 +430,6 @@ export default function EventView({
             startTime={startTime}
             filter={filter}
             motionOnly={motionOnly}
-            emptyCardData={emptyCardData}
             onOpenRecording={onOpenRecording}
           />
         )}
@@ -477,7 +455,6 @@ type DetectionReviewProps = {
   timeRange: { before: number; after: number };
   startTime?: number;
   loading: boolean;
-  emptyCardData: EmptyCardData;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (
@@ -501,7 +478,6 @@ function DetectionReview({
   timeRange,
   startTime,
   loading,
-  emptyCardData,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -761,12 +737,10 @@ function DetectionReview({
         )}
 
         {!loading && currentItems?.length === 0 && (
-          <EmptyCard
+          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
-            className="y-translate-1/2 absolute left-[50%] top-[50%] -translate-x-1/2"
+            <LuFolderCheck className="size-16" />
-            title={emptyCardData.title}
+            {t("empty." + severity.replace(/_/g, " "))}
-            description={emptyCardData.description}
+          </div>
-            icon={<LuFolderCheck className="size-16" />}
-          />
         )}
 
         <div
@@ -901,7 +875,6 @@ type MotionReviewProps = {
   startTime?: number;
   filter?: ReviewFilter;
   motionOnly?: boolean;
-  emptyCardData: EmptyCardData;
   onOpenRecording: (data: RecordingStartingPoint) => void;
 };
 function MotionReview({
@@ -912,9 +885,9 @@ function MotionReview({
   startTime,
   filter,
   motionOnly = false,
-  emptyCardData,
   onOpenRecording,
 }: MotionReviewProps) {
+  const { t } = useTranslation(["views/events"]);
   const segmentDuration = 30;
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -1107,12 +1080,9 @@ function MotionReview({
 
   if (motionData?.length === 0) {
     return (
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
-        <EmptyCard
+        <LuFolderX className="size-16" />
-          title={emptyCardData.title}
+        {t("empty.motion")}
-          description={emptyCardData.description}
-          icon={<LuFolderX className="size-16" />}
-        />
       </div>
     );
   }

web/src/views/recording/RecordingView.tsx

@@ -66,10 +66,7 @@ import {
 import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { DetailStreamProvider } from "@/context/detail-stream-context";
-import {
+import { GenAISummaryDialog } from "@/components/overlay/chip/GenAISummaryChip";
-  GenAISummaryDialog,
-  GenAISummaryChip,
-} from "@/components/overlay/chip/GenAISummaryChip";
 
 const DATA_REFRESH_TIME = 600000; // 10 minutes
 
@@ -742,9 +739,7 @@ export function RecordingView({
                   <GenAISummaryDialog
                     review={activeReviewItem}
                     onOpen={onAnalysisOpen}
-                  >
+                  />
-                    <GenAISummaryChip review={activeReviewItem} />
-                  </GenAISummaryDialog>
                 )}
 
                 <DynamicVideoPlayer
@@ -1002,9 +997,7 @@ function Timeline({
       )}
     >
       {isMobile && timelineType == "timeline" && (
-        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen}>
+        <GenAISummaryDialog review={activeReviewItem} onOpen={onAnalysisOpen} />
-          <GenAISummaryChip review={activeReviewItem} />
-        </GenAISummaryDialog>
       )}
 
       {timelineType != "detail" && (