119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import IP from "@/assets/icons/svg/ip.svg";
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
import { Message } from "@/types/ask";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
import { webSocketManager } from "@/lib/websocket-util";
|
|
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 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: 16,
|
|
paddingBottom: 20
|
|
}}
|
|
keyboardDismissMode="interactive"
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
<View className="items-center">
|
|
<ThemedText className="text-3xl font-bold text-center">
|
|
{t('ask.hi', { ns: 'ask' })}
|
|
{"\n"}
|
|
{t('ask.iAmMemo', { ns: 'ask' })}
|
|
</ThemedText>
|
|
<View className="-mt-10">
|
|
<IP />
|
|
</View>
|
|
<ThemedText className="!text-textPrimary text-center -mt-20">
|
|
{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: 2,
|
|
borderColor: "#FFB645",
|
|
borderRadius: 24,
|
|
paddingHorizontal: 8,
|
|
width: 'auto'
|
|
}
|
|
}) |