@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/components/MessageElement/MessagePlugins.tsx

@@ -1,230 +0,0 @@
-import React, { PropsWithChildren, useRef, useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import TencentCloudChat from '@tencentcloud/chat';
-import './styles/index.scss';
-
-import { Plugins, PluginsProps } from '../Plugins';
-import { IPluginsRef } from '../Plugins';
-import { Icon, IconTypes } from '../Icon';
-import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
-import { useMessagePluginElement, useMessageHandler } from './hooks';
-import { MESSAGE_FLOW, MESSAGE_STATUS } from '../../constants';
-
-enum PluginsNameEnum {
-  quote = 'quote',
-  forward = 'forward',
-  copy = 'copy',
-  delete = 'delete',
-  resend = 'resend',
-  revoke = 'revoke',
-}
-export type MessagePluginConfigProps = {
-  [propsName in PluginsNameEnum]?: {
-    isShow?: boolean;
-    relateMessageType?: TencentCloudChat.TYPES[];
-  };
-};
-
-export interface MessagePluginsProps extends PluginsProps {
-  config?: MessagePluginConfigProps;
-}
-
-export function MessagePlugins<T extends MessagePluginsProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    plugins: propsPlugins,
-    showNumber: propsShowNumber,
-    MoreIcon: propsMoreIcon,
-    config: propsPluginConfig,
-  } = props;
-
-  const { t } = useUIKit();
-  const [className, setClassName] = useState('');
-  const [popStyle, setPopStyle] = useState({});
-  const pluginsRef = useRef<IPluginsRef>();
-
-  const { message, plugin: contextPlugin } = useTUIMessageContext('MessagePlugins');
-  const { messageListRef } = useTUIChatStateContext('MessageBubbleWithContext');
-  const {
-    handleDelMessage,
-    handleRevokeMessage,
-    handleReplyMessage,
-    handleCopyMessage,
-    handleResendMessage,
-    handleForWardMessage,
-  } = useMessageHandler({ message });
-
-  const pluginConfig = {
-    quote: {
-      isShow: true,
-      ...propsPluginConfig?.quote,
-      ...contextPlugin?.config?.quote,
-    },
-    forward: {
-      isShow: true,
-      ...propsPluginConfig?.forward,
-      ...contextPlugin?.config?.forward,
-    },
-    copy: {
-      isShow: true,
-      relateMessageType: [TencentCloudChat.TYPES.MSG_TEXT],
-      ...propsPluginConfig?.copy,
-      ...contextPlugin?.config?.copy,
-    },
-    delete: {
-      isShow: true,
-      ...propsPluginConfig?.delete,
-      ...contextPlugin?.config?.delete,
-    },
-    revoke: {
-      isShow: true,
-      ...propsPluginConfig?.revoke,
-      ...contextPlugin?.config?.revoke,
-    },
-    resend: {
-      isShow: true,
-      ...propsPluginConfig?.resend,
-      ...contextPlugin?.config?.resend,
-    },
-  };
-
-  const handleVisible = (data: any) => {
-    if (data.x && data.y) {
-      const isTop = data.y < data.height ? true : data.top;
-      const isLeft = data.x < data.width ? true : data.left;
-      setPopStyle({
-        position: 'fixed',
-        left: `${isLeft ? data.x : (data.x - data.width)}px`,
-        top: `${isTop ? data.y : (data.y - data.height)}px`,
-      });
-    }
-  };
-
-  const RevokeElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span>{t('TUIChat.Recall')}</span>
-        <Icon width={20} height={20} type={IconTypes.REVOCATION} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleRevokeMessage(e);
-    },
-    message,
-    isShow: pluginConfig.revoke.isShow
-      && (message?.status === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT),
-    relateMessageType: pluginConfig.revoke.relateMessageType,
-  });
-
-  const DeleteElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span className="del">{t('TUIChat.Delete')}</span>
-        <Icon width={20} height={20} type={IconTypes.DEL} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleDelMessage(e);
-    },
-    message,
-    isShow: pluginConfig.delete.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
-    relateMessageType: pluginConfig.delete.relateMessageType,
-  });
-
-  const ReplyElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span>{t('TUIChat.Reference')}</span>
-        <Icon width={20} height={20} type={IconTypes.QUOTE} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleReplyMessage(e);
-    },
-    message,
-    isShow: pluginConfig.quote.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
-    relateMessageType: pluginConfig.quote.relateMessageType,
-  });
-
-  const CopyElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span>{t('TUIChat.Copy')}</span>
-        <Icon width={20} height={20} type={IconTypes.COPY} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleCopyMessage(e);
-    },
-    message,
-    isShow: pluginConfig.copy.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
-    relateMessageType: pluginConfig.copy.relateMessageType,
-  });
-
-  const ResendElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span>{t('TUIChat.Resend')}</span>
-        <Icon width={20} height={20} type={IconTypes.REPLY} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleResendMessage();
-    },
-    message,
-    isShow: pluginConfig.resend.isShow && message?.status !== MESSAGE_STATUS.SUCCESS,
-    relateMessageType: pluginConfig.resend.relateMessageType,
-  });
-
-  const ForWardElement = useMessagePluginElement({
-    children: (
-      <div className="message-plugin-item">
-        <span>{t('TUIChat.Forward')}</span>
-        <Icon width={20} height={20} type={IconTypes.FORWARD} />
-      </div>
-    ),
-    handle: (e) => {
-      pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-      handleForWardMessage(e);
-    },
-    message,
-    isShow: pluginConfig.forward.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
-    relateMessageType: pluginConfig.forward.relateMessageType,
-  });
-
-  const defaultPlugins = [
-    RevokeElement,
-    ReplyElement,
-    ForWardElement,
-    DeleteElement,
-    ResendElement,
-    CopyElement,
-  ];
-
-  const plugins = (propsPlugins || contextPlugin?.plugins || defaultPlugins).filter(item => item);
-
-  const MoreIcon = propsMoreIcon || contextPlugin?.MoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
-
-  const showNumber = propsShowNumber || contextPlugin?.showNumber || 0;
-  // eslint-disable-next-line
-  // @ts-ignore
-  return message?.status !== MESSAGE_STATUS.UNSEND && (
-    <Plugins
-      className="message-plugin"
-      customClass={className}
-      style={popStyle}
-      ref={pluginsRef}
-      plugins={plugins}
-      showNumber={showNumber}
-      MoreIcon={MoreIcon}
-      root={messageListRef?.current}
-      handleVisible={handleVisible}
-    />
-  );
-}

