@blocklet/discuss-kit-ux 2.3.83 → 2.3.85

package/dist/{index-h097ecr7.mjs → index-CIb6-P8d.mjs}

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled as styled$2 } from "@mui/material/styles";
 import { create as create$1, styled } from "@arcblock/ux/lib/Theme";
 import { useEffect, useRef, useState, createElement, useContext, useMemo, useLayoutEffect, useCallback, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
-import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$1, Button as Button$1, Stack as Stack$1, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, IconButton as IconButton$3, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Divider, Skeleton, InputBase, Badge as Badge$1, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$1, Button as Button$1, Stack as Stack$1, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, IconButton as IconButton$3, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Divider, Skeleton, InputBase, Badge as Badge$1, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, ToggleButtonGroup, ToggleButton, Link as Link$1 } from "@mui/material";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
 import { lazyWithPreload } from "react-lazy-with-preload";
@@ -18,7 +18,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useUpdate, useInViewport, useSetState, useCreation, useRequest, useLocalStorageState, useGetState, useReactive } from "ahooks";
-import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LocaleContext, useLocaleContext as useLocaleContext$1 } from "@arcblock/ux/lib/Locale/context";
 import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Alert from "@mui/material/Alert";
@@ -56,6 +56,11 @@ import MuiMenuItem from "@mui/material/MenuItem";
 import clsx from "clsx";
 import IconButton$2 from "@mui/material/IconButton";
 import MuiMenu from "@mui/material/Menu";
+import { InlineTranslationPlugin, useInlineTranslationStore } from "@blocklet/editor/lib/ext/InlineTranslationPlugin";
+import { createContainer } from "unstated-next";
+import murmurhash from "murmurhash";
+import { franc } from "franc-min";
+import { createAxios } from "@blocklet/js-sdk";
 import { EditorHolderProvider } from "@blocklet/editor/lib/ext/EditorHolderPlugin";
 import red from "@mui/material/colors/red";
 import Dialog$1 from "@arcblock/ux/lib/Dialog";
@@ -80,10 +85,11 @@ import { BusyPlugin } from "@blocklet/editor/lib/ext/BusyPlugin";
 import { AddonButton } from "@arcblock/ux/lib/Header/addon-button";
 import hotToast from "react-hot-toast";
 import MuiPagination from "@mui/material/Pagination";
-import { createContainer } from "unstated-next";
 import Cookie from "js-cookie";
 import { WsClient } from "@arcblock/ws";
 import { css } from "@emotion/css";
