feat(chat): add composer action menu

2026-07-21 10:58:40 +08:00
parent fcbf29afea
commit 77293bace5
11 changed files with 632 additions and 62 deletions
@@ -0,0 +1,72 @@
+"use client";
+
+import { ImagePlus, Mic2, Coffee } from "lucide-react";
+import Link from "next/link";
+
+import styles from "./chat-composer-action-menu.module.css";
+
+export interface ChatComposerActionMenuProps {
+  id: string;
+  disabled?: boolean;
+  tipHref: string;
+  onImage: () => void;
+  onVoice: () => void;
+  onNavigate: () => void;
+}
+
+export function ChatComposerActionMenu({
+  id,
+  disabled = false,
+  tipHref,
+  onImage,
+  onVoice,
+  onNavigate,
+}: ChatComposerActionMenuProps) {
+  return (
+    <div id={id} className={styles.menu} aria-label="Chat actions">
+      <button
+        type="button"
+        className={styles.action}
+        disabled={disabled}
+        data-analytics-key="chat.promotion_image"
+        onClick={onImage}
+      >
+        <span className={`${styles.icon} ${styles.imageIcon}`}>
+          <ImagePlus size={21} strokeWidth={2} aria-hidden="true" />
+        </span>
+        <span>Image</span>
+      </button>
+      <button
+        type="button"
+        className={styles.action}
+        disabled={disabled}
+        data-analytics-key="chat.promotion_voice"
+        onClick={onVoice}
+      >
+        <span className={`${styles.icon} ${styles.voiceIcon}`}>
+          <Mic2 size={21} strokeWidth={2} aria-hidden="true" />
+        </span>
+        <span>Voice</span>
+      </button>
+      <Link
+        href={tipHref}
+        className={styles.action}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : undefined}
+        data-analytics-key="chat.open_tip"
+        onClick={(event) => {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          onNavigate();
+        }}
+      >
+        <span className={`${styles.icon} ${styles.tipIcon}`}>
+          <Coffee size={21} strokeWidth={2} aria-hidden="true" />
+        </span>
+        <span>Tip</span>
+      </Link>
+    </div>
+  );
+}