@tencentcloud/chat-uikit-react 0.0.3 → 1.0.1

package/dist/esm/index.d.ts

@@ -7,15 +7,18 @@ export { TUIChat } from './components/TUIChat/TUIChat.js';
 export { TUIKitContext, TUIKitContextValue, TUIKitProvider, useTUIKitContext } from './context/TUIKitContext.js';
 export { TUIChatStateContext, TUIChatStateContextProvider, TUIChatStateContextValue, useTUIChatStateContext } from './context/TUIChatStateContext.js';
 export { TUIChatActionContext, TUIChatActionContextValue, TUIChatActionProvider, useTUIChatActionContext } from './context/TUIChatActionContext.js';
-export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, useTUIMessageContext } from './context/TUIMessageContext.js';
+export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, messageShowType, useTUIMessageContext } from './context/TUIMessageContext.js';
 export { ComponentContext, ComponentContextValue, ComponentProvider, UnknowPorps, useComponentContext } from './context/ComponentContext.js';
 export { TUIMessageInputContext, TUIMessageInputContextProvider, TUIMessageInputContextValue, useTUIMessageInputContext } from './context/TUIMessageInputContext.js';
 export { ConversationPreview, ConversationPreviewProps, ConversationPreviewUIComponentProps } from './components/ConversationPreview/ConversationPreview.js';
 export { ConversationPreviewContent, unMemoConversationPreviewContent } from './components/ConversationPreview/ConversationPreviewContent.js';
 export { TUIChatHeader } from './components/TUIChatHeader/TUIChatHeader.js';
-export { TUIChatHeaderDefault, TUIChatHeaderDefaultProps } from './components/TUIChatHeader/TUIChatHeaderDefault.js';
-export { TUIMessageList } from './components/TUIMessageList/TUIMessageList.js';
-export { TUIMessageInput, TUIMessageInputProps } from './components/TUIMessageInput/TUIMessageInput.js';
+export { TUIChatHeaderBasicProps, TUIChatHeaderDefault, TUIChatHeaderDefaultProps } from './components/TUIChatHeader/TUIChatHeaderDefault.js';
+export { MessageListProps, TUIMessageList } from './components/TUIMessageList/TUIMessageList.js';
+export { TUIMessage, TUIMessageProps } from './components/TUIMessage/TUIMessage.js';
+export { MessagePluginConfigProps, MessagePlugins, MessagePluginsProps } from './components/TUIMessage/MessagePlugins.js';
+export { MessageContext, MessageContextProps } from './components/TUIMessage/MessageContext.js';
+export { PluginConfigProps, TUIMessageInput, TUIMessageInputBasicProps, TUIMessageInputProps } from './components/TUIMessageInput/TUIMessageInput.js';
 export { TUIMessageInputDefault } from './components/TUIMessageInput/TUIMessageInputDefault.js';
 export { InputPluginsDefalut } from './components/TUIMessageInput/InputPluginsDefalut.js';
 export { TUIProfile } from './components/TUIProfile/TUIProfile.js';
