@blocklet/discuss-kit-ux 2.4.35 → 2.4.37

package/dist/components/chat/context.mjs

@@ -0,0 +1,303 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, createContext, useContext, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSetState } from "ahooks";
+import uniqBy from "lodash/uniqBy";
+import orderBy from "lodash/orderBy";
+import { useSessionContext } from "../hooks/index.mjs";
+import { useUnreadNotification } from "./unread-notification.mjs";
+import { getExcerptFromLexicalContent } from "../utils.mjs";
+const ChatContext = createContext({});
+export const useChatContext = () => useContext(ChatContext);
+const uniqAndSort = (list, order = "asc") => {
+  const unique = uniqBy(list, "id");
+  const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
+  return sorted;
+};
+export function ChatProvider({
+  client,
+  activeChatId,
+  children,
+  isInWallet,
+  renderMessage,
+  chatRoomHeaderAddons
+}) {
+  const [state, setState] = useSetState({
+    initialized: false,
+    chats: [],
+    activeChatId: void 0,
+    editingChannel: null,
+    error: void 0
+  });
+  const { incrementUnreadCount, markChatAsRead } = useUnreadNotification();
+  const navigate = useNavigate();
+  const { session } = useSessionContext();
+  const currentUser = session?.user;
+  const orderedChats = useMemo(() => {
+    return orderBy(state.chats, (x) => x.lastMessageAt || "", "desc");
+  }, [state.chats]);
+  const hasUnreadMessages = ({ lastMessageAt, lastAckTime }) => {
+    if (lastMessageAt && (!lastAckTime || lastMessageAt > lastAckTime)) {
+      return true;
+    }
+    return false;
+  };
+  const isActiveChat = (chatId) => state.activeChatId === chatId;
+  const updateChat = (chatId, mapper) => {
+    setState((prev) => {
+      const chats = prev.chats.map((item) => {
+        if (item.id === chatId) {
+          const mapped = mapper(item);
+          return mapped;
+        }
+        return item;
+      });
+      return { ...prev, chats };
+    });
+  };
+  const updateLastAckTime = async (chatId, clientOnly) => {
+    updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
+    markChatAsRead(chatId);
+    if (!clientOnly) {
+      await client.updateLastAckTime(chatId);
+    }
+  };
+  const addMessage = (chatId, message) => {
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      lastMessageAt: message.createdAt,
+      messages: uniqAndSort([...chat.messages || [], message])
+    }));
+  };
+  const addParticipant = (chatId, participant) => {
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      participants: uniqBy([...chat.participants, participant], "did")
+    }));
+  };
+  const removeParticipant = (chatId, participant) => {
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      participants: chat.participants.filter((p) => p.did !== participant.did)
+    }));
+  };
+  const setActiveChat = (chat) => {
+    const chatId = chat?.id;
+    setState((prev) => ({ ...prev, activeChatId: chatId }));
+    if (chatId) {
+      if (isInWallet) {
+        navigate(`/chat-in-wallet/${chatId}`, { replace: true });
+      } else {
+        navigate(`/chat/${chatId}`, { replace: true });
+      }
+      updateChat(chatId, (origin) => ({
+        ...origin,
+        isActivated: true
+      }));
+      if ((chat.type !== "channel" || chat.hasJoined) && hasUnreadMessages(chat)) {
+        updateLastAckTime(chatId);
+      }
+    } else {
+      navigate("/chat", { replace: true });
+    }
+  };
+  const setActiveChatInWallet = (chat) => {
+    const chatId = chat?.id;
+    setState((prev) => ({ ...prev, activeChatId: chatId }));
+    if (chatId) {
+      navigate(`/chat-in-wallet/${chatId}`, { replace: true });
+      updateChat(chatId, (origin) => ({
+        ...origin,
+        isActivated: true
+      }));
+      if ((chat.type !== "channel" || chat.hasJoined) && hasUnreadMessages(chat)) {
+        updateLastAckTime(chatId);
+      }
+    } else {
+      navigate("/chat-in-wallet", { replace: true });
+    }
+  };
+  const addChat = (chat) => {
+    setState((prev) => ({ ...prev, chats: uniqAndSort([...state.chats, chat]) }));
+  };
+  const deleteChat = (chatId) => {
+    setState({ chats: state.chats.filter((item) => item.id !== chatId) });
+    setActiveChat(null);
+  };
+  const loadMessages = async (chatId, cursor) => {
+    const { messages, nextCursor } = await client.fetchMessages(chatId, cursor);
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      messages: uniqAndSort([...chat.messages || [], ...messages || []]),
+      nextCursor
+    }));
+  };
+  const sendMessage = async (chatId, content) => {
+    const saved = await client.sendMessage(chatId, content);
+    addMessage(chatId, saved);
+    updateLastAckTime(chatId, true);
+  };
+  const getLastMessageText = (chat) => {
+    const lastMessage = chat && chat.messages && chat.messages[chat.messages.length - 1];
+    const getPrefix = (sender) => {
+      const isMyselfMessage = sender.did === currentUser?.did;
+      if (isMyselfMessage || !sender?.fullName) {
+        return "";
+      }
+      return `${sender.fullName}: `;
+    };
+    if (lastMessage) {
+      return `${getPrefix(lastMessage?.sender)}${getExcerptFromLexicalContent(lastMessage?.content)}`;
+    }
+    if (chat.lastMessage) {
+      return `${getPrefix(chat.lastMessage.sender)}${chat.lastMessage.excerpt}`;
+    }
+    return "";
+  };
+  const initChatRoom = async (chatId) => {
+    const {
+      chat: { participants },
+      messages: { messages, nextCursor }
+    } = await client.fetchChat(chatId);
+    updateChat(chatId, (chat) => {
+      const mapped = {
+        ...chat,
+        participants,
+        messages: uniqAndSort(messages),
+        nextCursor,
+        ready: true
+      };
+      return mapped;
+    });
+  };
+  const joinChannel = async (chatId) => {
+    await client.joinChannel(chatId);
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      hasJoined: true
+    }));
+    updateLastAckTime(chatId);
+  };
+  const leaveChannel = async (chatId) => {
+    await client.leaveChannel(chatId);
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      hasJoined: false
+    }));
+  };
+  const deleteChannel = async (chatId) => {
+    await client.deleteChannel(chatId);
+  };
+  const deleteMessage = async (chatId, messageId) => {
+    await client.deleteMessage(messageId);
+    updateChat(chatId, (chat) => ({
+      ...chat,
+      messages: chat.messages?.filter((item) => item.id !== messageId) || []
+    }));
+  };
+  const init = async () => {
+    try {
+      const { chats } = await client.init();
+      let activeChat = null;
+      if (activeChatId && !chats.find((chat) => chat.id === activeChatId)) {
+        try {
+          const {
+            chat,
+            messages: { messages, nextCursor }
+          } = await client.fetchChat(activeChatId);
+          activeChat = { ...chat, messages, nextCursor, ready: true };
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      setState({ initialized: true, chats: activeChat ? [activeChat, ...chats] : chats });
+    } catch (e) {
+      console.error(e);
+      setState({ error: e.message });
+    }
+  };
+  const createDM = async (oppositeUserDid) => {
+    const chat = await client.createDM(oppositeUserDid);
+    addChat(chat);
+    return chat;
+  };
+  useEffect(() => {
+    if (currentUser?.did) {
+      init();
+    } else {
+      setState({
+        initialized: false,
+        chats: [],
+        activeChatId: void 0,
+        error: void 0
+      });
+    }
+    return () => client.destroy();
+  }, [currentUser?.did]);
+  useEffect(() => {
+    if (activeChatId) {
+      if (activeChatId !== state.activeChatId) {
+        const matched = state.chats.find((chat) => chat.id === activeChatId);
+        if (matched) {
+          setActiveChat(matched);
+        }
+      }
+    } else if (state.activeChatId && !activeChatId) {
+      setState((prev) => ({ ...prev, activeChatId: void 0 }));
+    }
+  }, [state, activeChatId]);
+  useEffect(() => {
+    const cancels = [
+      client.onMessage(({ chatId, message }) => {
+        addMessage(chatId, message);
+        if (message.sender.did === currentUser?.did) {
+          updateLastAckTime(chatId, true);
+        } else if (isActiveChat(chatId)) {
+          updateLastAckTime(chatId);
+        } else {
+          incrementUnreadCount(chatId, 1);
+        }
+      }),
+      client.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
+      client.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
+      client.onDeleteChannel(({ chatId }) => deleteChat(chatId)),
+      client.onUpdateLastAckTime(({ chatId }) => updateLastAckTime(chatId, true))
+    ];
+    return () => {
+      cancels.forEach((cancel) => cancel?.());
+    };
+  }, [state]);
+  const value = useMemo(() => {
+    return {
+      ...state,
+      client,
+      setActiveChat,
+      setActiveChatInWallet,
+      isActiveChat,
+      getOppositeUser: (chat) => {
+        if (chat.type === "dm") {
+          return chat.participants.filter((item) => item.did !== currentUser?.did)[0];
+        }
+        return null;
+      },
+      loadMessages,
+      sendMessage,
+      addChat,
+      updateChat,
+      initChatRoom,
+      joinChannel,
+      leaveChannel,
+      deleteChannel,
+      deleteMessage,
+      hasUnreadMessages,
+      orderedChats,
+      getLastMessageText,
+      isInWallet,
+      createDM,
+      setEditingChannel: (payload) => setState((prev) => ({ ...prev, editingChannel: payload })),
+      renderMessage,
+      chatRoomHeaderAddons
+    };
+  }, [state, client, currentUser?.did]);
+  return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
+}

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

@@ -11,5 +11,5 @@ export declare const useChatInWallet: () => {
         unread: boolean;
         unreadMessageCount: number;
     }) => void;
