138 lines
4.4 KiB
TypeScript
138 lines
4.4 KiB
TypeScript
import {
|
|
DeleteOutlined,
|
|
EditOutlined,
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
MessageOutlined,
|
|
PlusOutlined,
|
|
} from "@ant-design/icons";
|
|
import { useCallback, useState } from "react";
|
|
import type { ConversationSummary } from "../../api/conversationClient";
|
|
|
|
interface ConversationSidebarProps {
|
|
conversations: ConversationSummary[];
|
|
activeId: number | null;
|
|
collapsed: boolean;
|
|
onToggle: () => void;
|
|
onSelect: (id: number) => void;
|
|
onNew: () => void;
|
|
onDelete: (id: number) => void;
|
|
onRename: (id: number, title: string) => void;
|
|
}
|
|
|
|
function formatRelativeTime(dateStr: string): string {
|
|
const now = Date.now();
|
|
const then = new Date(dateStr).getTime();
|
|
const diff = now - then;
|
|
if (diff < 60_000) return "刚刚";
|
|
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`;
|
|
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`;
|
|
if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)} 天前`;
|
|
return new Date(dateStr).toLocaleDateString("zh-CN");
|
|
}
|
|
|
|
export default function ConversationSidebar({
|
|
conversations,
|
|
activeId,
|
|
collapsed,
|
|
onToggle,
|
|
onSelect,
|
|
onNew,
|
|
onDelete,
|
|
onRename,
|
|
}: ConversationSidebarProps) {
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|
const [editValue, setEditValue] = useState("");
|
|
|
|
const startRename = useCallback((id: number, currentTitle: string) => {
|
|
setEditingId(id);
|
|
setEditValue(currentTitle);
|
|
}, []);
|
|
|
|
const commitRename = useCallback(() => {
|
|
if (editingId !== null && editValue.trim()) {
|
|
onRename(editingId, editValue.trim());
|
|
}
|
|
setEditingId(null);
|
|
}, [editingId, editValue, onRename]);
|
|
|
|
return (
|
|
<aside className={`conversation-sidebar${collapsed ? " is-collapsed" : ""}`}>
|
|
<div className="conversation-sidebar__header">
|
|
<button
|
|
type="button"
|
|
className="conversation-sidebar__toggle"
|
|
onClick={onToggle}
|
|
aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
|
|
>
|
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
</button>
|
|
{!collapsed && (
|
|
<button type="button" className="conversation-sidebar__new" onClick={onNew}>
|
|
<PlusOutlined /> 新对话
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{!collapsed && (
|
|
<div className="conversation-sidebar__list">
|
|
{conversations.length === 0 ? (
|
|
<div className="conversation-sidebar__empty">
|
|
<MessageOutlined />
|
|
<span>暂无对话记录</span>
|
|
</div>
|
|
) : (
|
|
conversations.map((conv) => (
|
|
<div
|
|
key={conv.id}
|
|
className={`conversation-sidebar__item${conv.id === activeId ? " is-active" : ""}`}
|
|
>
|
|
{editingId === conv.id ? (
|
|
<input
|
|
className="conversation-sidebar__rename-input"
|
|
value={editValue}
|
|
onChange={(e) => setEditValue(e.target.value)}
|
|
onBlur={commitRename}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") commitRename();
|
|
if (e.key === "Escape") setEditingId(null);
|
|
}}
|
|
autoFocus
|
|
/>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="conversation-sidebar__item-main"
|
|
onClick={() => onSelect(conv.id)}
|
|
>
|
|
<span className="conversation-sidebar__item-title">{conv.title}</span>
|
|
<span className="conversation-sidebar__item-time">
|
|
{formatRelativeTime(conv.updatedAt)}
|
|
</span>
|
|
</button>
|
|
)}
|
|
<div className="conversation-sidebar__item-actions">
|
|
<button
|
|
type="button"
|
|
aria-label="重命名"
|
|
onClick={() => startRename(conv.id, conv.title)}
|
|
>
|
|
<EditOutlined />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="删除"
|
|
onClick={() => onDelete(conv.id)}
|
|
>
|
|
<DeleteOutlined />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|