@@ -25,5 +28,16 @@ export { defaultGroupAvatarAVChatRoom, defaultGroupAvatarMeeting, defaultGroupAv
 export { ConversationSearchInput } from './components/ConversationSearch/ConversationSearchInput.js';
 export { ConversationSearchResult, ConversationSearchResultProps } from './components/ConversationSearch/ConversationSearchResult.js';
 export { TUIManage } from './components/TUIManage/TUIManage.js';
+export { Popup } from './components/Popup/index.js';
+export { Checkbox } from './components/Checkbox/index.js';
+export { DivWithEdit } from './components/DivWithEdit/DivWithEdit.js';
+export { Icon, IconProps, changeTypeToIconClassName } from './components/Icon/Icon.js';
+export { IconTypes } from './components/Icon/type.js';
+export { EmptyStateIndicator, EmptyStateIndicatorProps } from './components/EmptyStateIndicator/EmptyStateIndicator.js';
+export { Input, InputProps, InputRef } from './components/Input/Input.js';
+export { Model } from './components/Model/index.js';
+export { Plugins, PluginsProps } from './components/Plugins/index.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Toast } from './components/Toast/index.js';
 export { CreateGroupConversationParams, useConversation } from './hooks/useConversation.js';
 export { useProfile } from './hooks/useProfile.js';

package/dist/esm/index.js

@@ -1 +1 @@
-export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"tim-js-sdk";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";
+export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"./node_modules/tim-js-sdk/tim-js.js";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "0.0.3",
+  "version": "1.0.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -60,14 +60,13 @@
   "dependencies": {
     "date-fns": "^2.29.3",
     "react-date-picker": "^9.0.0",
-    "tim-js-sdk": "^2.24.2",
+    "tim-js-sdk": "^2.26.1",
     "tim-upload-plugin": "^1.0.5"
   },
   "peerDependencies": {
     "date-fns": "^2.29.3",
     "react": "^18.2.0",
     "react-date-picker": "^9.0.0",
-    "tim-js-sdk": "^2.24.2",
     "tim-upload-plugin": "^1.0.5",
     "tslib": "^2.4.1"
   }

package/src/components/Icon/config.ts

@@ -28,6 +28,19 @@ import IconQuoteUrl from './images/quote.png';
 import IconRevocationUrl from './images/revocation.png';
 import IconEffortUrl from './images/effort.png';
 import IconCryUrl from './images/cry.png';
+import IconSendUrl from './images/send.png';
+import IconOwnerUrl from './images/owner.png';
+import IconLivingUrl from './images/living.png';
+import IconMemberUrl from './images/member.png';
+import IconLikerUrl from './images/like.png';
+import IconUnlikeUrl from './images/unlike.png';
+import IconLikedUrl from './images/liked.png';
+import IconUnlikedUrl from './images/unliked.png';
+import IconUnionUrl from './images/union.png';
+import IconUnunionUrl from './images/ununion.png';
+import IconVectorUrl from './images/vector.png';
+import IconUnvectorUrl from './images/unvector.png';
+import IconVoiceUrl from './images/voice.png';
 
 import { IconTypes } from './type';
 
@@ -161,4 +174,56 @@ export const ICON_CONFIG:IconConfig = {
     url: IconCryUrl,
     className: 'tui-kit-icon-cry',
   },
+  [IconTypes.OWNER]: {
+    url: IconOwnerUrl,
+    className: 'tui-kit-icon-owner',
+  },
+  [IconTypes.SEND]: {
+    url: IconSendUrl,
+    className: 'tui-kit-icon-send',
+  },
+  [IconTypes.LIVING]: {
+    url: IconLivingUrl,
+    className: 'tui-kit-icon-living',
+  },
+  [IconTypes.MEMBER]: {
+    url: IconMemberUrl,
+    className: 'tui-kit-icon-member',
+  },
+  [IconTypes.LIKE]: {
+    url: IconLikerUrl,
+    className: 'tui-kit-icon-like',
+  },
+  [IconTypes.UNLIKE]: {
+    url: IconUnlikeUrl,
+    className: 'tui-kit-icon-unlike',
+  },
+  [IconTypes.LIKED]: {
+    url: IconLikedUrl,
+    className: 'tui-kit-icon-liked',
+  },
+  [IconTypes.UNLIKED]: {
+    url: IconUnlikedUrl,
+    className: 'tui-kit-icon-unliked',
+  },
+  [IconTypes.UNION]: {
+    url: IconUnionUrl,
+    className: 'tui-kit-icon-union',
+  },
+  [IconTypes.UNUNION]: {
+    url: IconUnunionUrl,
+    className: 'tui-kit-icon-ununion',
+  },
+  [IconTypes.VECTOR]: {
+    url: IconVectorUrl,
+    className: 'tui-kit-icon-vector',
+  },
+  [IconTypes.UNVECTOR]: {
+    url: IconUnvectorUrl,
+    className: 'tui-kit-icon-unvector',
+  },
+  [IconTypes.VOICE]: {
+    url: IconVoiceUrl,
+    className: 'tui-kit-icon-voice',
+  },
 };

package/src/components/Icon/type.ts

@@ -29,4 +29,17 @@ export enum IconTypes {
   REVOCATION = 'revocation',
   EFFORT = 'effort',
   CRY = 'cry',
+  SEND = 'send',
+  OWNER = 'owner',
+  LIVING = 'living',
+  MEMBER = 'member',
+  LIKE = 'like',
+  UNLIKE = 'unlike',
+  LIKED = 'liked',
+  UNLIKED = 'unliked',
+  UNION = 'union',
+  UNUNION = 'ununion',
+  VECTOR = 'vector',
+  UNVECTOR = 'unvector',
+  VOICE = 'voice',
 }

