Files
Alfred/src/web/features/chat/components/ConversationCard.tsx

46 lines
1.4 KiB
TypeScript

import { DeleteOutlined } from "@ant-design/icons";
import { Button, Flex, Popconfirm, Typography } from "antd";
import type { Conversation } from "../../../../shared/api";
interface ConversationCardProps {
conversation: Conversation;
onDelete: () => void;
onSelect: () => void;
selected: boolean;
}
export function ConversationCard({ conversation, onDelete, onSelect, selected }: ConversationCardProps) {
const className = selected ? "app-sidebar-list-item app-sidebar-list-item--selected" : "app-sidebar-list-item";
return (
<Flex align="center" className={className} gap="small" justify="space-between" onClick={onSelect}>
<Typography.Text ellipsis style={{ flex: 1, minWidth: 0 }}>
{conversation.title}
</Typography.Text>
<span className="app-sidebar-item-actions">
<Popconfirm
description="删除后不可恢复"
okButtonProps={{ danger: true }}
okText="删除"
onCancel={(e) => e?.stopPropagation()}
onConfirm={(e) => {
e?.stopPropagation();
onDelete();
}}
title="确认删除该对话?"
>
<Button
aria-label="删除"
danger
icon={<DeleteOutlined />}
onClick={(e) => e.stopPropagation()}
size="small"
type="text"
/>
</Popconfirm>
</span>
</Flex>
);
}