@blocklet/discuss-kit-ux 2.4.36 → 2.4.37

package/dist/axios.d.ts

@@ -0,0 +1,8 @@
+import { AxiosRequestConfig as OriginalAxiosRequestConfig } from 'axios';
+
+// https://github.com/axios/axios/pull/1964#issuecomment-903983962
+declare module 'axios' {
+  export interface AxiosRequestConfig extends OriginalAxiosRequestConfig {
+    muteError?: boolean;
+  }
+}

package/dist/blocklets.d.ts

@@ -1,5 +1,5 @@
 export declare const blockletMountPointsByDid: {
-    [k: string]: ComponentMountPoint;
+    [k: string]: any;
 };
 export declare const isBlockletApp: (did: string) => boolean;
 export declare const getUsername: (user: {

package/dist/blocklets.mjs

@@ -0,0 +1,17 @@
+const blockletMountPoints = window.blocklet.componentMountPoints;
+export const blockletMountPointsByDid = Object.fromEntries(blockletMountPoints.map((x) => [x.did, x]));
+export const isBlockletApp = (did) => !!blockletMountPointsByDid[did];
+export const getUsername = (user, fallback) => {
+  const username = user?.fullName || fallback;
+  if (username) {
+    return username;
+  }
+  return isBlockletApp(user?.did || "") ? "System" : "Unknown";
+};
+export const isValidUser = (user) => {
+  return user?.did && user?.fullName && !isBlockletApp(user.did) && user.did !== window.blocklet.appId;
+};
+export function blockletExists(dids) {
+  const blockletDids = Array.isArray(dids) ? dids : [dids];
+  return blockletDids.every((did) => blockletMountPointsByDid[did]);
+}

package/dist/components/api-error-handler/api-error-handler.d.ts

@@ -1,4 +1,4 @@
-import { AxiosInstance, AxiosError } from 'axios';
+import type { AxiosInstance, AxiosError } from 'axios';
 export interface ApiError extends AxiosError {
     markAsHandled: Function;
 }

package/dist/components/api-error-handler/api-error-handler.mjs

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { jsonValidationInterceptor } from "./json-validation-interceptor.mjs";
+export const useApiErrorHandler = ({ request, errorHandler }) => {
+  const errorHandlerRef = useRef(errorHandler);
+  useEffect(() => {
+    errorHandlerRef.current = errorHandler;
+  }, [errorHandler]);
+  useEffect(() => {
+    const interceptor = request.interceptors.response.use(jsonValidationInterceptor, (error) => {
+      let handled = false;
+      error.markAsHandled = () => {
+        handled = true;
+      };
+      setTimeout(() => {
+        if (!handled && error.config?.muteError !== true) {
+          errorHandlerRef.current.handleError(error);
+        }
+      });
+      return Promise.reject(error);
+    });
+    return () => {
+      request.interceptors.response.eject(interceptor);
+    };
+  }, []);
+};

package/dist/components/api-error-handler/default-handler.mjs

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AxiosError } from "axios";
+import Box from "@mui/material/Box";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useApiErrorHandler } from "./api-error-handler.mjs";
+import { toast } from "../toast.mjs";
+export const useDefaultApiErrorHandler = (options) => {
+  const { request, onError } = options;
+  const { t } = useLocaleContext();
+  const showError = (msg, toastOptions) => {
+    toast.error(msg, toastOptions);
+  };
+  const showWarning = (msg, toastOptions) => {
+    toast.warning(msg, toastOptions);
+  };
+  const errorHandler = {
+    handleError(error) {
+      if (onError && onError(error)) {
+        return;
+      }
+      if (error.code === AxiosError.ETIMEDOUT || error.code === AxiosError.ECONNABORTED) {
+        showError(t("apiError.timeout"));
+        return;
+      }
+      if (error.response) {
+        const { response } = error;
+        const statusCode = response.status;
+        switch (statusCode) {
+          case 400: {
+            showError(t("apiError.400"));
+            break;
+          }
+          case 401: {
+            showError(t("apiError.401"));
+            break;
+          }
+          case 403: {
+            showError(t("apiError.403"));
+            break;
+          }
+          case 409: {
+            showWarning(
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Box, { children: t("apiError.409") }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  "(",
+                  t("apiError.staleTip"),
+                  ")"
+                ] })
+              ] }),
+              { duration: 1e4, style: { maxWidth: "500px" } }
+            );
+            break;
+          }
+          default: {
+            console.error("Unhandled error", error);
+          }
+        }
+      } else {
+        console.error("Unhandled error", error);
+      }
+    }
+  };
+  useApiErrorHandler({ request, errorHandler });
+};
+export const DefaultApiErrorHandler = ({ request }) => {
+  useDefaultApiErrorHandler({ request });
+  return null;
+};