package/src/components/MessageElement/MessageProgress.tsx

@@ -1,89 +0,0 @@
-import React, {
-  PropsWithChildren,
-  useEffect,
-  useState,
-} from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { MESSAGE_STATUS } from '../../constants';
-import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
-
-export interface MessageProgressProps {
-  message?: Message,
-  className?: string,
-  Progress?: React.ComponentType<{message: Message}>,
-  isShow?: boolean,
-}
-
-interface MessageProgressItem extends Message {
-  progress?: number,
-}
-
-function MessageProgressWithContext <T extends MessageProgressProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    message,
-    children,
-    Progress: propsProgress,
-    isShow: propsIsShow = false,
-  } = props;
-
-  const [progressMessage, setProgressMessage] = useState<Message>();
-  const [progress, setProgress] = useState<number>(0);
-
-  const { uploadPendingMessageList } = useTUIChatStateContext('MessageProgressWithContext');
-  const { isShowProgress: contextIsShow = false, Progress: contextProgress } = useTUIMessageContext('MessageProgressWithContext');
-
-  const Progress = propsProgress || contextProgress;
-  const isShow = propsIsShow || contextIsShow;
-
-  const handleLoading = () => !!((
-    message?.type === TencentCloudChat.TYPES.MSG_IMAGE
-    || message?.type === TencentCloudChat.TYPES.MSG_VIDEO
-    || message?.type === TencentCloudChat.TYPES.MSG_FILE
-  ) && message?.status === MESSAGE_STATUS.UNSEND);
-
-  useEffect(() => {
-    if (uploadPendingMessageList && uploadPendingMessageList.length > 0) {
-      uploadPendingMessageList.map((item:MessageProgressItem) => {
-        if (item?.ID === message?.ID) {
-          setProgressMessage(item);
-          item?.progress && setProgress(item.progress);
-        }
-        return item;
-      });
-    }
-  }, [uploadPendingMessageList]);
-
-  if (!isShow) {
-    return <></>;
-  }
-
-  if (Progress && progressMessage) {
-    return <Progress message={progressMessage} />;
-  }
-  // eslint-disable-next-line
-  // @ts-ignore
-  return handleLoading() && (
-    <div className="progress-box">
-      <span
-        className="progress"
-        style={
-        {
-          width: `${progress * 100}%`,
-        }
-      }
-      />
-      {children}
-    </div>
-  );
-}
-
-const MemoizedMessageProgress = React.memo(MessageProgressWithContext) as
-typeof MessageProgressWithContext;
-
-export function MessageProgress(props:MessageProgressProps):React.ReactElement {
-  return (
-    <MemoizedMessageProgress {...props} />
-  );
-}

