@tencentcloud/chat-uikit-react 0.0.3 → 1.0.1

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

@@ -1,4 +1,6 @@
 .message-default {
+  width: 100%;
+  flex: 1;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -15,7 +17,6 @@
     }
   }
   .content {
-    padding: 0 10px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -27,16 +28,20 @@
 }
 
 .in {
+  flex: 1;
   display: flex;
   flex-direction: row;
   justify-self: flex-start;
+  gap: 10px;
   .content {
     align-items: flex-start;
     flex: 1;
   }
 }
 .out {
+  flex: 1;
   display: flex;
+  gap: 10px;
   flex-direction: row-reverse;
   justify-self: flex-end;
   .content {
@@ -45,13 +50,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 +105,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 +117,7 @@
   }
 }
 
-.message-text, 
+.message-text,
 .message-tip {
   font-family: PingFangSC-Regular;
   font-style: normal;
@@ -114,6 +127,7 @@
   .text-img {
     width: 20px;
     height: 20px;
+    vertical-align: middle;
   }
 }
 
@@ -261,6 +275,7 @@
   &-context {
     display: flex;
     align-items: center;
+    gap: 10px;
     .message-context{
       flex: 1;
     }
@@ -387,8 +402,86 @@
     font-size: 14px;
     line-height: 17px;
   }
+  p {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 17px;
+  }
 }
 
 .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);
+  }
+}

package/src/components/TUIMessage/utils/index.ts

