@tencentcloud/chat-uikit-react 0.0.1

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -0,0 +1,149 @@
+import React, { PropsWithChildren, useRef, useState } from 'react';
+import TIM from 'tim-js-sdk';
+import './styles/index.scss';
+
+import { Plugins, PluginsProps } from '../Plugins';
+import { Icon, IconTypes } from '../Icon';
+import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
+import { useMessagePluginElement, useMessageHandler } from './hooks';
+import { MESSAGE_FLOW, MESSAGE_STATUS } from '../../constants';
+
+export function MessagePlugins <T extends PluginsProps>(
+  props:PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    plugins: propsPlugins,
+    showNumber = 0,
+    MoreIcon: propsMoreIcon,
+  } = props;
+
+  const [className, setClassName] = useState('');
+  const pluginsRef = useRef(null);
+
+  const { message } = useTUIMessageContext('MessagePlugins');
+  const { messageListRef } = useTUIChatStateContext('MessageBubbleWithContext');
+  const {
+    handleDelMessage,
+    handleRevokeMessage,
+    handleReplyMessage,
+    handleCopyMessage,
+    handleResendMessage,
+    handleForWardMessage,
+  } = useMessageHandler({ message });
+
+  const handleVisible = (data) => {
+    setClassName(`${!data.top && 'message-plugin-top'} ${!data.left && 'message-plugin-left'}`);
+  };
+
+  const RevokeElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span>Recall</span>
+        <Icon width={20} height={20} type={IconTypes.REVOCATION} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleRevokeMessage(e);
+    },
+    message,
+  });
+
+  const DeleteElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span className="del">Delete</span>
+        <Icon width={20} height={20} type={IconTypes.DEL} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleDelMessage(e);
+    },
+    message,
+  });
+
+  const ReplyElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span>Quote</span>
+        <Icon width={20} height={20} type={IconTypes.QUOTE} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleReplyMessage(e);
+    },
+    message,
+  });
+
+  const CopyElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span>Copy</span>
+        <Icon width={20} height={20} type={IconTypes.COPY} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleCopyMessage(e);
+    },
+    message,
+  });
+
+  const ResendElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span>Resend</span>
+        <Icon width={20} height={20} type={IconTypes.REPLY} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleResendMessage(e);
+    },
+    message,
+  });
+
+  const ForWardElement = useMessagePluginElement({
+    children: (
+      <div className="message-plugin-item">
+        <span>Forward</span>
+        <Icon width={20} height={20} type={IconTypes.FORWARD} />
+      </div>
+    ),
+    handle: (e) => {
+      pluginsRef.current.closeMore();
+      handleForWardMessage(e);
+    },
+    message,
+  });
+
+  let defaultPlugins = message?.status === MESSAGE_STATUS.SUCCESS
+    ? [ReplyElement, ForWardElement, DeleteElement] : [ResendElement];
+
+  if (message?.status === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT) {
+    defaultPlugins = [RevokeElement, ...defaultPlugins];
+  }
+
+  if (message.type === TIM.TYPES.MSG_TEXT) {
+    defaultPlugins.splice(-1, 0, CopyElement);
+  }
+
+  const plugins = propsPlugins || defaultPlugins;
+
+  const MoreIcon = propsMoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
+
+  return message?.status !== MESSAGE_STATUS.UNSEND && (
+  <Plugins
+    className="message-plugin"
+    customClass={className}
+    ref={pluginsRef}
+    plugins={plugins}
+    showNumber={showNumber}
+    MoreIcon={MoreIcon}
+    root={messageListRef?.current}
+    handleVisible={handleVisible}
+  />
+  );
+}

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -0,0 +1,47 @@
+import React, { PropsWithChildren, useCallback } from 'react';
+import TIM from 'tim-js-sdk';
+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 { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
+
+  const handleRevoke = useCallback(() => {
+    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>you </span>
+      }
+      <span>recalled a message</span>
+      {
+        message?.flow === MESSAGE_FLOW.OUT
+        && message?.type === TIM.TYPES.MSG_TEXT
+        && <span className="edit" role="button" tabIndex={0} onClick={handleRevoke}> 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/TUIMessage/MessageStatus.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react';
+import { Message } from 'tim-js-sdk';
+import { getTimeStamp } from '../untils';
+
+export interface MessageContextProps {
+  message?: Message,
+}
+
+function MessageStatustWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    message,
+  } = props;
+
+  const timeElement = <div className="time">{message?.time ? getTimeStamp(message.time * 1000) : 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/TUIMessage/MessageSystem.tsx

@@ -0,0 +1,30 @@
+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/TUIMessage/MessageText.tsx

@@ -0,0 +1,43 @@
+import React, { PropsWithChildren } from 'react';
+import { Message } from 'tim-js-sdk';
+import { UnknowPorps } from '../../context';
+
+export interface MessageContextProps {
+  context?: UnknowPorps,
+  message?: Message,
+  className?: string,
+}
+
+function MessageTextWithContext <T extends MessageContextProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    context,
+    message,
+    children,
+  } = props;
+
+  return (
+    <div className={`bubble message-text bubble-${message.flow}`}>
+      <div className="message-text-content">
+        {context.text.map((item, index) => {
+          const key = message.ID + index;
+          if (item.name === 'text') {
+            return item.text;
+          }
+          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):React.ReactElement {
+  return (
+    <MemoizedMessageText {...props} />
+  );
+}

package/src/components/TUIMessage/MessageTip.tsx

@@ -0,0 +1,28 @@
+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/TUIMessage/MessageVideo.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { MESSAGE_STATUS } from '../../constants';
+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);
+
+  return (
+    <div className="message-video">
+      <div className={`${message?.status === MESSAGE_STATUS.SUCCESS ? 'snap-video' : ''}`} role="button" tabIndex={0} onClick={() => { setShow(true); }}>
+        <video muted controls={false} src={context.url} />
+      </div>
+
+      {children}
+      {
+        show && (
+        <Model onClick={() => { setShow(false); }}>
+          <video className="play-video" muted 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/TUIMessage/TUIMessage.tsx

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren, ReactEventHandler } from 'react';
+import { Message } from 'tim-js-sdk';
+
+import { UnknowPorps, useComponentContext } from '../../context';
+
+import { TUIMessageContextProvider } from '../../context/TUIMessageContext';
+import { useMessageHandler } from './hooks';
+
+import './styles/index.scss';
+import { TUIMessageDefault } from './TUIMessageDefault';
+import { MessagePlugins as MessagePluginsDefault } from './MessagePlugins';
+import { MessageContext as MessageContextDefault } from './MessageContext';
+
+export interface TUIMessageProps {
+  message: Message,
+  className?: string,
+  TUIMessage?: React.ComponentType,
+  MessageContext?: React.ComponentType<UnknowPorps>,
+  MessagePlugins?: React.ComponentType<UnknowPorps>,
+  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}>,
+}
+function TUIMessageWithContext <T extends TUIMessageProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    message,
+    TUIMessage: propTUIMessage,
+    MessagePlugins: propMessagePlugins,
+    MessageContext: propMessageContext,
+    handleDelete,
+    CustemElement,
+    TextElement,
+    ImageElement,
+    VideoElement,
+    AudioElement,
+    FileElement,
+    MergerElement,
+    LocationElement,
+    FaceElement,
+  } = props;
+
+  const {
+    MessagePlugins: ContextMessagePlugins,
+    MessageContext: ContextMessageContext,
+  } = useComponentContext('TUIMessage');
+
+  const TUIMessageUIComponent = propTUIMessage || TUIMessageDefault;
+  const MessagePlugins = propMessagePlugins || ContextMessagePlugins || MessagePluginsDefault;
+  const MessageContext = propMessageContext || ContextMessageContext || MessageContextDefault;
+
+  const messageContextValue = {
+    message,
+    handleDelete,
+    CustemElement,
+    TextElement,
+    ImageElement,
+    VideoElement,
+    AudioElement,
+    FileElement,
+    MergerElement,
+    LocationElement,
+    FaceElement,
+  };
+  return (
+    <TUIMessageContextProvider value={messageContextValue}>
+      <TUIMessageUIComponent
+        message={message}
+        MessageContext={MessageContext}
+        MessagePlugins={MessagePlugins}
+      />
+    </TUIMessageContextProvider>
+  );
+}
+
+const MemoizedTUIMessage = React.memo(TUIMessageWithContext) as
+typeof TUIMessageWithContext;
+
+export function TUIMessage(props:TUIMessageProps):React.ReactElement {
+  const {
+    message,
+  } = props;
+  const { handleDelMessage } = useMessageHandler({ message });
+  return (
+    <MemoizedTUIMessage
+      handleDelete={handleDelMessage}
+      {...props}
+    />
+  );
+}

package/src/components/TUIMessage/TUIMessageDefault.tsx

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren } from 'react';
+import TIM from 'tim-js-sdk';
+import type { TUIMessageProps } from './TUIMessage';
+
+import { MessageBubble } from './MessageBubble';
+import { MessageTip } from './MessageTip';
+
+import './styles/index.scss';
+import { Avatar } from '../Avatar';
+import { useComponentContext } from '../../context';
+import { handleDisplayAvatar } from '../untils';
+import { MessageSystem } from './MessageSystem';
+import { MessageRevoke } from './MessageRevoke';
+import { MESSAGE_FLOW } from '../../constants';
+
+function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    message,
+    MessageContext: propsMessageContext,
+    MessagePlugins: propsMessagePlugins,
+  } = props;
+
+  const {
+    MessageContext: contextMessageContext,
+    MessagePlugins: contextMessagePlugins,
+  } = useComponentContext('TUIMessage');
+
+  const MessageContextUIComponent = propsMessageContext || contextMessageContext;
+  const MessagePlugins = propsMessagePlugins || contextMessagePlugins;
+
+  return (
+    <div className={`message-default ${(message?.type === TIM.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}`}>
+      {
+        message?.type === TIM.TYPES.MSG_GRP_TIP
+        && (<MessageTip message={message} />)
+      }
+      {
+        message?.type === TIM.TYPES.MSG_GRP_SYS_NOTICE
+        && (<MessageSystem message={message} />)
+      }
+      {
+        message?.isRevoked
+        && (<MessageRevoke message={message} />)
+      }
+      {message?.type !== TIM.TYPES.MSG_GRP_TIP
+      && message?.type !== TIM.TYPES.MSG_GRP_SYS_NOTICE
+      && !message?.isRevoked
+      && (
+      <div
+        className={`${message?.flow}`}
+        key={message?.ID}
+        data-message-id={message?.ID}
+      >
+        {message?.flow === MESSAGE_FLOW.IN
+                    && (
+                    <Avatar size={32} image={handleDisplayAvatar(message?.avatar)} />
+                    )}
+        <main className="content">
+          {message?.conversationType === TIM.TYPES.CONV_GROUP
+                && message?.flow === MESSAGE_FLOW.IN && (
+                <label htmlFor="content" className="name">
+                  {message?.nick || message?.from}
+                </label>
+          )}
+          <MessageBubble
+            message={message}
+            Context={MessageContextUIComponent}
+            Plugins={MessagePlugins}
+          >
+            <MessageContextUIComponent message={message} />
+          </MessageBubble>
+        </main>
+      </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/TUIMessage/hooks/index.ts

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

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

@@ -0,0 +1,70 @@
+import TIM, { Message } from 'tim-js-sdk';
+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 TIM.TYPES.MSG_TEXT:
+        context = handleTextMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_FACE:
+        context = handleFaceMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_IMAGE:
+        context = handleImageMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_AUDIO:
+        context = handleAudioMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_VIDEO:
+        context = handleVideoMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_FILE:
+        context = handleFileMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_CUSTOM:
+        context = handleCustomMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_MERGER:
+        context = handleMergerMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_LOCATION:
+        context = handleLocationMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_GRP_TIP:
+        context = handleTipMessageShowContext(message);
+        break;
+      case TIM.TYPES.MSG_GRP_SYS_NOTICE:
+        context = translateGroupSystemNotice(message);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  return {
+    context,
+    message,
+  };
+};