@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIMessageInput → MessageInput}/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/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,16 +3,16 @@ import React, {
 } from 'react';
 import { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useUIKit } from '../../../context';
-import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
-import { getTimeStamp } from '../../untils';
+import { TUIMessageProps } from '../../MessageElement/Message';
+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/MessageList/index.ts

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

package/src/components/{TUIMessageList → MessageList}/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/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;
+  }
+}

package/src/components/Plugins/index.tsx

@@ -9,23 +9,27 @@ import { usePluginsElement } from './hooks';
 import './styles/index.scss';
 
 export interface PluginsProps {
-  plugins?: Array<any>,
-  showNumber?: number,
-  MoreIcon?: any,
-  className?: string,
-  customClass?: string,
-  style?: any,
-  root?: any,
-  handleVisible?: (isVisible:any) => void,
-  showMore?: boolean,
+  plugins?: any[];
+  showNumber?: number;
+  MoreIcon?: any;
+  className?: string;
+  customClass?: string;
+  style?: any;
+  root?: any;
+  handleVisible?: (isVisible: any) => void;
+  showMore?: boolean;
+}
+
+export interface IPluginsRef {
+  closeMore?: () => void;
 }
 
 function PluginsWithContext<T extends PluginsProps>(
-  props:PropsWithChildren<T>,
- // eslint-disable-next-line 
+  props: PropsWithChildren<T>,
+  // eslint-disable-next-line
  // @ts-ignore
   ref,
-):React.ReactElement {
+): React.ReactElement {
   const {
     plugins = [],
     showNumber,
@@ -72,12 +76,12 @@ function PluginsWithContext<T extends PluginsProps>(
       });
     }
   };
-// eslint-disable-next-line
+  // eslint-disable-next-line
 // @ts-ignore
   return (
     ((showPicker && showPicker.length > 0) || (elements && elements?.length > 0)) && (
       <ul className={`plugin ${className}`}>
-        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index: number) => {
           const key = `${Item}${index}`;
           return (
             <li className="plugin-item" key={key}>
@@ -86,38 +90,38 @@ function PluginsWithContext<T extends PluginsProps>(
           );
         })}
         {
-        elements && elements?.length > 0 && (
-          <div className="plugin-popup" ref={pluginRef}>
-            <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
-              {
-                !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
-              }
-              {
-                MoreIcon && MoreIcon
-              }
+          elements && elements?.length > 0 && (
+            <div className="plugin-popup" ref={pluginRef}>
+              <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
+                {
+                  !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
+                }
+                {
+                  MoreIcon && MoreIcon
+                }
+              </div>
+              <Popup
+                className={`plugin-popup-box ${customClass}`}
+                style={style}
+                show={show}
+                close={handleShow}
+                root={root}
+                handleVisible={pluginHandleVisible}
+              >
+                <ul>
+                  {elements.map((Item, index: number) => {
+                    const key = `${Item}${index}`;
+                    return (
+                      <li className="plugin-item" key={key}>
+                        {Item}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </Popup>
             </div>
-            <Popup
-              className={`plugin-popup-box ${customClass}`}
-              style={style}
-              show={show}
-              close={handleShow}
-              root={root}
-              handleVisible={pluginHandleVisible}
-            >
-              <ul>
-                {elements.map((Item, index:number) => {
-                  const key = `${Item}${index}`;
-                  return (
-                    <li className="plugin-item" key={key}>
-                      {Item}
-                    </li>
-                  );
-                })}
-              </ul>
-            </Popup>
-          </div>
-        )
-      }
+          )
+        }
       </ul>
     )
   );

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

@@ -3,19 +3,11 @@
 .plugin-popup {
   &-box {
     border-radius: 16px;
+    overflow: hidden;
 
     @include theme() {
-      color: get(text-primary);
-    }
-
-    [data-uikit-theme="light"] & {
-      background-color: var(--chat-theme-light-bg-primary);
-      box-shadow: var(--chat-theme-light-box-shadow-1);
-    }
-
-    [data-uikit-theme="dark"] & {
-      background-color: var(--chat-theme-dark-bg-3);
-      box-shadow: var(--chat-theme-dark-box-shadow-1);
+      background-color: get(dropdown-color-default);
+      box-shadow: 0 0 10px 0 get(shadow-color);
     }
   }
 }

package/src/components/Profile/Profile.tsx

@@ -1,25 +1,50 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
+import { MyProfile } from './myProfile/index';
+
 import './styles/index.scss';
-import { Profile as TProfile } from '@tencentcloud/chat';
-import { Avatar, defaultUserAvatar } from '../Avatar';
-import { Icon, IconTypes } from '../Icon';
-
-export interface ProfileProps {
-  profile?: TProfile,
-  className?: string,
-  handleAvatar?: () => void,
+import { useMyProfile } from './hooks';
+import { TUIProfileDefault } from './ProfileDefault';
+import { useUIManager } from '../../context';
+
+interface TUIProfileProps {
+  className?: string;
+  TUIProfile?: React.ComponentType<any>;
 }
-export function Profile<T extends ProfileProps>(props: T) {
-  const { profile, className = '', handleAvatar } = props;
-  return (profile?.nick || profile?.userID) && (
-    <div className={`profile ${className}`}>
-      <div className="profile-content">
-        <Avatar size={32} image={profile.avatar || defaultUserAvatar} onClick={handleAvatar} />
-        <div className="profile-name">{profile.nick || profile.userID}</div>
-      </div>
-      <div className="profile-more">
-        <Icon type={IconTypes.ELLIPSE} width={18} height={5} onClick={handleAvatar} />
-      </div>
-    </div>
+
+function UnMemoizedProfile<T extends TUIProfileProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
+  const {
+    className,
+    TUIProfile: PropTUIProfile,
+  } = props;
+
+  const { myProfile, updateMyProfile } = useMyProfile();
+
+  const { setTUIProfileShow, TUIProfileShow } = useUIManager('TUIProfile');
+
+  const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
+
+  return (
+    <>
+      {/* //eslint-disable-next-line
+    @ts-ignore */}
+      <MyProfile
+        profile={myProfile}
+        handleAvatar={() => {
+          setTUIProfileShow && setTUIProfileShow(true);
+        }}
+      />
+      {TUIProfileShow && (
+        <TUIProfileUIComponent
+          className={className}
+          userInfo={myProfile}
+          update={updateMyProfile}
+        />
+      )}
+    </>
   );
 }
+
+export const Profile = React.memo(UnMemoizedProfile) as
+typeof UnMemoizedProfile;