@tencentcloud/chat-uikit-react 0.0.2 → 1.0.0

package/src/components/TUIChatHeader/TUIChatHeader.tsx

@@ -11,6 +11,8 @@ interface TUIChatHeaderProps {
   title?: string,
   TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
   conversation?: Conversation,
+  avatar?: React.ReactElement | string,
+  headerOpateIcon?: React.ReactElement | string,
 }
 
 function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
@@ -20,6 +22,8 @@ function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
     title,
     conversation: propsConversation,
     TUIChatHeader: propTUIChatHeader,
+    avatar,
+    headerOpateIcon,
   } = props;
 
   const { conversation: contextConversation } = useTUIChatStateContext('TUIChatHeader');
@@ -33,6 +37,8 @@ function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
     <TUIChatHeaderUIComponent
       title={title}
       conversation={conversation}
+      avatar={avatar}
+      opateIcon={headerOpateIcon}
     />
   );
 }

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -9,13 +9,19 @@ import { useTUIKitContext } from '../../context';
 
 export interface TUIChatHeaderDefaultProps {
   title?: string,
-  avatar?: string,
+  avatar?: React.ReactElement | string,
   isOnline?: boolean,
   conversation?: Conversation,
   pluginComponentList?: Array<React.ComponentType>,
+
+}
+
+export interface TUIChatHeaderBasicProps extends TUIChatHeaderDefaultProps {
+  isLive?: boolean,
+  opateIcon?: React.ReactElement | string,
 }
 
