@blocklet/discuss-kit-ux-lite 2.6.0

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

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

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

@@ -0,0 +1,103 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+import { useInViewport, useRequest } from "ahooks";
+import { useEffect, useMemo, useRef } from "react";
+import { detectLanguageIso6391, hashText, isInlineTranslationAvailable } from "./utils.mjs";
+import { useAutoTranslateStore, useTargetLanguage } from "./store.mjs";
+import { api } from "./api.mjs";
+import { useLocaleContext } from "../hooks/locale-context.mjs";
+import { minDelay } from "../utils.mjs";
+export 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 () => {
+      if (!text || !enabled) {
+        return "";
+      }
+      if (detectLanguageIso6391(text) === targetLanguage) {
+        return text;
+      }
+      try {
+        const { data: translations } = await minDelay(
+          api.post("/translate", {
+            pieces: [{ key, text }],
+            targetLanguage,
+            targetLanguageName
+          }),
+          500
+        );
+        return translations[0]?.translation || text;
+      } catch (error) {
+        return text;
+      }
+    },
+    {
+      refreshDeps: [text, targetLanguage, key, enabled],
+      manual: true
+    }
+  );
+  useEffect(() => {
+    if (enabled && !isTranslatedRef.current[`${targetLanguage}-${key}`]) {
+      isTranslatedRef.current[`${targetLanguage}-${key}`] = true;
+      run();
+    }
+  }, [enabled, run, targetLanguage, key]);
+  return {
+    translation: data,
+    key,
+    loading
+  };
+};
+export function Translate({ text, children, sx, ...rest }) {
+  if (typeof children === "string" && !text) {
+    text = children;
+  }
+  text = text || "";
+  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, { ref, sx: mergedSx, component: "span", ...rest, children: render() });
+}

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

@@ -0,0 +1,4 @@
+export declare function hashText(text?: string): any;
+export declare const isInlineTranslationAvailable: boolean;
+export declare function detectLanguage(src: string): null;
+export declare function detectLanguageIso6391(src: string): null;

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

@@ -0,0 +1,14 @@
+import murmurhash from "murmurhash";
+import { AIGNE_RUNTIME_DID, AIGNE_STUDIO_DID, DISCUSS_KIT_DID } from "../../constants.mjs";
+import { blockletExists } from "../../blocklets.mjs";
+export function hashText(text = "") {
+  return murmurhash.v3(text).toString(16);
+}
+const autoTranslationAID = window.blocklet.preferences.inlineTranslatorAgentAid || window.blocklet.AUTO_TRANSLATION_AID;
+export const isInlineTranslationAvailable = blockletExists([AIGNE_RUNTIME_DID, AIGNE_STUDIO_DID, DISCUSS_KIT_DID]) && !!autoTranslationAID;
+export function detectLanguage(src) {
+  return null;
+}
+export function detectLanguageIso6391(src) {
+  return null;
+}

package/dist/components/auto-translate/with-availibility-check.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function withAiAvailabilityCheck<P extends object>(Component: React.ComponentType<P>): (props: P) => import("react").JSX.Element | null;

package/dist/components/auto-translate/with-availibility-check.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { isInlineTranslationAvailable } from "./utils.mjs";
+export function withAiAvailabilityCheck(Component) {
+  return (props) => {
+    if (!isInlineTranslationAvailable) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  };
+}