package/dist/components/api-error-handler/index.mjs

@@ -0,0 +1,2 @@
+export { useApiErrorHandler } from "./api-error-handler.mjs";
+export * from "./default-handler.mjs";

package/dist/components/api-error-handler/json-validation-interceptor.d.ts

@@ -1,2 +1,2 @@
-import { AxiosResponse } from 'axios';
+import type { AxiosResponse } from 'axios';
 export declare const jsonValidationInterceptor: (response: AxiosResponse) => AxiosResponse<any, any>;

package/dist/components/api-error-handler/json-validation-interceptor.mjs

@@ -0,0 +1,9 @@
+import { AxiosError } from "axios";
+export const jsonValidationInterceptor = (response) => {
+  const { responseType } = response.config;
+  if ((!responseType || responseType === "json") && response.headers["content-type"] && response.headers["content-type"].indexOf("application/json") === -1) {
+    console.error(response);
+    throw new AxiosError("Invalid response", AxiosError.ERR_BAD_RESPONSE, response.config, response.request, response);
+  }
+  return response;
+};

package/dist/components/arcsphere/index.mjs

@@ -0,0 +1,51 @@
+import bridge from "@arcblock/bridge";
+import { useCallback } from "react";
+import { joinURL, withQuery, parseQuery } from "ufo";
+import { useSessionContext } from "../hooks/session.mjs";
+export const isInArcSphere = window?.navigator?.userAgent.indexOf("ArcSphere") > -1;
+export const isInArcSphereDialog = !!parseQuery(window.location.search).arcSphereDialog;
+function normalizeUrl(url) {
+  if (url.startsWith("/")) {
+    return withQuery(joinURL(window.origin, window.blocklet.prefix, url), { arcSphereDialog: 1 });
+  }
+  return url;
+}
+export const openArcSphereDialog = ({ url, type = "full", onClose }) => {
+  bridge.register("closePopupCallback", (arg) => {
+    onClose?.(arg);
+  });
+  bridge.call("arc__openPopup", {
+    url: normalizeUrl(url),
+    type
+  });
+};
+export const closeArcSphereDialog = (reason) => {
+  if (isInArcSphereDialog) {
+    bridge.call("arc__closePopup", {
+      callback: "closePopupCallback",
+      args: [reason || ""]
+    });
+  }
+};
+export const useArcSphereDialog = () => {
+  const { session } = useSessionContext();
+  const open = useCallback(
+    ({ authRequired = true, ...options }) => {
+      if (authRequired && !session.user) {
+        session.login(() => {
+          openArcSphereDialog(options);
+        });
+      } else {
+        openArcSphereDialog(options);
+      }
+    },
+    [session]
+  );
+  const close = useCallback((reason) => {
+    closeArcSphereDialog(reason);
+  }, []);
+  return {
+    open,
+    close
+  };
+};

package/dist/components/authz/access-control.d.ts

@@ -1,4 +1,18 @@
 /// <reference types="react" />