-    chatInWallet: import('react-router-dom').PathMatch<"chatId"> | null;
+    chatInWallet: import("react-router-dom").PathMatch<"chatId"> | null;
 };

package/dist/components/chat/hooks.mjs

@@ -0,0 +1,59 @@
+import { useMatch, useNavigate } from "react-router-dom";
+import cmp from "semver-compare";
+import bridge from "@arcblock/bridge";
+import { useBrowser } from "@arcblock/react-hooks";
+import { useCallback, useMemo } from "react";
+export const useChatInWallet = () => {
+  const navigate = useNavigate();
+  const { walletVersion, mobile } = useBrowser();
+  const chatInWallet = useMatch("/chat-in-wallet/:chatId?");
+  const isInArcSphere = window?.navigator?.userAgent.indexOf("ArcSphere") > -1;
+  const isChatInWalletV2 = useMemo(() => {
+    try {
+      const targetVersion = mobile.apple.device ? "5.3.5" : "5.3.1";
+      return isInArcSphere || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }, [walletVersion, mobile, isInArcSphere]);
+  const isWebNavbar = useMemo(() => {
+    try {
+      const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
+      return !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }, [walletVersion, mobile]);
+  const navigateToChat = ({ id, title }) => {
+    if (isChatInWalletV2) {
+      navigate(`/chat-in-wallet/${id}`);
+    } else {
+      bridge.call("clickChat", { id, title });
+    }
+  };
+  const navigateToChatList = () => {
+    navigate("/chat-in-wallet");
+  };
+  const updateUnreadState = useCallback(
+    ({ unread, unreadMessageCount }) => {
+      bridge.call("updateUnreadState", {
+        unread,
+        unreadMessageCount,
+        appId: window.blocklet.appPid,
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    },
+    []
+  );
+  return {
+    navigateToChat,
+    navigateToChatList,
+    isChatInWalletV2,
+    isWebNavbar,
+    isInArcSphere,
+    updateUnreadState,
+    chatInWallet
+  };
+};

package/dist/components/chat/index.mjs

@@ -0,0 +1,7 @@
+export { default as ChatClient } from "./chat-client.mjs";
+export { default as Chat } from "./chat.mjs";
+export { default as ChatInWallet } from "./chat-in-wallet.mjs";
+export { default as ChatListInWallet } from "./chat-list-in-wallet.mjs";
+export { default as ChatHeaderAddon } from "./chat-header-addon.mjs";
+export * from "./context.mjs";
+export * from "./unread-notification.mjs";

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

@@ -1,4 +1,5 @@
-import { Chat } from './types';
+/// <reference types="react" />
+import type { Chat } from './types';
 interface ChatProps {
     chat: Chat;
 }
@@ -7,5 +8,5 @@ export interface MessageListHandle {
 }
 export default function MessageList({ ref, chat, ...rest }: ChatProps & {
     ref?: React.RefObject<MessageListHandle | null>;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,151 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useImperativeHandle } from "react";
+import Box from "@mui/material/Box";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Fab from "@mui/material/Fab";
+import { ArrowUpward as ArrowUpwardIcon, ArrowDownward as ArrowDownwardIcon } from "@mui/icons-material";
+import debounce from "lodash/debounce";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useChatContext } from "./context.mjs";
+import { Message, NotificationMessage } from "./message.mjs";
+import EmptyStatus from "../empty-status/empty-status.mjs";
+const checkIsAtBottom = (element) => {
+  return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
+};
+export default function MessageList({
+  ref = void 0,
+  chat,
+  ...rest
+}) {
+  const { isActiveChat, loadMessages } = useChatContext();
+  const { t } = useLocaleContext();
+  const isActive = isActiveChat(chat.id);
+  const containerRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const scrollToBottom = () => {
+    containerRef.current?.scrollTo({ top: containerRef.current?.scrollHeight || 0 });
+    setIsAtBottom(true);
+  };
+  useImperativeHandle(ref, () => ({
+    scrollToBottom
+  }));
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      setIsAtBottom(checkIsAtBottom(containerRef.current));
+    }, 300);
+    if (containerRef.current) {
+      containerRef.current.addEventListener("scroll", handleScroll);
+    }
+  }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      if (isAtBottom) {
+        scrollToBottom();
+      }
+    }, 100);
+  });
+  useEffect(() => {
+    if (isActive) {
+      setIsAtBottom(checkIsAtBottom(containerRef.current));
+    }
+  }, [isActive]);
+  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { position: "relative", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          height: "100%",
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
+          py: 2.5,
+          px: 1.25,
+          gap: 1,
+          // 闪烁
+          "@keyframes blinking": {
+            "0%": { opacity: 0 },
+            "50%": { opacity: 1 },
+            "100%": { opacity: 0 }
+          },
+          // 渐变显示
+          "@keyframes fade-in": {
+            "0%": { opacity: 0 },
+            "100%": { opacity: 1 }
+          },
+          // 用于弱化消息渲染闪烁
+          ".message-item": {
+            animation: "fade-in 0.2s linear",
+            animationIterationCount: 1
+          }
+        },
+        ref: containerRef,
+        children: [
+          chat.nextCursor && /* @__PURE__ */ jsx(
+            Box,
+            {
+              id: "next-cursor",
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                py: 0.5,
+                height: 40
+              },
+              children: /* @__PURE__ */ jsx(
+                LoadingButton,
+                {
+                  variant: "text",
+                  color: "inherit",
+                  loadingPosition: "start",
+                  loading: isLoadingMore,
+                  onClick: async () => {
+                    try {
+                      setIsLoadingMore(true);
+                      const firstChatId = chat.messages?.[0]?.id;
+                      const firstChatMessage = document.getElementById(firstChatId);
+                      const divider = document.createElement("div");
+                      divider.style.animation = "blinking 1s linear";
+                      divider.style.animationIterationCount = "5";
+                      divider.style.borderTop = "1px solid #e5e5e5";
+                      divider.style.opacity = "0";
+                      divider.style.height = "0";
+                      await loadMessages(chat.id, chat.nextCursor);
+                      setTimeout(() => {
+                        containerRef.current?.insertBefore(divider, firstChatMessage);
+                        containerRef.current?.scrollTo({ top: divider.offsetTop - 40 - 16 - 1 });
+                      }, 20);
+                    } catch (error) {
+                    } finally {
+                      setIsLoadingMore(false);
+                    }
+                  },
+                  startIcon: /* @__PURE__ */ jsx(ArrowUpwardIcon, {}),
+                  children: t("chat.loadMore")
+                }
+              )
+            }
+          ),
+          chat.type !== "notification" && chat.messages?.map((message, index) => {
+            const prev = chat.messages?.[index - 1];
+            return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
+          }),
+          chat.type === "notification" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            chat.messages?.length === 0 && /* @__PURE__ */ jsx(EmptyStatus, { sx: { height: "100%" } }),
+            chat.messages?.map((message, index) => {
+              const prev = chat.messages?.[index - 1];
+              return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
+                NotificationMessage,
+                {
+                  chat,
+                  message,
+                  prevMessage: prev
+                }
+              ) }, message.id);
+            })
+          ] })
+        ]
+      }
+    ),
+    !isAtBottom && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownwardIcon, {}) }) })
+  ] });
+}

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

@@ -1,14 +1,15 @@
-import { Chat, Message as MessageType, NotificationMessage as NotificationMessageType } from './types';
+/// <reference types="react" />
+import type { Chat, Message as MessageType, NotificationMessage as NotificationMessageType } from './types';
 interface MessageProps {
     message: MessageType;
     prevMessage?: MessageType;
     showTime?: boolean;
 }
-export declare function Message({ message, prevMessage, showTime, ...rest }: MessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Message({ message, prevMessage, showTime, ...rest }: MessageProps): import("react").JSX.Element;
 interface NotificationMessageProps {
     chat: Chat;
     message: NotificationMessageType;
     prevMessage?: NotificationMessageType;
 }
-export declare function NotificationMessage({ chat, message, prevMessage }: NotificationMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationMessage({ chat, message, prevMessage }: NotificationMessageProps): import("react").JSX.Element;
 export {};