feat: integrate post AI translation with UI toggle and backend queue

This commit is contained in:
Adolfo Reyna
2026-02-25 18:41:54 -05:00
parent 9da5874977
commit c281878875
4 changed files with 72 additions and 4 deletions

View File

@@ -26,6 +26,7 @@ let Post = (props) => {
const [deleted, setDeleted] = useState(false);
let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
const [translating, setTranslating] = useState(false);
const isOwner = String(post.profileid || '') === String(viewer?._id || '');
const swipeX = useRef(new Animated.Value(0)).current;
const mediaGestureActiveRef = useRef(false);
@@ -34,6 +35,30 @@ let Post = (props) => {
<ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
let cleanContent = stripInlineTags(stripBibleTokens(post.content));
const navigation = useNavigation();
const textWithoutUrls = cleanContent.replace(/(https?:\/\/[^\s]+)/g, '').trim();
const hasTextContent = textWithoutUrls && textWithoutUrls.length > 0 && cleanContent.length < 1000;
const currentLang = i18n.locale.substring(0, 2).toLowerCase();
const hasTranslation = post.translations && post.translations[currentLang];
const [showTranslation, setShowTranslation] = useState(!!hasTranslation);
const requestTranslation = async () => {
setTranslating(true);
try {
await API.translatePost(post._id, i18n.locale);
setTimeout(async () => {
const updatedPost = await API.getPost(post._id);
if (updatedPost && updatedPost.translations && updatedPost.translations[i18n.locale.substring(0, 2).toLowerCase()]) {
changePost(updatedPost);
setShowTranslation(true);
}
setTranslating(false);
}, 3000);
} catch (e) {
setTranslating(false);
}
};
//cleanContent = convertLinks(cleanContent);
const newComentAdded = (commentData) => {
let newPostObj = { ...post };
@@ -168,9 +193,37 @@ let Post = (props) => {
{ pattern: /(https?:\/\/[^\s]+)/, style: styles.link, onPress: handleLinkPress, onLongPress: handleLinkLongPress },
]}
>
{cleanContent}
{showTranslation && hasTranslation ? stripInlineTags(stripBibleTokens(post.translations[currentLang])) : cleanContent}
</ParsedText>
</Pressable>
{hasTextContent && (
<View style={{ paddingLeft: 40, paddingRight: 8, marginTop: 4 }}>
{hasTranslation && showTranslation ? (
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingRight: 4 }}>
<Text style={{ fontSize: 11, color: '#16a34a', fontStyle: 'italic' }}>
{i18n.t("message.aiTranslated") || "AI Translated"}
</Text>
<Pressable onPress={() => setShowTranslation(false)}>
<Text style={{ color: '#6b7280', fontSize: 11, fontWeight: '500' }}>
{i18n.t("message.seeOriginal") || "See Original"}
</Text>
</Pressable>
</View>
) : (
<Pressable onPress={() => {
if (hasTranslation) {
setShowTranslation(true);
} else {
requestTranslation();
}
}}>
<Text style={{ color: '#2563eb', fontSize: 13, fontWeight: '600', marginBottom: 6 }}>
{translating ? (i18n.t("message.translating") || "Translating...") : (i18n.t("message.seeTranslation") || "See Translation")}
</Text>
</Pressable>
)}
</View>
)}
<View style={{ paddingLeft: 40, paddingRight: 8 }}>
<BibleEmbeddedView content={post.content} openChapterOnPress />
</View>