@cccsaurora/howler-ui 2.18.0-dev.824 → 2.18.0-dev.840

package/components/elements/hit/elements/Assigned.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+vi.mock('commons/components/app/hooks', () => ({
+    useAppUser: () => ({ user: { username: 'current-user' } })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import { HitLayout } from '../HitLayout';
+import Assigned from './Assigned';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const createWrapper = (viewers) => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            viewers,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            emit: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            isOpen: () => true,
+            fetchViewers: vi.fn()
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('Assigned', () => {
+    it('renders the assignment avatar', () => {
+        const hit = createMockHit({ howler: { assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+    });
+    it('renders viewer avatars from socket context, filtering out current user', () => {
+        const hit = createMockHit({ howler: { id: 'hit-1', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), {
+            wrapper: createWrapper({ 'hit-1': ['viewer-a', 'viewer-b', 'current-user'] })
+        });
+        expect(screen.getByTestId('avatar-viewer-a')).toBeInTheDocument();
+        expect(screen.getByTestId('avatar-viewer-b')).toBeInTheDocument();
+        expect(screen.queryByText('current-user')).not.toBeInTheDocument();
+    });
+    it('renders no viewer avatars when no viewers exist', () => {
+        const hit = createMockHit({ howler: { id: 'hit-2', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+        expect(screen.queryByTestId('avatar-viewer-a')).not.toBeInTheDocument();
+    });
+});

package/components/elements/hit/outlines/DefaultOutline.js

@@ -41,7 +41,7 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
                 if (!displayedData) {
                     return null;
                 }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, hit: hit, children: displayedData })] }, field));
+                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
             })] }));
 };
 export default memo(DefaultOutline);

package/components/elements/hit/related/RelatedRecords.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link as LinkIcon } from '@mui/icons-material';
+import { alpha, Box, Chip, Divider, Stack, useTheme } from '@mui/material';
+import CasePreview from '@cccsaurora/howler-ui/components/elements/case/CasePreview';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import ObservablePreview from '@cccsaurora/howler-ui/components/elements/observable/ObservablePreview';
+import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelatedRecords';
+import { identity, uniq } from 'lodash-es';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { isCase, isHit, isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
+import HitPreview from '../HitPreview';
+const RecordLink = ({ to, ariaLabel, children }) => {
+    const theme = useTheme();
+    return (_jsxs(Box, { p: 1, flex: 1, position: "relative", sx: {
+            '& > a': {
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create('background-color', {
+                    duration: theme.transitions.duration.shortest
+                }),
+                '&:hover': {
+                    backgroundColor: alpha('#555', 0.5)
+                }
+            }
+        }, children: [_jsx(Link, { to: to, style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel }), children] }));
+};
+const RelatedRecords = ({ hit }) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState(null);
+    const related = useMemo(() => hit?.howler.related ?? [], [hit?.howler.related]);
+    const records = useRelatedRecords(related, open);
+    return (_jsxs(ChipPopper
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    , { 
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        icon: _jsx(LinkIcon, {}), label: _jsx("span", { style: { cursor: 'pointer' }, children: t('hit.header.related', { count: related.length }) }), slotProps: {
+            chip: { disabled: related.length < 1 },
+            paper: {
+                elevation: 4,
+                onAuxClick: ev => ev.stopPropagation()
+            }
+        }, disablePortal: false, placement: "bottom-end", onToggle: _open => setOpen(_open), children: [_jsx(Stack, { direction: "row", spacing: 1, mb: 1, justifyContent: "end", children: uniq(records.map(record => record.__index))
+                    .filter(identity)
+                    .map(_type => (_jsx(Chip, { color: _type === filter ? 'primary' : 'default', label: _type, onClick: () => setFilter(current => (current === _type ? null : _type)) }, _type))) }), _jsxs(Stack, { maxWidth: "40vw", maxHeight: "70vh", sx: { overflowY: 'auto' }, children: [_jsx(Divider, {}), records
+                        .filter(record => !filter || record.__index === filter)
+                        .map(entry => {
+                        if (isHit(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/hits/${key}`, ariaLabel: t('hit.header.view.hit', { id: key }), children: _jsx(HitPreview, { hit: entry }) }, key));
+                        }
+                        else if (isCase(entry)) {
+                            const key = entry.case_id;
+                            return (_jsx(RecordLink, { to: `/cases/${key}`, ariaLabel: t('hit.header.view.case', { id: key }), children: _jsx(CasePreview, { case: entry }) }, key));
+                        }
+                        else if (isObservable(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/observables/${key}`, ariaLabel: t('hit.header.view.observable', { id: key }), children: _jsx(ObservablePreview, { observable: entry }) }, key));
+                        }
+                    })] })] }));
+};
+export default memo(RelatedRecords);

