@fivepixels-js/react 0.2.2 → 0.2.3

package/dist/components/panel/feedback/MentionComposerInput.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { findElementMentionCandidates, getAtQuery, replaceActiveMentionQuery, toStoredMention } from "../../../utils/mention/elementMentions.js";
+import { deleteMentionChipBeforeCaret, getCaretClientRect, getEditorCaretPoint, placeCaretAfterMention, renderMentionEditorContent, serializeMentionEditor, serializeMentionEditorBeforeCaret, } from "../../../utils/mention/mentionComposerDom.js";
+import { useReportPreferences, useReportSession } from "../../../providers/reportContext.js";
+import { ensureReportTooltipLayer } from "../../../utils/shared/dom.js";
+const EDITOR_MIN_HEIGHT = 32;
+const EDITOR_MAX_HEIGHT = 200;
+const MENU_GAP = 6;
+function placeCaretAtEnd(element) {
+    const selection = window.getSelection();
+    if (!selection) {
+        return;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+export function MentionComposerInput({ value, mentions, onChange, placeholder, autoFocus = false, onSubmitShortcut, onMultilineChange }) {
+    const { messages } = useReportPreferences();
+    const { setMentionHighlightTarget } = useReportSession();
+    const editorRef = useRef(null);
+    const rootRef = useRef(null);
+    const mentionsRef = useRef(mentions);
+    const skipSyncRef = useRef(false);
+    const isComposingRef = useRef(false);
+    const activeAtOffsetRef = useRef(null);
+    const [query, setQuery] = useState(null);
+    const [candidates, setCandidates] = useState([]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [menuPlacement, setMenuPlacement] = useState(null);
+    const [portalRoot, setPortalRoot] = useState(null);
+    const lastMultilineRef = useRef(null);
+    mentionsRef.current = mentions;
+    const syncHeight = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        editor.style.height = "auto";
+        const nextHeight = Math.min(Math.max(EDITOR_MIN_HEIGHT, editor.scrollHeight), EDITOR_MAX_HEIGHT);
+        editor.style.height = `${nextHeight}px`;
+        editor.style.overflowY = editor.scrollHeight > EDITOR_MAX_HEIGHT ? "auto" : "hidden";
+        const isMultiline = (editor.textContent ?? "").includes("\n") || nextHeight > EDITOR_MIN_HEIGHT + 8;
+        if (lastMultilineRef.current === isMultiline) {
+            return;
+        }
+        lastMultilineRef.current = isMultiline;
+        onMultilineChange?.(isMultiline);
+    }, [onMultilineChange]);
+    const refreshMentionQuery = useCallback(() => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        const caret = getEditorCaretPoint(editor);
+        const before = serializeMentionEditorBeforeCaret(editor, mentionsRef.current, caret);
+        const resolved = before ? getAtQuery(before.message) : getAtQuery(serializeMentionEditor(editor, mentionsRef.current).message);
+        activeAtOffsetRef.current = resolved?.atOffsetInBefore ?? null;
+        setQuery(resolved ? resolved.query : null);
+    }, []);
+    useLayoutEffect(() => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        if (skipSyncRef.current) {
+            skipSyncRef.current = false;
+            syncHeight();
+            return;
+        }
+        if (isComposingRef.current) {
+            syncHeight();
+            return;
+        }
+        const serialized = serializeMentionEditor(editor, mentionsRef.current);
+        if (serialized.message === value) {
+            syncHeight();
+            return;
+        }
+        renderMentionEditorContent(editor, value, mentions);
+        syncHeight();
+    }, [value, mentions, syncHeight]);
+    useEffect(() => {
+        if (!autoFocus) {
+            return;
+        }
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        editor.focus();
+        placeCaretAtEnd(editor);
+    }, [autoFocus]);
+    useEffect(() => {
+        setPortalRoot(ensureReportTooltipLayer());
+    }, []);
+    useEffect(() => {
+        if (query === null) {
+            setCandidates([]);
+            setMentionHighlightTarget(null);
+            return;
+        }
+        const nextCandidates = findElementMentionCandidates(query);
+        setCandidates(nextCandidates);
+        setActiveIndex(0);
+    }, [query, setMentionHighlightTarget]);
+    useLayoutEffect(() => {
+        if (query === null || !rootRef.current) {
+            setMenuPlacement(null);
+            return;
+        }
+        const updatePlacement = () => {
+            const anchor = rootRef.current;
+            const editor = editorRef.current;
+            if (!anchor) {
+                return;
+            }
+            const caretRect = editor ? getCaretClientRect(editor) : null;
+            const rootRect = anchor.getBoundingClientRect();
+            const width = Math.min(280, Math.max(200, rootRect.width));
+            const anchorTop = caretRect?.top ?? rootRect.top;
+            const anchorBottom = caretRect?.bottom ?? rootRect.bottom;
+            const anchorLeft = caretRect?.left ?? rootRect.left;
+            const spaceAbove = anchorTop - 8;
+            const placeAbove = spaceAbove >= 96;
+            const left = Math.min(Math.max(8, anchorLeft), window.innerWidth - width - 8);
+            setMenuPlacement({
+                top: placeAbove ? Math.max(8, anchorTop - MENU_GAP) : anchorBottom + MENU_GAP,
+                left,
+                width,
+                placeAbove,
+            });
+        };
+        updatePlacement();
+        window.addEventListener("resize", updatePlacement);
+        window.addEventListener("scroll", updatePlacement, true);
+        return () => {
+            window.removeEventListener("resize", updatePlacement);
+            window.removeEventListener("scroll", updatePlacement, true);
+        };
+    }, [query, candidates.length]);
+    useEffect(() => {
+        if (query === null) {
+            setMentionHighlightTarget(null);
+            return;
+        }
+        const active = candidates[activeIndex];
+        setMentionHighlightTarget(active?.snapshot ?? null);
+    }, [activeIndex, candidates, query, setMentionHighlightTarget]);
+    useEffect(() => {
+        return () => {
+            setMentionHighlightTarget(null);
+        };
+    }, [setMentionHighlightTarget]);
+    const emitFromEditor = () => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        skipSyncRef.current = true;
+        const next = serializeMentionEditor(editor, mentionsRef.current);
+        onChange(next);
+        syncHeight();
+        refreshMentionQuery();
+    };
+    const insertCandidate = (candidate) => {
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        const current = serializeMentionEditor(editor, mentionsRef.current);
+        const caret = getEditorCaretPoint(editor);
+        const before = serializeMentionEditorBeforeCaret(editor, mentionsRef.current, caret);
+        const resolved = (before ? getAtQuery(before.message) : null) ??
+            (query !== null && activeAtOffsetRef.current !== null ? { query, atOffsetInBefore: activeAtOffsetRef.current } : getAtQuery(current.message));
+        if (!resolved) {
+            return;
+        }
+        const mention = toStoredMention(candidate);
+        const nextMessage = replaceActiveMentionQuery(current.message, resolved.query, mention, resolved.atOffsetInBefore);
+        if (!nextMessage) {
+            return;
+        }
+        const nextMentions = [...current.mentions.filter((item) => item.id !== mention.id), mention];
+        mentionsRef.current = nextMentions;
+        activeAtOffsetRef.current = null;
+        setQuery(null);
+        setMentionHighlightTarget(null);
+        setMenuPlacement(null);
+        renderMentionEditorContent(editor, nextMessage, nextMentions);
+        skipSyncRef.current = true;
+        onChange({ message: nextMessage, mentions: nextMentions });
+        syncHeight();
+        editor.focus();
+        placeCaretAfterMention(editor, mention.id);
+    };
+    const showPlaceholder = useMemo(() => value.trim().length === 0 && query === null, [value, query]);
+    const showMenu = query !== null && Boolean(portalRoot);
+    const menu = showMenu && portalRoot
+        ? createPortal(_jsx("div", { role: "listbox", "aria-label": messages.composer.mentionListAriaLabel, "data-fivepixels-interactive": "", className: "fixed z-[1000002] max-h-[180px] overflow-y-auto rounded-[12px] border border-[var(--adaptive-border-subtle)]  bg-[var(--adaptive-neutralTintOpacity500)] shadow-[0_8px_24px_rgba(0,0,0,0.16)]", style: menuPlacement
+                ? menuPlacement.placeAbove
+                    ? {
+                        bottom: window.innerHeight - menuPlacement.top,
+                        left: menuPlacement.left,
+                        width: menuPlacement.width,
+                    }
+                    : {
+                        top: menuPlacement.top,
+                        left: menuPlacement.left,
+                        width: menuPlacement.width,
+                    }
+                : {
+                    // Fallback before first layout measure so the menu never "fails to open".
+                    bottom: 24,
+                    left: 24,
+                    width: 280,
+                }, children: candidates.length === 0 ? (_jsx("p", { className: "px-[12px] py-[8px] text-[12px] text-[var(--adaptive-black500)]", children: messages.composer.mentionEmpty })) : (candidates.map((candidate, index) => {
+                const active = index === activeIndex;
+                return (_jsxs("button", { type: "button", role: "option", "aria-selected": active, "data-fivepixels-interactive": "", className: "flex w-full flex-col gap-[2px] px-[4px] py-[2px] text-left border-none " + (active ? "bg-[var(--adaptive-blue100)]" : "hover:bg-[var(--adaptive-black100)]"), onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                        event.preventDefault();
+                        insertCandidate(candidate);
+                    }, children: [_jsx("span", { className: "truncate text-[12px] font-semibold text-[var(--adaptive-black900)]", children: candidate.label }), _jsx("span", { className: "truncate text-[11px] text-[var(--adaptive-black500)]", children: candidate.reportId ?? candidate.suggestedReportId ?? candidate.element.tagName.toLowerCase() })] }, `${candidate.targetSelector}-${candidate.label}-${index}`));
+            })) }), portalRoot)
+        : null;
+    return (_jsxs("div", { ref: rootRef, className: "relative min-w-0 flex-1", children: [showPlaceholder ? _jsx("span", { className: "pointer-events-none absolute left-[4px] top-[6px] text-[14px] leading-[1.5] text-[var(--adaptive-text-muted)]", children: placeholder }) : null, _jsx("div", { ref: editorRef, contentEditable: true, role: "textbox", "aria-multiline": "true", "aria-label": placeholder, "data-fivepixels-interactive": "", suppressContentEditableWarning: true, className: "max-h-[200px] w-full min-w-0 flex-1 resize-none overflow-hidden bg-transparent px-[4px] py-[6px] text-[14px] leading-[1.5] text-[var(--adaptive-text-primary)] outline-none", style: { minHeight: EDITOR_MIN_HEIGHT }, onInput: () => {
+                    if (isComposingRef.current) {
+                        refreshMentionQuery();
+                        syncHeight();
+                        return;
+                    }
+                    emitFromEditor();
+                }, onKeyUp: () => refreshMentionQuery(), onClick: () => refreshMentionQuery(), onCompositionStart: () => {
+                    isComposingRef.current = true;
+                }, onCompositionUpdate: () => {
+                    refreshMentionQuery();
+                }, onCompositionEnd: () => {
+                    isComposingRef.current = false;
+                    emitFromEditor();
+                }, onKeyDown: (event) => {
+                    if (query !== null) {
+                        if (event.key === "ArrowDown" && candidates.length > 0) {
+                            event.preventDefault();
+                            setActiveIndex((current) => (current + 1) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "ArrowUp" && candidates.length > 0) {
+                            event.preventDefault();
+                            setActiveIndex((current) => (current - 1 + candidates.length) % candidates.length);
+                            return;
+                        }
+                        if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && candidates.length > 0) {
+                            event.preventDefault();
+                            const active = candidates[activeIndex];
+                            if (active) {
+                                insertCandidate(active);
+                            }
+                            return;
+                        }
+                        if (event.key === "Escape") {
+                            event.preventDefault();
+                            setQuery(null);
+                            activeAtOffsetRef.current = null;
+                            setMentionHighlightTarget(null);
+                            return;
+                        }
+                    }
+                    if (event.key === "Backspace" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+                        const editor = editorRef.current;
+                        if (editor) {
+                            const deleted = deleteMentionChipBeforeCaret(editor, mentionsRef.current);
+                            if (deleted) {
+                                event.preventDefault();
+                                mentionsRef.current = deleted.mentions;
+                                skipSyncRef.current = true;
+                                onChange(deleted);
+                                syncHeight();
+                                refreshMentionQuery();
+                                return;
+                            }
+                        }
+                    }
+                    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                        event.preventDefault();
+                        onSubmitShortcut?.();
+                    }
+                } }), menu] }));
+}
+//# sourceMappingURL=MentionComposerInput.js.map