package/dist/components/avatars/author-info.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+import type { User } from '../../types';
+interface Props {
+    user: User;
+    newTitle?: string;
+    createdAt?: Date | string | React.ReactElement<any>;
+    append?: React.ReactNode;
+    size?: 'sm' | 'normal';
+    responsive?: boolean;
+    showProfileCard?: boolean;
+    showBadge?: boolean;
+    showDID?: boolean;
+    children?: React.ReactNode;
+    linkToProfile?: boolean;
+    onAvatarClick?: (defaultAction: Function) => void;
+    avatarSize?: number;
+    fontSize?: number;
+    copyable?: boolean;
+    sx?: SxProps;
+}
+export default function AuthorInfo({ user, createdAt, append, size, responsive, showProfileCard, showBadge, showDID, newTitle, children, linkToProfile, onAvatarClick, avatarSize, fontSize, copyable, sx, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/avatars/author-info.mjs

@@ -0,0 +1,178 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import DID from "@arcblock/ux/lib/DID";
+import { useNavigate } from "react-router-dom";
+import UserCard from "@arcblock/ux/lib/UserCard";
+import { CardType, InfoType } from "@arcblock/ux/lib/UserCard/types";
+import { useBrowser } from "@arcblock/react-hooks";
+import RelativeTime from "../shared/relative-time.mjs";
+import Badge from "./badge.mjs";
+import { ProfileCard } from "../profile-card/index.mjs";
+import { isInDiscussKitApp, mergeSx, openProfile } from "../utils.mjs";
+import { getUsername } from "../../blocklets.mjs";
+export default function AuthorInfo({
+  user,
+  createdAt,
+  append,
+  size = "normal",
+  responsive = false,
+  showProfileCard,
+  showBadge = true,
+  showDID = true,
+  newTitle = void 0,
+  children,
+  linkToProfile = true,
+  onAvatarClick,
+  avatarSize,
+  fontSize,
+  copyable,
+  sx,
+  ...rest
+}) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down("md"));
+  const navigate = useNavigate();
+  const { mobile } = useBrowser();
+  const sm = size === "sm";
+  const getMergedFontSize = () => {
+    if (fontSize) return fontSize;
+    if (sm) return 12;
+    if (showDID) return 14;
+    return 16;
+  };
+  let mergedFontSize = getMergedFontSize();
+  let mergedAvatarSize = avatarSize ?? (sm ? 40 : 48);
+  if (responsive && downMd) {
+    mergedFontSize = fontSize ?? 12;
+    mergedAvatarSize = avatarSize ?? 24;
+  }
+  const renderTime = () => {
+    if (!createdAt) {
+      return null;
+    }
+    if (isValidElement(createdAt)) {
+      return createdAt;
+    }
+    createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
+    return /* @__PURE__ */ jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
+  };
+  const canClick = linkToProfile && user?.did && user?.did !== window.blocklet.appId;
+  const click = (e) => {
+    const defaultAction = () => {
+      if (!canClick) return;
+      e?.stopPropagation?.();
+      e?.preventDefault?.();
+      setTimeout(() => {
+        if (isInDiscussKitApp) {
+          navigate(`/profile?did=${user?.did}`);
+        } else {
+          openProfile(user?.did);
+        }
+      }, 100);
+    };
+    if (onAvatarClick) {
+      onAvatarClick(defaultAction);
+      return;
+    }
+    defaultAction();
+  };
+  const BadgeRender = /* @__PURE__ */ jsx(
+    Badge,
+    {
+      startComponent: !downMd && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: {
+            display: "inline-block",
+            mx: 0.5
+          }
+        },
+        "dot"
+      ),
+      passports: user?.passports || [],
+      pointInfo: user?.pointInfo || {},
+      did: user?.did
+    }
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: mergeSx({ display: "flex", alignItems: "center", gap: 1.5, fontSize: mergedFontSize }, sx), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      UserCard,
+      {
+        user,
+        cardType: CardType.AvatarOnly,
+        infoType: InfoType.Minimal,
+        avatarSize: mergedAvatarSize,
+        onAvatarClick: (_, e) => click(e),
+        tooltipProps: {
+          leaveDelay: 100,
+          title: /* @__PURE__ */ jsx(ProfileCard, { user, click })
+        },
+        popupSx: {
+          borderColor: "#d0d7de",
+          borderRadius: 1,
+          p: 2,
+          width: 340
+        },
+        showDid: true,
+        showHoverCard: showProfileCard && !mobile.any
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: "author-info-title",
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            minHeight: 20,
+            flexWrap: "wrap",
+            lineHeight: 1.5
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", children: newTitle || getUsername(user) }),
+            createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    display: "inline-block",
+                    mx: 0.5
+                  },
+                  children: "\xB7"
+                }
+              ),
+              renderTime()
+            ] }),
+            append,
+            showBadge && !downMd && BadgeRender
+          ]
+        }
+      ),
+      showBadge && downMd && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            mt: 0.5
+          },
+          children: BadgeRender
+        }
+      ),
+      showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(
+        DID,
+        {
+          style: { lineHeight: 1.5, minHeight: 20, maxWidth: 250 },
+          size: mergedFontSize,
+          did: user?.did,
+          copyable
+        }
+      ),
+      children && /* @__PURE__ */ jsx(Box, { children })
+    ] })
+  ] });
+}