package/src/components/MessageElement/MessageRevoke.tsx

@@ -1,48 +0,0 @@
-import React, { PropsWithChildren, useCallback } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../constants';
-import { useTUIChatActionContext } from '../../context';
-import type { MessageContextProps } from './MessageText';
-
-function MessageRevokeWithContext<T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message,
-  } = props;
-  const { t } = useUIKit();
-  const { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
-
-  const handleRevoke = useCallback(() => {
-    operateMessage && message && operateMessage({
-      [MESSAGE_OPERATE.REVOKE]: message,
-    });
-  }, [operateMessage]);
-
-  return (
-    <div className="bubble message-system message-revoke">
-      {
-        message?.flow === MESSAGE_FLOW.IN && <span>{message?.nick || message?.from}</span>
-      }
-      {
-        message?.flow !== MESSAGE_FLOW.IN && <span style={{ marginRight: '5px' }}>{t('TUIChat.You')}</span>
-      }
-      <span style={{ marginRight: '5px' }}>{t('TUIChat.recalled a message')}</span>
-      {
-        message?.flow === MESSAGE_FLOW.OUT
-        && message?.type === TencentCloudChat.TYPES.MSG_TEXT
-        && <span className="edit" role="button" tabIndex={0} onClick={handleRevoke}>{t('TUIChat.Re-edit')}</span>
-      }
-    </div>
-  );
-}
-
-const MemoizedMessageRevoke = React.memo(MessageRevokeWithContext) as
-typeof MessageRevokeWithContext;
-
-export function MessageRevoke(props: MessageContextProps): React.ReactElement {
-  return (
-    <MemoizedMessageRevoke {...props} />
-  );
-}

package/src/components/MessageElement/MessageStatus.tsx

@@ -1,40 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { Message } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { useTUIMessageContext } from '../../context';
-import { getTimeStamp } from '../utils';
-
-export interface MessageContextProps {
-  message?: Message;
-}
-
-function MessageStatustWithContext<T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message,
-  } = props;
-  const { language } = useUIKit('TUIChat');
-  const {
-    isShowTime,
-  } = useTUIMessageContext('MessageStatustWithContext');
-
-  const timeElement = (typeof isShowTime === 'undefined' || isShowTime) && <div className="time">{message?.time ? getTimeStamp(message.time * 1000, language) : 0}</div>;
-
-  return (
-    <div className="message-status">
-      {timeElement}
-    </div>
-  );
-}
-
-const MemoizedMessageStatus = React.memo(MessageStatustWithContext) as
-typeof MessageStatustWithContext;
-
-export function MessageStatus(props: MessageContextProps): React.ReactElement {
-  return (
-    <MemoizedMessageStatus
-      {...props}
-    />
-  );
-}

package/src/components/MessageElement/MessageSystem.tsx

@@ -1,30 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { useMessageContextHandler } from './hooks';
-import type { MessageContextProps } from './MessageText';
-
-function MessageSystemWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    message,
-  } = props;
-
-  const { context } = useMessageContextHandler({ message });
-
-  return (
-    <div className="bubble message-system">
-      <div>
-        {context}
-      </div>
-    </div>
-  );
-}
-
-const MemoizedMessageSystem = React.memo(MessageSystemWithContext) as
-typeof MessageSystemWithContext;
-
-export function MessageSystem(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageSystem {...props} />
-  );
-}

package/src/components/MessageElement/MessageText.tsx

