diff --git a/app/(tabs)/ask.tsx b/app/(tabs)/ask.tsx index 5ce0ec2..035bbfa 100644 --- a/app/(tabs)/ask.tsx +++ b/app/(tabs)/ask.tsx @@ -138,9 +138,11 @@ export default function AskScreen() { useFocusEffect( useCallback(() => { - setIsHello(true); - setUserMessages([]) - }, []) + if (!sessionId) { + setIsHello(true); + setUserMessages([]) + } + }, [sessionId]) ); return ( @@ -180,7 +182,7 @@ export default function AskScreen() { } ]} > - + {/* 聊天页面 */} diff --git a/components/ask/hello.tsx b/components/ask/hello.tsx index e47aea1..474a37e 100644 --- a/components/ask/hello.tsx +++ b/components/ask/hello.tsx @@ -1,17 +1,55 @@ 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, View } from 'react-native'; +import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'; +import { createNewConversation, getConversation } from "./utils"; -export default function AskHello() { +interface AskHelloProps { + setUserMessages: Dispatch>; + setConversationId: Dispatch>; + setIsHello: Dispatch>; +} +export default function AskHello({ setUserMessages, setConversationId, setIsHello }: AskHelloProps) { const { t } = useTranslation(); + const handleCase = async (text: string) => { + setIsHello(false) + setUserMessages([ + { + content: { + text: text + }, + role: 'User', + timestamp: new Date().toISOString() + }, + { + content: { + text: "正在寻找，请稍等..." + }, + role: 'Assistant', + timestamp: new Date().toISOString() + } + ]); + const data = await createNewConversation(text); + setConversationId(data); + const response = await getConversation({ session_id: data, user_text: text, material_ids: [] }); + setUserMessages((prev: Message[]) => { + const newMessages = [...(prev || [])]; + if (response) { + newMessages.push(response); + } + return newMessages.filter((item: Message) => + item?.content?.text !== '正在寻找，请稍等...' + ); + }); + } return ( - + - + {t('ask.ready', { ns: 'ask' })} {"\n"} {t('ask.justAsk', { ns: 'ask' })} + + { + handleCase(t('ask:ask.case1')); + }}> + + {t('ask:ask.case1')} + + + { + handleCase(t('ask:ask.case2')); + }}> + + {t('ask:ask.case2')} + + + { + handleCase(t('ask:ask.case3')); + }}> + + {t('ask:ask.case3')} + + + ); -} \ No newline at end of file +} + + +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' + } +}) \ No newline at end of file diff --git a/components/ask/send.tsx b/components/ask/send.tsx index d25b719..5a6f3ba 100644 --- a/components/ask/send.tsx +++ b/components/ask/send.tsx @@ -13,9 +13,9 @@ import { View } from 'react-native'; -import { fetchApi } from '@/lib/server-api-util'; import { Message } from '@/types/ask'; import { ThemedText } from '../ThemedText'; +import { createNewConversation, getConversation } from './utils'; interface Props { setIsHello: Dispatch>, @@ -31,31 +31,7 @@ export default function SendMessage(props: Props) { // 用户询问 const [inputValue, setInputValue] = useState(''); - // 创建新对话并获取消息 - const createNewConversation = useCallback(async (user_text: string) => { - const data = await fetchApi("/chat/new", { - method: "POST", - }); - setConversationId(data); - await getConversation({ session_id: data, user_text, material_ids: [] }); - }, []); - // 获取对话信息 - const getConversation = useCallback(async ({ session_id, user_text, material_ids }: { session_id: string, user_text: string, material_ids: string[] }) => { - // 获取对话信息必须要有对话id - if (!session_id) return; - - const response = await fetchApi(`/chat`, { - method: "POST", - body: JSON.stringify({ - session_id, - user_text, - material_ids - }) - }); - setSelectedImages([]); - setUserMessages((prev: Message[]) => [...prev, response]?.filter((item: Message) => item.content.text !== '正在寻找，请稍等...')); - }, []); // 添加一个ref来跟踪键盘状态 const keyboardDidShowListener = useRef(null); @@ -95,7 +71,7 @@ export default function SendMessage(props: Props) { }, [conversationId]); // 发送询问 - const handleSubmit = useCallback(() => { + const handleSubmit = useCallback(async () => { const text = inputValue.trim(); // 用户输入信息之后进行后续操作 if (text) { @@ -117,13 +93,35 @@ export default function SendMessage(props: Props) { ])); // 如果没有对话ID，创建新对话并获取消息，否则直接获取消息 if (!conversationId) { - createNewConversation(text); + const data = await createNewConversation(text); + setConversationId(data); + const response = await getConversation({ session_id: data, user_text: text, material_ids: [] }); + setSelectedImages([]); + setUserMessages((prev: Message[]) => { + const newMessages = [...(prev || [])]; + if (response) { + newMessages.push(response); + } + return newMessages.filter((item: Message) => + item?.content?.text !== '正在寻找，请稍等...' + ); + }); } else { - getConversation({ + const response = await getConversation({ session_id: conversationId, user_text: text, material_ids: selectedImages }); + setSelectedImages([]); + setUserMessages((prev: Message[]) => { + const newMessages = [...(prev || [])]; + if (response) { + newMessages.push(response); + } + return newMessages.filter((item: Message) => + item?.content?.text !== '正在寻找，请稍等...' + ); + }); } // 将输入框清空 setInputValue(''); diff --git a/components/ask/utils.ts b/components/ask/utils.ts index 81a838f..341dca7 100644 --- a/components/ask/utils.ts +++ b/components/ask/utils.ts @@ -1,3 +1,7 @@ +import { fetchApi } from "@/lib/server-api-util"; +import { Message } from "@/types/ask"; +import { useCallback } from "react"; + // 实现一个函数，从两个数组中轮流插入新数组 export const mergeArrays = (arr1: any[], arr2: any[]) => { const result: any[] = []; @@ -8,3 +12,41 @@ export const mergeArrays = (arr1: any[], arr2: any[]) => { } return result; }; + + +// 创建新对话并获取消息 +export const createNewConversation = useCallback(async (user_text: string) => { + const data = await fetchApi("/chat/new", { + method: "POST", + }); + return data +}, []); + +// 获取对话信息 +export const getConversation = async ({ + session_id, + user_text, + material_ids +}: { + session_id: string, + user_text: string, + material_ids: string[] +}): Promise => { + // 获取对话信息必须要有对话id + if (!session_id) return undefined; + + try { + const response = await fetchApi(`/chat`, { + method: "POST", + body: JSON.stringify({ + session_id, + user_text, + material_ids + }) + }); + return response; + } catch (error) { + // console.error('Error in getConversation:', error); + return undefined; + } +}; \ No newline at end of file diff --git a/i18n/locales/en/ask.json b/i18n/locales/en/ask.json index 2d7159c..f0009c0 100644 --- a/i18n/locales/en/ask.json +++ b/i18n/locales/en/ask.json @@ -13,6 +13,9 @@ "loading": "Loading...", "refresh": "Refresh", "error": "have some error", - "issue": "have some issue" + "issue": "have some issue", + "case1": "Find last year's baby/pet material", + "case2": "Find last year's food", + "case3": "Find recent travel material" } } \ No newline at end of file diff --git a/i18n/locales/zh/ask.json b/i18n/locales/zh/ask.json index bc9a814..4ff442d 100644 --- a/i18n/locales/zh/ask.json +++ b/i18n/locales/zh/ask.json @@ -13,6 +13,9 @@ "loading": "加载中...", "refresh": "刷新", "error": "出错了", - "issue": "发生了一些问题" + "issue": "发生了一些问题", + "case1": "找去年我家宝宝/宠物的素材片段", + "case2": "找去年吃过的美食", + "case3": "找近期旅游的素材" } } \ No newline at end of file