122 lines
4.6 KiB
TypeScript
122 lines
4.6 KiB
TypeScript
import { ThemedText } from "@/components/ThemedText";
|
|
import { webSocketManager } from "@/lib/websocket-util";
|
|
import { Message } from "@/types/ask";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Dimensions, Image, ScrollView, StyleSheet, TouchableOpacity, 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 = Dimensions.get('window').width;
|
|
const height = Dimensions.get('window').height;
|
|
|
|
const handleCase = async (text: string) => {
|
|
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) {
|
|
setConversationId(sessionId);
|
|
webSocketManager.send({
|
|
type: 'Chat',
|
|
session_id: sessionId,
|
|
message: text
|
|
});
|
|
} else {
|
|
console.error("Failed to create a new conversation.");
|
|
setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
|
|
}
|
|
}
|
|
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',
|
|
gap: 8,
|
|
width: '100%',
|
|
marginTop: 16
|
|
},
|
|
case: {
|
|
borderWidth: 1,
|
|
borderColor: "#AC7E35",
|
|
borderRadius: 10,
|
|
paddingHorizontal: 8,
|
|
width: 'auto',
|
|
fontSize: 14,
|
|
color: "#4C320C"
|
|
}
|
|
}) |