677 lines
26 KiB
TypeScript
677 lines
26 KiB
TypeScript
import React, { useEffect, useMemo, useState } from "react";
|
||
import {
|
||
App,
|
||
Avatar,
|
||
Button,
|
||
Col,
|
||
Collapse,
|
||
DatePicker,
|
||
Drawer,
|
||
Form,
|
||
Input,
|
||
Progress,
|
||
Radio,
|
||
Row,
|
||
Select,
|
||
Skeleton,
|
||
Space,
|
||
Switch,
|
||
Tag,
|
||
Tooltip,
|
||
Typography,
|
||
Upload,
|
||
} from "antd";
|
||
import {
|
||
AudioOutlined,
|
||
CheckOutlined,
|
||
CloudUploadOutlined,
|
||
QuestionCircleOutlined,
|
||
SettingOutlined,
|
||
UserOutlined,
|
||
} from "@ant-design/icons";
|
||
import dayjs from "dayjs";
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
import { listUsers } from "../../api";
|
||
import { getAiModelDefault, getAiModelPage, type AiModelVO } from "../../api/business/aimodel";
|
||
import { getHotWordPage, type HotWordVO } from "../../api/business/hotword";
|
||
import { getHotWordGroupOptions, type HotWordGroupVO } from "../../api/business/hotwordGroup";
|
||
import {
|
||
createMeeting,
|
||
createRealtimeMeeting,
|
||
getMeetingCreateConfig,
|
||
type CreateRealtimeMeetingCommand,
|
||
type MeetingCreateConfig,
|
||
type SummaryDetailLevel,
|
||
uploadAudio,
|
||
} from "../../api/business/meeting";
|
||
import { getPromptPage, type PromptTemplateVO } from "../../api/business/prompt";
|
||
import type { SysUser } from "../../types";
|
||
import "./MeetingCreateDrawer.css";
|
||
|
||
const { Dragger } = Upload;
|
||
const { Option } = Select;
|
||
const { Text, Title } = Typography;
|
||
|
||
export type MeetingCreateType = "upload" | "realtime";
|
||
|
||
const DEFAULT_OFFLINE_AUDIO_MAX_SIZE_MB = 1024;
|
||
const DEFAULT_CREATE_CONFIG: MeetingCreateConfig = {
|
||
offlineEnabled: true,
|
||
realtimeEnabled: true,
|
||
offlineAudioMaxSizeMb: DEFAULT_OFFLINE_AUDIO_MAX_SIZE_MB,
|
||
};
|
||
|
||
interface MeetingCreateDrawerProps {
|
||
open: boolean;
|
||
initialType?: MeetingCreateType;
|
||
onCancel: () => void;
|
||
onSuccess: () => void;
|
||
}
|
||
|
||
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 resolveAvailableCreateTypes(config: MeetingCreateConfig): MeetingCreateType[] {
|
||
const types: MeetingCreateType[] = [];
|
||
if (config.offlineEnabled) {
|
||
types.push("upload");
|
||
}
|
||
if (config.realtimeEnabled) {
|
||
types.push("realtime");
|
||
}
|
||
return types;
|
||
}
|
||
|
||
function resolveAvailableCreateType(initialType: MeetingCreateType, config: MeetingCreateConfig): MeetingCreateType {
|
||
const availableTypes = resolveAvailableCreateTypes(config);
|
||
if (availableTypes.includes(initialType)) {
|
||
return initialType;
|
||
}
|
||
return availableTypes[0] || initialType;
|
||
}
|
||
|
||
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 getSessionKey(meetingId: number) {
|
||
return `realtimeMeetingSession:${meetingId}`;
|
||
}
|
||
|
||
export const MeetingCreateDrawer: React.FC<MeetingCreateDrawerProps> = ({
|
||
open,
|
||
initialType = "upload",
|
||
onCancel,
|
||
onSuccess,
|
||
}) => {
|
||
const { message } = App.useApp();
|
||
const navigate = useNavigate();
|
||
const [form] = Form.useForm();
|
||
|
||
const [type, setType] = useState<MeetingCreateType>(initialType);
|
||
const [loading, setLoading] = useState(false);
|
||
const [configLoaded, setConfigLoaded] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [createConfig, setCreateConfig] = useState<MeetingCreateConfig>({
|
||
offlineEnabled: false,
|
||
realtimeEnabled: false,
|
||
offlineAudioMaxSizeMb: DEFAULT_OFFLINE_AUDIO_MAX_SIZE_MB,
|
||
});
|
||
|
||
const [asrModels, setAsrModels] = useState<AiModelVO[]>([]);
|
||
const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
|
||
const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
|
||
const [hotwordList, setHotwordList] = useState<HotWordVO[]>([]);
|
||
const [hotWordGroups, setHotWordGroups] = useState<HotWordGroupVO[]>([]);
|
||
const [userList, setUserList] = useState<SysUser[]>([]);
|
||
|
||
const [audioUrl, setAudioUrl] = useState("");
|
||
const [uploadProgress, setUploadProgress] = useState(0);
|
||
const [fileList, setFileList] = useState<any[]>([]);
|
||
|
||
const watchedAsrModelId = Form.useWatch("asrModelId", form);
|
||
const watchedSummaryModelId = Form.useWatch("summaryModelId", form);
|
||
const watchedPromptId = Form.useWatch("promptId", form);
|
||
const watchedHotWordGroupId = Form.useWatch("hotWordGroupId", 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 selectedPrompt = useMemo(
|
||
() => prompts.find((item) => item.id === watchedPromptId) || null,
|
||
[prompts, watchedPromptId]
|
||
);
|
||
|
||
const availableTypes = useMemo(() => resolveAvailableCreateTypes(createConfig), [createConfig]);
|
||
const offlineAudioMaxSizeBytes = useMemo(
|
||
() => (createConfig.offlineAudioMaxSizeMb || DEFAULT_OFFLINE_AUDIO_MAX_SIZE_MB) * 1024 * 1024,
|
||
[createConfig]
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
return;
|
||
}
|
||
setAudioUrl("");
|
||
setUploadProgress(0);
|
||
setFileList([]);
|
||
void loadInitialData();
|
||
}, [open, initialType]);
|
||
|
||
const loadInitialData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const [asrRes, llmRes, promptRes, hotwordRes, hotWordGroupRes, users, defaultAsr, defaultLlm, createConfigRes] = await Promise.all([
|
||
getAiModelPage({current: 1, size: 100, type: "ASR", tenantEnabledOnly: true}),
|
||
getAiModelPage({current: 1, size: 100, type: "LLM", tenantEnabledOnly: true}),
|
||
getPromptPage({ current: 1, size: 100 }),
|
||
getHotWordPage({ current: 1, size: 1000 }),
|
||
getHotWordGroupOptions(),
|
||
listUsers(),
|
||
getAiModelDefault("ASR"),
|
||
getAiModelDefault("LLM"),
|
||
getMeetingCreateConfig(),
|
||
]);
|
||
|
||
const nextConfig = createConfigRes.data.data || DEFAULT_CREATE_CONFIG;
|
||
const nextType = resolveAvailableCreateType(initialType, nextConfig);
|
||
const promptRecords = promptRes.data?.data?.records || [];
|
||
const asrRecords = asrRes.data?.data?.records || [];
|
||
const llmRecords = llmRes.data?.data?.records || [];
|
||
const hotwordRecords = hotwordRes.data?.data?.records || [];
|
||
const activeLlmModels = llmRecords.filter((item: AiModelVO) => item.status === 1);
|
||
const activePrompts = promptRecords.filter((item: PromptTemplateVO) => item.status === 1);
|
||
|
||
setCreateConfig(nextConfig);
|
||
setConfigLoaded(true);
|
||
setType(nextType);
|
||
setAsrModels(asrRecords.filter((item: AiModelVO) => item.status === 1));
|
||
setLlmModels(activeLlmModels);
|
||
setPrompts(activePrompts);
|
||
setHotwordList(hotwordRecords.filter((item: HotWordVO) => item.status === 1));
|
||
setHotWordGroups((hotWordGroupRes.data.data || []).filter((item: HotWordGroupVO) => item.status === 1));
|
||
setUserList(users || []);
|
||
|
||
const defaultPrompt = activePrompts.find((item: PromptTemplateVO) => item.isDefault && item.defaultAvailable) || activePrompts[0];
|
||
const defaultSummaryModel = activeLlmModels.find((item: AiModelVO) => item.id === defaultLlm.data.data?.id)
|
||
|| activeLlmModels.find((item: AiModelVO) => item.isDefault === 1)
|
||
|| activeLlmModels[0];
|
||
form.setFieldsValue({
|
||
title: nextType === "upload" ? `文件会议 ${dayjs().format("MM-DD HH:mm")}` : `实时会议 ${dayjs().format("MM-DD HH:mm")}`,
|
||
meetingTime: dayjs(),
|
||
asrModelId: defaultAsr.data.data?.id,
|
||
summaryModelId: defaultSummaryModel?.id,
|
||
promptId: defaultPrompt?.id,
|
||
hotWordGroupId: defaultPrompt?.hotWordGroupId ?? 0,
|
||
summaryDetailLevel: "STANDARD",
|
||
useSpkId: 1,
|
||
enableTextRefine: true,
|
||
mode: "2pass",
|
||
language: "auto",
|
||
enablePunctuation: true,
|
||
enableItn: true,
|
||
saveAudio: false,
|
||
});
|
||
} catch {
|
||
message.error("加载配置失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
return;
|
||
}
|
||
const currentTitle = form.getFieldValue("title");
|
||
if (typeof currentTitle !== "string") {
|
||
return;
|
||
}
|
||
if (currentTitle.startsWith("文件会议") || currentTitle.startsWith("实时会议")) {
|
||
form.setFieldsValue({
|
||
title: type === "upload" ? `文件会议 ${dayjs().format("MM-DD HH:mm")}` : `实时会议 ${dayjs().format("MM-DD HH:mm")}`,
|
||
});
|
||
}
|
||
}, [form, open, type]);
|
||
|
||
const beforeAudioUpload = (file: File) => {
|
||
if (file.size > offlineAudioMaxSizeBytes) {
|
||
message.error(`录音文件大小不能超过 ${createConfig.offlineAudioMaxSizeMb}MB`);
|
||
setUploadProgress(0);
|
||
return Upload.LIST_IGNORE;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
const customUpload = async (options: any) => {
|
||
const { file, onSuccess: uploadSuccess, onError, onProgress } = options;
|
||
setUploadProgress(0);
|
||
try {
|
||
const res = await uploadAudio(file, (progressEvent) => {
|
||
if (progressEvent.total) {
|
||
const percent = Math.min(99, Math.round((progressEvent.loaded * 100) / progressEvent.total));
|
||
setUploadProgress(percent);
|
||
onProgress({ percent });
|
||
}
|
||
});
|
||
setUploadProgress(100);
|
||
onProgress({ percent: 100 });
|
||
setAudioUrl(res.data.data);
|
||
uploadSuccess(res.data.data);
|
||
message.success("录音上传成功");
|
||
} catch (err) {
|
||
onError(err);
|
||
message.error("文件上传失败");
|
||
}
|
||
};
|
||
|
||
const handleOk = async () => {
|
||
if (availableTypes.length === 0) {
|
||
message.error("当前系统参数已关闭全部会议创建入口");
|
||
return;
|
||
}
|
||
if (!availableTypes.includes(type)) {
|
||
const fallbackType = availableTypes[0];
|
||
if (fallbackType) {
|
||
setType(fallbackType);
|
||
}
|
||
message.warning("当前入口已关闭，已切换到可用创建方式");
|
||
return;
|
||
}
|
||
|
||
if (type === "upload" && !audioUrl) {
|
||
message.error("请先上传录音文件");
|
||
return;
|
||
}
|
||
|
||
const values = await form.validateFields();
|
||
if (type === "realtime") {
|
||
const wsUrl = resolveWsUrl(selectedAsrModel);
|
||
if (!wsUrl) {
|
||
message.error("当前 ASR 模型未配置 WebSocket 地址");
|
||
return;
|
||
}
|
||
}
|
||
if (!values.promptId) {
|
||
message.error("总结模板为空");
|
||
return;
|
||
}
|
||
|
||
setSubmitting(true);
|
||
try {
|
||
const { hostUserId, ...meetingValues } = values;
|
||
const selectedHotWords = meetingValues.hotWordGroupId == null || meetingValues.hotWordGroupId === 0
|
||
? undefined
|
||
: hotwordList
|
||
.filter((item) => item.hotWordGroupId === meetingValues.hotWordGroupId)
|
||
.map((item) => item.word)
|
||
.filter((word) => !!word?.trim());
|
||
|
||
if (type === "upload") {
|
||
await createMeeting({
|
||
...meetingValues,
|
||
...(hostUserId != null ? { hostUserId } : {}),
|
||
meetingTime: meetingValues.meetingTime.format("YYYY-MM-DD HH:mm:ss"),
|
||
audioUrl,
|
||
participants: meetingValues.participants?.join(","),
|
||
tags: meetingValues.tags?.join(","),
|
||
summaryDetailLevel: meetingValues.summaryDetailLevel as SummaryDetailLevel,
|
||
hotWords: selectedHotWords,
|
||
});
|
||
message.success("会议发起成功");
|
||
onSuccess();
|
||
onCancel();
|
||
return;
|
||
}
|
||
|
||
const selectedHotwords = hotwordList
|
||
.filter((item) => item.hotWordGroupId === meetingValues.hotWordGroupId && meetingValues.hotWordGroupId !== 0)
|
||
.map((item) => ({
|
||
hotword: item.word,
|
||
weight: Number(item.weight || 2) / 10,
|
||
}));
|
||
|
||
const payload: CreateRealtimeMeetingCommand = {
|
||
...meetingValues,
|
||
...(hostUserId != null ? { hostUserId } : {}),
|
||
meetingTime: meetingValues.meetingTime.format("YYYY-MM-DD HH:mm:ss"),
|
||
participants: meetingValues.participants?.join(",") || "",
|
||
tags: meetingValues.tags?.join(",") || "",
|
||
summaryDetailLevel: meetingValues.summaryDetailLevel as SummaryDetailLevel,
|
||
mode: meetingValues.mode || "2pass",
|
||
language: meetingValues.language || "auto",
|
||
useSpkId: meetingValues.useSpkId == null ? 1 : (meetingValues.useSpkId ? 1 : 0),
|
||
enablePunctuation: meetingValues.enablePunctuation !== false,
|
||
enableItn: meetingValues.enableItn !== false,
|
||
enableTextRefine: !!meetingValues.enableTextRefine,
|
||
saveAudio: !!meetingValues.saveAudio,
|
||
hotWords: selectedHotWords,
|
||
};
|
||
|
||
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 == null ? 1 : (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("会议已创建，即将进入实时识别");
|
||
onSuccess();
|
||
onCancel();
|
||
navigate(`/meeting-live-session/${createdMeeting.id}`);
|
||
} catch {
|
||
message.error(type === "upload" ? "创建会议失败" : "创建实时会议失败");
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Drawer
|
||
rootClassName="meeting-create-drawer-root"
|
||
className="meeting-create-drawer"
|
||
title={null}
|
||
open={open}
|
||
onClose={onCancel}
|
||
width="min(960px, calc(100vw - 48px))"
|
||
forceRender
|
||
destroyOnHidden={false}
|
||
placement="right"
|
||
closable={false}
|
||
footer={
|
||
configLoaded ? (
|
||
<div className="meeting-create-drawer__footer">
|
||
<Space size={12}>
|
||
<Button onClick={onCancel}>取消</Button>
|
||
<Button type="primary" onClick={handleOk} loading={submitting}>
|
||
{type === "upload" ? (audioUrl ? "完成并分析" : "上传并分析") : "创建并进入识别"}
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
) : null
|
||
}
|
||
styles={{
|
||
header: { display: "none" },
|
||
body: { padding: 0, display: "flex", flexDirection: "column", background: "var(--app-bg-layout)" },
|
||
footer: { padding: 0, borderTop: "1px solid var(--app-border-color)", background: "var(--app-bg-surface)", minHeight: configLoaded ? 72 : 0 }
|
||
}}
|
||
>
|
||
{!configLoaded ? (
|
||
<div className="meeting-create-drawer__skeleton">
|
||
<Skeleton active paragraph={{ rows: 12 }} />
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="meeting-create-drawer__header">
|
||
<Row justify="space-between" align="middle" gutter={[16, 12]}>
|
||
<Col flex="auto">
|
||
<Space size={12}>
|
||
<div className="meeting-create-drawer__title-icon">
|
||
{type === "upload" ? <CloudUploadOutlined /> : <AudioOutlined />}
|
||
</div>
|
||
<div>
|
||
<Title level={4} className="meeting-create-drawer__title">{type === "upload" ? "上传录音发起分析" : "创建实时会议"}</Title>
|
||
<Text type="secondary" className="meeting-create-drawer__subtitle">{type === "upload" ? "上传已有音频文件并由 AI 进行转写与总结分析" : "实时采集语音并进行流式转写与实时纪要生成"}</Text>
|
||
</div>
|
||
</Space>
|
||
</Col>
|
||
<Col flex="none">
|
||
<Radio.Group value={type} onChange={e => setType(e.target.value)} optionType="button" buttonStyle="solid" className="meeting-create-drawer__type-switch">
|
||
{createConfig.offlineEnabled && (
|
||
<Radio.Button value="upload"><CloudUploadOutlined /> 上传录音</Radio.Button>
|
||
)}
|
||
{createConfig.realtimeEnabled && (
|
||
<Radio.Button value="realtime"><AudioOutlined /> 实时会议</Radio.Button>
|
||
)}
|
||
</Radio.Group>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
|
||
<div className="meeting-create-drawer__body">
|
||
<Form form={form} layout="vertical" disabled={loading} className="meeting-create-form">
|
||
<div className="meeting-create-section-title">
|
||
<span className="meeting-create-section-title__bar" />
|
||
<Title level={5}>基础信息</Title>
|
||
</div>
|
||
|
||
<Row gutter={24}>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="title" label="会议标题" rules={[{ required: true }]}>
|
||
<Input placeholder="输入会议标题" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="meetingTime" label="会议时间" rules={[{ required: true }]}>
|
||
<DatePicker showTime style={{ width: "100%" }} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={24}>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="participants" label="参会人员">
|
||
<Select mode="multiple" placeholder="选择参会人员" showSearch optionFilterProp="children">
|
||
{userList.map(u => (<Option key={u.userId} value={u.userId}><Space><Avatar size="small" icon={<UserOutlined />} />{u.displayName || u.username}</Space></Option>))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="hostUserId" label="会议主持人">
|
||
<Select allowClear placeholder="默认为创建人" showSearch optionFilterProp="children">
|
||
{userList.map(u => (<Option key={u.userId} value={u.userId}><Space><Avatar size="small" icon={<UserOutlined />} />{u.displayName || u.username}</Space></Option>))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={24}>
|
||
<Col span={24}>
|
||
<Form.Item name="tags" label="会议标签">
|
||
<Select mode="tags" placeholder="输入标签" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<div className="meeting-create-section-divider" />
|
||
|
||
<div className="meeting-create-section-title">
|
||
<span className="meeting-create-section-title__bar" />
|
||
<Title level={5}>模型与纪要配置</Title>
|
||
</div>
|
||
|
||
<Row gutter={24}>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="asrModelId" label="语音识别模型 (ASR)" rules={[{ required: true }]}>
|
||
<Select placeholder="选择 ASR 模型">{asrModels.map(m => (<Option key={m.id} value={m.id}>{m.modelName}</Option>))}</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="summaryModelId" label="总结模型 (LLM)" rules={[{ required: true }]}>
|
||
<Select placeholder="选择总结模型">{llmModels.map(m => (<Option key={m.id} value={m.id}>{m.modelName}</Option>))}</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item
|
||
name="promptId"
|
||
label="总结模板"
|
||
>
|
||
{prompts.length > 15 ? (
|
||
<Select allowClear placeholder="请选择总结模板" showSearch optionFilterProp="children">
|
||
{prompts.map(p => <Option key={p.id} value={p.id}>{p.templateName}</Option>)}
|
||
</Select>
|
||
) : (
|
||
<div className="meeting-create-template-grid">
|
||
<Row gutter={[12, 12]}>
|
||
{prompts.map(p => {
|
||
const isSelected = watchedPromptId === p.id;
|
||
return (
|
||
<Col xs={24} sm={12} md={8} key={p.id}>
|
||
<div
|
||
onClick={() => form.setFieldsValue({ promptId: p.id })}
|
||
className={isSelected ? "meeting-create-template-card is-selected" : "meeting-create-template-card"}
|
||
>
|
||
<div className="meeting-create-template-card__name">{p.templateName}</div>
|
||
{isSelected && <div className="meeting-create-template-card__check"><CheckOutlined /></div>}
|
||
</div>
|
||
</Col>
|
||
);
|
||
})}
|
||
</Row>
|
||
</div>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Row gutter={24}>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="hotWordGroupId" label="热词组" tooltip={selectedPrompt?.hotWordGroupName ? `默认跟随模板：${selectedPrompt.hotWordGroupName}` : "模板未绑定热词组时可手动选择"} extra={watchedHotWordGroupId != null ? "创建会议时会优先使用这里选中的热词组" : undefined}>
|
||
<Select placeholder={selectedPrompt?.hotWordGroupId ? "默认已带出模板热词组，可按需修改" : "请选择热词组"} options={[{ label: "不使用热词组", value: 0 }, ...hotWordGroups.map((item) => ({ label: `${item.groupName} (${item.hotWordCount}/200)`, value: item.id }))]} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Form.Item name="summaryDetailLevel" label="总结详细程度" rules={[{ required: true }]}>
|
||
<Radio.Group className="meeting-create-radio-line">
|
||
<Radio value="DETAILED">详细</Radio>
|
||
<Radio value="STANDARD">标准</Radio>
|
||
<Radio value="BRIEF">简洁</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Collapse
|
||
ghost
|
||
expandIconPosition="end"
|
||
className="meeting-create-advanced"
|
||
items={[
|
||
{
|
||
key: "advanced",
|
||
forceRender: true,
|
||
label: (
|
||
<div className="meeting-create-advanced__label">
|
||
<div className="meeting-create-advanced__title">
|
||
<div className="meeting-create-advanced__icon">
|
||
<SettingOutlined />
|
||
</div>
|
||
高级设置
|
||
</div>
|
||
</div>
|
||
),
|
||
children: (
|
||
<div className="meeting-create-advanced__body">
|
||
<Row gutter={24}>
|
||
<Col xs={24} md={8}>
|
||
<Form.Item name="useSpkId" label={<span>说话人区分 <Tooltip title="自动识别录音中的不同发言者并进行角色分离"><QuestionCircleOutlined /></Tooltip></span>} valuePropName="checked" getValueProps={(v) => ({ checked: !!v })} normalize={(v) => (v ? 1 : 0)}>
|
||
<Switch />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col xs={24} md={8}>
|
||
<Form.Item name="enableTextRefine" label={<span>文本修正 <Tooltip title="自动识别并修正语音转写中的口语词、语气助词等"><QuestionCircleOutlined /></Tooltip></span>} valuePropName="checked">
|
||
<Switch />
|
||
</Form.Item>
|
||
</Col>
|
||
{type === "realtime" && (
|
||
<>
|
||
<Col xs={24} md={8}>
|
||
<Form.Item name="saveAudio" label="保存录音" valuePropName="checked">
|
||
<Switch />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="mode" label="识别模式">
|
||
<Radio.Group>
|
||
<Radio value="2pass">2pass（流式 + 离线修正）</Radio>
|
||
<Radio value="online">online（纯流式）</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
</Col>
|
||
</>
|
||
)}
|
||
</Row>
|
||
<Form.Item name="userPrompt" label="用户提示词" extra="提供补充信息以指导 AI 在生成会议总结时更侧重于特定方面或遵循特定风格">
|
||
<Input.TextArea placeholder="请输入额外说明，例如：请重点关注会议中的待办事项、以摘要形式输出、或者采用严谨的公文风格等" autoSize={{ minRows: 3, maxRows: 6 }} showCount maxLength={1000} />
|
||
</Form.Item>
|
||
</div>
|
||
),
|
||
}
|
||
]}
|
||
/>
|
||
|
||
{type === "upload" && (
|
||
<>
|
||
<div className="meeting-create-section-divider" />
|
||
<div className="meeting-create-section-title">
|
||
<span className="meeting-create-section-title__bar" />
|
||
<Title level={5}>上传录音文件</Title>
|
||
</div>
|
||
<Dragger
|
||
accept=".mp3,.wav,.m4a"
|
||
beforeUpload={beforeAudioUpload}
|
||
fileList={fileList}
|
||
customRequest={customUpload}
|
||
onChange={info => setFileList(info.fileList.slice(-1))}
|
||
maxCount={1}
|
||
className="meeting-create-upload"
|
||
>
|
||
<div>
|
||
<p className="ant-upload-drag-icon"><CloudUploadOutlined /></p>
|
||
<p className="ant-upload-text">点击或拖拽录音文件到此处</p>
|
||
<p className="ant-upload-hint">支持 mp3、wav、m4a 等格式，大小不超过 {createConfig.offlineAudioMaxSizeMb}MB</p>
|
||
{uploadProgress > 0 && uploadProgress < 100 && (
|
||
<div className="meeting-create-upload__progress">
|
||
<Progress percent={uploadProgress} size="small" />
|
||
<div>文件上传中，请稍候...</div>
|
||
</div>
|
||
)}
|
||
{audioUrl && (
|
||
<Tag color="processing" className="meeting-create-upload__file">
|
||
<span>已上传：</span>
|
||
<span>{audioUrl.split("/").pop()}</span>
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
</Dragger>
|
||
</>
|
||
)}
|
||
</Form>
|
||
</div>
|
||
</>
|
||
)}
|
||
</Drawer>
|
||
);
|
||
};
|