omniai-web/src/features/workbench/ConversationSidebar.tsx

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 relativeMatch = dateStr.trim().match(/^(\d+)\s*(s|sec|secs|second|seconds|m|min|mins|minute|minutes|h|hr|hrs|hour|hours|d|day|days|w|week|weeks|mo|month|months|y|yr|year|years)\s+ago$/i);
  if (relativeMatch) {
    const value = Number(relativeMatch[1]);
    const unit = relativeMatch[2].toLowerCase();
    if (unit.startsWith("s")) return "刚刚";
    if (unit === "m" || unit.startsWith("min")) return `${value} 分钟前`;
    if (unit === "h" || unit.startsWith("hr") || unit.startsWith("hour")) return `${value} 小时前`;
    if (unit === "d" || unit.startsWith("day")) return `${value} 天前`;
    if (unit === "w" || unit.startsWith("week")) return `${value} 周前`;
    if (unit === "mo" || unit.startsWith("month")) return `${value} 个月前`;
    if (unit === "y" || unit.startsWith("yr") || unit.startsWith("year")) return `${value} 年前`;
  }

  const now = Date.now();
  const then = new Date(dateStr).getTime();
  if (!Number.isFinite(then)) return dateStr;
  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>
  );
}