imeeting/frontend/src/pages/business/RealtimeAsr.tsx

import { useEffect, useMemo, useState } from "react";
import {
  Alert,
  Avatar,
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  Row,
  Select,
  Space,
  Spin,
  Statistic,
  Switch,
  Tag,
  Tooltip,
  Typography,
  message,
} from "antd";
import {
  AudioOutlined,
  CheckCircleOutlined,
  LinkOutlined,
  MessageOutlined,
  QuestionCircleOutlined,
  RocketOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import PageHeader from "../../components/shared/PageHeader";
import { listUsers } from "../../api";
import { getAiModelDefault, getAiModelPage, type AiModelVO } from "../../api/business/aimodel";
import { getHotWordPage, type HotWordVO } from "../../api/business/hotword";
import { getPromptPage, type PromptTemplateVO } from "../../api/business/prompt";
import { createRealtimeMeeting, type CreateRealtimeMeetingCommand } from "../../api/business/meeting";
import type { SysUser } from "../../types";

const { Title, Text } = Typography;
const { Option } = Select;

type RealtimeMeetingSessionDraft = {
  meetingId: number;
  meetingTitle: string;
  asrModelName: string;
  summaryModelName: string;
  asrModelId: number;
  mode: string;
  language: string;
  useSpkId: number;
  enablePunctuation: boolean;
  enableItn: boolean;
  enableTextRefine: boolean;
  saveAudio: boolean;
  hotwords: Array<{ hotword: string; weight: number }>;
};

function resolveWsUrl(model?: AiModelVO | null) {
  if (model?.wsUrl) {
    return model.wsUrl;
  }
  if (model?.baseUrl) {
    return model.baseUrl.replace(/^http:\/\//, "ws://").replace(/^https:\/\//, "wss://");
  }
  return "";
}

function buildRealtimeProxyPreviewUrl() {
  const protocol = window.location.protocol === "https:" ? "wss" : "ws";
  return `${protocol}://${window.location.host}/ws/meeting/realtime`;
}

function getSessionKey(meetingId: number) {
  return `realtimeMeetingSession:${meetingId}`;
}

export default function RealtimeAsr() {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [asrModels, setAsrModels] = useState<AiModelVO[]>([]);
  const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
  const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
  const [hotwordList, setHotwordList] = useState<HotWordVO[]>([]);
  const [userList, setUserList] = useState<SysUser[]>([]);

  const watchedAsrModelId = Form.useWatch("asrModelId", form);
  const watchedSummaryModelId = Form.useWatch("summaryModelId", form);
  const watchedHotWords = Form.useWatch("hotWords", form) || [];
  const watchedParticipants = Form.useWatch("participants", form) || [];
  const watchedUseSpkId = Form.useWatch("useSpkId", form);

  const selectedAsrModel = useMemo(
    () => asrModels.find((item) => item.id === watchedAsrModelId) || null,
    [asrModels, watchedAsrModelId],
  );
  const selectedSummaryModel = useMemo(
    () => llmModels.find((item) => item.id === watchedSummaryModelId) || null,
    [llmModels, watchedSummaryModelId],
  );
  const selectedHotwordCount = watchedHotWords.length > 0 ? watchedHotWords.length : hotwordList.length;

  useEffect(() => {
    const loadInitialData = async () => {
      setLoading(true);
      try {
        const [asrRes, llmRes, promptRes, hotwordRes, users, defaultAsr, defaultLlm] = await Promise.all([
          getAiModelPage({ current: 1, size: 100, type: "ASR" }),
          getAiModelPage({ current: 1, size: 100, type: "LLM" }),
          getPromptPage({ current: 1, size: 100 }),
          getHotWordPage({ current: 1, size: 1000 }),
          listUsers(),
          getAiModelDefault("ASR"),
          getAiModelDefault("LLM"),
        ]);

        const activeAsrModels = asrRes.data.data.records.filter((item) => item.status === 1);
        const activeLlmModels = llmRes.data.data.records.filter((item) => item.status === 1);
        const activePrompts = promptRes.data.data.records.filter((item) => item.status === 1);
        const activeHotwords = hotwordRes.data.data.records.filter((item) => item.status === 1);

        setAsrModels(activeAsrModels);
        setLlmModels(activeLlmModels);
        setPrompts(activePrompts);
        setHotwordList(activeHotwords);
        setUserList(users || []);

        form.setFieldsValue({
          title: `实时会议 ${dayjs().format("MM-DD HH:mm")}`,
          meetingTime: dayjs(),
          asrModelId: defaultAsr.data.data?.id,
          summaryModelId: defaultLlm.data.data?.id,
          promptId: activePrompts[0]?.id,
          useSpkId: 1,
          mode: "2pass",
          language: "auto",
          enablePunctuation: true,
          enableItn: true,
          enableTextRefine: false,
          saveAudio: false,
        });
      } catch {
        message.error("加载实时会议配置失败");
      } finally {
        setLoading(false);
      }
    };

    void loadInitialData();
  }, [form]);

  const handleCreate = async () => {
    const values = await form.validateFields();
    const wsUrl = resolveWsUrl(selectedAsrModel);
    if (!wsUrl) {
      message.error("当前 ASR 模型没有配置 WebSocket 地址");
      return;
    }

    setSubmitting(true);
    try {
      const selectedHotwords = (values.hotWords?.length
        ? hotwordList.filter((item) => values.hotWords.includes(item.word))
        : hotwordList
      ).map((item) => ({
        hotword: item.word,
        weight: Number(item.weight || 2) / 10,
      }));

      const payload: CreateRealtimeMeetingCommand = {
        ...values,
        meetingTime: values.meetingTime.format("YYYY-MM-DD HH:mm:ss"),
        participants: values.participants?.join(",") || "",
        tags: values.tags?.join(",") || "",
        mode: values.mode || "2pass",
        language: values.language || "auto",
        useSpkId: values.useSpkId ? 1 : 0,
        enablePunctuation: values.enablePunctuation !== false,
        enableItn: values.enableItn !== false,
        enableTextRefine: !!values.enableTextRefine,
        saveAudio: !!values.saveAudio,
        hotWords: values.hotWords,
      };

      const res = await createRealtimeMeeting(payload);
      const createdMeeting = res.data.data;
      const sessionDraft: RealtimeMeetingSessionDraft = {
        meetingId: createdMeeting.id,
        meetingTitle: createdMeeting.title,
        asrModelName: selectedAsrModel?.modelName || "ASR",
        summaryModelName: selectedSummaryModel?.modelName || "LLM",
        asrModelId: selectedAsrModel?.id || values.asrModelId,
        mode: values.mode || "2pass",
        language: values.language || "auto",
        useSpkId: values.useSpkId ? 1 : 0,
        enablePunctuation: values.enablePunctuation !== false,
        enableItn: values.enableItn !== false,
        enableTextRefine: !!values.enableTextRefine,
        saveAudio: !!values.saveAudio,
        hotwords: selectedHotwords,
      };

      sessionStorage.setItem(getSessionKey(createdMeeting.id), JSON.stringify(sessionDraft));
      message.success("会议已创建，进入实时识别");
      navigate(`/meeting-live-session/${createdMeeting.id}`);
    } catch {
      message.error("创建实时会议失败");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <PageHeader title="实时识别会议" subtitle="先完成配置，再进入会中识别页面，减少会中页面干扰。" />

      <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
        {loading ? (
          <Card bordered={false} style={{ borderRadius: 18 }}>
            <div style={{ textAlign: "center", padding: "88px 0" }}>
              <Spin />
            </div>
          </Card>
        ) : (
          <Row gutter={16} style={{ height: "100%" }}>
            <Col xs={24} xl={17} style={{ height: "100%" }}>
              <Card
                bordered={false}
                style={{ height: "100%", borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)" }}
                bodyStyle={{ height: "100%", padding: 16, display: "flex", flexDirection: "column" }}
              >
                <div
                  style={{
                    marginBottom: 12,
                    padding: 14,
                    borderRadius: 16,
                    background: "linear-gradient(135deg, #f8fbff 0%, #eef6ff 58%, #ffffff 100%)",
                    border: "1px solid #dbeafe",
                    flexShrink: 0,
                  }}
                >
                  <Space direction="vertical" size={6}>
                    <Space size={10}>
                      <div
                        style={{
                          width: 42,
                          height: 42,
                          borderRadius: 12,
                          background: "#1677ff",
                          color: "#fff",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                        }}
                      >
                        <AudioOutlined />
                      </div>
                      <div>
                        <Title level={4} style={{ margin: 0 }}>
                          创建实时会议
                        </Title>
                        <Text type="secondary">会前完成配置后再进入会中识别页。</Text>
                      </div>
                    </Space>
                    <Space wrap size={[8, 8]}>
                      <Tag color="blue">单页配置</Tag>
                      <Tag color="cyan">会中专注转写</Tag>
                      <Tag color="gold">异常关闭自动兜底</Tag>
                    </Space>
                  </Space>
                </div>

                <Form
                  form={form}
                  layout="vertical"
                  initialValues={{
                    mode: "2pass",
                    language: "auto",
                    useSpkId: 1,
                    enablePunctuation: true,
                    enableItn: true,
                    enableTextRefine: false,
                    saveAudio: false,
                  }}
                  style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}
                >
                  <div style={{ flex: 1, minHeight: 0 }}>
                    <Row gutter={16}>
                      <Col xs={24} md={12}>
                        <Form.Item name="title" label="会议标题" rules={[{ required: true, message: "请输入会议标题" }]}>
                          <Input placeholder="例如：产品例会实时记录" />
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="meetingTime"
                          label="会议时间"
                          rules={[{ required: true, message: "请选择会议时间" }]}
                        >
                          <DatePicker showTime style={{ width: "100%" }} />
                        </Form.Item>
                      </Col>
                    </Row>

                    <Row gutter={16}>
                      <Col xs={24} md={12}>
                        <Form.Item name="participants" label="参会人员">
                          <Select mode="multiple" showSearch optionFilterProp="children" placeholder="选择参会人员">
                            {userList.map((user) => (
                              <Option key={user.userId} value={user.userId}>
                                <Space>
                                  <Avatar size="small" icon={<UserOutlined />} />
                                  {user.displayName || user.username}
                                </Space>
                              </Option>
                            ))}
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={12}>
                        <Form.Item name="tags" label="会议标签">
                          <Select mode="tags" placeholder="输入标签后回车" />
                        </Form.Item>
                      </Col>
                    </Row>

                    <Row gutter={16}>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="asrModelId"
                          label="识别模型 (ASR)"
                          rules={[{ required: true, message: "请选择 ASR 模型" }]}
                        >
                          <Select placeholder="选择实时识别模型">
                            {asrModels.map((model) => (
                              <Option key={model.id} value={model.id}>
                                {model.modelName}
                              </Option>
                            ))}
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="summaryModelId"
                          label="总结模型 (LLM)"
                          rules={[{ required: true, message: "请选择总结模型" }]}
                        >
                          <Select placeholder="选择总结模型">
                            {llmModels.map((model) => (
                              <Option key={model.id} value={model.id}>
                                {model.modelName}
                              </Option>
                            ))}
                          </Select>
                        </Form.Item>
                      </Col>
                    </Row>

                    <Row gutter={16}>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="promptId"
                          label="总结模板"
                          rules={[{ required: true, message: "请选择总结模板" }]}
                        >
                          <Select placeholder="选择总结模板">
                            {prompts.map((prompt) => (
                              <Option key={prompt.id} value={prompt.id}>
                                {prompt.templateName}
                              </Option>
                            ))}
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="hotWords"
                          label={
                            <span>
                              热词增强{" "}
                              <Tooltip title="不选择时将带上系统当前启用的热词">
                                <QuestionCircleOutlined />
                              </Tooltip>
                            </span>
                          }
                        >
                          <Select mode="multiple" allowClear placeholder="可选热词">
                            {hotwordList.map((item) => (
                              <Option key={item.word} value={item.word}>
                                {item.word}
                              </Option>
                            ))}
                          </Select>
                        </Form.Item>
                      </Col>
                    </Row>

                    <Form.Item name="language" hidden>
                      <Input />
                    </Form.Item>
                    <Form.Item name="enablePunctuation" hidden valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Form.Item name="enableItn" hidden valuePropName="checked">
                      <Switch />
                    </Form.Item>
                    <Form.Item name="saveAudio" hidden valuePropName="checked">
                      <Switch />
                    </Form.Item>

                    <Row gutter={16} align="middle">
                      <Col xs={24} md={12}>
                        <Form.Item name="mode" label="识别模式">
                          <Select>
                            <Option value="2pass">2pass</Option>
                            <Option value="online">online</Option>
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={12}>
                        <Form.Item
                          name="useSpkId"
                          label={
                            <span>
                              说话人区分
                              <Tooltip title="开启后会尝试区分不同发言人">
                                <QuestionCircleOutlined />
                              </Tooltip>
                            </span>
                          }
                          valuePropName="checked"
                          getValueProps={(value) => ({ checked: value === 1 || value === true })}
                          normalize={(value) => (value ? 1 : 0)}
                        >
                          <Switch />
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={8}>
                        <Form.Item label="WebSocket 地址">
                          <Input value={buildRealtimeProxyPreviewUrl()} prefix={<LinkOutlined />} readOnly />
                        </Form.Item>
                      </Col>
                      <Col xs={24} md={8}>
                        <Form.Item name="enableTextRefine" label="文本修正" valuePropName="checked">
                          <Switch />
                        </Form.Item>
                      </Col>
                    </Row>
                  </div>
                </Form>
              </Card>
            </Col>

            <Col xs={24} xl={7} style={{ height: "100%" }}>
              <Card
                bordered={false}
                style={{ height: "100%", borderRadius: 18, boxShadow: "0 8px 22px rgba(15,23,42,0.05)" }}
                bodyStyle={{ height: "100%", padding: 16, display: "flex", flexDirection: "column" }}
              >
                <Row gutter={[12, 12]} style={{ marginBottom: 12 }}>
                  <Col span={12}>
                    <Statistic title="参会人数" value={watchedParticipants.length} prefix={<TeamOutlined />} />
                  </Col>
                  <Col span={12}>
                    <Statistic title="热词数量" value={selectedHotwordCount} prefix={<MessageOutlined />} />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="说话人区分"
                      value={watchedUseSpkId ? "开启" : "关闭"}
                      prefix={<CheckCircleOutlined />}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="识别链路"
                      value={selectedAsrModel ? "已就绪" : "待配置"}
                      prefix={<AudioOutlined />}
                    />
                  </Col>
                </Row>

                <Space direction="vertical" size={12} style={{ width: "100%", flex: 1, minHeight: 0 }}>
                  <div>
                    <Text strong style={{ fontSize: 15 }}>
                      本次识别摘要
                    </Text>
                  </div>
                  <div style={{ padding: 14, borderRadius: 14, background: "#fafcff", border: "1px solid #edf2ff" }}>
                    <Space direction="vertical" size={8} style={{ width: "100%" }}>
                      <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <Text type="secondary">ASR</Text>
                        <Text strong>{selectedAsrModel?.modelName || "-"}</Text>
                      </div>
                      <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <Text type="secondary">LLM</Text>
                        <Text strong>{selectedSummaryModel?.modelName || "-"}</Text>
                      </div>
                      <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <Text type="secondary">WebSocket</Text>
                        <Text ellipsis style={{ maxWidth: 220 }}>
                          {buildRealtimeProxyPreviewUrl()}
                        </Text>
                      </div>
                    </Space>
                  </div>
                  <Alert
                    type="info"
                    showIcon
                    message="异常关闭保护"
                    description="会中页持续写库，并在关闭时自动兜底结束。"
                  />
                  <div style={{ marginTop: "auto", padding: 12, borderRadius: 14, background: "#f6ffed", border: "1px solid #b7eb8f" }}>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10 }}>
                      <Text type="secondary">创建成功后会直接进入识别页，不会在当前页占用麦克风。</Text>
                      <Space>
                        <Button onClick={() => navigate("/meetings")}>返回会议中心</Button>
                        <Button type="primary" icon={<RocketOutlined />} loading={submitting} onClick={() => void handleCreate()}>
                          创建并进入识别
                        </Button>
                      </Space>
                    </div>
                  </div>
                </Space>
              </Card>
            </Col>
          </Row>
        )}
      </div>
    </div>
  );
}