cc3f3cf033
## Breaking Changes - Remove backward compatibility layer for old action types - StyleContext is no longer exported, use useStyle hook instead ## Major Improvements - **Architecture**: Replace useState with useReducer for complex state management - **Performance**: Add debounced resize handling and batch updates via BATCH_UPDATE action - **DX**: Export useStyle hook and styleActions for type-safe usage - **Memory**: Use useMemo to cache context value and prevent unnecessary re-renders ## Bug Fixes - **UI**: Eliminate padding flicker when navigating to /console/chat* and /console/playground routes - **Logic**: Remove redundant localStorage operations and state synchronization ## Implementation Details - Define ACTION_TYPES and ROUTE_PATTERNS constants for better maintainability - Add comprehensive JSDoc documentation for all functions - Extract custom hooks: useWindowResize, useRouteChange, useMobileSiderAutoHide - Calculate shouldInnerPadding directly in PageLayout based on pathname to prevent async updates - Integrate localStorage saving logic into SET_SIDER_COLLAPSED reducer case - Remove SET_INNER_PADDING action as it's no longer needed ## Updated Components - PageLayout.js: Direct padding calculation based on route - HeaderBar.js: Use new useStyle hook and styleActions - SiderBar.js: Remove redundant localStorage calls - LogsTable.js: Remove unused StyleContext import - Playground/index.js: Migrate to new API ## Performance Impact - Reduced component re-renders through optimized context structure - Eliminated unnecessary effect dependencies and state updates - Improved route transition smoothness with synchronous padding calculation
113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Card,
|
|
Chat,
|
|
Typography,
|
|
Button,
|
|
} from '@douyinfe/semi-ui';
|
|
import {
|
|
MessageSquare,
|
|
Eye,
|
|
EyeOff,
|
|
} from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import CustomInputRender from './CustomInputRender';
|
|
|
|
const ChatArea = ({
|
|
chatRef,
|
|
message,
|
|
inputs,
|
|
styleState,
|
|
showDebugPanel,
|
|
roleInfo,
|
|
onMessageSend,
|
|
onMessageCopy,
|
|
onMessageReset,
|
|
onMessageDelete,
|
|
onStopGenerator,
|
|
onClearMessages,
|
|
onToggleDebugPanel,
|
|
renderCustomChatContent,
|
|
renderChatBoxAction,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
const renderInputArea = React.useCallback((props) => {
|
|
return <CustomInputRender {...props} />;
|
|
}, []);
|
|
|
|
return (
|
|
<Card
|
|
className="h-full"
|
|
bordered={false}
|
|
bodyStyle={{ padding: 0, height: 'calc(100vh - 66px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
|
>
|
|
{/* 聊天头部 */}
|
|
{styleState.isMobile ? (
|
|
<div className="pt-4"></div>
|
|
) : (
|
|
<div className="px-6 py-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-t-2xl">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
|
|
<MessageSquare size={20} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<Typography.Title heading={5} className="!text-white mb-0">
|
|
{t('AI 对话')}
|
|
</Typography.Title>
|
|
<Typography.Text className="!text-white/80 text-sm hidden sm:inline">
|
|
{inputs.model || t('选择模型开始对话')}
|
|
</Typography.Text>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
icon={showDebugPanel ? <EyeOff size={14} /> : <Eye size={14} />}
|
|
onClick={onToggleDebugPanel}
|
|
theme="borderless"
|
|
type="primary"
|
|
size="small"
|
|
className="!rounded-lg !text-white/80 hover:!text-white hover:!bg-white/10"
|
|
>
|
|
{showDebugPanel ? t('隐藏调试') : t('显示调试')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 聊天内容区域 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<Chat
|
|
ref={chatRef}
|
|
chatBoxRenderConfig={{
|
|
renderChatBoxContent: renderCustomChatContent,
|
|
renderChatBoxAction: renderChatBoxAction,
|
|
renderChatBoxTitle: () => null,
|
|
}}
|
|
renderInputArea={renderInputArea}
|
|
roleConfig={roleInfo}
|
|
style={{
|
|
height: '100%',
|
|
maxWidth: '100%',
|
|
overflow: 'hidden'
|
|
}}
|
|
chats={message}
|
|
onMessageSend={onMessageSend}
|
|
onMessageCopy={onMessageCopy}
|
|
onMessageReset={onMessageReset}
|
|
onMessageDelete={onMessageDelete}
|
|
showClearContext
|
|
showStopGenerate
|
|
onStopGenerator={onStopGenerator}
|
|
onClear={onClearMessages}
|
|
className="h-full"
|
|
placeholder={t('请输入您的问题...')}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ChatArea;
|