gyxx-flow/workbench/plugin/client/src/Toasts.jsx

/** 失败告警浮层：轮询桥接告警，新失败弹出 toast，可一键发起诊断会话。 */

import { useEffect } from 'react'
import { useSyncExternalStore } from 'react'
import { getState, subscribe, update, dismissToast, pushToast } from './store.js'
import { api } from './api.js'

function useWorkbench() {
  return useSyncExternalStore(subscribe, getState)
}

export function Toasts() {
  const s = useWorkbench()

  useEffect(() => {
    let stopped = false
    let timer = null
    const poll = async () => {
      try {
        const payload = await api.alerts()
        const fresh = (payload.alerts ?? []).filter(
          (alert) => !alert.seen && !getState().seenAlertIds[alert.id],
        )
        if (fresh.length) {
          const seen = { ...getState().seenAlertIds }
          for (const alert of fresh) {
            seen[alert.id] = true
            pushToast({ kind: 'failed', text: `工作流「${alert.name}」运行失败`, alert })
          }
          update({ seenAlertIds: seen })
        }
      } catch {
        // 桥接离线时静默
      }
      if (!stopped) timer = setTimeout(poll, 30_000)
    }
    timer = setTimeout(poll, 8_000)
    return () => {
      stopped = true
      if (timer) clearTimeout(timer)
    }
  }, [])

  if (!s.toasts.length) return null
  return (
    <div className="gyxxwb-toasts">
      {s.toasts.map((toast) => (
        <div key={toast.id} className={`gyxxwb-toast gyxxwb-toast-${toast.kind}`}>
          <span className="gyxxwb-toast-text">{toast.text}</span>
          {toast.alert && (
            <button
              type="button"
              onClick={async () => {
                try {
                  await api.ask({ workflow_id: toast.alert.workflow_id, action: 'diagnose' })
                  await api.markAlertSeen(toast.alert.id).catch(() => {})
                  pushToast({ kind: 'ok', text: '已创建诊断会话，请在左侧会话列表查看' })
                } catch (error) {
                  pushToast({ kind: 'error', text: `创建会话失败：${error.message}` })
                }
                dismissToast(toast.id)
              }}
            >
              立即诊断
            </button>
          )}
          <button type="button" title="关闭" onClick={() => dismissToast(toast.id)}>
            ✕
          </button>
        </div>
      ))}
    </div>
  )
}