feat: translate notes

src/Const.ts

@@ -5,6 +5,11 @@ import { RelaySettings } from "Nostr/Connection";
  */
 export const ApiHost = "https://api.snort.social";
 
+/**
+ * LibreTranslate endpoint
+ */
+export const TranslateHost = "https://translate.snort.social";
+
 /**
  * Void.cat file upload service url
  */

src/Element/Note.tsx

@@ -7,7 +7,7 @@ import ProfileImage from "Element/ProfileImage";
 import Text from "Element/Text";
 
 import { eventLink, getReactions, hexToBech32 } from "Util";
-import NoteFooter from "Element/NoteFooter";
+import NoteFooter, { Translation } from "Element/NoteFooter";
 import NoteTime from "Element/NoteTime";
 import EventKind from "Nostr/EventKind";
 import { useUserProfiles } from "Feed/ProfileFeed";
@@ -48,7 +48,7 @@ const HiddenNote = ({ children }: any) => {
 
 export default function Note(props: NoteProps) {
   const navigate = useNavigate();
-    const { data, isThread, related, highlight, options: opt, ["data-ev"]: parsedEvent, ignoreModeration = false} = props
+  const { data, isThread, related, highlight, options: opt, ["data-ev"]: parsedEvent, ignoreModeration = false } = props
   const ev = useMemo(() => parsedEvent ?? new NEvent(data), [data]);
   const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
   const users = useUserProfiles(pubKeys);
@@ -58,6 +58,7 @@ export default function Note(props: NoteProps) {
   const { ref, inView, entry } = useInView({ triggerOnce: true });
   const [extendable, setExtendable] = useState<boolean>(false);
   const [showMore, setShowMore] = useState<boolean>(false);
+  const [translated, setTranslated] = useState<Translation>();
 
   const options = {
     showHeader: true,
@@ -97,7 +98,7 @@ export default function Note(props: NoteProps) {
 
     const maxMentions = 2;
     let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
-        let mentions: {pk: string, name: string, link: ReactNode}[] = [];
+    let mentions: { pk: string, name: string, link: ReactNode }[] = [];
     for (let pk of ev.Thread?.PubKeys) {
       const u = users?.get(pk);
       const npub = hexToBech32("npub", pk)
@@ -163,6 +164,17 @@ export default function Note(props: NoteProps) {
     );
   }
 
+  function translation() {
+    if (translated && translated.confidence > 0.5) {
+      return <>
+        <p className="highlight">Translated from {translated.fromLanguage}:</p>
+        {translated.text}
+      </>
+    } else if (translated) {
+      return <p className="highlight">Translation failed</p>
+    }
+  }
+
   function content() {
     if (!inView) return null;
     return (
@@ -177,11 +189,12 @@ export default function Note(props: NoteProps) {
           </div> : null}
         <div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
           {transformBody()}
+          {translation()}
         </div>
         {extendable && !showMore && (<div className="flex f-center">
           <button className="show-more" onClick={() => setShowMore(true)}>Show more</button>
         </div>)}
-                {options.showFooter ? <NoteFooter ev={ev} related={related} /> : null}
+        {options.showFooter ? <NoteFooter ev={ev} related={related} onTranslated={(t) => setTranslated(t)} /> : null}
       </>
     )
   }

src/Element/NoteFooter.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { faTrash, faRepeat, faShareNodes, faCopy, faCommentSlash, faBan } from "@fortawesome/free-solid-svg-icons";
+import { faTrash, faRepeat, faShareNodes, faCopy, faCommentSlash, faBan, faLanguage } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, MenuItem } from '@szhsin/react-menu';
 
@@ -21,10 +21,18 @@ import { HexKey, TaggedRawEvent } from "Nostr";
 import EventKind from "Nostr/EventKind";
 import { UserPreferences } from "State/Login";
 import useModeration from "Hooks/useModeration";
+import { TranslateHost } from "Const";
+
+export interface Translation {
+  text: string,
+  fromLanguage: string,
+  confidence: number
+}
 
 export interface NoteFooterProps {
   related: TaggedRawEvent[],
-  ev: NEvent
+  ev: NEvent,
+  onTranslated?: (content: Translation) => void
 }
 
 export default function NoteFooter(props: NoteFooterProps) {
@@ -38,6 +46,8 @@ export default function NoteFooter(props: NoteFooterProps) {
   const [reply, setReply] = useState(false);
   const [tip, setTip] = useState(false);
   const isMine = ev.RootPubKey === login;
+  const lang = window.navigator.language;
+  const langNames = new Intl.DisplayNames([...window.navigator.languages], { type: "language" });
   const reactions = useMemo(() => getReactions(related, ev.Id, EventKind.Reaction), [related, ev]);
   const reposts = useMemo(() => getReactions(related, ev.Id, EventKind.Repost), [related, ev]);
   const groupReactions = useMemo(() => {
@@ -144,6 +154,29 @@ export default function NoteFooter(props: NoteFooterProps) {
     }
   }
 
+  async function translate() {
+    const res = await fetch(`${TranslateHost}/translate`, {
+      method: "POST",
+      body: JSON.stringify({
+        q: ev.Content,
+        source: "auto",
+        target: "en"
+      }),
+      headers: { "Content-Type": "application/json" }
+    });
+
+    if (res.ok) {
+      let result = await res.json();
+      if (typeof props.onTranslated === "function" && result) {
+        props.onTranslated({
+          text: result.translatedText,
+          fromLanguage: langNames.of(result.detectedLanguage.language),
+          confidence: result.detectedLanguage.confidence
+        } as Translation);
+      }
+    }
+  }
+
   async function copyId() {
     await navigator.clipboard.writeText(hexToBech32("note", ev.Id));
   }
@@ -179,6 +212,10 @@ export default function NoteFooter(props: NoteFooterProps) {
           <FontAwesomeIcon icon={faBan} />
           Block
         </MenuItem>
+        <MenuItem onClick={() => translate()}>
+          <FontAwesomeIcon icon={faLanguage} />
+          Translate to {langNames.of(lang.split("-")[0])}
+        </MenuItem>
         {prefs.showDebugMenus && (
           <MenuItem onClick={() => copyEvent()}>
             <FontAwesomeIcon icon={faCopy} />

src/Pages/settings/Profile.tsx

@@ -9,7 +9,6 @@ import { faShop } from "@fortawesome/free-solid-svg-icons";
 
 import useEventPublisher from "Feed/EventPublisher";
 import { useUserProfile } from "Feed/ProfileFeed";
-import VoidUpload from "Feed/VoidUpload";
 import LogoutButton from "Element/LogoutButton";
 import { hexToBech32, openFile } from "Util";
 import Copy from "Element/Copy";