@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/rating/github-reaction-container.mjs

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import axios from "axios";
+import { useCreation, useRequest } from "ahooks";
+import GithubReaction from "./github-reaction.mjs";
+import { discussKitApiBaseUrl } from "../utils.mjs";
+import { useSessionContext } from "../hooks/session.mjs";
+const baseConfig = { baseURL: discussKitApiBaseUrl };
+const createApi = (request) => {
+  return {
+    fetchRatings: async (id) => {
+      const { data } = await request.get(`/ratings/${id}`, baseConfig);
+      return data;
+    },
+    rate: async ({ id, ratingType, value }) => {
+      await request.post(`/topics/${id}/ratings`, { ratingType, value }, baseConfig);
+    },
+    unrate: async ({ id }) => {
+      await request.delete(`/topics/${id}/ratings`, baseConfig);
+    }
+  };
+};
+export function GithubReactionContainer({ id, request, ...rest }) {
+  const { session } = useSessionContext();
+  const api = useCreation(() => createApi(request || axios.create({})), [request]);
+  const { data, loading, error } = useRequest(() => api.fetchRatings(id), {
+    refreshDeps: [id]
+  });
+  const handleRate = async ({ ratingType, value }) => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.rate({ id, ratingType, value });
+  };
+  const handleUnrate = async () => {
+    if (!session.user) {
+      session.login();
+      throw new Error("Unauthenticated.");
+    }
+    await api.unrate({ id });
+  };
+  if (loading || error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(GithubReaction, { data, onRate: handleRate, onUnrate: handleUnrate, ...rest });
+}

