feat: ask样式
This commit is contained in:
parent
140c726324
commit
7b9f523cc1
@ -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>
|
||||
|
||||
@ -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);
|
||||
setConversationId(currentSessionId);
|
||||
webSocketManager.send({
|
||||
type: 'Chat',
|
||||
session_id: currentSessionId,
|
||||
message: text,
|
||||
image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
|
||||
});
|
||||
setSelectedImages([]);
|
||||
const newCurrentSessionId = await createNewConversation(text);
|
||||
if (newCurrentSessionId) {
|
||||
setConversationId(newCurrentSessionId);
|
||||
webSocketManager.send({
|
||||
type: 'Chat',
|
||||
session_id: newCurrentSessionId,
|
||||
message: text,
|
||||
image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
|
||||
});
|
||||
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,
|
||||
|
||||
@ -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 && (
|
||||
<View className={`mr-10`}>
|
||||
{item.askAgain.map((suggestion, index, array) => (
|
||||
<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>
|
||||
)} */}
|
||||
{item.content instanceof Array && item.content.filter((media: ContentPart) => media.type !== 'text').length > 0 && (
|
||||
<View style={styles.tips}>
|
||||
<TouchableOpacity style={[styles.tip, { borderRadius: 16 }]} onPress={() => {
|
||||
|
||||
}}>
|
||||
<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);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user