Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x | import React, { useMemo } from 'react';
import ErrorBoundary from 'react-native-error-boundary';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { View } from 'react-native';
import type { ChatbotRemoteProps } from 'chatbot/Chatbot';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { SCREENS } from '@repo/constants/screens';
import { useIsNewThemeEnabled } from '@repo/hooks/useFlags';
import sentryService from '@repo/services/sentryService';
import { FallbackError } from '@/components/FallbackError';
import { LoadingSlider } from '@/components/LoadingSlider';
import { useAuth } from '@/contexts/AuthContext';
import { CHATBOT_BASE_URL } from '@/constants/apis';
import { AppStackScreenProps } from '@/types/navigation';
import { getAccessToken } from '@/services/mainHttpClient';
const ChatbotRemote = React.lazy(() => import('chatbot/Chatbot')) as React.LazyExoticComponent<
React.ComponentType<ChatbotRemoteProps>
>;
type ChatbotScreenProps = AppStackScreenProps<typeof SCREENS.CHATBOT>;
export const ChatbotScreen = React.memo(({ navigation }: ChatbotScreenProps) => {
const styles = useStyles();
const { value: isNewTheme } = useIsNewThemeEnabled();
const insets = useSafeAreaInsets();
const { user } = useAuth();
const remoteProps = useMemo<ChatbotRemoteProps>(
() => ({
onClose: () => navigation.goBack(),
auth: { getAccessToken },
env: { chatbotBaseUrl: CHATBOT_BASE_URL || 'http://localhost:8787' },
featureFlags: { isNewTheme },
user: user ? { id: user.uid, name: user.displayName || undefined } : undefined,
}),
[navigation, isNewTheme, user],
);
return (
<View
style={[
styles.container,
{ paddingBottom: insets.bottom, paddingLeft: insets.left, paddingRight: insets.right },
]}
>
<ErrorBoundary
FallbackComponent={FallbackError}
onError={error => sentryService.captureException(error)}
>
<View testID="chatbot-remote" style={styles.remoteContainer}>
<React.Suspense fallback={<LoadingSlider />}>
<ChatbotRemote {...remoteProps} />
</React.Suspense>
</View>
</ErrorBoundary>
</View>
);
});
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
backgroundColor: theme.colors.background.secondary,
},
remoteContainer: {
flex: 1,
},
}));
|