@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

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

@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react';
-import TencentCloudChat, { Conversation, Message } from '@tencentcloud/chat';
-import {
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
-import { MESSAGE_OPERATE } from '../../../constants';
-import { useTUIChatStateContext } from '../../../context';
-import { useUIManagerStore } from '../../../store';
-
-export function useHandleForwardMessage(msg?: Message) {
-  const {
-    operateData,
-  } = useTUIChatStateContext('TUIMessageInputDefault');
-
-  const [conversationList, setConversationList] = useState([]);
-  const { chat } = useUIManagerStore();
-
-  const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
-
-  const sendForwardMessage = (list: Conversation[]) => {
-    list.map((item: Conversation) => {
-      message && TUIChatService.sendForwardMessage([item], [message]);
-      return item;
-    });
-  };
-
-  useEffect(() => {
-    if (!chat) return;
-    (async () => {
-      const res = await chat.getConversationList();
-      setConversationList(res?.data?.conversationList.filter(
-        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
-      ));
-    })();
-  }, [chat]);
-
-  return {
-    message,
-    conversationList,
-    sendForwardMessage,
-  };
-}

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

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { MESSAGE_OPERATE } from '../../../constants';
-import { useTUIChatStateContext } from '../../../context';
-
-const quoteConfigType: any = {
-  [TencentCloudChat.TYPES.MSG_TEXT]: 1,
-  [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
-  [TencentCloudChat.TYPES.MSG_IMAGE]: 3,
-  [TencentCloudChat.TYPES.MSG_AUDIO]: 4,
-  [TencentCloudChat.TYPES.MSG_VIDEO]: 5,
-  [TencentCloudChat.TYPES.MSG_FILE]: 6,
-  [TencentCloudChat.TYPES.MSG_FACE]: 8,
-};
-
-const quoteConfigForShow: any = {
-  [TencentCloudChat.TYPES.MSG_CUSTOM]: '[custom]',
-  [TencentCloudChat.TYPES.MSG_IMAGE]: '[image]',
-  [TencentCloudChat.TYPES.MSG_AUDIO]: '[audio]',
-  [TencentCloudChat.TYPES.MSG_VIDEO]: '[video]',
-  [TencentCloudChat.TYPES.MSG_FILE]: '[file]',
-  [TencentCloudChat.TYPES.MSG_FACE]: '[face]',
-};
-
-export function useHandleQuoteMessage(msg?:Message) {
-  const {
-    operateData,
-  } = useTUIChatStateContext('TUIMessageInputDefault');
-
-  const [cloudCustomData, setCloudCustomData] = useState<any>({ messageReply: null });
-
-  const handleQuoteMessage = (message: Message) => {
-    const messageType = quoteConfigType[message?.type];
-    const messageAbstract = message?.type === TencentCloudChat.TYPES.MSG_TEXT
-      ? message?.payload?.text
-      : quoteConfigForShow[message?.type];
-
-    return {
-      messageAbstract,
-      messageSender: message?.nick || message?.from,
-      messageID: message?.ID,
-      messageType,
-      version: 1,
-    };
-  };
-
-  useEffect(
-    () => {
-      const message = msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]);
-      setCloudCustomData(
-        {
-          messageReply: message ? handleQuoteMessage(message) : null,
-        },
-      );
-    },
-    [operateData, msg],
-  );
-
-  return {
-    cloudCustomData,
-    handleQuoteMessage,
-    message: msg || (operateData &&operateData[MESSAGE_OPERATE.QUOTE]),
-  };
-}

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

@@ -1,102 +0,0 @@
-import { Dispatch, useReducer } from 'react';
-import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
-import type { TUIMessageInputProps } from '../MessageInput';
-import { useEmojiPicker } from './useEmojiPicker';
-import { useMessageInputText } from './useMessageInputText';
-import { useUploadPicker } from './useUploadPicker';
-
-export interface IbaseStateProps {
-  state: IinitState,
-  dispatch: Dispatch<MessageInputReducerAction>,
-}
-
-export interface IinitState {
-  text?: string,
-  cursorPos?: ICursorPos,
-}
-
-export interface ICursorPos {
-  start?: number | null,
-  end?: number | null,
-}
-
-export type MessageInputReducerAction =
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_TEXT;
-    getNewText: (text: string) => void,
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS;
-    value: ICursorPos
-  }
-
-const initState:IinitState = {
-  text: '',
-  cursorPos: {
-    start: 0,
-    end: 0,
-  },
-};
-
-const reducer = (state:IinitState, action: any) => {
-  switch (action.type) {
-    case CONSTANT_DISPATCH_TYPE.SET_TEXT:
-      return { ...state, text: action?.getNewText(state.text) };
-    case CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS:
-      return { ...state, cursorPos: action?.value };
-    default: return state;
-  }
-};
-
-export const useMessageInputState = (props:TUIMessageInputProps) => {
-  const [state, dispatch] = useReducer(reducer, initState);
-  const { focus, textareaRef } = props;
-
-  const {
-    sendUploadMessage,
-  } = useUploadPicker({
-    state,
-    dispatch,
-  });
-  const {
-    handleChange,
-    handleSubmit,
-    handleKeyDown,
-    handlePasete,
-    insertText,
-    setText,
-    setCursorPos,
-  } = useMessageInputText({
-    state,
-    dispatch,
-    textareaRef,
-    focus,
-    sendUploadMessage,
-  });
-
-  const {
-    onSelectEmoji,
-    sendFaceMessage,
-  } = useEmojiPicker({
-    state,
-    dispatch,
-    textareaRef,
-    insertText,
-  });
-
-  return {
-    ...state,
-    handleChange,
-    handleSubmit,
-    handleKeyDown,
-    handlePasete,
-    onSelectEmoji,
-    sendFaceMessage,
-    sendUploadMessage,
-    textareaRef,
-    insertText,
-    setText,
-    focus,
-    setCursorPos,
-  };
-};

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