+interface SessionContextUser {
+    did: string;
+    fullName: string;
+    avatar: string;
+    passports: {
+        id: string;
+        name: string;
+        title: string;
+        role: string;
+    }[];
+    permissions: string[];
+    role: string;
+    locale: string;
+}
 interface AccessControlProps {
     authenticated?: boolean;
     permissions?: string | string[];
@@ -6,5 +20,5 @@ interface AccessControlProps {
     check?: (user: SessionContextUser) => boolean;
     children: React.ReactNode;
 }
-export default function AccessControl({ authenticated, permissions, roles, check, children, }: AccessControlProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AccessControl({ authenticated, permissions, roles, check, children }: AccessControlProps): import("react").JSX.Element | null;
 export {};

package/dist/components/authz/access-control.mjs

@@ -0,0 +1,15 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useAuthzContext } from "./context.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+export function AccessControl({ authenticated = true, permissions, roles, check, children }) {
+  const { session } = useSessionContext();
+  const { hasPermission, hasAnyPassport } = useAuthzContext();
+  if (authenticated && !session?.user) {
+    return null;
+  }
+  const permitted = hasPermission(permissions || "") && hasAnyPassport(roles || "") && (!check || check(session.user));
+  if (permitted) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return null;
+}

package/dist/components/authz/context.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type HasPermission = (perms: string | string[]) => boolean;
 interface AuthzProviderProps {
 }
@@ -8,5 +9,5 @@ interface AuthzContextValue {
     hasAnyPassport: (passports: string | string[]) => boolean;
 }
 export declare const useAuthzContext: () => AuthzContextValue;
-export declare const AuthzProvider: ({ ...rest }: AuthzProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthzProvider: ({ ...rest }: AuthzProviderProps) => import("react").JSX.Element;
 export {};

package/dist/components/authz/context.mjs

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useCallback } from "react";
+import { useSessionContext } from "../hooks/index.mjs";
+const AuthzContext = createContext({
+  permissions: [],
+  hasPermission: () => false,
+  isAdmin: false,
+  hasAnyPassport: () => false
+});
+export const useAuthzContext = () => useContext(AuthzContext);
+export const AuthzProvider = ({ ...rest }) => {
+  const { session, isAdmin, hasAnyPassport } = useSessionContext();
+  const permissions = useMemo(() => session?.user?.permissions || [], [session?.user?.permissions]);
+  const permissionSet = useMemo(() => new Set(permissions), [permissions]);
+  const hasPermission = useCallback(
+    (perms) => {
+      if (!perms || perms.length === 0) {
+        return true;
+      }
+      const permsArr = Array.isArray(perms) ? perms : [perms];
+      return permsArr.some((item) => permissionSet.has(item));
+    },
+    [permissionSet]
+  );
+  const value = useMemo(
+    () => ({ permissions, hasPermission, isAdmin, hasAnyPassport }),
+    [hasPermission, permissions, isAdmin, hasAnyPassport]
+  );
+  return /* @__PURE__ */ jsx(AuthzContext.Provider, { ...rest, value });
+};

package/dist/components/authz/index.d.ts

@@ -1,2 +1,2 @@
 export * from './context';
-export { default as AccessControl } from './access-control';
+export * from './access-control';

package/dist/components/authz/index.mjs

@@ -0,0 +1,2 @@
+export * from "./context.mjs";
+export * from "./access-control.mjs";

package/dist/components/auto-translate/api.d.ts