+import { create as create$2 } from "zustand";
+import { persist } from "zustand/middleware";
 const typography = {
   h1: {
     fontSize: "1.875rem",
@@ -319,7 +325,7 @@ const getBlockletMountPointInfo = (name) => {
   var _a2, _b2;
   return (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find((x) => x.name === name);
 };
-const blockletExists = (name) => {
+const blockletExists$1 = (name) => {
   const info = getBlockletMountPointInfo(name);
   return (info == null ? void 0 : info.status) === "running";
 };
@@ -389,7 +395,7 @@ const getPaymentKitMountPoint = () => {
 };
 const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  blockletExists,
+  blockletExists: blockletExists$1,
   copy,
   discussKitApiBaseUrl,
   discussKitMountPoint,
@@ -901,7 +907,7 @@ function RelativeTime({ value, autoUpdate, ...rest }) {
   return /* @__PURE__ */ jsx(UxRelativeTime, { value: v2, ...rest });
 }
 function EmptyStatus({ sx }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   return /* @__PURE__ */ jsx(
     Box$1,
     {
@@ -1244,7 +1250,7 @@ const useChatInWallet = () => {
 function ProfileCard({ user, click, ...rest }) {
   var _a2, _b2, _c2;
   const { session } = useSessionContext();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   let chatUrl = (user == null ? void 0 : user.did) && `/chat/dm/${user == null ? void 0 : user.did}`;
   if (chatUrl && ((_a2 = window.location.pathname) == null ? void 0 : _a2.includes(user == null ? void 0 : user.did))) {
     chatUrl = "";
@@ -1402,6 +1408,10 @@ const getUsername = (user, fallback2) => {
 const isValidUser = (user) => {
   return (user == null ? void 0 : user.did) && (user == null ? void 0 : user.fullName) && !isBlockletApp(user.did) && user.did !== window.blocklet.appId;
 };
+function blockletExists(dids) {
+  const blockletDids = Array.isArray(dids) ? dids : [dids];
+  return blockletDids.every((did) => blockletMountPointsByDid[did]);
+}
 function AuthorInfo({
   user,
   createdAt,
@@ -1600,7 +1610,7 @@ const Root$2 = styled("div")`
   }
 `;
 function ViewMore({ children, ...rest }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const [collapsed, setCollapsed] = useState(true);
   const [ref, { height }] = useMeasure();
   const _collapsed = collapsed && height > MAX_HEIGHT;
@@ -1762,6 +1772,139 @@ function Menu({ items = [], ...rest }) {
   ] });
 }
 Menu.Item = MuiMenuItem;
+const useLocaleContext = () => {
+  const { languages, ...rest } = useLocaleContext$1();
+  function getLanguageName(code) {
+    var _a2;
+    return ((_a2 = languages.find((x) => x.code === code)) == null ? void 0 : _a2.name) || code;
+  }
+  return {
+    languages,
+    getLanguageName,
+    ...rest
+  };
+};
+const AIGNE_RUNTIME_DID = "z2qaBP9SahqU2L2YA3ip7NecwKACMByTFuiJ2";
+const AIGNE_STUDIO_DID = "z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB";
+const DISCUSS_KIT_DID = "z8ia1WEiBZ7hxURf6LwH21Wpg99vophFwSJdu";
+const SUPPORTED_LANGUAGES = [
+  {
+    name: "English",
+    nativeName: "English",
+    iso639_1: "en",
+    iso639_3: "eng"
+  },
+  {
+    name: "Simplified Chinese",
+    nativeName: "简体中文",
+    iso639_1: "zh",
+    iso639_3: "cmn"
+  },
+  {
+    name: "Spanish",
+    nativeName: "Español",
+    iso639_1: "es",
+    iso639_3: "spa"
+  },
+  {
+    name: "Portuguese",
+    nativeName: "Português",
+    iso639_1: "pt",
+    iso639_3: "por"
+  },
+  {
+    name: "Russian",
+    nativeName: "Русский",
+    iso639_1: "ru",
+    iso639_3: "rus"
+  },
+  {
+    name: "Japanese",
+    nativeName: "日本語",
+    iso639_1: "ja",
+    iso639_3: "jpn"
+  },
+  {
+    name: "French",
+    nativeName: "Français",
+    iso639_1: "fr",
+    iso639_3: "fra"
+  },
+  {
+    name: "German",
+    nativeName: "Deutsch",
+    iso639_1: "de",
+    iso639_3: "deu"
+  },
+  {
+    name: "Korean",
+    nativeName: "한국어",
+    iso639_1: "ko",
+    iso639_3: "kor"
+  }
+];
+const languagesByIso6393 = new Map(SUPPORTED_LANGUAGES.map((lang) => [lang.iso639_3, lang]));
+function getLanguageByIso6393(iso639_3) {
+  return languagesByIso6393.get(iso639_3);
+}
+function hashText(text = "") {
+  return murmurhash.v3(text).toString(16);
+}
+const isInlineTranslationAvailable = blockletExists([AIGNE_RUNTIME_DID, AIGNE_STUDIO_DID, DISCUSS_KIT_DID]) && !!window.blocklet.preferences.inlineTranslatorAgentAid;
+function detectLanguage(src) {
+  const lang = franc(src, { only: SUPPORTED_LANGUAGES.map((x) => x.iso639_3), minLength: 2 });
+  return getLanguageByIso6393(lang) || null;
+}
+function detectLanguageIso6391(src) {
+  var _a2;
+  return ((_a2 = detectLanguage(src)) == null ? void 0 : _a2.iso639_1) || null;
+}
+const api = createAxios({
+  baseURL: discussKitApiBaseUrl,
+  timeout: 2e4
+});
+const translatePost = async ({
+  id: id2,
+  sourceItems,
+  targetLanguage,
+  targetLanguageName,
+  contentVersion,
+  useCache
+}) => {
+  const result = await api.post(`/posts/${id2}/translate`, {
+    sourceItems,
+    targetLanguage,
+    targetLanguageName,
+    contentVersion,
+    useCache
+  });
+  return result.data;
+};
+function PostAutoTranslatePlugin({ postId, updatedAt }) {
+  const { getLanguageName } = useLocaleContext();
+  if (!isInlineTranslationAvailable) {
+    return null;
+  }
+  const version = `${new Date(updatedAt).getTime()}`;
+  const translateService = (payload) => {
+    return translatePost({
+      ...payload,
+      targetLanguageName: getLanguageName(payload.targetLanguage),
+      id: postId,
+      contentVersion: version
+    });
+  };
+  return /* @__PURE__ */ jsx(InlineTranslationPlugin, { translateService, detectLanguage: detectLanguageIso6391 });
+}
+const usePostAutoTranslatePlugin = ({ postId, updatedAt }) => {
+  const value = useMemo(() => {
+    return {
+      plugin: /* @__PURE__ */ jsx(PostAutoTranslatePlugin, { postId, updatedAt })
+    };
+  }, [postId, updatedAt]);
+  return value;
+};
+const PostAutoTranslationContainer = createContainer(usePostAutoTranslatePlugin);
 const Root$1 = styled$2(Box$1)`
   .post-highlighted {
     animation: highlighted-post-fade 3s;
@@ -1796,13 +1939,14 @@ function PostComponent({
   showProfileCard,
   resolveAuthorInfoAppend = () => void 0,
   editorPlugins,
+  enableAutoTranslate,
   ...rest
 }) {
   var _a2;
   const { session, isAdmin } = useSessionContext();
   const isAuthor = post.author.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
   const commentUrl = window.location.hash.substring(1);
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const [editing, setEditing] = useState(false);
   const postContext = { isAdmin, isAuthor, interactive, post };
   const [inViewport] = useInViewport(() => document == null ? void 0 : document.getElementById(post.id));
@@ -1907,7 +2051,10 @@ function PostComponent({
             onExitEditing: () => setEditing(false),
             onSubmit: (content) => onContentUpdate(post, content),
             autoCollapse,
-            editorPrepend: editorPlugins
+            editorPrepend: /* @__PURE__ */ jsxs(Fragment, { children: [
+              editorPlugins,
+              enableAutoTranslate && /* @__PURE__ */ jsx(PostAutoTranslatePlugin, { postId: post.id, updatedAt: post.updatedAt || "" })
+            ] })
           },
           editing ? "comment-content" : post.synced || 0
         ) }),
@@ -1943,7 +2090,7 @@ function Confirm({
 }) {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const renderDesc = () => {
     if (isValidElement(description)) {
       return description;
@@ -2484,8 +2631,8 @@ const createApi = (request) => {
 };
 function GithubReactionContainer({ id: id2, request, ...rest }) {
   const { session } = useSessionContext();
-  const api = useCreation(() => createApi(request || axios.create({})), [request]);
-  const { data, loading, error } = useRequest(() => api.fetchRatings(id2), {
+  const api2 = useCreation(() => createApi(request || axios.create({})), [request]);
+  const { data, loading, error } = useRequest(() => api2.fetchRatings(id2), {
     refreshDeps: [id2]
   });
   const handleRate = async ({ ratingType, value }) => {
@@ -2493,14 +2640,14 @@ function GithubReactionContainer({ id: id2, request, ...rest }) {
       session.login();
       throw new Error("Unauthenticated.");
     }
-    await api.rate({ id: id2, ratingType, value });
+    await api2.rate({ id: id2, ratingType, value });
   };
   const handleUnrate = async () => {
     if (!session.user) {
       session.login();
       throw new Error("Unauthenticated.");
     }
-    await api.unrate({ id: id2 });
+    await api2.unrate({ id: id2 });
   };
   if (loading || error) {
     return null;
@@ -2518,10 +2665,11 @@ function Comment({
   renderDonation,
   renderActions,
   renderEditorPlugins,
+  enableAutoTranslate,
   ...rest
 }) {
   const { session } = useSessionContext();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const [inputVisible, setInputVisible] = useState(false);
   const { confirm } = useConfirm();
   const handleDelete = async (...args) => {
@@ -2621,7 +2769,8 @@ function Comment({
               resolveAuthorInfoAppend: rest.resolveAuthorInfoAppend,
               renderDonation,
               renderActions,
-              renderEditorPlugins
+              renderEditorPlugins,
+              enableAutoTranslate
             },
             item.id
           );
@@ -2657,7 +2806,8 @@ function Comment({
       customMenu,
       render,
       renderExtraContent,
-      editorPlugins: renderEditorPlugins == null ? void 0 : renderEditorPlugins(rest.post)
+      editorPlugins: renderEditorPlugins == null ? void 0 : renderEditorPlugins(rest.post),
+      enableAutoTranslate
     }
   ) });
 }
@@ -2730,7 +2880,7 @@ const CommentsContext = createContext({});
 const useCommentsContext = () => useContext(CommentsContext);
 function CommentsProvider({
   target,
-  api,
+  api: api2,
   flatView,
   children,
   order,
@@ -2744,6 +2894,7 @@ function CommentsProvider({
   renderDonation,
   renderActions,
   renderEditorPlugins,
+  enableAutoTranslate,
   renderInnerFooter
 }) {
   var _a2;
@@ -2779,14 +2930,14 @@ function CommentsProvider({
         return;
       }
       setState({ ...getInitialState(), order: state.order, initialized: false });
-      const fetchCommentPosition = () => api.fetchCommentPosition({
+      const fetchCommentPosition = () => api2.fetchCommentPosition({
         id: highlightedRef.current,
         objectId: target.id,
         order: state.order,
         includeReplies: flatView ? 1 : null
       });
       const [{ data, total, nextCursor }, positionRes, pinnedComments] = await Promise.all([
-        api.fetchComments({
+        api2.fetchComments({
           objectId: target.id,
           limit,
           order: state.order,
@@ -2794,7 +2945,7 @@ function CommentsProvider({
           initialRepliesLimit
         }),
         highlightedRef.current ? fetchCommentPosition() : -1,
-        api.fetchPinnedComments(target.id)
+        api2.fetchPinnedComments(target.id)
       ]);
       let position = -1;
       let cursor = highlightedRef.current;
@@ -2805,7 +2956,7 @@ function CommentsProvider({
         position = positionRes;
       }
       if (position > data.length - 1) {
-        const result = await api.fetchComments({
+        const result = await api2.fetchComments({
           objectId: target.id,
           limit,
           order: state.order,
@@ -2852,7 +3003,7 @@ function CommentsProvider({
     }
   };
   const loadMore = async (cursor) => {
-    const { data, total, nextCursor } = await api.fetchComments({
+    const { data, total, nextCursor } = await api2.fetchComments({
       objectId: target.id,
       limit,
       order: state.order,
@@ -2867,7 +3018,7 @@ function CommentsProvider({
     if (!state.highlighted) {
       return;
     }
-    const { data, total, nextCursor } = await api.fetchComments({
+    const { data, total, nextCursor } = await api2.fetchComments({
       objectId: target.id,
       limit,
       order: state.order,
@@ -2883,7 +3034,7 @@ function CommentsProvider({
     const root = commentsKeyById[rootId];
     if (root.replies) {
       const cursor = state.replyCursors[root.id] || ((_a3 = getLastItem(root.replies)) == null ? void 0 : _a3.id);
-      const { data, total, nextCursor } = await api.fetchComments({
+      const { data, total, nextCursor } = await api2.fetchComments({
         objectId: target.id,
         rootId,
         limit,
@@ -2927,19 +3078,19 @@ function CommentsProvider({
   };
   const updateComment = async (post, content) => {
     updateCommentState(post.id, (current) => ({ ...current, content }));
-    const { updatedAt } = await api.updateComment(post, content);
+    const { updatedAt } = await api2.updateComment(post, content);
     updateCommentState(post.id, (current) => ({ ...current, content, updatedAt }));
   };
   const deleteComment = async (post) => {
-    await api.deleteComment(post);
+    await api2.deleteComment(post);
     updateCommentState(post.id, (current) => ({ ...current, deletedAt: /* @__PURE__ */ new Date() }));
   };
   const reply = async (post, content) => {
-    const result = await api.reply(post, content);
+    const result = await api2.reply(post, content);
     setTimeout(() => add(result), 800);
   };
   const togglePin = async ({ post, value: value2 }) => {
-    await api.togglePin({ post, value: value2 });
+    await api2.togglePin({ post, value: value2 });
     updateCommentState(post.id, (current) => ({ ...current, pinnedAt: value2 ? /* @__PURE__ */ new Date() : null }));
   };
   const findById = (id2) => commentsKeyById[id2];
@@ -2959,7 +3110,7 @@ function CommentsProvider({
       loadMoreForTailSection,
       sort,
       add,
-      api,
+      api: api2,
       updateComment,
       deleteComment,
       reply,
@@ -2970,6 +3121,7 @@ function CommentsProvider({
       renderDonation,
       renderActions,
       renderEditorPlugins,
+      enableAutoTranslate,
       renderInnerFooter
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2983,7 +3135,7 @@ const LoadMoreButtonWrapper = styled$2(Box$1)`
   background-position: center;
 `;
 function SegmentalList({ ...rest }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const {
     state: { comments, nextCursor, highlighted },
     autoCollapse,
@@ -2997,7 +3149,7 @@ function SegmentalList({ ...rest }) {
     reply,
     togglePin,
     loadMoreReplies,
-    api
+    api: api2
   } = useCommentsContext();
   if (!highlighted) {
     return null;
@@ -3038,8 +3190,8 @@ function SegmentalList({ ...rest }) {
             post: comment,
             onDelete: deleteComment,
             onContentUpdate: updateComment,
-            onRate: api.rate,
-            onUnrate: api.unrate,
+            onRate: api2.rate,
+            onUnrate: api2.unrate,
             onReply: reply,
             onTogglePin: togglePin,
             onLoadMoreReplies: loadMoreReplies,
@@ -3065,7 +3217,7 @@ function SegmentalList({ ...rest }) {
   ] });
 }
 function CommentList(props) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const {
     state: { order, nextCursor, highlighted },
     comments,
@@ -3080,11 +3232,12 @@ function CommentList(props) {
     reply,
     togglePin,
     loadMoreReplies,
-    api,
+    api: api2,
     renderComments,
     renderDonation,
     renderActions,
-    renderEditorPlugins
+    renderEditorPlugins,
+    enableAutoTranslate
   } = useCommentsContext();
   if (highlighted) {
     return /* @__PURE__ */ jsx(SegmentalList, { ...props });
@@ -3095,8 +3248,8 @@ function CommentList(props) {
       post: comment,
       onDelete: deleteComment,
       onContentUpdate: updateComment,
-      onRate: api.rate,
-      onUnrate: api.unrate,
+      onRate: api2.rate,
+      onUnrate: api2.unrate,
       onReply: reply,
       onTogglePin: togglePin,
       onLoadMoreReplies: loadMoreReplies,
@@ -3107,6 +3260,7 @@ function CommentList(props) {
       renderDonation,
       renderActions,
       renderEditorPlugins,
+      enableAutoTranslate,
       ...restProps
     },
     comment.id
@@ -3186,7 +3340,7 @@ function UploaderTrigger({ onChange, children }) {
 }
 function UploaderProvider({ children }) {
   const uploaderRef = useRef(null);
-  const { locale } = useLocaleContext();
+  const { locale } = useLocaleContext$1();
   window.uploaderRef = uploaderRef;
   return /* @__PURE__ */ jsxs(UploaderContext.Provider, { value: uploaderRef, children: [
     children,
@@ -3439,7 +3593,7 @@ function BlogItem({
   var _a2;
   const theme = useTheme();
   const downMd = useMediaQuery$1(theme.breakpoints.down("md"));
-  const { locale } = useLocaleContext();
+  const { locale } = useLocaleContext$1();
   const navigate = useNavigate();
   const coverImgWidths = { xs: 84, md: 180, lg: 200 };
   const coverImgWidth = useResponsiveValue(coverImgWidths);
@@ -4321,7 +4475,7 @@ function ChannelGroup({ size = "normal", chat, children, ...rest }) {
   ] });
 }
 function ChatList({ inWallet, ...rest }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const { orderedChats, activeChatId, setActiveChat, getOppositeUser, getLastMessageText } = useChatContext();
   const { chatUnreadCounts } = useUnreadNotification();
   const { navigateToChat } = useChatInWallet();
@@ -4439,7 +4593,7 @@ const baseItemSx = {
 };
 function Message({ message, prevMessage, showTime = true, ...rest }) {
   var _a2, _b2;
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const { session, isAdmin } = useSessionContext();
   const { confirm } = useConfirm();
   const { activeChatId, deleteMessage, isInWallet, renderMessage } = useChatContext();
@@ -4551,7 +4705,7 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
 }
 function NotificationMessage({ chat, message, prevMessage }) {
   const { session } = useSessionContext();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const renderQuote = ({ title, cover }) => {
     if ("post" in message) {
       return /* @__PURE__ */ jsxs(Box$1, { sx: { color: 14, mt: 1 }, children: [
@@ -4740,7 +4894,7 @@ const checkIsAtBottom = (element) => {
 const MessageList = forwardRef(({ chat, ...rest }, ref) => {
   var _a2, _b2, _c2;
   const { isActiveChat, loadMessages } = useChatContext();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const isActive = isActiveChat(chat.id);
   const containerRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -5004,7 +5158,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
 const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
-const Editor = lazyRetry(() => import("./editor-gidK4SQd.mjs"));
+const Editor = lazyRetry(() => import("./editor-CdK8tIVK.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -5143,7 +5297,7 @@ function ShortcutPlugin({ callback }) {
   return null;
 }
 function ChatInput({ initialContent, send, onContentChange, onFocusChange }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const [content, setContent] = useState("");
   const [lastSent, setLastSent] = useState(0);
   const [toolbarVisible, setToolbarVisible] = useLocalStorageState("chat-input-toolbar-visible", {
@@ -5322,7 +5476,7 @@ function RoomTitle({ title }) {
 function ChatRoom({ chat, inWallet, ...rest }) {
   var _a2;
   const { isChatInWalletV2 } = useChatInWallet();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const theme = useTheme();
   const downSm = useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
   const {
@@ -5635,7 +5789,7 @@ function UserSearch({ sx, inputSx, ...rest }) {
   ] });
 }
 function Empty$2({ sx }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const mergedSx = [
     {
       display: "flex",
@@ -5667,7 +5821,7 @@ function Chat({ sx, ChannelEditComponent, ...rest }) {
     setEditingChannel
   } = useChatContext();
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const activeChat = (_a2 = chats == null ? void 0 : chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)) == null ? void 0 : _a2[0];
   const webTitleMap = {
     dm: () => {
@@ -5787,7 +5941,7 @@ function Chat({ sx, ChannelEditComponent, ...rest }) {
   ] });
 }
 function Empty$1({ sx }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const mergedSx = [
     {
       display: "flex",
@@ -5835,7 +5989,7 @@ function ChatInWallet({ sx, ...rest }) {
   ] }) });
 }
 function Empty({ sx }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const mergedSx = [
     {
       display: "flex",
@@ -6108,7 +6262,7 @@ if (isInArcSphere) {
 }
 const useDefaultApiErrorHandler = (options) => {
   const { request, onError } = options;
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const showError = (msg, toastOptions) => {
     toast.error(msg, toastOptions);
   };
@@ -6195,7 +6349,7 @@ function DefaultEditorConfigProvider({
     const AI = {
       checkAvailable: async () => {
         var _a3;
-        if (downMd || !blockletExists("ai-kit")) {
+        if (downMd || !blockletExists$1("ai-kit")) {
           return false;
         }
         try {
@@ -6357,7 +6511,7 @@ const useDirtySources = () => {
   return { dirty };
 };
 const useDirtyPrompt = () => {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const [dirty, setDirty, getDirty] = useGetState(false);
   const { confirm } = useConfirm();
   const resetCallbackRef = useRef(null);
@@ -6398,7 +6552,7 @@ const useDirtyPrompt = () => {
 };
 const DirtyPromptContainer = createContainer(useDirtyPrompt);
 function ConfirmNavigation() {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const { dirty, reset } = DirtyPromptContainer.useContainer();
   const blocker = useBlocker(dirty);
   useEffect(() => {
@@ -12153,7 +12307,7 @@ const WsEvents = Object.freeze({
 });
 const usePointUpContext = () => useContext(PointUpContext);
 function PointUp({ points }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   return /* @__PURE__ */ jsxs(
     Box$1,
     {
@@ -12300,7 +12454,7 @@ function ButtonGroup({
   type,
   ...rest
 }) {
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const downSm = useMediaQuery$1((mainTheme) => mainTheme.breakpoints.down("sm"));
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -12571,7 +12725,7 @@ function Paywall({ children, cta, ...rest }) {
 }
 function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }) {
   const { session } = useSessionContext();
-  const { t } = useLocaleContext();
+  const { t } = useLocaleContext$1();
   const { data, loading } = useRequest(() => fetchPaymentLink({ type, redirect: window.location.href }));
   const paymentLink = paymentKitMountPoint && (data == null ? void 0 : data.link) ? joinURL(paymentKitMountPoint, data.link) : null;
   const loginAndReloadPage = () => {
@@ -12617,6 +12771,185 @@ function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }) {
     }
   );
 }
+const useAutoTranslateStore = create$2()(
+  persist(
+    (set, get) => ({
+      autoTranslate: false,
+      enableAutoTranslate: () => set({ autoTranslate: true }),
+      disableAutoTranslate: () => set({ autoTranslate: false }),
+      toggleAutoTranslate: (value) => set({ autoTranslate: value ?? !get().autoTranslate })
+    }),
+    {
+      name: "auto-translate"
+    }
+  )
+);
+const useTargetLanguage = () => {
+  const { locale, languages } = useLocaleContext$1();
+  const { session } = useSessionContext();
+  const preferredLanguage = languages.find((x) => {
+    var _a2;
+    return x.code === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.locale);
+  });
+  return (preferredLanguage == null ? void 0 : preferredLanguage.code) ?? locale;
+};
+const useTranslate = ({ text, enabled }) => {
+  const { getLanguageName } = useLocaleContext();
+  const targetLanguage = useTargetLanguage();
+  const targetLanguageName = getLanguageName(targetLanguage);
+  const key = useMemo(() => hashText(text), [text]);
+  const isTranslatedRef = useRef({});
+  const { data, loading, run } = useRequest(
+    async () => {
+      var _a2;
+      if (!text || !enabled) {
+        return "";
+      }
+      if (detectLanguageIso6391(text) === targetLanguage) {
+        return text;
+      }
+      try {
+        const { data: translations2 } = await minDelay(
+          api.post("/translate", {
+            pieces: [{ key, text }],
+            targetLanguage,
+            targetLanguageName
+          }),
+          500
+        );
+        return ((_a2 = translations2[0]) == null ? void 0 : _a2.translation) || text;
+      } catch (error) {
+        return text;
+      }
+    },
+    {
+      refreshDeps: [text, targetLanguage, key, enabled],
+      manual: true
+    }
+  );
+  useEffect(() => {
+    if (enabled && !isTranslatedRef.current[targetLanguage]) {
+      isTranslatedRef.current[targetLanguage] = true;
+      run();
+    }
+  }, [enabled, run, targetLanguage]);
+  return {
+    translation: data,
+    key,
+    loading
+  };
+};
+function Translate({ text, children, sx, ...rest }) {
+  if (typeof children === "string" && !text) {
+    text = children;
+  }
+  const ref = useRef(null);
+  const [inViewport] = useInViewport(ref);
+  const autoTranslate = useAutoTranslateStore((s) => s.autoTranslate);
+  const enabled = !!inViewport && autoTranslate && isInlineTranslationAvailable;
+  const { translation, loading } = useTranslate({ text, enabled });
+  const mergedSx = [
+    {
+      "& .translate-loader": {
+        boxSizing: "border-box",
+        display: "inline-block",
+        width: 13,
+        height: 13,
+        ml: 0.5,
+        border: (theme) => `2px solid ${theme.palette.divider}`,
+        borderBottomColor: "transparent",
+        verticalAlign: "middle",
+        borderRadius: "50%",
+        animation: "rotation 1s linear infinite"
+      },
+      "@keyframes rotation": {
+        "0%": {
+          transform: "rotate(0deg)"
+        },
+        "100%": {
+          transform: "rotate(360deg)"
+        }
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const render = () => {
+    if (!enabled) {
+      return text;
+    }
+    if (loading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        text,
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "translate-loader" })
+      ] });
+    }
+    return translation;
+  };
+  return /* @__PURE__ */ jsx(Typography$1, { ref, sx: mergedSx, component: "span", ...rest, children: render() });
+}
+const tablerLanguage = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 5h7M9 3v2c0 4.418-2.239 8-5 8" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 9c0 2.144 2.952 3.908 6.7 4m.3 7l4-9l4 9m-.9-2h-6.2" })
+] }) });
+const tablerSettings = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" })
+] }) });
+const useEditorStoreAdapter = () => {
+  const { autoTranslate } = useAutoTranslateStore();
+  const setAutoTranslate = useInlineTranslationStore((s) => s.setAutoTranslate);
+  const showOriginal = useInlineTranslationStore((s) => s.showOriginal);
+  useEffect(() => {
+    setAutoTranslate(autoTranslate);
+    if (!autoTranslate) {
+      showOriginal();
+    }
+  }, [autoTranslate, setAutoTranslate, showOriginal]);
+};
+function withAiAvailabilityCheck(Component) {
+  return (props) => {
+    if (!isInlineTranslationAvailable) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  };
+}
+function InternalAutoTranslateHeaderAddon({ ...rest }) {
+  const { getLanguageName } = useLocaleContext();
+  const { autoTranslate, enableAutoTranslate, disableAutoTranslate } = useAutoTranslateStore();
+  const targetLanguage = useTargetLanguage();
+  const targetLanguageName = getLanguageName(targetLanguage);
+  const { session } = useSessionContext();
+  useEditorStoreAdapter();
+  if (!isInlineTranslationAvailable) {
+    return null;
+  }
+  const tooltipTitle = () => {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: 0.25 }, children: /* @__PURE__ */ jsxs(Typography$1, { variant: "body2", sx: { fontSize: 13 }, children: [
+      "Automatic translation is ",
+      autoTranslate ? "enabled" : "disabled",
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+        "Target language: ",
+        targetLanguageName,
+        !!(session == null ? void 0 : session.user) && /* @__PURE__ */ jsx(Link$1, { href: "/.well-known/service/user/settings", sx: { lineHeight: 1 }, children: /* @__PURE__ */ jsx(Box, { component: tablerSettings, sx: { fontSize: 12 } }) })
+      ] })
+    ] }) });
+  };
+  return /* @__PURE__ */ jsx(Tooltip$1, { title: tooltipTitle(), children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    AddonButton,
+    {
+      ...autoTranslate && {
+        color: "primary",
+        variant: "contained",
+        sx: { color: "primary.contrastText" }
+      },
+      icon: /* @__PURE__ */ jsx(tablerLanguage, {}),
+      ...rest,
+      onClick: () => autoTranslate ? disableAutoTranslate() : enableAutoTranslate()
+    }
+  ) }) });
+}
+const AutoTranslateHeaderAddon = withAiAvailabilityCheck(InternalAutoTranslateHeaderAddon);
 export {
   ChatInWallet as $,
   Avatar as A,
@@ -12669,6 +13002,16 @@ export {
   isBlockletApp as aJ,
   getUsername as aK,
   isValidUser as aL,
+  blockletExists as aM,
+  isInlineTranslationAvailable as aN,
+  useTranslate as aO,
+  Translate as aP,
+  AutoTranslateHeaderAddon as aQ,
+  PostAutoTranslatePlugin as aR,
+  PostAutoTranslationContainer as aS,
+  useAutoTranslateStore as aT,
+  useTargetLanguage as aU,
+  useEditorStoreAdapter as aV,
   ConfirmProvider as aa,
   SecureLabelPicker as ab,
   useApiErrorHandler as ac,