@blocklet/discuss-kit-ux 2.4.36 → 2.4.37

package/dist/components/chat/chat-room.mjs

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import { Backdrop, Stack, useMediaQuery } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useTheme } from "@mui/material/styles";
+import UsersPlusIcon from "virtual:icons/tabler/users-plus";
+import { useLocalStorageState } from "ahooks";
+import { EditorConfigProvider } from "@blocklet/editor";
+import MessageList from "./message-list.mjs";
+import { useChatContext } from "./context.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import Participants from "./participants.mjs";
+import { Menu } from "../posts/index.mjs";
+import { useConfirm } from "../confirm.mjs";
+import { Back } from "../back.mjs";
+import { useChatInWallet } from "./hooks.mjs";
+import { ChatInput } from "./chat-input.mjs";
+import { Avatar } from "../avatars/index.mjs";
+function getLineClamp(count) {
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: count,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    lineHeight: 1.5,
+    wordBreak: "break-word"
+  };
+}
+function RoomTitle({ title }) {
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
+}
+export default function ChatRoom({ chat, inWallet, ...rest }) {
+  const { isChatInWalletV2 } = useChatInWallet();
+  const { t } = useLocaleContext();
+  const theme = useTheme();
+  const downSm = useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
+  const {
+    initChatRoom,
+    isActiveChat,
+    getOppositeUser,
+    sendMessage,
+    joinChannel,
+    leaveChannel,
+    deleteChannel,
+    setEditingChannel,
+    chatRoomHeaderAddons
+  } = useChatContext();
+  const { confirm } = useConfirm();
+  const isActive = isActiveChat(chat.id);
+  const { session, isAdmin } = useSessionContext();
+  const isCreator = chat.creator.did === session?.user?.did;
+  const [input, setInput] = useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
+  const messageListRef = useRef(null);
+  useEffect(() => {
+    if (chat.isActivated) {
+      initChatRoom(chat.id);
+    }
+  }, [chat.isActivated]);
+  const handleDeleteChannel = async () => {
+    const proceed = await confirm({
+      title: t("chat.deleteChannelTitle"),
+      description: t("chat.deleteChannelDesc"),
+      okButtonProps: { color: "error" }
+    });
+    if (proceed) {
+      deleteChannel(chat.id);
+    }
+  };
+  const onFocusChange = (focused) => {
+    if (downSm && focused) messageListRef.current?.scrollToBottom();
+  };
+  const renderRoomHeader = () => {
+    if (chat.type === "notification") {
+      return /* @__PURE__ */ jsx(RoomTitle, { title: t("chat.notification") });
+    }
+    if (chat.type === "dm") {
+      const oppositeUser = getOppositeUser(chat);
+      return /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(Avatar, { did: oppositeUser?.did, src: oppositeUser?.avatar, size: 24, shape: "circle", variant: "rounded" }),
+              /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName })
+            ] }),
+            chatRoomHeaderAddons && chatRoomHeaderAddons(chat)
+          ]
+        }
+      );
+    }
+    if (chat.type === "channel") {
+      const menuItems = [];
+      if (chat.hasJoined && !isCreator) {
+        menuItems.push(
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.leaveChannel") }) }, "leave")
+        );
+      }
+      if (isAdmin || isCreator) {
+        menuItems.unshift(
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => setEditingChannel(chat), children: /* @__PURE__ */ jsx(Box, { component: "span", children: "Edit" }) }, "edit")
+        );
+        menuItems.push(
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
+        );
+      }
+      return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700", ...getLineClamp(1) }, children: chat.name }),
+          /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, color: "grey.500", ...getLineClamp(1) }, children: chat.description })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexShrink: 0, alignItems: "center", gap: 1 }, children: [
+          !chat.hasJoined && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: "primary",
+              onClick: () => joinChannel(chat.id),
+              startIcon: /* @__PURE__ */ jsx(Box, { component: UsersPlusIcon, sx: { fontSize: "16px!important" } }),
+              children: t("chat.joinChannel")
+            }
+          ),
+          chat.hasJoined && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
+          chatRoomHeaderAddons && chatRoomHeaderAddons(chat),
+          /* @__PURE__ */ jsx(Menu, { items: menuItems })
+        ] })
+      ] });
+    }
+    return null;
+  };
+  if (chat.isActivated && !chat.ready) {
+    return /* @__PURE__ */ jsx(
+      Backdrop,
+      {
+        open: true,
+        sx: {
+          zIndex: theme.zIndex.drawer + 1,
+          bgcolor: "transparent"
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { display: isActive ? "flex" : "none", flexDirection: "column", height: "100%" }, children: [
+    !inWallet && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flex: "0 0 auto",
+          height: 52,
+          px: 2.5,
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        },
+        children: [
+          downSm && /* @__PURE__ */ jsx(Back, { iconOnly: true, url: "/chat" }),
+          renderRoomHeader()
+        ]
+      }
+    ),
+    !!inWallet && isChatInWalletV2 && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flex: "0 0 auto",
+          height: 52,
+          px: 2.5,
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        },
+        children: [
+          downSm && /* @__PURE__ */ jsx(Back, { iconOnly: true, url: "/chat-in-wallet" }),
+          renderRoomHeader()
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(EditorConfigProvider, { value: { openLinkInNewTab: !!inWallet }, children: /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, chat }) }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+      chat.isActivated && chat.type !== "notification" && /* @__PURE__ */ jsx(Box, { sx: { px: { xs: 0, sm: 2.5 }, pb: { xs: 0, sm: 2.5 } }, children: /* @__PURE__ */ jsx(
+        ChatInput,
+        {
+          initialContent: input,
+          onContentChange: (v) => setInput(v),
+          onFocusChange,
+          send: (content) => sendMessage(chat.id, content)
+        }
+      ) }),
+      chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 9999999,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgcolor: "rgba(255, 255, 255, 0.7)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
+            /* @__PURE__ */ jsx(Box, { sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 }, onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") })
+          ]
+        }
+      )
+    ] })
+  ] });
+}

