@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/context/MessageContext.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
+import { Message } from '@tencentcloud/chat';
+import { MessagePluginsProps } from '../components';
+
+export enum messageShowType {
+  IN = 'in',
+  OUT = 'out',
+  ALL = 'all',
+  NONE = 'none',
+}
+
+export interface TUIMessageContextValue {
+  message?: Message;
+  handleDelete?: ReactEventHandler;
+  CustemElement?: React.ComponentType<{ message: Message }>;
+  TextElement?: React.ComponentType<{ message: Message }>;
+  ImageElement?: React.ComponentType<{ message: Message }>;
+  VideoElement?: React.ComponentType<{ message: Message }>;
+  AudioElement?: React.ComponentType<{ message: Message }>;
+  FileElement?: React.ComponentType<{ message: Message }>;
+  MergerElement?: React.ComponentType<{ message: Message }>;
+  LocationElement?: React.ComponentType<{ message: Message }>;
+  FaceElement?: React.ComponentType<{ message: Message }>;
+  filter?: (data: Message) => void;
+  isShowTime?: boolean;
+  isShowRead?: boolean;
+  plugin?: MessagePluginsProps;
+  prefix?: React.ReactElement | string;
+  suffix?: React.ReactElement | string;
+  customName?: React.ReactElement;
+  showAvatar?: messageShowType;
+  showName?: messageShowType;
+  customAvatar?: React.ReactElement;
+  isShowProgress?: boolean;
+  Progress?: React.ComponentType<{ message: Message }>;
+}
+
+export const TUIMessageContext = React.createContext<TUIMessageContextValue>({});
+export function TUIMessageContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIMessageContextValue;
+}>): React.ReactElement {
+  return (
+    <TUIMessageContext.Provider value={value}>
+      {children}
+    </TUIMessageContext.Provider>
+  );
+}
+
+export function useTUIMessageContext(componentName?: string): TUIMessageContextValue {
+  const contextValue = useContext(TUIMessageContext);
+  if (!contextValue && componentName) {
+    return {} as TUIMessageContextValue;
+  }
+  return (contextValue as unknown) as TUIMessageContextValue;
+}

package/src/context/MessageInputContext.tsx

@@ -0,0 +1,54 @@
+import React, {
+  PropsWithChildren,
+  ChangeEventHandler,
+  useContext,
+  KeyboardEventHandler,
+  MutableRefObject,
+} from 'react';
+import { PluginConfigProps } from '../components';
+import type { ICursorPos } from '../components/MessageInput/hooks';
+import type { EmojiData } from '../components/MessageInput/hooks/useEmojiPicker';
+import type { filesData } from '../components/MessageInput/hooks/useUploadPicker';
+import type { MESSAGE_TYPE_NAME } from '../constants';
+
+interface dispatchParams {
+  type: string;
+  value?: string;
+}
+export interface TUIMessageInputContextValue {
+  text?: string;
+  disabled?: boolean;
+  dispatch?: (params: dispatchParams) => void;
+  handleChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  handleSubmit?: (event: React.BaseSyntheticEvent) => void;
+  handleKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  onSelectEmoji?: (emoji: EmojiData) => void;
+  sendFaceMessage?: (emoji: EmojiData) => void;
+  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void;
+  insertText?: (textToInsert: string) => void;
+  setText?: (textToInsert: string) => void;
+  focus?: boolean;
+  handlePasete?: (e: ClipboardEvent) => void;
+  setCursorPos?: (e: ICursorPos) => void;
+  pluginConfig?: PluginConfigProps;
+}
+
+export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>({});
+export function TUIMessageInputContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIMessageInputContextValue;
+}>): React.ReactElement {
+  return (
+    <TUIMessageInputContext.Provider value={value}>
+      {children}
+    </TUIMessageInputContext.Provider>
+  );
+}
+
+export function useTUIMessageInputContext(componentName?: string): TUIMessageInputContextValue {
+  const contextValue = useContext(TUIMessageInputContext);
+  if (!contextValue && componentName) {
+    return {} as TUIMessageInputContextValue;
+  }
+  return (contextValue as unknown) as TUIMessageInputContextValue;
+}

package/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useState,
   useContext,
   createContext,
