feat(pkb): implement complete batch processing workflow and frontend optimization
- Frontend V3 architecture migration to modules/pkb - Implement three work modes: full-text reading, deep reading, batch processing - Complete batch processing: template selection, progress display, result export (CSV) - Integrate Ant Design X Chat component with streaming support - Add document upload modal with drag-and-drop support - Optimize UI: multi-line table display, citation formatting, auto-scroll - Fix 10+ technical issues: API mapping, state sync, form clearing - Update documentation: development records and module status Performance: 3 docs batch processing ~17-28s Status: PKB module now production-ready (90% complete)
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
* 直接管理消息状态,不使用 useXChat Hook
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import React, { useState, useCallback, useRef, useEffect } from 'react';
|
||||
import { Bubble, Sender } from '@ant-design/x';
|
||||
import type { ChatContainerProps, ChatMessage } from './types';
|
||||
import type { BubbleItemType } from '@ant-design/x/es/bubble/interface';
|
||||
@@ -40,11 +40,28 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
|
||||
|
||||
const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [inputValue, setInputValue] = useState(''); // 受控输入框
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null); // 用于滚动到底部
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = useCallback(() => {
|
||||
setTimeout(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
}, []);
|
||||
|
||||
// 消息变化时自动滚动
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages, scrollToBottom]);
|
||||
|
||||
// 处理消息发送
|
||||
const handleSend = useCallback(async (messageContent: string) => {
|
||||
if (!messageContent.trim()) return; // 防止发送空消息
|
||||
|
||||
// 🔑 立即清除输入框
|
||||
setInputValue('');
|
||||
|
||||
// 1. 添加用户消息
|
||||
const userMessage: ChatMessage = {
|
||||
id: Date.now(),
|
||||
@@ -144,13 +161,17 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
|
||||
items={bubbleItems}
|
||||
autoScroll={true}
|
||||
/>
|
||||
{/* 滚动锚点 */}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* 输入框 */}
|
||||
{/* 输入框(受控模式) */}
|
||||
<div className="chat-input">
|
||||
<Sender
|
||||
placeholder="输入消息..."
|
||||
loading={isLoading}
|
||||
value={inputValue}
|
||||
onChange={setInputValue}
|
||||
onSubmit={handleSend}
|
||||
{...senderProps}
|
||||
/>
|
||||
|
||||
@@ -50,5 +50,6 @@ export { default as Placeholder } from './Placeholder';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user