@blocklet/discuss-kit-ux-lite 2.6.0

package/dist/components/avatars/system-user.mjs

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import DID from "@arcblock/ux/lib/DID";
+import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
+export default function SystemUser({
+  name = "System",
+  showDidAddress = true,
+  showIcon = true,
+  size = "normal",
+  icon,
+  ...rest
+}) {
+  const sm = size === "sm";
+  const iconSize = sm ? 40 : 48;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+    showIcon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          flex: "0 0 auto",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: iconSize,
+          height: iconSize,
+          p: 1,
+          color: "#fff",
+          bgcolor: "secondary.main",
+          borderRadius: "100%"
+        },
+        children: icon || /* @__PURE__ */ jsx(NotificationsActiveOutlinedIcon, { sx: { fontSize: size === "sm" ? 16 : 18 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            lineHeight: 1.5,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name })
+        }
+      ),
+      showDidAddress && /* @__PURE__ */ jsx(
+        DID,
+        {
+          style: { lineHeight: 1.5, minHeight: 20, maxWidth: 200 },
+          size: 14,
+          did: window.blocklet.appId,
+          copyable: false,
+          compact: true
+        }
+      )
+    ] })
+  ] });
+}

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface ButtonItem {
+    id: string;
+    title: string;
+    icon: string;
+}
+interface Props {
+    data: ButtonItem[];
+    theme: string;
+    urlName: string;
+    defaultButton?: ButtonItem;
+    onSelectTab: (selectTab: string[]) => void;
+    type: string;
+    allButton?: boolean;
+    urlParams?: boolean;
+}
+export default function ButtonGroup({ data, theme, urlName, defaultButton, urlParams, allButton, onSelectTab, type, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/components/button-group/button-group.mjs

@@ -0,0 +1,195 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Box, Button } from "@mui/material";
+import { css } from "@emotion/css";
+import { useEffect, useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { BorderColorOutlined as BorderColorOutlinedIcon } from "@mui/icons-material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { AccessControl } from "../authz/index.mjs";
+export default function ButtonGroup({
+  data,
+  theme = "dark",
+  urlName,
+  defaultButton,
+  urlParams = true,
+  allButton = true,
+  onSelectTab,
+  type,
+  ...rest
+}) {
+  const { t } = useLocaleContext();
+  const downSm = useMediaQuery((mainTheme) => mainTheme.breakpoints.down("sm"));
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { boardId } = useParams();
+  const selectedString = searchParams.get(urlName);
+  const dataWithDefault = defaultButton && data?.length > 0 ? [defaultButton, ...data] : data;
+  const selectedArray = selectedString !== null && selectedString !== "" ? selectedString.split(",") : dataWithDefault?.map((item) => item.id);
+  const [selectTab, setSelectTab] = useState(urlParams ? selectedArray : [boardId]);
+  const [selectAll, setSelectAll] = useState(false);
+  const updateUrl = (url, newSelectTab) => {
+    const formatNewSelectTab = newSelectTab.filter(Boolean);
+    if (urlParams) {
+      setSearchParams({
+        ...searchParams,
+        [url]: formatNewSelectTab.join(",")
+      });
+    } else if (formatNewSelectTab.length === 0) {
+      navigate(`/${type}`);
+    } else {
+      navigate(`/${type}/boards/${formatNewSelectTab.join(",")}`);
+    }
+  };
+  const handleClick = (item) => {
+    setSelectTab([item.id]);
+    updateUrl(urlName, [item.id]);
+  };
+  const handleSelectAll = () => {
+    setSelectAll((prevSelectAll) => {
+      const newSelectAll = !prevSelectAll;
+      const newSelectTab = newSelectAll ? dataWithDefault?.map((item) => item.id) : [];
+      setSelectTab(newSelectTab);
+      updateUrl(urlName, [""]);
+      return newSelectAll;
+    });
+  };
+  useEffect(() => {
+    if (JSON.stringify(selectedArray) !== JSON.stringify(selectTab)) {
+      if (urlParams) {
+        setSelectTab(selectedArray || []);
+      } else if (boardId) {
+        if (data?.find((item) => item.id === boardId) || boardId === "default") {
+          setSelectTab([boardId]);
+        } else {
+          navigate(`/${type}/`);
+        }
+      } else {
+        setSelectTab(dataWithDefault?.map((item) => item.id));
+      }
+    }
+  }, [data, boardId]);
+  useEffect(() => {
+    if (urlParams) {
+      if (selectedString === null || selectedString === "") {
+        setSelectAll(true);
+      } else if (selectTab?.length === dataWithDefault?.length) {
+        setSelectAll(true);
+      } else {
+        setSelectAll(false);
+      }
+    } else if (boardId) {
+      setSelectAll(false);
+    } else {
+      setSelectAll(true);
+    }
+    if (onSelectTab) onSelectTab(selectTab);
+  }, [selectTab, selectedArray, boardId]);
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    /* @__PURE__ */ jsxs(Box, { className: Group, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            bgcolor: theme === "dark" ? "#F9FAFB" : "",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            borderRadius: "99999px",
+            borderTopRightRadius: downSm ? 0 : "99999px",
+            borderBottomRightRadius: downSm ? 0 : "99999px",
+            overflow: "scroll",
+            whiteSpace: "nowrap",
+            mr: 2
+          },
+          children: [
+            allButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSelectAll,
+                sx: {
+                  backgroundColor: selectAll ? "#ffffff" : "",
+                  color: selectAll ? "#030712" : "#4b5563",
+                  border: selectAll ? "1px solid #e5e7eb!important" : "1px solid transparent"
+                },
+                ...rest,
+                children: t("all")
+              }
+            ),
+            dataWithDefault?.map((item, index) => {
+              const isActive = urlParams ? !selectAll && selectTab?.includes(item.id) : boardId === item.id;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => handleClick(item),
+                  sx: {
+                    ...isActive && {
+                      backgroundColor: "#ffffff",
+                      color: "#030712",
+                      border: "1px solid #e5e7eb!important"
+                    }
+                  },
+                  ...rest,
+                  children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    item?.icon,
+                    " ",
+                    item?.title
+                  ] })
+                },
+                index
+              );
+            })
+          ]
+        }
+      ),
+      urlName !== "type" && /* @__PURE__ */ jsx(AccessControl, { roles: ["admin", "owner"], children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          component: Link,
+          color: "inherit",
+          size: "small",
+          to: `/boards?type=${type}`,
+          sx: { color: "grey.500" },
+          children: /* @__PURE__ */ jsx(BorderColorOutlinedIcon, { sx: { fontSize: 16 } })
+        }
+      ) })
+    ] })
+  );
+}
+const Group = css`
+  display: flex;
+  flex-direction: row;
+  .MuiButtonBase-root {
+    border-radius: 9999px;
+    color: #4b5563;
+    margin: 5px 8px 5px 5px;
+    padding: 5px 12px;
+    line-height: 22px;
+    font-size: 13px;
+    border: 1px solid transparent;
+  }
+
+  .MuiButtonBase-root:last-of-type {
+    margin-right: 0;
+  }
+
+  .MuiButtonBase-root:first-of-type {
+    margin-left: 0;
+  }
+
+  .MuiButtonBase-root:hover {
+    background-color: #ffffff;
+    color: #030712;
+    border: 1px solid #e5e7eb;
+  }
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+
+  *::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+`;