package/dist/components/avatars/avatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    src?: string;
+    [key: string]: any;
+}
+export default function Avatar({ src, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/avatars/avatar.mjs

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import DidAvatar from "@arcblock/did-connect-react/lib/Avatar";
+import { getResizedAvatar } from "../utils.mjs";
+export default function Avatar({ src, ...rest }) {
+  if (src && src.startsWith("data:")) {
+    src = src.replace(/\s/g, encodeURIComponent(" "));
+  }
+  return /* @__PURE__ */ jsx(DidAvatar, { src: src ? getResizedAvatar(src) : src, ...rest });
+}

package/dist/components/avatars/avatars.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AvatarGroupProps } from '@mui/material/AvatarGroup';
+import type { User } from '../../types';
+interface AvatarsProps extends Omit<AvatarGroupProps, 'variant'> {
+    users: User[];
+    variant?: 'circle' | 'rounded';
+    size?: number;
+}
+export default function Avatars({ users, variant, size, ...restProps }: AvatarsProps): import("react").JSX.Element;
+export {};

package/dist/components/avatars/avatars.mjs

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { styled } from "@arcblock/ux/lib/Theme";
+import AvatarGroup from "@mui/material/AvatarGroup";
+import { grey } from "@mui/material/colors";
+import Avatar from "./avatar.mjs";
+const Root = styled(AvatarGroup)`
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 0;
+  line-height: 1;
+  .avatars-item {
+    width: 16px;
+    transition: width 0.1s ease-in-out;
+    & .image {
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.palette.background.default} !important;
+    }
+  }
+
+  // use avatarGroup first is last
+  .avatars-item:first-of-type {
+    width: 24px;
+  }
+
+  .MuiAvatar-root {
+    width: 24px;
+    height: 24px;
+    z-index: 100;
+    margin-left: 0px;
+    font-size: 12px;
+    background-color: ${grey[400]};
+    font-weight: 500;
+    border: none;
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.palette.background.default} !important;
+  }
+
+  /* &:hover {
+    gap: 4px;
+    .avatars-item {
+      width: 24px;
+    }
+  } */
+`;
+export default function Avatars({ users, variant = "circle", size = 24, ...restProps }) {
+  return /* @__PURE__ */ jsx(Root, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, max: 999, ...restProps, children: users.map((user, index) => {
+    return /* @__PURE__ */ jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size, shape: "circle", variant }) }, index);
+  }) });
+}

package/dist/components/avatars/badge.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface Props {
+    passports?: string[];
+    pointInfo?: any;
+    did?: string;
+    spacing?: number;
+    startComponent?: any;
+    inProfile?: boolean;
+    emptyProps?: Record<string, any>;
+    showIconOnly?: boolean;
+    [key: string]: any;
+}
+export default function Badge({ startComponent, passports, pointInfo, did, spacing, inProfile, emptyProps, showIconOnly, ...restProps }: Props): import("react").JSX.Element | null;
+export {};

package/dist/components/avatars/badge.mjs