package/dist/components/rating/github-reaction.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
-import { Rating as RatingType } from '../../types';
+import type { Rating as RatingType } from '../../types';
 export type GithubReactionProps = {
     data: RatingType[];
     onRate: ({ ratingType, value }: {
@@ -14,4 +15,4 @@ export type GithubReactionProps = {
  * GithubReaction 与 Rating 组件不兼容, 后者是 n 选 1, GithubReaction 是 n 选 m,
  * 所以 GithubReaction 相当于重写, 与 Rating 组件和 BinaryThumb 组件没有关系
  */
-export default function GithubReaction({ data, onRate, onUnrate, interactive, sx, ...rest }: GithubReactionProps): import("react/jsx-runtime").JSX.Element;
+export default function GithubReaction({ data, onRate, onUnrate, interactive, sx, ...rest }: GithubReactionProps): import("react").JSX.Element;

package/dist/components/rating/github-reaction.mjs

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Chip, ClickAwayListener, Tooltip, alpha } from "@mui/material";
+import MoodPlusIcon from "virtual:icons/tabler/mood-plus";
+import { useSessionContext } from "../hooks/index.mjs";
+import { IconButton } from "../icon-button.mjs";
+const emojiFont = {
+  fontFamily: '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color"'
+};
+export default function GithubReaction({
+  data,
+  onRate,
+  onUnrate,
+  interactive = true,
+  sx,
+  ...rest
+}) {
+  const { session } = useSessionContext();
+  const [open, setOpen] = useState(false);
+  const [raters, setRaters] = useState(null);
+  const [myReaction, setMyReaction] = useState(null);
+  const options = [
+    { value: "thumbs_up", label: "\u{1F44D}" },
+    { value: "thumbs_down", label: "\u{1F44E}" },
+    { value: "white_check_mark", label: "\u2705" },
+    { value: "laugh", label: "\u{1F604}" },
+    { value: "joy", label: "\u{1F602}" },
+    { value: "hooray", label: "\u{1F389}" },
+    { value: "heart", label: "\u2764\uFE0F" },
+    { value: "rocket", label: "\u{1F680}" },
+    { value: "eyes", label: "\u{1F440}" }
+  ];
+  const ratings = useMemo(() => {
+    const mapped = data.map((x) => {
+      if (x.value == "1" || x.value == "-1") {
+        return { ...x, value: x.value == "1" ? ["thumbs_up"] : ["thumbs_down"] };
+      }
+      return { ...x, value: x.value?.split(",") || [] };
+    });
+    if (session?.user?.did && myReaction) {
+      return [...mapped.filter((x) => x.rater?.did !== session.user.did), { rater: session.user, value: myReaction }];
+    }
+    return mapped;
+  }, [data, myReaction, session.user]);
+  const countPerValue = useMemo(() => {
+    return ratings.reduce((acc, cur) => {
+      cur.value.forEach((item) => {
+        acc[item] = (acc[item] || 0) + 1;
+      });
+      return acc;
+    }, {});
+  }, [ratings]);
+  const selectedValues = useMemo(() => {
+    return ratings.find((x) => x.rater?.did === session?.user?.did)?.value || [];
+  }, [ratings, session.user]);
+  const selectedValuesMap = useMemo(() => {
+    return selectedValues.reduce((acc, cur) => ({ ...acc, [cur]: true }), {});
+  }, [selectedValues]);
+  const hasReaction = Object.keys(countPerValue).length > 0;
+  const toggleRate = (value) => {
+    if (!interactive) {
+      return;
+    }
+    const valuesMap = { ...selectedValuesMap };
+    valuesMap[value] = !valuesMap[value];
+    const values = Object.keys(valuesMap).filter((x) => valuesMap[x]);
+    if (values.length) {
+      onRate({
+        ratingType: "github-reaction",
+        value: values.join(",")
+      });
+    } else {
+      onUnrate();
+    }
+    setMyReaction(values);
+    setOpen(false);
+  };
+  const getRatersNames = (value) => {
+    return ratings.filter((x) => x.rater && x.value.includes(value)).map((x) => x.rater.fullName);
+  };
+  const handleOpen = () => {
+    if (interactive) {
+      setOpen(!open);
+    }
+  };
+  const mergedSx = [{ position: "relative", ...hasReaction && { mt: 2.5 } }, ...Array.isArray(sx) ? sx : [sx]];
+  return /* @__PURE__ */ jsxs(IconButton, { onClick: handleOpen, sx: mergedSx, ...rest, children: [
+    /* @__PURE__ */ jsx(Box, { component: MoodPlusIcon }),
+    hasReaction && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: -24, left: 5, display: "flex", gap: 1 }, children: options.map((option) => {
+      if (!countPerValue[option.value]) {
+        return null;
+      }
+      const selected = selectedValuesMap[option.value];
+      return /* @__PURE__ */ jsx(Tooltip, { title: raters?.join(", "), children: /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: emojiFont, children: option.label }),
+            /* @__PURE__ */ jsx("span", { children: countPerValue[option.value] })
+          ] }),
+          color: "default",
+          size: "small",
+          variant: selected ? "outlined" : "filled",
+          sx: {
+            lineHeight: "24px",
+            fontSize: 13,
+            border: 1,
+            borderColor: "divider",
+            borderRadius: 1,
+            cursor: "pointer",
+            bgcolor: "transparent",
+            "&:hover": {
+              bgcolor: "grey.100"
+            },
+            ...selected && {
+              borderColor: "warning.light",
+              bgcolor: (theme) => alpha(theme.palette.warning.light, 0.2)
+            }
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleRate(option.value);
+          },
+          onMouseEnter: () => setRaters(getRatersNames(option.value)),
+          onMouseLeave: () => setRaters(null)
+        }
+      ) }, option.value);
+    }) }),
+    open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          gap: 0.5,
+          position: "absolute",
+          left: 0,
+          bottom: 36,
+          px: 1,
+          py: 0.5,
+          border: 1,
+          borderColor: "grey.300",
+          bgcolor: "background.paper",
+          borderRadius: 1
+        },
+        children: options.map((option) => {
+          const selected = selectedValuesMap[option.value];
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => toggleRate(option.value),
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: 28,
+                height: 28,
+                fontSize: 14,
+                borderRadius: 1,
+                cursor: "pointer",
+                ":hover": { bgcolor: "grey.100" },
+                ...selected && {
+                  bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
+                }
+              },
+              children: /* @__PURE__ */ jsx(Box, { sx: emojiFont, children: option.label })
+            },
+            option.value
+          );
+        })
+      }
+    ) })
+  ] });
+}

