@tencentcloud/chat-uikit-react 0.0.1

package/src/constants.ts

@@ -0,0 +1,84 @@
+const constant = {
+  typeC2C: 'isC2C',
+  typeGroup: 'isGroup',
+  cancel: 'cancel',
+  group: 'GROUP',
+  handleMessage: {
+    revoke: 'revoke',
+    copy: 'copy',
+    delete: 'delete',
+    forward: 'forward',
+    reply: 'reply',
+  },
+  at: '@',
+  all: '所有人',
+  typeForward: 'forward',
+  typeMute: 'mute',
+  typeOrder: 'order',
+  typeService: 'consultion',
+  typeReply: 'quick_reply',
+  typeEvaluate: 'evaluation',
+  typeTextLink: 'text_link',
+  typeAndroid: 'android',
+  typeIphone: 'iphone',
+  typeMini: 'miniprogram',
+  TYPE_TYPING: 'user_typing_status',
+  typeInputStatusIng: 'EIMAMSG_InputStatus_Ing',
+  typeInputStatusEnd: 'EIMAMSG_InputStatus_End',
+};
+
+export enum CONSTANT_DISPATCH_TYPE {
+  RESET = 'reset',
+  SET_CONVERSATION_PRPFILE = 'setConversationProfile',
+  SET_MESSAGELIST = 'setMessageList',
+  SET_UPDATE_MESSAGE = 'setUpdateMessage',
+  SET_EDIT_MESSAGE = 'setEditMessage',
+  SET_REMOVE_MESSAGE = 'setRemoveMessage',
+  SET_HISTORY_MESSAGELIST = 'setHistoryMessageList',
+  SET_NEXT_REQ_MESSAGE_ID = 'setNextReqMessageID',
+  SET_IS_COMPLETE = 'setIsComplete',
+  SET_TEXT = 'setText',
+  SET_HIGH_LIGHTED_MESSAGE_ID ='setHightLightedMessageID',
+  OPERATE_MESSAGE = 'operateMessage',
+  SET_NO_MORE = 'setNoMore',
+  SET_CURSOR_POS = 'setCursorPos',
+}
+
+export enum MESSAGE_TYPE {
+  TEXT = 1,
+  CUSTOM = 2,
+  IMAGE = 3,
+  AUDIO = 4,
+  VIDEO = 5,
+  FILE = 6,
+  FACE = 8,
+}
+
+export enum MESSAGE_STATUS {
+  UNSEND = 'unSend',
+  SUCCESS = 'success',
+  FAIL = 'fail',
+}
+
+export enum MESSAGE_FLOW {
+  IN = 'in',
+  OUT = 'out',
+}
+
+export enum MESSAGE_TYPE_NAME {
+  TEXT = 'text',
+  CUSTOM = 'custom',
+  IMAGE = 'image',
+  AUDIO = 'audio',
+  VIDEO = 'video',
+  FILE = 'file',
+  FACE = 'face',
+}
+
+export enum MESSAGE_OPERATE {
+  REVOKE = 'revoke',
+  QUOTE = 'quote',
+  FORWARD = 'forward',
+}
+
+export default constant;

package/src/context/ComponentContext.tsx