package/dist/components/button-group/index.d.ts

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './button-group';

package/dist/components/button-group/index.mjs

@@ -0,0 +1 @@
+export { default as ButtonGroup } from "./button-group.mjs";

package/dist/components/confirm.d.ts

@@ -0,0 +1,29 @@
+import { DialogProps, ButtonProps } from '@mui/material';
+import { ReactNode, type JSX } from 'react';
+interface ConfirmProviderProps {
+    children: ReactNode;
+}
+type ConfirmOptions = {
+    title: ReactNode;
+    description?: ReactNode;
+    cancelText?: ReactNode;
+    okText?: ReactNode;
+    cancelButtonProps?: ButtonProps;
+    okButtonProps?: ButtonProps;
+    dialogProps?: Omit<DialogProps, 'open'>;
+    actions?: (actions: JSX.Element[], onClose: () => void) => JSX.Element[];
+};
+type ConfirmFunc = (options: ConfirmOptions) => Promise<boolean>;
+interface ConfirmContextType {
+    open: boolean;
+    confirm: ConfirmFunc;
+}
+interface ConfirmProps extends Omit<DialogProps, 'title'>, Omit<ConfirmOptions, 'dialogProps'> {
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+export declare function Confirm({ open, title, description, handleOk, handleCancel, okText, okButtonProps, cancelText, cancelButtonProps, actions, ...rest }: ConfirmProps): JSX.Element | null;
+export declare const ConfirmContext: import("react").Context<ConfirmContextType>;
+export declare const useConfirm: () => ConfirmContextType;
+export declare function ConfirmProvider({ children }: ConfirmProviderProps): JSX.Element;
+export {};

package/dist/components/confirm.mjs

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
+  useMediaQuery
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export function Confirm({
+  open,
+  title,
+  description,
+  handleOk,
+  handleCancel,
+  okText,
+  okButtonProps,
+  cancelText,
+  cancelButtonProps,
+  actions,
+  ...rest
+}) {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
+  const { t } = useLocaleContext();
+  const renderDesc = () => {
+    if (isValidElement(description)) {
+      return description;
+    }
+    return /* @__PURE__ */ jsx(DialogContentText, { children: description });
+  };
+  if (!open) {
+    return null;
+  }
+  const renderActions = () => {
+    const actionsArr = [
+      /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "text", onClick: handleCancel, ...cancelButtonProps, children: cancelText || t("cancel") || "Cancel" }, "cancel"),
+      /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", onClick: handleOk, ...okButtonProps, children: okText || t("confirm") || "Yes" }, "confirm")
+    ];
+    if (actions) {
+      return actions(actionsArr, handleCancel);
+    }
+    return actionsArr;
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { fullScreen, onClose: handleCancel, maxWidth: "md", ...rest, open, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { variant: "h4", children: title }),
+    /* @__PURE__ */ jsx(DialogContent, { sx: { minWidth: { xs: "initial", md: 400 } }, children: renderDesc() }),
+    /* @__PURE__ */ jsx(DialogActions, { children: renderActions() })
+  ] });
+}
+export const ConfirmContext = createContext({});
+export const useConfirm = () => useContext(ConfirmContext);
+export function ConfirmProvider({ children }) {
+  const [open, setOpen] = useState(false);
+  const [currentOptions, setCurrentOptions] = useState({});
+  const resolver = useRef(void 0);
+  const handleOk = () => {
+    resolver.current?.(true);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    resolver.current?.(false);
+    setOpen(false);
+  };
+  const confirm = (options) => {
+    setCurrentOptions(options);
+    setOpen(true);
+    return new Promise((resolve) => {
+      resolver.current = resolve;
+    });
+  };
+  const value = useMemo(
+    () => ({
+      open,
+      confirm
+    }),
+    [open]
+  );
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Confirm,
+      {
+        ...currentOptions.dialogProps,
+        open,
+        onClose: handleCancel,
+        title: currentOptions.title,
+        description: currentOptions.description,
+        okText: currentOptions.okText,
+        okButtonProps: currentOptions.okButtonProps,
+        cancelText: currentOptions.cancelText,
+        cancelButtonProps: currentOptions.cancelButtonProps,
+        handleOk,
+        handleCancel,
+        actions: currentOptions.actions
+      }
+    )
+  ] });
+}

