TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:前端新增初版知识库管理页面

Browse Source
This commit is contained in:
PingChuan
2025-11-30 19:27:01 +08:00
parent 9614899171
commit c94cc00138
40 changed files with 3034 additions and 1024 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/chat/chat-input.tsx → app/components/dify-chat/chat-input.tsx
+254 -254
View File
@@ -1,255 +1,255 @@
import React, { useState, useRef, useCallback, useEffect } from 'react';
import { Input, Button, Upload, Tooltip, message as antdMessage, Space } from 'antd';
import { StopOutlined, PictureOutlined, CommentOutlined } from '@ant-design/icons';
import type { VisionFile } from '~/api/dify';
import '../../styles/components/chat-with-llm/chat-input.css';
const { TextArea } = Input;
interface ChatInputProps {
onSendMessage: (message: string, files?: VisionFile[]) => void;
disabled?: boolean;
placeholder?: string;
onStop?: () => void;
isResponding?: boolean;
visionConfig?: {
enabled: boolean;
number_limits?: number;
image_file_size_limit?: number;
transfer_methods?: string[];
};
}
/**
* 聊天输入组件
*/
export default function ChatInput({
onSendMessage,
disabled = false,
placeholder = '输入消息...',
onStop,
isResponding = false,
visionConfig,
}: ChatInputProps) {
const [message, setMessage] = useState('');
const [files, setFiles] = useState<VisionFile[]>([]);
const textareaRef = useRef<any>(null);
const isComposing = useRef(false);
/**
* 提交消息
*/
const handleSubmit = () => {
if (!message.trim() || disabled) return;
onSendMessage(message, files.length > 0 ? files : undefined);
setMessage('');
setFiles([]);
// 聚焦回输入框
setTimeout(() => {
textareaRef.current?.focus();
}, 10);
};
/**
* 处理键盘事件
*/
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
// 处理输入法状态
if (e.nativeEvent.isComposing) {
isComposing.current = true;
return;
}
// Enter发送，Shift+Enter换行
if (e.key === 'Enter' && !e.shiftKey && !isComposing.current) {
e.preventDefault();
handleSubmit();
}
};
/**
* 处理输入法结束
*/
const handleCompositionEnd = () => {
isComposing.current = false;
};
/**
* 停止响应
*/
const handleStop = () => {
onStop?.();
};
/**
* 处理文件上传
*/
const handleFileUpload = (file: File) => {
// 检查文件数量限制
if (visionConfig?.number_limits && files.length >= visionConfig.number_limits) {
antdMessage.error(`最多只能上传 ${visionConfig.number_limits} 个文件`);
return false;
}
// 检查文件大小限制
if (visionConfig?.image_file_size_limit) {
const limitMB = visionConfig.image_file_size_limit;
const fileSizeMB = file.size / (1024 * 1024);
if (fileSizeMB > limitMB) {
antdMessage.error(`文件大小不能超过 ${limitMB}MB`);
return false;
}
}
// 检查文件类型
if (!file.type.startsWith('image/')) {
antdMessage.error('只支持图片文件');
return false;
}
// 创建文件对象
const reader = new FileReader();
reader.onload = (e) => {
const newFile: VisionFile = {
id: `file-${Date.now()}-${Math.random()}`,
type: 'image',
transfer_method: 'local_file' as any,
url: e.target?.result as string,
upload_file_id: '',
};
setFiles(prev => [...prev, newFile]);
};
reader.readAsDataURL(file);
return false; // 阻止默认上传行为
};
/**
* 移除文件
*/
const handleRemoveFile = (fileId: string) => {
setFiles(prev => prev.filter(file => file.id !== fileId));
};
/**
* 渲染文件预览
*/
const renderFilePreview = () => {
if (files.length === 0) return null;
return (
<div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-50 rounded">
{files.map((file) => (
<div key={file.id} className="relative group">
<img
src={file.url}
alt="预览"
className="w-16 h-16 object-cover rounded border"
/>
<Button
type="text"
size="small"
className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => handleRemoveFile(file.id!)}
>
×
</Button>
</div>
))}
</div>
);
};
/**
* 渲染上传按钮
*/
const renderUploadButton = () => {
if (!visionConfig?.enabled) return null;
const isDisabled = disabled || (visionConfig.number_limits ? files.length >= visionConfig.number_limits : false);
return (
<Upload
beforeUpload={handleFileUpload}
showUploadList={false}
accept="image/*"
multiple={false}
>
<Tooltip title="上传图片">
<Button
type="text"
icon={<PictureOutlined />}
size="small"
disabled={isDisabled}
className="chat-upload-button"
shape="circle"
/>
</Tooltip>
</Upload>
);
};
return (
<div className="bg-white p-4">
<div className="max-w-4xl mx-auto">
{/* 文件预览 */}
{renderFilePreview()}
{/* 输入区域 - 方块容器 */}
<div className="chat-input-box">
<div className="chat-input-content">
{/* 上传按钮 */}
{renderUploadButton()}
{/* 文本输入 */}
<div className="chat-input-textarea-wrapper">
<TextArea
ref={textareaRef}
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
onCompositionEnd={handleCompositionEnd}
placeholder={placeholder}
disabled={disabled}
autoSize={{ minRows: 1, maxRows: 6 }}
className="chat-input-textarea"
/>
</div>
{/* 发送/停止按钮 */}
<div className="chat-input-button">
{isResponding ? (
<Tooltip title="停止生成">
<Button
type="primary"
danger
icon={<StopOutlined />}
onClick={handleStop}
disabled={disabled}
size="small"
shape="circle"
/>
</Tooltip>
) : (
<Tooltip title="发送消息 (Enter)">
<Button
type="primary"
icon={<CommentOutlined style={{ fontSize: '30px' }} />}
onClick={handleSubmit}
disabled={disabled || !message.trim()}
size="small"
shape="circle"
className='chat-input-button-send'
/>
</Tooltip>
)}
</div>
</div>
</div>
</div>
</div>
);
import { CommentOutlined, PictureOutlined, StopOutlined } from '@ant-design/icons';
import { message as antdMessage, Button, Input, Tooltip, Upload } from 'antd';
import React, { useRef, useState } from 'react';
import type { VisionFile } from '~/api/dify-chat';
import '../../styles/components/chat-with-llm/chat-input.css';
const { TextArea } = Input;
interface ChatInputProps {
onSendMessage: (message: string, files?: VisionFile[]) => void;
disabled?: boolean;
placeholder?: string;
onStop?: () => void;
isResponding?: boolean;
visionConfig?: {
enabled: boolean;
number_limits?: number;
image_file_size_limit?: number;
transfer_methods?: string[];
};
}
/**
* 聊天输入组件
*/
export default function ChatInput({
onSendMessage,
disabled = false,
placeholder = '输入消息...',
onStop,
isResponding = false,
visionConfig,
}: ChatInputProps) {
const [message, setMessage] = useState('');
const [files, setFiles] = useState<VisionFile[]>([]);
const textareaRef = useRef<any>(null);
const isComposing = useRef(false);
/**
* 提交消息
*/
const handleSubmit = () => {
if (!message.trim() || disabled) return;
onSendMessage(message, files.length > 0 ? files : undefined);
setMessage('');
setFiles([]);
// 聚焦回输入框
setTimeout(() => {
textareaRef.current?.focus();
}, 10);
};
/**
* 处理键盘事件
*/
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
// 处理输入法状态
if (e.nativeEvent.isComposing) {
isComposing.current = true;
return;
}
// Enter发送，Shift+Enter换行
if (e.key === 'Enter' && !e.shiftKey && !isComposing.current) {
e.preventDefault();
handleSubmit();
}
};
/**
* 处理输入法结束
*/
const handleCompositionEnd = () => {
isComposing.current = false;
};
/**
* 停止响应
*/
const handleStop = () => {
onStop?.();
};
/**
* 处理文件上传
*/
const handleFileUpload = (file: File) => {
// 检查文件数量限制
if (visionConfig?.number_limits && files.length >= visionConfig.number_limits) {
antdMessage.error(`最多只能上传 ${visionConfig.number_limits} 个文件`);
return false;
}
// 检查文件大小限制
if (visionConfig?.image_file_size_limit) {
const limitMB = visionConfig.image_file_size_limit;
const fileSizeMB = file.size / (1024 * 1024);
if (fileSizeMB > limitMB) {
antdMessage.error(`文件大小不能超过 ${limitMB}MB`);
return false;
}
}
// 检查文件类型
if (!file.type.startsWith('image/')) {
antdMessage.error('只支持图片文件');
return false;
}
// 创建文件对象
const reader = new FileReader();
reader.onload = (e) => {
const newFile: VisionFile = {
id: `file-${Date.now()}-${Math.random()}`,
type: 'image',
transfer_method: 'local_file' as any,
url: e.target?.result as string,
upload_file_id: '',
};
setFiles(prev => [...prev, newFile]);
};
reader.readAsDataURL(file);
return false; // 阻止默认上传行为
};
/**
* 移除文件
*/
const handleRemoveFile = (fileId: string) => {
setFiles(prev => prev.filter(file => file.id !== fileId));
};
/**
* 渲染文件预览
*/
const renderFilePreview = () => {
if (files.length === 0) return null;
return (
<div className="flex flex-wrap gap-2 mb-2 p-2 bg-gray-50 rounded">
{files.map((file) => (
<div key={file.id} className="relative group">
<img
src={file.url}
alt="预览"
className="w-16 h-16 object-cover rounded border"
/>
<Button
type="text"
size="small"
className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => handleRemoveFile(file.id!)}
>
×
</Button>
</div>
))}
</div>
);
};
/**
* 渲染上传按钮
*/
const renderUploadButton = () => {
if (!visionConfig?.enabled) return null;
const isDisabled = disabled || (visionConfig.number_limits ? files.length >= visionConfig.number_limits : false);
return (
<Upload
beforeUpload={handleFileUpload}
showUploadList={false}
accept="image/*"
multiple={false}
>
<Tooltip title="上传图片">
<Button
type="text"
icon={<PictureOutlined />}
size="small"
disabled={isDisabled}
className="chat-upload-button"
shape="circle"
/>
</Tooltip>
</Upload>
);
};
return (
<div className="bg-white p-4">
<div className="max-w-4xl mx-auto">
{/* 文件预览 */}
{renderFilePreview()}
{/* 输入区域 - 方块容器 */}
<div className="chat-input-box">
<div className="chat-input-content">
{/* 上传按钮 */}
{renderUploadButton()}
{/* 文本输入 */}
<div className="chat-input-textarea-wrapper">
<TextArea
ref={textareaRef}
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={handleKeyDown}
onCompositionEnd={handleCompositionEnd}
placeholder={placeholder}
disabled={disabled}
autoSize={{ minRows: 1, maxRows: 6 }}
className="chat-input-textarea"
/>
</div>
{/* 发送/停止按钮 */}
<div className="chat-input-button">
{isResponding ? (
<Tooltip title="停止生成">
<Button
type="primary"
danger
icon={<StopOutlined />}
onClick={handleStop}
disabled={disabled}
size="small"
shape="circle"
/>
</Tooltip>
) : (
<Tooltip title="发送消息 (Enter)">
<Button
type="primary"
icon={<CommentOutlined style={{ fontSize: '30px' }} />}
onClick={handleSubmit}
disabled={disabled || !message.trim()}
size="small"
shape="circle"
className='chat-input-button-send'
/>
</Tooltip>
)}
</div>
</div>
</div>
</div>
</div>
);
}
app/components/chat/chat-message.tsx → app/components/dify-chat/chat-message.tsx
+6 -8
View File
@@ -1,13 +1,11 @@
import React, { useState } from 'react';
import { Button, Card, Spin } from 'antd';
import type { ChatItem, Feedbacktype, ThoughtItem, VisionFile } from '~/api/dify';
import { CHAT_CONFIG } from '../../config/chat';
import Markdown from './markdown';
import ThoughtProcess from './thought-process';
import ThinkingBlock from './thinking-block';
import { parseMessageContent } from '../../utils/message-parser';
import { Dayjs } from 'dayjs';
import { useState } from 'react';
import type { ChatItem, Feedbacktype } from '~/api/dify-chat';
import '../../styles/components/chat-with-llm/chat-message.css';
import { parseMessageContent } from '../../utils/message-parser';
import Markdown from './markdown';
import ThinkingBlock from './thinking-block';
import ThoughtProcess from './thought-process';
interface ChatMessageProps {
message: ChatItem;
app/components/chat/index.tsx → app/components/dify-chat/index.tsx
+6 -7
View File
@@ -1,16 +1,15 @@
import { useState, useEffect, useRef } from 'react';
import { produce } from 'immer';
import { useBoolean, useGetState } from 'ahooks';
import { Layout, theme } from 'antd';
import ChatMessage from './chat-message';
import { useEffect, useRef, useState } from 'react';
import ChatInput from './chat-input';
import ChatMessage from './chat-message';
import ChatSidebar, { type ChatSidebarRef } from './sidebar';
// import Header from '../layout/Header';
import useConversation from '../../hooks/use-conversation';
import useChatMessage from '../../hooks/use-chat-message';
import type { ChatItem, ConversationItem } from '~/api/dify';
import type { ChatItem, ConversationItem } from '~/api/dify-chat';
import { fetchAppParams, fetchChatList, fetchConversations } from '~/api/dify-chat';
import { CHAT_CONFIG } from '../../config/chat';
import { fetchConversations, fetchAppParams, fetchChatList } from '~/api/dify';
import useChatMessage from '../../hooks/use-chat-message';
import useConversation from '../../hooks/use-conversation';
import '../../styles/components/chat-with-llm/index.css';
const { Content } = Layout;
app/components/chat/markdown.tsx → app/components/dify-chat/markdown.tsx
View File
app/components/chat/sidebar.tsx → app/components/dify-chat/sidebar.tsx
+397 -397
View File
@@ -1,398 +1,398 @@
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Button, Layout, Menu, theme, Input, Tooltip, Dropdown, Modal, message } from 'antd';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
MessageOutlined,
PlusOutlined,
SearchOutlined,
MoreOutlined,
DeleteOutlined,
EditOutlined,
ExclamationCircleOutlined,
} from '@ant-design/icons';
import type { ConversationItem } from '~/api/dify';
import { deleteConversation, renameConversation } from '~/api/dify';
import '../../styles/components/chat-with-llm/sidebar.css';
const { Sider } = Layout;
interface ChatSidebarProps {
collapsed: boolean;
onToggle: () => void;
conversations: ConversationItem[];
currentConversationId: string;
onConversationSelect: (conversationId: string) => void;
onNewConversation: () => void;
onConversationDeleted?: (conversationId: string) => void;
onConversationRenamed?: (conversationId: string, newName: string) => void;
}
// 暴露给父组件的方法接口
export interface ChatSidebarRef {
autoRename: (conversationId: string) => Promise<void>;
}
/**
* 聊天侧边栏组件
*/
const ChatSidebar = forwardRef<ChatSidebarRef, ChatSidebarProps>(({
collapsed,
onToggle,
conversations,
currentConversationId,
onConversationSelect,
onNewConversation,
onConversationDeleted,
onConversationRenamed,
}, ref) => {
const [searchValue, setSearchValue] = useState('');
const [renameModalVisible, setRenameModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [renamingConversation, setRenamingConversation] = useState<ConversationItem | null>(null);
const [deletingConversation, setDeletingConversation] = useState<ConversationItem | null>(null);
const [newName, setNewName] = useState('');
const [renameLoading, setRenameLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const {
token: { colorBgContainer, borderRadiusLG },
} = theme.useToken();
// 过滤会话列表
const filteredConversations = conversations.filter(conv =>
conv.name.toLowerCase().includes(searchValue.toLowerCase())
);
// 处理重命名
const handleRename = (conv: ConversationItem) => {
setRenamingConversation(conv);
setNewName(conv.name);
setRenameModalVisible(true);
};
// 处理删除会话 - 显示确认Modal
const handleDeleteClick = (conv: ConversationItem) => {
setDeletingConversation(conv);
setDeleteModalVisible(true);
};
// 确认删除会话
const handleDeleteConfirm = async () => {
if (!deletingConversation) return;
setDeleteLoading(true);
try {
// console.log('🗑️ 开始删除会话:', deletingConversation.id);
// 调用API删除服务器端的会话
const response = await deleteConversation(deletingConversation.id);
// console.log('✅ 服务器端会话删除响应:', response);
// 检查响应是否成功
if (response && (response as any).result === 'success') {
// console.log('✅ 服务器端会话删除成功');
message.success('会话删除成功');
setDeleteModalVisible(false);
// 通知父组件会话已删除
onConversationDeleted?.(deletingConversation.id);
// console.log('✅ 会话删除完成:', deletingConversation.id);
} else {
throw new Error((response as any)?.error || '删除会话失败');
}
} catch (error) {
console.error('❌ 删除会话失败:', error);
message.error(`删除会话失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setDeleteLoading(false);
}
};
// 取消删除
const handleDeleteCancel = () => {
setDeleteModalVisible(false);
setDeletingConversation(null);
setDeleteLoading(false);
};
// 确认重命名
const handleRenameConfirm = async () => {
if (!renamingConversation || !newName.trim()) {
message.error('请输入有效的会话名称');
return;
}
if (newName.trim() === renamingConversation.name) {
setRenameModalVisible(false);
return;
}
setRenameLoading(true);
try {
// console.log('✏️ 开始重命名会话:', { conversationId: renamingConversation.id, newName: newName.trim() });
// 调用API重命名服务器端的会话
const response = await renameConversation(renamingConversation.id, newName.trim(), false);
// console.log('✅ 服务器端会话重命名响应:', response);
// 检查响应是否成功
if (response && (response as any).name) {
// console.log('✅ 服务器端会话重命名成功');
message.success('重命名成功');
setRenameModalVisible(false);
// 通知父组件会话已重命名
onConversationRenamed?.(renamingConversation.id, (response as any).name);
// console.log('✅ 会话重命名完成:', renamingConversation.id, '->', (response as any).name);
} else {
throw new Error((response as any)?.error || '重命名会话失败');
}
} catch (error) {
console.error('❌ 重命名会话失败:', error);
message.error(`重命名失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setRenameLoading(false);
}
};
// 取消重命名
const handleRenameCancel = () => {
setRenameModalVisible(false);
setRenamingConversation(null);
setNewName('');
setRenameLoading(false);
};
// 生成菜单项
const menuItems = filteredConversations.map(conv => ({
key: conv.id,
icon: <MessageOutlined />,
label: (
<div className="flex items-center justify-between group">
<span className="truncate flex-1" title={conv.name}>
{conv.name}
</span>
{!collapsed && (
<Dropdown
menu={{
items: [
{
key: 'rename',
icon: <EditOutlined />,
label: '重命名',
onClick: () => handleRename(conv),
},
{
key: 'delete',
icon: <DeleteOutlined />,
label: '删除',
danger: true,
onClick: () => handleDeleteClick(conv),
},
],
}}
trigger={['click']}
placement="bottomRight"
>
<Button
type="text"
size="small"
icon={<MoreOutlined />}
className="opacity-0 group-hover:opacity-100 transition-opacity"
onClick={(e) => e.stopPropagation()}
// style={{ backgroundColor: '#00684A' }}
/>
</Dropdown>
)}
</div>
),
}));
useImperativeHandle(ref, () => ({
autoRename: async (conversationId: string) => {
try {
// console.log('🏷️ 开始自动重命名会话为"新对话":', conversationId);
// 调用API将会话重命名为固定的"新对话"
const response = await renameConversation(conversationId, '新对话', false);
// console.log('✅ 服务器端会话重命名响应:', response);
// 检查响应是否成功
if (response && (response as any).name) {
// console.log('✅ 服务器端会话重命名成功');
// 通知父组件会话已重命名
onConversationRenamed?.(conversationId, (response as any).name);
// console.log('✅ 会话重命名完成:', conversationId, '->', (response as any).name);
} else {
throw new Error((response as any)?.error || '重命名会话失败');
}
} catch (error) {
console.error('❌ 重命名会话失败:', error);
// 重命名失败时不显示错误消息，避免打扰用户
// console.warn('⚠️ 重命名失败，会话将保持默认名称');
}
},
}));
return (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
width={280}
style={{
background: colorBgContainer,
borderRight: '1px solid #f0f0f0',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
{/* 侧边栏头部 - 固定在顶部 */}
<div className="p-4 border-b border-gray-100 flex-shrink-0">
<div className="flex items-center justify-between mb-3">
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={onToggle}
style={{
fontSize: '16px',
width: 32,
height: 32,
color: 'rgb(0, 104, 74)',
}}
/>
{!collapsed && (
<Tooltip title="新建对话">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={onNewConversation}
size="small"
>
新对话
</Button>
</Tooltip>
)}
</div>
{/* 搜索框 */}
{!collapsed && (
<Input
placeholder="搜索对话..."
prefix={<SearchOutlined />}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
allowClear
/>
)}
</div>
{/* 会话列表 - 可滚动区域 */}
<div className="flex-1 overflow-hidden">
<div
className="h-full overflow-y-auto"
style={{
scrollbarWidth: 'thin',
scrollbarColor: '#c1c1c1 #f1f1f1',
}}
>
{!collapsed && filteredConversations.length === 0 && searchValue && (
<div className="p-4 text-center text-gray-500">
<MessageOutlined className="text-2xl mb-2" />
<p>未找到相关对话</p>
</div>
)}
{!collapsed && conversations.length === 0 && !searchValue && (
<div className="p-4 text-center text-gray-500">
<MessageOutlined className="text-2xl mb-2" />
<p>暂无对话记录</p>
<Button
type="link"
onClick={onNewConversation}
className="mt-2"
>
开始新对话
</Button>
</div>
)}
<Menu
mode="inline"
selectedKeys={[currentConversationId]}
items={menuItems}
onClick={({ key }) => onConversationSelect(key)}
style={{
border: 'none',
background: 'transparent',
}}
className="chat-sidebar-menu"
/>
</div>
</div>
{/* 侧边栏底部 - 固定在底部 */}
{!collapsed && conversations.length > 0 && (
<div className="sidebar-footer">
<div className="stats-text">
共 {conversations.length} 个对话
</div>
</div>
)}
{/* 重命名Modal */}
<Modal
title="重命名会话"
open={renameModalVisible}
onOk={handleRenameConfirm}
onCancel={handleRenameCancel}
confirmLoading={renameLoading}
okText="确定"
cancelText="取消"
destroyOnClose
>
<div className="py-4">
<Input
value={newName}
onChange={(e) => setNewName(e.target.value)}
placeholder="请输入新的会话名称"
maxLength={10}
showCount
onPressEnter={handleRenameConfirm}
autoFocus
/>
</div>
</Modal>
{/* 删除确认Modal */}
<Modal
title={
<div className="flex items-center">
<ExclamationCircleOutlined className="text-red-500 mr-2" />
删除会话
</div>
}
open={deleteModalVisible}
onOk={handleDeleteConfirm}
onCancel={handleDeleteCancel}
confirmLoading={deleteLoading}
okText="删除"
cancelText="取消"
okType="danger"
destroyOnClose
>
<div className="py-4">
<p>确定要删除会话 <strong>"{deletingConversation?.name}"</strong> 吗？</p>
<p className="text-gray-500 text-sm mt-2">此操作不可撤销，会话中的所有消息都将被永久删除。</p>
</div>
</Modal>
</Sider>
);
});
import {
DeleteOutlined,
EditOutlined,
ExclamationCircleOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
MessageOutlined,
MoreOutlined,
PlusOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { Button, Dropdown, Input, Layout, Menu, Modal, Tooltip, message, theme } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
import type { ConversationItem } from '~/api/dify-chat';
import { deleteConversation, renameConversation } from '~/api/dify-chat';
import '../../styles/components/chat-with-llm/sidebar.css';
const { Sider } = Layout;
interface ChatSidebarProps {
collapsed: boolean;
onToggle: () => void;
conversations: ConversationItem[];
currentConversationId: string;
onConversationSelect: (conversationId: string) => void;
onNewConversation: () => void;
onConversationDeleted?: (conversationId: string) => void;
onConversationRenamed?: (conversationId: string, newName: string) => void;
}
// 暴露给父组件的方法接口
export interface ChatSidebarRef {
autoRename: (conversationId: string) => Promise<void>;
}
/**
* 聊天侧边栏组件
*/
const ChatSidebar = forwardRef<ChatSidebarRef, ChatSidebarProps>(({
collapsed,
onToggle,
conversations,
currentConversationId,
onConversationSelect,
onNewConversation,
onConversationDeleted,
onConversationRenamed,
}, ref) => {
const [searchValue, setSearchValue] = useState('');
const [renameModalVisible, setRenameModalVisible] = useState(false);
const [deleteModalVisible, setDeleteModalVisible] = useState(false);
const [renamingConversation, setRenamingConversation] = useState<ConversationItem | null>(null);
const [deletingConversation, setDeletingConversation] = useState<ConversationItem | null>(null);
const [newName, setNewName] = useState('');
const [renameLoading, setRenameLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const {
token: { colorBgContainer, borderRadiusLG },
} = theme.useToken();
// 过滤会话列表
const filteredConversations = conversations.filter(conv =>
conv.name.toLowerCase().includes(searchValue.toLowerCase())
);
// 处理重命名
const handleRename = (conv: ConversationItem) => {
setRenamingConversation(conv);
setNewName(conv.name);
setRenameModalVisible(true);
};
// 处理删除会话 - 显示确认Modal
const handleDeleteClick = (conv: ConversationItem) => {
setDeletingConversation(conv);
setDeleteModalVisible(true);
};
// 确认删除会话
const handleDeleteConfirm = async () => {
if (!deletingConversation) return;
setDeleteLoading(true);
try {
// console.log('🗑️ 开始删除会话:', deletingConversation.id);
// 调用API删除服务器端的会话
const response = await deleteConversation(deletingConversation.id);
// console.log('✅ 服务器端会话删除响应:', response);
// 检查响应是否成功
if (response && (response as any).result === 'success') {
// console.log('✅ 服务器端会话删除成功');
message.success('会话删除成功');
setDeleteModalVisible(false);
// 通知父组件会话已删除
onConversationDeleted?.(deletingConversation.id);
// console.log('✅ 会话删除完成:', deletingConversation.id);
} else {
throw new Error((response as any)?.error || '删除会话失败');
}
} catch (error) {
console.error('❌ 删除会话失败:', error);
message.error(`删除会话失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setDeleteLoading(false);
}
};
// 取消删除
const handleDeleteCancel = () => {
setDeleteModalVisible(false);
setDeletingConversation(null);
setDeleteLoading(false);
};
// 确认重命名
const handleRenameConfirm = async () => {
if (!renamingConversation || !newName.trim()) {
message.error('请输入有效的会话名称');
return;
}
if (newName.trim() === renamingConversation.name) {
setRenameModalVisible(false);
return;
}
setRenameLoading(true);
try {
// console.log('✏️ 开始重命名会话:', { conversationId: renamingConversation.id, newName: newName.trim() });
// 调用API重命名服务器端的会话
const response = await renameConversation(renamingConversation.id, newName.trim(), false);
// console.log('✅ 服务器端会话重命名响应:', response);
// 检查响应是否成功
if (response && (response as any).name) {
// console.log('✅ 服务器端会话重命名成功');
message.success('重命名成功');
setRenameModalVisible(false);
// 通知父组件会话已重命名
onConversationRenamed?.(renamingConversation.id, (response as any).name);
// console.log('✅ 会话重命名完成:', renamingConversation.id, '->', (response as any).name);
} else {
throw new Error((response as any)?.error || '重命名会话失败');
}
} catch (error) {
console.error('❌ 重命名会话失败:', error);
message.error(`重命名失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setRenameLoading(false);
}
};
// 取消重命名
const handleRenameCancel = () => {
setRenameModalVisible(false);
setRenamingConversation(null);
setNewName('');
setRenameLoading(false);
};
// 生成菜单项
const menuItems = filteredConversations.map(conv => ({
key: conv.id,
icon: <MessageOutlined />,
label: (
<div className="flex items-center justify-between group">
<span className="truncate flex-1" title={conv.name}>
{conv.name}
</span>
{!collapsed && (
<Dropdown
menu={{
items: [
{
key: 'rename',
icon: <EditOutlined />,
label: '重命名',
onClick: () => handleRename(conv),
},
{
key: 'delete',
icon: <DeleteOutlined />,
label: '删除',
danger: true,
onClick: () => handleDeleteClick(conv),
},
],
}}
trigger={['click']}
placement="bottomRight"
>
<Button
type="text"
size="small"
icon={<MoreOutlined />}
className="opacity-0 group-hover:opacity-100 transition-opacity"
onClick={(e) => e.stopPropagation()}
// style={{ backgroundColor: '#00684A' }}
/>
</Dropdown>
)}
</div>
),
}));
useImperativeHandle(ref, () => ({
autoRename: async (conversationId: string) => {
try {
// console.log('🏷️ 开始自动重命名会话为"新对话":', conversationId);
// 调用API将会话重命名为固定的"新对话"
const response = await renameConversation(conversationId, '新对话', false);
// console.log('✅ 服务器端会话重命名响应:', response);
// 检查响应是否成功
if (response && (response as any).name) {
// console.log('✅ 服务器端会话重命名成功');
// 通知父组件会话已重命名
onConversationRenamed?.(conversationId, (response as any).name);
// console.log('✅ 会话重命名完成:', conversationId, '->', (response as any).name);
} else {
throw new Error((response as any)?.error || '重命名会话失败');
}
} catch (error) {
console.error('❌ 重命名会话失败:', error);
// 重命名失败时不显示错误消息，避免打扰用户
// console.warn('⚠️ 重命名失败，会话将保持默认名称');
}
},
}));
return (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
width={280}
style={{
background: colorBgContainer,
borderRight: '1px solid #f0f0f0',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
{/* 侧边栏头部 - 固定在顶部 */}
<div className="p-4 border-b border-gray-100 flex-shrink-0">
<div className="flex items-center justify-between mb-3">
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={onToggle}
style={{
fontSize: '16px',
width: 32,
height: 32,
color: 'rgb(0, 104, 74)',
}}
/>
{!collapsed && (
<Tooltip title="新建对话">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={onNewConversation}
size="small"
>
新对话
</Button>
</Tooltip>
)}
</div>
{/* 搜索框 */}
{!collapsed && (
<Input
placeholder="搜索对话..."
prefix={<SearchOutlined />}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
allowClear
/>
)}
</div>
{/* 会话列表 - 可滚动区域 */}
<div className="flex-1 overflow-hidden">
<div
className="h-full overflow-y-auto"
style={{
scrollbarWidth: 'thin',
scrollbarColor: '#c1c1c1 #f1f1f1',
}}
>
{!collapsed && filteredConversations.length === 0 && searchValue && (
<div className="p-4 text-center text-gray-500">
<MessageOutlined className="text-2xl mb-2" />
<p>未找到相关对话</p>
</div>
)}
{!collapsed && conversations.length === 0 && !searchValue && (
<div className="p-4 text-center text-gray-500">
<MessageOutlined className="text-2xl mb-2" />
<p>暂无对话记录</p>
<Button
type="link"
onClick={onNewConversation}
className="mt-2"
>
开始新对话
</Button>
</div>
)}
<Menu
mode="inline"
selectedKeys={[currentConversationId]}
items={menuItems}
onClick={({ key }) => onConversationSelect(key)}
style={{
border: 'none',
background: 'transparent',
}}
className="chat-sidebar-menu"
/>
</div>
</div>
{/* 侧边栏底部 - 固定在底部 */}
{!collapsed && conversations.length > 0 && (
<div className="sidebar-footer">
<div className="stats-text">
共 {conversations.length} 个对话
</div>
</div>
)}
{/* 重命名Modal */}
<Modal
title="重命名会话"
open={renameModalVisible}
onOk={handleRenameConfirm}
onCancel={handleRenameCancel}
confirmLoading={renameLoading}
okText="确定"
cancelText="取消"
destroyOnClose
>
<div className="py-4">
<Input
value={newName}
onChange={(e) => setNewName(e.target.value)}
placeholder="请输入新的会话名称"
maxLength={10}
showCount
onPressEnter={handleRenameConfirm}
autoFocus
/>
</div>
</Modal>
{/* 删除确认Modal */}
<Modal
title={
<div className="flex items-center">
<ExclamationCircleOutlined className="text-red-500 mr-2" />
删除会话
</div>
}
open={deleteModalVisible}
onOk={handleDeleteConfirm}
onCancel={handleDeleteCancel}
confirmLoading={deleteLoading}
okText="删除"
cancelText="取消"
okType="danger"
destroyOnClose
>
<div className="py-4">
<p>确定要删除会话 <strong>"{deletingConversation?.name}"</strong> 吗？</p>
<p className="text-gray-500 text-sm mt-2">此操作不可撤销，会话中的所有消息都将被永久删除。</p>
</div>
</Modal>
</Sider>
);
});
export default ChatSidebar;
app/components/chat/thinking-block.tsx → app/components/dify-chat/thinking-block.tsx
View File
app/components/chat/thought-process.tsx → app/components/dify-chat/thought-process.tsx
+219 -219
View File
@@ -1,220 +1,220 @@
import React, { useState } from 'react';
import { Card, Collapse, Tag, Spin, Typography, Button } from 'antd';
import { ToolOutlined, ThunderboltOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
import type { ThoughtItem } from '~/api/dify';
import Markdown from './markdown';
import '../../styles/components/chat-with-llm/thought-process.css';
const { Panel } = Collapse;
const { Text, Paragraph } = Typography;
interface ThoughtProcessProps {
thought: ThoughtItem;
isFinished: boolean;
allToolIcons?: Record<string, string>;
}
/**
* 思考过程组件
* 展示AI的思考过程和工具调用
*/
export default function ThoughtProcess({
thought,
isFinished,
allToolIcons = {}
}: ThoughtProcessProps) {
const [expanded, setExpanded] = useState(false);
const { tool_name, tool_input, tool_output, thought: thoughtText, observation } = thought;
/**
* 获取工具图标
*/
const getToolIcon = (toolName?: string) => {
if (!toolName) return <ToolOutlined />;
// 如果有自定义图标映射
if (allToolIcons[toolName]) {
return <span>{allToolIcons[toolName]}</span>;
}
// 根据工具名称返回默认图标
switch (toolName.toLowerCase()) {
case 'search':
case 'web_search':
return '🔍';
case 'calculator':
case 'math':
return '🧮';
case 'code':
case 'python':
return '💻';
case 'image':
case 'vision':
return '👁️';
case 'file':
case 'document':
return '📄';
default:
return <ToolOutlined />;
}
};
/**
* 获取状态图标和颜色
*/
const getStatusInfo = () => {
if (isFinished && observation) {
return {
icon: <CheckCircleOutlined />,
color: 'success',
text: '已完成'
};
} else if (!isFinished) {
return {
icon: <LoadingOutlined spin />,
color: 'processing',
text: '执行中'
};
} else {
return {
icon: <ThunderboltOutlined />,
color: 'default',
text: '等待中'
};
}
};
const statusInfo = getStatusInfo();
/**
* 格式化工具输入
*/
const formatToolInput = (input?: string) => {
if (!input) return '无输入参数';
try {
const parsed = JSON.parse(input);
return (
<pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
{JSON.stringify(parsed, null, 2)}
</pre>
);
} catch {
return <Text code>{input}</Text>;
}
};
/**
* 格式化工具输出
*/
const formatToolOutput = (output?: string) => {
if (!output) return '暂无输出';
try {
const parsed = JSON.parse(output);
return (
<pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
{JSON.stringify(parsed, null, 2)}
</pre>
);
} catch {
return <Markdown content={output} />;
}
};
return (
<Card
size="small"
className="my-2 border-l-4 border-l-blue-400 bg-blue-50"
bodyStyle={{ padding: '12px' }}
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="text-lg">{getToolIcon(tool_name)}</span>
<Text strong className="text-blue-700">
{tool_name || '工具调用'}
</Text>
<Tag
color={statusInfo.color as any}
icon={statusInfo.icon}
className="ml-2"
>
{statusInfo.text}
</Tag>
</div>
{(tool_input || tool_output) && (
<Button
type="text"
size="small"
onClick={() => setExpanded(!expanded)}
className="text-blue-600"
>
{expanded ? '收起详情' : '查看详情'}
</Button>
)}
</div>
{/* 思考内容 */}
{thoughtText && (
<div className="mb-2">
<Markdown content={thoughtText} />
</div>
)}
{/* 工具详情 */}
{expanded && (tool_input || tool_output) && (
<Collapse
ghost
size="small"
className="bg-white rounded"
>
{tool_input && (
<Panel
header={
<span className="text-sm font-medium text-gray-600">
📥 输入参数
</span>
}
key="input"
>
{formatToolInput(tool_input)}
</Panel>
)}
{tool_output && (
<Panel
header={
<span className="text-sm font-medium text-gray-600">
📤 执行结果
</span>
}
key="output"
>
{formatToolOutput(tool_output)}
</Panel>
)}
</Collapse>
)}
{/* 观察结果 */}
{observation && observation !== tool_output && (
<div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
<Text className="text-green-700 text-sm font-medium">💡 观察结果：</Text>
<div className="mt-1">
<Markdown content={observation} />
</div>
</div>
)}
{/* 加载状态 */}
{!isFinished && !observation && (
<div className="flex items-center justify-center py-2 text-blue-600">
<Spin size="small" className="mr-2" />
<Text className="text-sm">正在执行工具调用...</Text>
</div>
)}
</Card>
);
import { CheckCircleOutlined, LoadingOutlined, ThunderboltOutlined, ToolOutlined } from '@ant-design/icons';
import { Button, Card, Collapse, Spin, Tag, Typography } from 'antd';
import { useState } from 'react';
import type { ThoughtItem } from '~/api/dify-chat';
import '../../styles/components/chat-with-llm/thought-process.css';
import Markdown from './markdown';
const { Panel } = Collapse;
const { Text, Paragraph } = Typography;
interface ThoughtProcessProps {
thought: ThoughtItem;
isFinished: boolean;
allToolIcons?: Record<string, string>;
}
/**
* 思考过程组件
* 展示AI的思考过程和工具调用
*/
export default function ThoughtProcess({
thought,
isFinished,
allToolIcons = {}
}: ThoughtProcessProps) {
const [expanded, setExpanded] = useState(false);
const { tool_name, tool_input, tool_output, thought: thoughtText, observation } = thought;
/**
* 获取工具图标
*/
const getToolIcon = (toolName?: string) => {
if (!toolName) return <ToolOutlined />;
// 如果有自定义图标映射
if (allToolIcons[toolName]) {
return <span>{allToolIcons[toolName]}</span>;
}
// 根据工具名称返回默认图标
switch (toolName.toLowerCase()) {
case 'search':
case 'web_search':
return '🔍';
case 'calculator':
case 'math':
return '🧮';
case 'code':
case 'python':
return '💻';
case 'image':
case 'vision':
return '👁️';
case 'file':
case 'document':
return '📄';
default:
return <ToolOutlined />;
}
};
/**
* 获取状态图标和颜色
*/
const getStatusInfo = () => {
if (isFinished && observation) {
return {
icon: <CheckCircleOutlined />,
color: 'success',
text: '已完成'
};
} else if (!isFinished) {
return {
icon: <LoadingOutlined spin />,
color: 'processing',
text: '执行中'
};
} else {
return {
icon: <ThunderboltOutlined />,
color: 'default',
text: '等待中'
};
}
};
const statusInfo = getStatusInfo();
/**
* 格式化工具输入
*/
const formatToolInput = (input?: string) => {
if (!input) return '无输入参数';
try {
const parsed = JSON.parse(input);
return (
<pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
{JSON.stringify(parsed, null, 2)}
</pre>
);
} catch {
return <Text code>{input}</Text>;
}
};
/**
* 格式化工具输出
*/
const formatToolOutput = (output?: string) => {
if (!output) return '暂无输出';
try {
const parsed = JSON.parse(output);
return (
<pre className="bg-gray-50 p-2 rounded text-sm overflow-x-auto">
{JSON.stringify(parsed, null, 2)}
</pre>
);
} catch {
return <Markdown content={output} />;
}
};
return (
<Card
size="small"
className="my-2 border-l-4 border-l-blue-400 bg-blue-50"
bodyStyle={{ padding: '12px' }}
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
<span className="text-lg">{getToolIcon(tool_name)}</span>
<Text strong className="text-blue-700">
{tool_name || '工具调用'}
</Text>
<Tag
color={statusInfo.color as any}
icon={statusInfo.icon}
className="ml-2"
>
{statusInfo.text}
</Tag>
</div>
{(tool_input || tool_output) && (
<Button
type="text"
size="small"
onClick={() => setExpanded(!expanded)}
className="text-blue-600"
>
{expanded ? '收起详情' : '查看详情'}
</Button>
)}
</div>
{/* 思考内容 */}
{thoughtText && (
<div className="mb-2">
<Markdown content={thoughtText} />
</div>
)}
{/* 工具详情 */}
{expanded && (tool_input || tool_output) && (
<Collapse
ghost
size="small"
className="bg-white rounded"
>
{tool_input && (
<Panel
header={
<span className="text-sm font-medium text-gray-600">
📥 输入参数
</span>
}
key="input"
>
{formatToolInput(tool_input)}
</Panel>
)}
{tool_output && (
<Panel
header={
<span className="text-sm font-medium text-gray-600">
📤 执行结果
</span>
}
key="output"
>
{formatToolOutput(tool_output)}
</Panel>
)}
</Collapse>
)}
{/* 观察结果 */}
{observation && observation !== tool_output && (
<div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
<Text className="text-green-700 text-sm font-medium">💡 观察结果：</Text>
<div className="mt-1">
<Markdown content={observation} />
</div>
</div>
)}
{/* 加载状态 */}
{!isFinished && !observation && (
<div className="flex items-center justify-center py-2 text-blue-600">
<Spin size="small" className="mr-2" />
<Text className="text-sm">正在执行工具调用...</Text>
</div>
)}
</Card>
);
}
app/components/dify-dataset-manager/document-list.tsx
+373
View File
@@ -0,0 +1,373 @@
import { useState } from 'react';
import {
Button,
Input,
Table,
Tag,
Space,
Tooltip,
Popconfirm,
Switch,
message,
Empty,
Spin,
Upload,
} from 'antd';
import {
SearchOutlined,
ReloadOutlined,
DeleteOutlined,
FileTextOutlined,
CloudUploadOutlined,
EyeOutlined,
ClockCircleOutlined,
CheckCircleOutlined,
SyncOutlined,
ExclamationCircleOutlined,
PauseCircleOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { Document, IndexingStatus } from '~/api/dify-dataset';
import { deleteDocument, toggleDocumentStatus, uploadDocument } from '~/api/dify-dataset';
import '../../styles/components/dify-dataset-manager/document-list.css';
interface DocumentListProps {
datasetId: string;
datasetName: string;
documents: Document[];
loading: boolean;
total: number;
page: number;
pageSize: number;
onPageChange: (page: number) => void;
onDocumentDeleted: (documentId: string) => void;
onDocumentStatusChanged: (documentId: string, enabled: boolean) => void;
onRefresh: () => void;
}
/**
* 文档列表组件
*/
export default function DocumentList({
datasetId,
datasetName,
documents,
loading,
total,
page,
pageSize,
onPageChange,
onDocumentDeleted,
onDocumentStatusChanged,
onRefresh,
}: DocumentListProps) {
const [searchValue, setSearchValue] = useState('');
const [uploading, setUploading] = useState(false);
const [deletingId, setDeletingId] = useState<string | null>(null);
/**
* 获取状态标签配置
*/
const getStatusConfig = (status: IndexingStatus) => {
const configs: Record<IndexingStatus, { color: string; icon: React.ReactNode; text: string }> = {
completed: { color: 'success', icon: <CheckCircleOutlined />, text: '已完成' },
indexing: { color: 'processing', icon: <SyncOutlined spin />, text: '索引中' },
waiting: { color: 'warning', icon: <ClockCircleOutlined />, text: '等待中' },
parsing: { color: 'processing', icon: <SyncOutlined spin />, text: '解析中' },
cleaning: { color: 'processing', icon: <SyncOutlined spin />, text: '清洗中' },
splitting: { color: 'processing', icon: <SyncOutlined spin />, text: '分段中' },
paused: { color: 'default', icon: <PauseCircleOutlined />, text: '已暂停' },
error: { color: 'error', icon: <ExclamationCircleOutlined />, text: '错误' },
};
return configs[status] || { color: 'default', icon: null, text: status };
};
/**
* 格式化日期
*/
const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
};
/**
* 格式化数字
*/
const formatNumber = (num: number) => {
if (num >= 10000) {
return (num / 10000).toFixed(1) + 'w';
}
if (num >= 1000) {
return (num / 1000).toFixed(1) + 'k';
}
return num.toString();
};
/**
* 处理删除文档
*/
const handleDelete = async (documentId: string) => {
setDeletingId(documentId);
try {
await deleteDocument(datasetId, documentId);
message.success('删除成功');
onDocumentDeleted(documentId);
} catch (err: any) {
console.error('删除文档失败:', err);
message.error(err.message || '删除失败');
} finally {
setDeletingId(null);
}
};
/**
* 处理启用/禁用文档
*/
const handleToggleStatus = async (documentId: string, enabled: boolean) => {
try {
await toggleDocumentStatus(datasetId, documentId, enabled);
message.success(enabled ? '已启用' : '已禁用');
onDocumentStatusChanged(documentId, enabled);
} catch (err: any) {
console.error('切换文档状态失败:', err);
message.error(err.message || '操作失败');
}
};
/**
* 处理文件上传
*/
const handleUpload = async (file: File) => {
if (!datasetId) {
message.error('请先选择知识库');
return false;
}
setUploading(true);
try {
await uploadDocument(datasetId, file, (percent) => {
console.log('上传进度:', percent);
});
message.success('上传成功，正在处理...');
onRefresh();
} catch (err: any) {
console.error('上传文件失败:', err);
message.error(err.message || '上传失败');
} finally {
setUploading(false);
}
return false;
};
// 过滤文档
const filteredDocuments = documents.filter((doc) =>
doc.name.toLowerCase().includes(searchValue.toLowerCase())
);
// 表格列定义
const columns: ColumnsType<Document> = [
{
title: '文档名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
render: (name: string) => (
<div className="flex items-center gap-2">
<FileTextOutlined className="text-gray-400" />
<span className="font-medium">{name}</span>
</div>
),
},
{
title: '状态',
dataIndex: 'indexing_status',
key: 'indexing_status',
width: 120,
render: (status: IndexingStatus) => {
const config = getStatusConfig(status);
return (
<Tag color={config.color} icon={config.icon}>
{config.text}
</Tag>
);
},
},
{
title: '字数',
dataIndex: 'word_count',
key: 'word_count',
width: 100,
render: (count: number) => formatNumber(count),
},
{
title: '命中次数',
dataIndex: 'hit_count',
key: 'hit_count',
width: 100,
render: (count: number) => formatNumber(count),
},
{
title: '启用',
dataIndex: 'enabled',
key: 'enabled',
width: 80,
render: (enabled: boolean, record) => (
<Switch
size="small"
checked={enabled}
onChange={(checked) => handleToggleStatus(record.id, checked)}
/>
),
},
{
title: '创建时间',
dataIndex: 'created_at',
key: 'created_at',
width: 160,
render: (timestamp: number) => formatDate(timestamp),
},
{
title: '操作',
key: 'action',
width: 120,
render: (_, record) => (
<Space size="small">
<Tooltip title="查看详情">
<Button
type="text"
size="small"
icon={<EyeOutlined />}
onClick={() => {
// TODO: 查看文档详情/分段
message.info('功能开发中');
}}
/>
</Tooltip>
<Popconfirm
title="确定要删除这个文档吗？"
description="删除后无法恢复"
onConfirm={() => handleDelete(record.id)}
okText="确定"
cancelText="取消"
okButtonProps={{ danger: true }}
>
<Tooltip title="删除">
<Button
type="text"
size="small"
danger
icon={<DeleteOutlined />}
loading={deletingId === record.id}
/>
</Tooltip>
</Popconfirm>
</Space>
),
},
];
return (
<div className="dataset-content">
{/* 头部区域 */}
<div className="dataset-header" style={{ marginBottom: 16, padding: 0, height: 'auto', border: 'none' }}>
<h1 style={{ margin: 0 }}>
{datasetName || '请选择知识库'}
</h1>
<div className="dataset-header-actions">
<Tooltip title="刷新">
<Button
icon={<ReloadOutlined />}
onClick={onRefresh}
loading={loading}
/>
</Tooltip>
<Upload
beforeUpload={handleUpload}
showUploadList={false}
accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
disabled={!datasetId}
>
<Button
type="primary"
icon={<CloudUploadOutlined />}
loading={uploading}
disabled={!datasetId}
>
上传文档
</Button>
</Upload>
</div>
</div>
{/* 工具栏 */}
<div className="document-list-toolbar">
<Input
className="document-list-search"
placeholder="搜索文档..."
prefix={<SearchOutlined />}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
allowClear
/>
<div className="document-list-actions">
<span className="text-gray-500 text-sm">
共 {total} 个文档
</span>
</div>
</div>
{/* 文档表格 */}
{!datasetId ? (
<div className="dataset-empty">
<Empty description="请先选择一个知识库" />
</div>
) : loading && documents.length === 0 ? (
<div className="dataset-loading">
<Spin size="large" />
<span className="text-gray-500">加载中...</span>
</div>
) : filteredDocuments.length === 0 ? (
<div className="dataset-empty">
<Empty
description={searchValue ? '未找到匹配的文档' : '暂无文档'}
>
{!searchValue && (
<Upload
beforeUpload={handleUpload}
showUploadList={false}
accept=".txt,.md,.pdf,.docx,.doc,.csv,.xlsx,.xls"
>
<Button type="primary" icon={<CloudUploadOutlined />}>
上传第一个文档
</Button>
</Upload>
)}
</Empty>
</div>
) : (
<Table
className="document-table"
columns={columns}
dataSource={filteredDocuments}
rowKey="id"
loading={loading}
pagination={{
current: page,
pageSize: pageSize,
total: total,
onChange: onPageChange,
showSizeChanger: false,
showTotal: (total) => `共 ${total} 条`,
}}
size="middle"
/>
)}
</div>
);
}
app/components/dify-dataset-manager/index.tsx
+241
View File
@@ -0,0 +1,241 @@
import { Layout, theme, message } from 'antd';
import { useEffect, useState } from 'react';
import DatasetSidebar from './sidebar';
import DocumentList from './document-list';
import type { Dataset, Document } from '~/api/dify-dataset';
import { fetchDatasets, fetchDocuments } from '~/api/dify-dataset';
import '../../styles/components/dify-dataset-manager/index.css';
const { Content } = Layout;
/**
* 知识库管理主组件
*/
export default function DatasetManager() {
// 主题
const {
token: { colorBgContainer },
} = theme.useToken();
// 侧边栏状态
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [isMobile, setIsMobile] = useState(false);
// 知识库状态
const [datasets, setDatasets] = useState<Dataset[]>([]);
const [currentDatasetId, setCurrentDatasetId] = useState<string>('');
const [loadingDatasets, setLoadingDatasets] = useState(true);
// 文档状态
const [documents, setDocuments] = useState<Document[]>([]);
const [loadingDocuments, setLoadingDocuments] = useState(false);
const [documentTotal, setDocumentTotal] = useState(0);
const [documentPage, setDocumentPage] = useState(1);
const [documentPageSize] = useState(20);
// 初始化状态
const [inited, setInited] = useState(false);
const [error, setError] = useState<string | null>(null);
/**
* 加载知识库列表
*/
const loadDatasets = async () => {
setLoadingDatasets(true);
try {
console.log('[DatasetManager] 加载知识库列表...');
const response = await fetchDatasets(1, 100);
console.log('[DatasetManager] 知识库列表响应:', response);
if (response && response.data) {
setDatasets(response.data);
// 如果有知识库，默认选中第一个
if (response.data.length > 0 && !currentDatasetId) {
setCurrentDatasetId(response.data[0].id);
}
}
} catch (err: any) {
console.error('[DatasetManager] 加载知识库列表失败:', err);
setError(err.message || '加载知识库列表失败');
message.error('加载知识库列表失败');
} finally {
setLoadingDatasets(false);
setInited(true);
}
};
/**
* 加载文档列表
*/
const loadDocuments = async (datasetId: string, page: number = 1) => {
if (!datasetId) return;
setLoadingDocuments(true);
try {
console.log('[DatasetManager] 加载文档列表:', { datasetId, page });
const response = await fetchDocuments(datasetId, page, documentPageSize);
console.log('[DatasetManager] 文档列表响应:', response);
if (response && response.data) {
setDocuments(response.data);
setDocumentTotal(response.total);
setDocumentPage(page);
}
} catch (err: any) {
console.error('[DatasetManager] 加载文档列表失败:', err);
message.error('加载文档列表失败');
} finally {
setLoadingDocuments(false);
}
};
/**
* 处理知识库选择
*/
const handleDatasetSelect = (datasetId: string) => {
if (datasetId !== currentDatasetId) {
setCurrentDatasetId(datasetId);
setDocumentPage(1);
}
};
/**
* 处理文档页码变化
*/
const handlePageChange = (page: number) => {
loadDocuments(currentDatasetId, page);
};
/**
* 处理文档删除
*/
const handleDocumentDeleted = (documentId: string) => {
setDocuments((prev) => prev.filter((doc) => doc.id !== documentId));
setDocumentTotal((prev) => prev - 1);
// 更新知识库的文档数量
setDatasets((prev) =>
prev.map((ds) =>
ds.id === currentDatasetId
? { ...ds, document_count: ds.document_count - 1 }
: ds
)
);
};
/**
* 处理文档状态变化
*/
const handleDocumentStatusChanged = (documentId: string, enabled: boolean) => {
setDocuments((prev) =>
prev.map((doc) =>
doc.id === documentId ? { ...doc, enabled } : doc
)
);
};
/**
* 刷新文档列表
*/
const handleRefresh = () => {
loadDocuments(currentDatasetId, documentPage);
};
/**
* 处理侧边栏切换
*/
const handleSidebarToggle = () => {
setSidebarCollapsed(!sidebarCollapsed);
};
// 初始化
useEffect(() => {
loadDatasets();
}, []);
// 当选中的知识库变化时，加载文档列表
useEffect(() => {
if (currentDatasetId) {
loadDocuments(currentDatasetId, 1);
}
}, [currentDatasetId]);
// 检查屏幕尺寸
useEffect(() => {
const checkScreenSize = () => {
setIsMobile(window.innerWidth < 992);
};
checkScreenSize();
window.addEventListener('resize', checkScreenSize);
return () => {
window.removeEventListener('resize', checkScreenSize);
};
}, []);
// 获取当前选中的知识库
const currentDataset = datasets.find((ds) => ds.id === currentDatasetId);
// 如果有错误，显示错误页面
if (error && !inited) {
return (
<div className="dataset-manager-container">
<div className="dataset-empty">
<h3>加载失败</h3>
<p>{error}</p>
</div>
</div>
);
}
return (
<Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
{/* 移动端遮罩层 */}
{!sidebarCollapsed && isMobile && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-[999]"
onClick={handleSidebarToggle}
/>
)}
{/* 侧边栏 */}
<DatasetSidebar
collapsed={sidebarCollapsed}
onToggle={handleSidebarToggle}
datasets={datasets}
currentDatasetId={currentDatasetId}
onDatasetSelect={handleDatasetSelect}
loading={loadingDatasets}
/>
{/* 主内容区域 */}
<Layout style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
<Content
style={{
background: colorBgContainer,
display: 'flex',
flexDirection: 'column',
flex: 1,
minHeight: 0,
}}
>
<DocumentList
datasetId={currentDatasetId}
datasetName={currentDataset?.name || ''}
documents={documents}
loading={loadingDocuments}
total={documentTotal}
page={documentPage}
pageSize={documentPageSize}
onPageChange={handlePageChange}
onDocumentDeleted={handleDocumentDeleted}
onDocumentStatusChanged={handleDocumentStatusChanged}
onRefresh={handleRefresh}
/>
</Content>
</Layout>
</Layout>
);
}
app/components/dify-dataset-manager/sidebar.tsx
+160
View File
@@ -0,0 +1,160 @@
import { useState } from 'react';
import { Button, Layout, Menu, theme, Input, Spin } from 'antd';
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
DatabaseOutlined,
SearchOutlined,
FileTextOutlined,
} from '@ant-design/icons';
import type { Dataset } from '~/api/dify-dataset';
import '../../styles/components/dify-dataset-manager/sidebar.css';
const { Sider } = Layout;
interface DatasetSidebarProps {
collapsed: boolean;
onToggle: () => void;
datasets: Dataset[];
currentDatasetId: string;
onDatasetSelect: (datasetId: string) => void;
loading?: boolean;
}
/**
* 知识库侧边栏组件
*/
export default function DatasetSidebar({
collapsed,
onToggle,
datasets,
currentDatasetId,
onDatasetSelect,
loading = false,
}: DatasetSidebarProps) {
const [searchValue, setSearchValue] = useState('');
const {
token: { colorBgContainer },
} = theme.useToken();
// 过滤知识库列表
const filteredDatasets = datasets.filter((ds) =>
ds.name.toLowerCase().includes(searchValue.toLowerCase())
);
// 生成菜单项
const menuItems = filteredDatasets.map((ds) => ({
key: ds.id,
icon: <DatabaseOutlined />,
label: (
<div className="dataset-info">
<span className="dataset-info-name" title={ds.name}>
{ds.name}
</span>
{!collapsed && (
<div className="dataset-info-meta">
<span className="dataset-info-meta-item">
<FileTextOutlined />
{ds.document_count}
</span>
</div>
)}
</div>
),
}));
return (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
width={280}
collapsedWidth={60}
className="dataset-sidebar"
style={{
background: colorBgContainer,
borderRight: '1px solid #f0f0f0',
display: 'flex',
flexDirection: 'column',
height: '100%',
}}
>
{/* 侧边栏头部 */}
<div className="dataset-sidebar-header">
<div className="dataset-sidebar-title">
<Button
type="text"
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
onClick={onToggle}
style={{
fontSize: '16px',
width: 32,
height: 32,
color: 'rgb(0, 104, 74)',
}}
/>
{!collapsed && (
<h3>知识库</h3>
)}
</div>
{/* 搜索框 */}
{!collapsed && (
<Input
placeholder="搜索知识库..."
prefix={<SearchOutlined />}
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
allowClear
/>
)}
</div>
{/* 知识库列表 */}
<div className="dataset-sidebar-list">
{loading ? (
<div className="flex items-center justify-center py-8">
<Spin size="small" />
</div>
) : (
<>
{!collapsed && filteredDatasets.length === 0 && searchValue && (
<div className="p-4 text-center text-gray-500">
<DatabaseOutlined className="text-2xl mb-2" />
<p>未找到相关知识库</p>
</div>
)}
{!collapsed && datasets.length === 0 && !searchValue && (
<div className="p-4 text-center text-gray-500">
<DatabaseOutlined className="text-2xl mb-2" />
<p>暂无知识库</p>
</div>
)}
<Menu
mode="inline"
selectedKeys={[currentDatasetId]}
items={menuItems}
onClick={({ key }) => onDatasetSelect(key)}
style={{
border: 'none',
background: 'transparent',
}}
className="dataset-sidebar-menu"
/>
</>
)}
</div>
{/* 侧边栏底部 */}
{!collapsed && datasets.length > 0 && (
<div className="dataset-sidebar-footer">
<div className="stats-text">
共 {datasets.length} 个知识库
</div>
</div>
)}
</Sider>
);
}
app/components/layout/Sidebar.tsx
+3 -2
View File
@@ -212,9 +212,10 @@ export function Sidebar({ onToggle, collapsed, userRole, frontendJWT = '' }: Sid
// return item.path && item.path.startsWith('/cross-checking')
// }
// 🔑 如果选择了"智慧法务大模型"，只显示 /chat-with-llm 相关菜单
// 🔑 如果选择了"智慧法务大模型"，显示 /chat-with-llm 和 /dataset-manager 相关菜单
if (selectedModuleName === '智慧法务大模型') {
return item.path === '/chat-with-llm' || item.path?.startsWith('/chat-with-llm/');
return item.path === '/chat-with-llm' || item.path?.startsWith('/chat-with-llm/') ||
item.path === '/dataset-manager' || item.path?.startsWith('/dataset-manager/');
}
// 🔑 如果选择了包含"合同"的模块