代码修改

web-code/components/agent/SkillCreatorThreadSidebar.tsx

@@ -0,0 +1,337 @@
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+import { Archive, Loader2, MessageSquareText, Plus, RefreshCw, Trash2, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface SkillCreatorThread {
+  id: number;
+  title: string;
+  archived: boolean;
+  expert_agent_id: number | null;
+  created_at: string;
+  updated_at: string;
+}
+
+interface ThreadListResponse {
+  threads?: SkillCreatorThread[];
+  archived_threads?: SkillCreatorThread[];
+}
+
+interface SkillCreatorThreadSidebarProps {
+  authedFetch: (input: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]) => Promise<Response>;
+  currentThreadId: string;
+  isDarkMode: boolean;
+  isOpen: boolean;
+  isBusy?: boolean;
+  createThreadPayload?: Record<string, unknown>;
+  createButtonText?: string;
+  emptyText?: string;
+  subtitle?: string;
+  threadFilter?: (thread: SkillCreatorThread) => boolean;
+  onClose: () => void;
+  onThreadSelect: (threadId: string) => void;
+}
+
+const THREADS_API_URL = `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`;
+
+const sortThreads = (threads: SkillCreatorThread[]) =>
+  [...threads].sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
+
+export default function SkillCreatorThreadSidebar({
+  authedFetch,
+  currentThreadId,
+  isDarkMode,
+  isOpen,
+  isBusy = false,
+  createThreadPayload,
+  createButtonText = '新建聊天',
+  emptyText = '暂无记录',
+  subtitle = '切换或管理当前会话',
+  threadFilter,
+  onClose,
+  onThreadSelect,
+}: SkillCreatorThreadSidebarProps) {
+  const [threads, setThreads] = useState<SkillCreatorThread[]>([]);
+  const [archivedThreads, setArchivedThreads] = useState<SkillCreatorThread[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [deletingThreadId, setDeletingThreadId] = useState<number | null>(null);
+  const [error, setError] = useState('');
+
+  const applyFilter = useCallback(
+    (items: SkillCreatorThread[]) => (threadFilter ? items.filter(threadFilter) : items),
+    [threadFilter],
+  );
+
+  const refreshThreads = useCallback(async () => {
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await authedFetch(THREADS_API_URL, { method: 'GET' });
+      if (!response.ok) {
+        throw new Error(`获取会话列表失败: ${response.status}`);
+      }
+
+      const data = (await response.json()) as ThreadListResponse;
+      const nextThreads = Array.isArray(data.threads) ? data.threads : [];
+      const nextArchivedThreads = Array.isArray(data.archived_threads) ? data.archived_threads : [];
+
+      setThreads(sortThreads(applyFilter(nextThreads)));
+      setArchivedThreads(sortThreads(applyFilter(nextArchivedThreads)));
+    } catch (fetchError) {
+      console.error('获取会话列表失败', fetchError);
+      setError('会话列表加载失败，请稍后重试');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [applyFilter, authedFetch]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    void refreshThreads();
+  }, [isOpen, refreshThreads]);
+
+  const allThreads = useMemo(() => [...threads, ...archivedThreads], [archivedThreads, threads]);
+
+  const handleCreateThread = async () => {
+    if (isBusy || isCreating) return;
+
+    setIsCreating(true);
+    setError('');
+
+    try {
+      const response = await authedFetch(THREADS_API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title: '新建技能',
+          archived: false,
+          is_real_chat: true,
+          ...createThreadPayload,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`创建会话失败: ${response.status}`);
+      }
+
+      const newThread = (await response.json()) as SkillCreatorThread;
+      if (!threadFilter || threadFilter(newThread)) {
+        setThreads((prev) => sortThreads([newThread, ...prev]));
+      }
+      onThreadSelect(String(newThread.id));
+    } catch (createError) {
+      console.error('创建会话失败', createError);
+      setError('新建会话失败，请稍后重试');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleDeleteThread = async (thread: SkillCreatorThread) => {
+    if (isBusy || deletingThreadId === thread.id) return;
+
+    const confirmed = window.confirm(`确认删除会话“${thread.title || `会话 ${thread.id}`}”吗？`);
+    if (!confirmed) return;
+
+    setDeletingThreadId(thread.id);
+    setError('');
+
+    try {
+      const response = await authedFetch(`${THREADS_API_URL}/${thread.id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        throw new Error(`删除会话失败: ${response.status}`);
+      }
+
+      const nextThreads = threads.filter((item) => item.id !== thread.id);
+      const nextArchivedThreads = archivedThreads.filter((item) => item.id !== thread.id);
+      setThreads(nextThreads);
+      setArchivedThreads(nextArchivedThreads);
+
+      if (currentThreadId === String(thread.id)) {
+        const fallbackThread = [...nextThreads, ...nextArchivedThreads][0];
+        onThreadSelect(fallbackThread ? String(fallbackThread.id) : '');
+      }
+    } catch (deleteError) {
+      console.error('删除会话失败', deleteError);
+      setError('删除会话失败，请稍后重试');
+    } finally {
+      setDeletingThreadId(null);
+    }
+  };
+
+  const renderThreadSection = (title: string, items: SkillCreatorThread[], archived = false) => (
+    <div className="space-y-2.5">
+      <div className="flex items-center justify-between px-1">
+        <div className="flex items-center gap-1.5">
+          {archived ? <Archive className="h-3.5 w-3.5" /> : <MessageSquareText className="h-3.5 w-3.5" />}
+          <span className="text-[11px] font-semibold tracking-[0.14em]">{title}</span>
+        </div>
+        <span className={`text-[11px] ${isDarkMode ? 'text-slate-500' : 'text-gray-400'}`}>{items.length}</span>
+      </div>
+
+      {items.length === 0 ? (
+        <div
+          className={`rounded-xl border border-dashed px-3 py-4 text-center text-xs ${
+            isDarkMode ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'
+          }`}
+        >
+          {emptyText}
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {items.map((thread) => {
+            const isActive = currentThreadId === String(thread.id);
+            const isDeleting = deletingThreadId === thread.id;
+
+            return (
+              <button
+                key={thread.id}
+                type="button"
+                disabled={isBusy}
+                onClick={() => onThreadSelect(String(thread.id))}
+                className={`group flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 ${
+                  isActive
+                    ? isDarkMode
+                      ? 'border-slate-600 bg-slate-800/90 text-slate-50 shadow-sm'
+                      : 'border-red-200 bg-red-50/80 text-gray-900 shadow-sm'
+                    : isDarkMode
+                      ? 'border-transparent text-slate-300 hover:border-slate-700 hover:bg-slate-800/60 hover:text-slate-100'
+                      : 'border-transparent text-gray-700 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-900'
+                } ${isBusy ? 'cursor-not-allowed opacity-70' : ''}`}
+              >
+                <span
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
+                    isActive
+                      ? isDarkMode
+                        ? 'bg-slate-700 text-slate-200'
+                        : 'bg-white text-red-500 ring-1 ring-red-100'
+                      : isDarkMode
+                        ? 'bg-slate-800 text-slate-400'
+                        : 'bg-gray-100 text-gray-500'
+                  }`}
+                >
+                  {archived ? <Archive className="h-4 w-4" /> : <MessageSquareText className="h-4 w-4" />}
+                </span>
+
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">{thread.title || `会话 ${thread.id}`}</span>
+                </span>
+
+                <span
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    void handleDeleteThread(thread);
+                  }}
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
+                    isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                  } ${
+                    isDarkMode
+                      ? 'text-slate-400 hover:bg-rose-500/15 hover:text-rose-300'
+                      : 'text-gray-400 hover:bg-rose-50 hover:text-rose-500'
+                  }`}
+                  role="button"
+                  aria-label={`删除会话 ${thread.title || thread.id}`}
+                  tabIndex={0}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      void handleDeleteThread(thread);
+                    }
+                  }}
+                >
+                  {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <aside
+      className={`flex h-full shrink-0 flex-col overflow-hidden border-r transition-[width,opacity,transform,border-color] duration-300 ease-out ${
+        isOpen ? 'w-[286px] translate-x-0 opacity-100' : 'w-0 -translate-x-3 opacity-0 pointer-events-none'
+      } ${
+        isDarkMode ? 'border-slate-700 bg-slate-950/90 text-slate-100' : 'border-gray-200 bg-[#fafafa] text-gray-900'
+      }`}
+    >
+      <div className={`border-b px-4 py-4 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-white'}`}>
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <h3 className="text-sm font-semibold">聊天记录</h3>
+            <p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>{subtitle}</p>
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
+              isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+            }`}
+            title="关闭聊天记录"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="mt-4 flex items-center gap-2">
+          <button
+            type="button"
+            disabled={isBusy || isCreating}
+            onClick={() => void handleCreateThread()}
+            className={`inline-flex h-9 flex-1 items-center justify-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
+              isDarkMode
+                ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                : 'border-gray-200 bg-white text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
+            } disabled:cursor-not-allowed disabled:opacity-70`}
+          >
+            {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+            {createButtonText}
+          </button>
+          <button
+            type="button"
+            disabled={isLoading}
+            onClick={() => void refreshThreads()}
+            className={`flex h-9 w-9 items-center justify-center rounded-lg border transition ${
+              isDarkMode
+                ? 'border-slate-700 bg-slate-800 text-slate-300 hover:bg-slate-700'
+                : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:text-gray-700'
+            } ${isLoading ? 'cursor-not-allowed opacity-70' : ''}`}
+            title="刷新会话列表"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+
+        {error && (
+          <div className={`mt-3 rounded-lg px-3 py-2 text-xs ${isDarkMode ? 'bg-rose-500/10 text-rose-300' : 'bg-rose-50 text-rose-500'}`}>
+            {error}
+          </div>
+        )}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+        {isLoading && allThreads.length === 0 ? (
+          <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            正在加载聊天记录...
+          </div>
+        ) : (
+          <div className="space-y-5">
+            {renderThreadSection('进行中', threads)}
+            {renderThreadSection('已归档', archivedThreads, true)}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}