administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-15 00:11:15 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

display label and camera on attachment chip

Browse Source
This commit is contained in:
Josh Hawkins 2026-04-09 09:09:48 -05:00
parent 925541cbd8
commit 7db3618fc7
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/components/chat/ChatAttachmentChip.tsx
View File

@ -1,5 +1,7 @@
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useSWR from "swr";
import { LuX, LuExternalLink } from "react-icons/lu"; import { LuX, LuExternalLink } from "react-icons/lu";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -7,7 +9,9 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { getTranslatedLabel } from "@/utils/i18n";
type ChatAttachmentChipProps = { type ChatAttachmentChipProps = {
eventId: string; eventId: string;
@ -17,8 +21,8 @@ type ChatAttachmentChipProps = {
/** /**
* Small horizontal chip rendering an event as an "attachment": a thumbnail, * Small horizontal chip rendering an event as an "attachment": a thumbnail,
* a short label, an optional remove X (composer mode), and an external-link * a friendly label like "Person on driveway", an optional remove X (composer
* icon that opens the event in Explore. * mode), and an external-link icon that opens the event in Explore.
*/ */
export function ChatAttachmentChip({ export function ChatAttachmentChip({
eventId, eventId,
@ -28,6 +32,18 @@ export function ChatAttachmentChip({
const apiHost = useApiHost(); const apiHost = useApiHost();
const { t } = useTranslation(["views/chat"]); const { t } = useTranslation(["views/chat"]);
const { data: eventData } = useSWR<{ label: string; camera: string }[]>(
`event_ids?ids=${eventId}`,
);
const evt = eventData?.[0];
const cameraName = useCameraFriendlyName(evt?.camera);
const displayLabel = evt
? t("attachment_chip_label", {
label: getTranslatedLabel(evt.label),
camera: cameraName,
})
: eventId;
return ( return (
<div <div
className={cn( className={cn(
@ -46,15 +62,20 @@ export function ChatAttachmentChip({
}} }}
/> />
</div> </div>
<span {evt ? (
className={cn( <span
"truncate text-xs", className={cn(
mode === "bubble" ? "text-primary-foreground/90" : "text-foreground", "truncate text-xs",
)} mode === "bubble"
title={eventId} ? "text-primary-foreground/90"
> : "text-foreground",
{eventId} )}
</span> >
{displayLabel}
</span>
) : (
<ActivityIndicator className="size-4" />
)}
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<a <a