@@ -11,8 +11,8 @@ import '../styles/index.scss';
 interface ThemeContextType {
   theme: string;
   colors: Record<string, string> | undefined;
-  setTheme: (theme: string) => void;
-  setColors: (colors: Record<string, string>) => void;
+  setTheme: React.Dispatch<React.SetStateAction<string>>;
+  setColors: React.Dispatch<React.SetStateAction<Record<string, string> | undefined>>;
 }
 
 interface ThemeProviderProps {
@@ -22,6 +22,8 @@ interface ThemeProviderProps {
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
 
+const supportedThemes = ['light', 'dark'];
+
 function ThemeProvider(props: PropsWithChildren<Partial<ThemeProviderProps>>) {
   const {
     theme: _theme = 'light',
@@ -29,12 +31,17 @@ function ThemeProvider(props: PropsWithChildren<Partial<ThemeProviderProps>>) {
     children,
   } = props;
 
+  if (supportedThemes.indexOf(_theme) === -1) {
+    throw new Error(`Theme ${_theme} is not supported, please check the supported themes list: [${supportedThemes.join(', ')}]`);
+  }
+
   const [theme, setTheme] = useState(_theme);
   const [colors, setColors] = useState(_colors);
 
   useLayoutEffect(() => {
-    document.documentElement.dataset.uikitTheme = theme;
-  }, [theme]);
+    document.documentElement.dataset.uikitTheme = _theme;
+    setTheme(_theme);
+  }, [_theme]);
 
   const value = {
     theme,

package/src/context/UIKitContext.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useContext, createContext } from 'react';
+import { PropsWithChildren, useState, useContext, createContext, useEffect } from 'react';
 import type {
   ChatSDK,
   Conversation,
@@ -34,10 +34,19 @@ function UIKitProvider(props: PropsWithChildren<UIKitProviderProps>) {
     children,
   } = props;
 
+  const [chatSDK, setChatSDK] = useState<ChatSDK>(chat);
+
+  useEffect(() => {
+    if (!chatSDK) {
+      setChatSDK(chat);
+    }
+  }, [chat]);
+
+  const value = { chat: chatSDK };
   return (
     <LanguageProvider language={language}>
       <ThemeProvider theme={theme} colors={colors}>
-        <UIKitContext.Provider value={{ chat }}>
+        <UIKitContext.Provider value={value}>
           <UIManagerProvider activeConversation={activeConversation} customClasses={customClasses}>
             {children}
           </UIManagerProvider>

package/src/context/index.ts

@@ -1,8 +1,9 @@
 export * from './UIKitContext';
 export * from './UIManagerContext';
-export * from './TUIChatStateContext';
-export * from './TUIChatActionContext';
-export * from './TUIMessageContext';
+export * from './ChatStateContext';
+export * from './ChatActionContext';
+export * from './MessageContext';
 export * from './ComponentContext';
-export * from './TUIMessageInputContext';
-export * from './TUIContactContext';
+export * from './MessageInputContext';
+export * from './ContactContext';
+export * from './ConversationListContext';

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export * from './useConversation';
 export * from './useProfile';
+export * from './useMouseHover';
+export * from './useLongPress';

package/src/hooks/useConversation.tsx

@@ -1,78 +1,30 @@
-import React from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { useTUIConversationContext } from '../context/TUIConversationContext';
+import TUIChatEngine, { TUIGroupService, TUIConversationService, IConversationModel, CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
 
-export interface CreateGroupConversationParams {
-  name: string;
-  type?: TencentCloudChat.TYPES;
-  groupID?: string;
-  introduction?: string;
-  notification?: string;
-  avatar?: string;
-  maxMemberNum?: number;
-  joinOption?: string;
-  memberList?: Array<object>;
-  groupCustomField?: Array<object>;
-  isSupportTopic?: boolean;
+async function createC2CConversation(userID: string): Promise<IConversationModel> {
+  const response = await TUIConversationService.getConversationProfile(`C2C${userID}`);
+  return response.data.conversation;
 }
-export const useConversation = (chat: any) => {
-  const {
-    createConversation: contextCreateConversation,
-    deleteConversation: contextDeleteConversation,
-  } = useTUIConversationContext('useConversation');
-  const createConversation = async (
-    params: string | CreateGroupConversationParams,
-  ) => {
-    // create c2c conversation
-    if (typeof params === 'string') {
-      const { data } = await chat.getConversationProfile(params);
-      return data.conversation;
-    }
-    // create group conversation
-    const {
-      name,
-      type,
-      groupID,
-      introduction,
-      notification,
-      avatar,
-      maxMemberNum,
-      joinOption,
-      memberList = [],
-      groupCustomField = [],
-      isSupportTopic,
-    } = params;
-    const res = await chat.createGroup({
-      name,
-      type,
-      groupID,
-      introduction,
-      notification,
-      avatar,
-      maxMemberNum,
-      joinOption,
-      memberList,
-      groupCustomField,
-      isSupportTopic,
+
+async function createGroupConversation(groupParams: CreateGroupParams): Promise<IConversationModel> {
+  if (groupParams.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
+    delete groupParams.groupID;
+  }
+
+  const res = await TUIGroupService.createGroup(groupParams);
+  const { type } = res.data.group;
+
+  if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+    await TUIGroupService.joinGroup({
+      groupID: res.data.group.groupID,
+      applyMessage: '',
     });
-    const { groupID: createdGroupID } = res.data.group;
-    if (type === TencentCloudChat.TYPES.GRP_AVCHATROOM) {
-      await chat.joinGroup({
-        groupID: createdGroupID,
-        type: TencentCloudChat.TYPES.GRP_AVCHATROOM,
-      });
-    }
-    const { data } = await chat.getConversationProfile(`GROUP${createdGroupID}`);
-    return data.conversation;
-  };
-  const pinConversation = (options: {
-    conversationID: string;
-    isPinned: boolean;
-  }) => chat.pinConversation(options);
-  const deleteConversation = (conversationID: string) => chat.deleteConversation(conversationID);
-  return {
-    createConversation: contextCreateConversation || createConversation,
-    pinConversation,
-    deleteConversation: contextDeleteConversation || deleteConversation,
-  };
+  }
+
+  const response = await TUIConversationService.getConversationProfile(`GROUP${res.data.group.groupID}`);
+  return response.data.conversation;
+}
+
+export {
+  createC2CConversation,
+  createGroupConversation,
 };

package/src/hooks/useLongPress.tsx

@@ -0,0 +1,117 @@
+import React, {
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
+import { isH5 } from '../utils/env';
+
+const DEFAULT_DURATION = 300;
+
+function preventDefault(e: Event) {
+  if (!isTouchEvent(e)) {
+    return;
+  }
+
+  if (e.touches.length < 2 && e.preventDefault) {
+    e.preventDefault();
+  }
+}
+
+export function isTouchEvent(e: Event): e is TouchEvent {
+  return e && 'touches' in e;
+}
+
+interface PressHandlers<T> {
+  onLongPress?: (e: React.MouseEvent<T> | React.TouchEvent<T>) => void;
+  onClick?: (e: React.MouseEvent<T> | React.TouchEvent<T>) => void;
+}
+
+interface Options {
+  delay?: number;
+  shouldPreventDefault?: boolean;
+  shouldStopPropagation?: boolean;
+}
+
+interface UseLongPressType<T> {
+  isLongPressing: boolean;
+  onTouchMove: (e: React.TouchEvent<T>) => void;
+  onMouseDown: (e: React.MouseEvent<T>) => void;
+  onTouchStart: (e: React.TouchEvent<T>) => void;
+  onMouseUp: (e: React.MouseEvent<T>) => void;
+  onMouseLeave: (e: React.MouseEvent<T>) => void;
+  onTouchEnd: (e: React.TouchEvent<T>) => void;
+}
+
+export default function useLongPress<T>({
+  onLongPress,
+  onClick,
+}: PressHandlers<T>, {
+  delay = DEFAULT_DURATION,
+  shouldPreventDefault = true,
+  shouldStopPropagation = false,
+}: Options = {}): UseLongPressType<T> {
+  const [longPressTriggered, setLongPressTriggered] = useState(false);
+  const [dragTriggered, setDragTriggered] = useState(false);
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+  const target = useRef<EventTarget>();
+
+  const start = useCallback((e: React.MouseEvent<T> | React.TouchEvent<T>) => {
+    e.persist();
+    const clonedEvent = {
+      ...e,
+    };
+    setDragTriggered(false);
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+    if (shouldPreventDefault && e.target) {
+      e.target.addEventListener(
+        'touchend',
+        preventDefault,
+        {
+          passive: false,
+        },
+      );
+      target.current = e.target;
+    }
+
+    timeout.current = setTimeout(() => {
+      onLongPress?.(clonedEvent);
+      setLongPressTriggered(true);
+    }, delay);
+  }, [onLongPress, delay, shouldPreventDefault, shouldStopPropagation, isH5]);
+
+  const clear = useCallback((
+    e: React.MouseEvent<T> | React.TouchEvent<T>,
+    shouldTriggerClick = true,
+    onDrag = false,
+  ) => {
+    if (onDrag) {
+      setDragTriggered(true);
+    } else {
+      setDragTriggered(false);
+    }
+    if (timeout?.current) {
+      clearTimeout(timeout.current);
+    }
+    if (shouldTriggerClick && !longPressTriggered && !dragTriggered) {
+      onClick?.(e);
+    }
+    setLongPressTriggered(false);
+    if (shouldPreventDefault && target.current) {
+      target.current.removeEventListener('touchend', preventDefault);
+    }
+  }, [shouldPreventDefault, onClick, longPressTriggered, dragTriggered]);
+
+  return {
+    isLongPressing: longPressTriggered,
+    onMouseDown: (e: React.MouseEvent<T>) => start(e),
+    onMouseUp: (e: React.MouseEvent<T>) => clear(e),
+    onMouseLeave: (e: React.MouseEvent<T>) => clear(e, false),
+    onTouchStart: (e: React.TouchEvent<T>) => start(e),
+    // setDragTriggered as true on touchmove, so that next onTouchEnd is ignored
+    // if we dont do it, onClick?.(e) will be triggred, see inside clear()
+    onTouchMove: (e: React.TouchEvent<T>) => clear(e, false, true),
+    onTouchEnd: (e: React.TouchEvent<T>) => clear(e),
+  };
+}

package/src/hooks/useMouseHover.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import type { RefObject } from 'react';
+
+export default function useHover<T extends HTMLElement = HTMLElement>(
+  elementRef: RefObject<T>,
+): boolean {
+  const [value, setValue] = useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setValue(true);
+  };
+  const handleMouseLeave = () => {
+    setValue(false);
+  };
+
+  elementRef.current?.addEventListener('mouseenter', handleMouseEnter);
+  elementRef.current?.addEventListener('mouseleave', handleMouseLeave);
+
+  return value;
+}

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

@@ -8,6 +8,8 @@ const TUIConversation = {
   'Conversation Information': 'Conversation Information',
   'Pin': 'Pin',
   'Unpin': 'Unpin',
+  'Mute': 'Mute',
+  'Unmute': 'Unmute',
   'Search': 'Search',
   'Add Participants': 'Add Participants',
   'No conversation': 'No conversation',
@@ -19,6 +21,8 @@ const TUIConversation = {
   'Create': 'Create',
   'Details': 'Details',
   'Work': 'Work',
+  'Private': 'Work',
+  'ChatRoom': 'Meeting',
   'Public': 'Public',
   'Meeting': 'Meeting',
   'AVChatRoom': 'AVChatRoom',

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

@@ -1,12 +1,9 @@
-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/index.ts

@@ -1,11 +1,13 @@
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 import { message as enMessage } from './en-US/index';
 import { message as zhMessage } from './zh-CN/index';
 import { message as jaMessage } from './ja-JP/index';
 import { message as koMessage } from './ko-KR/index';
+import { message as twMessage } from './zh-TW/index';
 
-const resources = {
+const resources: Record<string, any> = {
   'en-US': {
     translation: enMessage,
   },
@@ -17,7 +19,10 @@ const resources = {
   },
   'ko-KR': {
     translation: koMessage,
-  }
+  },
+  'zh-TW': {
+    translation: twMessage,
+  },
 };
 
 i18next.use(initReactI18next).init({
@@ -28,5 +33,14 @@ i18next.use(initReactI18next).init({
   },
 });
 
+const engineLocaleResources = {
+  'en-US': enMessage,
+  'zh-CN': zhMessage,
+  'ja-JP': jaMessage,
+  'ko-KR': koMessage,
+};
+TUITranslateService.provideLanguages(engineLocaleResources);
+TUITranslateService.useI18n('en-US');
+
 const { t } = i18next;
 export { i18next, t };

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

@@ -6,6 +6,8 @@ const TUIConversation = {
   'Delete': 'チャットを削除',
   'Pin': 'チャットをトップに固定',
   'Unpin': 'トップ固定を解除',
+  'Mute': 'ミュート',
+  'Unmute': 'ミュート解除',
   'Conversation Information': 'チャット情報',
   'Search': '検索',
   'Add Participants': 'グループチャットを作成',
@@ -18,6 +20,8 @@ const TUIConversation = {
   'Create': '作成',
   'Details': '詳細',
   'Work': '友達の仕事グループ(Work)',
+  'Private': '友達の仕事グループ(Work)',
+  'ChatRoom': '一時的な会議グループ(Meeting)',
   'Public': '見知らぬ人の社交グループ(Public)',
   'Meeting': '一時的な会議グループ(Meeting)',
   'AVChatRoom': 'ライブチャットルーム(AVChatroom)',

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

@@ -1,11 +1,9 @@
-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/TUIConversation.ts

@@ -6,6 +6,8 @@ const TUIConversation = {
   'Delete': '채팅 삭제',
   'Pin': '채팅 고정',
   'Unpin': '채팅 고정 해제',
+  'Mute': '음소거',
+  'Unmute': '음소거 해제',
   'Conversation Information': '채팅 정보',
   'Search': '검색',
   'Add Participants': '그룹 채팅 생성',
@@ -18,6 +20,8 @@ const TUIConversation = {
   'Create': '생성',
   'Details': '상세',
   'Work': '친구 작업 그룹(Work)',
+  'Private': '친구 작업 그룹(Work)',
+  'ChatRoom': '임시 회의 그룹(Meeting)',
   'Public': '낯선 사람 소셜 그룹(Public)',
   'Meeting': '임시 회의 그룹(Meeting)',
   'AVChatRoom': '라이브 방송 그룹(AVChatroom)',

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

@@ -1,11 +1,9 @@
-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/zh-CN/TUIConversation.ts

@@ -6,6 +6,8 @@ const TUIConversation = {
   'Delete': '删除会话',
   'Pin': '置顶会话',
   'Unpin': '取消置顶',
+  'Mute': '消息免打扰',
+  'Unmute': '取消免打扰',
   'Conversation Information': '会话信息',
   'Search': '搜索',
   'Add Participants': '创建群聊',
@@ -18,6 +20,8 @@ const TUIConversation = {
   'Create': '创建',
   'Details': '详情',
   'Work': '好友工作群（Work）',
+  'Private': '好友工作群（Work）',
+  'ChatRoom': '临时会议群（Meeting）',
   'Public': '陌生人社交群（Public）',
   'Meeting': '临时会议群（Meeting）',
   'AVChatRoom': '直播群（AVChatroom）',

package/src/locales/zh-CN/index.ts

@@ -1,11 +1,9 @@
-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/zh-TW/TUIChat.ts

@@ -0,0 +1,27 @@
+/* eslint-disable quote-props */
+const TUIChat = {
+  'Recall': '撤回',
+  'Reference': '引用',
+  'Forward': '轉發',
+  'Copy': '複製',
+  'Delete': '刪除',
+  'Forward to': '轉發給',
+  'recalled a message': '撤回了一條消息',
+  'Re-edit': '重新編輯',
+  'Resend': '重新發送',
+  'You': '您',
+  'Recent Chats': '會話紀錄',
+  'Frequently Contacted': '頻繁聯繫',
+  'No Result': '無結果',
+  'Search Result': '搜尋結果',
+  'Image': '圖片',
+  'Video': '影片',
+  'File': '檔案',
+  'Enter a message': '請輸入訊息',
+  'No More': '沒有了',
+  'Error deleting message': '刪除訊息失敗',
+  'The message recall exceeded the time limit (default 2 minutes)': '訊息撤回超時（預設 2 分鐘）',
+  'Error revoke Message': '訊息撤回失敗',
+  'Custom message': '自訂訊息',
+};
+export default TUIChat;