@@ -1,66 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
-
-export interface MessageContextProps {
-  context?: UnknowPorps;
-  message?: Message;
-  className?: string;
-}
-
-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' : ''}`}>
-        <MessageTextPlugins data={message} />
-      </div>
-    );
-  }
-
-  function urlToLink(text: string) {
-    if (!text) {
-      return text;
-    }
-    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 (
-    <div className={`bubble message-text bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
-      <div className="message-text-content">
-        {context?.text.map((item: any, index: number) => {
-          const key = message && message?.ID + index;
-          if (item.name === 'text') {
-            return (
-              <p
-                className="message-text-content-p"
-                key={item.src + key}
-              >
-                {item.text}
-              </p>
-            );
-          }
-          return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
-        })}
-        {children}
-      </div>
-    </div>
-  );
-}
-
-const MemoizedMessageText = React.memo(MessageTextWithContext) as typeof MessageTextWithContext;
-
-export function MessageText(props: MessageContextProps) {
-  return (
-    <MemoizedMessageText {...props} />
-  );
-}

package/src/components/MessageElement/MessageTip.tsx

@@ -1,28 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { useMessageContextHandler } from './hooks';
-import type { MessageContextProps } from './MessageText';
-
-function MessageTipWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    message,
-  } = props;
-
-  const { context } = useMessageContextHandler({ message });
-
-  return (
-    <div className="bubble message-tip">
-      {context.text}
-    </div>
-  );
-}
-
-const MemoizedMessageTip = React.memo(MessageTipWithContext) as
-typeof MessageTipWithContext;
-
-export function MessageTip(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageTip {...props} />
-  );
-}

package/src/components/MessageElement/MessageVideo.tsx

@@ -1,45 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { MESSAGE_STATUS } from '../../constants';
-import { isH5, isPC } from '../../utils/env';
-import { Model } from '../Model';
-import type { MessageContextProps } from './MessageText';
-
-function MessageVideoWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  const [show, setShow] = useState(false);
-  const transparentPosterUrl = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
-
-  return (
-    <div className={`message-video ${isH5 ? 'message-video-h5' : ''}`}>
-      <div className={`${message?.status === MESSAGE_STATUS.SUCCESS ? 'snap-video' : ''}`} role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        {isPC && (<video muted controls={false} src={context?.url} />)}
-        {isH5 && (<img src={message?.payload.snapshotUrl || transparentPosterUrl} style={{ maxHeight: '200px', maxWidth: '200px', borderRadius: '10px' }} />)}
-      </div>
-
-      {children}
-      {
-        show && (
-        <Model onClick={(e) => { e.stopPropagation(); setShow(false); }}>
-          <video className="play-video" autoPlay controls src={context?.url} />
-        </Model>
-        )
-      }
-    </div>
-  );
-}
-
-const MemoizedMessageVideo = React.memo(MessageVideoWithContext) as
-typeof MessageVideoWithContext;
-
-export function MessageVideo(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageVideo {...props} />
-  );
-}

package/src/components/MessageElement/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useMessageHandler';
-export * from './useMessageContextHandler';
-export * from './useMessagePluginElement';

package/src/components/MessageElement/hooks/useMessageContextHandler.ts

@@ -1,70 +0,0 @@
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import {
-  handleAudioMessageShowContext,
-  handleCustomMessageShowContext,
-  handleFaceMessageShowContext,
-  handleFileMessageShowContext,
-  handleImageMessageShowContext,
-  handleLocationMessageShowContext,
-  handleMergerMessageShowContext,
-  handleTextMessageShowContext,
-  handleTipMessageShowContext,
-  handleVideoMessageShowContext,
-  translateGroupSystemNotice,
-} from '../utils';
-
-interface messageContextParams {
-  message?: Message,
-}
-
-export const useMessageContextHandler = <T extends messageContextParams>(params:T) => {
-  const {
-    message,
-  } = params;
-  let context;
-  if (message) {
-    switch (message?.type) {
-      case TencentCloudChat.TYPES.MSG_TEXT:
-        context = handleTextMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_FACE:
-        context = handleFaceMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_IMAGE:
-        context = handleImageMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_AUDIO:
-        context = handleAudioMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_VIDEO:
-        context = handleVideoMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_FILE:
-        context = handleFileMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_CUSTOM:
-        context = handleCustomMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_MERGER:
-        context = handleMergerMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_LOCATION:
-        context = handleLocationMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_GRP_TIP:
-        context = handleTipMessageShowContext(message);
-        break;
-      case TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE:
-        context = translateGroupSystemNotice(message);
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  return {
-    context,
-    message,
-  };
-};