@@ -0,0 +1,178 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
+import groupBy from "lodash/groupBy";
+import flatMap from "lodash/flatMap";
+import uniqBy from "lodash/uniqBy";
+import Tooltip from "@mui/material/Tooltip";
+import trim from "lodash/trim";
+import Avatar from "@mui/material/Avatar";
+import BrokenImageIcon from "@mui/icons-material/BrokenImage";
+import { Icon } from "@iconify/react";
+import EmptyStatus from "../empty-status/empty-status.mjs";
+const iconStyle = {
+  width: 20,
+  height: 20
+};
+const iconOnlyStyle = {
+  width: 16,
+  height: 16,
+  padding: 2,
+  m: 0,
+  cursor: "pointer"
+};
+const animationHeight = 8;
+const getExtraAnimation = (value) => "";
+const formatKey = (key) => {
+  if (typeof key === "string") {
+    return trim(key.toLowerCase());
+  }
+  return "";
+};
+const badgeList = flatMap(
+  (window?.blocklet?.preferences?.badgeList || []).filter((item) => [true, "true"].includes(item.enabled)).map((item) => {
+    return {
+      ...item,
+      keyList: formatKey(item?.key)?.split(",")
+    };
+  }),
+  // split keyList to multiple items
+  (item) => {
+    return item?.keyList?.map((key) => {
+      return {
+        ...item,
+        key: formatKey(key)
+      };
+    });
+  }
+);
+const badgeMap = groupBy(badgeList, "key");
+export default function Badge({
+  startComponent,
+  passports,
+  pointInfo,
+  did,
+  spacing = 0.5,
+  inProfile = false,
+  emptyProps,
+  showIconOnly = false,
+  ...restProps
+}) {
+  const allBadges = [];
+  if (pointInfo?.grade) {
+    const { grade } = pointInfo;
+    const pointRuleBadge = badgeMap["point-rule-badge"]?.[0];
+    if (!grade.isDisabled && pointRuleBadge) {
+      allBadges.push({
+        ...pointRuleBadge,
+        badgeIcon: grade.icon,
+        badgeName: grade.name
+      });
+    }
+  }
+  passports?.forEach((passport) => {
+    allBadges.push(...badgeMap[formatKey(passport)] || []);
+  });
+  if (did) {
+    allBadges.push(...badgeMap[formatKey(did)] || []);
+  }
+  if (badgeMap["*"]) {
+    allBadges.push(...badgeMap["*"] || []);
+  }
+  const uniqBadges = uniqBy(allBadges, (item) => {
+    delete item.key;
+    return JSON.stringify(item);
+  });
+  if (inProfile && uniqBadges?.length <= 0) {
+    return /* @__PURE__ */ jsx(EmptyStatus, { ...emptyProps });
+  }
+  return uniqBadges.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    startComponent,
+    /* @__PURE__ */ jsx(
+      Stack,
+      {
+        direction: "row",
+        sx: {
+          flexWrap: "wrap",
+          marginTop: inProfile ? "24px" : ""
+        },
+        children: uniqBadges.map((item) => {
+          const { badgeName, badgeIcon, badgeColor, badgeBackground } = item;
+          let icon;
+          if (badgeIcon) {
+            const isHttpIcon = ["http", "/", "data"].some((prefix) => badgeIcon.startsWith(prefix));
+            const badgeIconStyle = showIconOnly ? iconOnlyStyle : iconStyle;
+            if (!isHttpIcon) {
+              icon = /* @__PURE__ */ jsx(Icon, { className: "badge-icon", icon: badgeIcon, color: badgeColor, style: { ...badgeIconStyle } });
+            } else {
+              icon = /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  className: "badge-icon",
+                  sx: {
+                    img: {
+                      userSelect: "none !important",
+                      WebkitUserSelect: "none !important",
+                      WebkitUserDrag: "none !important"
+                    },
+                    background: "transparent",
+                    ...badgeIconStyle
+                  },
+                  src: badgeIcon,
+                  children: /* @__PURE__ */ jsx(BrokenImageIcon, { sx: { ...badgeIconStyle, color: badgeColor } })
+                }
+              );
+            }
+          }
+          const onlyIcon = showIconOnly && icon;
+          return /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: onlyIcon ? null : badgeName,
+              size: "small",
+              icon: onlyIcon && !!icon ? /* @__PURE__ */ jsx(Tooltip, { title: badgeName, placement: "top", children: icon }) : icon,
+              sx: {
+                color: badgeColor,
+                background: badgeBackground,
+                userSelect: "none",
+                fontSize: 12,
+                px: 0.25,
+                mr: spacing,
+                ...!onlyIcon ? { my: "2px !important" } : { width: 20, height: 20 },
+                "@keyframes jump": {
+                  "0%": {
+                    transform: `translateY(0) ${getExtraAnimation()}`
+                  },
+                  "25%": {
+                    transform: `translateY(-${animationHeight}px) ${getExtraAnimation()}`
+                  },
+                  "50%": {
+                    transform: `translateY(0px) ${getExtraAnimation()}`
+                  },
+                  "75%": {
+                    transform: `translateY(-${animationHeight}px) ${getExtraAnimation()}`
+                  },
+                  "100%": {
+                    transform: `translateY(0) ${getExtraAnimation()}`
+                  }
+                },
+                "*": {
+                  transition: "all 0.2s ease-in-out"
+                },
+                ":hover": {
+                  ".badge-icon": {
+                    // animation: 'jump 2s infinite',
+                  }
+                },
+                ...onlyIcon ? { "& .MuiChip-label": { display: "none" }, "& .MuiChip-icon": { m: 0 } } : {}
+              },
+              ...restProps
+            },
+            badgeName
+          );
+        })
+      },
+      "badges"
+    )
+  ] }) : null;
+}

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

@@ -0,0 +1,5 @@
+export { default as Avatar } from './avatar';
+export { default as Avatars } from './avatars';
+export { default as AuthorInfo } from './author-info';
+export { default as SystemUser } from './system-user';
+export { default as Badge } from './badge';

package/dist/components/avatars/index.mjs

@@ -0,0 +1,5 @@
+export { default as Avatar } from "./avatar.mjs";
+export { default as Avatars } from "./avatars.mjs";
+export { default as AuthorInfo } from "./author-info.mjs";
+export { default as SystemUser } from "./system-user.mjs";
+export { default as Badge } from "./badge.mjs";

package/dist/components/avatars/system-user.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface Props {
+    name: string;
+    showDidAddress?: boolean;
+    showIcon?: boolean;
+    size?: 'sm' | 'normal';
+    icon?: React.ReactNode;
+}
+export default function SystemUser({ name, showDidAddress, showIcon, size, icon, ...rest }: Props): import("react").JSX.Element;
+export {};