package/dist/components/rating/index.mjs

@@ -0,0 +1,3 @@
+export { default as BinaryThumb } from "./binary-thumb.mjs";
+export { default as GithubReaction } from "./github-reaction.mjs";
+export { GithubReactionContainer } from "./github-reaction-container.mjs";

package/dist/components/rating/rater-list.d.ts

@@ -1,9 +1,10 @@
-import { Rating } from '../../types';
+/// <reference types="react" />
+import type { Rating } from '../../types';
 interface Props {
     open: boolean;
     onClose: () => void;
     value: string;
     ratings: Rating[];
 }
-export default function RaterList({ open, onClose, value, ratings }: Props): import("react/jsx-runtime").JSX.Element;
+export default function RaterList({ open, onClose, value, ratings }: Props): import("react").JSX.Element;
 export {};

package/dist/components/rating/rater-list.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import { Avatar } from "../avatars/index.mjs";
+const StyledDialog = styled(Dialog)`
+  .ux-dialog_header {
+    padding: 0 16px;
+  }
+`;
+export default function RaterList({ open, onClose, value, ratings }) {
+  const raters = ratings.filter((item) => item.value === value).map((item) => item.rater);
+  return /* @__PURE__ */ jsx(StyledDialog, { open, onClose, PaperProps: { style: { width: 400, minHeight: 200 } }, children: /* @__PURE__ */ jsx(Box, { children: raters.map((rater) => {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          fontSize: 13,
+          color: "grey.700",
+          "& + &": { mt: 1 }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { did: rater.did, src: rater.avatar, variant: "circle", size: 26 }),
+          /* @__PURE__ */ jsx(Box, { children: rater.fullName })
+        ]
+      },
+      rater.did
+    );
+  }) }) });
+}

package/dist/components/rating/rating.d.ts

@@ -23,5 +23,5 @@ export interface RatingProps {
     }) => Promise<any>;
     onUnrate: () => Promise<any>;
 }
-declare function Rating({ ratingType, values, countPerValue, selectedValue, render, onRate, onUnrate }: RatingProps): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;
+declare function Rating({ ratingType, values, countPerValue, selectedValue, render, onRate, onUnrate }: RatingProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default Rating;

package/dist/components/rating/rating.mjs

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useSetState } from "ahooks";
+function Rating({ ratingType, values, countPerValue, selectedValue, render, onRate, onUnrate }) {
+  const [state, setState] = useSetState({
+    selectedValue,
+    countPerValue: countPerValue || {}
+  });
+  const hasSelected = !!state.selectedValue;
+  const increaseCount = (value, inc) => {
+    setState((prevState) => ({
+      countPerValue: { ...prevState.countPerValue, [value]: (prevState.countPerValue[value] || 0) + inc }
+    }));
+  };
+  useEffect(() => {
+    setState({
+      countPerValue: countPerValue || {},
+      selectedValue
+    });
+  }, [countPerValue, selectedValue]);
+  if (!render) {
+    return null;
+  }
+  const options = values.map((value) => {
+    return {
+      value,
+      count: state.countPerValue?.[value] || 0,
+      selected: state.selectedValue === value
+    };
+  });
+  const toggleRate = async (value) => {
+    try {
+      if (state.selectedValue === value) {
+        await onUnrate();
+        increaseCount(value, -1);
+        setState({ selectedValue: void 0 });
+      } else {
+        await onRate({ ratingType, value });
+        if (hasSelected) {
+          increaseCount(state.selectedValue, -1);
+        }
+        increaseCount(value, 1);
+        setState({ selectedValue: value });
+      }
+    } catch (e) {
+      console.error("Failed to rate.", e);
+    }
+  };
+  return render({ options, toggleRate });
+}
+export default Rating;

