@tencentcloud/chat-uikit-react 2.2.7 → 2.2.8

package/src/components/{TUIMessage → MessageElement}/styles/layout.scss

@@ -280,7 +280,7 @@
   padding: 8px 16px;
 
   @include theme() {
-    background-color: get(bg-secondary);
+    background-color: get(bg-color-bubble-own);
   }
 
   &-in {

package/src/components/{TUIMessageInput → MessageInput}/EmojiPicker.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
 import {
   emojiUrl, emojiName, emojiMap,
   // bigEmojiList, faceUrl, IBigEmojiListItem,
-} from '../TUIMessage/utils/emojiMap';
+} from '../MessageElement/utils/emojiMap';
 
 import type { EmojiData } from './hooks';
 

package/src/components/{TUIMessageInput/TUIForward.tsx → MessageInput/Forward.tsx}

@@ -15,17 +15,17 @@ import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleForwardMessage } from './hooks';
 
 interface HandleForwardParams {
-  list?:Array<Conversation>,
-  message?:Message,
+  list?: Conversation[];
+  message?: Message;
 }
 
 interface TUIForwardToProps {
-  handleForward?: (data:HandleForwardParams) => void,
+  handleForward?: (data: HandleForwardParams) => void;
 }
 
-export function TUIForward <T extends TUIForwardToProps>(
+export function Forward<T extends TUIForwardToProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     handleForward: propsHandleForward,
   } = props;
