cx-chat 0.0.1

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

@@ -0,0 +1,717 @@
+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;
+