109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import { Button, Collapse, Form, Input, List, Popconfirm, Tag } from 'antd';
|
|
import { DatabaseOutlined, ToolOutlined } from '@ant-design/icons';
|
|
import { Agent } from '../../../../api';
|
|
import { STATUS_TAG } from '../../constants';
|
|
|
|
interface KnowledgeSettingsPanelProps {
|
|
agent: Agent | null;
|
|
beforeUploadKnowledge: (file: any) => Promise<boolean>;
|
|
onDeleteKnowledge: (fileId: string) => Promise<void>;
|
|
}
|
|
|
|
export default function KnowledgeSettingsPanel({
|
|
agent,
|
|
beforeUploadKnowledge,
|
|
onDeleteKnowledge,
|
|
}: KnowledgeSettingsPanelProps) {
|
|
return (
|
|
<Collapse
|
|
ghost
|
|
expandIconPosition="end"
|
|
className="monica-collapse"
|
|
items={[
|
|
{
|
|
key: 'knowledge',
|
|
label: (
|
|
<div className="agent-editor-collapse-label">
|
|
<DatabaseOutlined className="agent-editor-label-icon" />
|
|
知识库 ({agent?.knowledge?.length ?? 0})
|
|
</div>
|
|
),
|
|
children: (
|
|
<div className="px-1">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<span className="text-xs text-gray-500">上传文档以增强 AI 知识</span>
|
|
<Input
|
|
type="file"
|
|
multiple
|
|
className="agent-editor-file-input"
|
|
id="knowledge-upload"
|
|
onChange={async (e) => {
|
|
const files = e.target.files;
|
|
if (!files) return;
|
|
for (let i = 0; i < files.length; i++) {
|
|
await beforeUploadKnowledge(files[i]);
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
type="primary"
|
|
size="small"
|
|
ghost
|
|
icon={<DatabaseOutlined />}
|
|
className="agent-editor-small-action"
|
|
onClick={() => document.getElementById('knowledge-upload')?.click()}
|
|
>
|
|
添加
|
|
</Button>
|
|
</div>
|
|
<List
|
|
size="small"
|
|
dataSource={agent?.knowledge ?? []}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
className="bg-white mb-2 rounded-lg border border-gray-100 p-2"
|
|
actions={[
|
|
<Popconfirm key="del" title="确认删除？" onConfirm={() => onDeleteKnowledge(item.id)}>
|
|
<Button type="text" danger size="small" className="agent-editor-danger-action">
|
|
删除
|
|
</Button>
|
|
</Popconfirm>,
|
|
]}
|
|
>
|
|
<div className="flex flex-col gap-1 overflow-hidden">
|
|
<span className="text-sm font-medium truncate">{item.originalName}</span>
|
|
<span className="text-[10px] text-gray-400">
|
|
{item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''} ·{' '}
|
|
{item.status === 'indexing' ? (
|
|
<Tag color="processing" className="m-0 text-[10px] px-1">
|
|
<span className="agent-editor-indexing-label">索引中…</span>
|
|
</Tag>
|
|
) : (
|
|
<Tag color={STATUS_TAG[(item.status || 'ready')].color} className="m-0 text-[10px] px-1">
|
|
{STATUS_TAG[(item.status || 'ready')].text}
|
|
</Tag>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'skills',
|
|
collapsible: 'disabled',
|
|
label: (
|
|
<div className="agent-editor-disabled-label" title="技能功能开发中">
|
|
<ToolOutlined />
|
|
技能 & 工具 (开发中)
|
|
</div>
|
|
),
|
|
children: null,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|