@@ -1,193 +0,0 @@
-import React, {
-  useCallback,
-  ChangeEventHandler,
-  MutableRefObject,
-} from 'react';
-import {
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
-import {
-  useTUIChatActionContext,
-} from '../../../context';
-import { useUIManagerStore } from '../../../store';
-import { enableSampleTaskStatus } from '../../utils';
-import { useHandleQuoteMessage } from './useHandleQuoteMessage';
-import { transformTextWithEmojiNameToKey } from '../../MessageElement/utils/decodeText';
-import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
-import { filesData } from './useUploadPicker';
-
-interface useMessageInputTextProps extends IbaseStateProps {
-  focus?: boolean;
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
-  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void;
-}
-
-export const useMessageInputText = (props: useMessageInputTextProps) => {
-  const {
-    state,
-    dispatch,
-    focus,
-    textareaRef,
-    sendUploadMessage,
-  } = props;
-
-  const { t } = useUIKit();
-  const { chat } = useUIManagerStore();
-  const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
-
-  const { cloudCustomData } = useHandleQuoteMessage();
-
-  const enterCodeList = ['Enter', 'NumpadEnter'];
-
-  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-    (event) => {
-      event.preventDefault();
-      if (!event || !event.target) {
-        return;
-      }
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text: string) => event.target.value,
-      });
-    },
-    [chat],
-  );
-
-  const handleSubmit = async (
-    event?: React.BaseSyntheticEvent,
-  ) => {
-    event?.preventDefault();
-    if (!state.text) {
-      return;
-    }
-    const options: any = {
-      payload: {
-        text: transformTextWithEmojiNameToKey(state.text),
-      },
-    };
-    if (cloudCustomData.messageReply) {
-      options.cloudCustomData = JSON.stringify(cloudCustomData);
-    }
-    TUIChatService.sendTextMessage(options).then((res: any) => {
-      const { message } = res.data;
-      setFirstSendMessage && setFirstSendMessage(message);
-    });
-    enableSampleTaskStatus('sendMessage');
-    dispatch({
-      getNewText: (text: string) => '',
-      type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-    });
-    operateMessage && operateMessage({
-      // eslint-disable-next-line
-      // @ts-ignore
-      [MESSAGE_OPERATE.QUOTE]: null,
-    });
-  };
-
-  const handleKeyDown = useCallback(
-    (event?: React.KeyboardEvent<EventTarget>) => {
-      if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.key === 'Enter') {
-        event?.preventDefault();
-        handleSubmit(event);
-      }
-      if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.key === 'Enter') {
-        dispatch({
-          type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-          getNewText: (text: string) => `${text}\n`,
-        });
-      }
-    },
-    [handleSubmit, dispatch],
-  );
-
-  const handlePasete = useCallback(
-    async (e: React.ClipboardEvent | any) => {
-      e.preventDefault();
-      if (!(e.clipboardData && e.clipboardData.items)) {
-        return;
-      }
-      const { types, items } = e.clipboardData;
-      types.find((type: string, index: number) => {
-        const item = items[index];
-        switch (type) {
-          case 'text/plain':
-            item.getAsString((str: string) => {
-              dispatch({
-                type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-                getNewText: (text: string) => `${text}${str}`,
-              });
-            });
-            return true;
-          case 'Files': {
-            const file = item.getAsFile();
-            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
-              sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
-            }
-            return true;
-          }
-          default:
-            return false;
-        }
-      });
-    },
-    [textareaRef],
-  );
-
-  const insertText = useCallback(
-    (textToInsert: string) => {
-      const insertEmojiName = t(`Emoji.${textToInsert}`) || '';
-      const cursorStart = state.cursorPos?.start || 0;
-      const cursorEnd = state.cursorPos?.end || 0;
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text: string) => {
-          return `${text.slice(0, cursorStart)}${insertEmojiName}${text.slice(cursorStart)}`;
-        },
-      });
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
-        value: {
-          start: cursorStart + insertEmojiName.length,
-          end: cursorEnd + insertEmojiName.length,
-        },
-      });
-      textareaRef?.current?.focus({
-        preventScroll: true,
-      });
-    },
-    [textareaRef, state.cursorPos],
-  );
-
-  const setText = useCallback(
-    (textToInsert: string) => {
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: () => `${textToInsert}`,
-      });
-      textareaRef?.current?.focus();
-    },
-    [textareaRef],
-  );
-
-  const setCursorPos = useCallback(
-    (cursorPos: ICursorPos) => {
-      dispatch({
-        type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
-        value: cursorPos,
-      });
-    },
-    [textareaRef],
-  );
-
-  return {
-    handleChange,
-    handleSubmit,
-    handleKeyDown,
-    handlePasete,
-    insertText,
-    setText,
-    setCursorPos,
-  };
-};