@@ -118,21 +118,21 @@ export function handleTipMessageShowContext(message: Message) {
   }
   switch (message.payload.operationType) {
     case TIM.TYPES.GRP_TIP_MBR_JOIN:
-      options.text = `${userName} ${t('message.tip.加入群组')}`;
+      options.text = `${userName} ${t('message.tip.Join in group')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_QUIT:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.退出群组')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.quit group')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被')}${message.payload.operatorID}${t(
-        'message.tip.踢出群组',
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')}${message.payload.operatorID}${t(
+        'message.tip.kicked out of group',
       )}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.成为管理员')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.become admin')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被撤销管理员')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by revoked administrator')}`;
       break;
     case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
       // options.text =  `${userName} 修改群组资料`;
@@ -141,15 +141,15 @@ export function handleTipMessageShowContext(message: Message) {
     case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
       message.payload.memberList.map((member:any) => {
         if (member.muteTime > 0) {
-          options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被禁言')}`;
+          options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.muted')}`;
         } else {
-          options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被取消禁言')}`;
+          options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.unmuted')}`;
         }
         return member;
       });
       break;
     default:
-      options.text = `[${t('message.tip.群提示消息')}]`;
+      options.text = `[${t('message.tip.reminder message')}]`;
       break;
   }
   return options;
@@ -164,19 +164,19 @@ function handleTipGrpUpdated(message: Message) {
   switch (name) {
     case 'muteAllMembers':
       if (newGroupProfile[name]) {
-        text = `${t('message.tip.管理员')} ${operatorID} ${t('message.tip.开启全员禁言')}`;
+        text = `${t('message.tip.admin')} ${operatorID} ${t('message.tip.enable all staff mute')}`;
       } else {
-        text = `${t('message.tip.管理员')} ${operatorID} ${t('message.tip.取消全员禁言')}`;
+        text = `${t('message.tip.admin')} ${operatorID} ${t('message.tip.unmute everyone')}`;
       }
       break;
     case 'ownerID':
-      text = `${newGroupProfile[name]} ${t('message.tip.成为新的群主')}`;
+      text = `${newGroupProfile[name]} ${t('message.tip.become the new owner')}`;
       break;
     case 'groupName':
-      text = `${operatorID} ${t('message.tip.修改群名为')} ${newGroupProfile[name]}`;
+      text = `${operatorID} ${t('message.tip.modify group name')} ${newGroupProfile[name]}`;
       break;
     case 'notification':
-      text = `${operatorID} ${t('message.tip.发布新公告')}`;
+      text = `${operatorID} ${t('message.tip.post a new announcement')}`;
       break;
     default:
       break;

package/src/components/TUIMessageInput/EmojiPicker.tsx

@@ -12,6 +12,7 @@ import type { EmojiData } from './hooks';
 export function EmojiPicker():React.ReactElement {
   const [show, setShow] = useState(false);
   const [index, setIndex] = useState(0);
+  const [className, setClassName] = useState('');
 
   const handleShow = () => {
     setShow(!show);
@@ -37,13 +38,18 @@ export function EmojiPicker():React.ReactElement {
     }
   };
 
+  const handleVisible = (data) => {
+    setClassName(`${!data.top && 'emoji-plugin-top'} ${!data.left && 'emoji-plugin-right'}`);
+  };
+
   return (
     <div className="emoji-picker input-plugin-popup">
       <Icon width={20} height={20} type={IconTypes.EMOJI} onClick={handleShow} />
       <Popup
-        className="input-plugin-popup-box"
+        className={`input-plugin-popup-box ${className}`}
         show={show}
         close={handleShow}
+        handleVisible={handleVisible}
       >
         <ul className="face-list">
           {

package/src/components/TUIMessageInput/InputPluginsDefalut.tsx

@@ -7,18 +7,60 @@ import { useUploadElement } from './hooks/useUploadElement';
 import { MESSAGE_TYPE_NAME } from '../../constants';
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
 import { Icon, IconTypes } from '../Icon';
+import { useTUIChatStateContext } from '../../context';
 
 export function InputPluginsDefalut():React.ReactElement {
   const {
     sendUploadMessage,
-    plugins: propPlugins,
-    showNumber,
-    MoreIcon,
+    pluginConfig: propsPluginConfig,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
 
+  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
+
+  const propPlugins = propsPluginConfig?.plugins
+  || TUIMessageInputConfig?.pluginConfig?.plugins || [];
+  const showNumber = propsPluginConfig?.showNumber
+  || TUIMessageInputConfig?.pluginConfig?.showNumber || 1;
+  const MoreIcon = propsPluginConfig?.MoreIcon || TUIMessageInputConfig?.pluginConfig?.MoreIcon;
+
+  const handlePluginBoolenParams = (
+    porpsVal?:boolean | undefined,
+    contextVal?:boolean | undefined,
+    defaultVal?: boolean,
+  ) => {
+    if (typeof (porpsVal) === 'boolean') {
+      return porpsVal;
+    }
+    if (typeof (contextVal) === 'boolean') {
+      return contextVal;
+    }
+    return defaultVal;
+  };
+
+  const isEmojiPicker = handlePluginBoolenParams(
+    propsPluginConfig?.isEmojiPicker,
+    TUIMessageInputConfig?.pluginConfig?.isEmojiPicker,
+    true,
+  );
+  const isImagePicker = handlePluginBoolenParams(
+    propsPluginConfig?.isImagePicker,
+    TUIMessageInputConfig?.pluginConfig?.isImagePicker,
+    true,
+  );
+  const isVideoPicker = handlePluginBoolenParams(
+    propsPluginConfig?.isVideoPicker,
+    TUIMessageInputConfig?.pluginConfig?.isVideoPicker,
+    true,
+  );
+  const isFilePicker = handlePluginBoolenParams(
+    propsPluginConfig?.isFilePicker,
+    TUIMessageInputConfig?.pluginConfig?.isFilePicker,
+    true,
+  );
+
   const pluginsRef = useRef(null);
 
-  const ImagePicker = useUploadElement({
+  const ImagePicker = isImagePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.IMAGE} />
@@ -33,7 +75,7 @@ export function InputPluginsDefalut():React.ReactElement {
     },
   });
 
-  const VideoPicker = useUploadElement({
+  const VideoPicker = isVideoPicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.VIDEO} />
@@ -48,7 +90,7 @@ export function InputPluginsDefalut():React.ReactElement {
     },
   });
 
-  const FilePicker = useUploadElement({
+  const FilePicker = isFilePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.DOCUMENT} />
@@ -62,8 +104,9 @@ export function InputPluginsDefalut():React.ReactElement {
       sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
     },
   });
-  const plugins = propPlugins
-  || [<EmojiPicker />, ImagePicker, VideoPicker, FilePicker];
+  const plugins = [
+    isEmojiPicker && <EmojiPicker />, ImagePicker, VideoPicker, FilePicker, ...propPlugins,
+  ].filter((item) => item);
 
   return <Plugins ref={pluginsRef} plugins={plugins} showNumber={showNumber} MoreIcon={MoreIcon} />;
 }

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -14,43 +14,58 @@ import { InputQuoteDefalut } from './InputQuoteDefalut';
 import { TUIMessageInputDefault } from './TUIMessageInputDefault';
 import { InputPluginsDefalut } from './InputPluginsDefalut';
 import { TUIForward } from './TUIForward';
+import { Transmitter } from './Transmitter';
 
-export interface TUIMessageInputProps {
+export interface PluginConfigProps {
+  plugins?: Array<React.ReactElement>,
+  showNumber?: number,
+  MoreIcon?: React.ReactElement,
+  isEmojiPicker?: boolean,
+  isImagePicker?: boolean,
+  isVideoPicker?: boolean,
+  isFilePicker?: boolean,
+}
+
+export interface TUIMessageInputBasicProps {
   disabled?: boolean,
+  focus?: boolean,
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  isTransmitter?: boolean,
+  className?: string,
+  pluginConfig?: PluginConfigProps,
+}
+
+export interface TUIMessageInputProps extends TUIMessageInputBasicProps {
   TUIMessageInput?: React.ComponentType,
   InputPlugins?: React.ComponentType<UnknowPorps>,
   InputQuote?: React.ComponentType<UnknowPorps>,
-  focus?: boolean,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
 }
+
 function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
 :React.ReactElement {
   const {
     children,
     disabled: propsDisabled,
-    focus = true,
-    plugins,
-    showNumber = 1,
-    MoreIcon,
+    focus: propsFoces,
+    pluginConfig,
+    textareaRef: propsTextareaRef,
   } = props;
   const messageInputState = useMessageInputState(props);
-  const { conversation } = useTUIKitContext('TUIMessageInput');
-  const { textareaRef } = useTUIChatStateContext('TUIMessageInput');
+  const { textareaRef, conversation } = useTUIChatStateContext('TUIMessageInput');
 
-  const contextDisabled = conversation.type === TIM.TYPES.CONV_SYSTEM;
+  const contextDisabled = conversation?.type === TIM.TYPES.CONV_SYSTEM;
+
+  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
+
+  const focus = propsFoces || TUIMessageInputConfig?.focus;
 
   const messageInputContextValue = useCreateMessageInputContext({
     ...messageInputState,
     ...props,
-    textareaRef,
-    disabled: propsDisabled || contextDisabled,
-    focus,
-    plugins,
-    showNumber,
-    MoreIcon,
+    textareaRef: propsTextareaRef || TUIMessageInputConfig?.textareaRef || textareaRef,
+    disabled: propsDisabled || TUIMessageInputConfig?.disabled || contextDisabled,
+    focus: typeof (focus) === 'boolean' ? focus : true,
+    pluginConfig,
   });
 
   return (
@@ -66,8 +81,15 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
     TUIMessageInput: PropTUIMessageInput,
     InputPlugins: PropInputPlugins,
     InputQuote: PropInputQuote,
+    isTransmitter: propsIsTransmitter,
+    className: propsClassName,
   } = props;
 
+  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
+
+  const className = propsClassName || TUIMessageInputConfig?.className;
+  const isTransmitter = propsIsTransmitter || TUIMessageInputConfig?.isTransmitter || false;
+
   const {
     TUIMessageInput: ContextInput,
     InputPlugins: ContextInputPlugins,
@@ -78,13 +100,16 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
   || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
   const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut;
   return (
-    <div className="tui-message-input">
+    <div className={`tui-message-input ${className}`}>
       <TUIMessageInputProvider {...props}>
         <TUIForward />
         <InputQuote />
         <div className="tui-message-input-main">
-          <InputPlugins />
-          <Input />
+          <div className="tui-message-input-box">
+            <InputPlugins />
+            <Input />
+          </div>
+          {isTransmitter && <Transmitter />}
         </div>
       </TUIMessageInputProvider>
     </div>

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -3,6 +3,7 @@ import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
 
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
 export function TUIMessageInputDefault():React.ReactElement {
   const {
@@ -23,7 +24,7 @@ export function TUIMessageInputDefault():React.ReactElement {
   // operateData
   useEffect(() => {
     if (operateData[MESSAGE_OPERATE.REVOKE]) {
-      setText(operateData[MESSAGE_OPERATE.REVOKE].payload.text);
+      setText(formatEmojiString(operateData[MESSAGE_OPERATE.REVOKE].payload.text, 1));
     }
   }, [operateData]);
 
@@ -31,7 +32,7 @@ export function TUIMessageInputDefault():React.ReactElement {
   useEffect(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.autofocus = true;
-      textareaRef.current.focus();
+      textareaRef?.current?.focus();
       textareaRef?.current?.addEventListener('paste', handlePasete);
     }
     return () => {

package/src/components/TUIMessageInput/Transmitter.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { Icon, IconTypes } from '../Icon';
+
+export function Transmitter():React.ReactElement {
+  const {
+    handleSubmit,
+  } = useTUIMessageInputContext('Transmitter');
+
+  return (
+    <div className="transmitter">
+      <Icon className="icon-send" type={IconTypes.SEND} onClick={handleSubmit} />
+    </div>
+  );
+}

package/src/components/TUIMessageInput/hooks/useCreateMessageInputContext.ts

@@ -11,9 +11,7 @@ export const useCreateMessageInputContext = (value:any) => {
     disabled,
     focus,
     operateData,
-    plugins,
-    showNumber,
-    MoreIcon,
+    pluginConfig,
   } = value;
   const messageInputContext = useMemo(
     () => ({
@@ -26,9 +24,7 @@ export const useCreateMessageInputContext = (value:any) => {
       disabled,
       focus,
       operateData,
-      plugins,
-      showNumber,
-      MoreIcon,
+      pluginConfig,
       ...value,
     }),
     [
@@ -40,10 +36,8 @@ export const useCreateMessageInputContext = (value:any) => {
       sendFaceMessage,
       disabled,
       focus,
-      plugins,
-      showNumber,
-      MoreIcon,
       operateData,
+      pluginConfig,
     ],
   );
 

package/src/components/TUIMessageInput/hooks/useMessageInputState.tsx

@@ -51,6 +51,13 @@ const reducer = (state:IinitState, action) => {
 export const useMessageInputState = (props:TUIMessageInputProps) => {
   const [state, dispatch] = useReducer(reducer, initState);
   const { focus, textareaRef } = props;
+
+  const {
+    sendUploadMessage,
+  } = useUploadPicker({
+    state,
+    dispatch,
+  });
   const {
     handleChange,
     handleSubmit,
@@ -64,6 +71,7 @@ export const useMessageInputState = (props:TUIMessageInputProps) => {
     dispatch,
     textareaRef,
     focus,
+    sendUploadMessage,
   });
 
   const {
@@ -76,13 +84,6 @@ export const useMessageInputState = (props:TUIMessageInputProps) => {
     insertText,
   });
 
-  const {
-    sendUploadMessage,
-  } = useUploadPicker({
-    state,
-    dispatch,
-  });
-
   return {
     ...state,
     handleChange,