memowake-front/components/ask/hello.tsx

import { ThemedText } from "@/components/ThemedText";
import { webSocketManager } from "@/lib/websocket-util";
import { Message } from "@/types/ask";
import { Dispatch, SetStateAction, useCallback, useRef } from "react";
import { useTranslation } from "react-i18next";
import { Image, ScrollView, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
import { createNewConversation } from "./utils";

interface AskHelloProps {
    setUserMessages: Dispatch<SetStateAction<Message[]>>;
    setConversationId: Dispatch<SetStateAction<string | null>>;
    setIsHello: Dispatch<SetStateAction<boolean>>;
}
export default function AskHello({ setUserMessages, setConversationId, setIsHello }: AskHelloProps) {
    const { t } = useTranslation();
    const { width, height } = useWindowDimensions();

    const inFlightRef = useRef(false);

    const handleCase = useCallback(async (text: string) => {
        if (inFlightRef.current) return;
        inFlightRef.current = true;
        try {
            // UI
            setIsHello(false);
            setUserMessages([
                {
                    id: Math.random().toString(36).substring(2, 9),
                    content: text,
                    role: 'user',
                    timestamp: new Date().toISOString()
                },
                {
                    id: Math.random().toString(36).substring(2, 9),
                    content: "keepSearchIng",
                    role: 'assistant',
                    timestamp: new Date().toISOString()
                }
            ]);

            const sessionId = await createNewConversation(text);
            if (!sessionId) {
                console.error("Failed to create a new conversation.");

                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
                return;
            }

            setConversationId(sessionId);
            try {
                if (webSocketManager && typeof (webSocketManager as any).send === 'function') {
                    (webSocketManager as any).send({
                        type: 'Chat',
                        session_id: sessionId,
                        message: text
                    });
                } else {
                    throw new Error('WebSocket manager is not ready');
                }
            } catch (wsErr) {
                console.error('WebSocket send failed:', wsErr);
                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
            }
        } catch (err) {
            console.error('handleCase failed:', err);

            setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
        } finally {
            inFlightRef.current = false;
        }
    }, [setConversationId, setIsHello, setUserMessages]);

    return (
        <View className="flex-1 bg-white w-full">
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1,
                    paddingHorizontal: 8,
                    paddingBottom: 20
                }}
                keyboardDismissMode="interactive"
                keyboardShouldPersistTaps="handled"
            >
                <View className="items-center">
                    <ThemedText style={{ fontSize: 32, fontWeight: 'bold', textAlign: 'center', lineHeight: 40, }}>
                        {t('ask.hi', { ns: 'ask' })}
                        {"\n"}
                        {t('ask.iAmMemo', { ns: 'ask' })}
                    </ThemedText>
                    <View>
                        <Image source={require('@/assets/images/png/icon/ip.png')} style={{ width: width * 0.5, height: height * 0.3 }} />
                    </View>
                    <ThemedText className="!text-textPrimary text-center -mt-10" style={{ fontSize: 16 }}>
                        {t('ask.ready', { ns: 'ask' })}
                        {"\n"}
                        {t('ask.justAsk', { ns: 'ask' })}
                    </ThemedText>
                    <View style={styles.caseContainer}>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case1'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case1')}
                            </ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case2'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case2')}
                            </ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case3'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case3')}
                            </ThemedText>
                        </TouchableOpacity>
                    </View>
                </View>
            </ScrollView>
        </View >
    );
}


const styles = StyleSheet.create({
    caseContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        width: '100%',
        marginTop: 16
    },
    case: {
        borderWidth: 1,
        borderColor: "#AC7E35",
        borderRadius: 10,
        paddingHorizontal: 8,
        marginHorizontal: 4,
        marginVertical: 4,
        width: 'auto',
        fontSize: 14,
        color: "#4C320C"
    }
})