feat:前端新增初版知识库管理页面
This commit is contained in:
PingChuan
@@ -1,112 +1,22 @@
|
||||
/**
|
||||
* Dify 服务端 API 模块
|
||||
* Dify Chat API 模块
|
||||
*
|
||||
* 提供 Node.js 服务端调用 FastAPI 后端的函数
|
||||
* 提供客户端调用 Dify API 的函数
|
||||
* 用于 Remix loader/action 中调用 Dify API
|
||||
*
|
||||
* 调用链路：
|
||||
* Remix Server → FastAPI /dify/* → Dify
|
||||
*
|
||||
* @module api/dify/client.server
|
||||
* @module api/dify/chat
|
||||
*/
|
||||
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
import { difyFetch } from './client.server';
|
||||
|
||||
// ============================================================================
|
||||
// 配置
|
||||
// Dify Chat API 客户端
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取环境变量的服务端函数
|
||||
*/
|
||||
const getServerEnvVar = (name: string, defaultValue: string = ''): string => {
|
||||
return process.env[name] || defaultValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Dify API 客户端配置
|
||||
* 通过 FastAPI 后端的 /dify 路由代理访问 Dify
|
||||
*/
|
||||
const DIFY_CONFIG = {
|
||||
API_URL: `${API_BASE_URL}/dify`,
|
||||
API_KEY: getServerEnvVar('NEXT_PUBLIC_APP_KEY', ''),
|
||||
APP_ID: (() => {
|
||||
const rawAppId = getServerEnvVar('NEXT_PUBLIC_APP_ID', '');
|
||||
const match = rawAppId.match(/\/app\/([a-f0-9-]{36})/);
|
||||
return match ? match[1] : rawAppId;
|
||||
})(),
|
||||
};
|
||||
|
||||
console.log('🔧 [Dify Server] 配置:', {
|
||||
apiUrl: DIFY_CONFIG.API_URL,
|
||||
apiBaseUrl: API_BASE_URL,
|
||||
appId: DIFY_CONFIG.APP_ID,
|
||||
configComplete: !!(DIFY_CONFIG.API_URL && DIFY_CONFIG.APP_ID)
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// 基础请求函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Dify API 基础请求函数
|
||||
* Dify Chat API 客户端
|
||||
*
|
||||
* 使用 JWT 认证通过 FastAPI 代理访问 Dify
|
||||
*
|
||||
* @param endpoint - API 端点路径
|
||||
* @param options - fetch 请求选项
|
||||
* @param jwt - JWT 认证令牌
|
||||
* @returns Response 对象
|
||||
*/
|
||||
async function difyFetch(
|
||||
endpoint: string,
|
||||
options: RequestInit = {},
|
||||
jwt?: string
|
||||
): Promise<Response> {
|
||||
const url = `${DIFY_CONFIG.API_URL}/${endpoint.replace(/^\//, '')}`;
|
||||
|
||||
const headers: HeadersInit = {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
if (jwt) {
|
||||
(headers as Record<string, string>)['Authorization'] = `Bearer ${jwt}`;
|
||||
} else {
|
||||
console.warn('⚠️ [Dify Server] 没有提供 JWT，请求可能失败');
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('❌ [Dify Server] Dify API 错误:', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
error: errorText
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
throw new Error('JWT认证失败，请重新登录');
|
||||
}
|
||||
|
||||
throw new Error(`Dify API Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Dify API 客户端
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Dify 服务端 API 客户端
|
||||
*
|
||||
* 所有方法都需要传入 JWT 进行认证
|
||||
* user 参数由后端自动从 JWT 中提取
|
||||
*/
|
||||
export const difyClient = {
|
||||
@@ -187,7 +97,7 @@ export const difyClient = {
|
||||
return response;
|
||||
}
|
||||
|
||||
console.log('[Dify Server] 解析 JSON 响应');
|
||||
console.log('[Dify Chat] 解析 JSON 响应');
|
||||
return response.json();
|
||||
},
|
||||
|
||||
@@ -216,7 +126,7 @@ export const difyClient = {
|
||||
* 删除会话
|
||||
*/
|
||||
async deleteConversation(conversationId: string, jwt?: string): Promise<any> {
|
||||
console.log('remix后端接收到删除请求,调用fastapi:', conversationId);
|
||||
console.log('[Dify Chat] 删除会话:', conversationId);
|
||||
|
||||
try {
|
||||
const response = await difyFetch(`conversations/${conversationId}`, {
|
||||
@@ -224,10 +134,9 @@ export const difyClient = {
|
||||
body: JSON.stringify({}),
|
||||
}, jwt);
|
||||
|
||||
|
||||
// 对于 204 No Content 响应，直接返回成功
|
||||
if (response.status === 204) {
|
||||
console.log('删除会话' + conversationId + '成功');
|
||||
console.log('[Dify Chat] 删除会话成功:', conversationId);
|
||||
return { result: 'success' };
|
||||
}
|
||||
|
||||
@@ -235,16 +144,15 @@ export const difyClient = {
|
||||
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const data = await response.json();
|
||||
console.log('🗑️ [Dify Server] 删除会话 JSON 响应:', data);
|
||||
return data;
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
console.log('🗑️ [Dify Server] 删除会话文本响应:', text);
|
||||
console.log('[Dify Chat] 删除会话文本响应:', text);
|
||||
|
||||
return { result: 'success' };
|
||||
} catch (error: any) {
|
||||
console.warn('⚠️ [Dify Server] 删除会话请求失败，但可能已成功删除:', error.message);
|
||||
console.warn('[Dify Chat] 删除会话请求失败，但可能已成功删除:', error.message);
|
||||
return { result: 'success' };
|
||||
}
|
||||
},
|
||||
@@ -268,17 +176,3 @@ export const difyClient = {
|
||||
return response.json();
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// 工具函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Dify 工具函数
|
||||
*/
|
||||
export const difyUtils = {
|
||||
/**
|
||||
* 获取 Dify 配置
|
||||
*/
|
||||
getConfig: () => DIFY_CONFIG,
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* Dify 服务端基础 API 模块
|
||||
*
|
||||
* 提供 Node.js 服务端调用 FastAPI 后端的基础功能
|
||||
* 包括配置管理和基础请求函数
|
||||
*
|
||||
* 调用链路：
|
||||
* Remix Server → FastAPI /dify/* → Dify
|
||||
*
|
||||
* @module api/dify/client.server
|
||||
*/
|
||||
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
|
||||
// ============================================================================
|
||||
// 配置
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取环境变量的服务端函数
|
||||
*/
|
||||
const getServerEnvVar = (name: string, defaultValue: string = ''): string => {
|
||||
return process.env[name] || defaultValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* Dify API 客户端配置
|
||||
* 通过 FastAPI 后端的 /dify 路由代理访问 Dify
|
||||
*/
|
||||
const DIFY_CONFIG = {
|
||||
API_URL: `${API_BASE_URL}/dify_chat`,
|
||||
API_KEY: getServerEnvVar('NEXT_PUBLIC_APP_KEY', ''),
|
||||
APP_ID: (() => {
|
||||
const rawAppId = getServerEnvVar('NEXT_PUBLIC_APP_ID', '');
|
||||
const match = rawAppId.match(/\/app\/([a-f0-9-]{36})/);
|
||||
return match ? match[1] : rawAppId;
|
||||
})(),
|
||||
};
|
||||
|
||||
console.log('[Dify Server] 配置:', {
|
||||
apiUrl: DIFY_CONFIG.API_URL,
|
||||
apiBaseUrl: API_BASE_URL,
|
||||
appId: DIFY_CONFIG.APP_ID,
|
||||
configComplete: !!(DIFY_CONFIG.API_URL && DIFY_CONFIG.APP_ID)
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// 基础请求函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Dify API 基础请求函数
|
||||
*
|
||||
* 使用 JWT 认证通过 FastAPI 代理访问 Dify
|
||||
*
|
||||
* @param endpoint - API 端点路径
|
||||
* @param options - fetch 请求选项
|
||||
* @param jwt - JWT 认证令牌
|
||||
* @returns Response 对象
|
||||
*/
|
||||
export async function difyFetch(
|
||||
endpoint: string,
|
||||
options: RequestInit = {},
|
||||
jwt?: string
|
||||
): Promise<Response> {
|
||||
const url = `${DIFY_CONFIG.API_URL}/${endpoint.replace(/^\//, '')}`;
|
||||
|
||||
const headers: HeadersInit = {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
if (jwt) {
|
||||
(headers as Record<string, string>)['Authorization'] = `Bearer ${jwt}`;
|
||||
} else {
|
||||
console.warn('[Dify Server] 没有提供 JWT，转发fastapi请求可能失败');
|
||||
}
|
||||
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('[Dify Server] API 转发错误:', {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
error: errorText
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
throw new Error('JWT认证失败，请重新登录');
|
||||
}
|
||||
|
||||
throw new Error(`Dify API Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 工具函数
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Dify 工具函数
|
||||
*/
|
||||
export const difyUtils = {
|
||||
/**
|
||||
* 获取 Dify 配置
|
||||
*/
|
||||
getConfig: () => DIFY_CONFIG,
|
||||
};
|
||||
|
||||
// 重新导出 chat 模块的 difyClient
|
||||
export { difyClient } from './chat';
|
||||
@@ -0,0 +1,300 @@
|
||||
/**
|
||||
* Dify Dataset 客户端 API 模块
|
||||
*
|
||||
* 提供浏览器端调用 Dify 知识库 API 的函数
|
||||
* 通过 Remix API Routes 代理请求
|
||||
*
|
||||
* @module api/dify-dataset/client
|
||||
*/
|
||||
|
||||
import axios from 'axios';
|
||||
import type {
|
||||
DatasetsResponse,
|
||||
DocumentsResponse,
|
||||
SegmentsResponse,
|
||||
Document,
|
||||
OperationResult,
|
||||
} from './types';
|
||||
|
||||
// ============================================================================
|
||||
// 基础配置
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* API 基础 URL
|
||||
* 指向 Remix API Routes（/api/dataset/*）
|
||||
*/
|
||||
const API_URL = '/api/dataset';
|
||||
|
||||
// ============================================================================
|
||||
// 知识库 API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取知识库列表
|
||||
*
|
||||
* @param page - 页码，默认 1
|
||||
* @param limit - 每页数量，默认 20
|
||||
* @returns 知识库列表响应
|
||||
*/
|
||||
export async function fetchDatasets(
|
||||
page: number = 1,
|
||||
limit: number = 20
|
||||
): Promise<DatasetsResponse> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
const response = await axios.get<DatasetsResponse>(
|
||||
`${API_URL}/datasets?${params}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取单个知识库详情
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @returns 知识库详情
|
||||
*/
|
||||
export async function fetchDataset(datasetId: string): Promise<any> {
|
||||
const response = await axios.get(
|
||||
`${API_URL}/datasets/${datasetId}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 文档 API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取知识库文档列表
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param page - 页码，默认 1
|
||||
* @param limit - 每页数量，默认 20
|
||||
* @param keyword - 搜索关键词
|
||||
* @returns 文档列表响应
|
||||
*/
|
||||
export async function fetchDocuments(
|
||||
datasetId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<DocumentsResponse> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
if (keyword) {
|
||||
params.append('keyword', keyword);
|
||||
}
|
||||
|
||||
console.log('[Dataset Client] 获取文档列表:', { datasetId, page, limit, keyword });
|
||||
|
||||
const response = await axios.get<DocumentsResponse>(
|
||||
`${API_URL}/datasets/${datasetId}/documents?${params}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取单个文档详情
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @returns 文档详情
|
||||
*/
|
||||
export async function fetchDocument(
|
||||
datasetId: string,
|
||||
documentId: string
|
||||
): Promise<Document> {
|
||||
const response = await axios.get<Document>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文档
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @returns 操作结果
|
||||
*/
|
||||
export async function deleteDocument(
|
||||
datasetId: string,
|
||||
documentId: string
|
||||
): Promise<OperationResult> {
|
||||
console.log('[Dataset Client] 删除文档:', { datasetId, documentId });
|
||||
|
||||
const response = await axios.delete<OperationResult>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用/禁用文档
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @param enabled - 是否启用
|
||||
* @returns 操作结果
|
||||
*/
|
||||
export async function toggleDocumentStatus(
|
||||
datasetId: string,
|
||||
documentId: string,
|
||||
enabled: boolean
|
||||
): Promise<OperationResult> {
|
||||
console.log('[Dataset Client] 切换文档状态:', { datasetId, documentId, enabled });
|
||||
|
||||
const response = await axios.patch<OperationResult>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}/status`,
|
||||
{ enabled },
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 文档分段 API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 获取文档分段列表
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @param page - 页码，默认 1
|
||||
* @param limit - 每页数量，默认 20
|
||||
* @param keyword - 搜索关键词
|
||||
* @returns 分段列表响应
|
||||
*/
|
||||
export async function fetchSegments(
|
||||
datasetId: string,
|
||||
documentId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<SegmentsResponse> {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
});
|
||||
|
||||
if (keyword) {
|
||||
params.append('keyword', keyword);
|
||||
}
|
||||
|
||||
console.log('[Dataset Client] 获取分段列表:', { datasetId, documentId, page, limit });
|
||||
|
||||
const response = await axios.get<SegmentsResponse>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}/segments?${params}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除分段
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @param segmentId - 分段 ID
|
||||
* @returns 操作结果
|
||||
*/
|
||||
export async function deleteSegment(
|
||||
datasetId: string,
|
||||
documentId: string,
|
||||
segmentId: string
|
||||
): Promise<OperationResult> {
|
||||
console.log('[Dataset Client] 删除分段:', { datasetId, documentId, segmentId });
|
||||
|
||||
const response = await axios.delete<OperationResult>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`,
|
||||
{ withCredentials: true }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 启用/禁用分段
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param documentId - 文档 ID
|
||||
* @param segmentId - 分段 ID
|
||||
* @param enabled - 是否启用
|
||||
* @returns 操作结果
|
||||
*/
|
||||
export async function toggleSegmentStatus(
|
||||
datasetId: string,
|
||||
documentId: string,
|
||||
segmentId: string,
|
||||
enabled: boolean
|
||||
): Promise<OperationResult> {
|
||||
const response = await axios.patch<OperationResult>(
|
||||
`${API_URL}/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/status`,
|
||||
{ enabled },
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 文件上传 API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 上传文件到知识库
|
||||
*
|
||||
* @param datasetId - 知识库 ID
|
||||
* @param file - 文件对象
|
||||
* @param onProgress - 上传进度回调
|
||||
* @returns 创建的文档信息
|
||||
*/
|
||||
export async function uploadDocument(
|
||||
datasetId: string,
|
||||
file: File,
|
||||
onProgress?: (percent: number) => void
|
||||
): Promise<any> {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('data', JSON.stringify({
|
||||
indexing_technique: 'high_quality',
|
||||
process_rule: {
|
||||
mode: 'automatic',
|
||||
},
|
||||
}));
|
||||
|
||||
console.log('[Dataset Client] 上传文档:', { datasetId, fileName: file.name });
|
||||
|
||||
const response = await axios.post(
|
||||
`${API_URL}/datasets/${datasetId}/documents/create-by-file`,
|
||||
formData,
|
||||
{
|
||||
withCredentials: true,
|
||||
onUploadProgress: (progressEvent) => {
|
||||
if (progressEvent.total && onProgress) {
|
||||
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
||||
onProgress(percent);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Dify Dataset API 模块统一导出
|
||||
*
|
||||
* @module api/dify-dataset
|
||||
*/
|
||||
|
||||
// 类型导出
|
||||
export type {
|
||||
Dataset,
|
||||
DatasetsResponse,
|
||||
Document,
|
||||
DocumentsResponse,
|
||||
Segment,
|
||||
SegmentsResponse,
|
||||
IndexingStatus,
|
||||
OperationResult,
|
||||
CreateDocumentResponse,
|
||||
UploadProgress,
|
||||
} from './types';
|
||||
|
||||
// 客户端 API 导出
|
||||
export {
|
||||
// 知识库
|
||||
fetchDatasets,
|
||||
fetchDataset,
|
||||
// 文档
|
||||
fetchDocuments,
|
||||
fetchDocument,
|
||||
deleteDocument,
|
||||
toggleDocumentStatus,
|
||||
uploadDocument,
|
||||
// 分段
|
||||
fetchSegments,
|
||||
deleteSegment,
|
||||
toggleSegmentStatus,
|
||||
} from './client';
|
||||
@@ -0,0 +1,167 @@
|
||||
/**
|
||||
* Dify Dataset API 类型定义
|
||||
*
|
||||
* @module api/dify-dataset/types
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// 知识库类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 知识库信息
|
||||
*/
|
||||
export interface Dataset {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
permission: 'only_me' | 'all_team_members';
|
||||
data_source_type: 'upload_file' | 'notion_import' | 'website_crawl';
|
||||
indexing_technique: 'high_quality' | 'economy';
|
||||
app_count: number;
|
||||
document_count: number;
|
||||
word_count: number;
|
||||
created_by: string;
|
||||
created_at: number;
|
||||
updated_by: string;
|
||||
updated_at: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 知识库列表响应
|
||||
*/
|
||||
export interface DatasetsResponse {
|
||||
data: Dataset[];
|
||||
has_more: boolean;
|
||||
limit: number;
|
||||
total: number;
|
||||
page: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 文档类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 文档索引状态
|
||||
*/
|
||||
export type IndexingStatus =
|
||||
| 'waiting'
|
||||
| 'parsing'
|
||||
| 'cleaning'
|
||||
| 'splitting'
|
||||
| 'indexing'
|
||||
| 'paused'
|
||||
| 'error'
|
||||
| 'completed';
|
||||
|
||||
/**
|
||||
* 文档信息
|
||||
*/
|
||||
export interface Document {
|
||||
id: string;
|
||||
position: number;
|
||||
data_source_type: 'upload_file' | 'notion_import' | 'website_crawl';
|
||||
data_source_info: {
|
||||
upload_file_id?: string;
|
||||
notion_page_id?: string;
|
||||
website_url?: string;
|
||||
};
|
||||
dataset_process_rule_id: string;
|
||||
name: string;
|
||||
created_from: string;
|
||||
created_by: string;
|
||||
created_at: number;
|
||||
tokens: number;
|
||||
indexing_status: IndexingStatus;
|
||||
error?: string;
|
||||
enabled: boolean;
|
||||
disabled_at?: number;
|
||||
disabled_by?: string;
|
||||
archived: boolean;
|
||||
display_status: string;
|
||||
word_count: number;
|
||||
hit_count: number;
|
||||
doc_form: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档列表响应
|
||||
*/
|
||||
export interface DocumentsResponse {
|
||||
data: Document[];
|
||||
has_more: boolean;
|
||||
limit: number;
|
||||
total: number;
|
||||
page: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 文档分段类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 文档分段
|
||||
*/
|
||||
export interface Segment {
|
||||
id: string;
|
||||
position: number;
|
||||
document_id: string;
|
||||
content: string;
|
||||
answer?: string;
|
||||
word_count: number;
|
||||
tokens: number;
|
||||
keywords: string[];
|
||||
index_node_id: string;
|
||||
index_node_hash: string;
|
||||
hit_count: number;
|
||||
enabled: boolean;
|
||||
disabled_at?: number;
|
||||
disabled_by?: string;
|
||||
status: 'waiting' | 'completed' | 'error' | 'indexing';
|
||||
created_by: string;
|
||||
created_at: number;
|
||||
indexing_at?: number;
|
||||
completed_at?: number;
|
||||
error?: string;
|
||||
stopped_at?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分段列表响应
|
||||
*/
|
||||
export interface SegmentsResponse {
|
||||
data: Segment[];
|
||||
has_more: boolean;
|
||||
limit: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 操作响应类型
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* 通用操作结果
|
||||
*/
|
||||
export interface OperationResult {
|
||||
result: 'success' | 'error';
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建文档响应
|
||||
*/
|
||||
export interface CreateDocumentResponse {
|
||||
document: Document;
|
||||
batch: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档上传进度
|
||||
*/
|
||||
export interface UploadProgress {
|
||||
loaded: number;
|
||||
total: number;
|
||||
percent: number;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
+219
-219
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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/');
|
||||
}
|
||||
|
||||
// 🔑 如果选择了包含"合同"的模块
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { AppInfo } from '~/api/dify';
|
||||
|
||||
// 在客户端获取环境变量的辅助函数
|
||||
const getEnvVar = (name: string, defaultValue: string = '') => {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useBoolean, useGetState } from 'ahooks';
|
||||
import { produce } from 'immer';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import { sendChatMessage, updateFeedback, generateConversationName } from '~/api/dify';
|
||||
import type { ChatItem, Feedbacktype, MessageEnd, MessageReplace, VisionFile } from '~/api/dify';
|
||||
import type { ChatItem, Feedbacktype, MessageEnd, MessageReplace, VisionFile } from '~/api/dify-chat';
|
||||
import { generateConversationName, sendChatMessage, updateFeedback } from '~/api/dify-chat';
|
||||
|
||||
/**
|
||||
* 聊天消息处理钩子
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useParams } from '@remix-run/react';
|
||||
import { useGetState } from 'ahooks';
|
||||
import { produce } from 'immer';
|
||||
import { useGetState, useLocalStorageState } from 'ahooks';
|
||||
import type { ConversationItem } from '~/api/dify';
|
||||
import { useState } from 'react';
|
||||
import type { ConversationItem } from '~/api/dify-chat';
|
||||
import { CHAT_CONFIG } from '../config/chat';
|
||||
|
||||
// 本地存储键名
|
||||
@@ -145,7 +145,7 @@ export default function useConversation() {
|
||||
console.error('❌ [useConversation] 保存会话ID到本地存储失败:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置新会话输入
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { getSessionInfo } from '../utils/session.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
|
||||
/**
|
||||
* GET /api/chat-messages - 获取会话消息列表
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { json, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { getSessionInfo, commitSession } from '../utils/session.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
import { commitSession, getSessionInfo } from '../utils/session.server';
|
||||
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { json, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { getSessionInfo, commitSession } from '../utils/session.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
import { commitSession, getSessionInfo } from '../utils/session.server';
|
||||
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { json, type LoaderFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { getSessionInfo, commitSession } from '../utils/session.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
import { commitSession, getSessionInfo } from '../utils/session.server';
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
try {
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* PATCH /api/dataset/datasets/:datasetId/documents/:documentId/status - 切换文档状态
|
||||
*/
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (!frontendJWT) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const { datasetId, documentId } = params;
|
||||
if (!datasetId || !documentId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: '缺少必要参数' }),
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const { enabled } = body;
|
||||
|
||||
console.log('[API] Toggle Document Status:', { datasetId, documentId, enabled });
|
||||
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}/status`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
body: JSON.stringify({ enabled }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Toggle Document Status - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to toggle status' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* GET /api/dataset/datasets/:datasetId/documents/:documentId - 获取文档详情
|
||||
*/
|
||||
export async function loader({ request, params }: LoaderFunctionArgs) {
|
||||
try {
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (!frontendJWT) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const { datasetId, documentId } = params;
|
||||
if (!datasetId || !documentId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: '缺少必要参数' }),
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
console.log('[API] Document Detail:', { datasetId, documentId });
|
||||
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Document Detail - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to get document' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE /api/dataset/datasets/:datasetId/documents/:documentId - 删除文档
|
||||
*/
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (!frontendJWT) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const { datasetId, documentId } = params;
|
||||
if (!datasetId || !documentId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: '缺少必要参数' }),
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const method = request.method;
|
||||
|
||||
if (method === 'DELETE') {
|
||||
console.log('[API] Delete Document:', { datasetId, documentId });
|
||||
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/${documentId}`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
// 处理 204 No Content
|
||||
if (response.status === 204) {
|
||||
return new Response(
|
||||
JSON.stringify({ result: 'success' }),
|
||||
{ status: 200, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'Method not allowed' }),
|
||||
{ status: 405, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Document Action - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to process request' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { type LoaderFunctionArgs, type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* GET /api/dataset/datasets/:datasetId/documents - 获取文档列表
|
||||
*/
|
||||
export async function loader({ request, params }: LoaderFunctionArgs) {
|
||||
try {
|
||||
// 获取用户会话信息和 JWT
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (!frontendJWT) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const { datasetId } = params;
|
||||
if (!datasetId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: '缺少 datasetId 参数' }),
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
// 获取查询参数
|
||||
const url = new URL(request.url);
|
||||
const page = url.searchParams.get('page') || '1';
|
||||
const limit = url.searchParams.get('limit') || '20';
|
||||
const keyword = url.searchParams.get('keyword') || '';
|
||||
|
||||
console.log('[API] Documents List:', { datasetId, page, limit, keyword });
|
||||
|
||||
// 构建查询参数
|
||||
const queryParams = new URLSearchParams({ page, limit });
|
||||
if (keyword) queryParams.append('keyword', keyword);
|
||||
|
||||
// 转发请求到 FastAPI
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents?${queryParams}`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Documents List - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to get documents' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/dataset/datasets/:datasetId/documents - 创建文档（上传文件）
|
||||
*/
|
||||
export async function action({ request, params }: ActionFunctionArgs) {
|
||||
try {
|
||||
// 获取用户会话信息和 JWT
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (!frontendJWT) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
const { datasetId } = params;
|
||||
if (!datasetId) {
|
||||
return new Response(
|
||||
JSON.stringify({ error: '缺少 datasetId 参数' }),
|
||||
{ status: 400, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
// 获取表单数据
|
||||
const formData = await request.formData();
|
||||
|
||||
console.log('[API] Upload Document:', { datasetId });
|
||||
|
||||
// 转发请求到 FastAPI
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets/${datasetId}/documents/create-by-file`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Upload Document - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to upload document' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { type LoaderFunctionArgs } from '@remix-run/node';
|
||||
import { API_BASE_URL } from '~/config/api-config';
|
||||
|
||||
/**
|
||||
* GET /api/dataset/datasets - 获取知识库列表
|
||||
*/
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
try {
|
||||
// 获取用户会话信息和 JWT
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
// 检查 JWT 是否存在
|
||||
if (!frontendJWT) {
|
||||
console.error('[API] Dataset List - JWT不存在');
|
||||
return new Response(
|
||||
JSON.stringify({ error: 'JWT认证失败，请重新登录' }),
|
||||
{
|
||||
status: 401,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 获取查询参数
|
||||
const url = new URL(request.url);
|
||||
const page = url.searchParams.get('page') || '1';
|
||||
const limit = url.searchParams.get('limit') || '20';
|
||||
|
||||
console.log('[API] Dataset List - 获取知识库列表:', { page, limit });
|
||||
|
||||
// 转发请求到 FastAPI
|
||||
const apiUrl = `${API_BASE_URL}/dify-dataset/datasets?page=${page}&limit=${limit}`;
|
||||
const response = await fetch(apiUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${frontendJWT}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
console.log('[API] Dataset List - Success');
|
||||
return new Response(JSON.stringify(data), {
|
||||
status: response.status,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('[API] Dataset List - Error:', error.message);
|
||||
return new Response(
|
||||
JSON.stringify({ error: error.message || 'Failed to get datasets' }),
|
||||
{
|
||||
status: 500,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { type ActionFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
|
||||
/**
|
||||
* POST /api/messages/:messageId/feedbacks - 提交消息反馈
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { json, type LoaderFunctionArgs } from '@remix-run/node';
|
||||
import { difyClient } from '~/api/dify/client.server';
|
||||
import { getSessionInfo, commitSession } from '../utils/session.server';
|
||||
import { difyClient } from '~/api/dify-chat/client.server';
|
||||
import { commitSession, getSessionInfo } from '../utils/session.server';
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
try {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { json } from "@remix-run/node";
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
import Chat from "~/components/chat";
|
||||
import Chat from "~/components/dify-chat";
|
||||
import chatIndexStyles from "~/styles/components/chat-with-llm/index.css?url";
|
||||
import chatMessageStyles from "~/styles/components/chat-with-llm/chat-message.css?url";
|
||||
import chatInputStyles from "~/styles/components/chat-with-llm/chat-input.css?url";
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import DatasetManager from "~/components/dify-dataset-manager";
|
||||
import datasetManagerStyles from "~/styles/components/dify-dataset-manager/index.css?url";
|
||||
import sidebarStyles from "~/styles/components/dify-dataset-manager/sidebar.css?url";
|
||||
import documentListStyles from "~/styles/components/dify-dataset-manager/document-list.css?url";
|
||||
|
||||
/**
|
||||
* 注册样式
|
||||
*/
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: datasetManagerStyles },
|
||||
{ rel: "stylesheet", href: sidebarStyles },
|
||||
{ rel: "stylesheet", href: documentListStyles },
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 知识库管理首页
|
||||
*/
|
||||
export default function DatasetManagerIndex() {
|
||||
return (
|
||||
<div className="dataset-manager-page" style={{ height: '93vh', padding: '16px' }}>
|
||||
<DatasetManager />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Outlet } from "@remix-run/react";
|
||||
import type { MetaFunction } from "@remix-run/node";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "知识库管理 - 智能审核系统" },
|
||||
{ name: "description", content: "Dify 知识库文档管理" },
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "知识库管理",
|
||||
};
|
||||
|
||||
/**
|
||||
* 知识库管理布局路由
|
||||
*/
|
||||
export default function DatasetManagerLayout() {
|
||||
return <Outlet />;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* åÆ“¡h - ‡ch7
|
||||
*/
|
||||
|
||||
/* åw */
|
||||
.document-list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.document-list-search {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.document-list-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* h<7 */
|
||||
.document-table {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.document-table .ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.document-table .ant-table-tbody > tr:hover > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ‡c
|
||||
ð */
|
||||
.document-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.document-name-cell .anticon {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.document-name-cell span {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ¶~ */
|
||||
.document-status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Í\ ® */
|
||||
.document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* z¶ */
|
||||
.document-list-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
/* Í”@ */
|
||||
@media (max-width: 991px) {
|
||||
.document-list-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.document-list-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.document-list-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/**
|
||||
* åÆ“¡h - ;@7
|
||||
*/
|
||||
|
||||
.dataset-manager-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f5f7f9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dataset-manager-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
background-color: #f5f7f9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* z¶¹h */
|
||||
.dataset-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dataset-empty h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dataset-empty p {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* }¶¹h */
|
||||
.dataset-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* ;…¹:ß */
|
||||
.dataset-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 20px 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 4è:ß */
|
||||
.dataset-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dataset-header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dataset-header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Í”@ */
|
||||
@media (max-width: 991px) {
|
||||
.dataset-manager-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dataset-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dataset-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dataset-header-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/**
|
||||
* 知识库管理器 - 侧边栏样式
|
||||
*/
|
||||
|
||||
.dataset-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dataset-sidebar .ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 侧边栏头部 */
|
||||
.dataset-sidebar-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dataset-sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dataset-sidebar-title h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 知识库列表 */
|
||||
.dataset-sidebar-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 菜单样式覆盖 */
|
||||
.dataset-sidebar-menu.ant-menu {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dataset-sidebar-menu .ant-menu-item {
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.dataset-sidebar-menu .ant-menu-item-selected {
|
||||
background-color: rgba(0, 104, 74, 0.1) !important;
|
||||
}
|
||||
|
||||
.dataset-sidebar-menu .ant-menu-item-selected::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dataset-sidebar-menu .ant-menu-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 知识库信息 */
|
||||
.dataset-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dataset-info-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dataset-info-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dataset-info-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dataset-info-meta-item .anticon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 侧边栏底部 */
|
||||
.dataset-sidebar-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.stats-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 991px) {
|
||||
.dataset-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
height: 100vh;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dataset-sidebar.ant-layout-sider-collapsed {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { PromptVariable, ThoughtItem, UserInputFormItem, VisionFile } from '~/api/dify';
|
||||
import type { PromptVariable, ThoughtItem, UserInputFormItem, VisionFile } from '~/api/dify-chat';
|
||||
|
||||
/**
|
||||
* 替换提示模板中的变量
|
||||
|
||||
Reference in New Issue
Block a user