package/dist/components/chat/chat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 import { ChannelUpdatePayload } from './types';
 interface ChatProps {
@@ -8,5 +9,5 @@ interface ChatProps {
         onSubmit: (payload: ChannelUpdatePayload) => void;
     }>;
 }
-export default function Chat({ sx, ChannelEditComponent, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export default function Chat({ sx, ChannelEditComponent, ...rest }: ChatProps): import("react").JSX.Element;
 export {};

package/dist/components/chat/chat.mjs

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Backdrop, useMediaQuery } from "@mui/material";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import CircularProgress from "@mui/material/CircularProgress";
+import ChatBubbleEmptyIcon from "virtual:icons/iconoir/chat-bubble-empty";
+import { Add as AddIcon } from "@mui/icons-material";
+import { Helmet } from "react-helmet";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import ChatList from "./chat-list.mjs";
+import ChatRoom from "./chat-room.mjs";
+import { useChatContext } from "./context.mjs";
+import { AccessControl } from "../authz/index.mjs";
+import { UserSearch } from "./user-search.mjs";
+function Empty({ sx }) {
+  const { t } = useLocaleContext();
+  const mergedSx = [
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 1,
+      color: "grey.600"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+    /* @__PURE__ */ jsx(ChatBubbleEmptyIcon, { style: { fontSize: 32 } }),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+  ] });
+}
+export default function Chat({ sx, ChannelEditComponent, ...rest }) {
+  const {
+    client,
+    initialized,
+    chats,
+    activeChatId,
+    addChat,
+    updateChat,
+    setActiveChat,
+    getOppositeUser,
+    editingChannel,
+    setEditingChannel
+  } = useChatContext();
+  const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const { t } = useLocaleContext();
+  const activeChat = chats?.filter((chat) => chat?.id === activeChatId)?.[0];
+  const webTitleMap = {
+    dm: () => getOppositeUser(activeChat)?.fullName || t("chat.unknown"),
+    notification: () => t("chat.notification"),
+    channel: () => activeChat?.type === "channel" ? `# ${activeChat.name}` : t("chat.unknownChannel"),
+    default: () => t("chat.chats")
+  };
+  const getWebTitle = () => {
+    if (!activeChat) {
+      return t("chat.chats");
+    }
+    const getTitle = webTitleMap[activeChat.type] || webTitleMap.default;
+    return getTitle();
+  };
+  const show = useMemo(() => {
+    if (downMd) {
+      return {
+        left: !activeChatId,
+        right: !!activeChatId
+      };
+    }
+    return {
+      left: true,
+      right: true
+    };
+  }, [downMd, activeChatId]);
+  if (!initialized) {
+    return /* @__PURE__ */ jsx(
+      Backdrop,
+      {
+        open: true,
+        sx: {
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          bgcolor: "transparent"
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
+  }
+  const mergedSx = [
+    { display: "flex", height: "100%", bgcolor: "background.default" },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const handleChannelEdit = async (payload) => {
+    if (payload.id) {
+      await client.updateChannel(payload);
+      updateChat(payload.id, (chat) => ({ ...chat, ...payload }));
+      setEditingChannel(null);
+    } else {
+      const saved = await client.createChannel(payload);
+      const newChannel = { ...saved, hasJoined: true };
+      addChat(newChannel);
+      setEditingChannel(null);
+      setActiveChat(newChannel);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: mergedSx, children: [
+    /* @__PURE__ */ jsx(Helmet, { title: getWebTitle() }),
+    show.left && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          width: { sm: 320, xs: "100%" },
+          borderRight: ({ palette }) => `1px solid ${palette.divider}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: 1,
+                height: 52,
+                px: 3,
+                borderBottom: "1px solid",
+                borderColor: "divider"
+              },
+              children: [
+                /* @__PURE__ */ jsx(UserSearch, { sx: { fontSize: 16, flex: 1 } }),
+                /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: () => setEditingChannel({ name: "", description: "" }),
+                    sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
+                    children: /* @__PURE__ */ jsx(AddIcon, { sx: { color: "text.primary" } })
+                  }
+                ) })
+              ]
+            }
+          ),
+          !!chats?.length && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: false }),
+          !chats?.length && /* @__PURE__ */ jsx(Empty, { sx: { flex: 1 } })
+        ]
+      }
+    ),
+    show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+      chats.map((chat) => {
+        return /* @__PURE__ */ jsx(ChatRoom, { chat, inWallet: false }, chat.id);
+      }),
+      !activeChatId && /* @__PURE__ */ jsx(Empty, { sx: { height: 1 } })
+    ] }),
+    ChannelEditComponent && /* @__PURE__ */ jsx(
+      ChannelEditComponent,
+      {
+        initialValue: editingChannel,
+        onClose: () => setEditingChannel(null),
+        onSubmit: handleChannelEdit
+      }
+    )
+  ] });
+}

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

@@ -1,5 +1,6 @@
-import { User } from '../../types';
-import { default as ChatClient } from './chat-client';
+/// <reference types="react" />
+import type { User } from '../../types';
+import ChatClient from './chat-client';
 import { Message, Chat as ChatType, ChannelUpdatePayload } from './types';
 export interface ChatProviderProps {
     children: React.ReactNode;
@@ -42,5 +43,5 @@ interface ChatContextValue extends ChatState {
     chatRoomHeaderAddons?: (chat: ChatType) => React.ReactNode;
 }
 export declare const useChatContext: () => ChatContextValue;
-export declare function ChatProvider({ client, activeChatId, children, isInWallet, renderMessage, chatRoomHeaderAddons, }: ChatProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatProvider({ client, activeChatId, children, isInWallet, renderMessage, chatRoomHeaderAddons, }: ChatProviderProps): import("react").JSX.Element;
 export {};