@arcblock/ux 3.1.27 → 3.1.30

package/lib/UserCard/Cards/avatar-only.js

@@ -1,29 +1,18 @@
-import { jsx as a } from "react/jsx-runtime";
-import { InfoType as d } from "../types.js";
-import l from "../Content/tooltip-avatar.js";
-function u(i) {
-  const { user: r, infoType: n, avatarSize: o = 48, shouldShowHoverCard: f = !1, renderCardContent: e, ...t } = i;
-  return n === d.NameOnly ? /* @__PURE__ */ a(
-    l,
+import { jsx as s } from "react/jsx-runtime";
+import d from "../Content/tooltip-avatar.js";
+function p(r) {
+  const { user: o, infoType: f, avatarSize: t = 48, shouldShowHoverCard: a = !1, renderCardContent: e, ...n } = r;
+  return /* @__PURE__ */ s(
+    d,
     {
-      user: r,
-      avatarSize: o,
-      shouldShowHoverCard: !1,
+      user: o,
+      avatarSize: t,
+      shouldShowHoverCard: a,
       renderCardContent: e,
-      tooltipTitle: r.fullName || r.email || r.did,
-      ...t
-    }
-  ) : /* @__PURE__ */ a(
-    l,
-    {
-      user: r,
-      avatarSize: o,
-      shouldShowHoverCard: f,
-      renderCardContent: e,
-      ...t
+      ...n
     }
   );
 }
 export {
-  u as default
+  p as default
 };

package/lib/UserCard/Cards/index.js

@@ -1,16 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
-import { InfoType as a } from "../types.js";
-import i from "./name-only.js";
-import m from "./basic-info.js";
-function l({ ...r }) {
-  const { infoType: e = a.Minimal } = r;
-  switch (e) {
-    case a.NameOnly:
-      return /* @__PURE__ */ t(i, { ...r });
-    default:
-      return /* @__PURE__ */ t(m, { ...r });
-  }
+import a from "./basic-info.js";
+function i({ ...r }) {
+  return /* @__PURE__ */ t(a, { ...r });
 }
 export {
-  l as default
+  i as default
 };

package/lib/UserCard/Cards/social-actions.d.ts

@@ -0,0 +1,7 @@
+import { User, UserCardProps } from '../types';
+type SocialActionsProps = Pick<UserCardProps, 'showSocialActions' | 'session'> & {
+    user: User;
+};
+declare function SocialActions({ showSocialActions, session, user }: SocialActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export default SocialActions;
+export declare const ButtonWrapper: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "action" | "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/UserCard/Cards/social-actions.js

@@ -0,0 +1,112 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { useMemo as r } from "react";
+import { styled as C, Button as F, Box as M } from "@mui/material";
+import { useMemoizedFn as u } from "ahooks";
+import { joinURL as N } from "ufo";
+import w from "lodash/noop";
+import { Icon as U } from "@iconify/react";
+import k from "@mui/icons-material/Notifications";
+import v from "@mui/icons-material/NotificationsOff";
+import z from "../use-follow.js";
+import { useLocaleContext as h } from "../../Locale/context.js";
+import { translate as g } from "../../Locale/util.js";
+import { isSupportFollow as L } from "../../Util/index.js";
+const _ = {
+  zh: {
+    chat: "聊天",
+    follow: "关注",
+    unfollow: "取消关注",
+    follow_success: "关注成功",
+    unfollow_success: "取消关注成功"
+  },
+  en: {
+    chat: "Chat",
+    follow: "Follow",
+    unfollow: "Unfollow",
+    follow_success: "Follow success",
+    unfollow_success: "Unfollow success"
+  }
+}, P = () => {
+  const { componentMountPoints: o = [] } = window.blocklet || {};
+  return o.find((n) => n.name === "did-comments")?.mountPoint;
+};
+function j({
+  user: o,
+  showSocialActions: t,
+  session: n
+}) {
+  const { locale: i } = h() || { locale: "en" }, e = u((a, f = {}) => g(_, a, i, "en", f)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => P(), []), c = u(() => {
+    if (!d) {
+      n?.login(w, {
+        openMode: "redirect",
+        redirect: window.location.href
+      });
+      return;
+    }
+    window.open(N(l, `/chat/dm/${o?.did}`), "_blank");
+  });
+  return r(() => (typeof t == "boolean" ? !!t : t?.chat) && !!l, [t, l]) ? /* @__PURE__ */ m(
+    x,
+    {
+      className: "user-card__social-actions-chat",
+      variant: "outlined",
+      color: "inherit",
+      onClick: c,
+      children: [
+        /* @__PURE__ */ s(U, { icon: "tabler:message-dots", style: { marginRight: 4 } }),
+        e("chat")
+      ]
+    }
+  ) : null;
+}
+function B({
+  user: o,
+  showSocialActions: t,
+  session: n
+}) {
+  const { locale: i } = h() || { locale: "en" }, e = u((b, y = {}) => g(_, b, i, "en", y)), d = r(() => !!n?.user?.did, [n?.user?.did]), l = r(() => typeof t == "boolean" ? !!t : t?.follow, [t]), { followed: c, followUser: p, unfollowUser: a } = z({
+    user: o,
+    t: e,
+    isMySelf: !1,
+    visible: !!l
+  }), f = u(() => {
+    if (!d) {
+      n?.login(w, {
+        openMode: "redirect",
+        redirect: window.location.href
+      });
+      return;
+    }
+    c ? a(o.did) : p(o.did);
+  });
+  return l ? /* @__PURE__ */ m(
+    x,
+    {
+      className: "user-card__social-actions-follow",
+      variant: "outlined",
+      color: "inherit",
+      onClick: f,
+      children: [
+        c ? /* @__PURE__ */ s(v, { sx: { fontSize: 14, mr: 0.5 } }) : /* @__PURE__ */ s(k, { sx: { fontSize: 14, mr: 0.5 } }),
+        e(c ? "unfollow" : "follow")
+      ]
+    }
+  ) : null;
+}
+function Q({ showSocialActions: o, session: t, user: n }) {
+  const i = r(() => t?.user?.did === n?.did, [t?.user?.did, n?.did]), e = r(() => L(), []);
+  return i || !e || !o ? null : /* @__PURE__ */ m(M, { className: "user-card__social-actions", sx: { display: "flex", gap: 1 }, children: [
+    /* @__PURE__ */ s(j, { session: t, user: n, showSocialActions: o }),
+    /* @__PURE__ */ s(B, { session: t, user: n, showSocialActions: o })
+  ] });
+}
+const x = C(F)`
+  color: ${({ theme: o }) => o.palette.text.primary};
+  font-weight: 500;
+  border-color: ${({ theme: o }) => o.palette.grey[300]};
+  line-height: 1.5;
+`;
+export {
+  x as ButtonWrapper,
+  Q as default
+};

package/lib/UserCard/Content/minimal.js

@@ -1,27 +1,28 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { memo as x } from "react";
-import { Box as o, Typography as g } from "@mui/material";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { Box as r, Typography as g } from "@mui/material";
 import { DID as y } from "../../DID/index.js";
 import C from "./tooltip-avatar.js";
 import { renderTopRight as b } from "../components.js";
-import v from "./shorten-label.js";
-function W({ ...n }) {
+import S from "./shorten-label.js";
+import v from "../Cards/social-actions.js";
+function w({ ...a }) {
   const {
     user: e,
-    showDid: a,
+    showDid: s,
     didProps: l,
-    avatarSize: s,
-    shouldShowHoverCard: d,
-    renderCardContent: m,
+    avatarSize: d,
+    shouldShowHoverCard: m,
+    renderCardContent: c,
     renderTopRightContent: p,
-    topRightMaxWidth: c,
-    avatarProps: f,
-    shortenLabelProps: h,
-    renderName: i,
-    ...u
-  } = n;
-  return /* @__PURE__ */ r(
-    o,
+    topRightMaxWidth: f,
+    avatarProps: h,
+    shortenLabelProps: x,
+    renderName: n,
+    ...i
+  } = a;
+  return /* @__PURE__ */ o(
+    r,
     {
       className: "user-card__avatar-content",
       sx: {
@@ -30,56 +31,70 @@ function W({ ...n }) {
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ r(
-          o,
+        /* @__PURE__ */ o(
+          r,
           {
             sx: {
               display: "flex",
-              justifyContent: "flex-start",
+              justifyContent: "space-between",
               alignItems: "center",
               gap: 1,
               flex: 1,
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ t(
-                C,
-                {
-                  user: e,
-                  avatarSize: s,
-                  shouldShowHoverCard: d,
-                  renderCardContent: m,
-                  avatarProps: f,
-                  ...u
-                }
-              ),
-              /* @__PURE__ */ r(o, { children: [
+              /* @__PURE__ */ o(r, { sx: { display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, flex: 1 }, children: [
                 /* @__PURE__ */ t(
-                  g,
+                  C,
                   {
-                    variant: "subtitle1",
-                    className: "user-card__full-name-label",
-                    noWrap: !0,
-                    sx: {
-                      fontWeight: 500,
-                      color: "text.primary",
-                      fontSize: 18,
-                      lineHeight: 1.1
-                    },
-                    children: i ? i(e) : /* @__PURE__ */ t(v, { sx: { fontWeight: 500 }, ...h, children: e.fullName || e.email || e.did })
+                    user: e,
+                    avatarSize: d,
+                    shouldShowHoverCard: m,
+                    renderCardContent: c,
+                    avatarProps: h,
+                    ...i
                   }
                 ),
-                a && e.did ? /* @__PURE__ */ t(y, { did: e.did, size: 14, copyable: !0, compact: !0, locale: "en", sx: { lineHeight: 1.5 }, ...l ?? {} }) : null
-              ] })
+                /* @__PURE__ */ o(r, { children: [
+                  /* @__PURE__ */ t(
+                    g,
+                    {
+                      variant: "subtitle1",
+                      className: "user-card__full-name-label",
+                      noWrap: !0,
+                      sx: {
+                        fontWeight: 500,
+                        color: "text.primary",
+                        fontSize: 18,
+                        lineHeight: 1.1
+                      },
+                      children: n ? n(e) : /* @__PURE__ */ t(S, { sx: { fontWeight: 500 }, ...x, children: e.fullName || e.email || e.did })
+                    }
+                  ),
+                  s && e.did ? /* @__PURE__ */ t(
+                    y,
+                    {
+                      did: e.did,
+                      size: 14,
+                      copyable: !0,
+                      compact: !0,
+                      locale: "en",
+                      sx: { lineHeight: 1.5 },
+                      ...l ?? {}
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ t(v, { showSocialActions: i.showSocialActions, user: e, session: i.session })
             ]
           }
         ),
-        b(p, c)
+        b(p, f)
       ]
     }
   );
 }
-const D = x(W);
+const D = u(w);
 export {
   D as default
 };

package/lib/UserCard/index.d.ts

@@ -1,4 +1,6 @@
 import { User, UserCardProps } from './types';
+import { default as SocialActions } from './Cards/social-actions';
 export declare function createNameOnlyAvatar(user: User): string | null;
 declare function UserCard(props: UserCardProps): import("react/jsx-runtime").JSX.Element;
 export default UserCard;
+export { SocialActions };

package/lib/UserCard/index.js

@@ -1,11 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import { useRef as v, useState as C, useEffect as y, useMemo as P } from "react";
-import { CardType as o } from "./types.js";
-import A from "./Cards/avatar-only.js";
-import m from "./Cards/index.js";
-import D from "./Container/dialog.js";
-import S from "./Container/card.js";
-import w from "../Avatar/index.js";
+import { useRef as v, useState as A, useEffect as C, useMemo as S } from "react";
+import { CardType as d } from "./types.js";
+import y from "./Cards/avatar-only.js";
+import c from "./Cards/index.js";
+import w from "./Container/dialog.js";
+import P from "./Container/card.js";
+import D from "../Avatar/index.js";
+import { default as j } from "./Cards/social-actions.js";
 import { isUserDid as x, getUserByDid as U } from "./utils.js";
 function L(e) {
   if (!e) return null;
@@ -13,64 +14,66 @@ function L(e) {
   return e.fullName ? r = e.fullName.charAt(0).toUpperCase() : e.email ? r = e.email.split("@")[0].charAt(0).toUpperCase() : r = e.did ? e.did.charAt(0).toUpperCase() : "?", r;
 }
 function B(e) {
-  const { cardType: r = o.Detailed, showHoverCard: l } = e, u = l !== void 0 ? l : r === o.AvatarOnly, c = v(null), [i, f] = C(() => e.user || null);
-  y(() => {
+  const { cardType: r = d.Detailed, showHoverCard: l } = e, u = l !== void 0 ? l : r === d.AvatarOnly, m = v(null), [i, s] = A(() => e.user || null);
+  C(() => {
     let a = !0;
-    return e.user ? f(e.user) : e.did && x(e.did) && !e.user && U(e.did).then((d) => {
-      a && f(d || { fullName: "Anonymous", did: e.did, avatar: "" });
+    return e.user ? s(e.user) : e.did && x(e.did) && !e.user && U(e.did).then((n) => {
+      a && s(n || { fullName: "Anonymous", did: e.did, avatar: "" });
     }), () => {
       a = !1;
     };
   }, [e.did, e.user]);
-  const n = P(() => {
+  const o = S(() => {
     if (!i)
       return null;
-    const { avatar: a = "", ...d } = i;
+    const { avatar: a = "", ...n } = i;
     if (a) {
       const h = a.split("?")[1] || "";
       return {
-        ...d,
+        ...n,
         avatar: h ? a : `${a}?imageFilter=resize&w=48&h=48`
       };
     }
     return i;
   }, [i]);
-  if (!n)
-    return /* @__PURE__ */ t(w, { did: e.did, size: e.avatarSize, useProxyFallback: !0, ...e.avatarProps });
-  const s = () => /* @__PURE__ */ t(D, { sx: e.popupSx, children: /* @__PURE__ */ t(
-    m,
+  if (!o)
+    return /* @__PURE__ */ t(D, { did: e.did, size: e.avatarSize, useProxyFallback: !0, ...e.avatarProps });
+  const f = () => /* @__PURE__ */ t(w, { sx: e.popupSx, children: /* @__PURE__ */ t(
+    c,
     {
       ...e,
       shouldShowHoverCard: !1,
-      user: n,
+      user: o,
       avatarProps: e.popupAvatarProps,
       shortenLabelProps: e.popupShortenLabelProps || e.shortenLabelProps,
       renderFields: e.popupRenderFields,
       renderName: e.popupRenderName,
       infoType: e.popupInfoType || e.infoType,
       didProps: e.popupDidProps || e.didProps,
-      showDid: e.popupShowDid || e.showDid
+      showDid: e.popupShowDid || e.showDid,
+      showSocialActions: e.popupShowSocialActions === void 0 ? e.showSocialActions : e.popupShowSocialActions
     }
   ) });
-  return r === o.AvatarOnly ? /* @__PURE__ */ t(
-    A,
+  return r === d.AvatarOnly ? /* @__PURE__ */ t(
+    y,
     {
       ...e,
       shouldShowHoverCard: u,
-      renderCardContent: s,
-      user: n
+      renderCardContent: f,
+      user: o
     }
-  ) : /* @__PURE__ */ t(S, { containerRef: c, cardType: r, sx: e.sx, children: /* @__PURE__ */ t(
-    m,
+  ) : /* @__PURE__ */ t(P, { containerRef: m, cardType: r, sx: e.sx, children: /* @__PURE__ */ t(
+    c,
     {
       ...e,
       shouldShowHoverCard: u,
-      renderCardContent: s,
-      user: n
+      renderCardContent: f,
+      user: o
     }
   ) });
 }
 export {
+  j as SocialActions,
   L as createNameOnlyAvatar,
   B as default
 };

package/lib/UserCard/types.d.ts

@@ -3,6 +3,7 @@ import { SxProps, Theme, TooltipProps } from '@mui/material';
 import { DIDProps } from '../DID';
 import { AvatarProps } from '../Avatar';
 import { ShortenLabelProps } from './Content/shorten-label';
+import { Session } from '../type';
 type UserPublicInfo = {
     avatar: string;
     did: string;
@@ -85,11 +86,15 @@ export declare enum CardType {
     Detailed = "Detailed"
 }
 export declare enum InfoType {
-    NameOnly = "NameOnly",// 仅显示名称
     Minimal = "Minimal",// 极简模式，显示头像、名称和DID
     Basic = "Basic"
 }
+export type SocialActionProps = {
+    chat: boolean;
+    follow: boolean;
+};
 export interface UserCardProps {
+    session?: Session;
     user?: User;
     did?: string;
     cardType?: CardType;
@@ -114,6 +119,8 @@ export interface UserCardProps {
     popupRenderFields?: string[];
     renderTopRightContent?: () => React.ReactNode;
     topRightMaxWidth?: number;
+    showSocialActions?: SocialActionProps | boolean;
+    popupShowSocialActions?: SocialActionProps | boolean;
     renderCustomContent?: () => React.ReactNode;
     onAvatarClick?: (user: User, e?: React.MouseEvent<HTMLDivElement>) => void;
 }

package/lib/UserCard/types.js

@@ -1,15 +1,15 @@
 var r = /* @__PURE__ */ ((e) => (e.NoClear = "no_clear", e.ThirtyMinutes = "30_minutes", e.OneHour = "1_hour", e.FourHours = "4_hours", e.Today = "today", e.ThisWeek = "this_week", e.Custom = "custom", e))(r || {}), i = /* @__PURE__ */ ((e) => (e.Meeting = "meeting", e.Community = "community", e.Holiday = "holiday", e.OffSick = "off_sick", e.WorkingRemotely = "working_remotely", e))(i || {});
-const o = {
+const a = {
   small: 32,
   medium: 40,
   large: 48,
   xlarge: 64
 };
-var l = /* @__PURE__ */ ((e) => (e.AvatarOnly = "AvatarOnly", e.Detailed = "Detailed", e))(l || {}), a = /* @__PURE__ */ ((e) => (e.NameOnly = "NameOnly", e.Minimal = "Minimal", e.Basic = "Basic", e))(a || {});
+var l = /* @__PURE__ */ ((e) => (e.AvatarOnly = "AvatarOnly", e.Detailed = "Detailed", e))(l || {}), o = /* @__PURE__ */ ((e) => (e.Minimal = "Minimal", e.Basic = "Basic", e))(o || {});
 export {
-  o as AvatarSize,
+  a as AvatarSize,
   l as CardType,
   r as DurationEnum,
-  a as InfoType,
+  o as InfoType,
   i as StatusEnum
 };

package/lib/UserCard/use-follow.d.ts

@@ -0,0 +1,16 @@
+import { AxiosError } from 'axios';
+import { User } from './types';
+export declare const formatAxiosError: (err: AxiosError) => string;
+/**
+ * 登录用户与当前用户（userDid）的关注关系
+ */
+export default function useFollow({ user, t, isMySelf, visible, }: {
+    user: User;
+    t: (k: string) => string;
+    isMySelf: boolean;
+    visible: boolean;
+}): {
+    followed: boolean;
+    followUser: (this: unknown, followUserDid?: string | undefined) => Promise<void>;
+    unfollowUser: (this: unknown, unfollowUserDid?: string | undefined) => Promise<void>;
+};

package/lib/UserCard/use-follow.js

@@ -0,0 +1,67 @@
+import { useState as y, useMemo as f, useEffect as d } from "react";
+import { useMemoizedFn as w } from "ahooks";
+import U from "lodash/isNil";
+import { BlockletSDK as x } from "@blocklet/js-sdk";
+import u from "../Toast/index.js";
+const F = (r) => {
+  const { response: t } = r;
+  return t ? `Request failed: ${t.status} ${t.statusText}: ${JSON.stringify(t.data)}` : r.message;
+};
+function z({
+  user: r,
+  t,
+  isMySelf: n,
+  visible: m
+}) {
+  const [p, c] = y(!1), s = f(() => r?.did, [r]), i = f(() => Object.prototype.hasOwnProperty.call(r, "isFollowing") && !U(r.isFollowing), [r]), e = f(() => {
+    let o = null;
+    try {
+      o = new x();
+    } catch (l) {
+      console.error("Failed to initialize BlockletSDK:", l), o = null;
+    }
+    return o;
+  }, []), a = w(async () => {
+    if (!e) {
+      c(!1);
+      return;
+    }
+    try {
+      if (n) {
+        c(!0);
+        return;
+      }
+      const o = await e.user.isFollowingUser({ userDid: s });
+      c(o);
+    } catch (o) {
+      console.error(o);
+    }
+  }), g = w(async (o = s) => {
+    if (!(!e || n && o === s))
+      try {
+        await e.user.followUser({ userDid: o }), u.success(t("follow_success")), a();
+      } catch (l) {
+        console.error(l), u.error(F(l));
+      }
+  }), h = w(async (o = s) => {
+    if (!(!e || n && o === s))
+      try {
+        await e.user.unfollowUser({ userDid: o }), u.success(t("unfollow_success")), a();
+      } catch (l) {
+        console.error(l), u.error(F(l));
+      }
+  });
+  return d(() => {
+    m && s && !n && e && !i && a();
+  }, [a, s, n, e, i, m]), d(() => {
+    i && c(r?.isFollowing || !1);
+  }, [i, r]), {
+    followed: p,
+    followUser: g,
+    unfollowUser: h
+  };
+}
+export {
+  z as default,
+  F as formatAxiosError
+};

package/lib/Util/index.d.ts

@@ -106,3 +106,18 @@ export declare const cleanedObj: (obj: object) => import('lodash').Dictionary<an
  * @returns RGBA 颜色字符串 (例如: "rgba(255, 0, 0, 1)")
  */
 export declare function hexToRgba(hex: string, alpha?: number): string;
+export declare const getServerVersion: () => any;
+export declare const getUxPackageVersion: () => string;
+export declare const getJsSdkVersion: () => string;
+/**
+ * 比较两个版本号，version1 是否大于等于 version2
+ * @param {*} version1
+ * @param {*} version2
+ * @returns boolean
+ */
+export declare const compareVersions: (version1: string, version2: string) => boolean;
+/**
+ * 是否支持用户的 follow 关系
+ * 通过 server 的版本和 ux 的版本共同决定
+ */
+export declare const isSupportFollow: () => boolean;