@tencentcloud/chat-uikit-react 2.2.6 → 2.2.7

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

@@ -8,7 +8,7 @@ import {
   useTUIChatStateContext, useUIKit,
 } from '../../../context';
 
-export function useHandleForwardMessage(msg?:Message) {
+export function useHandleForwardMessage(msg?: Message) {
   const {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
@@ -18,14 +18,15 @@ export function useHandleForwardMessage(msg?:Message) {
 
   const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 
-  const sendForwardMessage = (list:Array<Conversation>) => {
-    list.map((item:Conversation) => {
-      message &&  TUIChatService.sendForwardMessage([item], [message]);
+  const sendForwardMessage = (list: Conversation[]) => {
+    list.map((item: Conversation) => {
+      message && TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };
 
   useEffect(() => {
+    if (!chat) return;
     (async () => {
       const res = await chat.getConversationList();
       setConversationList(res?.data?.conversationList.filter(

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

@@ -11,7 +11,7 @@ import {
   useTUIChatActionContext,
   useUIKit,
 } from '../../../context';
-import { enableSampleTaskStatus } from '../../untils';
+import { enableSampleTaskStatus } from '../../utils';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
@@ -19,12 +19,12 @@ import { filesData } from './useUploadPicker';
 import { de } from 'date-fns/locale';
 
 interface useMessageInputTextProps extends IbaseStateProps {
-  focus?: boolean,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void
+  focus?: boolean;
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void;
 }
 
-export const useMessageInputText = (props:useMessageInputTextProps) => {
+export const useMessageInputText = (props: useMessageInputTextProps) => {
   const {
     state,
     dispatch,
@@ -48,7 +48,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
       }
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text:string) => event.target.value,
+        getNewText: (text: string) => event.target.value,
       });
     },
     [chat],
@@ -61,7 +61,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     if (!state.text) {
       return;
     }
-    const options:any = {
+    const options: any = {
       payload: {
         text: formatEmojiString(state.text),
       },
@@ -75,7 +75,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     });
     enableSampleTaskStatus('sendMessage');
     dispatch({
-      getNewText: (text:string) => '',
+      getNewText: (text: string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
     });
     operateMessage && operateMessage({
@@ -86,7 +86,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   };
 
   const handleKeyDown = useCallback(
-    (event?:React.KeyboardEvent<EventTarget>) => {
+    (event?: React.KeyboardEvent<EventTarget>) => {
       if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         event?.preventDefault();
         handleSubmit(event);
@@ -94,7 +94,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
       if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         dispatch({
           type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-          getNewText: (text:string) => `${text}\n`,
+          getNewText: (text: string) => `${text}\n`,
         });
       }
     },
@@ -115,7 +115,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
             item.getAsString((str: string) => {
               dispatch({
                 type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-                getNewText: (text:string) => `${text}${str}`,
+                getNewText: (text: string) => `${text}${str}`,
               });
             });
             return true;
@@ -138,7 +138,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     (textToInsert: string) => {
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text:string) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
+        getNewText: (text: string) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
       });
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,

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

@@ -6,15 +6,15 @@ import {
   TUIChatService,
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_TYPE_NAME } from '../../../constants';
-import { enableSampleTaskStatus } from '../../untils';
+import { enableSampleTaskStatus } from '../../utils';
 import { useTUIChatActionContext } from '../../../context';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface filesData {
-  file: HTMLInputElement | File
+  file: HTMLInputElement | File;
 }
 
-export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildren<T>) {
+export function useUploadPicker<T extends IbaseStateProps>(props: PropsWithChildren<T>) {
   const {
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
@@ -25,7 +25,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,
   };
 
-  const sendUploadMessage = useCallback((file: filesData, type:MESSAGE_TYPE_NAME) => {
+  const sendUploadMessage = useCallback((file: filesData, type: MESSAGE_TYPE_NAME) => {
     creatUploadMessage[type]({
       payload: file,
     });

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

@@ -2,19 +2,19 @@
 
 .tui-message-input {
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-operate);
   }
 
   .tui-kit-input-box--focus {
     @include theme() {
-      outline: 1px solid get(status-info);
+      outline: 1px solid get(text-color-link);
     }
   }
 
   .input-box {
     @include theme() {
-      background-color: get(bg-primary);
-      border: 1px solid get(border-5);
+      background-color: get(bg-color-operate);
+      border: 1px solid get(stroke-color-primary);
     }
   }
 }
@@ -23,14 +23,18 @@
   &-box {
     border-radius: 16px;
 
-    [data-uikit-theme="light"] & {
-      background-color: var(--chat-theme-light-bg-primary);
-      box-shadow: var(--chat-theme-light-box-shadow-1);
+    @include theme() {
+      background-color: get(dropdown-color-default);
+      box-shadow: 0 0 10px 0 get(shadow-color);
     }
+  }
+}
 
-    [data-uikit-theme="dark"] & {
-      background-color: var(--chat-theme-dark-bg-3);
-      box-shadow: var(--chat-theme-dark-box-shadow-1);
-    }
+.input-icon {
+  width: 20px;
+  height: 20px;
+
+  @include theme() {
+    color: get(text-color-primary);
   }
 }

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

@@ -53,7 +53,7 @@
         background: none;
 
         @include theme() {
-          color: get(text-primary);
+          color: get(text-color-primary);
         }
 
         &:focus,
@@ -155,8 +155,15 @@ ul li {
   padding: 10px 16px;
   min-width: 180px;
 
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   &:hover {
-    color: #147aff;
+    @include theme() {
+      color: get(text-color-hover);
+      background-color: get(dropdown-color-hover);
+    }
   }
 
   input {
@@ -172,10 +179,13 @@ ul li {
 
 .input-quote {
   padding: 7px 16px;
-  background: #f9f9f9;
   display: flex;
   align-items: center;
 
+  @include theme() {
+    background: get(bg-color-bubble-reciprocal);
+  }
+
   &-content {
     flex: 1;
     background: #fff;
@@ -185,7 +195,6 @@ ul li {
     flex-direction: column;
     font-weight: 500;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
     line-height: 17px;
     color: #000;
 
@@ -212,7 +221,6 @@ ul li {
 
 // TUIForward
 .tui-forward {
-  background: #fff;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
@@ -220,19 +228,25 @@ ul li {
   width: 300px;
   max-height: 90%;
 
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   &-header {
     display: flex;
     align-items: center;
     padding: 24px 20px;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
   }
 
   &-title {
     padding: 0 16px;
-    font-family: PingFangSC-Medium;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
-    line-height: 17px;
   }
 
   &-main {
@@ -241,13 +255,13 @@ ul li {
     overflow-y: auto;
 
     .no-result {
-      font-family: PingFangSC-Medium;
       font-size: 14px;
-      font-style: normal;
-      line-height: 20px;
       padding: 10px;
       text-align: center;
-      color: #999;
+
+      @include theme() {
+        color: get(text-color-secondary);
+      }
     }
   }
 
@@ -259,7 +273,6 @@ ul li {
     padding: 13px 0;
 
     &-title {
-      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 600;
       font-size: 14px;
@@ -268,7 +281,6 @@ ul li {
 
     &-item {
       padding: 6px 0;
-      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -282,11 +294,9 @@ ul li {
         display: flex;
         align-items: center;
         flex-shrink: 0;
-        width: 100%;
 
         &-nick {
           padding: 0 13px;
-          font-family: PingFangSC-Medium;
           font-style: normal;
           font-weight: 400;
           font-size: 14px;
@@ -303,18 +313,20 @@ ul li {
   }
 
   &-footer {
-    background: rgba(249, 249, 249, 94%);
     padding: 13px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+    @include theme() {
+      background-color: get(bg-color-operate);
+    }
+
     .button {
       cursor: pointer;
       background: #0365f9;
       border-radius: 31px;
       padding: 10px 21px;
-      font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -331,6 +343,10 @@ ul li {
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
     }
   }
 }

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -4,15 +4,15 @@ import React, {
 import { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useUIKit } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
-import { getTimeStamp } from '../../untils';
+import { getTimeStamp } from '../../utils';
 
 interface MessageListElementProps {
-  enrichedMessageList: Array<Message>;
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
-  intervalsTimer?: number
+  enrichedMessageList: Message[];
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
+  intervalsTimer?: number;
 }
 
-function useMessageListElement <T extends MessageListElementProps>(
+function useMessageListElement<T extends MessageListElementProps>(
   props: PropsWithChildren<T>,
 ) {
   const {
@@ -22,17 +22,21 @@ function useMessageListElement <T extends MessageListElementProps>(
   } = props;
   const { language } = useUIKit('TUIConversation');
 
-  return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
+  return useMemo(() => enrichedMessageList?.map((item: Message, index: number) => {
     const key = `${item.ID}-${index}`;
     const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
     const currrentTimer = item?.time || 0;
     const isShowIntervalsTimer = intervalsTimer && preMessageTImer !== -1
-      ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
+      ? (currrentTimer - preMessageTImer) >= intervalsTimer
+      : false;
     return (
       <li className="message-list-item" key={key}>
         {
-         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>
-          {currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
+          isShowIntervalsTimer && (
+            <div className="message-list-time" key={`${currrentTimer + index}`}>
+              {currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}
+            </div>
+          )
         }
         {/* // eslint-disable-next-line
         // @ts-ignore */}

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

@@ -1,31 +1,39 @@
 @use "../../../styles/colors/color-theme" as *;
 
-ul,li,div,p,label,span {
+ul,
+li,
+div,
+p,
+label,
+span {
   margin: 0;
   padding: 0;
 }
+
 ul li {
   list-style: none;
 }
-.message-list{
+
+.message-list {
   flex: 1;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   position: relative;
   padding: 0 20px;
 
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-operate);
   }
 
   &.hide {
     opacity: 0;
   }
+
   &-item {
     display: grid;
     padding: 5px 0;
   }
+
   .no-more {
     text-align: center;
     font-family: PingFangSC-Medium;
@@ -35,12 +43,11 @@ ul li {
     line-height: 17px;
 
     @include theme() {
-      color: get(text-secondary);
+      color: get(text-color-secondary);
     }
-
   }
+
   &-time {
-    font-family: PingFangSC-Medium;
     font-size: 12px;
     font-weight: 400;
     line-height: 14px;
@@ -48,7 +55,7 @@ ul li {
     text-align: center;
 
     @include theme() {
-      color: get(text-secondary);
+      color: get(text-color-secondary);
     }
   }
 }

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -2,14 +2,14 @@ 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 { UpdateMyProfileParams } from "@tencentcloud/chat-uikit-engine";
+import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
 import { isH5 } from '../../utils/env';
 import { useUIManager } from '../../context';
 
 import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
 import { Icon, IconTypes } from '../Icon';
-import { handleDisplayAvatar } from '../untils';
+import { handleDisplayAvatar } from '../utils';
 
 const gender: any = {
   [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
@@ -58,9 +58,9 @@ const allowTypeList = [
 ];
 
 export interface TUIProfileDefaultProps {
-  userInfo?: Profile,
-  update?: (option: UpdateMyProfileParams) => void,
-  className?: string,
+  userInfo?: Profile;
+  update?: (option: UpdateMyProfileParams) => void;
+  className?: string;
 }
 
 function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
@@ -117,13 +117,15 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Gender',
-      value: t( userInfo?.gender && gender[userInfo?.gender]?.replace(
+      value: t(userInfo?.gender && gender[userInfo?.gender]?.replace(
         gender[userInfo?.gender][0],
         gender[userInfo?.gender][0]?.toLocaleUpperCase(),
-      ) ? `TUIProfile.${gender[userInfo?.gender]?.replace(
+      )
+        ? `TUIProfile.${gender[userInfo?.gender]?.replace(
           gender[userInfo?.gender][0],
           gender[userInfo?.gender][0]?.toLocaleUpperCase(),
-        )}` : ''),
+        )}`
+        : ''),
       type: 'select',
       children: (
         <ul className="select-list">
@@ -193,7 +195,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   if (isH5) {
     editListMap = editListMap.filter((item: any) => item.name !== 'Birthday');
   }
-  const handleSetEditName = (name:string) => {
+  const handleSetEditName = (name: string) => {
     setIsEditName(name);
   };
 
@@ -312,8 +314,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
 const MemoizedTUIProfileDefault = React.memo(TUIProfileDefaultWithContext) as
   typeof TUIProfileDefaultWithContext;
 
-export function TUIProfileDefault(props: TUIProfileDefaultProps)
-  : React.ReactElement {
+export function TUIProfileDefault(props: TUIProfileDefaultProps): React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIProfileDefault {...options} />;
 }

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

@@ -1,6 +1,7 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-profile {
-  background: #ffffff;
-    &-header {
-      background: #f9fafb;
-    }
-}
+  @include theme() {
+    background: get(bg-color-operate);
+  }
+}

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

@@ -1,8 +1,14 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
 
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   &-header {
     box-sizing: border-box;
     width: 100%;
@@ -38,7 +44,6 @@
   &-nick {
     font-weight: 700;
     font-size: 24px;
-    font-family: PingFangSC-Medium;
     line-height: 29px;
     text-align: center;
 
@@ -48,15 +53,14 @@
   }
 
   &-ID {
-    padding: 6px 0;
-    margin: 0;
+    margin: 6px 0;
     display: flex;
     align-items: center;
-    font-weight: 400;
     font-size: 12px;
-    font-family: PingFangSC-Medium;
-    line-height: 14px;
-    color: #666;
+
+    @include theme() {
+      color: get(text-color-secondary);
+    }
 
     h5 {
       margin: 0;
@@ -76,20 +80,18 @@
       cursor: pointer;
 
       h4 {
-        padding-bottom: 3px;
-        font-weight: 400;
         font-size: 16px;
-        font-family: PingFangSC-Medium;
-        line-height: 22px;
         margin: 10px 0;
-        color: rgba(0, 0, 0, 60%);
       }
     }
   }
 
   &-div-with-edit {
-    padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    height: auto !important;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+    }
   }
 
   &-edit {

package/src/components/{untils.ts → utils.ts}

@@ -6,7 +6,7 @@ import {
   isToday,
   isYesterday,
 } from 'date-fns';
-import { enGB, zhCN, ja, ko } from 'date-fns/locale';
+import { enGB, zhCN, ja, ko, zhTW } from 'date-fns/locale';
 import TencentCloudChat from '@tencentcloud/chat';
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
@@ -34,7 +34,7 @@ export function JSONStringToParse(str: string) {
   return JSON.parse(str);
 }
 
-export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudChat.TYPES.CONV_C2C) => {
+export const handleDisplayAvatar = (avatar: string, type: string = TencentCloudChat.TYPES.CONV_C2C) => {
   let displayImage = avatar;
   if (!avatar) {
     switch (type) {
@@ -51,13 +51,14 @@ export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudCh
   return displayImage;
 };
 
-export const getTimeStamp = (time: number, language: string = 'en-US') => {
+export const getTimeStamp = (time: number, language = 'en-US') => {
   const locales: any = {
     'zh-CN': zhCN,
+    'zh-TW': zhTW,
     'en-US': enGB,
     'ja-JP': ja,
     'ko-KR': ko,
-   };
+  };
   if (!time) {
     return '';
   }

package/src/context/LanguageContext.tsx

@@ -29,12 +29,13 @@ function LanguageProvider(props: PropsWithChildren<Partial<LanguageProviderProps
   const [language, setLanguage] = useState(_language);
 
   useLayoutEffect(() => {
-    i18n.changeLanguage(language);
-  }, [language, i18n]);
+    i18n.changeLanguage(_language);
+    setLanguage(_language);
+  }, [_language, i18n]);
 
   useLayoutEffect(() => {
-    document.documentElement.lang = language;
-  }, [language]);
+    document.documentElement.lang = _language;
+  }, [_language]);
 
   const value = {
     language,