refactor: replace useConverseMessage with ConverseMessageProvider

helpful to get messages under components

client/shared/contexts/ConverseMessageContext.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { ChatMessage, SendMessagePayload } from '../model/message';
+import { useConverseMessage } from '../redux/hooks/useConverseMessage';
+import { createContextFactory } from './factory';
+
+interface ConverseMessageContextProps {
+  messages: ChatMessage[];
+  loading: boolean;
+  error?: Error;
+  isLoadingMore: boolean;
+  hasMoreMessage: boolean;
+  fetchMoreMessage: () => Promise<void>;
+  sendMessage: (payload: SendMessagePayload) => Promise<void>;
+}
+
+const {
+  Context: ConverseMessageContext,
+  useContext: useConverseMessageContext,
+} = createContextFactory<ConverseMessageContextProps>({
+  defaultValue: {} as ConverseMessageContextProps,
+  displayName: 'ConverseMessageContext',
+});
+
+/**
+ * 会话消息列表相关上下文
+ */
+export const ConverseMessageProvider: React.FC<
+  React.PropsWithChildren<{
+    converseId: string;
+    isGroup: boolean;
+  }>
+> = React.memo((props) => {
+  const { converseId, isGroup } = props;
+  const {
+    messages,
+    loading,
+    error,
+    isLoadingMore,
+    hasMoreMessage,
+    handleFetchMoreMessage: fetchMoreMessage,
+    handleSendMessage: sendMessage,
+  } = useConverseMessage({
+    converseId,
+    isGroup,
+  });
+
+  return (
+    <ConverseMessageContext.Provider
+      value={{
+        messages,
+        loading,
+        error,
+        isLoadingMore,
+        hasMoreMessage,
+        fetchMoreMessage,
+        sendMessage,
+      }}
+    >
+      {props.children}
+    </ConverseMessageContext.Provider>
+  );
+});
+ConverseMessageProvider.displayName = 'ConverseMessageProvider';
+
+export { useConverseMessageContext };

client/shared/contexts/factory.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface CreateContextFactoryOptions<Props> {
+  defaultValue: Props;
+  displayName: string;
+}
+
+export function createContextFactory<Props>(
+  options: CreateContextFactoryOptions<Props>
+) {
+  const Context = React.createContext(options.defaultValue);
+  Context.displayName = options.displayName;
+
+  function useContext(): Props {
+    return React.useContext(Context);
+  }
+
+  return {
+    Context,
+    useContext,
+  };
+}

client/shared/index.tsx

@@ -28,6 +28,10 @@ export {
   useChatBoxContext,
 } from './contexts/ChatBoxContext';
 export { useColorScheme } from './contexts/ColorSchemeContext';
+export {
+  ConverseMessageProvider,
+  useConverseMessageContext,
+} from './contexts/ConverseMessageContext';
 export {
   GroupInfoContextProvider,
   useGroupInfoContext,

client/web/src/components/ChatBox/index.tsx

@@ -1,6 +1,10 @@
 import { getMessageTextDecorators } from '@/plugin/common';
 import React from 'react';
-import { ChatBoxContextProvider, useConverseMessage } from 'tailchat-shared';
+import {
+  ChatBoxContextProvider,
+  ConverseMessageProvider,
+  useConverseMessageContext,
+} from 'tailchat-shared';
 import { ErrorView } from '../ErrorView';
 import { ChatBoxPlaceholder } from './ChatBoxPlaceholder';
 import { ChatInputBox } from './ChatInputBox';
@@ -22,19 +26,16 @@ type ChatBoxProps =
       groupId: string;
     };
 const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
-  const { converseId, converseTitle, isGroup } = props;
+  const { converseId, converseTitle } = props;
   const {
     messages,
     loading,
     error,
     isLoadingMore,
     hasMoreMessage,
-    handleFetchMoreMessage,
-    handleSendMessage,
-  } = useConverseMessage({
-    converseId,
-    isGroup,
-  });
+    fetchMoreMessage,
+    sendMessage,
+  } = useConverseMessageContext();
 
   if (loading) {
     return <ChatBoxPlaceholder />;
@@ -52,7 +53,7 @@ const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
         messages={messages}
         isLoadingMore={isLoadingMore}
         hasMoreMessage={hasMoreMessage}
-        onLoadMore={handleFetchMoreMessage}
+        onLoadMore={fetchMoreMessage}
       />
 
       <ChatReply />
@@ -60,7 +61,7 @@ const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
       <ChatInputBox
         onSendMsg={(msg, meta) => {
           const content = preprocessMessage(msg);
-          handleSendMessage({
+          sendMessage({
             converseId: props.converseId,
             groupId: props.groupId,
             content,
@@ -77,7 +78,12 @@ ChatBoxInner.displayName = 'ChatBoxInner';
 export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
   return (
     <ChatBoxContextProvider>
-      <ChatBoxInner {...props} />
+      <ConverseMessageProvider
+        converseId={props.converseId}
+        isGroup={props.isGroup}
+      >
+        <ChatBoxInner {...props} />
+      </ConverseMessageProvider>
     </ChatBoxContextProvider>
   );
 });