@blocklet/discuss-kit-ux 2.1.46 → 2.1.47

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

@@ -1,6 +1,6 @@
 import { Emitter } from 'mitt';
 import { User } from '../../types';
-import { Chat, Message, Channel } from './types';
+import { Chat, Message, Channel, ChannelUpdatePayload } from './types';
 type Events = {
     message: {
         chatId: string;
@@ -59,7 +59,8 @@ export default abstract class ChatClient {
         nextCursor: string;
     }>;
     abstract sendMessage: (chatId: string, content: string) => Promise<Message>;
-    abstract createChannel: (name: string, description: string) => Promise<Channel>;
+    abstract createChannel: (payload: Omit<ChannelUpdatePayload, 'id'>) => Promise<Channel>;
+    abstract updateChannel: (payload: ChannelUpdatePayload) => Promise<Channel>;
     abstract joinChannel: (chatId: string) => Promise<void>;
     abstract leaveChannel: (chatId: string) => Promise<void>;
     abstract deleteChannel: (chatId: string) => Promise<void>;

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

@@ -1,6 +1,12 @@
 import { SxProps } from '@mui/material';
+import { ChannelUpdatePayload } from './types';
 interface ChatProps {
     sx?: SxProps;
+    ChannelEditComponent?: React.ComponentType<{
+        initialValue: ChannelUpdatePayload;
+        onClose: () => void;
+        onSubmit: (payload: ChannelUpdatePayload) => void;
+    }>;
 }
-export default function Chat({ sx, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export default function Chat({ sx, ChannelEditComponent, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,18 @@
 import { User } from '../../types';
 import { default as ChatClient } from './chat-client';
-import { Chat as ChatType } from './types';
+import { Chat as ChatType, ChannelUpdatePayload } from './types';
 export interface ChatProviderProps {
     children: React.ReactNode;
     client: ChatClient;
     activeChatId?: string | null;
     isInWallet: boolean;
 }
+type EditingChannel = ChannelUpdatePayload | null;
 interface ChatState {
     initialized: boolean;
     chats: ChatType[];
     activeChatId?: string | null;
+    editingChannel: EditingChannel;
     error?: string;
 }
 interface ChatContextValue extends ChatState {
@@ -22,6 +24,7 @@ interface ChatContextValue extends ChatState {
     loadMessages: (chatId: string, cursor?: string) => Promise<void>;
     sendMessage: (chatId: string, content: string) => Promise<void>;
     addChat: (chat: ChatType) => void;
+    updateChat: (chatId: string, mapper: (chat: ChatType) => ChatType) => void;
     initChatRoom: (chatId: string) => Promise<void>;
     joinChannel: (chatId: string) => Promise<void>;
     leaveChannel: (chatId: string) => Promise<void>;
@@ -32,6 +35,7 @@ interface ChatContextValue extends ChatState {
     orderedChats: ChatType[];
     getLastMessageText: (chat: ChatType) => string;
     isInWallet: boolean;
+    setEditingChannel: (channel: EditingChannel) => void;
 }
 export declare const useChatContext: () => ChatContextValue;
 export declare function ChatProvider({ client, activeChatId, children, isInWallet }: ChatProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -86,5 +86,11 @@ export interface Channel extends CommonChat {
     description?: string;
     hasJoined: boolean;
 }
+export interface ChannelUpdatePayload {
+    id?: string;
+    name: string;
+    description?: string;
+    boardId?: string;
+}
 export type Chat = DM | Channel | Notification;
 export {};

package/dist/components/locale/en.d.ts

@@ -45,10 +45,10 @@ declare const _default: {
         reply: string;
         unknown: string;
         chats: string;
-        create: string;
         channel: string;
         description: string;
         newChannel: string;
+        updateChannel: string;
         noChats: string;
         unknownChannel: string;
         channelDescription: string;
@@ -77,6 +77,7 @@ declare const _default: {
         notYetJoinedTheChannel: string;
         typeSomething: string;
         send: string;
+        selectBoardTip: string;
     };
     userActionLog: {
         editedCapital: string;

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

@@ -51,6 +51,7 @@ export declare const translations: {
             channel: string;
             description: string;
             newChannel: string;
+            updateChannel: string;
             noChats: string;
             unknownChannel: string;
             channelDescription: string;
@@ -79,6 +80,7 @@ export declare const translations: {
             notYetJoinedTheChannel: string;
             typeSomething: string;
             send: string;
+            selectBoardTip: string;
         };
         userActionLog: {
             editedCapital: string;
@@ -135,10 +137,10 @@ export declare const translations: {
             reply: string;
             unknown: string;
             chats: string;
-            create: string;
             channel: string;
             description: string;
             newChannel: string;
+            updateChannel: string;
             noChats: string;
             unknownChannel: string;
             channelDescription: string;
@@ -167,6 +169,7 @@ export declare const translations: {
             notYetJoinedTheChannel: string;
             typeSomething: string;
             send: string;
+            selectBoardTip: string;
         };
         userActionLog: {
             editedCapital: string;

package/dist/components/locale/zh.d.ts

@@ -50,6 +50,7 @@ declare const _default: {
         channel: string;
         description: string;
         newChannel: string;
+        updateChannel: string;
         noChats: string;
         unknownChannel: string;
         channelDescription: string;
@@ -78,6 +79,7 @@ declare const _default: {
         notYetJoinedTheChannel: string;
         typeSomething: string;
         send: string;
+        selectBoardTip: string;
     };
     userActionLog: {
         editedCapital: string;

package/dist/{editor-CqPVERyE.mjs → editor-BhPOcPBU.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-vYGfcLWv.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DDQnH71T.mjs";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-vYGfcLWv.mjs → index-DDQnH71T.mjs}

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
 import { create as create$1, styled as styled$1 } from "@arcblock/ux/lib/Theme";
 import { useEffect, useRef, useState, createElement, useContext, useMemo, useCallback, isValidElement, lazy, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
-import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$2, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField as TextField$1, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$2, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
 import { lazyWithPreload } from "react-lazy-with-preload";
@@ -73,8 +73,6 @@ import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
 import { useIsFocused } from "@blocklet/editor/lib/main/hooks/useIsFocused";
 import { BusyPlugin } from "@blocklet/editor/lib/ext/BusyPlugin";
-import TextField from "@mui/material/TextField";
-import AddIcon from "@mui/icons-material/Add";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 import ShortTextIcon from "@mui/icons-material/ShortText";
 import { AxiosError } from "axios";
@@ -842,7 +840,7 @@ const Root$3 = styled$1(AvatarGroup)`
   }
 
   // use avatarGroup first is last
-  .avatars-item:first-child {
+  .avatars-item:first-of-type {
     width: 24px;
   }
 
@@ -3803,6 +3801,7 @@ function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
     initialized: false,
     chats: [],
     activeChatId: void 0,
+    editingChannel: null,
     error: void 0
   });
   const { markAsUnread } = useUnreadNotification();
@@ -4056,6 +4055,7 @@ function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
       loadMessages,
       sendMessage,
       addChat,
+      updateChat,
       initChatRoom,
       joinChannel,
       leaveChannel,
@@ -4065,7 +4065,8 @@ function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
       orderedChats,
       getLastMessageText,
       isInWallet,
-      createDM
+      createDM,
+      setEditingChannel: (payload) => setState((prev) => ({ ...prev, editingChannel: payload }))
     };
   }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
@@ -4470,7 +4471,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
       const { points, post, comment, eventKey = "" } = message;
       const unit = points > 1 ? t("chat.points") : t("chat.point");
       const event = eventKey ? `for ${eventKey.toLowerCase().replaceAll("-", " ")}: ` : ": ";
-      const tip = t("chat.pointUp", { points, unit, event });
+      const tip = t("chat.pointUp", { points: points + "", unit, event });
       return /* @__PURE__ */ jsxs(Box$1, { children: [
         /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "grey.600" }, children: tip }),
         comment && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: comment.excerpt }),
@@ -4734,7 +4735,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
 const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
-const Editor = lazy(() => import("./editor-CqPVERyE.mjs"));
+const Editor = lazy(() => import("./editor-BhPOcPBU.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -5055,7 +5056,16 @@ function ChatRoom({ chat, inWallet, ...rest }) {
   const { t } = useLocaleContext();
   const theme = useTheme();
   const downSm = useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
-  const { initChatRoom, isActiveChat, getOppositeUser, sendMessage, joinChannel, leaveChannel, deleteChannel } = useChatContext();
+  const {
+    initChatRoom,
+    isActiveChat,
+    getOppositeUser,
+    sendMessage,
+    joinChannel,
+    leaveChannel,
+    deleteChannel,
+    setEditingChannel
+  } = useChatContext();
   const { confirm } = useConfirm();
   const isActive = isActiveChat(chat.id);
   const { session, isAdmin } = useSessionContext();
@@ -5101,6 +5111,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
       }
       if (isAdmin || isCreator) {
         menuItems.push(
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => setEditingChannel(chat), children: /* @__PURE__ */ jsx(Box$1, { component: "span", children: "Edit" }) }, "edit"),
           /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
         );
       }
@@ -5212,94 +5223,6 @@ function ChatRoom({ chat, inWallet, ...rest }) {
     ] })
   ] });
 }
-function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
-  const [state, setState] = useSetState({
-    name: "",
-    description: ""
-  });
-  const { t } = useLocaleContext();
-  const theme = useTheme();
-  const canSubmit = useMemo(() => {
-    return state.name;
-  }, [state]);
-  const handleSubmit = () => {
-    onSubmit(state);
-  };
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      showCloseButton: true,
-      maxWidth: "lg",
-      title: t("chat.newChannel"),
-      actions: /* @__PURE__ */ jsxs(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: [
-        /* @__PURE__ */ jsx(AddIcon, { sx: { mr: 0.375 } }),
-        t("chat.create")
-      ] }),
-      onClose,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(
-        Box$1,
-        {
-          width: { xs: "100%", md: 560 },
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 2,
-            lineHeight: 1.75
-          },
-          minHeight: 140,
-          children: [
-            /* @__PURE__ */ jsxs(Box$1, { children: [
-              /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
-              /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  value: state.name,
-                  placeholder: t("chat.channelName"),
-                  size: "small",
-                  fullWidth: true,
-                  sx: {
-                    "& .MuiInputBase-root": {
-                      height: 40,
-                      backgroundColor: theme.palette.grey[100]
-                    }
-                  },
-                  onChange: (e) => setState({ name: e.target.value })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(Box$1, { children: [
-              /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
-              /* @__PURE__ */ jsx(
-                TextField,
-                {
-                  value: state.description,
-                  placeholder: t("chat.channelDescription"),
-                  fullWidth: true,
-                  multiline: true,
-                  onChange: (e) => setState({ description: e.target.value }),
-                  minRows: 2,
-                  sx: {
-                    "& .MuiInputBase-root": {
-                      display: "flex",
-                      alignItems: "flex-start",
-                      backgroundColor: theme.palette.grey[100]
-                    },
-                    "& .MuiInputBase-inputMultiline": {
-                      maxHeight: "100%",
-                      overflowY: "auto"
-                    }
-                  }
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
 const tablerSearch = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" }) });
 function UserSearch({ sx, inputSx, ...rest }) {
   var _a2;
@@ -5330,8 +5253,8 @@ function UserSearch({ sx, inputSx, ...rest }) {
     }
   );
   const mergedSx = mergeSx({}, sx);
-  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, ...rest, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { sx: mergedSx, ...rest, children: /* @__PURE__ */ jsx(
       Autocomplete,
       {
         open,
@@ -5404,7 +5327,7 @@ function UserSearch({ sx, inputSx, ...rest }) {
           setInputValue(newInputValue);
         },
         renderInput: (params) => /* @__PURE__ */ jsx(
-          TextField$1,
+          TextField,
           {
             ...params,
             placeholder: "Search user",
@@ -5426,7 +5349,7 @@ function UserSearch({ sx, inputSx, ...rest }) {
         isOptionEqualToValue: (option, value) => option.did === value.did,
         sx: { ".MuiAutocomplete-endAdornment": { display: "none" } }
       }
-    ),
+    ) }),
     ReactDOM.createPortal(
       /* @__PURE__ */ jsx(Backdrop, { open, sx: { zIndex: "modal", bgcolor: "transparent" } }),
       window.document.body
@@ -5451,10 +5374,20 @@ function Empty$2({ sx }) {
     /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
   ] });
 }
-function Chat({ sx, ...rest }) {
+function Chat({ sx, ChannelEditComponent, ...rest }) {
   var _a2;
-  const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, getOppositeUser } = useChatContext();
-  const [newChannelVisible, setNewChannelVisible] = useState(false);
+  const {
+    client: client2,
+    initialized,
+    chats,
+    activeChatId,
+    addChat,
+    updateChat,
+    setActiveChat,
+    getOppositeUser,
+    editingChannel,
+    setEditingChannel
+  } = useChatContext();
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
   const { t } = useLocaleContext();
   const activeChat = (_a2 = chats == null ? void 0 : chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)) == null ? void 0 : _a2[0];
@@ -5500,12 +5433,18 @@ function Chat({ sx, ...rest }) {
     );
   }
   const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
-  const handleNewChannel = async ({ name, description }) => {
-    const saved = await client2.createChannel(name, description);
-    const newChannel = { ...saved, hasJoined: true };
-    addChat(newChannel);
-    setNewChannelVisible(false);
-    setActiveChat(newChannel);
+  const handleChannelEdit = async (payload) => {
+    if (payload.id) {
+      await client2.updateChannel(payload);
+      updateChat(payload.id, (chat) => ({ ...chat, ...payload }));
+      setEditingChannel(null);
+    } else {
+      const saved = await client2.createChannel(payload);
+      const newChannel = { ...saved, hasJoined: true };
+      addChat(newChannel);
+      setEditingChannel(null);
+      setActiveChat(newChannel);
+    }
   };
   return /* @__PURE__ */ jsxs(Box$1, { ...rest, sx: mergedSx, children: [
     /* @__PURE__ */ jsx(Helmet, { title: getWebTitle() }),
@@ -5536,7 +5475,7 @@ function Chat({ sx, ...rest }) {
                 /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(
                   IconButton$1,
                   {
-                    onClick: () => setNewChannelVisible(true),
+                    onClick: () => setEditingChannel({ name: "", description: "" }),
                     sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
                     children: /* @__PURE__ */ jsx(Add, { sx: { color: "#000" } })
                   }
@@ -5555,14 +5494,13 @@ function Chat({ sx, ...rest }) {
       }),
       !activeChatId && /* @__PURE__ */ jsx(Empty$2, { sx: { height: 1 } })
     ] }),
-    /* @__PURE__ */ jsx(
-      NewChannelDialog,
+    ChannelEditComponent && /* @__PURE__ */ jsx(
+      ChannelEditComponent,
       {
-        open: newChannelVisible,
-        onClose: () => setNewChannelVisible(false),
-        onSubmit: handleNewChannel
-      },
-      newChannelVisible ? 1 : 0
+        initialValue: editingChannel,
+        onClose: () => setEditingChannel(null),
+        onSubmit: handleChannelEdit
+      }
     )
   ] });
 }
@@ -6218,10 +6156,10 @@ const en = {
     reply: "Reply",
     unknown: "Unknown",
     chats: "Chats",
-    create: "Create",
     channel: "Channel",
     description: "Description",
     newChannel: "New channel",
+    updateChannel: "Update channel",
     noChats: "No chats",
     unknownChannel: "Unknown Channel",
     channelDescription: "Channel Description",
@@ -6249,7 +6187,8 @@ const en = {
     loadMore: "Load older messages",
     notYetJoinedTheChannel: "Not yet joined the channel",
     typeSomething: "Type here. Use Markdown, Drag or paste images",
-    send: "Send"
+    send: "Send",
+    selectBoardTip: "Only board members can join board-specific channels"
   },
   userActionLog: {
     editedCapital: "Edited",
@@ -6311,6 +6250,7 @@ const zh = {
     channel: "频道",
     description: "描述",
     newChannel: "新的频道",
+    updateChannel: "更新频道",
     noChats: "暂无对话",
     unknownChannel: "未命名的频道",
     channelDescription: "频道描述",
@@ -6338,7 +6278,8 @@ const zh = {
     loadMore: "加载更多消息",
     notYetJoinedTheChannel: "暂未加入这个频道",
     typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片",
-    send: "发送"
+    send: "发送",
+    selectBoardTip: "只有 board 成员可以加入 board 专属频道"
   },
   userActionLog: {
     editedCapital: "编辑",
@@ -11921,7 +11862,7 @@ function PointUp({ points }) {
               fontWeight: "bold"
             },
             children: t("common.pointUp", {
-              points
+              points: points + ""
             })
           }
         )

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, ar, N, am, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-vYGfcLWv.mjs";
+import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, ar, N, am, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-DDQnH71T.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@blocklet/editor/lib/ext/BusyPlugin"), require("@mui/material/TextField"), require("@mui/icons-material/Add"), require("@mui/icons-material/ArrowBackIos"), require("@mui/icons-material/ShortText"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@blocklet/editor/lib/ext/BusyPlugin", "@mui/material/TextField", "@mui/icons-material/Add", "@mui/icons-material/ArrowBackIos", "@mui/icons-material/ShortText", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.TextField, global.AddIcon, global.ArrowBackIosIcon, global.ShortTextIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
-})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, TextField, AddIcon, ArrowBackIosIcon, ShortTextIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@blocklet/editor/lib/ext/BusyPlugin"), require("@mui/icons-material/ArrowBackIos"), require("@mui/icons-material/ShortText"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@blocklet/editor/lib/ext/BusyPlugin", "@mui/icons-material/ArrowBackIos", "@mui/icons-material/ShortText", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.ArrowBackIosIcon, global.ShortTextIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, ArrowBackIosIcon, ShortTextIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -764,7 +764,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
 
   // use avatarGroup first is last
-  .avatars-item:first-child {
+  .avatars-item:first-of-type {
     width: 24px;
   }
 
@@ -3725,6 +3725,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       initialized: false,
       chats: [],
       activeChatId: void 0,
+      editingChannel: null,
       error: void 0
     });
     const { markAsUnread } = useUnreadNotification();
@@ -3978,6 +3979,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         loadMessages,
         sendMessage,
         addChat,
+        updateChat,
         initChatRoom,
         joinChannel,
         leaveChannel,
@@ -3987,7 +3989,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         orderedChats,
         getLastMessageText,
         isInWallet,
-        createDM
+        createDM,
+        setEditingChannel: (payload) => setState((prev) => ({ ...prev, editingChannel: payload }))
       };
     }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
@@ -4392,7 +4395,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const { points, post, comment, eventKey = "" } = message;
         const unit = points > 1 ? t("chat.points") : t("chat.point");
         const event = eventKey ? `for ${eventKey.toLowerCase().replaceAll("-", " ")}: ` : ": ";
-        const tip = t("chat.pointUp", { points, unit, event });
+        const tip = t("chat.pointUp", { points: points + "", unit, event });
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.600" }, children: tip }),
           comment && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: comment.excerpt }),
@@ -4977,7 +4980,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const { t } = context.useLocaleContext();
     const theme = styles.useTheme();
     const downSm = material.useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
-    const { initChatRoom, isActiveChat, getOppositeUser, sendMessage, joinChannel, leaveChannel, deleteChannel } = useChatContext();
+    const {
+      initChatRoom,
+      isActiveChat,
+      getOppositeUser,
+      sendMessage,
+      joinChannel,
+      leaveChannel,
+      deleteChannel,
+      setEditingChannel
+    } = useChatContext();
     const { confirm } = useConfirm();
     const isActive = isActiveChat(chat.id);
     const { session, isAdmin } = useSessionContext();
@@ -5023,6 +5035,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
         if (isAdmin || isCreator) {
           menuItems.push(
+            /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: () => setEditingChannel(chat), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: "Edit" }) }, "edit"),
             /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
           );
         }
@@ -5134,94 +5147,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] })
     ] });
   }
-  function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
-    const [state, setState] = ahooks.useSetState({
-      name: "",
-      description: ""
-    });
-    const { t } = context.useLocaleContext();
-    const theme = styles.useTheme();
-    const canSubmit = react.useMemo(() => {
-      return state.name;
-    }, [state]);
-    const handleSubmit = () => {
-      onSubmit(state);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Dialog,
-      {
-        open,
-        showCloseButton: true,
-        maxWidth: "lg",
-        title: t("chat.newChannel"),
-        actions: /* @__PURE__ */ jsxRuntime.jsxs(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { sx: { mr: 0.375 } }),
-          t("chat.create")
-        ] }),
-        onClose,
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Box,
-          {
-            width: { xs: "100%", md: 560 },
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 2,
-              lineHeight: 1.75
-            },
-            minHeight: 140,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextField,
-                  {
-                    value: state.name,
-                    placeholder: t("chat.channelName"),
-                    size: "small",
-                    fullWidth: true,
-                    sx: {
-                      "& .MuiInputBase-root": {
-                        height: 40,
-                        backgroundColor: theme.palette.grey[100]
-                      }
-                    },
-                    onChange: (e) => setState({ name: e.target.value })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextField,
-                  {
-                    value: state.description,
-                    placeholder: t("chat.channelDescription"),
-                    fullWidth: true,
-                    multiline: true,
-                    onChange: (e) => setState({ description: e.target.value }),
-                    minRows: 2,
-                    sx: {
-                      "& .MuiInputBase-root": {
-                        display: "flex",
-                        alignItems: "flex-start",
-                        backgroundColor: theme.palette.grey[100]
-                      },
-                      "& .MuiInputBase-inputMultiline": {
-                        maxHeight: "100%",
-                        overflowY: "auto"
-                      }
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
   const tablerSearch = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" }) });
   function UserSearch({ sx, inputSx, ...rest }) {
     var _a2;
@@ -5252,8 +5177,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     );
     const mergedSx = mergeSx({}, sx);
-    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: mergedSx, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
         material.Autocomplete,
         {
           open,
@@ -5348,7 +5273,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           isOptionEqualToValue: (option, value) => option.did === value.did,
           sx: { ".MuiAutocomplete-endAdornment": { display: "none" } }
         }
-      ),
+      ) }),
       ReactDOM.createPortal(
         /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open, sx: { zIndex: "modal", bgcolor: "transparent" } }),
         window.document.body
@@ -5373,10 +5298,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
     ] });
   }
-  function Chat({ sx, ...rest }) {
+  function Chat({ sx, ChannelEditComponent, ...rest }) {
     var _a2;
-    const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, getOppositeUser } = useChatContext();
-    const [newChannelVisible, setNewChannelVisible] = react.useState(false);
+    const {
+      client: client2,
+      initialized,
+      chats,
+      activeChatId,
+      addChat,
+      updateChat,
+      setActiveChat,
+      getOppositeUser,
+      editingChannel,
+      setEditingChannel
+    } = useChatContext();
     const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
     const { t } = context.useLocaleContext();
     const activeChat = (_a2 = chats == null ? void 0 : chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)) == null ? void 0 : _a2[0];
@@ -5422,12 +5357,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       );
     }
     const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
-    const handleNewChannel = async ({ name, description }) => {
-      const saved = await client2.createChannel(name, description);
-      const newChannel = { ...saved, hasJoined: true };
-      addChat(newChannel);
-      setNewChannelVisible(false);
-      setActiveChat(newChannel);
+    const handleChannelEdit = async (payload) => {
+      if (payload.id) {
+        await client2.updateChannel(payload);
+        updateChat(payload.id, (chat) => ({ ...chat, ...payload }));
+        setEditingChannel(null);
+      } else {
+        const saved = await client2.createChannel(payload);
+        const newChannel = { ...saved, hasJoined: true };
+        addChat(newChannel);
+        setEditingChannel(null);
+        setActiveChat(newChannel);
+      }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, sx: mergedSx, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactHelmet.Helmet, { title: getWebTitle() }),
@@ -5458,7 +5399,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   /* @__PURE__ */ jsxRuntime.jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsxRuntime.jsx(
                     IconButton$1,
                     {
-                      onClick: () => setNewChannelVisible(true),
+                      onClick: () => setEditingChannel({ name: "", description: "" }),
                       sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
                       children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, { sx: { color: "#000" } })
                     }
@@ -5477,14 +5418,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }),
         !activeChatId && /* @__PURE__ */ jsxRuntime.jsx(Empty$2, { sx: { height: 1 } })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        NewChannelDialog,
+      ChannelEditComponent && /* @__PURE__ */ jsxRuntime.jsx(
+        ChannelEditComponent,
         {
-          open: newChannelVisible,
-          onClose: () => setNewChannelVisible(false),
-          onSubmit: handleNewChannel
-        },
-        newChannelVisible ? 1 : 0
+          initialValue: editingChannel,
+          onClose: () => setEditingChannel(null),
+          onSubmit: handleChannelEdit
+        }
       )
     ] });
   }
@@ -6140,10 +6080,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       reply: "Reply",
       unknown: "Unknown",
       chats: "Chats",
-      create: "Create",
       channel: "Channel",
       description: "Description",
       newChannel: "New channel",
+      updateChannel: "Update channel",
       noChats: "No chats",
       unknownChannel: "Unknown Channel",
       channelDescription: "Channel Description",
@@ -6171,7 +6111,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       loadMore: "Load older messages",
       notYetJoinedTheChannel: "Not yet joined the channel",
       typeSomething: "Type here. Use Markdown, Drag or paste images",
-      send: "Send"
+      send: "Send",
+      selectBoardTip: "Only board members can join board-specific channels"
     },
     userActionLog: {
       editedCapital: "Edited",
@@ -6233,6 +6174,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       channel: "频道",
       description: "描述",
       newChannel: "新的频道",
+      updateChannel: "更新频道",
       noChats: "暂无对话",
       unknownChannel: "未命名的频道",
       channelDescription: "频道描述",
@@ -6260,7 +6202,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       loadMore: "加载更多消息",
       notYetJoinedTheChannel: "暂未加入这个频道",
       typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片",
-      send: "发送"
+      send: "发送",
+      selectBoardTip: "只有 board 成员可以加入 board 专属频道"
     },
     userActionLog: {
       editedCapital: "编辑",
@@ -11843,7 +11786,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 fontWeight: "bold"
               },
               children: t("common.pointUp", {
-                points
+                points: points + ""
               })
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.1.46",
+  "version": "2.1.47",
   "files": [
     "dist"
   ],
@@ -18,8 +18,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.65",
-    "@arcblock/react-hooks": "^2.10.65",
+    "@arcblock/bridge": "^2.10.70",
+    "@arcblock/react-hooks": "^2.10.70",
     "@arcblock/ws": "^1.18.135",
     "@blocklet/uploader": "^0.1.51",
     "@emotion/css": "^11.13.0",
@@ -44,8 +44,8 @@
     "ufo": "^1.5.4",
     "unstated-next": "^1.1.0",
     "url-join": "^4.0.1",
-    "@blocklet/editor": "^2.1.46",
-    "@blocklet/labels": "^2.1.46"
+    "@blocklet/editor": "^2.1.47",
+    "@blocklet/labels": "^2.1.47"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",

package/dist/components/chat/new-channel-dialog.d.ts

@@ -1,11 +0,0 @@
-interface NewChannel {
-    name: string;
-    description: string;
-}
-interface NewChannelDialogProps {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: (payload: NewChannel) => void;
-}
-export default function NewChannelDialog({ open, onSubmit, onClose, ...rest }: NewChannelDialogProps): import("react/jsx-runtime").JSX.Element;
-export {};