package/src/components/MessageInput/hooks/usePluginsElement.tsx

@@ -1,24 +0,0 @@
-import React, { PropsWithChildren, useMemo } from 'react';
-import { UnknowPorps } from '../../../context';
-
-interface PluginsElementProps {
-  plugin?: Array<React.ComponentType<UnknowPorps>>,
-  showNumber?: number,
-}
-
-export function usePluginsElement <T extends PluginsElementProps>(
-  props: PropsWithChildren<T>,
-) {
-  const { plugin, showNumber = 1 } = props;
-
-  return useMemo(() => {
-    const elements = plugin?.map((Item: any, index:number) => {
-      const key = `${JSON.stringify(Item)}${index}`;
-      return (<Item key={key} />);
-    });
-    return {
-      showPicker: elements?.splice(0, showNumber),
-      elements,
-    };
-  }, [plugin]);
-}

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

@@ -1,35 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-
-interface UploadProps {
-  type?: string,
-  accept?: string,
-  onChange?: (files: HTMLInputElement | File) => void,
-}
-
-export function useUploadElement<
-  T extends UploadProps
->(props:PropsWithChildren<T>):React.ReactElement {
-  const {
-    children,
-    type,
-    accept,
-    onChange,
-  } = props;
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    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 && onChange(file);
-    }
-    e.target.value = '';
-  };
-  return (
-    <div className="upload-picker">
-      <main className="upload-picker-content">{children}</main>
-      <input title="图片" type="file" data-type={type} accept={accept} onChange={handleChange} />
-    </div>
-  );
-}

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

@@ -1,38 +0,0 @@
-import {
-  PropsWithChildren,
-  useCallback,
-} from 'react';
-import {
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
-import { MESSAGE_TYPE_NAME } from '../../../constants';
-import { enableSampleTaskStatus } from '../../utils';
-import { useTUIChatActionContext } from '../../../context';
-import type { IbaseStateProps } from './useMessageInputState';
-
-export interface filesData {
-  file: HTMLInputElement | File;
-}
-
-export function useUploadPicker<T extends IbaseStateProps>(props: PropsWithChildren<T>) {
-  const {
-    updateUploadPendingMessageList,
-  } = useTUIChatActionContext('useUploadPicker');
-
-  const creatUploadMessage: any = {
-    [MESSAGE_TYPE_NAME.IMAGE]: TUIChatService.sendImageMessage,
-    [MESSAGE_TYPE_NAME.VIDEO]: TUIChatService.sendVideoMessage,
-    [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,
-  };
-
-  const sendUploadMessage = useCallback((file: filesData, type: MESSAGE_TYPE_NAME) => {
-    creatUploadMessage[type]({
-      payload: file,
-    });
-    enableSampleTaskStatus('sendMessage');
-  }, []);
-
-  return {
-    sendUploadMessage,
-  };
-}

package/src/components/MessageInput/index.ts

@@ -1,3 +0,0 @@
-export * from './MessageInput';
-export * from './MessageInputDefault';
-export * from './InputPluginsDefalut';

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

@@ -1,40 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-message-input {
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  .tui-kit-input-box--focus {
-    @include theme() {
-      outline: 1px solid get(text-color-link);
-    }
-  }
-
-  .input-box {
-    @include theme() {
-      background-color: get(bg-color-input);
-      border: 1px solid get(stroke-color-primary);
-    }
-  }
-}
-
-.input-plugin-popup {
-  &-box {
-    border-radius: 16px;
-
-    @include theme() {
-      background-color: get(dropdown-color-default);
-      box-shadow: 0 0 10px 0 get(shadow-color);
-    }
-  }
-}
-
-.input-icon {
-  width: 20px;
-  height: 20px;
-
-  @include theme() {
-    color: get(text-color-primary);
-  }
-}

package/src/components/MessageInput/styles/index.scss

@@ -1,2 +0,0 @@
-@import "./layout.scss";
-@import "./color.scss";