feat: ask样式

app/(tabs)/ask.tsx

@@ -55,6 +55,8 @@ export default function AskScreen() {
             const threshold = 100; // 滑动阈值
 
             if (translationX > threshold) {
+                // 关闭键盘
+                Keyboard.dismiss();
                 // 从左向右滑动，跳转页面
                 runOnJS(router.replace)("/memo-list");
             }
@@ -329,6 +331,7 @@ export default function AskScreen() {
                             setUserMessages={setUserMessages}
                             selectedImages={selectedImages}
                             setSelectedImages={setSelectedImages}
+                            isHello={isHello}
                         />
                     </View>
                 </KeyboardAvoidingView>

components/ask/send.tsx

@@ -25,11 +25,12 @@ interface Props {
     setConversationId: (conversationId: string) => void,
     selectedImages: string[];
     setSelectedImages: Dispatch<SetStateAction<string[]>>;
+    isHello: boolean;
 }
 const RENDER_INTERVAL = 50; // 渲染间隔，单位毫秒
 
 export default function SendMessage(props: Props) {
-    const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages } = props;
+    const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages, isHello } = props;
 
     const { t } = useTranslation()
 
@@ -191,15 +192,20 @@ export default function SendMessage(props: Props) {
             let currentSessionId = conversationId;
             // 如果没有对话ID，先创建一个新对话
             if (!currentSessionId) {
-                currentSessionId = await createNewConversation(text);
+                const newCurrentSessionId = await createNewConversation(text);
-                setConversationId(currentSessionId);
+                if (newCurrentSessionId) {
-                webSocketManager.send({
+                    setConversationId(newCurrentSessionId);
-                    type: 'Chat',
+                    webSocketManager.send({
-                    session_id: currentSessionId,
+                        type: 'Chat',
-                    message: text,
+                        session_id: newCurrentSessionId,
-                    image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
+                        message: text,
-                });
+                        image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
-                setSelectedImages([]);
+                    });
+                    setSelectedImages([]);
+                } else {
+                    console.error("无法获取 session_id，消息发送失败。");
+                    setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
+                }
             }
 
             // 通过 WebSocket 发送消息
@@ -243,7 +249,7 @@ export default function SendMessage(props: Props) {
     return (
         <View style={styles.container}>
             <View className="relative w-full">
-                <ScrollView horizontal={true}>
+                <ScrollView horizontal={true} style={{ display: isHello ? 'flex' : 'none' }}>
                     <TouchableOpacity style={[styles.button, { borderColor: '#FFB645' }]} onPress={() => handleQuitly('search')}>
                         <SunSvg width={18} height={18} />
                         <ThemedText>{t("ask:ask.search")}</ThemedText>
@@ -286,7 +292,7 @@ const styles = StyleSheet.create({
         margin: 5,
         borderRadius: 25,
         alignItems: 'center',
-        borderWidth: 2,
+        borderWidth: 1,
         display: 'flex',
         flexDirection: 'row',
         gap: 5,
@@ -307,7 +313,17 @@ const styles = StyleSheet.create({
         lineHeight: 20,
         fontSize: 16,
         width: '100%', // 确保输入框宽度撑满
-        paddingRight: 50
+        paddingRight: 50,
+        backgroundColor: '#fff', // Required for shadow to show on iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 3.84,
+        // Shadow for Android
+        elevation: 5,
     },
     voiceButton: {
         padding: 8,

components/chat/message-item/message-item.tsx

@@ -3,9 +3,12 @@ import { ContentPart, Message, User } from "@/types/ask";
 import { TFunction } from "i18next";
 import React from 'react';
 import {
+    StyleSheet,
+    TouchableOpacity,
     View
 } from 'react-native';
 
+import { ThemedText } from "@/components/ThemedText";
 import MessageRow from './MessageRow';
 
 interface RenderMessageProps {
@@ -21,9 +24,10 @@ interface RenderMessageProps {
     t: TFunction;
     setCancel: React.Dispatch<React.SetStateAction<boolean>>;
     cancel: boolean;
+    setUserMessages: React.Dispatch<React.SetStateAction<Message[]>>;
 }
 
-const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, setModalVisible, modalVisible, setModalDetailsVisible, modalDetailsVisible, setSelectedImages, selectedImages }: RenderMessageProps) => {
+const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, setModalVisible, modalVisible, setModalDetailsVisible, modalDetailsVisible, setSelectedImages, selectedImages, setUserMessages }: RenderMessageProps) => {
     const isUser = item.role === User;
 
     return (
@@ -40,23 +44,39 @@ const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, set
                     setSelectedImages={setSelectedImages}
                     setModalDetailsVisible={setModalDetailsVisible}
                 />
-                {/* {item.askAgain && item.askAgain.length > 0 && (
+                {item.content instanceof Array && item.content.filter((media: ContentPart) => media.type !== 'text').length > 0 && (
-                    <View className={`mr-10`}>
+                    <View style={styles.tips}>
-                        {item.askAgain.map((suggestion, index, array) => (
+                        <TouchableOpacity style={[styles.tip, { borderRadius: 16 }]} onPress={() => {
-                            <TouchableOpacity
-                                key={suggestion.id}
-                                className={`bg-yellow-50 rounded-xl px-4 py-2 border border-yellow-200 border-0 mb-2 ${index === array.length - 1 ? 'mb-0 rounded-b-3xl rounded-t-2xl' : 'rounded-2xl'}`}
-                            >
-                                <Text className="text-gray-700">{suggestion.text}</Text>
-                            </TouchableOpacity>
-                        ))}
-                    </View>
-                )} */}
 
+                        }}>
+                            <ThemedText style={styles.tipText}>Help me create a warm, cozy video.</ThemedText>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={[styles.tip, { borderTopLeftRadius: 16, borderTopRightRadius: 16, borderBottomLeftRadius: 24, borderBottomRightRadius: 24 }]}>
+                            <ThemedText style={styles.tipText}>Help me find materials for subsequent operations.</ThemedText>
+                        </TouchableOpacity>
+                    </View>
+                )}
             </View>
         </View>
     );
 };
 
+const styles = StyleSheet.create({
+    tips: {
+        flexDirection: 'column',
+        gap: 5,
+        marginRight: 10,
+    },
+    tip: {
+        backgroundColor: '#FFF8DE',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    tipText: {
+        color: '#4C320C',
+        fontSize: 14
+    }
+});
+
 export default React.memo(MessageItem);