@tencentcloud/chat-uikit-react 0.0.2 → 1.0.0

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -8,19 +8,39 @@ import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
 import { useMessagePluginElement, useMessageHandler } from './hooks';
 import { MESSAGE_FLOW, MESSAGE_STATUS } from '../../constants';
 
-export function MessagePlugins <T extends PluginsProps>(
+enum PluginsNameEnum {
+  quote = 'quote',
+  forward = 'forward',
+  copy = 'copy',
+  delete = 'delete',
+  resend = 'resend',
+  revoke = 'revoke',
+}
+export type MessagePluginConfigProps = {
+  [propsName in PluginsNameEnum]?: {
+    isShow?: boolean;
+    relateMessageType?: TIM.TYPES[],
+  };
+};
+
+export interface MessagePluginsProps extends PluginsProps {
+  config?: MessagePluginConfigProps
+}
+
+export function MessagePlugins <T extends MessagePluginsProps>(
   props:PropsWithChildren<T>,
 ):React.ReactElement {
   const {
     plugins: propsPlugins,
-    showNumber = 0,
+    showNumber: propsShowNumber,
     MoreIcon: propsMoreIcon,
+    config: propsPluginConfig,
   } = props;
 
   const [className, setClassName] = useState('');
   const pluginsRef = useRef(null);
 
-  const { message } = useTUIMessageContext('MessagePlugins');
+  const { message, plugin: contextPlugin } = useTUIMessageContext('MessagePlugins');
   const { messageListRef } = useTUIChatStateContext('MessageBubbleWithContext');
   const {
     handleDelMessage,
@@ -31,6 +51,40 @@ export function MessagePlugins <T extends PluginsProps>(
     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: [TIM.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) => {
     setClassName(`${!data.top && 'message-plugin-top'} ${!data.left && 'message-plugin-left'}`);
   };
@@ -47,6 +101,9 @@ export function MessagePlugins <T extends PluginsProps>(
       handleRevokeMessage(e);
     },
     message,
+    isShow: pluginConfig.revoke.isShow
+    && (message?.status === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT),
+    relateMessageType: pluginConfig.revoke.relateMessageType,
   });
 
   const DeleteElement = useMessagePluginElement({
@@ -61,6 +118,8 @@ export function MessagePlugins <T extends PluginsProps>(
       handleDelMessage(e);
     },
     message,
+    isShow: pluginConfig.delete.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
+    relateMessageType: pluginConfig.delete.relateMessageType,
   });
 
   const ReplyElement = useMessagePluginElement({
@@ -75,6 +134,8 @@ export function MessagePlugins <T extends PluginsProps>(
       handleReplyMessage(e);
     },
     message,
+    isShow: pluginConfig.quote.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
+    relateMessageType: pluginConfig.quote.relateMessageType,
   });
 
   const CopyElement = useMessagePluginElement({
@@ -89,6 +150,8 @@ export function MessagePlugins <T extends PluginsProps>(
       handleCopyMessage(e);
     },
     message,
+    isShow: pluginConfig.copy.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
+    relateMessageType: pluginConfig.copy.relateMessageType,
   });
 
   const ResendElement = useMessagePluginElement({
@@ -103,6 +166,8 @@ export function MessagePlugins <T extends PluginsProps>(
       handleResendMessage(e);
     },
     message,
+    isShow: pluginConfig.resend.isShow && message?.status !== MESSAGE_STATUS.SUCCESS,
+    relateMessageType: pluginConfig.resend.relateMessageType,
   });
 
   const ForWardElement = useMessagePluginElement({
@@ -117,22 +182,24 @@ export function MessagePlugins <T extends PluginsProps>(
       handleForWardMessage(e);
     },
     message,
+    isShow: pluginConfig.forward.isShow && message?.status === MESSAGE_STATUS.SUCCESS,
+    relateMessageType: pluginConfig.forward.relateMessageType,
   });
 
-  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];
-  }
+  const defaultPlugins = [
+    RevokeElement,
+    ReplyElement,
+    ForWardElement,
+    DeleteElement,
+    ResendElement,
+    CopyElement,
+  ];
 
-  if (message.type === TIM.TYPES.MSG_TEXT) {
-    defaultPlugins.splice(-1, 0, CopyElement);
-  }
+  const plugins = (propsPlugins || contextPlugin?.plugins || defaultPlugins).filter((item) => item);
 
-  const plugins = propsPlugins || defaultPlugins;
+  const MoreIcon = propsMoreIcon || contextPlugin?.MoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
 