@@ -0,0 +1,46 @@
+import React, { PropsWithChildren, useContext } from 'react';
+import { TUIChatHeaderDefaultProps } from '../components';
+import type{ EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
+import { MessageContextProps, TUIMessageProps } from '../components/TUIMessage';
+
+export interface UnknowPorps {
+  [propsName: string]: any
+}
+
+export interface ComponentContextValue {
+  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
+  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>,
+  TUIMessageInput?: React.ComponentType<UnknowPorps>,
+  MessageContext?: React.ComponentType<MessageContextProps>,
+  InputPlugins?: React.ComponentType<UnknowPorps>,
+  MessagePlugins?: React.ComponentType<UnknowPorps>,
+  InputQuote?: React.ComponentType<UnknowPorps>,
+}
+
+export const ComponentContext = React.createContext<ComponentContextValue | undefined>(undefined);
+
+export function ComponentProvider({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ComponentContextValue;
+}>) {
+  return (
+    <ComponentContext.Provider value={(value as unknown) as ComponentContextValue}>
+      {children}
+    </ComponentContext.Provider>
+  );
+}
+
+export function useComponentContext(
+  componentName?: string,
+) {
+  const contextValue = useContext(ComponentContext);
+
+  if (!contextValue) {
+    return {} as ComponentContextValue;
+  }
+
+  return contextValue as ComponentContextValue;
+}

package/src/context/TUIChatActionContext.tsx

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren, useContext } from 'react';
+import { Message } from 'tim-js-sdk';
+import type {
+  CreateFaceMessageProps,
+  CreateForwardMessageProps,
+  CreateTextMessageProps,
+  CreateUploadMessageProps,
+} from '../components/TUIChat/hooks/useCreateMessage';
+import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
+
+export interface TUIChatActionContextValue {
+  sendMessage?: (message: Message) => Promise<void>,
+  removeMessage?: (message: Message) => void,
+  updateMessage?: (messages: Array<Message>) => void,
+  createTextMessage?: (options: CreateTextMessageProps) => Message,
+  createFaceMessage?: (options: CreateFaceMessageProps) => Message,
+  createImageMessage?: (options: CreateUploadMessageProps) => Message,
+  createVideoMessage?: (options: CreateUploadMessageProps) => Message,
+  createFileMessage?: (options: CreateUploadMessageProps) => Message,
+  createForwardMessage?: (options: CreateForwardMessageProps) => Message,
+  editLocalmessage?: (message: Message) => void,
+  operateMessage?: (data?: OperateMessageParams) => void,
+  loadMore?: () => Promise<void>,
+  revokeMessage?: (message:Message) => Promise<Message>,
+}
+
+export const TUIChatActionContext = React.createContext<
+TUIChatActionContextValue | undefined>(
+  undefined,
+);
+
+export function TUIChatActionProvider({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: TUIChatActionContextValue
+}>):React.ReactElement {
+  return (
+    <TUIChatActionContext.Provider
+      value={(value as unknown) as TUIChatActionContextValue}
+    >
+      {children}
+    </TUIChatActionContext.Provider>
+  );
+}
+
+export const useTUIChatActionContext = (
+  componentName?: string,
+) => {
+  const contextValue = useContext(TUIChatActionContext);
+
+  if (!contextValue) {
+    return {} as TUIChatActionContextValue;
+  }
+
+  return (contextValue as unknown) as TUIChatActionContextValue;
+};

package/src/context/TUIChatStateContext.tsx

@@ -0,0 +1,40 @@
+import React, {
+  PropsWithChildren, useContext, MutableRefObject, RefObject,
+} from 'react';
+import { Conversation, Message } from 'tim-js-sdk';
+import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
+
+export interface TUIChatStateContextValue {
+  conversation?: Conversation,
+  messageList?: Array<Message>,
+  nextReqMessageID?: string,
+  isCompleted?: boolean,
+  init?: boolean,
+  highlightedMessageId?: string,
+  lastMessageID?:string,
+  isSameLastMessageID?: boolean,
+  messageListRef?: RefObject<HTMLDivElement>,
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  operateData?: OperateMessageParams,
+  noMore?: boolean,
+}
+
+export const TUIChatStateContext = React.createContext<TUIChatStateContextValue>(null);
+export function TUIChatStateContextProvider({ children, value }:PropsWithChildren<{
+    value: TUIChatStateContextValue
+}>):React.ReactElement {
+  return (
+    <TUIChatStateContext.Provider value={value}>
+      {children}
+    </TUIChatStateContext.Provider>
+  );
+}
+
+export function useTUIChatStateContext(componentName?:string)
+:TUIChatStateContextValue {
+  const contextValue = useContext(TUIChatStateContext);
+  if (!contextValue && componentName) {
+    return {} as TUIChatStateContextValue;
+  }
+  return (contextValue as unknown) as TUIChatStateContextValue;
+}

package/src/context/TUIConversationContext.tsx

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { TUIConversationList } from '../components';
+
+export interface TUIConversationContextValue {
+  createConversation?:(conversationID:string) => Promise<any>,
+  deleteConversation?:(conversationID:string) => Promise<any>,
+}
+
+export const TUIConversationContext = React.createContext<TUIConversationContextValue>(undefined);
+export function TUIConversationProvider({ children, value }:React.PropsWithChildren<{
+  value?: TUIConversationContextValue
+}>) {
+  return (
+    <TUIConversationContext.Provider value={value}>
+      {children || (
+        <TUIConversationList />
+      )}
+    </TUIConversationContext.Provider>
+  );
+}
+export const useTUIConversationContext = (componentName?:string) => {
+  const contextValue = useContext(TUIConversationContext);
+  if (!contextValue && componentName) {
+    return {};
+  }
+  return contextValue;
+};