package/components/elements/observable/ObservableCard.d.ts

@@ -0,0 +1,6 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+declare const _default: import("react").NamedExoticComponent<{
+    id?: string;
+    observable?: Observable;
+}>;
+export default _default;

package/components/elements/observable/ObservableCard.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardContent, Skeleton } from '@mui/material';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import { memo, useEffect } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import ObservablePreview from './ObservablePreview';
+const ObservableCard = ({ id, observable: _observable }) => {
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const observable = useContextSelector(RecordContext, ctx => _observable ?? ctx.records[id]);
+    useEffect(() => {
+        if (!observable) {
+            getRecord(id);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    if (!observable) {
+        return _jsx(Skeleton, { variant: "rounded", height: "200px" });
+    }
+    return (_jsx(HowlerCard, { sx: { position: 'relative' }, children: _jsx(CardContent, { children: _jsx(ObservablePreview, { observable: observable }) }) }));
+};
+export default memo(ObservableCard);

package/components/elements/observable/ObservablePreview.d.ts

@@ -0,0 +1,6 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+type PreviewProps = {
+    observable: Observable;
+};
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
+export default _default;

package/components/elements/observable/ObservablePreview.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Chip, IconButton, Stack, Typography, useTheme } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const ObservablePreview = ({ observable }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (_jsx(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: observable.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: observable.event.kind }), observable.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: observable.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), observable.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", observable.event.type.join(', ')] })), observable.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", observable.event.module] }))] }) }));
+};
+export default memo(ObservablePreview);

package/components/elements/{hit/HitComments.d.ts → record/RecordComments.d.ts}