package/src/components/Plugins/index.tsx

@@ -49,16 +49,17 @@ function PluginsWithContext<T extends PluginsProps>(
   };
 
   return (
-    <ul className={`plugin ${className}`}>
-      {showPicker?.length > 0 && showPicker.map((Item, index:number) => {
-        const key = `${Item}${index}`;
-        return (
-          <li className="plugin-item" key={key}>
-            {Item}
-          </li>
-        );
-      })}
-      {
+    (showPicker.length > 0 || elements?.length > 0) && (
+      <ul className={`plugin ${className}`}>
+        {showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+          const key = `${Item}${index}`;
+          return (
+            <li className="plugin-item" key={key}>
+              {Item}
+            </li>
+          );
+        })}
+        {
         elements?.length > 0 && (
           <div className="plugin-popup">
             <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
@@ -90,7 +91,8 @@ function PluginsWithContext<T extends PluginsProps>(
           </div>
         )
       }
-    </ul>
+      </ul>
+    )
   );
 }
 const Plugins = forwardRef(PluginsWithContext);

package/src/components/Plugins/styles/layout.scss

@@ -2,6 +2,8 @@
   display: flex;
   align-items: center;
   height: 100%;
+  padding: 0 8px;
+  gap: 8px;
 }
 
 .plugin-popup {
@@ -9,7 +11,6 @@
   display: flex;
   align-items: center;
   position: relative;
-  padding: 0 8px;
   &-box {
     position: absolute;
     z-index: 2;

package/src/components/TUIChat/TUIChat.tsx

@@ -28,8 +28,8 @@ import { useHandleMessageList } from './hooks/useHandleMessageList';
 import { useHandleMessage } from './hooks/useHandleMessage';
 
 import { TUIChatHeader as TUIChatHeaderElement } from '../TUIChatHeader';
-import { TUIMessageList } from '../TUIMessageList';
-import { TUIMessageInput as TUIMessageInputElement } from '../TUIMessageInput';
+import { MessageListProps, TUIMessageList } from '../TUIMessageList';
+import { TUIMessageInput as TUIMessageInputElement, TUIMessageInputBasicProps } from '../TUIMessageInput';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { Toast } from '../Toast';
 
@@ -37,7 +37,7 @@ interface TUIChatProps {
   className?: string,
   conversation?: Conversation,
   EmptyPlaceholder?: React.ReactElement,
-  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
   TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
   MessageContext?: React.ComponentType<MessageContextProps>,
   TUIMessageInput?: React.ComponentType<UnknowPorps>,
@@ -48,8 +48,12 @@ interface TUIChatProps {
     updateMessage: (event?: Array<Message>) => void,
     event: any,
   ) => void,
-  sendMessage?: (message:Message) => Promise<Message>,
+  sendMessage?: (message:Message, options?:any) => Promise<Message>,
   revokeMessage?: (message:Message) => Promise<Message>,
+  messageConfig?: TUIMessageProps,
+  cloudCustomData?: string,
+  TUIMessageInputConfig?: TUIMessageInputBasicProps,
+  TUIMessageListConfig?: MessageListProps,
   [propName: string]: any,
 }
 
@@ -100,6 +104,10 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     onMessageRecevied,
     sendMessage: propsSendMessage,
     revokeMessage,
+    messageConfig,
+    cloudCustomData,
+    TUIMessageInputConfig,
+    TUIMessageListConfig,
   } = props;
 
   const [state, dispatch] = useReducer<ChatStateReducer>(
@@ -114,6 +122,10 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     conversation,
     messageListRef,
     textareaRef,
+    messageConfig,
+    cloudCustomData,
+    TUIMessageInputConfig,
+    TUIMessageListConfig,
     ...state,
   });
 
@@ -124,30 +136,39 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     createVideoMessage,
     createFileMessage,
     createForwardMessage,
-  } = useCreateMessage({ tim, conversation });
+    createCustomMessage,
+    createAudioMessage,
+    createTextAtMessage,
+    createLocationMessage,
+    createMergerMessage,
+  } = useCreateMessage({ tim, conversation, cloudCustomData });
 
   const {
     getMessageList,
     updateMessage,
     editLocalmessage,
     removeMessage,
+    updataUploadPenddingMessageList,
   } = useHandleMessageList({
     tim, conversation, state, dispatch,
   });
 
   const {
     operateMessage,
+    setAudioSource,
+    setVideoSource,
+    setHighlightedMessageId,
   } = useHandleMessage({
     state, dispatch,
   });
 