package/dist/components/panel/feedback/MentionComposerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionComposerInput.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/MentionComposerInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/feedback/MentionMessage.d.ts

@@ -0,0 +1,9 @@
+import type { ElementMention } from "../../../types/mention.js";
+type MentionMessageProps = {
+    message: string;
+    mentions?: ElementMention[];
+    className?: string;
+};
+export declare function MentionMessage({ message, mentions, className }: MentionMessageProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MentionMessage.d.ts.map

package/dist/components/panel/feedback/MentionMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/MentionMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAKzD,KAAK,mBAAmB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,QAAa,EAAE,SAAc,EAAE,EAAE,mBAAmB,+BAuC7F"}

package/dist/components/panel/feedback/MentionMessage.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mentionPlainLabel } from "../../../types/mention.js";
+import { parseMentionMessage, resolveMentionElement, resolveMentionSnapshot } from "../../../utils/mention/elementMentions.js";
+import { useReportSession } from "../../../providers/reportContext.js";
+const MENTION_CHIP_CLASS = "mx-[1px] inline-flex cursor-pointer items-center rounded-[6px] bg-[var(--adaptive-blue100)] px-[6px] py-[4px] text-[12px] font-semibold text-[var(--adaptive-blue600)] align-baseline transition-opacity hover:opacity-90";
+export function MentionMessage({ message, mentions = [], className = "" }) {
+    const { setMentionHighlightTarget } = useReportSession();
+    const parts = parseMentionMessage(message, mentions);
+    if (mentions.length === 0 && !message.includes("@{")) {
+        return _jsx("span", { className: className, children: message });
+    }
+    return (_jsx("span", { className: className, children: parts.map((part, index) => {
+            if (part.type === "text") {
+                return _jsx("span", { children: part.value }, `text-${index}`);
+            }
+            return (_jsx("button", { type: "button", "data-fivepixels-interactive": "", className: MENTION_CHIP_CLASS, onMouseEnter: () => {
+                    setMentionHighlightTarget(resolveMentionSnapshot(part.mention));
+                }, onMouseLeave: () => {
+                    setMentionHighlightTarget(null);
+                }, onClick: () => {
+                    const element = resolveMentionElement(part.mention);
+                    setMentionHighlightTarget(resolveMentionSnapshot(part.mention));
+                    element?.scrollIntoView({ block: "center", behavior: "smooth" });
+                }, children: mentionPlainLabel(part.mention) }, `mention-${part.mention.id}-${index}`));
+        }) }));
+}
+//# sourceMappingURL=MentionMessage.js.map