-function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
+function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
   props: PropsWithChildren<T>,
 ):React.ReactElement {
   const {
@@ -23,14 +29,18 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
     avatar: propAvatar,
     isOnline,
     conversation,
+    isLive,
+    opateIcon,
   } = props;
 
   const [title, setTitle] = useState('');
-  const [avatar, setAvatar] = useState('');
+  const [avatar, setAvatar] = useState<React.ReactElement | string>('');
 
   useEffect(() => {
     setTitle(propTitle);
-    setAvatar(propAvatar);
+    if (propAvatar) {
+      setAvatar(propAvatar);
+    }
     switch (conversation?.type) {
       case TIM.TYPES.CONV_C2C:
         handleC2C(conversation.userProfile);
@@ -51,8 +61,8 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
     if (!title) {
       setTitle(userProfile?.nick || userProfile?.userID);
     }
-    if (!avatar) {
-      setAvatar(handleDisplayAvatar(userProfile.avatar));
+    if (!propAvatar) {
+      setAvatar(<Avatar size={32} image={handleDisplayAvatar(userProfile.avatar)} />);
     }
   };
 
@@ -60,8 +70,11 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
     if (!title) {
       setTitle(groupProfile?.name || groupProfile?.groupID);
     }
-    if (!avatar) {
-      setAvatar(handleDisplayAvatar(groupProfile.avatar, TIM.TYPES.CONV_GROUP));
+    if (!propAvatar) {
+      setAvatar(<Avatar
+        size={32}
+        image={handleDisplayAvatar(groupProfile.avatar, TIM.TYPES.CONV_GROUP)}
+      />);
     }
   };
   const { setTUIManageShow } = useTUIKitContext();
@@ -70,16 +83,23 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
   };
 
   return (
-    <header className="tui-chat-header" key={conversation?.conversationID}>
-      <div className={`tui-chat-header-left ${conversation?.type === TIM.TYPES.CONV_SYSTEM ? 'system' : ''}`}>
-        {conversation?.type !== TIM.TYPES.CONV_SYSTEM && <Avatar size={32} image={avatar} />}
-        <div className="header-content">
-          <h3 className="title">{title}</h3>
-        </div>
+    <header
+      className={`tui-chat-header ${isLive ? 'tui-chat-live-header' : ''}`}
+      key={conversation?.conversationID}
+    >
+      <div
+        className={`tui-chat-header-left ${conversation?.type === TIM.TYPES.CONV_SYSTEM ? 'system' : ''}`}
+      >
+        {conversation?.type !== TIM.TYPES.CONV_SYSTEM && avatar}
+      </div>
+      <div className="header-content">
+        <h3 className="title">{title}</h3>
       </div>
       <div className="tui-chat-header-right">
         <div className="header-handle">
-          <Icon className="header-handle-more" onClick={openTUIManage} type={IconTypes.ELLIPSE} width={18} height={5} />
+          {
+            opateIcon || <Icon className="header-handle-more" onClick={openTUIManage} type={IconTypes.ELLIPSE} width={18} height={5} />
+          }
         </div>
       </div>
 
@@ -90,7 +110,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderDefaultProps>(
 const MemoizedTUIChatHeaderDefault = React.memo(TUIChatHeaderDefaultWithContext) as
 typeof TUIChatHeaderDefaultWithContext;
 
-export function TUIChatHeaderDefault(props: TUIChatHeaderDefaultProps)
+export function TUIChatHeaderDefault(props: TUIChatHeaderBasicProps)
 :React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIChatHeaderDefault {...options} />;

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

@@ -1,3 +0,0 @@
-.tui-chat-header {
-  background: #FFFFFF;
-}

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

@@ -7,10 +7,10 @@
   &-left {
     display: flex;
     align-items: center;
-    .header-content {
-      padding: 0 8px;
-    }
-
+  }
+  .header-content {
+    flex: 1;
+    padding: 0 8px;
   }
   &-right {
     .header-handle {
@@ -30,3 +30,7 @@
     height: 32px;
   }
 }
+
+.tui-chat-live-header {
+
+}

package/src/components/TUIKit/TUIKit.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { ChatSDK } from 'tim-js-sdk';
+import { ChatSDK, Conversation } from 'tim-js-sdk';
 import { useTUIKit } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
@@ -9,15 +9,18 @@ import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
 
 export interface ChatProps {
-    tim?: ChatSDK | null,
-    customClasses?: unknown
+  tim?: ChatSDK | null,
+  customClasses?: unknown,
+  activeConversation?: Conversation,
 }
 export function TUIKit<
   T extends ChatProps
   >(
   props:PropsWithChildren<T>,
 ):React.ReactElement {
-  const { children, tim, customClasses } = props;
+  const {
+    children, tim, customClasses, activeConversation,
+  } = props;
   (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
   const {
     conversation,
@@ -27,7 +30,7 @@ export function TUIKit<
     setTUIManageShow,
     TUIProfileShow,
     setTUIProfileShow,
-  } = useTUIKit({ tim });
+  } = useTUIKit({ tim, activeConversation });
   const chatContextValue = useCreateTUIKitContext({
     tim,
     conversation,

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -2,10 +2,11 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { ChatSDK, Conversation, Profile } from 'tim-js-sdk';
 
 export interface UseChatParams{
-  tim: ChatSDK
+  tim: ChatSDK,
+  activeConversation?: Conversation,
 }
-export const useTUIKit = ({ tim }:UseChatParams) => {
-  const [conversation, setConversation] = useState<Conversation>();
+export const useTUIKit = ({ tim, activeConversation: paramsActiveConversation }:UseChatParams) => {
+  const [conversation, setConversation] = useState<Conversation>(paramsActiveConversation);
   const [myProfile, setMyProfile] = useState<Profile>();
   const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
   const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
@@ -28,6 +29,9 @@ export const useTUIKit = ({ tim }:UseChatParams) => {
     },
     [tim],
   );
+  useEffect(() => {
+    setConversation(paramsActiveConversation);
+  }, [paramsActiveConversation]);
   return {
     conversation,
     setActiveConversation,

package/src/components/TUIKit/styles/reset.scss

@@ -18,6 +18,10 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
+a,a:link,a:visited,a:hover,a:active{
+  text-decoration: none;
+  color:inherit;
+}
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {

package/src/components/TUIMessage/MessageAudio.tsx

@@ -1,4 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import React, {
+  PropsWithChildren, useCallback, useEffect, useRef, useState,
+} from 'react';
+import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
+import { Icon, IconTypes } from '../Icon';
 import type { MessageContextProps } from './MessageText';
 
 function MessageAudioWithContext <T extends MessageContextProps>(
@@ -10,9 +14,64 @@ function MessageAudioWithContext <T extends MessageContextProps>(
     children,
   } = props;
 
+  const { setAudioSource } = useTUIChatActionContext('MessageAudioWithContext');
+  const { audioSource } = useTUIChatStateContext('MessageAudioWithContext');
+  const [currentTime, setCurrentTime] = useState(0);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [playClassName, setPlayClassName] = useState(false);
+
+  const play = useCallback(() => {
+    if (audioSource && audioSource !== audioRef?.current) {
+      audioSource.pause();
+      audioSource.currentTime = 0;
+      setAudioSource(null);
+    }
+    if (audioRef?.current) {
+      if (!audioRef.current.paused) {
+        audioRef.current.pause();
+        endFunction();
+      } else {
+        audioRef.current.play();
+        setPlayClassName(true);
+        setAudioSource(audioRef.current);
+      }
+    }
+  }, [audioRef, audioSource]);
+
+  const pauseFunction = () => {
+    setPlayClassName(false);
+  };
+  const endFunction = () => {
+    setAudioSource(null);
+    audioRef.current.currentTime = 0;
+    pauseFunction();
+  };
+
+  useEffect(() => {
+    if (audioRef?.current) {
+      audioRef.current.addEventListener('pause', pauseFunction);
+      audioRef.current.addEventListener('ended', endFunction);
+      audioRef.current.addEventListener('canplay', () => {
+        setCurrentTime(parseInt(`${audioRef.current.duration}`, 10));
+      });
+    }
+    return () => {
+      if (audioRef?.current) {
+        audioRef.current.removeEventListener('pause', pauseFunction);
+        audioRef.current.removeEventListener('ended', endFunction);
+      }
+    };
+  }, [audioRef]);
+
   return (
     <div className="message-audio">
-      <audio muted src={context.url} />
+      <div className={`message-audio-content message-audio-${message.flow}`}>
+        <Icon className={`${message?.flow} ${playClassName ? 'playing' : ''}`} type={IconTypes.VOICE} width={16} height={16} onClick={play} />
+        <span>{`${currentTime}s`}</span>
+      </div>
+      <audio src={context?.url} ref={audioRef} controls className="message-audio-none">
+        <track kind="captions" />
+      </audio>
       {children}
     </div>
   );

package/src/components/TUIMessage/MessageAvatar.tsx

@@ -0,0 +1,38 @@
+import React, {
+  PropsWithChildren,
+} from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+import { MESSAGE_FLOW } from '../../constants';
+import { messageShowType } from '../../context';
+import { Avatar } from '../Avatar';
+import { handleDisplayAvatar } from '../untils';
+
+export interface MessageAvatarProps {
+  CustomAvatar?: React.ReactElement,
+  className?: string,
+  message?: Message,
+  showType?: messageShowType,
+}
+
+export function MessageAvatar <T extends MessageAvatarProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    className,
+    CustomAvatar,
+    message,
+    showType,
+  } = props;
+
+  const show = showType === messageShowType.ALL || message?.flow === showType;
+
+  if (!show || showType === messageShowType.NONE) {
+    return null;
+  }
+
+  if (CustomAvatar) {
+    return CustomAvatar;
+  }
+
+  return (<Avatar size={32} image={handleDisplayAvatar(message?.avatar)} />);
+}

package/src/components/TUIMessage/MessageBubble.tsx

@@ -5,15 +5,17 @@ import React, {
 } from 'react';
 import TIM, { Message } from 'tim-js-sdk';
 import { MESSAGE_STATUS } from '../../constants';
+import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { useMessageReply } from './hooks/useMessageReply';
+import { MessageProgress } from './MessageProgress';
 
 export interface MessageBubbleProps {
   message?: Message,
   className?: string,
   children?: ReactNode,
   Context?: React.ComponentType<any>,
-  Plugins?: React.ComponentType<any>,
+  Plugins?: React.ComponentType<any> | undefined,
 }
 
 function MessageBubbleWithContext <T extends MessageBubbleProps>(
@@ -34,6 +36,8 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     sender,
   } = useMessageReply({ message });
 
+  const { setHighlightedMessageId } = useTUIChatActionContext('MessageBubbleWithContext');
+
   const handleLoading = () => !!((
     message?.type === TIM.TYPES.MSG_IMAGE
     || message?.type === TIM.TYPES.MSG_VIDEO
@@ -47,6 +51,10 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
     setPluginsShow(false);
   };
 
+  const handleReplyMessage = () => {
+    setHighlightedMessageId(replyMessage?.ID);
+  };
+
   return (
     <div className="meesage-bubble">
       <div
@@ -63,17 +71,27 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         >
           {
             messageReply && (
-            <main className="meesage-bubble-reply-main">
+            <div
+              className="meesage-bubble-reply-main"
+              role="menuitem"
+              tabIndex={0}
+              onClick={handleReplyMessage}
+            >
               <header className="title">{sender}</header>
               {Context && <Context message={replyMessage} />}
-            </main>
+            </div>
             )
           }
           {children}
+          <MessageProgress message={message} />
         </div>
-        <div className="message-plugin">
-          {PluginsShow && Plugins && <Plugins />}
-        </div>
+        {
+          Plugins && (
+          <div className="message-plugin">
+            {PluginsShow && <Plugins />}
+          </div>
+          )
+        }
       </div>
       <div className="message-bubble-status icon">
         {

package/src/components/TUIMessage/MessageContext.tsx

@@ -64,9 +64,12 @@ function MessageContextWithContext <T extends MessageContextProps>(
   };
 
   const Elements = CustemComponents[message?.type] || components[message?.type];
-
   return Elements
-  && <Elements context={context} message={message}><MessageStatus message={message} /></Elements>;
+  && (
+  <Elements context={context} message={message}>
+    <MessageStatus message={message} />
+  </Elements>
+  );
 }
 
 const MemoizedMessageContext = React.memo(MessageContextWithContext) as

package/src/components/TUIMessage/MessageCustom.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import TIM from 'tim-js-sdk';
 import { JSONStringToParse } from '../untils';
 import type { MessageContextProps } from './MessageText';
 
@@ -23,7 +24,7 @@ function MessageCustomWithContext <T extends MessageContextProps>(
   };
 
   return (
-    <div className={`bubble message-custom bubble-${message.flow}`}>
+    <div className={`bubble message-custom bubble-${message.flow}  ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}>
       {handleContext(context?.custom)}
       {children}
     </div>

package/src/components/TUIMessage/MessageFile.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import TIM from 'tim-js-sdk';
 import { Icon, IconTypes } from '../Icon';
 import type { MessageContextProps } from './MessageText';
 
@@ -10,9 +11,14 @@ function MessageFileWithContext <T extends MessageContextProps>(
     message,
     children,
   } = props;
-
   return (
-    <div className={`bubble message-file bubble-${message.flow}`}>
+    <a
+      href={context.url}
+      download={context.name}
+      target="_parent"
+      className={`bubble message-file bubble-${message.flow} ${message?.conversationType === TIM.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>
@@ -21,7 +27,7 @@ function MessageFileWithContext <T extends MessageContextProps>(
         <span className="message-file-size">{ context.size }</span>
         {children}
       </div>
-    </div>
+    </a>
   );
 }
 

package/src/components/TUIMessage/MessageImage.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useState } from 'react';
+import TIM from 'tim-js-sdk';
 import { Model } from '../Model';
 import type { MessageContextProps } from './MessageText';
 
@@ -18,7 +19,7 @@ function MessageImageWithContext <T extends MessageContextProps>(
   return (
     <div className="message-image">
       <div role="button" tabIndex={0} onClick={() => { setShow(true); }}>
-        <img className={`img bubble-${message.flow}`} src={context.url} alt="" />
+        <img className={`img bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`} src={context.url} alt="" />
       </div>
       {children}
       {

package/src/components/TUIMessage/MessageMerger.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import TIM from 'tim-js-sdk';
 import type { MessageContextProps } from './MessageText';
 
 function MessageMergerWithContext <T extends MessageContextProps>(
@@ -11,7 +12,7 @@ function MessageMergerWithContext <T extends MessageContextProps>(
   } = props;
 
   return (
-    <div className={`bubble message-merger bubble-${message.flow}`}>
+    <div className={`bubble message-merger bubble-${message.flow} ${message?.conversationType === TIM.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <h3>{context.title}</h3>
       <ul className="message-merger-list">
         {

package/src/components/TUIMessage/MessageName.tsx

@@ -0,0 +1,41 @@
+import React, {
+  PropsWithChildren,
+} from 'react';
+import TIM, { Message } from 'tim-js-sdk';
+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 === TIM.TYPES.CONV_GROUP;
+
+  if (!show || showType === messageShowType.NONE) {
+    return null;
+  }
+
+  if (CustomName) {
+    return CustomName;
+  }
+
+  return (
+    <label htmlFor="content" className="name">
+      {message?.nick || message?.from}
+    </label>
+  );
+}