package/dist/components/dayjs.d.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/ja';
+export default dayjs;

package/dist/components/dayjs.mjs

@@ -0,0 +1,5 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import "dayjs/locale/ja";
+dayjs.extend(relativeTime);
+export default dayjs;

package/dist/components/default-editor-config-provider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { AxiosInstance } from 'axios';
+import type { EditorConfig } from '@blocklet/editor/lib/config';
+export default function DefaultEditorConfigProvider({ request, children, editorConfig, }: {
+    request: AxiosInstance;
+    children: React.ReactNode;
+    editorConfig?: EditorConfig;
+}): import("react").JSX.Element;

package/dist/components/default-editor-config-provider.mjs

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { EditorConfigProvider } from "@blocklet/editor/lib/config";
+import { joinURL } from "ufo";
+import { useMediaQuery } from "@mui/material";
+import { useSessionContext } from "./hooks/index.mjs";
+import { discussKitMountPoint } from "./utils.mjs";
+import { useUploader } from "./uploader/index.mjs";
+import { MAX_DISCUSSION_LENGTH } from "../constants.mjs";
+const baseURL = joinURL(window.location.origin, discussKitMountPoint || "");
+let cachedTemplateList = null;
+export default function DefaultEditorConfigProvider({
+  request,
+  children,
+  editorConfig
+}) {
+  const downMd = useMediaQuery((theme) => theme.breakpoints.down("md"));
+  const { session } = useSessionContext();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role);
+  const uploaderRef = useUploader();
+  const config = useMemo(() => {
+    const userService = {
+      search: async (text) => {
+        const { data } = await request.get(`/api/mention?search=${text}`, { baseURL });
+        return data;
+      },
+      getCurrentUserDid: () => session?.user?.did
+    };
+    const AI = {
+      checkAvailable: async () => {
+        if (downMd) {
+          return false;
+        }
+        try {
+          const { data } = await request.get("/api/aigne/check", { baseURL });
+          return !!data?.connected;
+        } catch (e) {
+          e.markAsHandled?.();
+          console.error(e);
+          return false;
+        }
+      },
+      completions: async (payload) => {
+        if (typeof payload === "string") {
+          const result = await request.post(
+            joinURL("/api/aigne/chat"),
+            { message: payload },
+            { baseURL, timeout: 3e4 }
+          );
+          return result.data?.result?.text || "";
+        }
+        return "";
+      }
+    };
+    const templatePlugin = {
+      fetchTemplateList: async ({ reload = false } = {}) => {
+        if (!reload && cachedTemplateList?.length > 0) {
+          return cachedTemplateList;
+        }
+        try {
+          const { data = [] } = await request.get(joinURL("/api/resources/posts"), { baseURL });
+          cachedTemplateList = data;
+          return data;
+        } catch (e) {
+          e.markAsHandled?.();
+          console.error(e);
+          cachedTemplateList = null;
+          return [];
+        }
+      },
+      importTemplate: async (item) => {
+        if (!item?.id || !item?.content) {
+          throw new Error("item  is required");
+        }
+        const { data } = await request.post(joinURL("/api/resources/import"), item, { baseURL });
+        return data;
+      }
+    };
+    const value = {
+      uploader: {
+        upload: async (blobFile) => {
+          const uploader = uploaderRef.current.getUploader();
+          const { data } = await uploader.uploadFile(blobFile).then((result) => {
+            return result?.response;
+          });
+          return {
+            url: `/${data.filename}`
+          };
+        }
+      },
+      userService,
+      blockletEmbedEndpoint: joinURL(window.location.origin, discussKitMountPoint || "", "/api/embed/check"),
+      openGraphEndpoint: joinURL(window.location.origin, discussKitMountPoint || "", "/api/embed/og"),
+      AI,
+      templatePlugin,
+      characterLimitConfig: {
+        maxLength: MAX_DISCUSSION_LENGTH,
+        indicatorStyle: {
+          position: "fixed",
+          bottom: 12
+        },
+        alignLeft: true
+      }
+    };
+    return { ...value, ...editorConfig };
+  }, [isAdmin, request, session?.user?.did, downMd, editorConfig]);
+  return /* @__PURE__ */ jsx(EditorConfigProvider, { value: config, children });
+}