package/dist/components/panel/feedback/MentionMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionMessage.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/MentionMessage.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACxH,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQhE,MAAM,kBAAkB,GACpB,2NAA2N,CAAC;AAEhO,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAuB;IAC1F,MAAM,EAAE,yBAAyB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzD,MAAM,KAAK,GAAG,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAErD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACnD,OAAO,eAAM,SAAS,EAAE,SAAS,YAAG,OAAO,GAAQ,CAAC;IACxD,CAAC;IAED,OAAO,CACH,eAAM,SAAS,EAAE,SAAS,YACrB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACvB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACvB,OAAO,yBAA6B,IAAI,CAAC,KAAK,IAA5B,QAAQ,KAAK,EAAE,CAAqB,CAAC;YAC3D,CAAC;YAED,OAAO,CACH,iBAEI,IAAI,EAAC,QAAQ,iCACe,EAAE,EAC9B,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,GAAG,EAAE;oBACf,yBAAyB,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;gBACpE,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;oBACf,yBAAyB,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;oBACV,MAAM,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;oBACpD,yBAAyB,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;oBAChE,OAAO,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;gBACrE,CAAC,YAEA,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,IAhB3B,WAAW,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,EAAE,CAiBrC,CACZ,CAAC;QACN,CAAC,CAAC,GACC,CACV,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/PickTargetSnippet.d.ts