package/dist/components/routes.d.ts

@@ -1,4 +1,4 @@
-declare const pageGroup: "blog" | "discussion" | "doc" | "bookmark" | undefined;
+declare const pageGroup: any;
 export declare const blogPrefix: string;
 export declare const discussionPrefix: string;
 export declare const docPrefix: string;

package/dist/components/routes.mjs

@@ -0,0 +1,27 @@
+import joinUrl from "url-join";
+const { pageGroup } = window.blocklet;
+export const blogPrefix = pageGroup === "blog" ? "" : "blog";
+export const discussionPrefix = pageGroup === "discussion" ? "" : "discussions";
+export const docPrefix = pageGroup === "doc" ? "" : "docs";
+export const bookmarkPrefix = pageGroup === "bookmark" ? "" : "bookmark";
+export const blogPath = (path) => {
+  return window.blocklet.pageGroup === "blog" ? path : joinUrl("/blog", path);
+};
+export const discussionPath = (path) => {
+  return window.blocklet.pageGroup === "discussion" ? path : joinUrl("/discussions", path);
+};
+export const docPath = (path) => {
+  return window.blocklet.pageGroup === "doc" ? path : joinUrl("/docs", path);
+};
+export const bookmarkPath = (path) => {
+  return window.blocklet.pageGroup === "bookmark" ? path : joinUrl("/bookmark", path);
+};
+const getPostPrefix = (type) => {
+  return {
+    blog: "/blog",
+    doc: "/docs",
+    post: "/discussions",
+    bookmark: "/bookmark"
+  }[type];
+};
+export { pageGroup, getPostPrefix };

package/dist/components/segmented-control.d.ts

