Feat: Translation

api/AI.ts

@@ -88,3 +88,23 @@ export async function askQuestion(
   });
   return await response.json();
 }
+
+export async function translate(
+  customerId: string,
+  type: "post" | "comment",
+  sourceLanguage: string,
+  targetLanguage: string,
+  content: { postTitle?: string; postText?: string; comment?: string },
+): Promise<string> {
+  const response = await fetch(`${HYDRA_SERVER_URL}/api/ai/translate`, {
+    method: "POST",
+    body: JSON.stringify({
+      customerId,
+      type,
+      sourceLanguage,
+      targetLanguage,
+      ...content,
+    }),
+  });
+  return await response.text();
+}

components/Modals/TranslationModal.tsx

@@ -0,0 +1,114 @@
+import React, { useContext } from "react";
+import { StyleSheet, View, Text, ScrollView, useWindowDimensions, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+import { ModalContext } from "../../contexts/ModalContext";
+import { ThemeContext } from "../../contexts/SettingsContexts/ThemeContext";
+
+type TranslationModalProps = {
+  originalText: string;
+  translatedText: string;
+};
+
+export default function TranslationModal({ originalText, translatedText }: TranslationModalProps) {
+  const { theme } = useContext(ThemeContext);
+  const { setModal } = useContext(ModalContext);
+
+  const { width, height } = useWindowDimensions();
+
+  return (
+    <>
+      <View
+        style={[
+          styles.translationContainer,
+          {
+            backgroundColor: theme.tint,
+            borderColor: theme.divider,
+            bottom: -height,
+            left: -3,
+            width: width + 6,
+            height: height * 0.65,
+          },
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={[styles.title, { color: theme.text }]}>Translation</Text>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => setModal(null)}
+          >
+            <MaterialCommunityIcons name="close" size={24} color={theme.text} />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={[styles.sectionTitle, { color: theme.subtleText }]}>Original</Text>
+          <ScrollView style={styles.textScroll}>
+            <Text style={[styles.text, { color: theme.text }]}>{originalText}</Text>
+          </ScrollView>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={[styles.sectionTitle, { color: theme.subtleText }]}>Translated</Text>
+          <ScrollView style={styles.textScroll}>
+            <Text style={[styles.text, { color: theme.text }]}>{translatedText}</Text>
+          </ScrollView>
+        </View>
+      </View>
+      <View
+        style={[styles.background, { height }]}
+        onTouchStart={() => {
+          setModal(null);
+        }}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  translationContainer: {
+    position: "absolute",
+    zIndex: 1,
+    borderRadius: 30,
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    borderWidth: 3,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+  },
+  closeButton: {
+    padding: 5,
+  },
+  section: {
+    flex: 1,
+    marginBottom: 15,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 8,
+  },
+  textScroll: {
+    flex: 1,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 22,
+  },
+  background: {
+    position: "absolute",
+    width: "100%",
+    top: 0,
+    left: 0,
+    backgroundColor: "black",
+    opacity: 0.7,
+  },
+});

components/Navbar/SortAndContext.tsx

@@ -30,7 +30,11 @@ import {
 } from "../../constants/SettingsKeys";
 import { ModalContext } from "../../contexts/ModalContext";
 import { ThemeContext } from "../../contexts/SettingsContexts/ThemeContext";
+import { TranslationSettingsContext } from "../../contexts/SettingsContexts/TranslationSettingsContext";
+import { SubscriptionsContext } from "../../contexts/SubscriptionsContext";
 import { SubredditContext } from "../../contexts/SubredditContext";
+import { translate } from "../../api/AI";
+import TranslationModal from "../Modals/TranslationModal";
 import KeyStore from "../../utils/KeyStore";
 import RedditURL, { PageType } from "../../utils/RedditURL";
 import { useURLNavigation } from "../../utils/navigation";
@@ -72,7 +76,8 @@ export type ContextTypes =
   | "Hide Seen Posts"
   | "Sidebar"
   | "Wiki"
-  | "Open in Gallery Mode";
+  | "Open in Gallery Mode"
+  | "Translate Text";
 
 type SortAndContextProps = {
   route: RouteProp<StackParamsList, URLRoutes> | string;
@@ -94,6 +99,8 @@ export default function SortAndContext({
   const { subscribe, unsubscribe, toggleFavorite, multis, addSubToMulti } =
     useContext(SubredditContext);
   const { toggleHideSeenURL } = useContext(FiltersContext);
+  const { sourceLanguage, targetLanguage } = useContext(TranslationSettingsContext);
+  const { isPro, customerId } = useContext(SubscriptionsContext);
 
   const { replaceURL, pushURL, setParams, openGallery } = useURLNavigation();
 
@@ -371,6 +378,24 @@ export default function SortAndContext({
               pushURL(`https://www.reddit.com/r/${subreddit}/wiki/index`);
             } else if (result === "Open in Gallery Mode") {
               openGallery(currentPath);
+            } else if (result === "Translate Text" && isPro && customerId && pageData?.type === "postDetail") {
+              try {
+                const translation = await translate(
+                  customerId,
+                  "post",
+                  sourceLanguage,
+                  targetLanguage,
+                  { postTitle: pageData.title, postText: pageData.text || "" },
+                );
+                setModal(
+                  <TranslationModal 
+                    originalText={`${pageData.title}\n\n${pageData.text || ""}`}
+                    translatedText={translation}
+                  />
+                );
+              } catch {
+                alert("Failed to translate post. Please try again.");
+              }
             }
           }}
         >

components/RedditDataRepresentations/Post/PostDetailsComponent.tsx

@@ -1,4 +1,10 @@
-import { AntDesign, Feather, FontAwesome, Octicons } from "@expo/vector-icons";
+import {
+  AntDesign,
+  Feather,
+  FontAwesome,
+  Octicons,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
 import React, {
   Dispatch,
   SetStateAction,
@@ -19,13 +25,16 @@ import {
 import PostMedia from "./PostParts/PostMedia";
 import SubredditIcon from "./PostParts/SubredditIcon";
 import { summarizePostDetails, summarizePostComments } from "../../../api/AI";
+import { translate } from "../../../api/AI";
+import TranslationModal from "../../Modals/TranslationModal";
 import { PostDetail, vote } from "../../../api/PostDetail";
 import { VoteOption } from "../../../api/Posts";
 import { saveItem } from "../../../api/Save";
 import { ModalContext } from "../../../contexts/ModalContext";
 import { CommentSettingsContext } from "../../../contexts/SettingsContexts/CommentSettingsContext";
 import { PostSettingsContext } from "../../../contexts/SettingsContexts/PostSettingsContext";
 import { ThemeContext } from "../../../contexts/SettingsContexts/ThemeContext";
+import { TranslationSettingsContext } from "../../../contexts/SettingsContexts/TranslationSettingsContext";
 import { SubscriptionsContext } from "../../../contexts/SubscriptionsContext";
 import RedditURL from "../../../utils/RedditURL";
 import { useRoute, useURLNavigation } from "../../../utils/navigation";
@@ -58,6 +67,7 @@ export default function PostDetailsComponent({
   const { showPostSummary, tapToCollapsePost } =
     useContext(PostSettingsContext);
   const { showCommentSummary } = useContext(CommentSettingsContext);
+  const { sourceLanguage, targetLanguage } = useContext(TranslationSettingsContext);
 
   const [mediaCollapsed, setMediaCollapsed] = useState(false);
   const [commentSummaryCollapsed, setCommentSummaryCollapsed] = useState(false);
@@ -74,6 +84,28 @@ export default function PostDetailsComponent({
     });
   };
 
+  const handleTranslatePost = async () => {
+    if (!isPro || !customerId) return;
+
+    try {
+      const translation = await translate(
+        customerId,
+        "post",
+        sourceLanguage,
+        targetLanguage,
+        { postTitle: postDetail.title, postText: postDetail.text || "" },
+      );
+      setModal(
+        <TranslationModal 
+          originalText={`${postDetail.title}\n\n${postDetail.text || ""}`}
+          translatedText={translation}
+        />
+      );
+    } catch (error) {
+      alert("Failed to translate post. Please try again.");
+    }
+  };
+
   const getSummary = async () => {
     if (!isPro || !customerId) return;
     let postSummary = null;
@@ -359,6 +391,14 @@ export default function PostDetailsComponent({
         >
           <Feather name="share" size={28} color={theme.iconPrimary} />
         </TouchableOpacity>
+        {isPro && (
+          <TouchableOpacity
+            style={styles.buttonsContainer}
+            onPress={handleTranslatePost}
+          >
+            <MaterialCommunityIcons name="translate" size={28} color={theme.iconPrimary} />
+          </TouchableOpacity>
+        )}
       </View>
       {contextDepth > 0 && (
         <TouchableOpacity

components/RedditDataRepresentations/Post/PostParts/Comments.tsx

@@ -15,6 +15,7 @@ import React, {
   ForwardedRef,
   useRef,
   ComponentRef,
+  useCallback,
 } from "react";
 import {
   StyleSheet,
@@ -24,6 +25,7 @@ import {
   TouchableHighlight,
   Alert,
   Share,
+  Dimensions,
 } from "react-native";
 
 import {
@@ -35,19 +37,24 @@ import {
 } from "../../../../api/PostDetail";
 import { VoteOption } from "../../../../api/Posts";
 import { saveItem } from "../../../../api/Save";
+import { translate } from "../../../../api/AI";
 import { AccountContext } from "../../../../contexts/AccountContext";
 import { ModalContext } from "../../../../contexts/ModalContext";
 import { CommentSettingsContext } from "../../../../contexts/SettingsContexts/CommentSettingsContext";
 import { FiltersContext } from "../../../../contexts/SettingsContexts/FiltersContext";
 import { ThemeContext } from "../../../../contexts/SettingsContexts/ThemeContext";
+import { TranslationSettingsContext } from "../../../../contexts/SettingsContexts/TranslationSettingsContext";
+import { SubscriptionsContext } from "../../../../contexts/SubscriptionsContext";
 import { LoadMoreCommentsFunc } from "../../../../pages/PostDetails";
 import RedditURL from "../../../../utils/RedditURL";
 import { useURLNavigation } from "../../../../utils/navigation";
+import { HYDRA_SERVER_URL } from "../../../../constants/HydraServer";
 import useContextMenu from "../../../../utils/useContextMenu";
 import RenderHtml from "../../../HTML/RenderHTML";
 import EditComment from "../../../Modals/EditComment";
 import NewComment from "../../../Modals/NewComment";
 import SelectText from "../../../Modals/SelectText";
+import TranslationModal from "../../../Modals/TranslationModal";
 import Slideable from "../../../UI/Slideable";
 import { GesturesContext } from "../../../../contexts/SettingsContexts/GesturesContext";
 import Time from "../../../../utils/Time";
@@ -85,6 +92,8 @@ export function CommentComponent({
   );
   const { commentSwipeOptions } = useContext(GesturesContext);
   const { doesCommentPassTextFilter } = useContext(FiltersContext);
+  const { sourceLanguage, targetLanguage } = useContext(TranslationSettingsContext);
+  const { isPro, customerId } = useContext(SubscriptionsContext);
   const { pushURL } = useURLNavigation();
   const { setModal } = useContext(ModalContext);
   const { currentUser } = useContext(AccountContext);
@@ -187,6 +196,28 @@ export function CommentComponent({
     );
   };
 
+  const handleTranslateComment = async () => {
+    if (!isPro || !customerId) return;
+
+    try {
+      const translation = await translate(
+        customerId,
+        "comment",
+        sourceLanguage,
+        targetLanguage,
+        { comment: comment.text },
+      );
+      setModal(
+        <TranslationModal 
+          originalText={comment.text}
+          translatedText={translation}
+        />
+      );
+    } catch (error) {
+      alert("Failed to translate comment. Please try again.");
+    }
+  };
+
   const showCommentOptions = async () => {
     const options = [
       "Upvote",
@@ -197,6 +228,7 @@ export function CommentComponent({
       "Reply",
       ...(comment.saved ? ["Unsave"] : ["Save"]),
       ...(currentUser?.userName === comment.author ? ["Edit", "Delete"] : []),
+      ...(isPro ? ["Translate Text"] : []),
       "Share",
     ];
     const result = await showContextMenu({ options });
@@ -219,6 +251,8 @@ export function CommentComponent({
       confirmDeleteComment();
     } else if (result === "Select Text") {
       setModal(<SelectText text={comment.text} />);
+    } else if (result === "Translate Text" && isPro && customerId) {
+      handleTranslateComment();
     } else if (result === "Share") {
       Share.share({ url: new RedditURL(comment.link).toString() });
     }