cx-chat 0.0.2 → 0.0.4

package/src/components/layout/components/Sidebar.tsx

@@ -1,717 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import clsx from 'clsx';
-import { Check, ChevronRight, Edit2, Loader2, Menu, MessageSquare, MoreVertical, Pin, PinOff, Plus, Search, Trash2, X } from 'lucide-react';
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-
-import { getChatSessionsAPI } from '@/api/chat';
-import ConfirmDialog from '@/components/common/modal/confirm-dialog';
-import { useChatContext } from '@/contexts/ChatContext';
-import {
-    mergeStreamingPlaceholderThread,
-    normalizeSessionsToThreads,
-    parseChatSessionIdFromPathname,
-    resolveThreadDisplayTitle,
-} from '@/utils/chatUtils';
-import { getListPathFromSubRoutePathname } from '@/utils/menuRouteRegistry';
-import {
-    useDeletingChatSessionId,
-    useThreadActions,
-} from '../../../hooks/useThreadActions';
-import type { Thread } from '../../../types';
-import type { MenuTreeItem } from '../../../types/menu';
-import { getMenuDisplayName } from '../../../utils/menuI18n';
-import { filterMenuTree, getIconComponent } from '../../../utils/routeConfig';
-
-/**
- * 渲染管理菜单项(动态)
- */
-const renderAdminMenuItem = (
-  menu: MenuTreeItem,
-  location: any,
-  isCollapsed: boolean,
-  t: (key: string) => string,
-) => {
-  const Icon = getIconComponent(menu.icon);
-
-  // 如果component是Main，说明是父级菜单，不加载组件，没有实际跳转地址
-  const isParentMenu = menu.component === 'Main';
-  
-  // 判断菜单是否激活：支持详情/提交页保持菜单激活状态
-  const currentPath = location.pathname;
-  const listPath = getListPathFromSubRoutePathname(currentPath);
-  
-  let isActive = false;
-  if (menu.path && menu.path !== '/') {
-    // 提取菜单的基础路径（去掉 /index）
-    const menuBasePath = menu.path.replace(/\/index$/, '');
-    
-    if (listPath) {
-      // 当前在详情/提交页，比较基础路径
-      const listBasePath = listPath.replace(/\/index$/, '');
-      isActive = menuBasePath === listBasePath;
-    } else {
-      // 普通页面，提取基础路径（去掉 /index、/detail/*、/submit/*）
-      const currentBasePath = currentPath.replace(/\/(index|detail|submit)(\/.*)?$/, '');
-      isActive = menuBasePath === currentBasePath;
-    }
-  }
-
-  // 如果有子菜单，渲染为可展开的菜单组
-  if (menu.children && menu.children.length > 0) {
-    return (
-      <div key={menu.id}>
-        <div
-          className={clsx(
-            'flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-            'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
-            isCollapsed ? 'justify-center cursor-pointer' : 'cursor-default',
-          )}
-          title={isCollapsed ? getMenuDisplayName(menu, t) : undefined}
-        >
-          <div className="flex items-center gap-3">
-            {Icon && <Icon size={20} />}
-            <span className={clsx(isCollapsed ? 'hidden' : 'block')}>{getMenuDisplayName(menu, t)}</span>
-          </div>
-        </div>
-
-        {!isCollapsed && (
-          <div className="mt-1 ml-6 space-y-1">
-            {menu.children.map((child) => {
-              // 子菜单激活判断：支持详情/提交页
-              let isChildActive = false;
-              if (child.path) {
-                // 提取子菜单的基础路径
-                const childBasePath = child.path.replace(/\/index$/, '');
-                
-                if (listPath) {
-                  // 在详情/提交页，比较基础路径
-                  const listBasePath = listPath.replace(/\/index$/, '');
-                  isChildActive = childBasePath === listBasePath;
-                } else {
-                  // 普通页面，提取基础路径（去掉 /index、/detail/*、/submit/*）
-                  const currentBasePath = currentPath.replace(/\/(index|detail|submit)(\/.*)?$/, '');
-                  isChildActive = childBasePath === currentBasePath;
-                }
-              }
-              
-              return (
-                <Link
-                  key={child.id}
-                  to={child.path || '#'}
-                  className={clsx(
-                    'flex items-center gap-3 px-3 py-1.5 rounded text-sm transition-colors',
-                    isChildActive
-                      ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
-                      : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300',
-                  )}
-                >
-                  {getIconComponent(child.icon) && React.createElement(getIconComponent(child.icon)!, { size: 16 })}
-                  <span>{getMenuDisplayName(child, t)}</span>
-                </Link>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // 没有子菜单，渲染为普通链接
-  if (!menu.path || isParentMenu) return null;
-
-  return (
-    <Link
-      key={menu.id}
-      to={menu.path}
-      className={clsx(
-        'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-        isActive
-          ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'
-          : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
-        isCollapsed && 'justify-center',
-      )}
-      title={isCollapsed ? getMenuDisplayName(menu, t) : undefined}
-    >
-      {Icon && <Icon size={20} />}
-      <span className={clsx(isCollapsed ? 'hidden' : 'block')}>{getMenuDisplayName(menu, t)}</span>
-    </Link>
-  );
-};
-
-type SidebarProps = {
-  user: any;
-  hasPermission: (permission: string) => boolean;
-  menus: MenuTreeItem[];
-  isLoadingMenus: boolean;
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  isAdminMenuOpen: boolean;
-  setIsAdminMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const Sidebar: React.FC<SidebarProps> = ({
-  user,
-  hasPermission,
-  menus,
-  isLoadingMenus,
-  isCollapsed,
-  setIsCollapsed,
-  isAdminMenuOpen,
-  setIsAdminMenuOpen,
-}) => {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { activeThreadId, isStreaming, streamingPlaceholderThread } =
-    useChatContext();
-
-  const canChatSessions = hasPermission('system:chat:sessions');
-  const canChatSend = hasPermission('system:chat:send');
-  const canSessionRename = hasPermission('system:chat:session-update-title');
-  const canSessionDelete = hasPermission('system:chat:session-delete');
-  const canSessionTop =
-    hasPermission('system:chat:session-top') ||
-    hasPermission('system:chat:session-cancel-top');
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isSearchVisible, setIsSearchVisible] = useState(false);
-  const [extraThreads, setExtraThreads] = useState<Thread[]>([]);
-  const [sessionsHasMore, setSessionsHasMore] = useState(true);
-  const [sessionsLoadingMore, setSessionsLoadingMore] = useState(false);
-  const navScrollRef = useRef<HTMLElement | null>(null);
-  /** 会话列表向下加载更多：保持当前滚动位置，避免列表更新后跳到顶部 */
-  const sessionsScrollSnapshotRef = useRef<{
-    scrollTop: number;
-  } | null>(null);
-
-  // Context Menu State (chat threads)
-  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const [editThreadId, setEditThreadId] = useState<string | null>(null);
-  const [renameTitle, setRenameTitle] = useState('');
-  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
-
-  /** 管理菜单根节点（含按钮与浮层）；用于捕获阶段判断「点在外面」 */
-  const adminMenuRootRef = useRef<HTMLDivElement | null>(null);
-
-  // 会话行「更多」菜单：依赖 window click（会话行内无 stopPropagation 拦到 window）
-  useEffect(() => {
-    if (!activeMenuId) return;
-    const handleClickOutside = () => setActiveMenuId(null);
-    window.addEventListener('click', handleClickOutside);
-    return () => window.removeEventListener('click', handleClickOutside);
-  }, [activeMenuId]);
-
-  // 管理菜单：Header 等区域对 click 使用了 stopPropagation，冒泡到 window 收不到；用 document mousedown 捕获 + contains
-  useEffect(() => {
-    if (!isAdminMenuOpen) return;
-    const onDocPointerDown = (e: MouseEvent) => {
-      const root = adminMenuRootRef.current;
-      if (root && !root.contains(e.target as Node)) {
-        setIsAdminMenuOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', onDocPointerDown, true);
-    return () => document.removeEventListener('mousedown', onDocPointerDown, true);
-  }, [isAdminMenuOpen, setIsAdminMenuOpen]);
-
-  // 管理弹层只展示第一个根菜单下的子菜单（如「菜单」下的 Web 菜单），
-  // 不再把所有根节点一起展开，避免出现额外的一层「菜单」包裹。
-  const filteredDynamicMenus = useMemo(() => {
-    if (!menus || menus.length === 0) return [];
-    const roots = menus[0]?.children || [];
-    return filterMenuTree(roots, hasPermission);
-  }, [menus, hasPermission]);
-
-  const { data: threadsFirstPage = [], isLoading: isLoadingThreads } = useQuery({
-    queryKey: ['threads'],
-    queryFn: async () => {
-      const raw = await getChatSessionsAPI();
-      const list = normalizeSessionsToThreads(raw);
-      setExtraThreads([]);
-      setSessionsHasMore(list.length > 0);
-      return list;
-    },
-    enabled: !!user && canChatSessions,
-  });
-
-  const threadsRemote = useMemo(
-    () => [...threadsFirstPage, ...extraThreads],
-    [threadsFirstPage, extraThreads],
-  );
-
-  const loadMoreSessions = async () => {
-    if (sessionsLoadingMore || !sessionsHasMore || !canChatSessions) return;
-    const all = [...threadsFirstPage, ...extraThreads];
-    const last = all[all.length - 1];
-    const createTime = last?.created_at?.trim();
-    if (!createTime) {
-      setSessionsHasMore(false);
-      return;
-    }
-    const navEl = navScrollRef.current;
-    if (navEl) {
-      sessionsScrollSnapshotRef.current = { scrollTop: navEl.scrollTop };
-    }
-    setSessionsLoadingMore(true);
-    try {
-      const raw = await getChatSessionsAPI({ createTime });
-      const batch = normalizeSessionsToThreads(raw);
-      if (batch.length === 0) {
-        setSessionsHasMore(false);
-      } else {
-        setExtraThreads((prev) => {
-          const ids = new Set([...threadsFirstPage, ...prev].map((t) => t.id));
-          return [...prev, ...batch.filter((t) => !ids.has(t.id))];
-        });
-      }
-    } catch (e) {
-      console.error('[Sidebar] load more sessions failed', e);
-    } finally {
-      setSessionsLoadingMore(false);
-    }
-  };
-
-  const handleNavScroll = () => {
-    const el = navScrollRef.current;
-    if (!el || sessionsLoadingMore || !sessionsHasMore || isLoadingThreads) return;
-    const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
-    if (gap < 80) {
-      void loadMoreSessions();
-    }
-  };
-
-  /** 流式进行中：接口会话列表若尚未含新会话，合并乐观占位行，避免左侧被空数据顶掉 */
-  const threads = useMemo(
-    () =>
-      mergeStreamingPlaceholderThread(threadsRemote, {
-        placeholder: streamingPlaceholderThread,
-        activeThreadId,
-        isStreaming,
-      }),
-    [threadsRemote, streamingPlaceholderThread, activeThreadId, isStreaming],
-  );
-
-  const filteredThreads = useMemo(() => {
-    if (!searchQuery.trim()) return threads;
-    return threads.filter((thread) =>
-      (thread.title || '').toLowerCase().includes(searchQuery.toLowerCase()),
-    );
-  }, [threads, searchQuery]);
-
-  const pathChatSessionId = useMemo(
-    () => parseChatSessionIdFromPathname(location.pathname),
-    [location.pathname],
-  );
-
-  /** 仅切换会话时滚到可见；列表加载更多时不要因 filteredThreads 变化而 scrollIntoView */
-  useEffect(() => {
-    if (!pathChatSessionId || isLoadingThreads) return;
-    const el = document.querySelector(
-      `[data-chat-thread-id="${CSS.escape(pathChatSessionId)}"]`,
-    );
-    if (el instanceof HTMLElement) {
-      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }
-  }, [pathChatSessionId, isLoadingThreads]);
-
-  useLayoutEffect(() => {
-    const navEl = navScrollRef.current;
-    const snap = sessionsScrollSnapshotRef.current;
-    if (!navEl || !snap || sessionsLoadingMore) return;
-    navEl.scrollTop = snap.scrollTop;
-    sessionsScrollSnapshotRef.current = null;
-  }, [sessionsLoadingMore, extraThreads]);
-
-  const deletingSessionId = useDeletingChatSessionId();
-
-  const { renameThread, togglePinThread, deleteThread } = useThreadActions({
-    onDeleteSuccess: (threadId) => {
-      const m = location.pathname.match(/^\/chat\/([^/]+)\/?$/);
-      const currentSessionId = m?.[1] ? decodeURIComponent(m[1]) : null;
-      if (currentSessionId && currentSessionId === threadId) {
-        navigate('/chat');
-      }
-    },
-    onUpdateSuccess: () => {
-      setEditThreadId(null);
-    },
-  });
-
-  const handleDeleteThread = (e: React.MouseEvent, threadId: string) => {
-    e.stopPropagation();
-    setActiveMenuId(null);
-    setDeleteConfirmId(threadId);
-  };
-
-  const handleStartRename = (e: React.MouseEvent, thread: Thread) => {
-    e.stopPropagation();
-    setActiveMenuId(null);
-    setEditThreadId(thread.id);
-    setRenameTitle(thread.title);
-  };
-
-  const handlePin = (e: React.MouseEvent, thread: Thread) => {
-    e.stopPropagation();
-    setActiveMenuId(null);
-    togglePinThread(thread.id, thread.top_status === 1);
-  };
-
-  const handleMenuClick = (e: React.MouseEvent, id: string) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    setActiveMenuId(activeMenuId === id ? null : id);
-  };
-
-  const handleSaveRename = (threadId: string) => {
-    if (renameTitle.trim()) {
-      renameThread(threadId, renameTitle);
-    } else {
-      setEditThreadId(null);
-    }
-  };
-
-  const handleNewChat = () => {
-    navigate('/chat');
-  };
-
-  const handleSelectThread = (threadId: string) => {
-    navigate(`/chat/${encodeURIComponent(threadId)}`);
-  };
-
-  const onConfirmDelete = () => {
-    if (deleteConfirmId) {
-      deleteThread(deleteConfirmId);
-      setDeleteConfirmId(null);
-    }
-  };
-
-  return (
-    <>
-      <ConfirmDialog
-        isOpen={!!deleteConfirmId}
-        onClose={() => setDeleteConfirmId(null)}
-        onConfirm={onConfirmDelete}
-        title={t('chat.delete_title')}
-        message={t('chat.delete_confirm')}
-        confirmText={t('common.delete')}
-        danger
-      />
-
-      <aside
-        className={clsx(
-          'bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col transition-all duration-300 ease-in-out relative z-30',
-          isCollapsed ? 'w-16' : 'w-64',
-        )}
-      >
-        <div className={clsx('p-3 flex items-center', isCollapsed ? 'justify-center' : 'justify-between')}>
-          <button
-            onClick={() => {
-              if (isCollapsed) {
-                setIsCollapsed(false);
-              } else {
-                setIsCollapsed(true);
-                setIsSearchVisible(false);
-              }
-            }}
-            className="p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-            title={isCollapsed ? t('common.expand') : t('common.collapse')}
-          >
-            <Menu size={20} />
-          </button>
-
-          {!isCollapsed && (
-            <button
-              onClick={() => {
-                setIsSearchVisible(!isSearchVisible);
-                if (isSearchVisible) {
-                  setSearchQuery('');
-                }
-              }}
-              className={clsx(
-                'p-2 rounded-lg transition-colors',
-                isSearchVisible
-                  ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
-                  : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700',
-              )}
-              title={t('common.search_chats')}
-              type="button"
-            >
-              {isSearchVisible ? <X size={20} /> : <Search size={20} />}
-            </button>
-          )}
-        </div>
-
-        {!isCollapsed && isSearchVisible && (
-          <div className="px-3 pb-2 relative">
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder={t('common.search_placeholder')}
-              className="w-full pl-3 pr-8 py-1.5 text-sm bg-gray-100 dark:bg-gray-700/50 border-none rounded-md focus:ring-1 focus:ring-blue-500 text-gray-900 dark:text-gray-100 placeholder-gray-500"
-              autoFocus
-            />
-            {searchQuery && (
-              <button
-                onClick={() => setSearchQuery('')}
-                className="absolute right-4 top-1.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
-              >
-                <X size={14} />
-              </button>
-            )}
-          </div>
-        )}
-
-        {canChatSend && (
-          <div className="px-3 pb-2">
-            <button
-              onClick={handleNewChat}
-              className={clsx(
-                'w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 border',
-                'bg-transparent border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400',
-                'hover:border-blue-300 dark:hover:border-blue-700 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/10',
-                isCollapsed ? 'px-0 aspect-square' : '',
-              )}
-              title={t('chat.new_chat')}
-            >
-              <Plus size={isCollapsed ? 20 : 18} />
-              {!isCollapsed && <span className="font-medium text-sm">{t('chat.new_chat')}</span>}
-            </button>
-          </div>
-        )}
-
-        <nav
-          ref={navScrollRef}
-          onScroll={handleNavScroll}
-          className="flex-1 px-3 space-y-1 overflow-y-auto overflow-x-hidden"
-        >
-          {/* Chat section */}
-          <div>
-            <div
-              className={clsx(
-                'flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-                'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
-                isCollapsed ? 'justify-center cursor-pointer' : 'cursor-default',
-              )}
-              onClick={() => {
-                if (isCollapsed) {
-                  setIsCollapsed(false);
-                }
-              }}
-              title={isCollapsed ? t('common.chat') : undefined}
-            >
-              <div className="flex items-center gap-3">
-                <MessageSquare size={20} />
-                <span className={clsx(isCollapsed ? 'hidden' : 'block')}>{t('common.chat')}</span>
-              </div>
-            </div>
-
-            {!isCollapsed && canChatSessions && (
-              <div className="mt-1 ml-6 space-y-1">
-                {isLoadingThreads ? (
-                  <div className="flex justify-center py-2">
-                    <Loader2 size={16} className="animate-spin text-gray-400" />
-                  </div>
-                ) : (
-                  filteredThreads.map((thread) => {
-                    const isOnChatWelcome =
-                      location.pathname === '/chat' ||
-                      location.pathname === '/chat/';
-                    const isActive =
-                      thread.id === pathChatSessionId ||
-                      (isOnChatWelcome &&
-                        isStreaming &&
-                        activeThreadId != null &&
-                        activeThreadId === thread.id);
-                    const isEditing = editThreadId === thread.id;
-                    return (
-                      <div
-                        key={thread.id}
-                        data-chat-thread-id={thread.id}
-                        onClick={() => !isEditing && handleSelectThread(thread.id)}
-                        className={clsx(
-                          'group relative flex items-center justify-between px-3 py-1.5 rounded text-sm cursor-pointer transition-colors',
-                          isActive
-                            ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
-                            : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400',
-                        )}
-                      >
-                        {isEditing ? (
-                          <div className="flex items-center gap-1 w-full" onClick={(e) => e.stopPropagation()}>
-                            <input
-                              type="text"
-                              value={renameTitle}
-                              onChange={(e) => setRenameTitle(e.target.value)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter') handleSaveRename(thread.id);
-                                if (e.key === 'Escape') setEditThreadId(null);
-                              }}
-                              className="flex-1 bg-white dark:bg-gray-900 border border-blue-300 dark:border-blue-700 rounded px-1 py-0.5 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"
-                              autoFocus
-                            />
-                            <button onClick={() => handleSaveRename(thread.id)} className="p-0.5 text-green-600 hover:bg-green-100 rounded">
-                              <Check size={12} />
-                            </button>
-                            <button onClick={() => setEditThreadId(null)} className="p-0.5 text-gray-500 hover:bg-gray-200 rounded">
-                              <X size={12} />
-                            </button>
-                          </div>
-                        ) : (
-                          <>
-                            <div className="flex items-center gap-2 overflow-hidden flex-1">
-                              {thread.top_status === 1 && (
-                                <Pin
-                                  size={10}
-                                  className="shrink-0 fill-current text-blue-500 rotate-45"
-                                />
-                              )}
-                              <span
-                                className={clsx(
-                                  'truncate flex-1',
-                                  thread.top_status === 1 &&
-                                    'font-medium text-blue-600 dark:text-blue-400',
-                                )}
-                              >
-                                {resolveThreadDisplayTitle(
-                                  thread.title,
-                                  t('chat.untitled_session'),
-                                )}
-                              </span>
-                            </div>
-
-                            <div className="relative shrink-0 ml-1">
-                              <button
-                                onClick={(e) => handleMenuClick(e, thread.id)}
-                                className={clsx(
-                                  'p-0.5 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-opacity',
-                                  activeMenuId === thread.id || 'group-hover:opacity-100 opacity-0',
-                                )}
-                              >
-                                <MoreVertical size={14} />
-                              </button>
-
-                              {activeMenuId === thread.id && (
-                                <div
-                                  className="absolute right-0 top-6 z-50 w-32 bg-white dark:bg-gray-900 shadow-xl rounded-lg border border-gray-100 dark:border-gray-700 py-1 overflow-hidden"
-                                  onClick={(e) => e.stopPropagation()}
-                                >
-                                  {canSessionTop && (
-                                    <button
-                                      onClick={(e) => handlePin(e, thread)}
-                                      className="w-full text-left px-3 py-2 text-xs flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
-                                    >
-                                      {thread.top_status === 1 ? (
-                                        <PinOff size={12} />
-                                      ) : (
-                                        <Pin size={12} />
-                                      )}
-                                      <span>
-                                        {thread.top_status === 1
-                                          ? t('common.unpin')
-                                          : t('common.pin')}
-                                      </span>
-                                    </button>
-                                  )}
-                                  {canSessionRename && (
-                                    <button
-                                      onClick={(e) => handleStartRename(e, thread)}
-                                      className="w-full text-left px-3 py-2 text-xs flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
-                                    >
-                                      <Edit2 size={12} />
-                                      <span>{t('common.rename')}</span>
-                                    </button>
-                                  )}
-                                  {canSessionDelete && (
-                                    <>
-                                      <div className="h-px bg-gray-100 dark:bg-gray-800 my-1" />
-                                      <button
-                                        onClick={(e) => handleDeleteThread(e, thread.id)}
-                                        className="w-full text-left px-3 py-2 text-xs flex items-center gap-2 hover:bg-red-50 dark:hover:bg-red-900/10 text-red-600 dark:text-red-400"
-                                      >
-                                        <Trash2 size={12} />
-                                        <span>{t('common.delete')}</span>
-                                      </button>
-                                    </>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </>
-                        )}
-                        {deletingSessionId === thread.id && (
-                          <div
-                            className="absolute inset-0 z-[60] flex items-center justify-center rounded bg-white/80 backdrop-blur-[1px] dark:bg-gray-900/75"
-                            aria-busy="true"
-                            aria-label={t('common.loading')}
-                          >
-                            <Loader2
-                              size={18}
-                              className="animate-spin text-blue-500"
-                            />
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })
-                )}
-                {!isLoadingThreads && filteredThreads.length === 0 && searchQuery && (
-                  <div className="px-3 py-2 text-xs text-gray-400 text-center italic">
-                    {t('common.no_matches')}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </nav>
-
-        {/* 动态管理菜单 - 与会话列表拉开间距，减少误触 */}
-        {isLoadingMenus ? (
-          <div className="mt-4 shrink-0 px-3 py-4 flex justify-center">
-            <Loader2 size={20} className="animate-spin text-gray-400" />
-          </div>
-        ) : filteredDynamicMenus.length > 0 ? (
-          <div ref={adminMenuRootRef} className="relative mt-4 shrink-0">
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsAdminMenuOpen(!isAdminMenuOpen);
-              }}
-              className={clsx(
-                'flex items-center justify-between w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-                isAdminMenuOpen
-                  ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700',
-                isCollapsed && 'justify-center',
-              )}
-              title={isCollapsed ? t('common.admin') : undefined}
-            >
-              <div className="flex items-center gap-3">
-                {getIconComponent('Shield') && React.createElement(getIconComponent('Shield')!, { size: 20 })}
-                <span className={clsx(isCollapsed ? 'hidden' : 'block')}>{t('common.admin')}</span>
-              </div>
-              {/* className={clsx('transition-transform', isAdminMenuOpen && 'rotate-90')}*/}
-              {!isCollapsed && <ChevronRight size={16}  />}
-            </button>
-
-            {isAdminMenuOpen && !isCollapsed && (
-              <div className="absolute left-full bottom-0 ml-2 w-56 bg-white dark:bg-gray-800 shadow-2xl rounded-xl border border-gray-100 dark:border-gray-700 overflow-hidden z-50">
-                <div className="p-2">
-                  {filteredDynamicMenus.map((menu) => (
-                    <div key={menu.id} className="space-y-1">
-                      {renderAdminMenuItem(menu, location, false, t)}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        ) : null}
-      </aside>
-    </>
-  );
-};
-
-export default Sidebar;
-