-  const sendMessage = async (message: Message) => {
+  const sendMessage = async (message: Message, options?:any) => {
     updateMessage([message]);
     try {
       if (propsSendMessage) {
-        await propsSendMessage(message);
+        await propsSendMessage(message, options);
       } else {
-        await tim.sendMessage(message);
+        await tim.sendMessage(message, options);
       }
       editLocalmessage(message);
     } catch (error) {
@@ -219,10 +240,19 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       createVideoMessage,
       createFileMessage,
       createForwardMessage,
+      createCustomMessage,
+      createAudioMessage,
+      createTextAtMessage,
+      createLocationMessage,
+      createMergerMessage,
       editLocalmessage,
       operateMessage,
       loadMore,
       revokeMessage,
+      setAudioSource,
+      setVideoSource,
+      setHighlightedMessageId,
+      updataUploadPenddingMessageList,
     }),
     [
       sendMessage,
@@ -234,10 +264,19 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       createVideoMessage,
       createFileMessage,
       createForwardMessage,
+      createCustomMessage,
+      createAudioMessage,
+      createTextAtMessage,
+      createLocationMessage,
+      createMergerMessage,
       editLocalmessage,
       operateMessage,
       loadMore,
       revokeMessage,
+      setAudioSource,
+      setVideoSource,
+      setHighlightedMessageId,
+      updataUploadPenddingMessageList,
     ],
   );
 

package/src/components/TUIChat/TUIChatState.tsx

@@ -8,6 +8,7 @@ import {
   handleMessageList,
   handleEditMessage,
   handleRemoveMessage,
+  handleUploadPenddingMessage,
 } from './unitls';
 
 export type ChatStateReducerAction =
@@ -60,6 +61,18 @@ export type ChatStateReducerAction =
       type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
       value?: boolean,
     }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE,
+      value?: HTMLAudioElement | null,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE,
+      value?: HTMLVideoElement | null,
+    }
+  | {
+      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST,
+      value?: Message,
+    }
 export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
 
 export const chatReducer = (
@@ -111,6 +124,17 @@ export const chatReducer = (
       return { ...state, operateData: { ...action.value } };
     case CONSTANT_DISPATCH_TYPE.SET_NO_MORE:
       return { ...state, noMore: action.value };
+    case CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE:
+      return { ...state, audioSource: action.value };
+    case CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE:
+      return { ...state, vidoeSource: action.value };
+    case CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST:
+      return {
+        ...state,
+        uploadPenddingMessageList: [
+          ...handleUploadPenddingMessage(state.uploadPenddingMessageList, action.value),
+        ],
+      };
     default: return state;
   }
 };
@@ -126,4 +150,7 @@ export const initialState:TUIChatStateContextValue = {
   isSameLastMessageID: false,
   operateData: {},
   noMore: false,
+  audioSource: null,
+  vidoeSource: null,
+  uploadPenddingMessageList: [],
 };