@@ -1,4 +1,5 @@
-import { SxProps } from '@mui/material';
+/// <reference types="react" />
+import { type SxProps } from '@mui/material';
 interface Option {
     value: string;
     label: React.ReactNode;
@@ -9,5 +10,5 @@ interface Props {
     onChange?: (value: string) => void;
     sx?: SxProps;
 }
-export declare function SegmentedControl({ value, options, onChange, sx, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl({ value, options, onChange, sx, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/segmented-control.mjs

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { mergeSx } from "./utils.mjs";
+export function SegmentedControl({ value, options, onChange, sx, ...rest }) {
+  const mergedSx = mergeSx(
+    {
+      display: "inline-flex",
+      borderRadius: "100vh"
+    },
+    sx
+  );
+  return /* @__PURE__ */ jsx(Box, { sx: mergedSx, ...rest, children: /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      size: "small",
+      value,
+      exclusive: true,
+      onChange: (_, v) => onChange?.(v),
+      sx: {
+        ".MuiToggleButtonGroup-grouped": {
+          m: 0.5,
+          px: 1.5,
+          border: 0,
+          borderRadius: "100vh",
+          lineHeight: 1.3,
+          textTransform: "none",
+          color: "text.primary"
+        },
+        ".MuiToggleButtonGroup-grouped.Mui-selected": {
+          border: 1,
+          borderColor: "divider"
+        },
+        ".MuiToggleButtonGroup-middleButton, .MuiToggleButtonGroup-lastButton": {
+          marginLeft: "-1px",
+          borderLeft: "1px solid transparent"
+        }
+      },
+      children: options.map((x) => {
+        return /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            value: x.value,
+            sx: {
+              "&.Mui-selected": {
+                backgroundColor: "action.hover"
+              }
+            },
+            children: x.label
+          },
+          x.value
+        );
+      })
+    }
+  ) });
+}

package/dist/components/shared/relative-time.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 interface Props {
     value: string | number | Date;
     [key: string]: any;
     autoUpdate?: boolean;
 }
-export default function RelativeTime({ value, autoUpdate, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, autoUpdate, ...rest }: Props): import("react").JSX.Element;
 export {};

package/dist/components/shared/relative-time.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import UxRelativeTime from "@arcblock/ux/lib/RelativeTime";
+import { useUpdate } from "ahooks";
+import { useEffect, useMemo } from "react";
+export default function RelativeTime({ value, autoUpdate, ...rest }) {
+  const v = value instanceof Date ? value.getTime() : value;
+  const update = useUpdate();
+  const timestamp = useMemo(() => new Date(v).getTime(), [v]);
+  useEffect(() => {
+    if (autoUpdate) {
+      const diff = Math.abs(Date.now() - timestamp);
+      const isLessThan45Minutes = diff < 45 * 6e4;
+      if (isLessThan45Minutes) {
+        const timer = setInterval(update, 6e4);
+        return () => clearInterval(timer);
+      }
+    }
+    return void 0;
+  }, [autoUpdate, timestamp, update]);
+  return /* @__PURE__ */ jsx(UxRelativeTime, { value: v, ...rest });
+}

package/dist/components/toast.d.ts

@@ -1,4 +1,4 @@
-import { default as hotToast } from 'react-hot-toast';
+import hotToast from 'react-hot-toast';
 type Message = Parameters<typeof hotToast>[0];
 export type ToastOptions = Parameters<typeof hotToast>[1];
 type Toast = typeof hotToast & {

package/dist/components/toast.mjs

@@ -0,0 +1,44 @@
+import hotToast from "react-hot-toast";
+import bridge from "@arcblock/bridge";
+let toast = Object.assign(hotToast, {
+  warning: (message, options) => {
+    return hotToast.error(message, { ...options, icon: "\u26A0\uFE0F" });
+  }
+});
+const isInArcSphere = window?.navigator?.userAgent.indexOf("ArcSphere") > -1;
+if (isInArcSphere) {
+  toast = Object.assign(
+    (message) => {
+      try {
+        return bridge.call("arc__toast", { text: message });
+      } catch (e) {
+        return hotToast(message);
+      }
+    },
+    hotToast,
+    {
+      error: (message) => {
+        try {
+          return bridge.call("arc__toast", { text: message, level: "error" });
+        } catch (e) {
+          return hotToast.error(message);
+        }
+      },
+      success: (message) => {
+        try {
+          return bridge.call("arc__toast", { text: message, level: "success" });
+        } catch (e) {
+          return hotToast.success(message);
+        }
+      },
+      warning: (message, options) => {
+        try {
+          return bridge.call("arc__toast", { text: message, level: "warning" });
+        } catch (e) {
+          return hotToast.error(message, { ...options, icon: "\u26A0\uFE0F" });
+        }
+      }
+    }
+  );
+}
+export { toast };

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

@@ -3,11 +3,11 @@ export * from './utils';
 interface UploaderProviderProps {
     children: ReactNode;
 }
-export declare const UploaderContext: import('react').Context<null>;
+export declare const UploaderContext: import("react").Context<null>;
 export declare function useUploader(): never;
 export declare function UploaderTrigger({ onChange, children }: {
     onChange?: Function;
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function UploaderProvider({ children }: UploaderProviderProps): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
+export declare function UploaderProvider({ children }: UploaderProviderProps): import("react").JSX.Element;
 export default UploaderProvider;

package/dist/components/uploader/index.mjs

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { createContext, useContext, useRef, Suspense } from "react";
+import { lazyRetry as lazy } from "@arcblock/ux/lib/Util";
+import { createPortal } from "react-dom";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export * from "./utils.mjs";
+const UploaderComponent = lazy(() => import("@blocklet/uploader").then((res) => ({ default: res.Uploader })));
+export const UploaderContext = createContext(null);
+export function useUploader() {
+  const uploaderRef = useContext(UploaderContext);
+  if (!uploaderRef) {
+    throw new Error("useUploader must be used within an UploaderProvider");
+  }
+  return uploaderRef;
+}
+export function UploaderTrigger({ onChange, children }) {
+  const uploaderRef = useUploader();
+  const handleOpen = () => {
+    const uploader = uploaderRef?.current?.getUploader();
+    const setMaxNumberOfFiles = (maxNumberOfFiles) => {
+      uploader?.setOptions({
+        // @ts-ignore
+        restrictions: {
+          maxNumberOfFiles
+        }
+      });
+    };
+    uploader?.open();
+    setMaxNumberOfFiles(1);
+    uploader?.onClose(() => {
+      setMaxNumberOfFiles(void 0);
+    });
+    if (onChange) {
+      uploader.onceUploadSuccess((...args) => {
+        onChange(...args);
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(Box, { onClick: handleOpen, children });
+}
+export function UploaderProvider({ children }) {
+  const uploaderRef = useRef(null);
+  const { locale } = useLocaleContext();
+  window.uploaderRef = uploaderRef;
+  return /* @__PURE__ */ jsxs(UploaderContext.Provider, { value: uploaderRef, children: [
+    children,
+    /* @__PURE__ */ jsx(Suspense, { children: createPortal(
+      /* @__PURE__ */ jsx(
+        UploaderComponent,
+        {
+          locale,
+          ref: uploaderRef,
+          popup: true,
+          coreProps: {
+            // 不做代码限制，默认使用 Media Kit 配置
+            // // 上传限制，参考 https://uppy.io/docs/uppy/#restrictions
+            // restrictions: {
+            //   allowedFileExts: ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.mp4', '.webm', '.pdf'],
+            //   maxNumberOfFiles: undefined, // default is unlimited
+            // },
+          }
+        },
+        "uploader"
+      ),
+      document.body
+    ) })
+  ] });
+}
+export default UploaderProvider;

package/dist/components/uploader/utils.mjs

@@ -0,0 +1,16 @@
+import { joinURL } from "ufo";
+export const getUploadedImageUrl = (imageUrl, width = 320) => {
+  const prefix = joinURL(window.blocklet?.prefix || "/", "uploads");
+  let result = imageUrl;
+  if (imageUrl && imageUrl.startsWith("/") && !imageUrl.startsWith(prefix)) {
+    result = joinURL(prefix, imageUrl);
+    const tmp = new URL(result, window.location.origin);
+    if (!imageUrl.endsWith(".gif")) {
+      tmp.searchParams.set("imageFilter", "resize");
+      tmp.searchParams.set("w", width.toString());
+      tmp.searchParams.set("f", "webp");
+    }
+    return tmp.href;
+  }
+  return result;
+};

package/dist/components/utils.d.ts

@@ -1,5 +1,5 @@
-import { SxProps, Theme } from '@mui/material';
-import { SystemStyleObject } from '@mui/system';
+import type { SxProps, Theme } from '@mui/material';
+import type { SystemStyleObject } from '@mui/system';
 export declare const repairBase64Avatar: (avatar?: string) => string | undefined;
 export declare const getResizedAvatar: (avatar: string, size?: number) => string;
 export declare const sleep: (ms: number) => Promise<unknown>;
@@ -9,7 +9,7 @@ export declare const copy: (text: string) => void;
 export declare const getLastItem: <T>(arr: T[]) => T | null;
 export declare function tryParseJSONObject(str: string): boolean;
 export declare const getPreference: (key: string) => any;
-export declare const getBlockletMountPointInfo: (name: string) => ComponentMountPoint | undefined;
+export declare const getBlockletMountPointInfo: (name: string) => any;
 export declare const blockletExists: (name: string) => boolean;
 export declare const getExcerptFromLexicalContent: (content: any, size?: number) => string;
 export declare const mergeSx: (initial: SystemStyleObject<Theme>, sx?: SxProps<Theme>) => any[];
@@ -19,5 +19,5 @@ export declare const discussKitUploadsUrl: string;
 export declare const isInDiscussKitApp: boolean | "" | undefined;
 export declare const openProfile: (did: string, newTab?: boolean) => void;
 export declare const randomId: () => string;
-export declare const getDiscussKitClientId: () => string;
+export declare const getDiscussKitClientId: () => any;
 export declare const getPaymentKitMountPoint: () => string | undefined;