@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/MessageElement/MessageContext.tsx

@@ -1,84 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-
-import { MessageAudio } from './MessageAudio';
-import { MessageCustom } from './MessageCustom';
-import { MessageFace } from './MessageFace';
-import { MessageFile } from './MessageFile';
-import { MessageImage } from './MessageImage';
-import { MessageLocation } from './MessageLocation';
-import { MessageMerger } from './MessageMerger';
-import { MessageText } from './MessageText';
-import { MessageVideo } from './MessageVideo';
-
-import { useMessageContextHandler } from './hooks';
-import { MessageStatus } from './MessageStatus';
-import { useTUIMessageContext } from '../../context';
-
-const components: any = {
-  [TencentCloudChat.TYPES.MSG_TEXT]: MessageText,
-  [TencentCloudChat.TYPES.MSG_FACE]: MessageFace,
-  [TencentCloudChat.TYPES.MSG_IMAGE]: MessageImage,
-  [TencentCloudChat.TYPES.MSG_AUDIO]: MessageAudio,
-  [TencentCloudChat.TYPES.MSG_VIDEO]: MessageVideo,
-  [TencentCloudChat.TYPES.MSG_FILE]: MessageFile,
-  [TencentCloudChat.TYPES.MSG_CUSTOM]: MessageCustom,
-  [TencentCloudChat.TYPES.MSG_MERGER]: MessageMerger,
-  [TencentCloudChat.TYPES.MSG_LOCATION]: MessageLocation,
-};
-
-export interface MessageContextProps {
-  message?: Message,
-}
-
-function MessageContextWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    message,
-  } = props;
-
-  const { context } = useMessageContextHandler({ message });
-  const {
-    CustemElement,
-    TextElement,
-    FaceElement,
-    ImageElement,
-    AudioElement,
-    VideoElement,
-    FileElement,
-    MergerElement,
-    LocationElement,
-  } = useTUIMessageContext('MessageCustom');
-
-  const CustemComponents: any = {
-    [TencentCloudChat.TYPES.MSG_TEXT]: TextElement,
-    [TencentCloudChat.TYPES.MSG_FACE]: FaceElement,
-    [TencentCloudChat.TYPES.MSG_IMAGE]: ImageElement,
-    [TencentCloudChat.TYPES.MSG_AUDIO]: AudioElement,
-    [TencentCloudChat.TYPES.MSG_VIDEO]: VideoElement,
-    [TencentCloudChat.TYPES.MSG_FILE]: FileElement,
-    [TencentCloudChat.TYPES.MSG_CUSTOM]: CustemElement,
-    [TencentCloudChat.TYPES.MSG_MERGER]: MergerElement,
-    [TencentCloudChat.TYPES.MSG_LOCATION]: LocationElement,
-  };
-
-  const Elements = message?.type && (CustemComponents[message.type] || components[message.type]);
-  return Elements
-  && (
-  <Elements context={context} message={message}>
-    <MessageStatus message={message} />
-  </Elements>
-  );
-}
-
-const MemoizedMessageContext = React.memo(MessageContextWithContext) as
-typeof MessageContextWithContext;
-
-export function MessageContext(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageContext
-      {...props}
-    />
-  );
-}

package/src/components/MessageElement/MessageCustom.tsx