package/dist/components/dirty-prompt.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const DirtyPromptContainer: import("unstated-next").Container<{
+    dirty: boolean;
+    markDirty: () => void;
+    reset: (callback?: Function) => void;
+    check: () => Promise<boolean>;
+}, void>;
+export declare function ConfirmNavigation(): import("react").JSX.Element;

package/dist/components/dirty-prompt.mjs

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createContainer } from "unstated-next";
+import { useBlocker } from "react-router-dom";
+import { useGetState } from "ahooks";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useConfirm, Confirm } from "./confirm.mjs";
+const useBeforeUnloadPrompt = (dirty) => {
+  useEffect(() => {
+    const showPrompt = (e) => {
+      if (dirty) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    window.addEventListener("beforeunload", showPrompt);
+    return () => {
+      window.removeEventListener("beforeunload", showPrompt);
+    };
+  }, [dirty]);
+};
+const useDirtySources = () => {
+  const [state, setState] = useState({});
+  const dirty = Object.values(state).some(Boolean);
+  const markDirty = useCallback(
+    (key) => {
+      setState((prev) => ({ ...prev, [key]: true }));
+    },
+    [setState]
+  );
+  const resetDirty = useCallback(
+    (key) => {
+      setState((prev) => ({ ...prev, [key]: false }));
+    },
+    [setState]
+  );
+  useEffect(() => {
+    const onMarkDirty = ((e) => markDirty(e.detail.key));
+    const onReset = ((e) => resetDirty(e.detail.key));
+    window.addEventListener("blocklet:markDirty", onMarkDirty);
+    window.addEventListener("blocklet:resetDirty", onReset);
+    return () => {
+      window.removeEventListener("blocklet:markDirty", onMarkDirty);
+      window.removeEventListener("blocklet:resetDirty", onReset);
+    };
+  }, [markDirty, resetDirty]);
+  return { dirty };
+};
+const useDirtyPrompt = () => {
+  const { t } = useLocaleContext();
+  const [dirty, setDirty, getDirty] = useGetState(false);
+  const { confirm } = useConfirm();
+  const resetCallbackRef = useRef(null);
+  const multiDirtySourceState = useDirtySources();
+  useBeforeUnloadPrompt(dirty || multiDirtySourceState.dirty);
+  const reset = useCallback(
+    (callback) => {
+      resetCallbackRef.current = callback;
+      setDirty(false);
+    },
+    [setDirty]
+  );
+  useEffect(() => {
+    if (!dirty) {
+      resetCallbackRef.current?.();
+      resetCallbackRef.current = null;
+    }
+  }, [dirty]);
+  const markDirty = useCallback(() => setDirty(true), [setDirty]);
+  const check = useCallback(async () => {
+    if (getDirty()) {
+      const proceed = await confirm({
+        title: t("unsaved.title"),
+        description: t("unsaved.desc"),
+        okText: t("unsaved.leave"),
+        cancelText: t("unsaved.stay"),
+        okButtonProps: { color: "warning" }
+      });
+      if (proceed) {
+        reset();
+      }
+      return proceed;
+    }
+    return true;
+  }, [confirm, reset, getDirty, t]);
+  return { dirty: dirty || multiDirtySourceState.dirty, markDirty, reset, check };
+};
+export const DirtyPromptContainer = createContainer(useDirtyPrompt);
+export function ConfirmNavigation() {
+  const { t } = useLocaleContext();
+  const { dirty, reset } = DirtyPromptContainer.useContainer();
+  const blocker = useBlocker(dirty);
+  useEffect(() => {
+    if (blocker.state === "blocked" && !dirty) {
+      blocker.reset();
+    }
+  }, [blocker, dirty]);
+  const handleOk = () => {
+    blocker.proceed?.();
+    reset();
+  };
+  return /* @__PURE__ */ jsx(
+    Confirm,
+    {
+      open: blocker.state === "blocked",
+      onClose: () => blocker.reset?.(),
+      title: t("unsaved.title"),
+      description: t("unsaved.desc"),
+      okText: t("unsaved.leave"),
+      okButtonProps: { color: "warning" },
+      cancelText: t("unsaved.stay"),
+      handleOk,
+      handleCancel: () => blocker.reset?.(),
+      sx: { zIndex: 99999 }
+    }
+  );
+}

package/dist/components/editor/blocklet-editor.d.ts

@@ -0,0 +1 @@
+export { BlockletEditor, useBlockletEditorLoaded } from '@blocklet/editor/lib/blocklet-editor';

package/dist/components/editor/blocklet-editor.mjs

@@ -0,0 +1 @@
+export { BlockletEditor, useBlockletEditorLoaded } from "@blocklet/editor/lib/blocklet-editor";