64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { useRef, useEffect } from 'react';
|
|
import { ChatMessage } from '../../types/workbench';
|
|
import { MessageBubble } from './MessageBubble';
|
|
|
|
export interface MessageStreamProps {
|
|
messages: ChatMessage[];
|
|
onOpenCase?: (docId: string) => void;
|
|
onCardAction?: (cardId: string, actionId: string, payload?: any) => void;
|
|
onErrorAction?: (messageId: string, action: 'retry' | 'continue' | 'restart') => void;
|
|
}
|
|
|
|
export const MessageStream: React.FC<MessageStreamProps> = ({
|
|
messages,
|
|
onOpenCase,
|
|
onCardAction,
|
|
onErrorAction,
|
|
}) => {
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [messages]);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
overflowY: 'auto',
|
|
padding: '16px 0',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{messages.length === 0 ? (
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'var(--text-faint)',
|
|
gap: '8px',
|
|
fontSize: '13px',
|
|
}}
|
|
>
|
|
<span>暂无对话记录，请在下方发送立项需求</span>
|
|
</div>
|
|
) : (
|
|
messages.map((msg) => (
|
|
<MessageBubble
|
|
key={msg.id}
|
|
message={msg}
|
|
onOpenCase={onOpenCase}
|
|
onCardAction={onCardAction}
|
|
onErrorAction={onErrorAction}
|
|
/>
|
|
))
|
|
)}
|
|
<div ref={bottomRef} style={{ height: '1px' }} />
|
|
</div>
|
|
);
|
|
};
|