@tencentcloud/chat-uikit-react 2.1.2 → 2.1.3

package/src/components/TUIMessageInput/hooks/useHandleForwardMessage.tsx

@@ -5,7 +5,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
-  useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
+  useTUIChatStateContext, useTUIKitContext,
 } from '../../../context';
 
 export function useHandleForwardMessage(msg?:Message) {
@@ -16,11 +16,11 @@ export function useHandleForwardMessage(msg?:Message) {
   const [conversationList, setConversationList] = useState([]);
   const { chat } = useTUIKitContext('TUIChat');
 
-  const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
+  const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 
   const sendForwardMessage = (list:Array<Conversation>) => {
     list.map((item:Conversation) => {
-      TUIChatService.sendForwardMessage([item], [message]);
+      message &&  TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };
@@ -29,7 +29,7 @@ export function useHandleForwardMessage(msg?:Message) {
     (async () => {
       const res = await chat.getConversationList();
       setConversationList(res?.data?.conversationList.filter(
-        (item) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
       ));
     })();
   }, [chat]);

package/src/components/TUIMessageInput/hooks/useHandleQuoteMessage.tsx

@@ -3,7 +3,7 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_OPERATE } from '../../../constants';
 import { useTUIChatStateContext } from '../../../context';
 
-const quoteConfigType = {
+const quoteConfigType: any = {
   [TencentCloudChat.TYPES.MSG_TEXT]: 1,
   [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
   [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
@@ -13,7 +13,7 @@ const quoteConfigType = {
   [TencentCloudChat.TYPES.MSG_FACE]: 8,
 };
 
-const quoteConfigForShow = {
+const quoteConfigForShow: any = {
   [TencentCloudChat.TYPES.MSG_CUSTOM]: '[custom]',
   [TencentCloudChat.TYPES.MSG_IMAGE]: '[image]',
   [TencentCloudChat.TYPES.MSG_AUDIO]: '[audio]',
@@ -27,7 +27,7 @@ export function useHandleQuoteMessage(msg?:Message) {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
-  const [cloudCustomData, setCloudCustomData] = useState({ messageReply: null });
+  const [cloudCustomData, setCloudCustomData] = useState<any>({ messageReply: null });
 
   const handleQuoteMessage = (message: Message) => {
     const messageType = quoteConfigType[message?.type];
@@ -46,7 +46,7 @@ export function useHandleQuoteMessage(msg?:Message) {
 
   useEffect(
     () => {
-      const message = msg || operateData[MESSAGE_OPERATE.QUOTE];
+      const message = msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]);
       setCloudCustomData(
         {
           messageReply: message ? handleQuoteMessage(message) : null,
@@ -59,6 +59,6 @@ export function useHandleQuoteMessage(msg?:Message) {
   return {
     cloudCustomData,
     handleQuoteMessage,
-    message: msg || operateData[MESSAGE_OPERATE.QUOTE],
+    message: msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]),
   };
 }

package/src/components/TUIMessageInput/hooks/useMessageInputState.tsx

@@ -16,8 +16,8 @@ export interface IinitState {
 }
 
 export interface ICursorPos {
-  start?: number,
-  end?: number,
+  start?: number | null,
+  end?: number | null,
 }
 
 export type MessageInputReducerAction =
@@ -38,7 +38,7 @@ const initState:IinitState = {
   },
 };
 
-const reducer = (state:IinitState, action) => {
+const reducer = (state:IinitState, action: any) => {
   switch (action.type) {
     case CONSTANT_DISPATCH_TYPE.SET_TEXT:
       return { ...state, text: action?.getNewText(state.text) };

package/src/components/TUIMessageInput/hooks/useMessageInputText.tsx

@@ -16,6 +16,7 @@ import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 import { filesData } from './useUploadPicker';
+import { de } from 'date-fns/locale';
 
 interface useMessageInputTextProps extends IbaseStateProps {
   focus?: boolean,
@@ -70,21 +71,23 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     }
     TUIChatService.sendTextMessage(options).then((res: any) => {
       const { message } = res.data;
-      setFirstSendMessage(message);
+      setFirstSendMessage && setFirstSendMessage(message);
     });
     enableSampleTaskStatus('sendMessage');
     dispatch({
       getNewText: (text:string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
     });
-    operateMessage({
+    operateMessage && operateMessage({
+      // eslint-disable-next-line
+      // @ts-ignore
       [MESSAGE_OPERATE.QUOTE]: null,
     });
   };
 
   const handleKeyDown = useCallback(
     (event?:React.KeyboardEvent<EventTarget>) => {
-      if (!event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+      if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         event?.preventDefault();
         handleSubmit(event);
       }
@@ -105,11 +108,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
         return;
       }
       const { types, items } = e.clipboardData;
-      types.find((type, index) => {
+      types.find((type: string, index: number) => {
         const item = items[index];
         switch (type) {
           case 'text/plain':
-            item.getAsString((str) => {
+            item.getAsString((str: string) => {
               dispatch({
                 type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
                 getNewText: (text:string) => `${text}${str}`,
@@ -119,7 +122,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
           case 'Files': {
             const file = item.getAsFile();
             if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
-              sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
+              sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
             }
             return true;
           }
@@ -135,13 +138,13 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     (textToInsert: string) => {
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text:string) => `${text.slice(0, state.cursorPos.start)}${textToInsert}${text.slice(state.cursorPos.start)}`,
+        getNewText: (text:string) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
       });
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
         value: {
-          start: state.cursorPos.start + textToInsert.length,
-          end: state.cursorPos.end + textToInsert.length,
+          start: state?.cursorPos?.start && state.cursorPos.start + textToInsert.length,
+          end: state?.cursorPos?.end && state.cursorPos.end + textToInsert.length,
         },
       });
       textareaRef?.current?.focus();

package/src/components/TUIMessageInput/hooks/useUploadElement.tsx

@@ -16,13 +16,13 @@ export function useUploadElement<
     onChange,
   } = props;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files.length > 0) {
+    if (e.target.files && e.target.files.length > 0) {
       const { files } = e.target;
       const options = {
         type: files[0].type,
       };
       const file = new File(files as any, files[0].name, options);
-      onChange(file);
+      onChange && onChange(file);
     }
     e.target.value = '';
   };

package/src/components/TUIMessageInput/hooks/useUploadPicker.tsx

@@ -19,7 +19,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
-  const creatUploadMessage = {
+  const creatUploadMessage: any = {
     [MESSAGE_TYPE_NAME.IMAGE]: TUIChatService.sendImageMessage,
     [MESSAGE_TYPE_NAME.VIDEO]: TUIChatService.sendVideoMessage,
     [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -53,20 +53,19 @@ function TUIMessageListWithContext <T extends MessageListProps>(
 
   const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
 
-  const elements = useMessageListElement({
+  const elements = contextMessageList && useMessageListElement({
     enrichedMessageList: contextMessageList,
     TUIMessage,
     intervalsTimer,
   });
   useEffect(() => {
-    // messageList 滑动到底部
     (async () => {
       const parentElement = ulElement?.parentElement?.parentElement;
       if (
         !isCompleted
-        && parentElement?.clientHeight >= ulElement?.clientHeight
+        && parentElement && parentElement?.clientHeight >= ulElement?.clientHeight
       ) {
-        await loadMore();
+        loadMore && await loadMore();
       }
       if (ulElement?.children) {
         const HTMLCollection = ulElement?.children || [];
@@ -92,7 +91,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       const timer = setTimeout(() => {
         children[children.length - 1].classList.remove('high-lighted');
         clearTimeout(timer);
-        setHighlightedMessageId('');
+        setHighlightedMessageId && setHighlightedMessageId('');
       }, 1000);
     }
   }, [highlightedMessageId]);
@@ -109,7 +108,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       >
         <ul ref={setUlElement}>
           {
-              elements?.length > 0 ? elements : <EmptyStateIndicator listType="message" />
+              elements?.length && elements.length > 0 ? elements : <EmptyStateIndicator listType="message" />
             }
         </ul>
       </InfiniteScroll>

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -26,13 +26,16 @@ function useMessageListElement <T extends MessageListElementProps>(
     const key = `${item.ID}-${index}`;
     const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
     const currrentTimer = item?.time || 0;
-    const isShowIntervalsTimer = preMessageTImer !== -1
+    const isShowIntervalsTimer = intervalsTimer && preMessageTImer !== -1
       ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
     return (
       <li className="message-list-item" key={key}>
         {
-         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
+         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>
+          {currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
         }
+        {/* // eslint-disable-next-line
+        // @ts-ignore */}
         <TUIMessage message={item} />
       </li>
     );

package/src/components/TUIProfile/TUIProfile.tsx

@@ -27,10 +27,12 @@ function UnMemoizedTUIProfile<T extends TUIProfileProps>(
 
   return (
     <>
+    {/* //eslint-disable-next-line 
+    @ts-ignore */}
       <Profile
         profile={myProfile}
         handleAvatar={() => {
-          setTUIProfileShow(true);
+          setTUIProfileShow && setTUIProfileShow(true);
         }}
       />
       {TUIProfileShow && (

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -11,12 +11,12 @@ import { Icon, IconTypes } from '../Icon';
 import { handleDisplayAvatar } from '../untils';
 import { ProfileParams } from './hooks';
 
-const gender = {
+const gender: any = {
   [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
   [TencentCloudChat.TYPES.GENDER_MALE]: 'male',
   [TencentCloudChat.TYPES.GENDER_FEMALE]: 'female',
 };
-const allowType = {
+const allowType: any = {
   [TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY]: 'allowAny',
   [TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM]: 'needConfirm',
   [TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY]: 'denyAny',
@@ -108,7 +108,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     return `${year}${month}${day}`;
   };
 
-  let editListMap = [
+  let editListMap: any = [
     {
       name: 'Signature',
       value: userInfo?.selfSignature,
@@ -117,7 +117,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Gender',
-      value: t(gender[userInfo?.gender]?.replace(
+      value: t( userInfo?.gender && gender[userInfo?.gender]?.replace(
         gender[userInfo?.gender][0],
         gender[userInfo?.gender][0]?.toLocaleUpperCase(),
       ) ? `TUIProfile.${gender[userInfo?.gender]?.replace(
@@ -148,9 +148,9 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'AllowType',
-      value: t(`TUIProfile.${allowType[userInfo?.allowType]?.replace(
-        allowType[userInfo?.allowType][0],
-        allowType[userInfo?.allowType][0]?.toLocaleUpperCase(),
+      value: t(`TUIProfile.${allowType[userInfo?.allowType || '']?.replace(
+        userInfo && allowType[userInfo?.allowType][0],
+        userInfo && allowType[userInfo?.allowType][0]?.toLocaleUpperCase(),
       )}`),
       type: 'select',
       children: (
@@ -191,14 +191,14 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
   ];
   if (isH5) {
-    editListMap = editListMap.filter((item) => item.name !== 'Birthday');
+    editListMap = editListMap.filter((item: any) => item.name !== 'Birthday');
   }
   const handleSetEditName = (name:string) => {
     setIsEditName(name);
   };
 
-  const confirm = (options) => {
-    update(options);
+  const confirm = (options: any) => {
+    update && update(options);
     setIsEditName('');
   };
 
@@ -228,12 +228,12 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   };
 
   // edit gender
-  const editGender = (data) => {
+  const editGender = (data: any) => {
     confirm({ gender: data.value });
   };
 
   // edit allowType
-  const editAllowType = (data) => {
+  const editAllowType = (data: any) => {
     confirm({ allowType: data.value });
   };
 
@@ -251,14 +251,14 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
           width={9}
           height={16}
           type={IconTypes.BACK}
-          onClick={() => { setTUIProfileShow(false); }}
+          onClick={() => { setTUIProfileShow && setTUIProfileShow(false); }}
         />
         <h1>{t('TUIProfile.Personal information')}</h1>
       </header>
       <main className="tui-profile-main">
         <div className="tui-profile-avatar">
           <Avatar
-            image={handleDisplayAvatar(userInfo?.avatar)}
+            image={userInfo && handleDisplayAvatar(userInfo?.avatar)}
             size={94}
             update={editAvatar}
             list={avatarList}
@@ -281,7 +281,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
       </main>
       <ul className="tui-profile-list">
         {
-          editListMap.map((item) => {
+          editListMap.map((item: any) => {
             const key = `${item.name}`;
             return (
               <li className="tui-profile-list-item" key={key}>

package/src/components/TUIProfile/hooks/useMyProfile.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
+import TencentCloudChat, { Profile } from '@tencentcloud/chat';
 import { useTUIKitContext } from '../../../context';
 
 export interface ProfileParams {
@@ -19,7 +19,7 @@ export interface ProfileParams {
 }
 
 export function useMyProfile() {
-  const [myProfile, setMyPofile] = useState(null);
+  const [myProfile, setMyPofile] = useState<Profile>();
   const { chat, myProfile: contextProfile } = useTUIKitContext('useMyProfile');
 
   const getMyProfile = useCallback(async () => {
@@ -31,9 +31,9 @@ export function useMyProfile() {
     }
   }, [chat]);
 
-  const updateMyProfile = useCallback(async (options) => {
+  const updateMyProfile = useCallback(async (options: any) => {
     const res = await chat?.updateMyProfile(options);
-    const userInfo = { ...myProfile };
+    const userInfo: any = { ...myProfile };
     const keys = Object.keys(res.data);
     keys.map((name) => {
       userInfo[name] = res.data[name];
@@ -43,8 +43,8 @@ export function useMyProfile() {
     return res;
   }, [chat]);
 
-  const onProfileUpdated = (event) => {
-    console.log('onProfileUpdated', event.data); // 包含 Profile 对象的数组
+  const onProfileUpdated = (event: any) => {
+    console.log('onProfileUpdated', event.data);
   };
 
   useEffect(() => {

package/src/components/Toast/index.tsx

@@ -24,9 +24,9 @@ T extends ToastProps
   const root = document.body;
 
   const elements = document.createElement('div');
-
-  elements.innerText = text;
-
+  if(text) {
+    elements.innerText = text ;
+  }
   elements.className = `toast ${className} ${type}`;
 
   root.appendChild(elements);

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

@@ -4,7 +4,7 @@
   z-index: 10;
   margin: 20px;
   padding: 10px;
-  box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
   max-width: 50%;
   word-break: break-all;
   border-radius: 5px;

package/src/components/untils.ts

@@ -53,7 +53,7 @@ export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudCh
 };
 
 export const getTimeStamp = (time: number, language?: string) => {
-  const locales = { enGB, zhCN };
+  const locales: any = { enGB, zhCN };
   let lng = '';
   if (language === 'zh') {
     lng = 'zhCN';

package/src/context/TUIChatStateContext.tsx

@@ -21,15 +21,15 @@ export interface TUIChatStateContextValue {
   messageConfig?: TUIMessageProps,
   cloudCustomData?: string,
   TUIMessageInputConfig?: TUIMessageInputBasicProps,
-  audioSource?: HTMLAudioElement,
-  vidoeSource?: HTMLVideoElement,
+  audioSource?: HTMLAudioElement | null,
+  vidoeSource?: HTMLVideoElement | null,
   TUIMessageListConfig?: MessageListProps,
   uploadPendingMessageList?: Array<Message>,
-  firstSendMessage?: Message;
+  firstSendMessage?: Message | null;
   activeMessageID?: string,
 }
 
-export const TUIChatStateContext = React.createContext<TUIChatStateContextValue>(null);
+export const TUIChatStateContext = React.createContext<TUIChatStateContextValue | null>(null);
 export function TUIChatStateContextProvider({ children, value }:PropsWithChildren<{
     value: TUIChatStateContextValue
 }>):React.ReactElement {

package/src/context/TUIContactContext.tsx

@@ -11,7 +11,7 @@ export interface TUIContactContextValue {
   isShowContactList?: boolean,
   setShowContactList?: React.Dispatch<React.SetStateAction<boolean>>
 }
-export const TUIContactContext = React.createContext<TUIContactContextValue>(null);
+export const TUIContactContext = React.createContext<TUIContactContextValue>({});
 export function TUIContactContextProvider({ children, value }:PropsWithChildren<{
     value: TUIContactContextValue
 }>):React.ReactElement {

package/src/context/TUIConversationContext.tsx

@@ -8,9 +8,9 @@ export interface TUIConversationContextValue {
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 }
 
-export const TUIConversationContext = React.createContext<TUIConversationContextValue>(undefined);
+export const TUIConversationContext = React.createContext<TUIConversationContextValue>({});
 export function TUIConversationProvider({ children, value }:React.PropsWithChildren<{
-  value?: TUIConversationContextValue
+  value: TUIConversationContextValue
 }>) {
   return (
     <TUIConversationContext.Provider value={value}>

package/src/context/TUIMessageContext.tsx

@@ -35,7 +35,7 @@ export interface TUIMessageContextValue {
   Progress?: React.ComponentType<{message: Message}>,
 }
 
-export const TUIMessageContext = React.createContext<TUIMessageContextValue>(undefined);
+export const TUIMessageContext = React.createContext<TUIMessageContextValue>({});
 export function TUIMessageContextProvider({ children, value }:PropsWithChildren<{
     value: TUIMessageContextValue
 }>):React.ReactElement {

package/src/context/TUIMessageInputContext.tsx

@@ -34,7 +34,7 @@ export interface TUIMessageInputContextValue {
   pluginConfig?: PluginConfigProps,
 }
 
-export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>(undefined);
+export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>({});
 export function TUIMessageInputContextProvider({ children, value }:PropsWithChildren<{
     value: TUIMessageInputContextValue
 }>):React.ReactElement {

package/src/hooks/useConversation.tsx

@@ -15,7 +15,7 @@ export interface CreateGroupConversationParams {
   groupCustomField?: Array<object>;
   isSupportTopic?: boolean;
 }
-export const useConversation = (chat) => {
+export const useConversation = (chat: any) => {
   const {
     createConversation: contextCreateConversation,
     deleteConversation: contextDeleteConversation,

package/src/hooks/useProfile.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-export const useProfile = (chat) => {
-  const getUserProfile = (userIDList) => chat.getUserProfile({ userIDList });
+export const useProfile = (chat: any) => {
+  const getUserProfile = (userIDList: Array<string>) => chat.getUserProfile({ userIDList });
   return {
     getUserProfile,
   };

package/tsconfig.json

@@ -5,6 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "jsx": "react-jsx",
+    "strict": true,
     "lib": ["es6", "dom", "es2016"],
   },
   "include": [