@@ -1,11 +1,12 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import { type FC } from 'react';
-interface HitCommentsProps {
-    hit: Hit;
+interface RecordCommentsProps {
+    record: Hit | Observable;
     users: {
         [id: string]: HowlerUser;
     };
 }
-declare const HitComments: FC<HitCommentsProps>;
-export default HitComments;
+declare const RecordComments: FC<RecordCommentsProps>;
+export default RecordComments;

package/components/elements/{hit/HitComments.js → record/RecordComments.js}

@@ -10,12 +10,13 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { compareTimestamp, sortByTimestamp } from '@cccsaurora/howler-ui/utils/utils';
 import Comment from '../Comment';
 import HowlerAvatar from '../display/HowlerAvatar';
 import TypingIndicator from '../display/TypingIndicator';
 const MAX_LENGTH = 5000;
-const HitComments = ({ hit, users }) => {
+const RecordComments = ({ record, users }) => {
     const { user } = useAppUser();
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -28,7 +29,7 @@ const HitComments = ({ hit, users }) => {
     const [length, setLength] = useState(0);
     const [analyticId, setAnalyticId] = useState();
     const [analyticComments, setAnalyticComments] = useState([]);
-    const [comments, setComments] = useState(sortByTimestamp(hit?.howler?.comment));
+    const [comments, setComments] = useState(sortByTimestamp(record?.howler?.comment));
     const input = useRef();
     /**
      * Set the list of typers based on updates from the websocket
@@ -50,20 +51,20 @@ const HitComments = ({ hit, users }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handler]);
     useEffect(() => {
-        if (hit?.howler?.analytic) {
-            getMatchingAnalytic(hit).then(analytic => {
+        if (isHit(record) && record.howler.analytic) {
+            getMatchingAnalytic(record).then(analytic => {
                 setAnalyticId(analytic?.analytic_id);
                 setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getMatchingAnalytic, hit?.howler?.analytic]);
+    }, [getMatchingAnalytic, record]);
     const onSubmit = useCallback(async () => {
-        if (!input.current?.value || !hit || input.current.value.length > MAX_LENGTH)
+        if (!input.current?.value || !record || input.current.value.length > MAX_LENGTH)
             return;
         setLoading(true);
         try {
-            const result = await dispatchApi(api.hit.comments.post(hit.howler.id, input.current.value), {
+            const result = await dispatchApi(api.hit.comments.post(record.howler.id, input.current.value), {
                 showError: true,
                 throwError: true,
                 logError: false
@@ -75,23 +76,23 @@ const HitComments = ({ hit, users }) => {
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, hit]);
+    }, [dispatchApi, record]);
     /**
      * Emit a typing event when textbox is focused
      */
     const onFocus = useCallback(() => emit({
         broadcast: true,
         action: 'typing',
-        id: hit?.howler?.id
-    }), [emit, hit?.howler?.id]);
+        id: record?.howler?.id
+    }), [emit, record?.howler?.id]);
     /**
      * Emit a stop typing event when textbox is blurred
      */
     const onBlur = useCallback(() => emit({
         broadcast: true,
         action: 'stop_typing',
-        id: hit?.howler?.id
-    }), [emit, hit?.howler?.id]);
+        id: record?.howler?.id
+    }), [emit, record?.howler?.id]);
     const onClear = useCallback(() => {
         input.current.value = '';
         setShowClear(false);
@@ -108,16 +109,16 @@ const HitComments = ({ hit, users }) => {
     }, [loading, onSubmit]);
     const checkLength = useCallback(() => setLength(input.current?.value.length), []);
     const handleDelete = useCallback(async (commentId) => {
-        await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
+        await dispatchApi(api.hit.comments.del(record.howler.id, [commentId]), { throwError: true, showError: true });
         setComments(comments.filter(cmt => cmt.id !== commentId));
-    }, [comments, dispatchApi, hit?.howler?.id]);
+    }, [comments, dispatchApi, record?.howler?.id]);
     const handleEdit = useCallback(async (commentId, editValue) => {
-        await dispatchApi(api.hit.comments.put(hit.howler.id, commentId, editValue), {
+        await dispatchApi(api.hit.comments.put(record.howler.id, commentId, editValue), {
             throwError: true,
             showError: true
         });
         setComments(comments.map(cmt => (cmt.id !== commentId ? cmt : { ...cmt, value: editValue })));
-    }, [comments, dispatchApi, hit?.howler?.id]);
+    }, [comments, dispatchApi, record?.howler?.id]);
     const handleQuote = useCallback((value) => {
         if (input.current) {
             // We use trimStart here so there isn't a bunch of newlines at the beginning of the comment
@@ -135,27 +136,27 @@ const HitComments = ({ hit, users }) => {
     }, []);
     const handleReact = useCallback(async (commentId, type) => {
         if (type) {
-            await dispatchApi(api.hit.comments.react.put(hit.howler.id, commentId, type));
+            await dispatchApi(api.hit.comments.react.put(record.howler.id, commentId, type));
             setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: type } }));
         }
         else {
-            await dispatchApi(api.hit.comments.react.del(hit.howler.id, commentId));
+            await dispatchApi(api.hit.comments.react.del(record.howler.id, commentId));
             setComments(comments.map(cmt => cmt.id !== commentId
                 ? cmt
                 : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } }));
         }