-  const MoreIcon = propsMoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
+  const showNumber = propsShowNumber || contextPlugin?.showNumber || 0;
 
   return message?.status !== MESSAGE_STATUS.UNSEND && (
   <Plugins

package/src/components/TUIMessage/MessageProgress.tsx

@@ -0,0 +1,88 @@
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+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 { uploadPenddingMessageList } = useTUIChatStateContext('MessageProgressWithContext');
+  const { isShowProgress: contextIsShow = false, Progress: contextProgress } = useTUIMessageContext('MessageProgressWithContext');
+
+  const Progress = propsProgress || contextProgress;
+  const isShow = propsIsShow || contextIsShow;
+
+  const handleLoading = () => !!((
+    message?.type === TIM.TYPES.MSG_IMAGE
+    || message?.type === TIM.TYPES.MSG_VIDEO
+    || message?.type === TIM.TYPES.MSG_FILE
+  ) && message?.status === MESSAGE_STATUS.UNSEND);
+
+  useEffect(() => {
+    if (uploadPenddingMessageList && uploadPenddingMessageList.length > 0) {
+      uploadPenddingMessageList.map((item:MessageProgressItem) => {
+        if (item?.ID === message?.ID) {
+          setProgressMessage(item);
+          setProgress(item?.progress);
+        }
+        return item;
+      });
+    }
+  }, [uploadPenddingMessageList]);
+
+  if (!isShow) {
+    return null;
+  }
+
+  if (Progress) {
+    return <Progress message={progressMessage} />;
+  }
+
+  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/TUIMessage/MessageRevoke.tsx

@@ -27,7 +27,7 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
       {
         message?.flow !== MESSAGE_FLOW.IN && <span>you </span>
       }
-      <span>recalled a message</span>
+      <span> recalled a message</span>
       {
         message?.flow === MESSAGE_FLOW.OUT
         && message?.type === TIM.TYPES.MSG_TEXT

package/src/components/TUIMessage/MessageStatus.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from 'tim-js-sdk';
+import { useTUIMessageContext } from '../../context';
 import { getTimeStamp } from '../untils';
 
 export interface MessageContextProps {
@@ -13,7 +14,11 @@ function MessageStatustWithContext <T extends MessageContextProps>(
     message,
   } = props;
 
-  const timeElement = <div className="time">{message?.time ? getTimeStamp(message.time * 1000) : 0}</div>;
+  const {
+    isShowTime,
+  } = useTUIMessageContext('MessageStatustWithContext');
+
+  const timeElement = (typeof isShowTime === 'undefined' || isShowTime) && <div className="time">{message?.time ? getTimeStamp(message.time * 1000) : 0}</div>;
 
   return (
     <div className="message-status">

package/src/components/TUIMessage/MessageText.tsx

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

package/src/components/TUIMessage/TUIMessage.tsx

@@ -1,18 +1,34 @@
 import React, { PropsWithChildren, ReactEventHandler } from 'react';
 import { Message } from 'tim-js-sdk';
 
-import { UnknowPorps, useComponentContext } from '../../context';
+import { UnknowPorps, useComponentContext, useTUIChatStateContext } from '../../context';
 
-import { TUIMessageContextProvider } from '../../context/TUIMessageContext';
+import { messageShowType, TUIMessageContextProvider } from '../../context/TUIMessageContext';
 import { useMessageHandler } from './hooks';
 
 import './styles/index.scss';
 import { TUIMessageDefault } from './TUIMessageDefault';
-import { MessagePlugins as MessagePluginsDefault } from './MessagePlugins';
+import { MessagePlugins as MessagePluginsDefault, MessagePluginsProps } from './MessagePlugins';
 import { MessageContext as MessageContextDefault } from './MessageContext';
 
-export interface TUIMessageProps {
-  message: Message,
+interface TUIMessageBasicProps {
+  className?: string,
+  filter?: (data:Message) => void,
+  isShowTime?: boolean,
+  isShowRead?: boolean,
+  plugin?: MessagePluginsProps,
+  prefix?: React.ReactElement | string,
+  suffix?: React.ReactElement | string,
+  customName?: React.ReactElement,
+  showAvatar?: messageShowType,
+  showName?: messageShowType,
+  customAvatar?: React.ReactElement,
+  isShowProgress?: boolean,
+  Progress?: React.ComponentType<{message: Message}>,
+}
+
+export interface TUIMessageProps extends TUIMessageBasicProps {
+  message?: Message,
   className?: string,
   TUIMessage?: React.ComponentType,
   MessageContext?: React.ComponentType<UnknowPorps>,
@@ -32,7 +48,7 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
   props: PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    message,
+    message: propsMessage,
     TUIMessage: propTUIMessage,
     MessagePlugins: propMessagePlugins,
     MessageContext: propMessageContext,
@@ -46,6 +62,19 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
     MergerElement,
     LocationElement,
     FaceElement,
+    className,
+    filter: propsFilter,
+    isShowTime,
+    isShowRead,
+    plugin,
+    prefix,
+    suffix,
+    customName,
+    showAvatar,
+    showName,
+    customAvatar,
+    isShowProgress,
+    Progress,
   } = props;
 
   const {
@@ -53,29 +82,52 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
     MessageContext: ContextMessageContext,
   } = useComponentContext('TUIMessage');
 
+  const {
+    messageConfig,
+  } = useTUIChatStateContext('TUIMessage');
+
   const TUIMessageUIComponent = propTUIMessage || TUIMessageDefault;
   const MessagePlugins = propMessagePlugins || ContextMessagePlugins || MessagePluginsDefault;
   const MessageContext = propMessageContext || ContextMessageContext || MessageContextDefault;
 
+  const filter = propsFilter || messageConfig?.filter;
+  const message = propsMessage || messageConfig?.message;
+  if (filter) {
+    filter(message);
+  }
+
   const messageContextValue = {
     message,
-    handleDelete,
-    CustemElement,
-    TextElement,
-    ImageElement,
-    VideoElement,
-    AudioElement,
-    FileElement,
-    MergerElement,
-    LocationElement,
-    FaceElement,
+    handleDelete: handleDelete || messageConfig?.handleDelete,
+    CustemElement: CustemElement || messageConfig?.CustemElement,
+    TextElement: TextElement || messageConfig?.TextElement,
+    ImageElement: ImageElement || messageConfig?.ImageElement,
+    VideoElement: VideoElement || messageConfig?.VideoElement,
+    AudioElement: AudioElement || messageConfig?.AudioElement,
+    FileElement: FileElement || messageConfig?.FileElement,
+    MergerElement: MergerElement || messageConfig?.MergerElement,
+    LocationElement: LocationElement || messageConfig?.LocationElement,
+    FaceElement: FaceElement || messageConfig?.FaceElement,
+    isShowTime: isShowTime || messageConfig?.isShowTime,
+    isShowRead: isShowRead || messageConfig?.isShowRead,
+    plugin: plugin || messageConfig?.plugin,
+    prefix: prefix || messageConfig?.prefix,
+    suffix: suffix || messageConfig?.suffix,
+    customName: customName || messageConfig?.customName,
+    showAvatar: showAvatar || messageConfig?.showAvatar,
+    showName: showName || messageConfig?.showName,
+    customAvatar: customAvatar || messageConfig?.customAvatar,
+    isShowProgress: isShowProgress || messageConfig?.isShowProgress,
+    Progress: Progress || messageConfig?.Progress,
   };
+
   return (
     <TUIMessageContextProvider value={messageContextValue}>
       <TUIMessageUIComponent
         message={message}
         MessageContext={MessageContext}
         MessagePlugins={MessagePlugins}
+        className={className || messageConfig?.className}
       />
     </TUIMessageContextProvider>
   );

package/src/components/TUIMessage/TUIMessageDefault.tsx

@@ -6,12 +6,11 @@ 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 { messageShowType, useComponentContext, useTUIMessageContext } from '../../context';
 import { MessageSystem } from './MessageSystem';
 import { MessageRevoke } from './MessageRevoke';
-import { MESSAGE_FLOW } from '../../constants';
+import { MessageName } from './MessageName';
+import { MessageAvatar } from './MessageAvatar';
 
 function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
   props: PropsWithChildren<T>,
@@ -20,6 +19,7 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
     message,
     MessageContext: propsMessageContext,
     MessagePlugins: propsMessagePlugins,
+    className,
   } = props;
 
   const {
@@ -27,11 +27,27 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
     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 === TIM.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}`}>
+    <div
+      className={
+      `message-default
+      ${(message?.type === TIM.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}
+      ${className}
+      `
+      }
+    >
       {
         message?.type === TIM.TYPES.MSG_GRP_TIP
         && (<MessageTip message={message} />)
@@ -53,17 +69,10 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
         key={message?.ID}
         data-message-id={message?.ID}
       >
-        {message?.flow === MESSAGE_FLOW.IN
-                    && (
-                    <Avatar size={32} image={handleDisplayAvatar(message?.avatar)} />
-                    )}
+        {prefix}
+        <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />
         <main className="content">
-          {message?.conversationType === TIM.TYPES.CONV_GROUP
-                && message?.flow === MESSAGE_FLOW.IN && (
-                <label htmlFor="content" className="name">
-                  {message?.nick || message?.from}
-                </label>
-          )}
+          <MessageName message={message} CustomName={customName} showType={showName} />
           <MessageBubble
             message={message}
             Context={MessageContextUIComponent}
@@ -72,6 +81,7 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
             <MessageContextUIComponent message={message} />
           </MessageBubble>
         </main>
+        {suffix}
       </div>
       )}
     </div>

package/src/components/TUIMessage/hooks/useMessagePluginElement.tsx

@@ -1,16 +1,30 @@
 import React, { PropsWithChildren } from 'react';
+import TIM, { Message } from 'tim-js-sdk';
 
 interface MessagePluginElementProps {
   handle?: (event?:React.SyntheticEvent<Element, Event>) => void,
-  children: React.ReactNode
+  children: React.ReactNode,
+  isShow?: boolean,
+  relateMessageType?: TIM.TYPES[],
+  message?: Message
 }
 export const useMessagePluginElement = <
 T extends MessagePluginElementProps>(props:PropsWithChildren<T>) => {
   const {
     children,
     handle,
+    isShow,
+    relateMessageType,
+    message,
   } = props;
 
+  const isNotRelateMessageType = relateMessageType
+  && !relateMessageType.some((item) => (item === message?.type));
+
+  if (!isShow || isNotRelateMessageType) {
+    return null;
+  }
+
   return (
     <div className="message-plugin-box" role="button" tabIndex={0} onClick={handle}>{children}</div>
   );

package/src/components/TUIMessage/styles/layout.scss

@@ -1,4 +1,6 @@
 .message-default {
+  width: 100%;
+  flex: 1;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -27,6 +29,7 @@
 }
 
 .in {
+  flex: 1;
   display: flex;
   flex-direction: row;
   justify-self: flex-start;
@@ -36,6 +39,7 @@
   }
 }
 .out {
+  flex: 1;
   display: flex;
   flex-direction: row-reverse;
   justify-self: flex-end;
@@ -45,13 +49,17 @@
   }
 }
 .tip {
-  justify-self: center;
+  justify-self: center !important;
+  width: auto;
 }
 
 .bubble {
   padding: 8px 16px;
   &-in {
     border-radius: 16px 16px 16px 0;
+    &.group {
+      border-radius: 0px 16px 16px 16px;
+    }
   }
   &-out {
     border-radius: 16px 16px 0 16px;
@@ -96,6 +104,10 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 17px;
+    &-p {
+      display: inline;
+      vertical-align: middle;
+    }
     .message-status {
       display: inline-flex;
       float: right;
@@ -104,7 +116,7 @@
   }
 }
 
-.message-text, 
+.message-text,
 .message-tip {
   font-family: PingFangSC-Regular;
   font-style: normal;
@@ -114,6 +126,7 @@
   .text-img {
     width: 20px;
     height: 20px;
+    vertical-align: middle;
   }
 }
 
@@ -261,6 +274,7 @@
   &-context {
     display: flex;
     align-items: center;
+    padding: 0 8px;
     .message-context{
       flex: 1;
     }
@@ -391,4 +405,75 @@
 
 .message-revoke {
   color: #999999;
+}
+
+.message-audio {
+  display: flex;
+  align-items: center;
+  .out {
+    transform: rotate(180deg);
+  }
+  &-none {
+    display: none;
+  }
+  &-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  &-out {
+    flex-direction: row-reverse;
+  }
+  .playing {
+    animation: playingAnimation 1s ease-in-out infinite;
+  }
+
+  @keyframes playingAnimation {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+.high-lighted {
+  animation: highLightedAnimation 1s ease-in-out forwards;
+}
+
+@keyframes highLightedAnimation {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.progress-box {
+  width: 100%;
+  height: 5px;
+  display: flex;
+  justify-content: flex-start;
+  .progress {
+    display: inline-block;
+    width: 0;
+    background: #147aff;
+    height: 5px;
+    border-radius: 2px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  }
 }