@tencentcloud/chat-uikit-react 2.2.5 → 2.2.6

package/src/components/TUIManage/TUIManage.tsx

@@ -5,7 +5,7 @@ import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
@@ -19,13 +19,13 @@ function UnMemoizedTUIManage<T>(
   const [profile, setProfile] = useState<any>();
   const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
+  const { chat } = useUIKit('TUIManage');
   const {
     conversation: activeConversation,
     setActiveConversation,
-    chat,
     TUIManageShow,
     setTUIManageShow,
-  } = useTUIKitContext('TUIManage');
+  } = useUIManager('TUIManage');
   useConversationUpdate(undefined, () => {
     setForceUpdateCount((count) => count + 1);
   });

package/src/components/TUIMessage/MessageStatus.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { useTUIMessageContext, useTUIKitContext } from '../../context';
+import { useTUIMessageContext, useUIKit } from '../../context';
 import { getTimeStamp } from '../untils';
 
 export interface MessageContextProps {
@@ -13,7 +13,7 @@ function MessageStatustWithContext <T extends MessageContextProps>(
   const {
     message,
   } = props;
-  const { language } = useTUIKitContext('TUIChat');
+  const { language } = useUIKit('TUIChat');
   const {
     isShowTime,
   } = useTUIMessageContext('MessageStatustWithContext');

package/src/components/TUIMessage/MessageText.tsx

@@ -3,21 +3,21 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
 
 export interface MessageContextProps {
-  context?: UnknowPorps,
-  message?: Message,
-  className?: string,
+  context?: UnknowPorps;
+  message?: Message;
+  className?: string;
 }
 
-function MessageTextWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
+function MessageTextWithContext(props: PropsWithChildren<MessageContextProps>) {
   const {
     context,
     message,
     children,
   } = props;
+
   const { MessageTextPlugins } = useComponentContext('MessageText');
   const { firstSendMessage } = useTUIChatStateContext('MessageText');
+
   if (MessageTextPlugins && message?.flow === 'in' && (firstSendMessage && firstSendMessage?.time <= message?.time)) {
     return (
       <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
@@ -25,14 +25,15 @@ function MessageTextWithContext <T extends MessageContextProps>(
       </div>
     );
   }
-  const urlToLink = function (text: string) {
+
+  function urlToLink(text: string) {
     if (!text) {
       return text;
     }
-    // eslint-disable-next-line no-useless-escape
     const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-    return text.replace(urlRegex, (website) => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
-  };
+    return text.replace(urlRegex, website => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
+  }
+
   return (
     <div className={`bubble message-text bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
@@ -43,8 +44,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
               <p
                 className="message-text-content-p"
                 key={item.src + key}
-                dangerouslySetInnerHTML={{ __html: urlToLink(item.text) }}
-              />
+              >
+                {item.text}
+              </p>
             );
           }
           return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
@@ -55,10 +57,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
   );
 }
 
-const MemoizedMessageText = React.memo(MessageTextWithContext) as
-typeof MessageTextWithContext;
+const MemoizedMessageText = React.memo(MessageTextWithContext) as typeof MessageTextWithContext;
 
-export function MessageText(props:MessageContextProps):React.ReactElement {
+export function MessageText(props: MessageContextProps) {
   return (
     <MemoizedMessageText {...props} />
   );

package/src/components/TUIMessage/hooks/useMessageHandler.ts

@@ -4,7 +4,7 @@ import { Message } from '@tencentcloud/chat';
 import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
 import { enableSampleTaskStatus } from '../../untils';
-import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
+import { useTUIChatActionContext, useUIKit } from '../../../context';
 import { Toast } from '../../Toast';
 
 interface MessageHandlerProps {
@@ -24,7 +24,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
   const { t } = useTranslation();
-  const { chat } = useTUIKitContext('useDeleteHandler');
+  const { chat } = useUIKit('useDeleteHandler');
 
   const handleDelMessage = useCallback(async (event?: any) => {
     event.preventDefault();

package/src/components/TUIMessage/hooks/useMessageReply.ts

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { useTUIChatStateContext, useTUIKitContext } from '../../../context';
+import { useTUIChatStateContext, useUIKit } from '../../../context';
 import { JSONStringToParse } from '../../untils';
 
 interface messageContextParams {
@@ -26,7 +26,7 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
   const [replyMessage, setReplyMessage] = useState(null);
   const [messageID, setMessageID] = useState('');
 
-  const { chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit('TUIChat');
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -7,7 +7,7 @@ import {
   UnknowPorps,
   useComponentContext,
   useTUIChatStateContext,
-  useTUIKitContext,
+  useUIManager,
 } from '../../context';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { InputQuoteDefalut } from './InputQuoteDefalut';

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

@@ -5,7 +5,7 @@ import {
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
-  useTUIChatStateContext, useTUIKitContext,
+  useTUIChatStateContext, useUIKit,
 } from '../../../context';
 
 export function useHandleForwardMessage(msg?:Message) {
@@ -14,7 +14,7 @@ export function useHandleForwardMessage(msg?:Message) {
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
   const [conversationList, setConversationList] = useState([]);
-  const { chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit('TUIChat');
 
   const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 

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

@@ -9,7 +9,7 @@ import {
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
-  useTUIKitContext,
+  useUIKit,
 } from '../../../context';
 import { enableSampleTaskStatus } from '../../untils';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
@@ -33,7 +33,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { chat } = useTUIKitContext('useMessageInputText');
+  const { chat } = useUIKit('useMessageInputText');
   const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();

package/src/components/TUIMessageInput/styles/color.scss

@@ -23,12 +23,12 @@
   &-box {
     border-radius: 16px;
 
-    [data-chat-theme="light"] & {
+    [data-uikit-theme="light"] & {
       background-color: var(--chat-theme-light-bg-primary);
       box-shadow: var(--chat-theme-light-box-shadow-1);
     }
 
-    [data-chat-theme="dark"] & {
+    [data-uikit-theme="dark"] & {
       background-color: var(--chat-theme-dark-bg-3);
       box-shadow: var(--chat-theme-dark-box-shadow-1);
     }

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

@@ -2,7 +2,7 @@ import React, {
   PropsWithChildren, useMemo,
 } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { UnknowPorps, useTUIKitContext } from '../../../context';
+import { UnknowPorps, useUIKit } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
 import { getTimeStamp } from '../../untils';
 
@@ -20,7 +20,7 @@ function useMessageListElement <T extends MessageListElementProps>(
     TUIMessage,
     intervalsTimer,
   } = props;
-  const { language } = useTUIKitContext('TUIConversation');
+  const { language } = useUIKit('TUIConversation');
 
   return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
     const key = `${item.ID}-${index}`;

package/src/components/TUIProfile/TUIProfile.tsx

@@ -4,7 +4,7 @@ import { Profile } from '../Profile';
 import './styles/index.scss';
 import { useMyProfile } from './hooks';
 import { TUIProfileDefault } from './TUIProfileDefault';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 
 interface TUIProfileProps {
   className?: string,
@@ -21,13 +21,13 @@ function UnMemoizedTUIProfile<T extends TUIProfileProps>(
 
   const { myProfile, updateMyProfile } = useMyProfile();
 
-  const { setTUIProfileShow, TUIProfileShow } = useTUIKitContext('TUIProfile');
+  const { setTUIProfileShow, TUIProfileShow } = useUIManager('TUIProfile');
 
   const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
 
   return (
     <>
-    {/* //eslint-disable-next-line 
+    {/* //eslint-disable-next-line
     @ts-ignore */}
       <Profile
         profile={myProfile}

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -4,7 +4,7 @@ import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
 import { UpdateMyProfileParams } from "@tencentcloud/chat-uikit-engine";
 import { isH5 } from '../../utils/env';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 
 import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
@@ -73,7 +73,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   } = props;
 
   const { t } = useTranslation();
-  const { setTUIProfileShow } = useTUIKitContext('TUIProfileDefault');
+  const { setTUIProfileShow } = useUIManager('TUIProfileDefault');
 
   const [isEditName, setIsEditName] = useState('');
 

package/src/components/index.ts

@@ -1,4 +1,3 @@
-export * from './TUIKit';
 export * from './TUIConversation';
 export * from './TUIConversationList';
 export * from './TUIChat';

package/src/context/LanguageContext.tsx

@@ -0,0 +1,59 @@
+import {
+  useState,
+  useContext,
+  createContext,
+  useLayoutEffect,
+  PropsWithChildren,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface LanguageContextType {
+  language: string;
+  setLanguage: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface LanguageProviderProps {
+  language: string;
+}
+
+const LanguageContext = createContext<LanguageContextType | null>(null);
+
+function LanguageProvider(props: PropsWithChildren<Partial<LanguageProviderProps>>) {
+  const {
+    language: _language = 'en-US',
+    children,
+  } = props;
+
+  const { i18n } = useTranslation();
+
+  const [language, setLanguage] = useState(_language);
+
+  useLayoutEffect(() => {
+    i18n.changeLanguage(language);
+  }, [language, i18n]);
+
+  useLayoutEffect(() => {
+    document.documentElement.lang = language;
+  }, [language]);
+
+  const value = {
+    language,
+    setLanguage,
+  };
+
+  return (
+    <LanguageContext.Provider value={value}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+function useLanguage() {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+}
+
+export { LanguageProvider, useLanguage, LanguageContextType };

package/src/context/ThemeContext.tsx

@@ -0,0 +1,61 @@
+import {
+  useState,
+  useContext,
+  createContext,
+  useLayoutEffect,
+  PropsWithChildren,
+} from 'react';
+
+import '../styles/index.scss';
+
+interface ThemeContextType {
+  theme: string;
+  colors: Record<string, string> | undefined;
+  setTheme: (theme: string) => void;
+  setColors: (colors: Record<string, string>) => void;
+}
+
+interface ThemeProviderProps {
+  theme: string;
+  colors: Record<string, string> | undefined;
+}
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+function ThemeProvider(props: PropsWithChildren<Partial<ThemeProviderProps>>) {
+  const {
+    theme: _theme = 'light',
+    colors: _colors,
+    children,
+  } = props;
+
+  const [theme, setTheme] = useState(_theme);
+  const [colors, setColors] = useState(_colors);
+
+  useLayoutEffect(() => {
+    document.documentElement.dataset.uikitTheme = theme;
+  }, [theme]);
+
+  const value = {
+    theme,
+    colors,
+    setTheme,
+    setColors,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export { ThemeProvider, useTheme, ThemeContextType };

package/src/context/UIKitContext.tsx

@@ -0,0 +1,67 @@
+import { PropsWithChildren, useContext, createContext } from 'react';
+import type {
+  ChatSDK,
+  Conversation,
+} from '@tencentcloud/chat';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { ThemeProvider, useTheme } from './ThemeContext';
+import { LanguageProvider, useLanguage } from './LanguageContext';
+import { UIManagerProvider } from './UIManagerContext';
+
+interface UIKitContextType {
+  chat: ChatSDK;
+}
+
+interface UIKitProviderProps {
+  chat?: ChatSDK;
+  language?: string;
+  theme?: string;
+  colors?: Record<string, string>;
+  customClasses?: string;
+  activeConversation?: Conversation;
+}
+
+const UIKitContext = createContext<UIKitContextType | null>(null);
+
+function UIKitProvider(props: PropsWithChildren<UIKitProviderProps>) {
+  const {
+    chat = TUILogin.getContext().chat,
+    language,
+    theme,
+    colors,
+    customClasses,
+    activeConversation,
+    children,
+  } = props;
+
+  return (
+    <LanguageProvider language={language}>
+      <ThemeProvider theme={theme} colors={colors}>
+        <UIKitContext.Provider value={{ chat }}>
+          <UIManagerProvider activeConversation={activeConversation} customClasses={customClasses}>
+            {children}
+          </UIManagerProvider>
+        </UIKitContext.Provider>
+      </ThemeProvider>
+    </LanguageProvider>
+  );
+}
+
+const useUIKit = (componentName?: string) => {
+  const languageContext = useLanguage();
+  const themeContext = useTheme();
+  const uikitContext = useContext(UIKitContext);
+  if (!uikitContext) {
+    throw new Error('useUIKit must be used within a UIKitProvider');
+  }
+  return {
+    ...themeContext,
+    ...languageContext,
+    ...uikitContext,
+  };
+};
+
+export {
+  UIKitProvider,
+  useUIKit,
+};

package/src/context/UIManagerContext.tsx

@@ -0,0 +1,163 @@
+import React, {
+  useState,
+  useContext,
+  useCallback,
+  PropsWithChildren,
+  useEffect,
+} from 'react';
+import type {
+  Conversation,
+  Profile,
+  Friend,
+  FriendApplication,
+} from '@tencentcloud/chat';
+import {
+  TUIStore,
+  StoreName,
+  type IConversationModel,
+} from '@tencentcloud/chat-uikit-engine';
+import type { IGroupModel } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from './UIKitContext';
+
+type blockData = {
+  type: 'block';
+  data: Profile;
+};
+
+type friendData = {
+  type: 'friend';
+  data: Friend;
+};
+
+type friendApplicationData = {
+  type: 'friendApplication';
+  data: FriendApplication;
+};
+
+type addFriendData = {
+  type: 'addFriend';
+  data: Profile;
+};
+
+type GroupData = {
+  type: 'group';
+  data: IGroupModel;
+};
+
+type UseContactParams =
+  | blockData
+  | friendData
+  | friendApplicationData
+  | addFriendData
+  | GroupData
+  | undefined;
+
+type UIManagerContextType = {
+  conversation?: Conversation;
+  contactData?: UseContactParams;
+  customClasses?: unknown;
+  myProfile?: Profile;
+  TUIManageShow?: boolean;
+  TUIProfileShow?: boolean;
+  setTUIManageShow: React.Dispatch<React.SetStateAction<boolean>>;
+  setTUIProfileShow: React.Dispatch<React.SetStateAction<boolean>>;
+  setActiveConversation: (conversation?: Conversation) => void;
+  setActiveContact: (useContactParams?: UseContactParams) => void;
+};
+
+type UIManagerProviderProps = {
+  customClasses: string;
+  activeConversation: Conversation;
+};
+
+const UIManagerContext = React.createContext<UIManagerContextType | null>(null);
+
+function UIManagerProvider(props: PropsWithChildren<Partial<UIManagerProviderProps>>) {
+  const {
+    customClasses,
+    activeConversation,
+    children,
+  } = props;
+
+  const { chat } = useUIKit();
+
+  const [conversation, setConversation] = useState<Conversation | undefined>(activeConversation);
+  const [contactData, setContactData] = useState<UseContactParams>();
+  const [myProfile, setMyProfile] = useState<Profile>();
+  const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
+  const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.USER, {
+      userProfile: onMyProfileUpdated,
+    });
+    TUIStore.watch(StoreName.CONV, {
+      currentConversation: onCurrentConversationUpdated,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.USER, {
+        userProfile: onMyProfileUpdated,
+      });
+      TUIStore.unwatch(StoreName.CONV, {
+        currentConversation: onCurrentConversationUpdated,
+      });
+    };
+  }, []);
+
+  const setActiveConversation = useCallback((_activeConversation?: Conversation) => {
+    if (_activeConversation) {
+      chat?.setMessageRead({ conversationID: _activeConversation.conversationID });
+    }
+
+    if (_activeConversation?.conversationID !== conversation?.conversationID) {
+      setTUIManageShow(false);
+    }
+
+    setConversation(_activeConversation);
+  }, []);
+
+  function onMyProfileUpdated(userProfileData: unknown) {
+    setMyProfile(userProfileData as Profile);
+  }
+
+  function onCurrentConversationUpdated(conversationModel: IConversationModel) {
+    setActiveConversation(conversationModel?.getConversation());
+  }
+
+  function setActiveContact(actionContactData?: UseContactParams) {
+    setContactData(actionContactData);
+  }
+
+  const value = {
+    conversation,
+    contactData,
+    setActiveConversation,
+    myProfile,
+    TUIManageShow,
+    setTUIManageShow,
+    TUIProfileShow,
+    setTUIProfileShow,
+    setActiveContact,
+  };
+
+  return (
+    <UIManagerContext.Provider value={value}>
+      {children}
+    </UIManagerContext.Provider>
+  );
+}
+
+const useUIManager = (componentName?: string) => {
+  const context = useContext(UIManagerContext);
+  if (!context) {
+    throw new Error('useUIManager must be used within a UIManagerProvider');
+  }
+  return context;
+};
+
+export {
+  UIManagerProvider,
+  useUIManager,
+  UIManagerContextType,
+};

package/src/context/index.ts

@@ -1,7 +1,8 @@
-export * from './TUIKitContext';
+export * from './UIKitContext';
+export * from './UIManagerContext';
 export * from './TUIChatStateContext';
 export * from './TUIChatActionContext';
 export * from './TUIMessageContext';
 export * from './ComponentContext';
 export * from './TUIMessageInputContext';
-export * from './TUIContactContext';
+export * from './TUIContactContext';

package/src/locales/en-US/index.ts

@@ -1,8 +1,8 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
-import TUIGlobal from './TUIProfile';
 
 
 export const message = {

package/src/locales/ja-JP/index.ts

@@ -1,9 +1,11 @@
+import TUIGlobal from './TUIGlobal';
 import TUIChat from './TUIChat';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
+  TUIGlobal,
   TUIChat,
   TUIConversation,
   TUIContact,

package/src/locales/ko-KR/TUIGlobal.ts

@@ -1,6 +1,6 @@
 /* eslint-disable quote-props */
 export const TUIGlobal = {
-  'chats': 'メッセージ',
-  'contacts': '連絡先'
+  'chats': '채팅',
+  'contacts': '연락처'
 }
 export default TUIGlobal;