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";
@@ -16,17 +16,17 @@ import { useInView } from "react-intersection-observer";
 import useModeration from "Hooks/useModeration";
 
 export interface NoteProps {
-    data?: TaggedRawEvent,
+  data?: TaggedRawEvent,
-    isThread?: boolean,
+  isThread?: boolean,
-    related: TaggedRawEvent[],
+  related: TaggedRawEvent[],
-    highlight?: boolean,
+  highlight?: boolean,
-    ignoreModeration?: boolean,
+  ignoreModeration?: boolean,
-    options?: {
+  options?: {
-        showHeader?: boolean,
+    showHeader?: boolean,
-        showTime?: boolean,
+    showTime?: boolean,
-        showFooter?: boolean
+    showFooter?: boolean
-    },
+  },
-    ["data-ev"]?: NEvent
+  ["data-ev"]?: NEvent
 }
 
 const HiddenNote = ({ children }: any) => {
@@ -47,150 +47,163 @@ const HiddenNote = ({ children }: any) => {
 
 
 export default function Note(props: NoteProps) {
-    const navigate = useNavigate();
+  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 ev = useMemo(() => parsedEvent ?? new NEvent(data), [data]);
-    const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
+  const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
-    const users = useUserProfiles(pubKeys);
+  const users = useUserProfiles(pubKeys);
-    const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
+  const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
-    const { isMuted } = useModeration()
+  const { isMuted } = useModeration()
-    const isOpMuted = isMuted(ev.PubKey)
+  const isOpMuted = isMuted(ev.PubKey)
-    const { ref, inView, entry } = useInView({ triggerOnce: true });
+  const { ref, inView, entry } = useInView({ triggerOnce: true });
-    const [extendable, setExtendable] = useState<boolean>(false);
+  const [extendable, setExtendable] = useState<boolean>(false);
-    const [showMore, setShowMore] = useState<boolean>(false);
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const [translated, setTranslated] = useState<Translation>();
 
-    const options = {
+  const options = {
-        showHeader: true,
+    showHeader: true,
-        showTime: true,
+    showTime: true,
-        showFooter: true,
+    showFooter: true,
-        ...opt
+    ...opt
-    };
+  };
 
-    const transformBody = useCallback(() => {
+  const transformBody = useCallback(() => {
-        let body = ev?.Content ?? "";
+    let body = ev?.Content ?? "";
-        if (deletions?.length > 0) {
+    if (deletions?.length > 0) {
-            return (<b className="error">Deleted</b>);
+      return (<b className="error">Deleted</b>);
-        }
+    }
-        return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
+    return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
-    }, [ev]);
+  }, [ev]);
 
-    useLayoutEffect(() => {
+  useLayoutEffect(() => {
-        if (entry && inView && extendable === false) {
+    if (entry && inView && extendable === false) {
-            let h = entry?.target.clientHeight ?? 0;
+      let h = entry?.target.clientHeight ?? 0;
-            if (h > 650) {
+      if (h > 650) {
-                setExtendable(true);
+        setExtendable(true);
-            }
+      }
-        }
+    }
-    }, [inView, entry, extendable]);
+  }, [inView, entry, extendable]);
 
-    function goToEvent(e: any, id: u256) {
+  function goToEvent(e: any, id: u256) {
-        if (!window.location.pathname.startsWith("/e/")) {
+    if (!window.location.pathname.startsWith("/e/")) {
-            e.stopPropagation();
+      e.stopPropagation();
-            navigate(eventLink(id));
+      navigate(eventLink(id));
-        }
+    }
+  }
+
+  function replyTag() {
+    if (ev.Thread === null) {
+      return null;
     }
 
-    function replyTag() {
+    const maxMentions = 2;
-        if (ev.Thread === null) {
+    let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
-            return null;
+    let mentions: { pk: string, name: string, link: ReactNode }[] = [];
-        }
+    for (let pk of ev.Thread?.PubKeys) {
-
+      const u = users?.get(pk);
-        const maxMentions = 2;
+      const npub = hexToBech32("npub", pk)
-        let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
+      const shortNpub = npub.substring(0, 12);
-        let mentions: {pk: string, name: string, link: ReactNode}[] = [];
+      if (u) {
-        for (let pk of ev.Thread?.PubKeys) {
+        mentions.push({
-            const u = users?.get(pk);
+          pk,
-            const npub = hexToBech32("npub", pk)
+          name: u.name ?? shortNpub,
-            const shortNpub = npub.substring(0, 12);
+          link: (
-            if (u) {
+            <Link to={`/p/${npub}`}>
-                mentions.push({
+              {u.name ? `@${u.name}` : shortNpub}
-                  pk,
+            </Link>
-                  name: u.name ?? shortNpub,
-                  link: (
-                    <Link to={`/p/${npub}`}>
-                      {u.name ? `@${u.name}` : shortNpub}
-                    </Link>
-                  )
-                });
-            } else {
-                mentions.push({
-                  pk,
-                  name: shortNpub,
-                  link: (
-                    <Link to={`/p/${npub}`}>
-                      {shortNpub}
-                    </Link>
-                  )
-                });
-            }
-        }
-        mentions.sort((a, b) => a.name.startsWith("npub") ? 1 : -1);
-        let othersLength = mentions.length - maxMentions
-        const renderMention = (m: any, idx: number) => {
-          return (
-            <>
-              {idx > 0 && ", "}
-              {m.link}
-            </>
           )
-        }
+        });
-        const pubMentions = mentions.length > maxMentions ?  (
+      } else {
-          mentions?.slice(0, maxMentions).map(renderMention)
+        mentions.push({
-        ) : mentions?.map(renderMention);
+          pk,
-        const others = mentions.length > maxMentions ? ` & ${othersLength} other${othersLength > 1 ? 's' : ''}` : ''
+          name: shortNpub,
-        return (
+          link: (
-            <div className="reply">
+            <Link to={`/p/${npub}`}>
-              {(mentions?.length ?? 0) > 0 ? (
+              {shortNpub}
-                <>
+            </Link>
-                  {pubMentions}
+          )
-                  {others}
+        });
-                </>
+      }
-              ) : replyId ? (
-                 hexToBech32("note", replyId)?.substring(0, 12) // todo: link
-              ) : ""}
-            </div>
-        )
     }
-
+    mentions.sort((a, b) => a.name.startsWith("npub") ? 1 : -1);
-    if (ev.Kind !== EventKind.TextNote) {
+    let othersLength = mentions.length - maxMentions
-        return (
+    const renderMention = (m: any, idx: number) => {
-            <>
+      return (
-                <h4>Unknown event kind: {ev.Kind}</h4>
+        <>
-                <pre>
+          {idx > 0 && ", "}
-                    {JSON.stringify(ev.ToObject(), undefined, '  ')}
+          {m.link}
-                </pre>
+        </>
-            </>
+      )
-        );
     }
-
+    const pubMentions = mentions.length > maxMentions ? (
-    function content() {
+      mentions?.slice(0, maxMentions).map(renderMention)
-        if (!inView) return null;
+    ) : mentions?.map(renderMention);
-        return (
+    const others = mentions.length > maxMentions ? ` & ${othersLength} other${othersLength > 1 ? 's' : ''}` : ''
-            <>
+    return (
-                {options.showHeader ?
+      <div className="reply">
-                    <div className="header flex">
+        {(mentions?.length ?? 0) > 0 ? (
-                        <ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag() ?? undefined} />
+          <>
-                        {options.showTime ?
+            {pubMentions}
-                            <div className="info">
+            {others}
-                                <NoteTime from={ev.CreatedAt * 1000} />
+          </>
-                            </div> : null}
+        ) : replyId ? (
-                    </div> : null}
+          hexToBech32("note", replyId)?.substring(0, 12) // todo: link
-                <div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
+        ) : ""}
-                    {transformBody()}
-                </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}
-            </>
-        )
-    }
-
-    const note =  (
-      <div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`} ref={ref}>
-          {content()}
       </div>
     )
+  }
 
-    return !ignoreModeration && isOpMuted ? <HiddenNote>{note}</HiddenNote> : note
+  if (ev.Kind !== EventKind.TextNote) {
+    return (
+      <>
+        <h4>Unknown event kind: {ev.Kind}</h4>
+        <pre>
+          {JSON.stringify(ev.ToObject(), undefined, '  ')}
+        </pre>
+      </>
+    );
+  }
+
+  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 (
+      <>
+        {options.showHeader ?
+          <div className="header flex">
+            <ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag() ?? undefined} />
+            {options.showTime ?
+              <div className="info">
+                <NoteTime from={ev.CreatedAt * 1000} />
+              </div> : null}
+          </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} onTranslated={(t) => setTranslated(t)} /> : null}
+      </>
+    )
+  }
+
+  const note = (
+    <div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`} ref={ref}>
+      {content()}
+    </div>
+  )
+
+  return !ignoreModeration && isOpMuted ? <HiddenNote>{note}</HiddenNote> : note
 }

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} />
@@ -206,10 +243,10 @@ export default function NoteFooter(props: NoteFooterProps) {
           </div>
         </div>
         <Menu menuButton={<div className="reaction-pill">
-            <div className="reaction-pill-icon">
+          <div className="reaction-pill-icon">
-              <Dots />
+            <Dots />
-            </div>
+          </div>
-          </div>}
+        </div>}
           menuClassName="ctx-menu"
         >
           {menuItems()}

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";