package/src/components/TUIChat/hooks/useCreateMessage.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import TIM, { ChatSDK, Conversation, Message } from 'tim-js-sdk';
 
 export interface CreateMessageProps {
@@ -6,6 +6,7 @@ export interface CreateMessageProps {
   conversation?: Conversation,
   to?: string,
   type?: TIM.TYPES,
+  cloudCustomData?: string,
 }
 export interface BasicCreateMessageProps {
   needReadReceipt?: boolean,
@@ -36,7 +37,39 @@ export interface CreateUploadMessageProps extends BasicCreateMessageProps{
 
 export interface CreateForwardMessageProps extends BasicCreateMessageProps{
   conversation: Conversation,
-  message: Message,
+  message: Message
+}
+
+export interface CreateCustomMessageProps extends BasicCreateMessageProps{
+  payload: {
+    data: string,
+    description: string,
+    extension: string,
+  }
+}
+
+export interface CreateTextAtMessageProps extends BasicCreateMessageProps{
+  payload: {
+    text: string,
+    atUserList: Array<string>,
+  }
+}
+
+export interface CreateLocationMessageProps extends BasicCreateMessageProps{
+  payload: {
+    description: string,
+    longitude: number,
+    latitude: number,
+  }
+}
+
+export interface CreateMergerMessageProps extends BasicCreateMessageProps{
+  payload: {
+    messageList: Array<Message>,
+    title: string,
+    abstractList: string,
+    compatibleText: string,
+  }
 }
 
 export function useCreateMessage<T extends CreateMessageProps>(props:T) {
@@ -45,16 +78,23 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
     conversation,
     to = '',
     type: propType,
+    cloudCustomData,
   } = props;
 
   const { type: conversationType, userProfile, groupProfile } = conversation;
 
   const type = propType || conversationType;
 
-  const basicConfig = {
+  const [basicConfig, setBasicConfig] = useState({
     to: to || (type === TIM.TYPES.CONV_C2C ? userProfile?.userID : groupProfile?.groupID),
     conversationType: type,
-  };
+    cloudCustomData,
+  });
+
+  useEffect(() => {
+    basicConfig.cloudCustomData = cloudCustomData;
+    setBasicConfig(basicConfig);
+  }, [cloudCustomData]);
 
   const createTextMessage = useCallback((params: CreateTextMessageProps) => tim.createTextMessage({
     ...basicConfig,
@@ -106,6 +146,42 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
     });
   }, [tim]);
 
+  const createCustomMessage = useCallback((
+    params: CreateCustomMessageProps,
+    // ChatSDK < V2.26.0 createCustomMessage ts declaration error
+  ) => (tim as any).createCustomMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createAudioMessage = useCallback((
+    params: CreateUploadMessageProps,
+  ) => tim.createAudioMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createTextAtMessage = useCallback((
+    params: CreateTextAtMessageProps,
+  ) => tim.createTextAtMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createLocationMessage = useCallback((
+    params: CreateLocationMessageProps,
+  ) => tim.createLocationMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
+  const createMergerMessage = useCallback((
+    params: CreateMergerMessageProps,
+  ) => tim.createMergerMessage({
+    ...basicConfig,
+    ...params,
+  }), [tim]);
+
   return {
     createTextMessage,
     createFaceMessage,
@@ -113,5 +189,10 @@ export function useCreateMessage<T extends CreateMessageProps>(props:T) {
     createVideoMessage,
     createFileMessage,
     createForwardMessage,
+    createCustomMessage,
+    createAudioMessage,
+    createTextAtMessage,
+    createLocationMessage,
+    createMergerMessage,
   };
 }

package/src/components/TUIChat/hooks/useCreateTUIChatStateContext.tsx

@@ -12,6 +12,10 @@ function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
     conversation,
     messageList,
     messageListRef,
+    messageConfig,
+    cloudCustomData,
+    TUIMessageInputConfig,
+    TUIMessageListConfig,
     ...state
   } = props;
   const TUIChatStateContext = useMemo(() => ({
@@ -19,12 +23,20 @@ function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
     conversation,
     messageList,
     messageListRef,
+    messageConfig,
+    cloudCustomData,
+    TUIMessageInputConfig,
+    TUIMessageListConfig,
     ...state,
   }), [
     tim,
     conversation,
     messageList,
     messageListRef,
+    messageConfig,
+    cloudCustomData,
+    TUIMessageInputConfig,
+    TUIMessageListConfig,
     state,
   ]);
 

package/src/components/TUIChat/hooks/useHandleMessage.tsx

@@ -27,7 +27,31 @@ export function useHandleMessage<T extends CreateMessageProps>(props:T) {
     });
   }, [dispatch]);
 
+  const setAudioSource = useCallback((data: HTMLAudioElement | null) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE,
+      value: data,
+    });
+  }, [dispatch]);
+
+  const setVideoSource = useCallback((data: HTMLVideoElement | null) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE,
+      value: data,
+    });
+  }, [dispatch]);
+
+  const setHighlightedMessageId = useCallback((highlightedMessageId: string) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID,
+      value: highlightedMessageId,
+    });
+  }, [dispatch]);
+
   return {
     operateMessage,
+    setAudioSource,
+    setVideoSource,
+    setHighlightedMessageId,
   };
 }

package/src/components/TUIChat/hooks/useHandleMessageList.tsx

@@ -61,10 +61,18 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
     });
   }, [dispatch]);
 
+  const updataUploadPenddingMessageList = useCallback((message: Message) => {
+    dispatch({
+      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDDING_MESSAGE_LIST,
+      value: message,
+    });
+  }, [dispatch]);
+
   return {
     getMessageList,
     updateMessage,
     removeMessage,
     editLocalmessage,
+    updataUploadPenddingMessageList,
   };
 }