-    }, [comments, dispatchApi, hit?.howler.id, user.username]);
+    }, [comments, dispatchApi, record?.howler.id, user.username]);
     /**
      * Handle loading the comments when the hit changes
      */
     useEffect(() => {
-        if (hit?.howler?.comment) {
-            setComments(hit?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
+        if (record?.howler?.comment) {
+            setComments(record?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
         }
-        else if (!hit) {
+        else if (!record) {
             setComments([]);
         }
-    }, [hit]);
+    }, [record]);
     /**
      * This is the comments for the analytic associated with the hit. We show this at the start of the comment
      * list, as if they've been pinned
@@ -164,13 +165,13 @@ const HitComments = ({ hit, users }) => {
         if (analyticComments.length < 1) {
             return null;
         }
-        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === hit?.howler.detection);
+        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === record?.howler.detection);
         return (_jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, { fontSize: "small" }), children: _jsx(Typography, { variant: "body1", children: t('comments.analytic', { count: displayedComments.length }) }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: displayedComments.map(c => (_jsx(Comment, { comment: c, extra: _jsx(Chip, { size: "small", variant: "outlined", onClick: () => navigate('/analytics' +
                                     (analyticId
                                         ? `/${analyticId}?tab=comments` + (c.detection ? `&filter=${c.detection}` : '')
-                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${hit?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
-    }, [analyticComments, analyticId, hit?.howler.analytic, hit?.howler.detection, navigate, t, users]);
+                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${record?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
+    }, [analyticComments, analyticId, record?.howler.analytic, record?.howler.detection, navigate, t, users]);
     const renderedComments = useMemo(() => comments.map(c => (_jsx(Comment, { comment: c, users: users, handleDelete: () => handleDelete(c.id), handleEdit: value => handleEdit(c.id, value), handleReact: type => handleReact(c.id, type), handleQuote: () => handleQuote(c.value) }, c.id))), [comments, handleDelete, handleEdit, handleQuote, handleReact, users]);
-    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [hit && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), hit ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
+    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [record && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), record ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
 };
-export default HitComments;
+export default RecordComments;

package/components/{routes/hits/search/HitContextMenu.d.ts → elements/record/RecordContextMenu.d.ts}

@@ -3,7 +3,7 @@ import React from 'react';
 /**
  * Props for the HitContextMenu component
  */
-interface HitContextMenuProps {
+interface RecordContextMenuProps {
     /**
      * Function to extract the hit ID from a mouse event
      */
@@ -18,5 +18,5 @@ interface HitContextMenuProps {
  * Provides quick access to common hit actions including assessment, voting,
  * transitions, and exclusion filters based on template fields.
  */
-declare const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>>;
-export default HitContextMenu;
+declare const RecordContextMenu: FC<PropsWithChildren<RecordContextMenuProps>>;
+export default RecordContextMenu;

package/components/elements/record/RecordContextMenu.js

@@ -0,0 +1,256 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import api from '@cccsaurora/howler-ui/api';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
+import { TOP_ROW, VOTE_OPTIONS } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
+import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
+import CreateCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/CreateCaseModal';
+import { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useContextSelector } from 'use-context-selector';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+/**
+ * Order in which action types should be displayed in the context menu
+ */
+const ORDER = ['assessment', 'vote', 'action'];
+/**
+ * Icon mapping for different action types
+ */
+const ICON_MAP = {
+    assessment: _jsx(Assignment, {}),
+    vote: _jsx(HowToVote, {}),
+    action: _jsx(Edit, {})
+};
+/**
+ * Context menu component for hit operations.
+ * Provides quick access to common hit actions including assessment, voting,
+ * transitions, and exclusion filters based on template fields.
+ */
+const RecordContextMenu = ({ children, getSelectedId, Component }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const { config } = useContext(ApiConfigContext);
+    const { showModal } = useContext(ModalContext);
+    const pluginStore = usePluginStore();
+    const { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
+    const query = useContextSelector(ParameterContext, ctx => ctx?.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx?.setQuery);
+    const [id, setId] = useState(null);
+    const record = useContextSelector(RecordContext, ctx => ctx.records[id]);
+    const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const [analytic, setAnalytic] = useState(null);
+    const [template, setTemplate] = useState(null);
+    const [actions, setActions] = useState([]);
+    const records = useMemo(() => selectedRecords.some(_record => _record.howler.id === record?.howler.id)
+        ? selectedRecords
+        : record
+            ? [record]
+            : [], [record, selectedRecords]);
+    const hits = useMemo(() => records.filter(isHit), [records]);
+    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    /**
+     * Called by ContextMenu after the menu is positioned and opened.
+     * Identifies the clicked record and fetches available actions.
+     */
+    const onOpen = useCallback(async (event) => {
+        const _id = getSelectedId(event);
+        setId(_id);
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
+            ?.items;
+        if (_actions) {
+            setActions(_actions);
+        }
+    }, [dispatchApi, getSelectedId]);
+    const rowStatus = useMemo(() => ({
+        assessment: canAssess,
+        vote: canVote
+    }), [canAssess, canVote]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, records));
+    /**
+     * Generates grouped action entries for the context menu.
+     * Combines transitions, plugin actions, votes, and assessments based on permissions.
+     */
+    const entries = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map(assessment => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                    }
+                }))
+            ];
+        }
+        return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
+    }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
+    // Load analytic and template data when a hit is selected
+    useEffect(() => {
+        if (!record?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(record).then(setAnalytic);
+        getMatchingTemplate(record).then(setTemplate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record]);
+    /**
+     * Builds the declarative items structure for the ContextMenu component.
+     */
+    const items = useMemo(() => {
+        const result = [
+            {
+                kind: 'item',
+                id: 'open-record',
+                icon: _jsx(OpenInNew, {}),
+                label: t(`${record?.__index ?? 'hit'}.open`),
+                disabled: !record,
+                to: `/${record?.__index}s/${record?.howler.id}`
+            }
+        ];
+        if (isHit(record)) {
+            result.push({
+                kind: 'item',
+                id: 'open-analytic',
+                icon: _jsx(QueryStats, {}),
+                label: t('analytic.open'),
+                disabled: !analytic,
+                to: `/analytics/${analytic?.analytic_id}`
+            });
+            result.push({ kind: 'divider', id: 'actions-divider' });
+            for (const [type, typeItems] of entries) {
+                result.push({
+                    kind: 'submenu',
+                    id: type,
+                    icon: ICON_MAP[type] ?? _jsx(Terminal, {}),
+                    label: t(`hit.details.actions.${type}`),
+                    disabled: rowStatus[type] === false,
+                    items: typeItems.map(a => ({
+                        key: a.name,
+                        label: a.i18nKey ? t(a.i18nKey) : capitalize(a.name),
+                        onClick: a.actionFunction
+                    }))
+                });
+            }
+            result.push({
+                kind: 'submenu',
+                id: 'actions',
+                icon: _jsx(SettingsSuggest, {}),
+                label: t('route.actions.change'),
+                disabled: actions.length < 1,
+                items: actions.map(action => ({
+                    key: action.action_id,
+                    label: action.name,
+                    onClick: () => executeAction(action.action_id, `howler.id:${record?.howler.id}`)
+                }))
+            });
+            if (!isEmpty(template?.keys ?? []) && setQuery) {
+                result.push({ kind: 'divider', id: 'filter-divider' });
+                result.push({
+                    kind: 'submenu',
+                    id: 'excludes',
+                    icon: _jsx(RemoveCircleOutline, {}),
+                    label: t('hit.panel.exclude'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = '';
+                        if (query !== DEFAULT_QUERY) {
+                            newQuery = `(${query}) AND `;
+                        }
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `-${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `-${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+                result.push({
+                    kind: 'submenu',
+                    id: 'includes',
+                    icon: _jsx(AddCircleOutline, {}),
+                    label: t('hit.panel.include'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = `(${query}) AND `;
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+            }
+        }
+        result.push({ kind: 'divider', id: 'add-to-case-divider' });
+        result.push({
+            kind: 'item',
+            id: 'add-to-case',
+            icon: _jsx(CreateNewFolder, {}),
+            label: t('modal.cases.add_to_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(AddToCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        result.push({
+            kind: 'item',
+            id: 'create-case',
+            icon: _jsx(NoteAdd, {}),
+            label: t('modal.cases.create_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(CreateCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        return result;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction, showModal, records]);
+    return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(null), items: items, children: children }));
+};
+export default RecordContextMenu;