@@ -1,7 +1,8 @@
 type PickTargetSnippetProps = {
-    suggestedReportId: string;
+    suggestedReportId?: string;
     reportType?: "group" | "item";
+    alertMessage?: string | null;
 };
-export declare function PickTargetSnippet({ suggestedReportId, reportType }: PickTargetSnippetProps): import("react").JSX.Element;
+export declare function PickTargetSnippet({ suggestedReportId, reportType, alertMessage }: PickTargetSnippetProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PickTargetSnippet.d.ts.map

package/dist/components/panel/feedback/PickTargetSnippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickTargetSnippet.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,UAAmB,EAAE,EAAE,sBAAsB,+BAmEnG"}
+{"version":3,"file":"PickTargetSnippet.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAKF,wBAAgB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,UAAmB,EAAE,YAAmB,EAAE,EAAE,sBAAsB,+BAiFxH"}

package/dist/components/panel/feedback/PickTargetSnippet.js

@@ -5,13 +5,21 @@ import { HoverTooltip } from "../../../components/ui/HoverTooltip.js";
 import { useReportPreferences, useReportSession } from "../../../providers/reportContext.js";
 import { buildReportIdAttributeSnippet } from "../../../utils/marker/targetSelector.js";
 import { Text } from "../../../components/ui/Text";
-export function PickTargetSnippet({ suggestedReportId, reportType = "item" }) {
+const TIP_SHIMMER = { start: "#ffffff", end: "#000000" };
+const ALERT_SHIMMER = { start: "#000000", end: "#ef4444" };
+export function PickTargetSnippet({ suggestedReportId, reportType = "item", alertMessage = null }) {
     const { messages } = useReportPreferences();
     const { setErrorMessage } = useReportSession();
     const [copied, setCopied] = useState(false);
-    const snippet = buildReportIdAttributeSnippet(suggestedReportId, reportType);
-    const infoTooltipContent = useMemo(() => `${messages.pickTarget.snippetTooltipIntro}\n${snippet}`, [messages.pickTarget.snippetTooltipIntro, snippet]);
+    const isAlert = Boolean(alertMessage);
+    const tipLabel = "현재 요소에 ID를 설정하면 추적이 더 쉬워집니다";
+    const displayMessage = alertMessage ?? tipLabel;
+    const snippet = suggestedReportId ? buildReportIdAttributeSnippet(suggestedReportId, reportType) : "";
+    const infoTooltipContent = useMemo(() => (snippet ? `${messages.pickTarget.snippetTooltipIntro}\n${snippet}` : messages.pickTarget.snippetTooltipIntro), [messages.pickTarget.snippetTooltipIntro, snippet]);
     const handleCopy = async () => {
+        if (!snippet) {
+            return;
+        }
         try {
             if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
                 await navigator.clipboard.writeText(snippet);
@@ -26,6 +34,6 @@ export function PickTargetSnippet({ suggestedReportId, reportType = "item" }) {
             setErrorMessage(messages.errors.clipboardCopyFailed);
         }
     };
-    return (_jsxs("section", { className: "flex items-center justify-between gap-[6px] px-[12px] py-[4px]", children: [_jsxs("section", { className: "flex gap-[4px]", children: [_jsx(StarIcon, { className: "h-[12px] w-[12px] shrink-0 text-emerald-600 dark:text-emerald-300" }), _jsx("section", { className: "flex flex-col gap-[4px]", children: _jsx(Text.Shimmer, { className: "text-[12px]", color: { start: "#ffffff", end: "#000000" }, duration: 10, children: "\uD604\uC7AC \uC694\uC18C\uC5D0 ID\uB97C \uC124\uC815\uD558\uBA74 \uCD94\uC801\uC774 \uB354 \uC26C\uC6CC\uC9D1\uB2C8\uB2E4" }) })] }), _jsxs("section", { className: "flex", children: [_jsx(HoverTooltip, { multiline: true, content: infoTooltipContent, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", "aria-label": messages.pickTarget.snippetInfoAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: _jsx(InfoIcon, { className: "h-[14px] w-[14px]" }) }) }), _jsx(HoverTooltip, { label: copied ? messages.common.copied : messages.common.copy, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => void handleCopy(), "aria-label": messages.pickTarget.snippetCopyAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: copied ? _jsx("span", { className: "text-[9px] font-semibold", children: messages.common.ok }) : _jsx(CopyIcon, { className: "h-[12px] w-[12px]" }) }) })] })] }));
+    return (_jsxs("section", { className: "flex items-center justify-between gap-[6px] px-[12px] py-[4px]", role: isAlert ? "alert" : undefined, children: [_jsxs("section", { className: "flex min-w-0 items-center gap-[4px]", children: [_jsx(StarIcon, { className: `h-[12px] w-[12px] shrink-0 ${isAlert ? "text-rose-500" : "text-emerald-600 dark:text-emerald-300"}` }), _jsx(Text.Shimmer, { className: "min-w-0 truncate text-[12px]", color: isAlert ? ALERT_SHIMMER : TIP_SHIMMER, duration: isAlert ? 4 : 10, children: displayMessage })] }), !isAlert && suggestedReportId ? (_jsxs("section", { className: "flex shrink-0", children: [_jsx(HoverTooltip, { multiline: true, content: infoTooltipContent, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", "aria-label": messages.pickTarget.snippetInfoAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: _jsx(InfoIcon, { className: "h-[14px] w-[14px]" }) }) }), _jsx(HoverTooltip, { label: copied ? messages.common.copied : messages.common.copy, children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => void handleCopy(), "aria-label": messages.pickTarget.snippetCopyAriaLabel, className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-[var(--adaptive-black500)] hover:text-[var(--adaptive-black900)]", children: copied ? _jsx("span", { className: "text-[9px] font-semibold", children: messages.common.ok }) : _jsx(CopyIcon, { className: "h-[12px] w-[12px]" }) }) })] })) : null] }));
 }
 //# sourceMappingURL=PickTargetSnippet.js.map

package/dist/components/panel/feedback/PickTargetSnippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickTargetSnippet.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PickTargetSnippet.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/PickTargetSnippet.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/feedback/ThreadAuthorMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadAuthorMeta.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,qBAAqB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAmB,EAAE,QAAQ,EAAE,EAAE,qBAAqB,sCAe/G"}
+{"version":3,"file":"ThreadAuthorMeta.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,qBAAqB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAmB,EAAE,QAAQ,EAAE,EAAE,qBAAqB,sCAe/G"}

package/dist/components/panel/feedback/ThreadAuthorMeta.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReportPreferences } from "../../../providers/reportContext.js";
+import { formatTimeCompact } from "../../../utils/shared/format.js";
 import { FeedbackCreatorBadge } from "./FeedbackCreatorBadge.js";
 export function ThreadAuthorMeta({ authorName, createdAt, showCreator = false, trailing }) {
+    const { locale } = useReportPreferences();
     if (!authorName.trim()) {
         return null;
     }
-    return (_jsx("div", { className: "flex items-center justify-between gap-[8px]", children: _jsxs("div", { className: "flex min-w-0 items-center gap-[6px]", children: [_jsx("p", { className: "truncate text-[12px] text-[var(--adaptive-black500)]", children: authorName }), showCreator ? _jsx(FeedbackCreatorBadge, {}) : null, trailing] }) }));
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-[6px]", children: [createdAt ? _jsx("span", { className: "shrink-0 text-[12px] tabular-nums text-[var(--adaptive-black500)]", children: formatTimeCompact(createdAt, locale) }) : null, _jsx("p", { className: "min-w-0 truncate text-[12px] text-[var(--adaptive-black500)]", children: authorName }), showCreator ? _jsx(FeedbackCreatorBadge, {}) : null, trailing] }));
 }
 //# sourceMappingURL=ThreadAuthorMeta.js.map

package/dist/components/panel/feedback/ThreadAuthorMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadAuthorMeta.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AASjE,MAAM,UAAU,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAyB;IAC5G,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAC,6CAA6C,YACxD,eAAK,SAAS,EAAC,qCAAqC,aAChD,YAAG,SAAS,EAAC,sDAAsD,YAAE,UAAU,GAAK,EACnF,WAAW,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC7C,QAAQ,IACP,GAEJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ThreadAuthorMeta.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadAuthorMeta.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AASjE,MAAM,UAAU,gBAAgB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAyB;IAC5G,MAAM,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE1C,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAC,qCAAqC,aAC/C,SAAS,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,mEAAmE,YAAE,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC,GAAQ,CAAC,CAAC,CAAC,IAAI,EACrJ,YAAG,SAAS,EAAC,8DAA8D,YAAE,UAAU,GAAK,EAC3F,WAAW,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC7C,QAAQ,IACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/ThreadChildReply.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadChildReply.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,+BAcpF"}
+{"version":3,"file":"ThreadChildReply.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,kBAAkB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,qBAAqB,+BAmBpF"}

package/dist/components/panel/feedback/ThreadChildReply.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MentionMessage } from "./MentionMessage.js";
 import { ThreadAuthorMeta } from "./ThreadAuthorMeta.js";
 import { ThreadTimelineRow } from "./ThreadTimelineRow.js";
 export function ThreadChildReply({ reply, originalAuthorName }) {
-    return (_jsxs(ThreadTimelineRow, { children: [_jsx("p", { className: "leading-[1.5] text-[13px] text-[var(--adaptive-text-primary)]", children: reply.message }), reply.author_name ? (_jsx(ThreadAuthorMeta, { authorName: reply.author_name, createdAt: reply.created_at, showCreator: reply.author_name.trim() === originalAuthorName })) : null] }));
+    return (_jsxs(ThreadTimelineRow, { children: [_jsx("p", { className: "leading-[1.5] text-[13px] text-[var(--adaptive-text-primary)]", children: _jsx(MentionMessage, { message: reply.message, mentions: reply.mentions }) }), reply.author_name ? (_jsx(ThreadAuthorMeta, { authorName: reply.author_name, createdAt: reply.created_at, showCreator: reply.author_name.trim() === originalAuthorName })) : null] }));
 }
 //# sourceMappingURL=ThreadChildReply.js.map

package/dist/components/panel/feedback/ThreadChildReply.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadChildReply.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAyB;IACjF,OAAO,CACH,MAAC,iBAAiB,eACd,YAAG,SAAS,EAAC,+DAA+D,YAAE,KAAK,CAAC,OAAO,GAAK,EAE/F,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,gBAAgB,IACb,UAAU,EAAE,KAAK,CAAC,WAAW,EAC7B,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,kBAAkB,GAC9D,CACL,CAAC,CAAC,CAAC,IAAI,IACQ,CACvB,CAAC;AACN,CAAC"}
+{"version":3,"file":"ThreadChildReply.js","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadChildReply.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAyB;IACjF,OAAO,CACH,MAAC,iBAAiB,eACd,YAAG,SAAS,EAAC,+DAA+D,YACxE,KAAC,cAAc,IACX,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,GACF,EAEH,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,gBAAgB,IACb,UAAU,EAAE,KAAK,CAAC,WAAW,EAC7B,SAAS,EAAE,KAAK,CAAC,UAAU,EAC3B,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,kBAAkB,GAC9D,CACL,CAAC,CAAC,CAAC,IAAI,IACQ,CACvB,CAAC;AACN,CAAC"}

package/dist/components/panel/feedback/ThreadEntryActions.d.ts

@@ -25,10 +25,12 @@ export declare function ThreadEntryActions({ reply, report, caseId, authors, pen
     canAct: boolean;
     actorName: string;
 }): import("react").JSX.Element | null;
-export declare function CaseThreadEntryActions({ report, caseId, actorName, onClaimAssignee, isUpdating, isClaimingAssignee, }: {
+export declare function CaseThreadEntryActions({ report, caseId, actorName, pendingComposer, onStartAskQuestion, onClaimAssignee, isUpdating, isClaimingAssignee, }: {
     report: ReportFeedback;
     caseId: string;
     actorName: string;
+    pendingComposer: PendingComposer;
+    onStartAskQuestion: () => void;
     onClaimAssignee: () => void;
     isUpdating?: boolean;
     isClaimingAssignee?: boolean;

package/dist/components/panel/feedback/ThreadEntryActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadEntryActions.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadEntryActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAanF,eAAO,MAAM,yBAAyB,4GAA4G,CAAC;AACnJ,eAAO,MAAM,mBAAmB,4EAA4E,CAAC;AAC7G,eAAO,MAAM,qBAAqB,8DAA8D,CAAC;AACjG,eAAO,MAAM,iCAAiC,2IAA2I,CAAC;AAC1L,eAAO,MAAM,+BAA+B,2CAA2C,CAAC;AAExF,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,aAAa,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC;AAET,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,EACzB,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,GACZ,EAAE;IACC,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,yBAAyB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACrB,sCA8JA;AAED,wBAAgB,sBAAsB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,kBAAkB,GACrB,EAAE;IACC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,sCAoBA"}
+{"version":3,"file":"ThreadEntryActions.d.ts","sourceRoot":"","sources":["../../../../src/components/panel/feedback/ThreadEntryActions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBnF,eAAO,MAAM,yBAAyB,4GAA4G,CAAC;AACnJ,eAAO,MAAM,mBAAmB,4EAA4E,CAAC;AAC7G,eAAO,MAAM,qBAAqB,8DAA8D,CAAC;AACjG,eAAO,MAAM,iCAAiC,2IAA2I,CAAC;AAC1L,eAAO,MAAM,+BAA+B,2CAA2C,CAAC;AAExF,KAAK,eAAe,GAAG;IACnB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,aAAa,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC;AAuET,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,EACzB,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,GACZ,EAAE;IACC,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,yBAAyB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACrB,sCAuJA;AAED,wBAAgB,sBAAsB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,kBAAkB,GACrB,EAAE;IACC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,sCAqCA"}

package/dist/components/panel/feedback/ThreadEntryActions.js

@@ -1,14 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useReportPreferences } from "../../../providers/reportContext.js";
-import { buildConfirmAuthorOptions, canShowAdjudicationActionsOnBranchReply, canShowCaseClaimAction, canShowCheckoutBranchActionsForCase, canShowSuggestedBranchActionsForCase, isBranchReplyAuthor, } from "../../../utils/feedback/feedbackThread.js";
-import { CheckIcon, CloseIcon, RevertIcon } from "../../../components/icons/Icons.js";
+import { buildConfirmAuthorOptions, canShowAdjudicationActionsOnBranchReply, canShowCaseClaimAction, canShowCaseEntryActions, canShowCheckoutBranchActionsForCase, canShowSuggestedBranchActionsForCase, isBranchReplyAuthor, } from "../../../utils/feedback/feedbackThread.js";
+import { getThreadActionButtonClass, THREAD_ACTION_STYLE } from "../../../constants/threadActionStyles.js";
+import { AskActionIcon, CheckIcon, CompleteActionIcon, DeniedActionIcon } from "../../../components/icons/Icons.js";
 import { AuthorSelector } from "./AuthorSelector.js";
+import { HoverTooltip } from "../../../components/ui/HoverTooltip.js";
 export const THREAD_ACTION_BUTTON_BASE = "flex items-center gap-[4px] rounded-[6px] px-[8px] py-[4px] text-[12px] font-semibold transition-colors";
 export const THREAD_ACTION_GHOST = "text-[var(--adaptive-text-primary)] hover:bg-[var(--adaptive-black100)]";
 export const THREAD_ACTION_DIVIDER = "mx-[2px] h-[12px] w-px bg-[var(--adaptive-border-subtle)]";
 export const THREAD_ACTION_ENTRY_SURFACE_CLASS = "flex flex-col gap-[4px] rounded-[12px] border-[2px] border-[var(--adaptive-grey900)] bg-[var(--adaptive-surface-overlay)] p-[8px_12px]";
 export const THREAD_CASE_ENTRY_SURFACE_CLASS = "flex flex-col gap-[4px] rounded-[12px]";
+function ThreadActionIcon({ kind, className }) {
+    const color = THREAD_ACTION_STYLE[kind].color;
+    if (kind === "ask") {
+        return (_jsx(AskActionIcon, { className: className, fill: color }));
+    }
+    if (kind === "denied") {
+        return (_jsx(DeniedActionIcon, { className: className, fill: color }));
+    }
+    return (_jsx(CompleteActionIcon, { className: className, fill: color }));
+}
+function ThreadActionButton({ label, tooltip, active, kind, disabled, onClick, showLabel = false, }) {
+    const color = THREAD_ACTION_STYLE[kind].color;
+    return (_jsx(HoverTooltip, { label: tooltip, children: _jsxs("button", { type: "button", "data-fivepixels-interactive": "", disabled: disabled, onClick: onClick, "aria-label": label, className: `${THREAD_ACTION_BUTTON_BASE} ${showLabel ? "" : "px-[6px]"} ${getThreadActionButtonClass(kind, active)}`, style: { color }, children: [_jsx(ThreadActionIcon, { kind: kind, className: "h-[13px] w-[13px]" }), showLabel ? _jsx("span", { style: { color }, children: label }) : null] }) }));
+}
 export function ThreadEntryActions({ reply, report, caseId, authors, pendingComposer, confirmAuthorName, showConfirmAuthorSelect, onConfirmAuthorNameChange, onStartDeny, onStartCheckout, onStartAskQuestion, onConfirm, isUpdating, canAct, actorName, }) {
     const { messages } = useReportPreferences();
     const [isResolvedConfirming, setIsResolvedConfirming] = useState(false);
@@ -45,13 +61,17 @@ export function ThreadEntryActions({ reply, report, caseId, authors, pendingComp
     if (!canUseReplyAction && !((showReview || showCheckout) && showAdjudication && canAct)) {
         return null;
     }
-    return (_jsxs("div", { className: "mt-[10px] flex flex-col gap-[8px]", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end", children: [showReview ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsxs("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: onStartAskQuestion, className: `${THREAD_ACTION_BUTTON_BASE} ${askQuestionActive ? "bg-[var(--adaptive-blue50)] text-[var(--adaptive-blue500)]" : THREAD_ACTION_GHOST}`, children: [_jsx(RevertIcon, { className: "h-[13px] w-[13px]" }), messages.thread.reply] })) : null, showAdjudication && canAct ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx("span", { className: THREAD_ACTION_DIVIDER, "aria-hidden": true })) : null, _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: () => onStartDeny(), "aria-label": messages.thread.denied, className: `${THREAD_ACTION_BUTTON_BASE} px-[6px] ${denyActive ? "bg-[#FF2B6A] text-white" : THREAD_ACTION_GHOST}`, children: _jsx(CloseIcon, { className: "h-[13px] w-[13px]" }) }), _jsxs("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: handleResolvedClick, "aria-label": isResolvedConfirming ? messages.thread.resolvedConfirmAriaLabel : messages.thread.resolved, className: `${THREAD_ACTION_BUTTON_BASE} ${isResolvedConfirming ? "bg-[#D94A22] px-[8px] text-white" : `px-[6px] ${THREAD_ACTION_GHOST}`}`, children: [_jsx(CheckIcon, { className: "h-[13px] w-[13px]" }), isResolvedConfirming ? messages.thread.resolvedConfirmLabel : null] })] })) : null] })) : null, showCheckout ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsxs("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: onStartAskQuestion, className: `${THREAD_ACTION_BUTTON_BASE} ${askQuestionActive ? "bg-[var(--adaptive-blue50)] text-[var(--adaptive-blue500)]" : THREAD_ACTION_GHOST}`, children: [_jsx(RevertIcon, { className: "h-[13px] w-[13px]" }), messages.thread.reply] })) : null, showAdjudication && canAct ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx("span", { className: THREAD_ACTION_DIVIDER, "aria-hidden": true })) : null, _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: () => onStartDeny(), "aria-label": messages.thread.denied, className: `${THREAD_ACTION_BUTTON_BASE} px-[6px] ${denyActive ? "bg-[#FF2B6A] text-white" : THREAD_ACTION_GHOST}`, children: _jsx(CloseIcon, { className: "h-[13px] w-[13px]" }) }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: () => onStartCheckout(reply.id), "aria-label": messages.thread.leaveResult, className: `${THREAD_ACTION_BUTTON_BASE} px-[6px] ${checkoutActive ? "bg-[#F6572E] text-white" : THREAD_ACTION_GHOST}`, children: _jsx(CheckIcon, { className: "h-[13px] w-[13px]" }) })] })) : null] })) : null] }), !canAct && !isOwnBranchReply && !showAdjudication ? _jsx("p", { className: "text-[11px] text-[var(--adaptive-black500)]", children: messages.errors.caseAssigneeOnly }) : null, showReview && showAdjudication && showConfirmAuthorSelect ? (_jsx(AuthorSelector, { authors: confirmAuthorOptions, value: confirmAuthorName, onChange: onConfirmAuthorNameChange })) : null] }));
+    return (_jsxs("div", { className: "mt-[10px] flex flex-col gap-[8px]", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end", children: [showReview ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx(ThreadActionButton, { label: messages.thread.ask, tooltip: messages.thread.askTooltip, active: askQuestionActive, kind: "ask", disabled: isUpdating, onClick: onStartAskQuestion, showLabel: true })) : null, showAdjudication && canAct ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx("span", { className: THREAD_ACTION_DIVIDER, "aria-hidden": true })) : null, _jsx(ThreadActionButton, { label: messages.thread.denied, tooltip: messages.thread.deniedTooltip, active: denyActive, kind: "denied", disabled: isUpdating, onClick: () => onStartDeny() }), _jsxs("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating, onClick: handleResolvedClick, "aria-label": isResolvedConfirming ? messages.thread.resolvedConfirmAriaLabel : messages.thread.resolved, className: `${THREAD_ACTION_BUTTON_BASE} ${isResolvedConfirming ? "bg-[#D94A22] px-[8px] text-white" : `px-[6px] ${THREAD_ACTION_GHOST}`}`, children: [_jsx(CheckIcon, { className: "h-[13px] w-[13px]" }), isResolvedConfirming ? messages.thread.resolvedConfirmLabel : null] })] })) : null] })) : null, showCheckout ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx(ThreadActionButton, { label: messages.thread.ask, tooltip: messages.thread.askTooltip, active: askQuestionActive, kind: "ask", disabled: isUpdating, onClick: onStartAskQuestion, showLabel: true })) : null, showAdjudication && canAct ? (_jsxs(_Fragment, { children: [canUseReplyAction ? (_jsx("span", { className: THREAD_ACTION_DIVIDER, "aria-hidden": true })) : null, _jsx(ThreadActionButton, { label: messages.thread.denied, tooltip: messages.thread.deniedTooltip, active: denyActive, kind: "denied", disabled: isUpdating, onClick: () => onStartDeny() }), _jsx(ThreadActionButton, { label: messages.thread.complete, tooltip: messages.thread.completeTooltip, active: checkoutActive, kind: "complete", disabled: isUpdating, onClick: () => onStartCheckout(reply.id), showLabel: true })] })) : null] })) : null] }), !canAct && !isOwnBranchReply && !showAdjudication ? _jsx("p", { className: "text-[11px] text-[var(--adaptive-black500)]", children: messages.errors.caseAssigneeOnly }) : null, showReview && showAdjudication && showConfirmAuthorSelect ? (_jsx(AuthorSelector, { authors: confirmAuthorOptions, value: confirmAuthorName, onChange: onConfirmAuthorNameChange })) : null] }));
 }
