73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
import { DeleteOutlined, EditOutlined, MessageOutlined } from '@ant-design/icons';
|
|
import { Button, Popconfirm, Space, Tag } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import { Link } from 'react-router-dom';
|
|
import type { Agent } from '../../../api';
|
|
import type { AgentListLogicOutput } from '../AgentListLogic';
|
|
|
|
interface Props {
|
|
agent: Agent;
|
|
logic: AgentListLogicOutput;
|
|
notifyDeleted: () => void;
|
|
}
|
|
|
|
export default function AgentListWebCard({ agent, logic, notifyDeleted }: Props) {
|
|
const { handleDelete, isImageUrl, getModelLabel } = logic;
|
|
const modelLabel = getModelLabel(agent.model);
|
|
|
|
return (
|
|
<div className="agent-card agent-list-web-card">
|
|
<div className="agent-list-web-card-head">
|
|
<div className="avatar agent-list-web-avatar" style={{ background: agent.avatar || 'var(--gradient-brand)' }}>
|
|
{isImageUrl(agent.avatar) ? <img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" /> : (agent.name?.charAt(0) || '?').toUpperCase()}
|
|
</div>
|
|
<div className="agent-list-web-card-title-block">
|
|
<div className="agent-list-web-card-title">{agent.name}</div>
|
|
<div className="agent-list-web-card-meta">最近更新于 {dayjs(agent.updated_at).format('YYYY-MM-DD')}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="agent-list-web-desc-box">
|
|
<div className="desc agent-list-web-desc">{agent.description || '还没有填写描述，可以补充这个智能体适合解决什么问题。'}</div>
|
|
</div>
|
|
|
|
<Space size={6} wrap className="agent-list-web-tags">
|
|
{agent.visibility === 'public' && <Tag bordered={false} className="agent-list-web-tag-success">公开</Tag>}
|
|
{agent.visibility === 'team' && <Tag bordered={false} className="agent-list-web-tag-info">团队</Tag>}
|
|
{agent.visibility === 'private' && <Tag bordered={false} className="agent-list-web-tag-neutral">私有</Tag>}
|
|
{modelLabel && (
|
|
<Tag bordered={false} className="agent-list-web-tag-brand">
|
|
<span className="agent-list-web-model-label">{modelLabel}</span>
|
|
</Tag>
|
|
)}
|
|
{(agent.fork_count ?? 0) > 0 && <Tag bordered={false} className="agent-list-web-tag-neutral">Fork {agent.fork_count}</Tag>}
|
|
</Space>
|
|
|
|
<div className="agent-list-web-card-actions">
|
|
<Link to={`/chat/${agent.id}`} className="agent-list-web-action-link">
|
|
<Button type="primary" block icon={<MessageOutlined />} className="agent-list-web-action-btn">
|
|
聊天
|
|
</Button>
|
|
</Link>
|
|
<Link to={`/agents/${agent.id}`} className="agent-list-web-action-link">
|
|
<Button block icon={<EditOutlined />} className="agent-list-web-action-btn">
|
|
管理
|
|
</Button>
|
|
</Link>
|
|
<Popconfirm
|
|
title="确定删除该智能体？"
|
|
description="将删除其知识库与对话记录"
|
|
onConfirm={() => {
|
|
handleDelete(agent.id);
|
|
notifyDeleted();
|
|
}}
|
|
okText="删除"
|
|
cancelText="取消"
|
|
>
|
|
<Button danger icon={<DeleteOutlined />} className="agent-list-web-delete-btn" />
|
|
</Popconfirm>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|