@@ -1,4 +1,4 @@
-export declare const api: import('axios').AxiosInstance;
+export declare const api: import("axios").AxiosInstance;
 interface TranslateItem {
     sid: string;
     text: string;

package/dist/components/auto-translate/api.mjs

@@ -0,0 +1,23 @@
+import { createAxios } from "@blocklet/js-sdk";
+import { discussKitApiBaseUrl } from "../utils.mjs";
+export const api = createAxios({
+  baseURL: discussKitApiBaseUrl,
+  timeout: 2e4
+});
+export const translatePost = async ({
+  id,
+  sourceItems,
+  targetLanguage,
+  targetLanguageName,
+  contentVersion,
+  useCache
+}) => {
+  const result = await api.post(`/posts/${id}/translate`, {
+    sourceItems,
+    targetLanguage,
+    targetLanguageName,
+    contentVersion,
+    useCache
+  });
+  return result.data;
+};

package/dist/components/auto-translate/auto-translate-button.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 interface Props {
 }
-export declare const AutoTranslateHeaderAddon: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const AutoTranslateHeaderAddon: (props: Props) => import("react").JSX.Element | null;
 export {};

package/dist/components/auto-translate/auto-translate-button.mjs

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AddonButton } from "@arcblock/ux/lib/Header/addon-button";
+import LanguageIcon from "virtual:icons/tabler/language";
+import SettingsIcon from "virtual:icons/tabler/settings";
+import { Box, Link, Tooltip, Typography } from "@mui/material";
+import { useAutoTranslateStore, useTargetLanguage } from "./store.mjs";
+import { useEditorStoreAdapter } from "./editor-store-adaptor.mjs";
+import { isInlineTranslationAvailable } from "./utils.mjs";
+import { withAiAvailabilityCheck } from "./with-availibility-check.mjs";
+import { useSessionContext } from "../hooks/session.mjs";
+import { useLocaleContext } from "../hooks/locale-context.mjs";
+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, { 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?.user && /* @__PURE__ */ jsx(Link, { href: "/.well-known/service/user/settings", sx: { lineHeight: 1 }, children: /* @__PURE__ */ jsx(Box, { component: SettingsIcon, sx: { fontSize: 12 } }) })
+      ] })
+    ] }) });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipTitle(), children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    AddonButton,
+    {
+      ...autoTranslate && {
+        color: "primary",
+        variant: "contained",
+        sx: { color: "primary.contrastText" }
+      },
+      icon: /* @__PURE__ */ jsx(LanguageIcon, {}),
+      ...rest,
+      onClick: () => autoTranslate ? disableAutoTranslate() : enableAutoTranslate()
+    }
+  ) }) });
+}
+export const AutoTranslateHeaderAddon = withAiAvailabilityCheck(InternalAutoTranslateHeaderAddon);

package/dist/components/auto-translate/editor-store-adaptor.mjs

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useInlineTranslationStore } from "@blocklet/editor/lib/ext/InlineTranslationPlugin";
+import { useAutoTranslateStore } from "./store.mjs";
+export 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]);
+};

package/dist/components/auto-translate/index.mjs

@@ -0,0 +1,6 @@
+export * from "./translate.mjs";
+export * from "./auto-translate-button.mjs";
+export * from "./post-auto-translate-plugin.mjs";
+export * from "./store.mjs";
+export * from "./editor-store-adaptor.mjs";
+export { isInlineTranslationAvailable } from "./utils.mjs";

package/dist/components/auto-translate/languages.mjs

@@ -0,0 +1,61 @@
+const SUPPORTED_LANGUAGES = [
+  {
+    name: "English",
+    nativeName: "English",
+    iso639_1: "en",
+    iso639_3: "eng"
+  },
+  {
+    name: "Simplified Chinese",
+    nativeName: "\u7B80\u4F53\u4E2D\u6587",
+    iso639_1: "zh",
+    iso639_3: "cmn"
+  },
+  {
+    name: "Spanish",
+    nativeName: "Espa\xF1ol",
+    iso639_1: "es",
+    iso639_3: "spa"
+  },
+  {
+    name: "Portuguese",
+    nativeName: "Portugu\xEAs",
+    iso639_1: "pt",
+    iso639_3: "por"
+  },
+  {
+    name: "Russian",
+    nativeName: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
+    iso639_1: "ru",
+    iso639_3: "rus"
+  },
+  {
+    name: "Japanese",
+    nativeName: "\u65E5\u672C\u8A9E",
+    iso639_1: "ja",
+    iso639_3: "jpn"
+  },
+  {
+    name: "French",
+    nativeName: "Fran\xE7ais",
+    iso639_1: "fr",
+    iso639_3: "fra"
+  },
+  {
+    name: "German",
+    nativeName: "Deutsch",
+    iso639_1: "de",
+    iso639_3: "deu"
+  },
+  {
+    name: "Korean",
+    nativeName: "\uD55C\uAD6D\uC5B4",
+    iso639_1: "ko",
+    iso639_3: "kor"
+  }
+];
+const languagesByIso6393 = new Map(SUPPORTED_LANGUAGES.map((lang) => [lang.iso639_3, lang]));
+export function getLanguageByIso6393(iso639_3) {
+  return languagesByIso6393.get(iso639_3);
+}
+export { SUPPORTED_LANGUAGES };