@@ -1,85 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { JSONStringToParse } from '../utils';
-import { isCallMessage } from './utils';
-import type { MessageContextProps } from './MessageText';
-import { useComponentContext, useTUIChatActionContext } from '../../context';
-import { useUIManagerStore } from '../../store';
-import { CallMessage } from '@tencentcloud/call-uikit-react';
-import { startCall } from '../Chat/utils';
-
-function MessageCustomWithContext<T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-  const { t } = useUIKit();
-  const { callButtonClicked } = useTUIChatActionContext('TUIChat');
-  const { MessageCustomPlugins } = useComponentContext('MessageCustom');
-  const { conversation } = useUIManagerStore('MessageCustom');
-  const handleContext = (data: any) => {
-    if (data.data === 'Hyperlink') {
-      const extension = JSONStringToParse(data?.extension);
-      if (extension?.item) {
-        return extension?.item.map((item: any) => <a target="_blank" key={item.value} href={item.value} rel="noreferrer">{item.value}</a>);
-      }
-      if (extension?.hyperlinks_text) {
-        const hyperlinks = extension.hyperlinks_text;
-        return (
-          <>
-            {extension.title}
-            {' '}
-            <a target="_blank" key={hyperlinks?.value} href={hyperlinks?.value} rel="noreferrer">{hyperlinks.key}</a>
-          </>
-        );
-      }
-    }
-    if (data.data === 'group_create') {
-      return `${message?.nick || message?.from} Create a group`;
-    }
-    const botMessage = JSONStringToParse(data.data);
-    if (botMessage?.chatbotPlugin === 1 && botMessage?.src === 15 && (botMessage?.subtype === 'welcome_msg' || botMessage?.subtype === 'clarify_msg')) {
-      return (
-        // eslint-disable-next-line
-        // @ts-ignore
-        <MessageCustomPlugins data={JSONStringToParse(data.data).content} />
-      );
-    }
-
-    if (conversation?.type === 'C2C' && message && isCallMessage(message)) {
-      const callType = conversation?.type;
-      const userID = conversation?.userProfile.userID;
-      return (
-        <CallMessage
-          callType={callType}
-          message={message}
-          onClick={({ callMediaType }: any) =>
-            startCall({ callType, callMediaType, userIDList: [userID], callButtonClicked })}
-        >
-        </CallMessage>
-      );
-    }
-
-    return `[${t('TUIChat.Custom message')}]`;
-  };
-
-  return (
-    <div className={`bubble message-custom bubble-${message?.flow}  ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
-      {handleContext(context?.custom)}
-      {children}
-    </div>
-  );
-}
-
-const MemoizedMessageCustom = React.memo(MessageCustomWithContext) as
-typeof MessageCustomWithContext;
-
-export function MessageCustom(props: MessageContextProps): React.ReactElement {
-  return (
-    <MemoizedMessageCustom {...props} />
-  );
-}

package/src/components/MessageElement/MessageDefault.tsx

@@ -1,104 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import type { TUIMessageProps } from './Message';
-
-import { MessageBubble } from './MessageBubble';
-import { MessageTip } from './MessageTip';
-
-import './styles/index.scss';
-import { messageShowType, useComponentContext, useTUIMessageContext } from '../../context';
-import { MessageSystem } from './MessageSystem';
-import { MessageRevoke } from './MessageRevoke';
-import { MessageName } from './MessageName';
-import { MessageAvatar } from './MessageAvatar';
-
-function TUIMessageDefaultWithContext<T extends TUIMessageProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message,
-    MessageContext: propsMessageContext,
-    MessagePlugins: propsMessagePlugins,
-    className,
-  } = props;
-
-  const {
-    MessageContext: contextMessageContext,
-    MessagePlugins: contextMessagePlugins,
-  } = useComponentContext('TUIMessage');
-
-  const {
-    prefix,
-    suffix,
-    customName,
-    showAvatar = messageShowType.IN,
-    showName = messageShowType.IN,
-    customAvatar,
-  } = useTUIMessageContext('TUIMessage');
-
-  const MessageContextUIComponent = propsMessageContext || contextMessageContext;
-  const MessagePlugins = propsMessagePlugins || contextMessagePlugins;
-
-  return (
-    <div
-      className={
-        `message-default
-      ${(message?.type === TencentCloudChat.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}
-      ${className}
-      `
-      }
-    >
-      {
-        message?.type === TencentCloudChat.TYPES.MSG_GRP_TIP
-        && (<MessageTip message={message} />)
-      }
-      {
-        message?.type === TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE
-        && (<MessageSystem message={message} />)
-      }
-      {
-        message?.isRevoked
-        && (<MessageRevoke message={message} />)
-      }
-      {message?.type !== TencentCloudChat.TYPES.MSG_GRP_TIP
-      && message?.type !== TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE
-      && !message?.isRevoked
-      && (
-        <div
-          className={`${message?.flow}`}
-          key={message?.ID}
-        >
-          {prefix}
-          {message && <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />}
-          <main data-message-id={message?.ID} className="content">
-            <MessageName message={message} CustomName={customName} showType={showName} />
-            <MessageBubble
-              message={message}
-              Context={MessageContextUIComponent}
-              Plugins={MessagePlugins}
-            >
-              {/* // eslint-disable-next-line
-             // @ts-ignore */}
-              <MessageContextUIComponent message={message} />
-            </MessageBubble>
-          </main>
-          {suffix}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const MemoizedTUIMessageDefault = React.memo(TUIMessageDefaultWithContext) as
-typeof TUIMessageDefaultWithContext;
-
-export function TUIMessageDefault(props: TUIMessageProps): React.ReactElement {
-  const {
-    message,
-  } = props;
-  return (
-    <MemoizedTUIMessageDefault
-      {...props}
-    />
-  );
-}

package/src/components/MessageElement/MessageFace.tsx

@@ -1,28 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import type { MessageContextProps } from './MessageText';
-
-function MessageFaceWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  return (
-    <div className={`bubble message-face bubble-${message?.flow}`}>
-      <img className="img" src={context?.url} alt="" />
-      {children}
-    </div>
-  );
-}
-
-const MemoizedMessageFace = React.memo(MessageFaceWithContext) as
-typeof MessageFaceWithContext;
-
-export function MessageFace(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageFace {...props} />
-  );
-}

package/src/components/MessageElement/MessageFile.tsx

@@ -1,41 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { Icon, IconTypes } from '../Icon';
-import type { MessageContextProps } from './MessageText';
-
-function MessageFileWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-  return (
-    <a
-      href={context?.url}
-      download={context?.name}
-      target="_parent"
-      className={`bubble message-file bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}
-      rel="noreferrer"
-    >
-      <main className="message-file-main">
-        <Icon className="icon" width={15} height={20} type={IconTypes.FILE} />
-        <label htmlFor="message-file">{ context?.name }</label>
-      </main>
-      <div className="message-file-footer">
-        <span className="message-file-size">{ context?.size }</span>
-        {children}
-      </div>
-    </a>
-  );
-}
-
-const MemoizedMessageFile = React.memo(MessageFileWithContext) as
-typeof MessageFileWithContext;
-
-export function MessageFile(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageFile {...props} />
-  );
-}

