55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import { Message, Video } from '@/types/ask';
|
|
import { MaterialItem } from '@/types/personal-info';
|
|
import React, { Dispatch, ForwardedRef, forwardRef, memo, SetStateAction, useCallback, useMemo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
FlatList,
|
|
FlatListProps,
|
|
SafeAreaView
|
|
} from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import MessageItem from './aiChat';
|
|
|
|
// 继承 FlatListProps 来接收所有 FlatList 的属性
|
|
interface ChatProps extends Omit<FlatListProps<Message>, 'data' | 'renderItem'> {
|
|
userMessages: Message[];
|
|
sessionId: string;
|
|
setSelectedImages: Dispatch<SetStateAction<string[]>>;
|
|
selectedImages: string[];
|
|
}
|
|
|
|
function ChatComponent(
|
|
{ userMessages, sessionId, setSelectedImages, selectedImages, ...restProps }: ChatProps,
|
|
ref: ForwardedRef<FlatList<Message>>
|
|
) {
|
|
const insets = useSafeAreaInsets();
|
|
const [modalVisible, setModalVisible] = React.useState({ visible: false, data: {} as Video | MaterialItem });
|
|
const { t } = useTranslation();
|
|
const keyExtractor = useCallback((item: Message) => `${item.role}-${item.timestamp}`, []);
|
|
|
|
const contentContainerStyle = useMemo(() => ({ padding: 16, flexGrow: 1 }), []);
|
|
|
|
const [modalDetailsVisible, setModalDetailsVisible] = useState<boolean>(false);
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<FlatList
|
|
ref={ref}
|
|
data={userMessages}
|
|
keyExtractor={keyExtractor}
|
|
renderItem={({ item }) => MessageItem({ t, setSelectedImages, selectedImages, insets, item, sessionId, modalVisible, setModalVisible, setModalDetailsVisible, modalDetailsVisible })}
|
|
contentContainerStyle={contentContainerStyle}
|
|
keyboardDismissMode="interactive"
|
|
keyboardShouldPersistTaps="handled"
|
|
removeClippedSubviews={true}
|
|
maxToRenderPerBatch={10}
|
|
updateCellsBatchingPeriod={50}
|
|
initialNumToRender={10}
|
|
windowSize={11}
|
|
{...restProps} // 将所有其他属性传递给 FlatList
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default memo(forwardRef(ChatComponent)); |