package/src/context/TUIKitContext.tsx

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren, useContext } from 'react';
+import { ChatSDK, Conversation, Profile } from 'tim-js-sdk';
+
+export interface TUIKitContextValue {
+    tim: ChatSDK,
+    conversation?: Conversation,
+    setActiveConversation: (conversation?: Conversation) => void,
+    customClasses?: unknown,
+    myProfile?: Profile,
+    TUIManageShow?: boolean,
+    setTUIManageShow?: React.Dispatch<React.SetStateAction<boolean>>,
+    TUIProfileShow?: boolean,
+    setTUIProfileShow?: React.Dispatch<React.SetStateAction<boolean>>,
+}
+export const TUIKitContext = React.createContext<TUIKitContextValue | undefined>(undefined);
+export function TUIKitProvider({ children, value }:PropsWithChildren<{
+    value: TUIKitContextValue
+}>):React.ReactElement {
+  return (
+    <TUIKitContext.Provider value={(value as unknown) as TUIKitContextValue}>
+      {children}
+    </TUIKitContext.Provider>
+  );
+}
+export const useTUIKitContext = (componentName?:string):TUIKitContextValue => {
+  const contextValue = useContext(TUIKitContext);
+  if (!contextValue && componentName) {
+    return {} as TUIKitContextValue;
+  }
+  return (contextValue as unknown) as TUIKitContextValue;
+};

package/src/context/TUIMessageContext.tsx

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
+import { Message } from 'tim-js-sdk';
+
+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}>,
+}
+
+export const TUIMessageContext = React.createContext<TUIMessageContextValue>(undefined);
+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/TUIMessageInputContext.tsx

@@ -0,0 +1,56 @@
+import React, {
+  PropsWithChildren,
+  ChangeEventHandler,
+  useContext,
+  KeyboardEventHandler,
+  MutableRefObject,
+} from 'react';
+import type { ICursorPos } from '../components/TUIMessageInput/hooks';
+import type { EmojiData } from '../components/TUIMessageInput/hooks/useEmojiPicker';
+import type { filesData } from '../components/TUIMessageInput/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,
+  plugins?: Array<React.ReactElement>,
+  showNumber?: number,
+  MoreIcon?: React.ReactElement,
+  handlePasete?: (e:ClipboardEvent) => void,
+  setCursorPos?: (e:ICursorPos) => void,
+}
+
+export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>(undefined);
+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/index.ts

@@ -0,0 +1,6 @@
+export * from './TUIKitContext';
+export * from './TUIChatStateContext';
+export * from './TUIChatActionContext';
+export * from './TUIMessageContext';
+export * from './ComponentContext';
+export * from './TUIMessageInputContext';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useConversation';
+export * from './useProfile';

package/src/hooks/useConversation.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import TIM from 'tim-js-sdk';
+import { useTUIConversationContext } from '../context/TUIConversationContext';
+
+export interface CreateGroupConversationParams {
+  name: string;
+  type?: TIM.TYPES;
+  groupID?: string;
+  introduction?: string;
+  notification?: string;
+  avatar?: string;
+  maxMemberNum?: number;
+  joinOption?: string;
+  memberList?: Array<object>;
+  groupCustomField?: Array<object>;
+  isSupportTopic?: boolean;
+}
+export const useConversation = (tim) => {
+  const {
+    createConversation: contextCreateConversation,
+    deleteConversation: contextDeleteConversation,
+  } = useTUIConversationContext('useConversation');
+  const createConversation = async (
+    params: string | CreateGroupConversationParams,
+  ) => {
+    // create c2c conversation
+    if (typeof params === 'string') {
+      const { data } = await tim.getConversationProfile(params);
+      return data.conversation;
+    }
+    // create group conversation
+    const {
+      name,
+      type,
+      groupID,
+      introduction,
+      notification,
+      avatar,
+      maxMemberNum,
+      joinOption,
+      memberList = [],
+      groupCustomField = [],
+      isSupportTopic,
+    } = params;
+    const res = await tim.createGroup({
+      name,
+      type,
+      groupID,
+      introduction,
+      notification,
+      avatar,
+      maxMemberNum,
+      joinOption,
+      memberList,
+      groupCustomField,
+      isSupportTopic,
+    });
+    const { groupID: createdGroupId } = res.data.group;
+    if (type === TIM.TYPES.GRP_AVCHATROOM) {
+      await tim.joinGroup({
+        groupID: createdGroupId,
+        type: TIM.TYPES.GRP_AVCHATROOM,
+      });
+    }
+    const { data } = await tim.getConversationProfile(`GROUP${createdGroupId}`);
+    return data.conversation;
+  };
+  const pinConversation = (options: {
+    conversationID: string;
+    isPinned: boolean;
+  }) => tim.pinConversation(options);
+  const deleteConversation = (conversationID: string) => tim.deleteConversation(conversationID);
+  return {
+    createConversation: contextCreateConversation || createConversation,
+    pinConversation,
+    deleteConversation: contextDeleteConversation || deleteConversation,
+  };
+};

package/src/hooks/useProfile.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const useProfile = (tim) => {
+  const getUserProfile = (userIDList) => tim.getUserProfile({ userIDList });
+  return {
+    getUserProfile,
+  };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './context';
+export * from './hooks';

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+  },
+  "include": [
+    "src"
+  ]
+}