@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/context/MessageInputContext.tsx

@@ -1,54 +0,0 @@
-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,68 +0,0 @@
-import React, {
-  useState,
-  useContext,
-  createContext,
-  useLayoutEffect,
-  PropsWithChildren,
-} from 'react';
-
-import '../styles/index.scss';
-
-interface ThemeContextType {
-  theme: string;
-  colors: Record<string, string> | undefined;
-  setTheme: React.Dispatch<React.SetStateAction<string>>;
-  setColors: React.Dispatch<React.SetStateAction<Record<string, string> | undefined>>;
-}
-
-interface ThemeProviderProps {
-  theme: string;
-  colors: Record<string, string> | undefined;
-}
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-const supportedThemes = ['light', 'dark'];
-
-function ThemeProvider(props: PropsWithChildren<Partial<ThemeProviderProps>>) {
-  const {
-    theme: _theme = 'light',
-    colors: _colors,
-    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;
-    setTheme(_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

@@ -1,70 +0,0 @@
-import { PropsWithChildren, useState, useContext, createContext, useEffect } from 'react';
-import { TUILogin } from '@tencentcloud/tui-core';
-import { ThemeProvider, useTheme } from './ThemeContext';
-import { LanguageProvider, useLanguage } from './LanguageContext';
-import type { ChatSDK, Conversation } from '@tencentcloud/chat';
-
-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;
-
-  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={value}>
-          {children}
-        </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

@@ -1,163 +0,0 @@
-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 { useUIManagerStore } from '../store';
-
-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 = {
-  activeConversation: Conversation;
-};
-
-console.warn('UIManagerContext has been deprecated.');
-
-const UIManagerContext = React.createContext<UIManagerContextType | null>(null);
-
-function UIManagerProvider(props: PropsWithChildren<Partial<UIManagerProviderProps>>) {
-  const {
-    activeConversation,
-    children,
-  } = props;
-
-  const { chat } = useUIManagerStore();
-
-  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/hooks/useConversation.tsx

@@ -1,30 +0,0 @@
-import TUIChatEngine, { TUIGroupService, TUIConversationService, IConversationModel, CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
-
-async function createC2CConversation(userID: string): Promise<IConversationModel> {
-  const response = await TUIConversationService.getConversationProfile(`C2C${userID}`);
-  return response.data.conversation;
-}
-
-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 response = await TUIConversationService.getConversationProfile(`GROUP${res.data.group.groupID}`);
-  return response.data.conversation;
-}
-
-export {
-  createC2CConversation,
-  createGroupConversation,
-};

package/src/hooks/useLongPress.tsx

@@ -1,117 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/hooks/useProfile.tsx

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

package/src/server.ts

@@ -1,43 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-
-export default class TUIChatKit {
-  constructor() {
-    TUICore.registerEvent(
-      TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
-      TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
-      this,
-    );
-  }
-
-  /**
-   * @param { TUIInitParam } params
-   */
-  public onNotifyEvent(eventName: string, subKey: string) {
-    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
-      switch (subKey) {
-        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
-          this.login();
-          break;
-        default:
-          // todo
-      }
-    }
-  }
-
-  /**
-   * login
-   */
-  private login() {
-    const {
-      chat, SDKAppID, userID, userSig,
-    } = TUILogin.getContext();
-    TUIChatEngine.login({
-      chat,
-      SDKAppID,
-      userID,
-      userSig,
-    });
-  }
-}

package/src/store/UIManagerStore.ts

@@ -1,108 +0,0 @@
-import { useStore } from 'zustand';
-import { createStore } from 'zustand/vanilla';
-import { TUILogin } from '@tencentcloud/tui-core';
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-import type { IConversationModel, IGroupModel } from '@tencentcloud/chat-uikit-engine';
-import type { Profile, Friend, FriendApplication } from '@tencentcloud/chat';
-
-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 ContactParams =
-  | BlockData
-  | FriendData
-  | FriendApplicationData
-  | AddFriendData
-  | GroupData;
-
-interface IUIManagerState {
-  chat: any;
-  myProfile: Profile | undefined;
-  contactData: ContactParams | undefined;
-  conversation: IConversationModel | undefined;
-  TUIProfileShow: boolean;
-  TUIManageShow: boolean;
-}
-
-interface IUIManagerAction {
-  setMyProfile: (profile?: Profile | undefined) => void;
-  setActiveContact: (contact?: ContactParams) => void;
-  setActiveConversation: (conversation?: IConversationModel) => void;
-  setTUIProfileShow: (show: boolean) => void;
-  setTUIManageShow: (show: boolean) => void;
-}
-
-const uiManagerStore = createStore<IUIManagerState & IUIManagerAction>()(set => ({
-  chat: null,
-  myProfile: undefined,
-  contactData: undefined,
-  conversation: undefined,
-  TUIProfileShow: false,
-  TUIManageShow: false,
-  setMyProfile: myProfile => set(() => ({ myProfile: myProfile })),
-  setActiveContact: contact => set(() => ({ contactData: contact })),
-  setActiveConversation: conversation => set(() => ({ conversation: conversation })),
-  setTUIProfileShow: value => set(() => ({ TUIProfileShow: value })),
-  setTUIManageShow: value => set(() => ({ TUIManageShow: value })),
-}));
-
-TUIStore.watch(StoreName.USER, {
-  userProfile: onMyProfileUpdated,
-});
-
-TUIStore.watch(StoreName.CONV, {
-  currentConversation: onCurrentConversationUpdated,
-});
-
-function onMyProfileUpdated(userProfileData: Profile) {
-  uiManagerStore.getState().setMyProfile(userProfileData);
-}
-
-function onCurrentConversationUpdated(conversationModel: IConversationModel) {
-  if (conversationModel?.conversationID !== uiManagerStore.getState().conversation?.conversationID) {
-    uiManagerStore.getState().setTUIManageShow(false);
-  }
-  uiManagerStore.getState().setActiveConversation(conversationModel);
-}
-
-function useUIManagerStore(..._args: any[]) {
-  return {
-    chat: TUILogin.getContext().chat,
-    myProfile: useStore(uiManagerStore, state => state.myProfile),
-    contactData: useStore(uiManagerStore, state => state.contactData),
-    conversation: useStore(uiManagerStore, state => state.conversation),
-    TUIProfileShow: useStore(uiManagerStore, state => state.TUIProfileShow),
-    TUIManageShow: useStore(uiManagerStore, state => state.TUIManageShow),
-    // do not need setMyProfile, because myProfile is read-only and cannot be written
-    setActiveContact: useStore(uiManagerStore, state => state.setActiveContact),
-    setActiveConversation: useStore(uiManagerStore, state => state.setActiveConversation),
-    setTUIProfileShow: useStore(uiManagerStore, state => state.setTUIProfileShow),
-    setTUIManageShow: useStore(uiManagerStore, state => state.setTUIManageShow),
-  };
-}
-export {
-  useUIManagerStore,
-};
-export default uiManagerStore;

package/src/store/index.ts

@@ -1,5 +0,0 @@
-import { useUIManagerStore } from './UIManagerStore';
-
-export {
-  useUIManagerStore,
-};