224 lines
9.2 KiB
TypeScript
224 lines
9.2 KiB
TypeScript
'use client';
|
||
import SendSvg from '@/assets/icons/svg/send.svg';
|
||
import SunSvg from '@/assets/icons/svg/sun.svg';
|
||
import VideoSvg from '@/assets/icons/svg/video.svg';
|
||
import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
|
||
import {
|
||
EventSubscription,
|
||
Keyboard,
|
||
ScrollView,
|
||
StyleSheet,
|
||
TextInput,
|
||
TouchableOpacity,
|
||
View
|
||
} from 'react-native';
|
||
|
||
import { Message } from '@/types/ask';
|
||
import { ThemedText } from '../ThemedText';
|
||
import { createNewConversation, getConversation } from './utils';
|
||
|
||
interface Props {
|
||
setIsHello: Dispatch<SetStateAction<boolean>>,
|
||
conversationId: string | null,
|
||
setUserMessages: Dispatch<SetStateAction<Message[]>>;
|
||
setConversationId: (conversationId: string) => void,
|
||
selectedImages: string[];
|
||
setSelectedImages: Dispatch<SetStateAction<string[]>>;
|
||
}
|
||
export default function SendMessage(props: Props) {
|
||
const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages } = props;
|
||
|
||
// 用户询问
|
||
const [inputValue, setInputValue] = useState('');
|
||
|
||
|
||
|
||
// 添加一个ref来跟踪键盘状态
|
||
const keyboardDidShowListener = useRef<EventSubscription | null>(null);
|
||
const keyboardDidHideListener = useRef<EventSubscription | null>(null);
|
||
const isKeyboardVisible = useRef(false);
|
||
|
||
useEffect(() => {
|
||
// 使用keyboardWillShow而不是keyboardDidShow，这样可以在键盘完全显示前更新UI
|
||
const showSubscription = Keyboard.addListener('keyboardWillShow', () => {
|
||
isKeyboardVisible.current = true;
|
||
if (!conversationId) {
|
||
// 确保在下一个事件循环中更新状态，避免可能的渲染问题
|
||
requestAnimationFrame(() => {
|
||
setIsHello(false);
|
||
setUserMessages([
|
||
{
|
||
content: {
|
||
text: '想打开记忆盲盒吗？描述你的回忆，我来帮你找回照片、生成影片或解锁隐藏彩蛋✨'
|
||
|
||
},
|
||
role: 'Assistant',
|
||
timestamp: new Date().toISOString()
|
||
}
|
||
])
|
||
});
|
||
}
|
||
});
|
||
|
||
const hideSubscription = Keyboard.addListener('keyboardWillHide', () => {
|
||
isKeyboardVisible.current = false;
|
||
});
|
||
|
||
return () => {
|
||
showSubscription.remove();
|
||
hideSubscription.remove();
|
||
};
|
||
}, [conversationId]);
|
||
|
||
// 发送询问
|
||
const handleSubmit = useCallback(async () => {
|
||
const text = inputValue.trim();
|
||
// 用户输入信息之后进行后续操作
|
||
if (text) {
|
||
// 将用户输入信息添加到消息列表中
|
||
setUserMessages(pre => ([...pre, {
|
||
content: {
|
||
text: text
|
||
},
|
||
role: 'User',
|
||
timestamp: new Date().toISOString()
|
||
},
|
||
{
|
||
content: {
|
||
text: "正在寻找，请稍等..."
|
||
},
|
||
role: 'Assistant',
|
||
timestamp: new Date().toISOString()
|
||
}
|
||
]));
|
||
// 如果没有对话ID，创建新对话并获取消息，否则直接获取消息
|
||
if (!conversationId) {
|
||
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 {
|
||
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('');
|
||
// 只有在键盘可见时才关闭键盘
|
||
if (isKeyboardVisible.current) {
|
||
Keyboard.dismiss();
|
||
}
|
||
}
|
||
}, [inputValue, conversationId, selectedImages, createNewConversation, getConversation]);
|
||
|
||
const handleQuitly = (type: string) => {
|
||
setIsHello(false)
|
||
setUserMessages(pre => ([
|
||
...pre,
|
||
{
|
||
content: {
|
||
text: type === "search"
|
||
? '想找合适的图片？试试这样搜更精准：\n\n• 明确主题：比如"秋日森林""极简风书桌""复古海报设计"\n\n• 加上细节：想找特定风格？试试"水彩风猫咪""赛博朋克城市夜景"；需要特定用途？比如"无版权风景图""可商用图标"\n\n• 描述场景：比如"阳光透过树叶的光斑""雨天咖啡馆窗外"\n\n输入这些关键词，说不定就能找到你想要的画面啦～'
|
||
: '想让你的视频内容更吸睛、更有故事感吗？不妨试试从搜索图片入手吧！\n\n你可以先确定视频的主题——是治愈系的自然风景，还是复古风的城市街景，或是充满活力的生活瞬间？然后根据主题去搜索相关的图片，比如想做"春日限定"主题，就搜"樱花飘落""草地野餐""嫩芽初绽"之类的画面。\n\n这些图片能帮你快速理清视频的画面脉络，甚至能激发新的创意——比如一张老照片里的复古物件，或许能延伸出一段关于时光的故事；一组星空图片，说不定能串联成关于梦想与远方的叙事。把这些图片按你的想法串联起来，配上合适的音乐和文案，一段有温度的视频就诞生啦，试试看吧～'
|
||
},
|
||
role: 'Assistant',
|
||
timestamp: new Date().toISOString()
|
||
}
|
||
]))
|
||
};
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
<View className="relative w-full">
|
||
<ScrollView horizontal={true}>
|
||
<TouchableOpacity style={[styles.button, { borderColor: '#FFB645' }]} onPress={() => handleQuitly('search')}>
|
||
<SunSvg width={18} height={18} />
|
||
<ThemedText>检索素材</ThemedText>
|
||
</TouchableOpacity><TouchableOpacity style={[styles.button, { borderColor: '#E2793F' }]} onPress={() => handleQuitly('video')}>
|
||
<VideoSvg width={18} height={18} />
|
||
<ThemedText>创作视频</ThemedText>
|
||
</TouchableOpacity>
|
||
</ScrollView>
|
||
<TextInput
|
||
style={styles.input}
|
||
placeholder="Ask MeMo Anything..."
|
||
placeholderTextColor="#999"
|
||
value={inputValue}
|
||
onChangeText={(text: string) => {
|
||
setInputValue(text);
|
||
}}
|
||
onSubmitEditing={handleSubmit}
|
||
// 调起的键盘类型
|
||
returnKeyType="send"
|
||
/>
|
||
<TouchableOpacity
|
||
style={styles.voiceButton}
|
||
onPress={handleSubmit}
|
||
className={`absolute right-0 bottom-0`} // 使用绝对定位将按钮放在输入框内右侧
|
||
>
|
||
<View style={{ transform: [{ rotate: '330deg' }] }}>
|
||
<SendSvg color={'white'} width={24} height={24} />
|
||
</View>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
button: {
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
margin: 5,
|
||
borderRadius: 25,
|
||
alignItems: 'center',
|
||
borderWidth: 2,
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
gap: 5
|
||
},
|
||
container: {
|
||
justifyContent: 'center',
|
||
backgroundColor: '#transparent',
|
||
},
|
||
input: {
|
||
borderColor: '#FF9500',
|
||
borderWidth: 1,
|
||
borderRadius: 25,
|
||
paddingHorizontal: 20,
|
||
paddingVertical: 12,
|
||
fontSize: 16,
|
||
width: '100%', // 确保输入框宽度撑满
|
||
paddingRight: 50
|
||
},
|
||
voiceButton: {
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 20,
|
||
backgroundColor: '#FF9500',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
marginRight: 8, // 添加一点
|
||
},
|
||
}); |