Add tracking for Comment panel save/send actions (#3098)

Track "Save comment" and "Send to chat" button clicks in the comment
popover with a new `comment_popover` area, so we can measure the
distribution of save vs send-to-chat usage.

Co-authored-by: qiongyu1999 <2694684348@qq.com>

apps/web/src/analytics/events.ts

@@ -50,6 +50,7 @@ import type {
   FileManagerClickProps,
   ArtifactToolbarClickProps,
   TweaksPopoverClickProps,
+  CommentPopoverClickProps,
   ArtifactHeaderClickProps,
   PresentPopoverClickProps,
   ShareOptionPopoverClickProps,
@@ -427,6 +428,13 @@ export function trackTweaksPopoverClick(
   send(track, 'ui_click', props);
 }
 
+export function trackCommentPopoverClick(
+  track: Track,
+  props: CommentPopoverClickProps,
+): void {
+  send(track, 'ui_click', props);
+}
+
 export function trackArtifactHeaderClick(
   track: Track,
   props: ArtifactHeaderClickProps,

apps/web/src/components/FileViewer.tsx

@@ -12,6 +12,7 @@ import {
   trackArtifactExportResult,
   trackArtifactHeaderClick,
   trackArtifactToolbarClick,
+  trackCommentPopoverClick,
   trackPageView,
   trackPresentPopoverClick,
   trackShareOptionPopoverClick,
@@ -3785,6 +3786,17 @@ function HtmlViewer({
       artifact_kind: artifactKindToTracking({ fileKind: file.kind ?? null }),
     });
   };
+  const fireCommentPopoverClick = (
+    element: 'save_comment' | 'send_to_chat' | 'add_note',
+  ) => {
+    trackCommentPopoverClick(analytics.track, {
+      page_name: 'artifact',
+      area: 'comment_popover',
+      element,
+      artifact_id: anonymizeArtifactId({ projectId, fileName: file.name }),
+      artifact_kind: artifactKindToTracking({ fileKind: file.kind ?? null }),
+    });
+  };
   const [mode, setMode] = useState<'preview' | 'source'>('preview');
   const [source, setSource] = useState<string | null>(liveHtml ?? null);
   const [inlinedSource, setInlinedSource] = useState<string | null>(null);
@@ -6122,8 +6134,8 @@ function HtmlViewer({
         setQueuedBoardNotes((current) => current.filter((_, currentIndex) => currentIndex !== index))
       }
       onClose={clearBoardComposer}
-      onSaveComment={savePersistentComment}
-      onSendBatch={sendBoardBatch}
+      onSaveComment={() => { fireCommentPopoverClick('save_comment'); return savePersistentComment(); }}
+      onSendBatch={() => { fireCommentPopoverClick('send_to_chat'); return sendBoardBatch(); }}
       onRemoveMember={(elementId) => {
         setActiveCommentTarget((current) => {
           const { next, shouldClose } = applyPodMemberRemoval(current, elementId);
@@ -6195,6 +6207,7 @@ function HtmlViewer({
           (comment) => selectedSideCommentIds.has(comment.id),
         );
         if (selected.length === 0) return;
+        fireCommentPopoverClick('send_to_chat');
         setSendingBoardBatch(true);
         try {
           await onSendBoardCommentAttachments(commentsToAttachments(selected));

packages/contracts/src/analytics/events.ts

@@ -1244,6 +1244,14 @@ export interface TweaksPopoverClickProps {
   status_after: 'on' | 'off';
 }
 
+export interface CommentPopoverClickProps {
+  page_name: 'artifact';
+  area: 'comment_popover';
+  element: 'save_comment' | 'send_to_chat' | 'add_note';
+  artifact_id?: string;
+  artifact_kind?: TrackingArtifactKind;
+}
+
 export interface ArtifactHeaderClickProps {
   page_name: 'artifact';
   area: 'artifact_header';
@@ -1496,6 +1504,7 @@ export type UiClickProps =
   | FileManagerClickProps
   | ArtifactToolbarClickProps
   | TweaksPopoverClickProps
+  | CommentPopoverClickProps
   | ArtifactHeaderClickProps
   | PresentPopoverClickProps
   | ShareOptionPopoverClickProps