-export function CaseThreadEntryActions({ report, caseId, actorName, onClaimAssignee, isUpdating, isClaimingAssignee, }) {
+export function CaseThreadEntryActions({ report, caseId, actorName, pendingComposer, onStartAskQuestion, onClaimAssignee, isUpdating, isClaimingAssignee, }) {
     const { messages } = useReportPreferences();
-    if (!canShowCaseClaimAction(report, caseId, actorName)) {
+    const showPreClaimDiscussion = canShowCaseEntryActions(report, caseId);
+    const showClaim = canShowCaseClaimAction(report, caseId, actorName);
+    const canReply = showPreClaimDiscussion && Boolean(actorName.trim());
+    const replyActive = pendingComposer?.type === "question";
+    if (!showPreClaimDiscussion) {
         return null;
     }
-    return (_jsx("div", { className: "mt-[10px] flex flex-wrap items-center justify-end", children: _jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating || isClaimingAssignee, onClick: onClaimAssignee, className: `${THREAD_ACTION_BUTTON_BASE} ${THREAD_ACTION_GHOST}`, children: messages.thread.claimAssignee }) }));
+    return (_jsxs("div", { className: "mt-[10px] flex flex-wrap items-center justify-end gap-[4px]", children: [canReply ? (_jsx(ThreadActionButton, { label: messages.thread.ask, tooltip: messages.thread.askTooltip, active: replyActive, kind: "ask", disabled: isUpdating, onClick: onStartAskQuestion, showLabel: true })) : null, showClaim ? (_jsx("button", { type: "button", "data-fivepixels-interactive": "", disabled: isUpdating || isClaimingAssignee, onClick: onClaimAssignee, className: `${THREAD_ACTION_BUTTON_BASE} ${THREAD_ACTION_GHOST}`, children: messages.thread.claimAssignee })) : null] }));
 }
 //# sourceMappingURL=ThreadEntryActions.js.map