@tencentcloud/chat-uikit-react 1.2.2 → 2.1.2

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

@@ -23,6 +23,7 @@
     .name {
       display: inline-block;
       padding-bottom: 3px;
+      max-width: 60%;
     }
   }
 }
@@ -57,7 +58,7 @@
 .bubble {
   padding: 8px 16px;
   &-in {
-    border-radius: 16px 16px 16px 0;
+    border-radius: 0px 16px 16px 16px;
     &.group {
       border-radius: 0px 16px 16px 16px;
     }
@@ -104,8 +105,9 @@
     font-style: normal;
     font-weight: 500;
     font-size: 14px;
-    line-height: 17px;
+    line-height: 24px;
     &-p {
+      white-space: pre-wrap;
       display: inline;
       vertical-align: middle;
     }
@@ -136,9 +138,13 @@
   img {
     max-width: 300px;
   }
+  .img-h5 {
+    max-width: 200px;
+    max-height: 200px;
+  }
   .big-image {
-    max-width: 95%;
-    max-height: 95%;
+    max-width: 90%;
+    max-height: 90%;
   }
 }
 
@@ -146,6 +152,8 @@
   max-width: 300px;
   .snap-video {
     position: relative;
+    height: 100%;
+    border-radius: 10px;
     &::before {
       position: absolute;
       z-index: 1;
@@ -163,14 +171,18 @@
   }
   video {
     width: 100%;
+    height: 100%;
     border-radius: 10px;
   }
   .play-video {
     max-width: 95%;
-    max-height: 95%;
+    max-height: 65%;
   }
 }
-
+.message-video.message-video-h5 {
+  max-width: 200px;
+  max-height: 200px;
+}
 .message-file {
   display: flex;
   flex-direction: column;
@@ -317,6 +329,13 @@
     max-width: 300px;
     border-radius: 10px;
   }
+  .img-h5, .video-h5{
+    min-width: 60px;
+    min-height: 60px;
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 10px;
+  }
   &::before {
     position: absolute;
     content: "";
@@ -358,6 +377,7 @@
   .plugin-popup-box{
     bottom: auto;
     top: 100%;
+    overflow: hidden;
   }
 
   &-box {
@@ -449,17 +469,20 @@
 @keyframes highLightedAnimation {
   0% {
     opacity: 1;
+    color: #ff9c19;
   }
   25% {
     opacity: 0.3;
   }
   50% {
+    color: #ff9c19;
     opacity: 1;
   }
   75% {
     opacity: 0.3;
   }
   100% {
+    color: #ff9c19;
     opacity: 1;
   }
 }
@@ -478,3 +501,7 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   }
 }
+
+.website {
+  color: #147aff !important;
+}

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

@@ -127,7 +127,7 @@ export function handleTipMessageShowContext(message: Message) {
       options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.quit group')}`;
       break;
     case TencentCloudChat.TYPES.GRP_TIP_MBR_KICKED_OUT:
-      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')}${message.payload.operatorID}${t(
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')} ${message.payload.operatorID} ${t(
         'message.tip.kicked out of group',
       )}`;
       break;

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
-
+import { isPC } from '../../utils/env';
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
@@ -34,7 +34,7 @@ export function TUIMessageInputDefault():React.ReactElement {
   useEffect(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.autofocus = true;
-      textareaRef?.current?.focus();
+      isPC && textareaRef?.current?.focus();
       textareaRef?.current?.addEventListener('paste', handlePasete);
     }
     return () => {

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

@@ -4,7 +4,7 @@ import {
   useCallback,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTUIChatActionContext } from '../../../context';
+import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
 import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
@@ -25,7 +25,6 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   } = props;
 
   const { i18n } = useTranslation();
-  const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
 
   const onSelectEmoji = (emoji:EmojiData) => {
     if (i18n.language === 'zh') {
@@ -36,10 +35,7 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   };
 
   const sendFaceMessage = useCallback((emoji:EmojiData) => {
-    const message = createFaceMessage({
-      payload: emoji,
-    });
-    sendMessage(message);
+    TUIChatService.sendFaceMessage({ payload: emoji });
   }, []);
 
   return {

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

@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
 import TencentCloudChat, { Conversation, Message } from '@tencentcloud/chat';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
 import {
   useTUIChatActionContext, useTUIChatStateContext, useTUIKitContext,
@@ -11,15 +14,13 @@ export function useHandleForwardMessage(msg?:Message) {
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
   const [conversationList, setConversationList] = useState([]);
-  const { sendMessage, createForwardMessage } = useTUIChatActionContext('useHandleForwardMessage');
   const { chat } = useTUIKitContext('TUIChat');
 
   const message = msg || operateData[MESSAGE_OPERATE.FORWARD];
 
   const sendForwardMessage = (list:Array<Conversation>) => {
     list.map((item:Conversation) => {
-      const forwardMessage = createForwardMessage({ conversation: item, message });
-      sendMessage(forwardMessage);
+      TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };

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

@@ -3,11 +3,15 @@ import React, {
   ChangeEventHandler,
   MutableRefObject,
 } from 'react';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
   useTUIKitContext,
 } from '../../../context';
+import { enableSampleTaskStatus } from '../../untils';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
@@ -29,7 +33,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   } = props;
 
   const { chat } = useTUIKitContext('useMessageInputText');
-  const { sendMessage, createTextMessage, operateMessage } = useTUIChatActionContext('TUIMessageInput');
+  const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();
 
@@ -64,8 +68,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     if (cloudCustomData.messageReply) {
       options.cloudCustomData = JSON.stringify(cloudCustomData);
     }
-    const message = createTextMessage(options);
-    await sendMessage(message);
+    TUIChatService.sendTextMessage(options).then((res: any) => {
+      const { message } = res.data;
+      setFirstSendMessage(message);
+    });
+    enableSampleTaskStatus('sendMessage');
     dispatch({
       getNewText: (text:string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,

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

@@ -2,7 +2,11 @@ import {
   PropsWithChildren,
   useCallback,
 } from 'react';
+import {
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_TYPE_NAME } from '../../../constants';
+import { enableSampleTaskStatus } from '../../untils';
 import { useTUIChatActionContext } from '../../../context';
 import type { IbaseStateProps } from './useMessageInputState';
 
@@ -12,29 +16,21 @@ export interface filesData {
 
 export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildren<T>) {
   const {
-    sendMessage,
-    createImageMessage,
-    createVideoMessage,
-    createFileMessage,
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
   const creatUploadMessage = {
-    [MESSAGE_TYPE_NAME.IMAGE]: createImageMessage,
-    [MESSAGE_TYPE_NAME.VIDEO]: createVideoMessage,
-    [MESSAGE_TYPE_NAME.FILE]: createFileMessage,
+    [MESSAGE_TYPE_NAME.IMAGE]: TUIChatService.sendImageMessage,
+    [MESSAGE_TYPE_NAME.VIDEO]: TUIChatService.sendVideoMessage,
+    [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,
   };
 
   const sendUploadMessage = useCallback((file: filesData, type:MESSAGE_TYPE_NAME) => {
-    const message = creatUploadMessage[type]({
+    creatUploadMessage[type]({
       payload: file,
-      onProgress(num:number) {
-        message.progress = num;
-        updateUploadPendingMessageList(message);
-      },
     });
-    sendMessage(message);
-  }, [sendMessage]);
+    enableSampleTaskStatus('sendMessage');
+  }, []);
 
   return {
     sendUploadMessage,

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

@@ -10,7 +10,7 @@
 
 .input-plugin-popup {
   &-box {
-    background: rgba(249, 249, 249, 0.94);
+    background: #FFFFFF;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
     border-radius: 16px;
   }

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

@@ -91,11 +91,11 @@ ul li {
 // emoji picker styles
 .emoji-picker {
   .face-list {
-    min-width: 265px;
+    height: 120px;
+    width: 242px;
     padding: 10px 5px;
     display: flex;
     flex-wrap: wrap;
-    max-height: 120px;
     overflow-y: auto;
     &-item {
       padding: 5px;
@@ -190,6 +190,7 @@ ul li {
   flex-direction: column;
   overflow: hidden;
   width: 300px;
+  max-height: 90%;
   &-header {
     display: flex;
     align-items: center;
@@ -239,9 +240,12 @@ ul li {
       display: flex;
       justify-content: space-between;
       align-items: center;
+      width: 100%;
       .info {
         display: flex;
         align-items: center;
+        flex-shrink: 0;
+        width: 100%;
         &-nick {
           padding: 0 13px;
           font-family: PingFangSC-Medium;
@@ -254,6 +258,7 @@ ul li {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          width: 80%;
         }
       }
     }

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -6,7 +6,6 @@ import {
   useTUIChatActionContext,
   useComponentContext,
 } from '../../context';
-import useEnrichedMessageList from './hooks/useEnrichedMessageList';
 import useMessageListElement from './hooks/useMessageListElement';
 
 import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator';
@@ -25,7 +24,6 @@ function TUIMessageListWithContext <T extends MessageListProps>(
   props: PropsWithChildren<T>,
 ):React.ReactElement {
   const {
-    messageList: propsMessageList,
     highlightedMessageId: propsHighlightedMessageId,
     loadMore: propsLoadMore,
     intervalsTimer: propsIntervalsTimer,
@@ -35,7 +33,6 @@ function TUIMessageListWithContext <T extends MessageListProps>(
   const { t } = useTranslation();
   const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
   const [firstRender, setFirstRender] = useState<boolean>(false);
-
   const {
     messageList: contextMessageList,
     highlightedMessageId: contextHighlightedMessageId,
@@ -51,32 +48,31 @@ function TUIMessageListWithContext <T extends MessageListProps>(
   const highlightedMessageId = propsHighlightedMessageId
   || TUIMessageListConfig?.highlightedMessageId
   || contextHighlightedMessageId;
-  const intervalsTimer = (propsIntervalsTimer || TUIMessageListConfig?.intervalsTimer || 30) * 60;
 
-  const { messageList: enrichedMessageList } = useEnrichedMessageList({
-    messageList: propsMessageList || TUIMessageListConfig?.messageList || contextMessageList,
-  });
+  const intervalsTimer = (propsIntervalsTimer || TUIMessageListConfig?.intervalsTimer || 30) * 60;
 
   const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
 
   const elements = useMessageListElement({
-    enrichedMessageList,
+    enrichedMessageList: contextMessageList,
     TUIMessage,
     intervalsTimer,
   });
-
   useEffect(() => {
+    // messageList 滑动到底部
     (async () => {
       const parentElement = ulElement?.parentElement?.parentElement;
-      if (!isCompleted && parentElement?.clientHeight >= ulElement?.clientHeight) {
+      if (
+        !isCompleted
+        && parentElement?.clientHeight >= ulElement?.clientHeight
+      ) {
         await loadMore();
       }
-
-      if (ulElement?.children && (!firstRender || !isSameLastMessageID)) {
+      if (ulElement?.children) {
         const HTMLCollection = ulElement?.children || [];
         const element = HTMLCollection[HTMLCollection.length - 1];
         const timer = setTimeout(() => {
-          element?.scrollIntoView({ block: 'end' });
+          element?.scrollIntoView();
           setFirstRender(true);
           clearTimeout(timer);
         }, 100);

package/src/components/TUIMessageList/index.ts

@@ -1,2 +1 @@
 export * from './TUIMessageList';
-export * from './hooks/useEnrichedMessageList';

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -1,8 +1,8 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
-
+import { isH5 } from '../../utils/env';
 import { useTUIKitContext } from '../../context';
 
 import { Avatar } from '../Avatar';
@@ -59,13 +59,13 @@ const allowTypeList = [
 
 export interface TUIProfileDefaultProps {
   userInfo?: Profile,
-  update?:(option:ProfileParams) => void,
+  update?: (option: ProfileParams) => void,
   className?: string,
 }
 
-function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
+function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     userInfo,
     className,
@@ -77,8 +77,20 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
 
   const [isEditName, setIsEditName] = useState('');
 
-  // show birthday famate
-  const showBirthdayFormat = (value: string) => {
+  // birthday format to show
+  const birthdayFormatToShow = (dateNumber: number) => {
+    const dateStr = String(dateNumber);
+    if (dateStr.length === 8) {
+      const year = dateStr.substring(0, 4);
+      const month = dateStr.substring(4, 6);
+      const day = dateStr.substring(6, 8);
+      return `${year}/${month}/${day}`;
+    }
+    return `${dateNumber}`;
+  };
+
+  // transform birthday string value to Date object
+  const transformBirthdayStringToDate = (value: string) => {
     if (value?.length === 8) {
       const y = Number(value.slice(0, 4));
       const m = Number(value.slice(4, 6));
@@ -88,15 +100,15 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
     return new Date();
   };
 
-  // edit birthday famate transform
-  const editBirthdayFamate = (date:Date) => {
+  // edit birthday format transform
+  const editBirthdayFormat = (date: Date) => {
     const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
     const month = date.getMonth() > 8 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
     const year = date.getFullYear();
     return `${year}${month}${day}`;
   };
 
-  const editListMap = [
+  let editListMap = [
     {
       name: 'Signature',
       value: userInfo?.selfSignature,
@@ -116,21 +128,21 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
       children: (
         <ul className="select-list">
           {
-        genderList?.map((item, index) => {
-          const key = `${item.value}${index}`;
-          return (
-            <li
-              className="select-list-item"
-              role="menuitem"
-              tabIndex={index}
-              key={key}
-              onClick={() => { editGender(item); }}
-            >
-              {t(`TUIProfile.${item.label}`)}
-            </li>
-          );
-        })
-      }
+            genderList?.map((item, index) => {
+              const key = `${item.value}${index}`;
+              return (
+                <li
+                  className="select-list-item"
+                  role="menuitem"
+                  tabIndex={index}
+                  key={key}
+                  onClick={() => { editGender(item); }}
+                >
+                  {t(`TUIProfile.${item.label}`)}
+                </li>
+              );
+            })
+          }
         </ul>
       ),
     },
@@ -144,27 +156,27 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
       children: (
         <ul className="select-list">
           {
-        allowTypeList?.map((item, index) => {
-          const key = `${item.value}${index}`;
-          return (
-            <li
-              className="select-list-item"
-              role="menuitem"
-              tabIndex={index}
-              key={key}
-              onClick={() => { editAllowType(item); }}
-            >
-              {t(`TUIProfile.${item.label}`)}
-            </li>
-          );
-        })
-      }
+            allowTypeList?.map((item, index) => {
+              const key = `${item.value}${index}`;
+              return (
+                <li
+                  className="select-list-item"
+                  role="menuitem"
+                  tabIndex={index}
+                  key={key}
+                  onClick={() => { editAllowType(item); }}
+                >
+                  {t(`TUIProfile.${item.label}`)}
+                </li>
+              );
+            })
+          }
         </ul>
       ),
     },
     {
       name: 'Birthday',
-      value: `${userInfo?.birthday}`,
+      value: userInfo?.birthday ? birthdayFormatToShow(userInfo.birthday) : '',
       type: 'select',
       children: (
         <DatePicker
@@ -172,13 +184,15 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
           calendarClassName="tui-profile-birthday-calendar"
           isOpen
           format="y-MM-dd"
-          onChange={(value:Date) => { editBirthday(value); }}
-          value={showBirthdayFormat(`${userInfo?.birthday}`)}
+          onChange={(value: Date) => { editBirthday(value); }}
+          value={transformBirthdayStringToDate(`${userInfo?.birthday}`)}
         />
       ),
     },
   ];
-
+  if (isH5) {
+    editListMap = editListMap.filter((item) => item.name !== 'Birthday');
+  }
   const handleSetEditName = (name:string) => {
     setIsEditName(name);
   };
@@ -189,12 +203,12 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
   };
 
   // edit avatar
-  const editAvatar = (url:string) => {
+  const editAvatar = (url: string) => {
     confirm({ avatar: url });
   };
 
   // edit nick / selfSignature
-  const editText = (data?:any) => {
+  const editText = (data?: any) => {
     let key = '';
     switch (data?.name) {
       case 'nick':
@@ -224,9 +238,9 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
   };
 
   // edit birthday
-  const editBirthday = (value:Date) => {
+  const editBirthday = (value: Date) => {
     confirm({
-      birthday: Number(editBirthdayFamate(value)),
+      birthday: Number(editBirthdayFormat(value)),
     });
   };
 
@@ -276,7 +290,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
                   className="tui-profile-div-with-edit"
                   classEditName="tui-profile-edit"
                   name={item.name}
-                  value={item?.value}
+                  value={item.value}
                   type={item.type}
                   toggle={handleSetEditName}
                   isEdit={isEditName === item.name}
@@ -296,10 +310,10 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
 }
 
 const MemoizedTUIProfileDefault = React.memo(TUIProfileDefaultWithContext) as
-typeof TUIProfileDefaultWithContext;
+  typeof TUIProfileDefaultWithContext;
 
 export function TUIProfileDefault(props: TUIProfileDefaultProps)
-:React.ReactElement {
+  : React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIProfileDefault {...options} />;
 }

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

@@ -59,8 +59,10 @@
     padding: 0 20px;
     display: flex;
     flex-direction: column;
+    user-select: none;
     &-item {
       padding: 20px 0 0;
+      cursor: pointer;
       h4 {
         padding-bottom: 3px;
         font-weight: 400;
@@ -86,6 +88,10 @@
   }
   .react-date-picker__calendar {
     position: static !important;
+    .react-calendar__navigation {
+      height: 20px !important;
+      margin-bottom: 0px;
+    }
   }
   &-calendar {
     border: none !important;

package/src/components/untils.ts

@@ -8,6 +8,7 @@ import {
 } from 'date-fns';
 import { enGB, zhCN } from 'date-fns/locale';
 import TencentCloudChat from '@tencentcloud/chat';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
 
 // Determine if it is a JSON string
@@ -88,3 +89,11 @@ export const getTimeStamp = (time: number, language?: string) => {
     locale: locales[lng],
   });
 };
+
+export function enableSampleTaskStatus(taskKey: string) {
+  const tasks = TUIStore.getData(StoreName.APP, 'tasks');
+  if (taskKey in tasks && !tasks[taskKey]) {
+    tasks[taskKey] = true;
+    TUIStore.update(StoreName.APP, 'tasks', tasks);
+  }
+}