@@ -39,7 +39,6 @@ export function TUIForward <T extends TUIForwardToProps>(
   const { message, sendForwardMessage, conversationList = [] } = useHandleForwardMessage();
 
   const handleClose = useCallback(() => {
-    
     operateMessage && operateMessage({
       // eslint-disable-next-line
       // @ts-ignore
@@ -47,7 +46,7 @@ export function TUIForward <T extends TUIForwardToProps>(
     });
   }, [operateMessage]);
 
-  //const FrequentlyList = conversationList.slice(0, 2);
+  // const FrequentlyList = conversationList.slice(0, 2);
   const RecentList = conversationList;
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -70,7 +69,7 @@ export function TUIForward <T extends TUIForwardToProps>(
       // @ts-ignore
       setSelectList([...selectList, e.value]);
     } else {
-      setSelectList(selectList.filter((item) => item !== e.value));
+      setSelectList(selectList.filter(item => item !== e.value));
     }
   };
 
@@ -104,7 +103,7 @@ export function TUIForward <T extends TUIForwardToProps>(
   // @ts-ignore
   return message && conversationList.length > 0 && (
     <Model onClick={handleClose}>
-      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => {stopPropagation(e)}}>
+      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => { stopPropagation(e); }}>
         <header className="tui-forward-header">
           <Icon
             type={IconTypes.CANCEL}
@@ -127,33 +126,33 @@ export function TUIForward <T extends TUIForwardToProps>(
         <main className="tui-forward-main">
           {
             searchValue && (
-            <ul className="tui-forward-list">
-              <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
-              {
-                searchResult.length > 0 && searchResult.map((item: any) => (
-                  <li key={item.conversationID} className="tui-forward-list-item">
-                    <label htmlFor={`${item.conversationID}`} className="info">
-                      <Avatar image={getDisplayImage(item)} size={40} />
-                      <div className="info-nick">{getDisplayTitle(item)}</div>
-                    </label>
-                    <Checkbox
-                      onChange={(e) => {handleCheckboxChange(e)}}
-                      id={`${item.conversationID}`}
-                      value={item}
-                    />
-                  </li>
-                ))
-              }
-              {
-              searchResult.length === 0
-              && <p className="no-result">{t('TUIChat.No Result')}</p>
-              }
-            </ul>
+              <ul className="tui-forward-list">
+                <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
+                {
+                  searchResult.length > 0 && searchResult.map((item: any) => (
+                    <li key={item.conversationID} className="tui-forward-list-item">
+                      <label htmlFor={`${item.conversationID}`} className="info">
+                        <Avatar image={getDisplayImage(item)} size={40} />
+                        <div className="info-nick">{getDisplayTitle(item)}</div>
+                      </label>
+                      <Checkbox
+                        onChange={(e) => { handleCheckboxChange(e); }}
+                        id={`${item.conversationID}`}
+                        value={item}
+                      />
+                    </li>
+                  ))
+                }
+                {
+                  searchResult.length === 0
+                  && <p className="no-result">{t('TUIChat.No Result')}</p>
+                }
+              </ul>
             )
           }
           { !searchValue && RecentList.length > 0 && (
-          <ul className="tui-forward-list">
-            {
+            <ul className="tui-forward-list">
+              {
                 RecentList.map((item: any) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
                     <label htmlFor={`${item.conversationID}`} className="info">
@@ -168,13 +167,19 @@ export function TUIForward <T extends TUIForwardToProps>(
                   </li>
                 ))
               }
-          </ul>
+            </ul>
           )}
         </main>
         <footer className="tui-forward-footer">
           <div className="tui-forward-footer-name">{selectList.length > 0 && handleDisplayForwardName(selectList)}</div>
-          <button type="button" className="button" onClick={handleForward} 
-          disabled={selectList.length === 0}>{t('TUIChat.Forward')}</button>
+          <button
+            type="button"
+            className="button"
+            onClick={handleForward}
+            disabled={selectList.length === 0}
+          >
+            {t('TUIChat.Forward')}
+          </button>
         </footer>
       </div>
     </Model>

package/src/components/{TUIMessageInput → MessageInput}/InputPluginsDefalut.tsx

@@ -4,10 +4,10 @@ import './styles/index.scss';
 
 import { EmojiPicker } from './EmojiPicker';
 import { Plugins } from '../Plugins';
-import { IPluginsRef } from '../ConversationPreview';
+import { IPluginsRef } from '../Plugins';
 import { useUploadElement } from './hooks/useUploadElement';
 import { MESSAGE_TYPE_NAME } from '../../constants';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIChatStateContext } from '../../context';
 export function InputPluginsDefalut(): React.ReactElement {

package/src/components/{TUIMessageInput → MessageInput}/InputQuoteDefalut.tsx

@@ -6,7 +6,7 @@ import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleQuoteMessage } from './hooks/useHandleQuoteMessage';
-import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
+import { formatEmojiString } from '../MessageElement/utils/emojiMap';
 
 interface InputQuoteProps {
   message?: Message

package/src/components/{TUIMessageInput/TUIMessageInput.tsx → MessageInput/MessageInput.tsx}

@@ -1,6 +1,6 @@
 import React, { MutableRefObject, PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
-import { TUIMessageInputContextProvider } from '../../context/TUIMessageInputContext';
+import { TUIMessageInputContextProvider } from '../../context/MessageInputContext';
 import { useMessageInputState, useCreateMessageInputContext } from './hooks';
 import './styles/index.scss';
 import {
@@ -11,38 +11,37 @@ import {
 } from '../../context';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { InputQuoteDefalut } from './InputQuoteDefalut';
-import { TUIMessageInputDefault } from './TUIMessageInputDefault';
+import { TUIMessageInputDefault } from './MessageInputDefault';
 import { InputPluginsDefalut } from './InputPluginsDefalut';
-import { TUIForward } from './TUIForward';
+import { Forward } from './Forward';
 import { Transmitter } from './Transmitter';
 
 export interface PluginConfigProps {
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
-  isEmojiPicker?: boolean,
-  isImagePicker?: boolean,
-  isVideoPicker?: boolean,
-  isFilePicker?: boolean,
+  plugins?: 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,
+  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>,
+  TUIMessageInput?: React.ComponentType;
+  InputPlugins?: React.ComponentType<UnknowPorps>;
+  InputQuote?: React.ComponentType<UnknowPorps>;
 }
 
-function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
-:React.ReactElement {
+function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
   const {
     children,
     disabled: propsDisabled,
@@ -75,8 +74,7 @@ function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWit
   );
 }
 
-function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
-:React.ReactElement {
+function UnMemoizedMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
   const {
     TUIMessageInput: PropTUIMessageInput,
     InputPlugins: PropInputPlugins,
@@ -97,12 +95,12 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
   } = useComponentContext('TUIMessageInput');
   const Input = PropTUIMessageInput || ContextInput || TUIMessageInputDefault;
   const InputPlugins = PropInputPlugins
-  || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
+    || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
   const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut;
   return (
     <div className={`tui-message-input ${className}`}>
       <TUIMessageInputProvider {...props}>
-        <TUIForward />
+        <Forward />
         <InputQuote />
         <div className="tui-message-input-main">
           <div className="tui-message-input-box">
@@ -115,5 +113,5 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
     </div>
   );
 }
-export const TUIMessageInput = React.memo(UnMemoizedTUIMessageInput) as
-typeof UnMemoizedTUIMessageInput;
+export const MessageInput = React.memo(UnMemoizedMessageInput) as
+typeof UnMemoizedMessageInput;

package/src/components/{TUIMessageInput/TUIMessageInputDefault.tsx → MessageInput/MessageInputDefault.tsx}

@@ -3,10 +3,10 @@ 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';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
+import { formatEmojiString } from '../MessageElement/utils/emojiMap';
 
-export function TUIMessageInputDefault():React.ReactElement {
+export function TUIMessageInputDefault(): React.ReactElement {
   const {
     text,
     disabled,
@@ -67,18 +67,18 @@ export function TUIMessageInputDefault():React.ReactElement {
       {
         !disabled
         && (
-        <textarea
-          placeholder={t('TUIChat.Enter a message')}
-          rows={1}
-          value={text}
-          // eslint-disable-next-line
+          <textarea
+            placeholder={t('TUIChat.Enter a message')}
+            rows={1}
+            value={text}
+            // eslint-disable-next-line
           // @ts-ignore
-          ref={textareaRef}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={(e:any) => {handleBlur(e)}}
-        />
+            ref={textareaRef}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={(e: any) => { handleBlur(e); }}
+          />
         )
       }
     </div>

package/src/components/{TUIMessageInput → MessageInput}/Transmitter.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 
-export function Transmitter():React.ReactElement {
+export function Transmitter(): React.ReactElement {
   const {
     handleSubmit,
   } = useTUIMessageInputContext('Transmitter');

package/src/components/{TUIMessageInput → MessageInput}/hooks/useEmojiPicker.tsx

@@ -5,7 +5,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
-import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
+import { emojiEnKey } from '../../MessageElement/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface EmojiData {

package/src/components/{TUIMessageInput → MessageInput}/hooks/useMessageInputState.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, useReducer } from 'react';
 import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
-import type { TUIMessageInputProps } from '../TUIMessageInput';
+import type { TUIMessageInputProps } from '../MessageInput';
 import { useEmojiPicker } from './useEmojiPicker';
 import { useMessageInputText } from './useMessageInputText';
 import { useUploadPicker } from './useUploadPicker';

package/src/components/{TUIMessageInput → MessageInput}/hooks/useMessageInputText.tsx

@@ -12,7 +12,7 @@ import {
   useUIKit,
 } from '../../../context';
 import { enableSampleTaskStatus } from '../../utils';
-import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
+import { formatEmojiString } from '../../MessageElement/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 import { filesData } from './useUploadPicker';
@@ -33,7 +33,7 @@ export const useMessageInputText = (props: useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { chat } = useUIKit('useMessageInputText');
+  const { chat } = useUIKit();
   const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();

package/src/components/MessageInput/index.ts

@@ -0,0 +1,3 @@
+export * from './MessageInput';
+export * from './MessageInputDefault';
+export * from './InputPluginsDefalut';

package/src/components/{TUIMessageInput → MessageInput}/styles/color.scss

@@ -13,7 +13,7 @@
 
   .input-box {
     @include theme() {
-      background-color: get(bg-color-operate);
+      background-color: get(bg-color-input);
       border: 1px solid get(stroke-color-primary);
     }
   }

package/src/components/{TUIMessageList/TUIMessageList.tsx → MessageList/MessageList.tsx}

@@ -15,10 +15,10 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyState
 import './styles/index.scss';
 
 export interface MessageListProps extends InfiniteScrollProps {
-  className?: string,
-  messageList?: Array<Message>,
-  highlightedMessageId?: string,
-  intervalsTimer?: number,
+  className?: string;
+  messageList?: Message[];
+  highlightedMessageId?: string;
+  intervalsTimer?: number;
 }
 function TUIMessageListWithContext<T extends MessageListProps>(
   props: PropsWithChildren<T>,
@@ -126,7 +126,7 @@ function TUIMessageListWithContext<T extends MessageListProps>(
 const MemoizedTUIMessageListContext = React.memo(TUIMessageListWithContext) as
   typeof TUIMessageListWithContext;
 
-export function TUIMessageList(props: MessageListProps): React.ReactElement {
+export function MessageList(props: MessageListProps): React.ReactElement {
   return (
     <MemoizedTUIMessageListContext {...props} />
   );

package/src/components/{TUIMessageList → MessageList}/hooks/useMessageListElement.tsx

@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useUIKit } from '../../../context';
-import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
+import { TUIMessageProps } from '../../MessageElement/Message';
 import { getTimeStamp } from '../../utils';
 
 interface MessageListElementProps {

package/src/components/MessageList/index.ts

@@ -0,0 +1 @@
+export * from './MessageList';

package/src/components/PlaceHolder/index.tsx

@@ -0,0 +1,79 @@
+import { Icon, IconTypes } from '../Icon';
+import cs from 'classnames';
+
+import './styles/index.scss';
+
+export const PlaceHolderTypes = {
+  LOADING: 'LOADING',
+  NO_CONVERSATIONS: 'NO_CONVERSATIONS',
+  NO_MESSAGES: 'NO_MESSAGES',
+  WRONG: 'WRONG',
+  NO_RESULTS: 'NO_RESULTS',
+} as const;
+
+export const PlaceHolderIconTypes = {
+  [PlaceHolderTypes.LOADING]: IconTypes.LOADING,
+  [PlaceHolderTypes.NO_CONVERSATIONS]: IconTypes.EFFORT,
+  [PlaceHolderTypes.NO_MESSAGES]: IconTypes.EFFORT,
+  [PlaceHolderTypes.WRONG]: IconTypes.CRY,
+  [PlaceHolderTypes.NO_RESULTS]: IconTypes.CRY,
+} as const;
+
+export const PlaceHolderStringTypes = {
+  [PlaceHolderTypes.LOADING]: '',
+  [PlaceHolderTypes.NO_CONVERSATIONS]: 'No conversation',
+  [PlaceHolderTypes.NO_MESSAGES]: 'No message',
+  [PlaceHolderTypes.WRONG]: 'Something was wrong',
+  [PlaceHolderTypes.NO_RESULTS]: 'No results',
+} as const;
+
+export interface PlaceHolderProps {
+  className?: string;
+  type: keyof typeof PlaceHolderTypes;
+  iconSize?: number;
+  searchString?: string;
+  retry?: () => void;
+}
+
+export function PlaceHolder({
+  className = '',
+  type,
+  iconSize = 42,
+  searchString = '',
+  retry,
+}: PlaceHolderProps) {
+  return (
+    <div
+      className={cs(
+        className,
+        'tui-place-holder',
+      )}
+    >
+      {
+        PlaceHolderIconTypes[type] && (
+          <Icon
+            className="tui-place-holder__icon"
+            type={PlaceHolderIconTypes[type]}
+            width={iconSize}
+            height={iconSize}
+          />
+        )
+      }
+      {
+        PlaceHolderStringTypes[type]
+        && (
+          <div className="tui-place-holder__label">
+            {searchString
+              ? `${PlaceHolderStringTypes[type]}  '${searchString}' `
+              : PlaceHolderStringTypes[type]}
+          </div>
+        )
+      }
+      {type === PlaceHolderTypes.WRONG && retry && (
+        <div className="tui-place-holder__button">
+          <button onClick={retry}>Retry</button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/PlaceHolder/styles/index.scss

@@ -0,0 +1,36 @@
+.tui-place-holder {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
+  .tui-place-holder__icon {
+    margin: 10px;
+  }
+
+  .tui-place-holder__label {
+    color: #999;
+    font-weight: 400;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: PingFangSC-Medium;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  .tui-place-holder__button {
+    margin: 20px;
+    background-color: #0365f9;
+    border-radius: 31px;
+    color: #fff;
+    cursor: pointer;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: PingFangSC-Medium;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 12px 36px;
+    text-align: center;
+    user-select: none;
+  }
+}