package/src/components/MessageElement/MessageImage.tsx

@@ -1,46 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import { isH5 } from '../../utils/env';
-import { Model } from '../Model';
-import type { MessageContextProps } from './MessageText';
-
-function MessageImageWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  const [show, setShow] = useState(false);
-
-  const bigImageInfo = message?.payload?.imageInfoArray?.filter((item: any) => item.type === 0);
-
-  return (
-    <div className="message-image">
-      <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img ${isH5 ? 'img-h5' : ''} bubble-${message?.flow} 
-        ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`} 
-        src={context?.url} alt="" />
-      </div>
-      {children}
-      {
-        show && (
-        <Model onClick={() => { setShow(false); }}>
-          <img className="big-image" src={bigImageInfo[0]?.url} alt="" />
-        </Model>
-        )
-      }
-    </div>
-  );
-}
-
-const MemoizedMessageImage = React.memo(MessageImageWithContext) as
-typeof MessageImageWithContext;
-
-export function MessageImage(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageImage {...props} />
-  );
-}

package/src/components/MessageElement/MessageLocation.tsx

@@ -1,29 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import type { MessageContextProps } from './MessageText';
-
-function MessageLocationWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  return (
-    <a className="bubble message-location" href={context?.href} target="_blank" title="点击查看详情" rel="noreferrer">
-      <span>{context?.description}</span>
-      <img src={context?.url} alt="" />
-      {children}
-    </a>
-  );
-}
-
-const MemoizedMessageLocation = React.memo(MessageLocationWithContext) as
-typeof MessageLocationWithContext;
-
-export function MessageLocation(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageLocation {...props} />
-  );
-}

package/src/components/MessageElement/MessageMerger.tsx

@@ -1,38 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
-import type { MessageContextProps } from './MessageText';
-
-function MessageMergerWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  return (
-    <div className={`bubble message-merger bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
-      <h3>{context?.title}</h3>
-      <ul className="message-merger-list">
-        {
-          context?.abstractList.length > 0
-          && context?.abstractList.map((item:string, index:number) => {
-            const key = item + index;
-            return (<li className="message-merger-item" key={key}>{item}</li>);
-          })
-        }
-      </ul>
-      {children}
-    </div>
-  );
-}
-
-const MemoizedMessageMerger = React.memo(MessageMergerWithContext) as
-typeof MessageMergerWithContext;
-
-export function MessageMerger(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageMerger {...props} />
-  );
-}

package/src/components/MessageElement/MessageName.tsx

@@ -1,41 +0,0 @@
-import React, {
-  PropsWithChildren,
-} from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { MESSAGE_FLOW } from '../../constants';
-import { messageShowType } from '../../context';
-
-export interface MessageNameProps {
-  CustomName?: React.ReactElement,
-  className?: string,
-  message?: Message,
-  showType?: messageShowType,
-}
-
-export function MessageName <T extends MessageNameProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    className,
-    CustomName,
-    message,
-    showType,
-  } = props;
-
-  const show = (showType === messageShowType.ALL || message?.flow === showType)
-  && message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP;
-
-  if (!show || showType === messageShowType.NONE) {
-    return <></>;
-  }
-
-  if (CustomName) {
-    return CustomName;
-  }
-
-  return (
-    <label htmlFor="content" className="text-ellipsis name">
-      {message?.nick || message?.from}
-    </label>
-  );
-}