feat: ask hello页面

app/(tabs)/ask.tsx

@@ -255,7 +255,7 @@ export default function AskScreen() {
         <GestureDetector gesture={gesture}>
             <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
                 {/* 导航栏 */}
-                <View style={[styles.navbar, isHello && styles.hiddenNavbar]}>
+                <View style={[styles.navbar, { borderBottomWidth: isHello ? 0 : 1 }]}>
                     <TouchableOpacity
                         style={styles.backButton}
                         onPress={() => {
@@ -273,11 +273,11 @@ export default function AskScreen() {
                     >
                         <ReturnArrow />
                     </TouchableOpacity>
-                    <ThemedText style={styles.title} onPress={() => { router.push('/owner') }}>MemoWake</ThemedText>
+                    <ThemedText style={[styles.title, { opacity: isHello ? 0 : 1 }]} onPress={() => { router.push('/owner') }}>MemoWake</ThemedText>
                     <View style={styles.placeholder} />
                 </View>
 
-                <View style={styles.contentContainer}>
+                <View style={[styles.contentContainer, { marginTop: isHello ? -24 : 0 }]}>
                     {/* 欢迎页面 */}
                     <Animated.View
                         style={[
@@ -346,7 +346,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingVertical: 16,
+        paddingVertical: 8,
         paddingHorizontal: 16,
         borderBottomWidth: 1,
         borderBottomColor: 'rgba(0,0,0,0.1)',
@@ -355,11 +355,7 @@ const styles = StyleSheet.create({
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.1,
         shadowRadius: 1,
-    },
-    hiddenNavbar: {
-        shadowOpacity: 0,
-        elevation: 0,
-        opacity: 0
+        zIndex: 10
     },
     backButton: {
         padding: 8,

assets/icons/svg/send.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="18" fill="#FFB645"/>
+<path d="M15.6281 20.1601L20.4742 15.314M25.4316 12.3564L21.341 25.651C20.9744 26.8425 20.7909 27.4385 20.4748 27.636C20.2005 27.8074 19.8609 27.836 19.5623 27.7121C19.2178 27.5692 18.9383 27.0111 18.3807 25.8958L15.7897 20.7139C15.7012 20.5369 15.6569 20.4488 15.5978 20.3721C15.5453 20.304 15.4848 20.2427 15.4168 20.1903C15.3418 20.1325 15.2552 20.0892 15.0861 20.0046L9.89224 17.4077C8.77693 16.8501 8.21923 16.571 8.07632 16.2266C7.95238 15.9279 7.98064 15.588 8.152 15.3137C8.34959 14.9975 8.94555 14.8138 10.1374 14.4471L23.4319 10.3564C24.3689 10.0682 24.8376 9.92412 25.154 10.0403C25.4297 10.1415 25.647 10.3586 25.7482 10.6343C25.8644 10.9506 25.7202 11.419 25.4322 12.3551L25.4316 12.3564Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

components/ask/hello.tsx

@@ -1,10 +1,9 @@
-import IP from "@/assets/icons/svg/ip.svg";
 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 { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Dimensions, Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { createNewConversation } from "./utils";
 
 interface AskHelloProps {
@@ -14,6 +13,8 @@ interface AskHelloProps {
 }
 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);
@@ -50,7 +51,7 @@ export default function AskHello({ setUserMessages, setConversationId, setIsHell
             <ScrollView
                 contentContainerStyle={{
                     flexGrow: 1,
-                    paddingHorizontal: 16,
+                    paddingHorizontal: 8,
                     paddingBottom: 20
                 }}
                 keyboardDismissMode="interactive"
@@ -62,10 +63,10 @@ export default function AskHello({ setUserMessages, setConversationId, setIsHell
                         {"\n"}
                         {t('ask.iAmMemo', { ns: 'ask' })}
                     </ThemedText>
-                    <View className="-mt-10">
-                        <IP />
+                    <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-20">
+                    <ThemedText className="!text-textPrimary text-center -mt-10" style={{ fontSize: 16 }}>
                         {t('ask.ready', { ns: 'ask' })}
                         {"\n"}
                         {t('ask.justAsk', { ns: 'ask' })}
@@ -110,10 +111,12 @@ const styles = StyleSheet.create({
         marginTop: 16
     },
     case: {
-        borderWidth: 2,
-        borderColor: "#FFB645",
-        borderRadius: 24,
+        borderWidth: 1,
+        borderColor: "#AC7E35",
+        borderRadius: 10,
         paddingHorizontal: 8,
-        width: 'auto'
+        width: 'auto',
+        fontSize: 14,
+        color: "#4C320C"
     }
 })

components/ask/send.tsx

@@ -265,13 +265,14 @@ export default function SendMessage(props: Props) {
                     returnKeyType="send"
                 />
                 <TouchableOpacity
-                    style={[styles.voiceButton, { bottom: -10 }]}
                     onPress={handleSubmit}
-                    className="absolute right-2"
+                    style={{
+                        position: 'absolute',
+                        right: 6,
+                        bottom: 6
+                    }}
                 >
-                    <View>
-                        <SendSvg color={'white'} width={24} height={24} />
-                    </View>
+                    <SendSvg />
                 </TouchableOpacity>
             </View>
         </View>
@@ -288,15 +289,18 @@ const styles = StyleSheet.create({
         borderWidth: 2,
         display: 'flex',
         flexDirection: 'row',
-        gap: 5
+        gap: 5,
+        // backgroundColor: '#F8F8F8'
     },
     container: {
         justifyContent: 'center',
         backgroundColor: '#transparent',
     },
     input: {
-        borderColor: '#FF9500',
+        // borderColor: '#d9d9d9',
+        borderColor: '#AC7E35',
         borderWidth: 1,
+        // borderRadius: 18,
         borderRadius: 25,
         paddingHorizontal: 20,
         paddingVertical: 13,

i18n/locales/en/ask.json

@@ -14,9 +14,9 @@
                 "refresh": "Refresh",
                 "error": "have some error",
                 "issue": "have some issue",
-                "case1": "Find last year's baby/pet material",
-                "case2": "Find last year's food",
-                "case3": "Find recent travel material",
+                "case1": "Find last year’s baby moments",
+                "case2": "Pet moments",
+                "case3": "Show me my food memories in France with family",
                 "mediaAuth": "need album permission",
                 "mediaAuthDesc": "allow app to access album to save media files",
                 "saveSuccess": "save success",