@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/CellCommentDialog.js

@@ -0,0 +1,726 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Lock, Truck } from "lucide-react";
+import ReactDOM from "react-dom";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCall } from "../../utils/apiCall.js";
+import MentionPopup from "./MentionPopup.js";
+const ANNOTATION_COLORS = [
+  { value: null, label: "None", bg: "transparent" },
+  { value: "gray", label: "Gray", bg: "var(--m3-annotation-gray)" },
+  { value: "pink", label: "Pink", bg: "var(--m3-annotation-pink)" },
+  { value: "orange", label: "Orange", bg: "var(--m3-annotation-orange)" },
+  { value: "yellow", label: "Yellow", bg: "var(--m3-annotation-yellow)" },
+  { value: "green", label: "Green", bg: "var(--m3-annotation-green)" },
+  { value: "blue", label: "Blue", bg: "var(--m3-annotation-blue)" },
+  { value: "purple", label: "Purple", bg: "var(--m3-annotation-purple)" }
+];
+const MENTION_PATTERN = /@\[([^\]]+)\]\(([^)]+)\)/g;
+function renderCommentContent(content) {
+  const parts = [];
+  let lastIndex = 0;
+  const regex = new RegExp(MENTION_PATTERN.source, "g");
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+    parts.push(
+      /* @__PURE__ */ jsxs("span", { className: "hot-comment-mention", children: [
+        "@",
+        match[1]
+      ] }, match.index)
+    );
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+  return parts.length > 0 ? parts : content;
+}
+function extractMentionIds(text) {
+  const ids = [];
+  const regex = new RegExp(MENTION_PATTERN.source, "g");
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    ids.push(match[2]);
+  }
+  return ids;
+}
+const CellCommentDialog = ({
+  isOpen,
+  onClose,
+  entityType,
+  viewContext,
+  rowId,
+  columnKey,
+  columnTitle,
+  rowLabel,
+  annotationId: initialAnnotationId,
+  currentColor: initialColor,
+  onAnnotationChange,
+  anchorRect,
+  bulkCells
+}) => {
+  const t = useT();
+  const isBulkMode = bulkCells && bulkCells.length > 1;
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState("");
+  const [selectedColor, setSelectedColor] = useState(initialColor || null);
+  const [annotationId, setAnnotationId] = useState(initialAnnotationId || null);
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [audience, setAudience] = useState("internal");
+  const [mentionState, setMentionState] = useState(null);
+  const [pendingMentions, setPendingMentions] = useState([]);
+  const panelRef = useRef(null);
+  const textareaRef = useRef(null);
+  const mentionRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (panelRef.current && !panelRef.current.contains(target)) {
+        const mentionEl = mentionRef.current?.getElement();
+        if (mentionEl && mentionEl.contains(target)) return;
+        onClose();
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && !mentionState?.active) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, mentionState]);
+  useEffect(() => {
+    if (!isOpen) {
+      setMentionState(null);
+      setPendingMentions([]);
+      setAudience("internal");
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || isBulkMode || !annotationId) {
+      if (!isBulkMode) setComments([]);
+      return;
+    }
+    const fetchComments = async () => {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ entityType, rowIds: rowId });
+        const { ok, result } = await apiCall(`/api/annotations/annotations?${params}`);
+        if (ok && result) {
+          const items = result.items || result.data || result || [];
+          const annotation = items.find(
+            (a) => (a.columnKey || a.column_key) === columnKey
+          );
+          if (annotation?.comments) {
+            setComments(annotation.comments.map((c) => ({
+              id: c.id,
+              userId: c.userId || c.user_id,
+              userName: c.userName || c.user_name || "User",
+              content: c.content,
+              audience: c.audience ?? "internal",
+              createdAt: c.createdAt || c.created_at
+            })));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to fetch comments:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchComments();
+  }, [isOpen, isBulkMode, annotationId, entityType, rowId, columnKey]);
+  const fetchBulkComments = useCallback(async () => {
+    if (!bulkCells || bulkCells.length === 0) return;
+    setLoading(true);
+    try {
+      const groups = /* @__PURE__ */ new Map();
+      for (const cell of bulkCells) {
+        const existing = groups.get(cell.entityType);
+        if (existing) existing.add(cell.rowId);
+        else groups.set(cell.entityType, /* @__PURE__ */ new Set([cell.rowId]));
+      }
+      const cellKeySet = new Set(bulkCells.map((c) => `${c.entityType}:${c.rowId}:${c.columnKey}`));
+      const responses = await Promise.all(
+        Array.from(groups.entries()).map(async ([type, rowIds]) => {
+          const params = new URLSearchParams({ entityType: type, rowIds: Array.from(rowIds).join(",") });
+          const { ok, result } = await apiCall(`/api/annotations/annotations?${params}`);
+          if (!ok || !result) return [];
+          const items = result.items || result.data || result || [];
+          return items.map((item) => ({ ...item, entityType: item.entityType ?? type }));
+        })
+      );
+      {
+        const items = responses.flat();
+        const allComments = [];
+        for (const annotation of items) {
+          const aType = annotation.entityType || annotation.entity_type || "";
+          const aRowId = annotation.rowId || annotation.row_id;
+          const aColKey = annotation.columnKey || annotation.column_key;
+          if (!cellKeySet.has(`${aType}:${aRowId}:${aColKey}`)) continue;
+          const cellLabel = aColKey;
+          for (const c of annotation.comments || []) {
+            allComments.push({
+              id: c.id,
+              userId: c.userId || c.user_id,
+              userName: c.userName || c.user_name || "User",
+              content: c.content,
+              audience: c.audience ?? "internal",
+              createdAt: c.createdAt || c.created_at,
+              cellLabel,
+              annotationId: annotation.id || annotation.annotationId
+            });
+          }
+        }
+        allComments.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+        setComments(allComments);
+      }
+    } catch (error) {
+      console.error("Failed to fetch bulk comments:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [bulkCells]);
+  useEffect(() => {
+    if (!isOpen || !isBulkMode) return;
+    fetchBulkComments();
+  }, [isOpen, isBulkMode, fetchBulkComments]);
+  const handleTextareaChange = useCallback((e) => {
+    const value = e.target.value;
+    const cursorPos = e.target.selectionStart ?? value.length;
+    setNewComment(value);
+    setPendingMentions((prev) => prev.filter((m) => {
+      const displayText = `@${m.name}`;
+      return value.includes(displayText);
+    }));
+    const textBeforeCursor = value.slice(0, cursorPos);
+    const lastAtIndex = textBeforeCursor.lastIndexOf("@");
+    if (lastAtIndex >= 0) {
+      const charBeforeAt = lastAtIndex > 0 ? textBeforeCursor[lastAtIndex - 1] : " ";
+      const isStartOfWord = lastAtIndex === 0 || /\s/.test(charBeforeAt);
+      const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
+      if (isStartOfWord && (textAfterAt.length === 0 || !/\s/.test(textAfterAt.slice(0, 1)))) {
+        const query = textAfterAt;
+        if (query.length <= 30 && !/\n/.test(query)) {
+          setMentionState({ active: true, startIndex: lastAtIndex, query });
+          return;
+        }
+      }
+    }
+    setMentionState(null);
+  }, []);
+  const buildWireContent = useCallback((displayText) => {
+    let result = displayText;
+    for (const m of pendingMentions) {
+      const displayMention = `@${m.name}`;
+      const wireMention = `@[${m.name}](${m.id})`;
+      result = result.replace(displayMention, wireMention);
+    }
+    return result;
+  }, [pendingMentions]);
+  const handleMentionSelect = useCallback((user) => {
+    if (!mentionState || !textareaRef.current) return;
+    const displayName = user.name || user.email;
+    const before = newComment.slice(0, mentionState.startIndex);
+    const after = newComment.slice(mentionState.startIndex + 1 + mentionState.query.length);
+    const displayText = `@${displayName}`;
+    const updatedComment = before + displayText + " " + after;
+    setNewComment(updatedComment);
+    setPendingMentions((prev) => {
+      if (prev.some((m) => m.id === user.id)) return prev;
+      return [...prev, { id: user.id, name: displayName }];
+    });
+    setMentionState(null);
+    requestAnimationFrame(() => {
+      if (textareaRef.current) {
+        const cursorPos = before.length + displayText.length + 1;
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(cursorPos, cursorPos);
+      }
+    });
+  }, [mentionState, newComment]);
+  const handleSubmitComment = useCallback(async () => {
+    if (!newComment.trim() || submitting) return;
+    setSubmitting(true);
+    try {
+      let currentAnnotationId = annotationId;
+      if (!currentAnnotationId) {
+        const { ok, result: created } = await apiCall("/api/annotations/annotations", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            entityType,
+            tableId: viewContext,
+            rowId,
+            columnKey,
+            color: selectedColor
+          })
+        });
+        if (ok && created) {
+          currentAnnotationId = created.id || created.data?.id;
+          setAnnotationId(currentAnnotationId);
+        } else {
+          return;
+        }
+      }
+      const mentionedUserIds = pendingMentions.map((m) => m.id);
+      const wireContent = buildWireContent(newComment.trim());
+      const { ok: commentOk, result: commentResult } = await apiCall(
+        `/api/annotations/annotations/${currentAnnotationId}/comments`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            content: wireContent,
+            audience,
+            ...mentionedUserIds.length > 0 ? { mentionedUserIds } : {}
+          })
+        }
+      );
+      if (commentOk && commentResult) {
+        const newCommentObj = {
+          id: commentResult.id || commentResult.data?.id,
+          userId: commentResult.userId || commentResult.user_id || "",
+          userName: commentResult.userName || commentResult.user_name || "You",
+          content: wireContent,
+          audience,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setComments((prev) => [...prev, newCommentObj]);
+        setNewComment("");
+        setPendingMentions([]);
+        onAnnotationChange?.();
+      }
+    } catch (error) {
+      console.error("Failed to submit comment:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  }, [newComment, submitting, annotationId, entityType, viewContext, rowId, columnKey, selectedColor, onAnnotationChange, pendingMentions, buildWireContent, audience]);
+  const handleBulkColorChange = useCallback(async (color) => {
+    if (!bulkCells || bulkCells.length === 0) return;
+    setSelectedColor(color);
+    try {
+      const groups = /* @__PURE__ */ new Map();
+      for (const cell of bulkCells) {
+        const existing = groups.get(cell.entityType);
+        if (existing) existing.push(cell);
+        else groups.set(cell.entityType, [cell]);
+      }
+      await Promise.all(
+        Array.from(groups.entries()).map(
+          ([type, cells]) => apiCall("/api/annotations/annotations", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              entityType: type,
+              tableId: viewContext,
+              cells: cells.map((c) => ({ rowId: c.rowId, columnKey: c.columnKey })),
+              color
+            })
+          })
+        )
+      );
+      onAnnotationChange?.();
+    } catch (error) {
+      console.error("Failed to batch update colors:", error);
+    }
+  }, [bulkCells, viewContext, onAnnotationChange]);
+  const handleBulkSubmitComment = useCallback(async () => {
+    if (!bulkCells || bulkCells.length === 0 || !newComment.trim() || submitting) return;
+    setSubmitting(true);
+    try {
+      const mentionedUserIds = pendingMentions.map((m) => m.id);
+      const wireContent = buildWireContent(newComment.trim());
+      const groups = /* @__PURE__ */ new Map();
+      for (const cell of bulkCells) {
+        const existing = groups.get(cell.entityType);
+        if (existing) existing.push(cell);
+        else groups.set(cell.entityType, [cell]);
+      }
+      await Promise.all(
+        Array.from(groups.entries()).map(
+          ([type, cells]) => apiCall("/api/annotations/annotations", {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              entityType: type,
+              tableId: viewContext,
+              cells: cells.map((c) => ({ rowId: c.rowId, columnKey: c.columnKey })),
+              comment: wireContent,
+              audience,
+              ...mentionedUserIds.length > 0 ? { mentionedUserIds } : {}
+            })
+          })
+        )
+      );
+      setNewComment("");
+      setPendingMentions([]);
+      onAnnotationChange?.();
+      fetchBulkComments();
+    } catch (error) {
+      console.error("Failed to batch add comment:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  }, [bulkCells, viewContext, newComment, submitting, onAnnotationChange, fetchBulkComments, pendingMentions, buildWireContent, audience]);
+  const handleColorChange = useCallback(async (color) => {
+    if (isBulkMode) {
+      return handleBulkColorChange(color);
+    }
+    setSelectedColor(color);
+    try {
+      if (annotationId) {
+        await apiCall(`/api/annotations/annotations?id=${annotationId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ color })
+        });
+      } else if (color) {
+        const { ok, result: created } = await apiCall("/api/annotations/annotations", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ entityType, tableId: viewContext, rowId, columnKey, color })
+        });
+        if (ok && created) {
+          setAnnotationId(created.id || created.data?.id);
+        }
+      }
+      onAnnotationChange?.();
+    } catch (error) {
+      console.error("Failed to update color:", error);
+    }
+  }, [isBulkMode, handleBulkColorChange, annotationId, entityType, viewContext, rowId, columnKey, onAnnotationChange]);
+  const handleDeleteComment = useCallback(async (commentId, commentAnnotationId) => {
+    const annId = commentAnnotationId || annotationId;
+    if (!annId) return;
+    try {
+      const { ok } = await apiCall(`/api/annotations/annotations/${annId}/comments?commentId=${commentId}`, {
+        method: "DELETE"
+      });
+      if (ok) {
+        setComments((prev) => prev.filter((c) => c.id !== commentId));
+        onAnnotationChange?.();
+      }
+    } catch (error) {
+      console.error("Failed to delete comment:", error);
+    }
+  }, [annotationId, onAnnotationChange]);
+  const handleDeleteAllComments = useCallback(async () => {
+    const toDelete = comments.slice();
+    for (const c of toDelete) {
+      const annId = c.annotationId || annotationId;
+      if (!annId) continue;
+      try {
+        await apiCall(`/api/annotations/annotations/${annId}/comments?commentId=${c.id}`, { method: "DELETE" });
+      } catch (error) {
+        console.error("Failed to delete comment:", error);
+      }
+    }
+    setComments([]);
+    onAnnotationChange?.();
+  }, [comments, annotationId, onAnnotationChange]);
+  const formatTimeAgo = (dateStr) => {
+    const date = new Date(dateStr);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 6e4);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHour = Math.floor(diffMin / 60);
+    if (diffHour < 24) return `${diffHour}h ago`;
+    const diffDay = Math.floor(diffHour / 24);
+    return `${diffDay}d ago`;
+  };
+  if (!isOpen) return null;
+  const title = isBulkMode ? `${bulkCells.length} cells selected` : rowLabel ? `${rowLabel} - ${columnTitle}` : columnTitle;
+  const panelWidth = 420;
+  let top;
+  let bottomPx;
+  let left = 0;
+  let panelMaxHeight = 520;
+  if (anchorRect) {
+    const spaceBelow = window.innerHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    const spaceRight = window.innerWidth - anchorRect.left;
+    if (spaceBelow >= spaceAbove) {
+      top = anchorRect.bottom + 4;
+      panelMaxHeight = Math.min(520, Math.max(180, spaceBelow - 12));
+    } else {
+      bottomPx = window.innerHeight - anchorRect.top + 4;
+      panelMaxHeight = Math.min(520, Math.max(180, spaceAbove - 12));
+    }
+    left = spaceRight > panelWidth ? anchorRect.left : window.innerWidth - panelWidth - 12;
+  }
+  const textareaKeyDown = (e, submitFn) => {
+    if (mentionState?.active) return;
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      submitFn();
+    }
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+  const panel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: panelRef,
+      className: "hot-comment-popover",
+      style: {
+        position: "fixed",
+        top: anchorRect ? top : "50%",
+        bottom: anchorRect ? bottomPx != null ? `${bottomPx}px` : void 0 : void 0,
+        left: anchorRect ? left : "50%",
+        transform: anchorRect ? void 0 : "translate(-50%, -50%)",
+        width: panelWidth,
+        maxHeight: anchorRect ? `${panelMaxHeight}px` : void 0,
+        zIndex: 1e4
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "hot-comment-popover-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "hot-comment-popover-title-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "hot-comment-popover-subtitle", children: isBulkMode ? t("annotations.dialog.setColorFor", "Set color for") : t("annotations.dialog.commentsOn", "Comments on") }),
+            /* @__PURE__ */ jsx("span", { className: "hot-comment-popover-title", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "hot-comment-popover-close", onClick: onClose, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) })
+        ] }),
+        (loading || comments.length > 0) && /* @__PURE__ */ jsx("div", { className: "hot-comment-thread", children: loading ? /* @__PURE__ */ jsx("div", { className: "hot-comment-loading", children: t("annotations.dialog.loading", "Loading comments...") }) : comments.map((comment) => /* @__PURE__ */ jsx("div", { className: "hot-comment-item", children: /* @__PURE__ */ jsxs("div", { className: "hot-comment-item-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "hot-comment-avatar", children: (comment.userName || "U")[0].toUpperCase() }),
+          /* @__PURE__ */ jsxs("div", { className: "hot-comment-item-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "hot-comment-item-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "hot-comment-author", children: comment.userName || t("annotations.dialog.you", "You") }),
+              /* @__PURE__ */ jsxs("span", { className: "hot-comment-action", children: [
+                t("annotations.dialog.commented", "commented"),
+                comment.cellLabel ? ` ${t("annotations.dialog.on", "on")} ${comment.cellLabel}` : ""
+              ] }),
+              comment.audience === "carrier" && /* @__PURE__ */ jsxs("span", { className: "hot-comment-audience-tag", title: t("annotations.dialog.audienceCarrierHint", "Printed on the carrier document"), children: [
+                /* @__PURE__ */ jsx(Truck, { size: 10 }),
+                t("annotations.dialog.audienceCarrierShort", "carrier")
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "hot-comment-time", children: formatTimeAgo(comment.createdAt) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "hot-comment-content", children: renderCommentContent(comment.content) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "hot-comment-delete",
+              onClick: () => handleDeleteComment(comment.id, comment.annotationId),
+              title: "Delete comment",
+              children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2.5 4h11M5.5 4V2.5a1 1 0 011-1h3a1 1 0 011 1V4M6.5 7v4M9.5 7v4M3.5 4l.5 9a1.5 1.5 0 001.5 1.5h5a1.5 1.5 0 001.5-1.5l.5-9" }) })
+            }
+          )
+        ] }) }, comment.id)) }),
+        isBulkMode && comments.length > 0 && /* @__PURE__ */ jsx("div", { className: "hot-comment-bulk-actions", children: /* @__PURE__ */ jsx("button", { className: "hot-comment-delete-all", onClick: handleDeleteAllComments, children: t("annotations.dialog.deleteAll", "Delete all comments") }) }),
+        isBulkMode ? /* @__PURE__ */ jsxs("div", { className: "hot-comment-input-area", children: [
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value: newComment,
+                onChange: handleTextareaChange,
+                placeholder: t("annotations.dialog.bulkPlaceholder", "Leave a comment on all selected cells (type @ to mention)"),
+                className: "hot-comment-textarea",
+                rows: 3,
+                autoFocus: true,
+                onKeyDown: (e) => textareaKeyDown(e, handleBulkSubmitComment)
+              }
+            ),
+            mentionState?.active && textareaRef.current && /* @__PURE__ */ jsx(
+              MentionPopup,
+              {
+                ref: mentionRef,
+                query: mentionState.query,
+                anchorEl: textareaRef.current,
+                onSelect: handleMentionSelect,
+                onClose: () => setMentionState(null),
+                visible: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hot-comment-audience", role: "radiogroup", "aria-label": t("annotations.dialog.audienceLabel", "Who is this note for?"), children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": audience === "internal",
+                className: "hot-comment-audience-option",
+                "data-selected": audience === "internal" || void 0,
+                onClick: () => setAudience("internal"),
+                children: [
+                  /* @__PURE__ */ jsx(Lock, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: t("annotations.dialog.audienceInternal", "Internal note") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": audience === "carrier",
+                className: "hot-comment-audience-option",
+                "data-selected": audience === "carrier" || void 0,
+                onClick: () => setAudience("carrier"),
+                children: [
+                  /* @__PURE__ */ jsx(Truck, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { children: t("annotations.dialog.audienceCarrier", "For the carrier") })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hot-comment-colors", children: ANNOTATION_COLORS.map((item) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleColorChange(item.value),
+              className: `hot-comment-color-btn ${selectedColor === item.value ? "selected" : ""}`,
+              "data-color": item.value ?? "none",
+              style: {
+                background: item.bg,
+                border: item.value === null ? "1px dashed var(--m3-outline-faint)" : void 0
+              },
+              title: item.label,
+              children: item.value === null && selectedColor === null ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2l-8 8" }) }) : null
+            },
+            item.value ?? "none"
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "hot-comment-input-footer", children: [
+            /* @__PURE__ */ jsxs("span", { className: "hot-comment-hint", children: [
+              t("annotations.dialog.press", "Press"),
+              " ",
+              /* @__PURE__ */ jsx("kbd", { children: "\u2318+Enter" }),
+              " ",
+              t("annotations.dialog.toSendAll", "to send to all cells")
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleBulkSubmitComment,
+                disabled: !newComment.trim() || submitting,
+                className: "hot-comment-send-btn",
+                children: submitting ? t("annotations.dialog.sending", "Sending...") : t("annotations.dialog.send", "Send")
+              }
+            )
+          ] })
+        ] }) : (
+          /* Full comment input in single-cell mode */
+          /* @__PURE__ */ jsxs("div", { className: "hot-comment-input-area", children: [
+            /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: newComment,
+                  onChange: handleTextareaChange,
+                  placeholder: t("annotations.dialog.placeholder", "Leave a comment (type @ to mention)"),
+                  className: "hot-comment-textarea",
+                  rows: 3,
+                  autoFocus: true,
+                  onKeyDown: (e) => textareaKeyDown(e, handleSubmitComment)
+                }
+              ),
+              mentionState?.active && textareaRef.current && /* @__PURE__ */ jsx(
+                MentionPopup,
+                {
+                  ref: mentionRef,
+                  query: mentionState.query,
+                  anchorEl: textareaRef.current,
+                  onSelect: handleMentionSelect,
+                  onClose: () => setMentionState(null),
+                  visible: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "hot-comment-audience", role: "radiogroup", "aria-label": t("annotations.dialog.audienceLabel", "Who is this note for?"), children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": audience === "internal",
+                  className: "hot-comment-audience-option",
+                  "data-selected": audience === "internal" || void 0,
+                  onClick: () => setAudience("internal"),
+                  children: [
+                    /* @__PURE__ */ jsx(Lock, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: t("annotations.dialog.audienceInternal", "Internal note") })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": audience === "carrier",
+                  className: "hot-comment-audience-option",
+                  "data-selected": audience === "carrier" || void 0,
+                  onClick: () => setAudience("carrier"),
+                  children: [
+                    /* @__PURE__ */ jsx(Truck, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: t("annotations.dialog.audienceCarrier", "For the carrier") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "hot-comment-colors", children: ANNOTATION_COLORS.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleColorChange(item.value),
+                className: `hot-comment-color-btn ${selectedColor === item.value ? "selected" : ""}`,
+                "data-color": item.value ?? "none",
+                style: {
+                  background: item.bg,
+                  border: item.value === null ? "1px dashed var(--m3-outline-faint)" : void 0
+                },
+                title: item.label,
+                children: item.value === null && selectedColor === null ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2l-8 8" }) }) : null
+              },
+              item.value ?? "none"
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "hot-comment-input-footer", children: [
+              /* @__PURE__ */ jsxs("span", { className: "hot-comment-hint", children: [
+                t("annotations.dialog.press", "Press"),
+                " ",
+                /* @__PURE__ */ jsx("kbd", { children: "\u2318+Enter" }),
+                " ",
+                t("annotations.dialog.toSend", "to send")
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleSubmitComment,
+                  disabled: !newComment.trim() || submitting,
+                  className: "hot-comment-send-btn",
+                  children: submitting ? t("annotations.dialog.sending", "Sending...") : t("annotations.dialog.send", "Send")
+                }
+              )
+            ] })
+          ] })
+        )
+      ]
+    }
+  );
+  return ReactDOM.createPortal(panel, document.body);
+};
+var CellCommentDialog_default = CellCommentDialog;
+export {
+  CellCommentDialog_default as default
+};
+//# sourceMappingURL=CellCommentDialog.js.map