feat(chat): port chat widget components from Dart to React

2026-06-09 20:19:52 +08:00
parent 199a14650e
commit 109a3e3855
48 changed files with 2463 additions and 382 deletions
@@ -0,0 +1,67 @@
+"use client";
+/**
+ * PwaInstallDialog PWA 安装弹窗
+ *
+ * 原始 Dart: lib/ui/chat/widgets/pwa_install_dialog.dart（145 行）
+ *
+ * 用途：引导用户将 Web App 安装到桌面
+ * 触发：由 PwaInstallOverlay 在延迟 3.5s 后自动显示
+ */
+import styles from "./pwa-install-dialog.module.css";
+
+export interface PwaInstallDialogProps {
+  onClose: () => void;
+  onInstall?: () => void;
+}
+
+export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps) {
+  const handleInstall = () => {
+    if (onInstall) {
+      onInstall();
+    } else {
+      // 提示用户使用浏览器"添加到主屏幕"功能
+      window.alert(
+        "To install: tap the browser menu, then 'Add to Home Screen'.",
+      );
+    }
+    onClose();
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pwa-dialog-title"
+    >
+      <div className={styles.dialog}>
+        <div className={styles.icon} aria-hidden="true">
+          📱
+        </div>
+        <h2 id="pwa-dialog-title" className={styles.title}>
+          Install cozsweet
+        </h2>
+        <p className={styles.content}>
+          Add to your home screen for the best experience. Faster loading,
+          full-screen mode, and offline support.
+        </p>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnSecondary}`}
+            onClick={onClose}
+          >
+            Not now
+          </button>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnPrimary}`}
+            onClick={handleInstall}
+          >
+            Install
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}