@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/chat/chat-in-wallet.mjs

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { Backdrop, useMediaQuery } from "@mui/material";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import ChatBubbleEmptyIcon from "virtual:icons/iconoir/chat-bubble-empty";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import ChatRoom from "./chat-room.mjs";
+import { useChatContext } from "./context.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 ChatInWallet({ sx, ...rest }) {
+  const { chatId: activeChatId } = useParams();
+  const { initialized, chats } = useChatContext();
+  const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const activeChat = chats?.filter((chat) => chat?.id === activeChatId)?.[0];
+  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]
+  ];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(ChatRoom, { chat: activeChat, inWallet: true }),
+    !activeChatId && /* @__PURE__ */ jsx(Empty, { sx: { height: 1 } })
+  ] }) });
+}

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

@@ -1,9 +1,10 @@
-import { EditorProps } from '../editor';
+/// <reference types="react" />
+import { type EditorProps } from '../editor';
 interface Props extends EditorProps {
     initialContent?: string;
     send: (content: string) => Promise<void>;
     onContentChange?: (content: string) => void;
     onFocusChange?: (focused: boolean) => void;
 }
-export declare function ChatInput({ initialContent, send, onContentChange, onFocusChange }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ initialContent, send, onContentChange, onFocusChange }: Props): import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,295 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, CircularProgress } from "@mui/material";
+import SendIcon from "virtual:icons/tabler/send";
+import LetterCaseIcon from "virtual:icons/tabler/letter-case";
+import { useIsFocused } from "@blocklet/editor/lib/main/hooks/useIsFocused";
+import { BusyPlugin } from "@blocklet/editor/lib/ext/BusyPlugin";
+import { useEffect, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useBrowser } from "@arcblock/react-hooks";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $getSelection, $createParagraphNode } from "lexical";
+import { useLocalStorageState } from "ahooks";
+import { EditorConfigProvider } from "@blocklet/editor";
+import { LazyEditor } from "../editor/index.mjs";
+import { MAX_COMMENT_LENGTH } from "../../constants.mjs";
+function AutoClearPlugin({ clearKey }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (editor && clearKey) {
+      editor.update(() => {
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        root.clear();
+        root.append(paragraph);
+        if ($getSelection() !== null) {
+          paragraph.select();
+        }
+      });
+    }
+  }, [editor, clearKey]);
+  return null;
+}
+function FocusPlugin({ callback }) {
+  const hasFocus = useIsFocused();
+  useEffect(() => {
+    callback(hasFocus);
+  }, [callback, hasFocus]);
+  return null;
+}
+function DraggerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const { mobile } = useBrowser();
+  const hasFocus = useIsFocused();
+  const selection = editor.getEditorState().read($getSelection);
+  const enabled = mobile.any && hasFocus && selection;
+  const detectSwipe = (node, callback) => {
+    let touchstartY = 0;
+    let touchendY = 0;
+    function handleSwipe() {
+      if (touchstartY - touchendY > 10 || touchendY - touchstartY > 10) {
+        callback();
+      }
+    }
+    const onTouchStart = (event) => {
+      touchstartY = event.changedTouches[0].screenY;
+    };
+    const onTouchEnd = (event) => {
+      touchendY = event.changedTouches[0].screenY;
+      handleSwipe();
+    };
+    node.addEventListener("touchstart", onTouchStart, false);
+    node.addEventListener("touchend", onTouchEnd, false);
+    return () => {
+      node.removeEventListener("touchstart", onTouchStart, false);
+      node.removeEventListener("touchend", onTouchEnd, false);
+    };
+  };
+  useEffect(() => {
+    const root = editor.getRootElement();
+    if (enabled && root) {
+      const cleanup = [detectSwipe(document.body, () => editor.blur()), detectSwipe(root, () => editor.blur())];
+      return () => {
+        cleanup.forEach((fn) => fn());
+      };
+    }
+    return () => {
+    };
+  }, [editor, enabled]);
+  if (enabled) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          left: "50%",
+          top: 4,
+          width: 64,
+          marginLeft: "-32px",
+          height: 4,
+          bgcolor: "grey.300",
+          borderRadius: 0.1
+        }
+      }
+    );
+  }
+  return null;
+}
+function ShortcutPlugin({ callback }) {
+  const [editor] = useLexicalComposerContext();
+  const { mobile } = useBrowser();
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (e) => {
+        if (mobile.any || e.shiftKey) {
+          return false;
+        }
+        if (document.getElementById("typeahead-menu")) {
+          return false;
+        }
+        callback();
+        e.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  }, [editor, callback, mobile.any]);
+  return null;
+}
+export function ChatInput({ initialContent, send, onContentChange, onFocusChange }) {
+  const { t } = useLocaleContext();
+  const [content, setContent] = useState("");
+  const [lastSent, setLastSent] = useState(0);
+  const [toolbarVisible, setToolbarVisible] = useLocalStorageState("chat-input-toolbar-visible", {
+    defaultValue: false
+  });
+  const { mobile } = useBrowser();
+  const [focused, setFocused] = useState(false);
+  const [editorBusy, setEditorBusy] = useState(false);
+  const FocusCallback = (v) => {
+    setFocused(v);
+    onFocusChange?.(v);
+  };
+  const onToolbarBtnMouseDown = (e) => {
+    e.preventDefault();
+    setToolbarVisible((x) => !x);
+  };
+  const compactView = mobile.any && !focused;
+  const handleSend = () => {
+    if (!content || editorBusy) return;
+    send(content);
+    setContent("");
+    setLastSent(Date.now());
+  };
+  const onSendBtnMouseDown = (e) => {
+    e.preventDefault();
+    handleSend();
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        pb: 5,
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+        ".be-shell": { borderTop: "0 !important" },
+        ".be-shell .toolbar": { bgcolor: "grey.50", ...!toolbarVisible && { display: "none" } },
+        ".be-shell .be-editable": { px: "16px !important" },
+        ".be-shell .be-placeholder": { left: 16 },
+        ".be-shell .be-editable, .be-shell .be-content": { minHeight: "20px !important" },
+        ".be-shell .be-editable p": { my: 0 },
+        ".draggable-block-menu": { display: "none" },
+        ...compactView && {
+          pb: 0,
+          borderRadius: 2,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              maxHeight: 400,
+              overflowY: "auto",
+              ...compactView && {
+                height: 44 + (toolbarVisible ? 44 : 0),
+                pt: toolbarVisible ? 0 : 0.5,
+                pb: 0.5,
+                overflow: "hidden",
+                ".be-shell .be-editable": { pr: "44px !important" }
+              }
+            },
+            children: [
+              compactView && !toolbarVisible && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    position: "absolute",
+                    right: 12,
+                    top: 12,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: 28,
+                    height: 28,
+                    bgcolor: "grey.300",
+                    borderRadius: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx(Box, { component: SendIcon, sx: { fontSize: 13, color: "text.secondary" } })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EditorConfigProvider,
+                {
+                  value: {
+                    minimalMode: true,
+                    characterLimitConfig: {
+                      maxLength: MAX_COMMENT_LENGTH,
+                      indicatorStyle: { display: "none" }
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    LazyEditor,
+                    {
+                      enableSaveAreaPlugin: false,
+                      initialContent: initialContent || "",
+                      onChange: ({ content: contentStr, isEmpty }) => {
+                        const value = isEmpty ? "" : contentStr;
+                        setContent(value);
+                        onContentChange?.(value);
+                      },
+                      autoFocus: false,
+                      placeholder: "Jot something down",
+                      children: [
+                        /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey: lastSent }),
+                        /* @__PURE__ */ jsx(ShortcutPlugin, { callback: handleSend }),
+                        /* @__PURE__ */ jsx(DraggerPlugin, {}),
+                        /* @__PURE__ */ jsx(FocusPlugin, { callback: FocusCallback }),
+                        /* @__PURE__ */ jsx(BusyPlugin, { onChange: (busy) => setEditorBusy(busy) })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 40,
+              p: 1,
+              ...compactView && { display: "none" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  color: "primary",
+                  variant: "text",
+                  onMouseDown: onToolbarBtnMouseDown,
+                  startIcon: /* @__PURE__ */ jsx(Box, { component: LetterCaseIcon, sx: { fontSize: "14px !important" } }),
+                  sx: {
+                    width: 32,
+                    height: 28,
+                    minWidth: 0,
+                    ".MuiButton-startIcon": { m: 0, color: "text.secondary" },
+                    ...toolbarVisible && { bgcolor: "grey.200" }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  color: "primary",
+                  variant: "contained",
+                  disabled: !content || editorBusy,
+                  onMouseDown: onSendBtnMouseDown,
+                  startIcon: editorBusy ? /* @__PURE__ */ jsx(CircularProgress, { size: 12 }) : /* @__PURE__ */ jsx(Box, { component: SendIcon, sx: { fontSize: "14px !important" } }),
+                  sx: { height: 28 },
+                  children: t("chat.send")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}

package/dist/components/chat/chat-list-in-wallet.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface ChatProps {
     sx?: SxProps;
 }
-export default function ChatListInWallet({ sx, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatListInWallet({ sx, ...rest }: ChatProps): import("react").JSX.Element;
 export {};

package/dist/components/chat/chat-list-in-wallet.mjs

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Backdrop, Divider } from "@mui/material";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import ChatBubbleEmptyIcon from "virtual:icons/iconoir/chat-bubble-empty";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useEffect } from "react";
+import bridge from "@arcblock/bridge";
+import ChatList from "./chat-list.mjs";
+import { useChatContext } from "./context.mjs";
+import { UserSearch } from "./user-search.mjs";
+import { useChatInWallet } from "./hooks.mjs";
+import { useUnreadNotification } from "./unread-notification.mjs";
+import { useSessionContext } from "../hooks/index.mjs";
+import { Avatar } from "../avatars/index.mjs";
+import { openProfile } from "../utils.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 ChatListInWallet({ sx, ...rest }) {
+  const { session } = useSessionContext();
+  const { initialized, chats } = useChatContext();
+  const { unreadMessageCount } = useUnreadNotification();
+  const { updateUnreadState, isWebNavbar } = useChatInWallet();
+  useEffect(() => {
+    updateUnreadState({ unread: unreadMessageCount > 0, unreadMessageCount });
+  }, [unreadMessageCount, updateUnreadState]);
+  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",
+      ...window.chatInWallet?.safeAreaInsetTop && {
+        pt: `${window.chatInWallet.safeAreaInsetTop}px`
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: { sm: 320, xs: "100%" },
+        borderRight: { sm: (theme) => `1px solid ${theme.palette.divider}` }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: "0 0 auto", py: 1, px: 2 }, children: [
+          isWebNavbar && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                mb: 1
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    onClick: () => {
+                      bridge.call("switchApp");
+                    },
+                    sx: { display: "flex", alignItems: "center", gap: 1 },
+                    children: [
+                      /* @__PURE__ */ jsx(Box, { component: "img", src: window.blocklet.appLogo, alt: "", sx: { width: 20, height: 20 } }),
+                      /* @__PURE__ */ jsx(Box, { component: "span", sx: { typography: "h5", fontWeight: "bold" }, children: window.blocklet.appName })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    did: session?.user?.did,
+                    src: session?.user?.avatar,
+                    size: 20,
+                    shape: "circle",
+                    variant: "circle",
+                    onClick: () => openProfile(session?.user?.did, true)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(UserSearch, { inputSx: { fontSize: 16 } })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        !!chats?.length && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),
+        !chats?.length && /* @__PURE__ */ jsx(Empty, { sx: { flex: 1 } })
+      ]
+    }
+  ) });
+}

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface Props {
     sx?: SxProps;
     inWallet?: boolean;
 }
-export default function ChatList({ inWallet, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ChatList({ inWallet, ...rest }: Props): import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { Badge } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { grey } from "@mui/material/colors";
+import { useChatContext } from "./context.mjs";
+import { AuthorInfo, SystemUser } from "../avatars/index.mjs";
+import ChannelGroup from "./channel-group.mjs";
+import { useChatInWallet } from "./hooks.mjs";
+import { useUnreadNotification } from "./unread-notification.mjs";
+export default function ChatList({ inWallet, ...rest }) {
+  const { t } = useLocaleContext();
+  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, getLastMessageText } = useChatContext();
+  const { chatUnreadCounts } = useUnreadNotification();
+  const { navigateToChat } = useChatInWallet();
+  const renderItem = (chat) => {
+    if (chat.type === "notification") {
+      return /* @__PURE__ */ jsx(SystemUser, { name: t("chat.notification") });
+    }
+    const latestMessageText = getLastMessageText(chat);
+    const latestMessageTextContent = latestMessageText && /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "message-content-text",
+        sx: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          width: 220,
+          fontWeight: "regular",
+          fontSize: 14,
+          lineHeight: 1.5
+        },
+        children: latestMessageText
+      }
+    );
+    if (chat.type === "dm") {
+      const oppositeUser = getOppositeUser(chat);
+      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: true, showBadge: false, showDID: false, linkToProfile: !inWallet, children: latestMessageTextContent });
+    }
+    if (chat.type === "channel") {
+      return /* @__PURE__ */ jsx(ChannelGroup, { chat, children: latestMessageTextContent });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: orderedChats.map((chat) => {
+    const isActiveChat = activeChatId === chat.id;
+    const unreadCount = chatUnreadCounts[chat.id];
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          position: "relative",
+          m: 1,
+          mx: { xs: 0, sm: 1 },
+          py: 1.5,
+          px: 2,
+          fontWeight: "bold",
+          color: isActiveChat ? "secondary.main" : "grey.700",
+          bgcolor: isActiveChat ? "action.selected" : "",
+          borderRadius: 1,
+          cursor: "pointer",
+          ...isActiveChat && {
+            ".did-address-text": { color: `${grey[500]} !important` },
+            ".message-content-text": { color: `${grey[500]}` }
+          }
+        },
+        onClick: () => {
+          if (inWallet) {
+            const webTitleMap = {
+              dm: () => getOppositeUser(chat)?.fullName || t("chat.unknown"),
+              notification: () => t("chat.notification"),
+              channel: () => chat?.type === "channel" ? `# ${chat.name}` : t("chat.unknownChannel"),
+              default: () => t("chat.chats")
+            };
+            const getWebTitle = () => {
+              if (!chat) {
+                return t("chat.chats");
+              }
+              const getTitle = webTitleMap[chat.type] || webTitleMap.default;
+              return getTitle();
+            };
+            navigateToChat({ id: chat.id, title: getWebTitle() });
+          } else {
+            setActiveChat(chat);
+          }
+        },
+        children: [
+          renderItem(chat),
+          unreadCount > 0 && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              badgeContent: unreadCount,
+              color: "primary",
+              sx: {
+                position: "absolute",
+                top: "50%",
+                right: { xs: 28, md: 16 },
+                transform: "translateY(-50%)"
+              },
+              children: /* @__PURE__ */ jsx(Box, { sx: { width: 1, height: 1 } })
+            }
+          )
+        ]
+      },
+      chat.id
+    );
+  }) });
+}

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

@@ -1,7 +1,8 @@
-import { Chat } from './types';
+/// <reference types="react" />
+import type { Chat } from './types';
 interface ChatProps {
     chat: Chat;
     inWallet: boolean;
 }
-export default function ChatRoom({ chat, inWallet, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatRoom({ chat, inWallet, ...rest }: ChatProps): import("react").JSX.Element;
 export {};