845 lines
29 KiB
TypeScript
845 lines
29 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Layout,
|
||
List,
|
||
Input,
|
||
Button,
|
||
Avatar,
|
||
Typography,
|
||
Space,
|
||
Modal,
|
||
Form,
|
||
Select,
|
||
Tag,
|
||
message,
|
||
Dropdown,
|
||
Popconfirm,
|
||
Alert
|
||
} from 'antd';
|
||
import {
|
||
SendOutlined,
|
||
PlusOutlined,
|
||
RobotOutlined,
|
||
UserOutlined,
|
||
SettingOutlined,
|
||
MessageOutlined,
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
PlusSquareOutlined
|
||
} from '@ant-design/icons';
|
||
|
||
const { Sider, Content } = Layout;
|
||
const { Title, Text } = Typography;
|
||
const { TextArea } = Input;
|
||
|
||
interface Message {
|
||
id: string;
|
||
content: string;
|
||
role: 'user' | 'assistant';
|
||
timestamp: string;
|
||
}
|
||
|
||
interface Conversation {
|
||
id: string;
|
||
title: string;
|
||
botName: string;
|
||
botType: 'feishu' | 'other';
|
||
lastMessage: string;
|
||
timestamp: string;
|
||
messages: Message[];
|
||
}
|
||
|
||
interface BotConfig {
|
||
id: string;
|
||
name: string;
|
||
type: 'feishu' | 'other';
|
||
appId: string;
|
||
appSecret: string;
|
||
description: string;
|
||
}
|
||
|
||
const ConversationsPage: React.FC = () => {
|
||
const [conversations, setConversations] = useState<Conversation[]>([]);
|
||
const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null);
|
||
const [messageInput, setMessageInput] = useState('');
|
||
const [botConfigs, setBotConfigs] = useState<BotConfig[]>([]);
|
||
const [showBotModal, setShowBotModal] = useState(false);
|
||
const [showConversationModal, setShowConversationModal] = useState(false);
|
||
const [editingBot, setEditingBot] = useState<BotConfig | null>(null);
|
||
const [form] = Form.useForm();
|
||
const [conversationForm] = Form.useForm();
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, []);
|
||
|
||
const loadData = () => {
|
||
// 加载飞书机器人配置
|
||
const savedBots = localStorage.getItem('botConfigs');
|
||
if (savedBots) {
|
||
setBotConfigs(JSON.parse(savedBots));
|
||
} else {
|
||
// 默认配置示例
|
||
const defaultBots: BotConfig[] = [
|
||
{
|
||
id: '1',
|
||
name: '助手机器人',
|
||
type: 'feishu',
|
||
appId: 'cli_xxxxxxxxxxxxx',
|
||
appSecret: 'xxxxxxxxxxxxx',
|
||
description: '用于日常事务处理和提醒'
|
||
}
|
||
];
|
||
setBotConfigs(defaultBots);
|
||
localStorage.setItem('botConfigs', JSON.stringify(defaultBots));
|
||
}
|
||
|
||
// 加载会话列表
|
||
const savedConversations = localStorage.getItem('conversations');
|
||
if (savedConversations) {
|
||
setConversations(JSON.parse(savedConversations));
|
||
} else {
|
||
// 默认会话示例
|
||
const defaultConversations: Conversation[] = [
|
||
{
|
||
id: '1',
|
||
title: '欢迎使用飞书机器人',
|
||
botName: '助手机器人',
|
||
botType: 'feishu',
|
||
lastMessage: '你好！我是飞书助手机器人，有什么可以帮助您的吗？',
|
||
timestamp: new Date().toISOString(),
|
||
messages: [
|
||
{
|
||
id: '1',
|
||
content: '你好！我是飞书助手机器人，有什么可以帮助您的吗？',
|
||
role: 'assistant',
|
||
timestamp: new Date().toISOString()
|
||
}
|
||
]
|
||
}
|
||
];
|
||
setConversations(defaultConversations);
|
||
localStorage.setItem('conversations', JSON.stringify(defaultConversations));
|
||
}
|
||
};
|
||
|
||
const handleSendMessage = async () => {
|
||
if (!messageInput.trim() || !selectedConversation) return;
|
||
|
||
const newMessage: Message = {
|
||
id: Date.now().toString(),
|
||
content: messageInput,
|
||
role: 'user',
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
const updatedConversation = {
|
||
...selectedConversation,
|
||
messages: [...selectedConversation.messages, newMessage],
|
||
lastMessage: messageInput,
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
setSelectedConversation(updatedConversation);
|
||
setConversations(conversations.map(conv =>
|
||
conv.id === selectedConversation.id ? updatedConversation : conv
|
||
));
|
||
|
||
// 保存到本地存储
|
||
localStorage.setItem('conversations', JSON.stringify(
|
||
conversations.map(conv => conv.id === selectedConversation.id ? updatedConversation : conv)
|
||
));
|
||
|
||
setMessageInput('');
|
||
|
||
// 模拟飞书应用回复
|
||
setTimeout(() => {
|
||
const botReply: Message = {
|
||
id: (Date.now() + 1).toString(),
|
||
content: `收到您的消息："${messageInput}"。这是一个模拟的飞书应用回复。在实际使用中，这里会调用飞书自建应用API来发送消息。`,
|
||
role: 'assistant',
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
const updatedWithReply = {
|
||
...updatedConversation,
|
||
messages: [...updatedConversation.messages, botReply],
|
||
lastMessage: botReply.content,
|
||
timestamp: new Date().toISOString()
|
||
};
|
||
|
||
setSelectedConversation(updatedWithReply);
|
||
setConversations(conversations.map(conv =>
|
||
conv.id === selectedConversation.id ? updatedWithReply : conv
|
||
));
|
||
|
||
localStorage.setItem('conversations', JSON.stringify(
|
||
conversations.map(conv => conv.id === selectedConversation.id ? updatedWithReply : conv)
|
||
));
|
||
}, 1000);
|
||
};
|
||
|
||
|
||
const handleSubmitConversation = () => {
|
||
conversationForm.validateFields().then(values => {
|
||
const selectedBot = botConfigs.find(bot => bot.id === values.botId);
|
||
if (!selectedBot) return;
|
||
|
||
const newConversation: Conversation = {
|
||
id: Date.now().toString(),
|
||
title: values.title,
|
||
botName: selectedBot.name,
|
||
botType: selectedBot.type,
|
||
lastMessage: '新会话已创建',
|
||
timestamp: new Date().toISOString(),
|
||
messages: []
|
||
};
|
||
|
||
setConversations([newConversation, ...conversations]);
|
||
localStorage.setItem('conversations', JSON.stringify([newConversation, ...conversations]));
|
||
setShowConversationModal(false);
|
||
conversationForm.resetFields();
|
||
setSelectedConversation(newConversation);
|
||
message.success('会话创建成功');
|
||
});
|
||
};
|
||
|
||
const handleAddBot = () => {
|
||
setEditingBot(null);
|
||
form.resetFields();
|
||
setShowBotModal(true);
|
||
};
|
||
|
||
const handleEditBot = (bot: BotConfig) => {
|
||
setEditingBot(bot);
|
||
form.setFieldsValue(bot);
|
||
setShowBotModal(true);
|
||
};
|
||
|
||
const handleDeleteBot = (botId: string) => {
|
||
const updatedBots = botConfigs.filter(bot => bot.id !== botId);
|
||
setBotConfigs(updatedBots);
|
||
localStorage.setItem('botConfigs', JSON.stringify(updatedBots));
|
||
message.success('机器人配置已删除');
|
||
};
|
||
|
||
const handleSubmitBot = () => {
|
||
form.validateFields().then(values => {
|
||
if (editingBot) {
|
||
// 编辑模式
|
||
const updatedBot: BotConfig = {
|
||
...editingBot,
|
||
name: values.name,
|
||
type: values.type,
|
||
appId: values.appId,
|
||
appSecret: values.appSecret,
|
||
description: values.description
|
||
};
|
||
const updatedBots = botConfigs.map(bot =>
|
||
bot.id === editingBot.id ? updatedBot : bot
|
||
);
|
||
setBotConfigs(updatedBots);
|
||
localStorage.setItem('botConfigs', JSON.stringify(updatedBots));
|
||
message.success('飞书应用配置已更新');
|
||
} else {
|
||
// 新增模式
|
||
const newBot: BotConfig = {
|
||
id: Date.now().toString(),
|
||
name: values.name,
|
||
type: values.type,
|
||
appId: values.appId,
|
||
appSecret: values.appSecret,
|
||
description: values.description
|
||
};
|
||
setBotConfigs([...botConfigs, newBot]);
|
||
localStorage.setItem('botConfigs', JSON.stringify([...botConfigs, newBot]));
|
||
message.success('飞书应用配置已添加');
|
||
}
|
||
setShowBotModal(false);
|
||
form.resetFields();
|
||
setEditingBot(null);
|
||
});
|
||
};
|
||
|
||
const handleDeleteConversation = (conversationId: string) => {
|
||
const updatedConversations = conversations.filter(conv => conv.id !== conversationId);
|
||
setConversations(updatedConversations);
|
||
localStorage.setItem('conversations', JSON.stringify(updatedConversations));
|
||
if (selectedConversation?.id === conversationId) {
|
||
setSelectedConversation(null);
|
||
}
|
||
message.success('会话已删除');
|
||
};
|
||
|
||
const getBotItems = () => {
|
||
return [
|
||
{
|
||
key: 'add',
|
||
label: (
|
||
<div onClick={() => handleAddBot()}>
|
||
<PlusSquareOutlined style={{ marginRight: '8px' }} />
|
||
添加飞书应用
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
type: 'divider' as const,
|
||
},
|
||
...botConfigs.map(bot => ({
|
||
key: bot.id,
|
||
label: (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<span>
|
||
<RobotOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
|
||
{bot.name}
|
||
<Tag color={bot.type === 'feishu' ? 'blue' : 'green'} style={{ marginLeft: '8px' }}>
|
||
{bot.type === 'feishu' ? '飞书' : '其他'}
|
||
</Tag>
|
||
</span>
|
||
<Space size={4}>
|
||
<EditOutlined
|
||
style={{ color: '#52c41a', cursor: 'pointer' }}
|
||
onClick={(e) => { e.stopPropagation(); handleEditBot(bot); }}
|
||
/>
|
||
<Popconfirm
|
||
title="确认删除"
|
||
description="确定要删除这个飞书应用配置吗？"
|
||
onConfirm={(e) => {
|
||
e?.stopPropagation();
|
||
handleDeleteBot(bot.id);
|
||
}}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<DeleteOutlined
|
||
style={{ color: '#ff4d4f', cursor: 'pointer' }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</Popconfirm>
|
||
</Space>
|
||
</div>
|
||
)
|
||
}))
|
||
];
|
||
};
|
||
|
||
return (
|
||
<div style={{ height: 'calc(100vh - 184px)' }}>
|
||
<div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<div>
|
||
<Title level={2} style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
<MessageOutlined style={{ color: '#1890ff' }} />
|
||
飞书机器人会话
|
||
</Title>
|
||
<Text type="secondary" style={{ marginTop: '8px', display: 'block' }}>
|
||
与飞书自建应用进行对话，指挥AI助手完成各种任务
|
||
</Text>
|
||
</div>
|
||
<Dropdown
|
||
menu={{ items: getBotItems() }}
|
||
trigger={['click']}
|
||
placement="bottomRight"
|
||
>
|
||
<Button icon={<SettingOutlined />}>
|
||
飞书应用配置 ({botConfigs.length})
|
||
</Button>
|
||
</Dropdown>
|
||
</div>
|
||
|
||
<Layout style={{
|
||
background: 'white',
|
||
borderRadius: '12px',
|
||
height: 'calc(100% - 80px)',
|
||
overflow: 'hidden'
|
||
}}>
|
||
{/* 左侧会话列表 */}
|
||
<Sider
|
||
width={320}
|
||
style={{
|
||
background: '#fafafa',
|
||
borderRight: '1px solid #f0f0f0',
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column'
|
||
}}
|
||
>
|
||
<div style={{ padding: '16px', borderBottom: '1px solid #f0f0f0' }}>
|
||
<Input.Search
|
||
placeholder="搜索会话..."
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</div>
|
||
|
||
{/* 飞书应用列表 */}
|
||
<div style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0' }}>
|
||
<div style={{ fontSize: '12px', color: '#999', marginBottom: '8px', fontWeight: 'bold' }}>
|
||
飞书应用
|
||
</div>
|
||
{botConfigs.length > 0 ? (
|
||
<Space direction="vertical" style={{ width: '100%' }} size={8}>
|
||
{botConfigs.map(bot => {
|
||
const hasConversation = conversations.some(conv => conv.botName === bot.name);
|
||
return (
|
||
<div
|
||
key={bot.id}
|
||
onClick={() => {
|
||
if (hasConversation) {
|
||
const existingConv = conversations.find(conv => conv.botName === bot.name);
|
||
if (existingConv) {
|
||
setSelectedConversation(existingConv);
|
||
}
|
||
} else {
|
||
// 创建新会话
|
||
const newConversation: Conversation = {
|
||
id: Date.now().toString(),
|
||
title: bot.name,
|
||
botName: bot.name,
|
||
botType: bot.type,
|
||
lastMessage: '新会话已创建',
|
||
timestamp: new Date().toISOString(),
|
||
messages: []
|
||
};
|
||
setConversations([newConversation, ...conversations]);
|
||
localStorage.setItem('conversations', JSON.stringify([newConversation, ...conversations]));
|
||
setSelectedConversation(newConversation);
|
||
}
|
||
}}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
padding: '10px 12px',
|
||
background: selectedConversation?.botName === bot.name ? '#e6f7ff' : 'white',
|
||
borderRadius: '8px',
|
||
cursor: 'pointer',
|
||
border: '1px solid #f0f0f0',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (selectedConversation?.botName !== bot.name) {
|
||
e.currentTarget.style.background = '#f5f5f5';
|
||
e.currentTarget.style.borderColor = '#d9d9d9';
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (selectedConversation?.botName !== bot.name) {
|
||
e.currentTarget.style.background = 'white';
|
||
e.currentTarget.style.borderColor = '#f0f0f0';
|
||
}
|
||
}}
|
||
>
|
||
<Avatar
|
||
icon={<RobotOutlined />}
|
||
style={{ backgroundColor: '#1890ff' }}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Text strong style={{ fontSize: '14px' }}>
|
||
{bot.name}
|
||
</Text>
|
||
<Tag color={bot.type === 'feishu' ? 'blue' : 'green'}>
|
||
{bot.type === 'feishu' ? '飞书' : '其他'}
|
||
</Tag>
|
||
</div>
|
||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
||
{hasConversation ? '点击继续对话' : '点击开始对话'}
|
||
</Text>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</Space>
|
||
) : (
|
||
<div style={{ textAlign: 'center', padding: '20px 0', color: '#999' }}>
|
||
<Text type="secondary">暂无飞书应用</Text>
|
||
<div style={{ marginTop: '8px' }}>
|
||
<Button type="link" size="small" onClick={handleAddBot}>
|
||
添加飞书应用
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 会话列表 */}
|
||
<div style={{ padding: '12px 16px 0', flex: 1, overflowY: 'auto' }}>
|
||
<div style={{ fontSize: '12px', color: '#999', marginBottom: '8px', fontWeight: 'bold' }}>
|
||
会话列表
|
||
</div>
|
||
<List
|
||
dataSource={conversations}
|
||
renderItem={(conversation) => (
|
||
<List.Item
|
||
key={conversation.id}
|
||
onClick={() => setSelectedConversation(conversation)}
|
||
style={{
|
||
padding: '12px',
|
||
cursor: 'pointer',
|
||
background: selectedConversation?.id === conversation.id ? '#e6f7ff' : 'transparent',
|
||
borderRadius: '8px',
|
||
marginBottom: '8px',
|
||
border: '1px solid #f0f0f0',
|
||
transition: 'all 0.3s'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (selectedConversation?.id !== conversation.id) {
|
||
e.currentTarget.style.background = '#f5f5f5';
|
||
e.currentTarget.style.borderColor = '#d9d9d9';
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (selectedConversation?.id !== conversation.id) {
|
||
e.currentTarget.style.background = 'transparent';
|
||
e.currentTarget.style.borderColor = '#f0f0f0';
|
||
}
|
||
}}
|
||
>
|
||
<List.Item.Meta
|
||
avatar={
|
||
<Avatar
|
||
icon={<RobotOutlined />}
|
||
style={{ backgroundColor: '#1890ff' }}
|
||
/>
|
||
}
|
||
title={
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Text strong ellipsis style={{ maxWidth: '140px' }}>
|
||
{conversation.title}
|
||
</Text>
|
||
<Tag color={conversation.botType === 'feishu' ? 'blue' : 'green'}>
|
||
{conversation.botType === 'feishu' ? '飞书' : '其他'}
|
||
</Tag>
|
||
</div>
|
||
}
|
||
description={
|
||
<div>
|
||
<Text ellipsis style={{ fontSize: '11px', color: '#666' }}>
|
||
{conversation.lastMessage}
|
||
</Text>
|
||
<Text style={{ fontSize: '10px', color: '#999', display: 'block', marginTop: '2px' }}>
|
||
{new Date(conversation.timestamp).toLocaleString()}
|
||
</Text>
|
||
</div>
|
||
}
|
||
/>
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
</div>
|
||
</Sider>
|
||
|
||
{/* 右侧会话内容 */}
|
||
<Content style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||
{selectedConversation ? (
|
||
<>
|
||
{/* 会话头部 */}
|
||
<div style={{
|
||
padding: '16px 24px',
|
||
borderBottom: '1px solid #f0f0f0',
|
||
background: '#fafafa'
|
||
}}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<Space>
|
||
<Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1890ff' }} />
|
||
<div>
|
||
<Title level={4} style={{ margin: 0 }}>
|
||
{selectedConversation.title}
|
||
</Title>
|
||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||
飞书机器人：{selectedConversation.botName}
|
||
</Text>
|
||
</div>
|
||
</Space>
|
||
<Popconfirm
|
||
title="确认删除"
|
||
description="确定要删除这个会话吗？"
|
||
onConfirm={() => handleDeleteConversation(selectedConversation.id)}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Button danger icon={<DeleteOutlined />}>
|
||
删除会话
|
||
</Button>
|
||
</Popconfirm>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 消息列表 */}
|
||
<div style={{
|
||
flex: 1,
|
||
padding: '24px',
|
||
overflowY: 'auto',
|
||
background: 'white'
|
||
}}>
|
||
{selectedConversation.messages.length === 0 ? (
|
||
<div style={{
|
||
textAlign: 'center',
|
||
padding: '100px 0',
|
||
color: '#999'
|
||
}}>
|
||
<MessageOutlined style={{ fontSize: '64px', color: '#d9d9d9', marginBottom: '16px' }} />
|
||
<div>暂无消息，开始与机器人对话吧！</div>
|
||
</div>
|
||
) : (
|
||
<Space direction="vertical" style={{ width: '100%' }} size={16}>
|
||
{selectedConversation.messages.map((message) => (
|
||
<div
|
||
key={message.id}
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
|
||
marginBottom: '16px'
|
||
}}
|
||
>
|
||
<div style={{
|
||
maxWidth: '70%',
|
||
display: 'flex',
|
||
gap: '8px',
|
||
alignItems: 'flex-start'
|
||
}}>
|
||
{message.role === 'assistant' && (
|
||
<Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1890ff' }} />
|
||
)}
|
||
<div>
|
||
{message.role === 'assistant' && (
|
||
<Text type="secondary" style={{ fontSize: '12px', marginLeft: '8px' }}>
|
||
{selectedConversation.botName}
|
||
</Text>
|
||
)}
|
||
<div style={{
|
||
background: message.role === 'user' ? '#1890ff' : '#f5f5f5',
|
||
color: message.role === 'user' ? 'white' : 'black',
|
||
padding: '12px 16px',
|
||
borderRadius: '8px',
|
||
marginTop: '4px',
|
||
wordBreak: 'break-word'
|
||
}}>
|
||
{message.content}
|
||
</div>
|
||
<Text type="secondary" style={{ fontSize: '11px', marginTop: '4px', display: 'block' }}>
|
||
{new Date(message.timestamp).toLocaleString()}
|
||
</Text>
|
||
</div>
|
||
{message.role === 'user' && (
|
||
<Avatar icon={<UserOutlined />} style={{ backgroundColor: '#52c41a' }} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</Space>
|
||
)}
|
||
</div>
|
||
|
||
{/* 消息输入区 */}
|
||
<div style={{
|
||
padding: '16px 24px',
|
||
borderTop: '1px solid #f0f0f0',
|
||
background: '#fafafa'
|
||
}}>
|
||
<Space.Compact style={{ width: '100%' }}>
|
||
<TextArea
|
||
value={messageInput}
|
||
onChange={(e) => setMessageInput(e.target.value)}
|
||
placeholder="输入消息，按Enter发送，Shift+Enter换行"
|
||
autoSize={{ minRows: 1, maxRows: 4 }}
|
||
onPressEnter={(e) => {
|
||
if (!e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSendMessage();
|
||
}
|
||
}}
|
||
/>
|
||
<Button
|
||
type="primary"
|
||
icon={<SendOutlined />}
|
||
onClick={handleSendMessage}
|
||
style={{ height: 'auto' }}
|
||
>
|
||
发送
|
||
</Button>
|
||
</Space.Compact>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div style={{
|
||
flex: 1,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: 'white'
|
||
}}>
|
||
<div style={{ textAlign: 'center', color: '#999' }}>
|
||
<MessageOutlined style={{ fontSize: '64px', color: '#d9d9d9', marginBottom: '16px' }} />
|
||
<div style={{ fontSize: '16px', marginBottom: '16px' }}>
|
||
选择左侧的飞书应用开始对话
|
||
</div>
|
||
{botConfigs.length === 0 && (
|
||
<div>
|
||
<div style={{ marginBottom: '16px' }}>或先添加飞书应用配置</div>
|
||
<Button
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={handleAddBot}
|
||
>
|
||
添加飞书应用
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Content>
|
||
</Layout>
|
||
|
||
{/* 飞书应用配置弹窗 */}
|
||
<Modal
|
||
title={
|
||
<Space>
|
||
<RobotOutlined style={{ color: '#1890ff' }} />
|
||
{editingBot ? '编辑飞书应用配置' : '添加飞书自建应用'}
|
||
</Space>
|
||
}
|
||
open={showBotModal}
|
||
onOk={handleSubmitBot}
|
||
onCancel={() => {
|
||
setShowBotModal(false);
|
||
form.resetFields();
|
||
setEditingBot(null);
|
||
}}
|
||
width={700}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Alert
|
||
message="飞书自建应用配置说明"
|
||
description={
|
||
<div>
|
||
<p>1. 在飞书开放平台创建自建应用</p>
|
||
<p>2. 在「凭证与基础信息」页面复制 App ID 和 App Secret</p>
|
||
<p>3. 在「权限管理」配置必要权限（如 im:message、im:resource 等）</p>
|
||
</div>
|
||
}
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: '16px' }}
|
||
/>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
style={{ marginTop: '24px' }}
|
||
initialValues={{
|
||
type: 'feishu'
|
||
}}
|
||
>
|
||
<Form.Item
|
||
name="name"
|
||
label="应用名称"
|
||
rules={[{ required: true, message: '请输入应用名称' }]}
|
||
>
|
||
<Input placeholder="例如：AI助手" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="type"
|
||
label="应用类型"
|
||
rules={[{ required: true, message: '请选择应用类型' }]}
|
||
>
|
||
<Select>
|
||
<Select.Option value="feishu">飞书自建应用</Select.Option>
|
||
<Select.Option value="other">其他应用</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="appId"
|
||
label="App ID"
|
||
rules={[{ required: true, message: '请输入 App ID' }]}
|
||
>
|
||
<Input
|
||
placeholder="cli_xxxxxxxxxxxxx"
|
||
prefix={<span style={{ color: '#999' }}>App ID:</span>}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="appSecret"
|
||
label="App Secret"
|
||
rules={[{ required: true, message: '请输入 App Secret' }]}
|
||
>
|
||
<Input.Password
|
||
placeholder="xxxxxxxxxxxxx"
|
||
prefix={<span style={{ color: '#999' }}>Secret:</span>}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="description"
|
||
label="应用描述"
|
||
>
|
||
<TextArea
|
||
placeholder="描述应用的用途和功能"
|
||
rows={3}
|
||
showCount
|
||
maxLength={200}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 新建会话弹窗 */}
|
||
<Modal
|
||
title={
|
||
<Space>
|
||
<MessageOutlined style={{ color: '#1890ff' }} />
|
||
新建会话
|
||
</Space>
|
||
}
|
||
open={showConversationModal}
|
||
onOk={handleSubmitConversation}
|
||
onCancel={() => {
|
||
setShowConversationModal(false);
|
||
conversationForm.resetFields();
|
||
}}
|
||
okText="创建"
|
||
cancelText="取消"
|
||
>
|
||
<Form
|
||
form={conversationForm}
|
||
layout="vertical"
|
||
style={{ marginTop: '24px' }}
|
||
>
|
||
<Form.Item
|
||
name="title"
|
||
label="会话标题"
|
||
rules={[{ required: true, message: '请输入会话标题' }]}
|
||
>
|
||
<Input placeholder="例如：工作安排助手" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="botId"
|
||
label="选择飞书应用"
|
||
rules={[{ required: true, message: '请选择飞书应用' }]}
|
||
>
|
||
<Select placeholder="选择要使用的飞书应用">
|
||
{botConfigs.map(bot => (
|
||
<Select.Option key={bot.id} value={bot.id}>
|
||
<Space>
|
||
<RobotOutlined />
|
||
{bot.name}
|
||
<Tag color={bot.type === 'feishu' ? 'blue' : 'green'}>
|
||
{bot.type === 'feishu' ? '飞书' : '其他'}
|
||
</Tag>
|
||
</Space>
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ConversationsPage; |