package/dist/components/auto-translate/post-auto-translate-plugin.d.ts

@@ -1,13 +1,14 @@
+/// <reference types="react" />
 interface Props {
     postId: string;
     updatedAt: Date | string;
 }
-export declare function PostAutoTranslatePlugin({ postId, updatedAt }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function PostAutoTranslatePlugin({ postId, updatedAt }: Props): import("react").JSX.Element | null;
 interface InitialState {
     postId: string;
     updatedAt: Date | string;
 }
-export declare const PostAutoTranslationContainer: import('unstated-next').Container<{
-    plugin: import("react/jsx-runtime").JSX.Element;
+export declare const PostAutoTranslationContainer: import("unstated-next").Container<{
+    plugin: import("react").JSX.Element;
 }, InitialState>;
 export {};

package/dist/components/auto-translate/post-auto-translate-plugin.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { InlineTranslationPlugin } from "@blocklet/editor/lib/ext/InlineTranslationPlugin";
+import { useMemo } from "react";
+import { createContainer } from "unstated-next";
+import { useLocaleContext } from "../hooks/locale-context.mjs";
+import { detectLanguageIso6391, isInlineTranslationAvailable } from "./utils.mjs";
+import { translatePost } from "./api.mjs";
+export 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;
+};
+export const PostAutoTranslationContainer = createContainer(usePostAutoTranslatePlugin);

package/dist/components/auto-translate/store.d.ts

@@ -6,15 +6,15 @@ interface Action {
     disableAutoTranslate: () => void;
     toggleAutoTranslate: (value?: boolean) => void;
 }
-export declare const useAutoTranslateStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<State & Action>, "persist"> & {
+export declare const useAutoTranslateStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<State & Action>, "persist"> & {
     persist: {
-        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<State & Action, State & Action>>) => void;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<State & Action, State & Action>>) => void;
         clearStorage: () => void;
         rehydrate: () => void | Promise<void>;
         hasHydrated: () => boolean;
         onHydrate: (fn: (state: State & Action) => void) => () => void;
         onFinishHydration: (fn: (state: State & Action) => void) => () => void;
-        getOptions: () => Partial<import('zustand/middleware').PersistOptions<State & Action, State & Action>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<State & Action, State & Action>>;
     };
 }>;
 export declare const useTargetLanguage: () => string;

package/dist/components/auto-translate/store.mjs

@@ -0,0 +1,23 @@
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { useSessionContext } from "../hooks/session.mjs";
+export const useAutoTranslateStore = create()(
+  persist(
+    (set, get) => ({
+      autoTranslate: false,
+      enableAutoTranslate: () => set({ autoTranslate: true }),
+      disableAutoTranslate: () => set({ autoTranslate: false }),
+      toggleAutoTranslate: (value) => set({ autoTranslate: value ?? !get().autoTranslate })
+    }),
+    {
+      name: "auto-translate"
+    }
+  )
+);
+export const useTargetLanguage = () => {
+  const { locale, languages } = useLocaleContext();
+  const { session } = useSessionContext();
+  const preferredLanguage = languages.find((x) => x.code === session?.user?.locale);
+  return preferredLanguage?.code ?? locale;
+};

package/dist/components/auto-translate/translate.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { TypographyProps } from '@mui/material';
 export declare const useTranslate: ({ text, enabled }: {
     text: string;
     enabled: boolean;
 }) => {
     translation: any;
-    key: string;
+    key: any;
     loading: boolean;
 };
 type Props<C extends React.ElementType> = {
@@ -12,5 +13,5 @@ type Props<C extends React.ElementType> = {
 } & TypographyProps<C, {
     component?: C;
 }>;
-export declare function Translate<C extends React.ElementType>({ text, children, sx, ...rest }: Props<C>): import("react/jsx-runtime").JSX.Element;
+export declare function Translate<C extends React.ElementType>({ text, children, sx, ...rest }: Props<C>): import("react").JSX.Element;
 export {};