features: supports WeChat channel

src/components/settings/weixin-qrcode-dialog.tsx

@@ -0,0 +1,206 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { ExternalLink, Loader2, RefreshCw } from "lucide-react"
+import { useTranslations } from "next-intl"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { weixinGetQrcode, weixinCheckQrcode } from "@/lib/api"
+
+interface WeixinQrcodeDialogProps {
+  open: boolean
+  channelId: number
+  onOpenChange: (open: boolean) => void
+  onAuthSuccess: (channelId: number) => void
+}
+
+function WeixinQrcodeContent({
+  channelId,
+  onAuthSuccess,
+  onClose,
+}: {
+  channelId: number
+  onAuthSuccess: (channelId: number) => void
+  onClose: () => void
+}) {
+  const t = useTranslations("ChatChannelSettings")
+  const [qrcodeImg, setQrcodeImg] = useState<string | null>(null)
+  const [qrcodeUrl, setQrcodeUrl] = useState<string | null>(null)
+  const [imgFailed, setImgFailed] = useState(false)
+  const [qrcodeId, setQrcodeId] = useState<string | null>(null)
+  const [status, setStatus] = useState<"loading" | "waiting" | "expired">(
+    "loading"
+  )
+  const [error, setError] = useState<string | null>(null)
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const stopPolling = useCallback(() => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current)
+      pollingRef.current = null
+    }
+  }, [])
+
+  const fetchQrcode = useCallback(async () => {
+    setStatus("loading")
+    setError(null)
+    setQrcodeImg(null)
+    setQrcodeUrl(null)
+    setImgFailed(false)
+    setQrcodeId(null)
+    stopPolling()
+
+    try {
+      const result = await weixinGetQrcode()
+      setQrcodeId(result.qrcode_id)
+
+      if (result.qrcode_img_content) {
+        const raw = result.qrcode_img_content
+        // Keep the original URL for fallback link
+        if (raw.startsWith("http")) {
+          setQrcodeUrl(raw)
+        }
+        const imgSrc = raw.startsWith("data:")
+          ? raw
+          : raw.startsWith("http")
+            ? raw
+            : `data:image/png;base64,${raw}`
+        setQrcodeImg(imgSrc)
+      }
+
+      setStatus("waiting")
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setError(msg)
+      setStatus("expired")
+    }
+  }, [stopPolling])
+
+  // Fetch QR code on mount + cleanup polling on unmount
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch on mount
+    fetchQrcode()
+    return () => stopPolling()
+  }, [fetchQrcode, stopPolling])
+
+  // Start polling when we have a qrcodeId
+  useEffect(() => {
+    if (!qrcodeId || status !== "waiting") return
+
+    pollingRef.current = setInterval(async () => {
+      try {
+        const result = await weixinCheckQrcode(channelId, qrcodeId)
+        if (result.status === "confirmed") {
+          stopPolling()
+          onAuthSuccess(channelId)
+          onClose()
+        } else if (result.status === "expired") {
+          stopPolling()
+          setStatus("expired")
+        }
+      } catch {
+        // Polling error — keep trying
+      }
+    }, 2000)
+
+    return () => stopPolling()
+  }, [qrcodeId, status, channelId, stopPolling, onAuthSuccess, onClose])
+
+  return (
+    <div className="flex flex-col items-center gap-4 py-4">
+      <p className="text-sm text-muted-foreground text-center">
+        {t("weixinScanDescription")}
+      </p>
+
+      {status === "loading" && (
+        <div className="flex h-48 w-48 items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      )}
+
+      {status === "waiting" && qrcodeImg && (
+        <>
+          {!imgFailed ? (
+            <>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={qrcodeImg}
+                alt="WeChat QR Code"
+                className="h-48 w-48 rounded-md"
+                referrerPolicy="no-referrer"
+                onError={() => setImgFailed(true)}
+              />
+            </>
+          ) : qrcodeUrl ? (
+            <a
+              href={qrcodeUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex h-48 w-48 flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm text-muted-foreground hover:bg-muted"
+            >
+              <ExternalLink className="h-6 w-6" />
+              {t("weixinOpenQrcode")}
+            </a>
+          ) : null}
+          <p className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            {t("weixinWaitingScan")}
+          </p>
+        </>
+      )}
+
+      {status === "expired" && (
+        <>
+          <div className="flex h-48 w-48 items-center justify-center rounded-md bg-muted">
+            <p className="text-sm text-muted-foreground">
+              {t("weixinQrcodeExpired")}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={fetchQrcode}>
+            <RefreshCw className="h-3.5 w-3.5 mr-1" />
+            {t("weixinRefreshQrcode")}
+          </Button>
+        </>
+      )}
+
+      {error && (
+        <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WeixinQrcodeDialog({
+  open,
+  channelId,
+  onOpenChange,
+  onAuthSuccess,
+}: WeixinQrcodeDialogProps) {
+  const t = useTranslations("ChatChannelSettings")
+  const handleClose = useCallback(() => onOpenChange(false), [onOpenChange])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("weixinScanTitle")}</DialogTitle>
+        </DialogHeader>
+        {open && (
+          <WeixinQrcodeContent
+            channelId={channelId}
+            onAuthSuccess={onAuthSuccess}
+            onClose={handleClose}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}