@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

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

@@ -1,360 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-// message input styles
-.tui-message-input {
-  display: flex;
-  flex-direction: column;
-
-  &-main {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    padding: 14px 12px;
-    gap: 12px;
-
-    .input-box {
-      flex: 1;
-      display: flex;
-      position: relative;
-      min-height: 20px;
-      max-height: 200px;
-      border-radius: 15px;
-      overflow: hidden;
-      padding: 10px;
-
-      .input-visibility-content {
-        min-height: 20px;
-        word-break: break-all;
-        visibility: hidden;
-        max-width: -webkit-fill-available;
-        font-family: PingFangSC-Medium;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 17px;
-        padding: 1px 2px;
-      }
-
-      textarea {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: -webkit-fill-available;
-        height: -webkit-fill-available;
-        flex: 1;
-        font-family: PingFangSC-Medium;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 17px;
-        margin: 9px;
-        resize: none;
-        border: none;
-        background: none;
-
-        @include theme() {
-          color: get(text-color-primary);
-        }
-
-        &:focus,
-        &:active {
-          border: none;
-          outline: none;
-        }
-      }
-    }
-
-    .disabled {
-      display: none;
-    }
-  }
-
-  &-box {
-    flex: 1;
-    display: flex;
-    align-items: center;
-  }
-}
-
-ul li {
-  list-style: none;
-}
-
-.input-plugin-popup {
-  position: relative;
-
-  &-box {
-    position: absolute;
-    z-index: 2;
-    bottom: 30px;
-  }
-}
-
-.input-plugin-item {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 19px;
-  display: flex;
-
-  span {
-    padding: 0 17px;
-  }
-}
-
-// emoji picker styles
-.emoji-picker {
-  .face-list {
-    height: 120px;
-    width: 242px;
-    padding: 10px 5px;
-    display: flex;
-    flex-wrap: wrap;
-    overflow-y: auto;
-
-    &-item {
-      padding: 5px;
-      cursor: pointer;
-      user-select: none;
-
-      img {
-        width: 20px;
-      }
-
-      .face-img {
-        width: 38px;
-      }
-    }
-  }
-
-  .face-tab {
-    display: flex;
-    align-items: center;
-    min-width: 265px;
-
-    &-item {
-      cursor: pointer;
-      width: 24px;
-      padding: 10px;
-
-      img {
-        width: 100%;
-      }
-    }
-  }
-
-  .emoji-plugin-right {
-    right: 0;
-  }
-}
-
-// upload styles
-.upload-picker {
-  position: relative;
-  padding: 10px 16px;
-  min-width: 180px;
-
-  @include theme() {
-    color: get(text-color-primary);
-  }
-
-  &:hover {
-    @include theme() {
-      color: get(text-color-primary);
-      background-color: get(dropdown-color-hover);
-    }
-  }
-
-  input {
-    position: absolute;
-    cursor: pointer;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.input-quote {
-  padding: 7px 16px;
-  display: flex;
-  align-items: center;
-
-  @include theme() {
-    background: get(bg-color-bubble-reciprocal);
-  }
-
-  &-content {
-    flex: 1;
-    background: #fff;
-    padding: 2px 14px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 17px;
-    color: #000;
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 6px;
-      height: 100%;
-      background: #999;
-      top: 0;
-      left: 0;
-    }
-
-    span {
-      padding-top: 8px;
-      opacity: 0.6;
-    }
-  }
-
-  .icon {
-    margin: 0 5px 0 16px;
-  }
-}
-
-// TUIForward
-.tui-forward {
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  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-style: normal;
-    font-weight: 700;
-    font-size: 14px;
-  }
-
-  &-main {
-    padding: 0 20px;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-
-    .no-result {
-      font-size: 14px;
-      padding: 10px;
-      text-align: center;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-
-  &-search {
-    padding: 10px 15px;
-  }
-
-  &-list {
-    padding: 13px 0;
-
-    &-title {
-      font-style: normal;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    &-item {
-      padding: 6px 0;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-
-      .info {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-
-        &-nick {
-          padding: 0 13px;
-          font-style: normal;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          min-width: 180px;
-          max-width: 300px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          width: 80%;
-        }
-      }
-    }
-  }
-
-  &-footer {
-    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-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: #fff;
-      border: none;
-    }
-
-    &-name {
-      flex: 1;
-      overflow: hidden;
-      word-break: break-all;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-    }
-  }
-}
-
-.transmitter {
-  padding: 0 10px;
-
-  .icon-send {
-    transform: rotate(90deg);
-  }
-}

package/src/components/MessageList/MessageList.tsx

@@ -1,133 +0,0 @@
-import React, { PropsWithChildren, useState, useEffect } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Message } from '@tencentcloud/chat';
-import {
-  useTUIChatStateContext,
-  useTUIChatActionContext,
-  useComponentContext,
-} from '../../context';
-import useMessageListElement from './hooks/useMessageListElement';
-
-import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator';
-
-import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-
-import './styles/index.scss';
-
-export interface MessageListProps extends InfiniteScrollProps {
-  className?: string;
-  messageList?: Message[];
-  highlightedMessageId?: string;
-  intervalsTimer?: number;
-}
-function TUIMessageListWithContext<T extends MessageListProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    highlightedMessageId: propsHighlightedMessageId,
-    loadMore: propsLoadMore,
-    intervalsTimer: propsIntervalsTimer,
-    className: propsClassName,
-  } = props;
-
-  const { t } = useUIKit();
-  const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
-  const [firstRender, setFirstRender] = useState<boolean>(false);
-  const {
-    messageList: contextMessageList,
-    highlightedMessageId: contextHighlightedMessageId,
-    isCompleted,
-    isSameLastMessageID,
-    messageListRef,
-    noMore,
-    TUIMessageListConfig,
-  } = useTUIChatStateContext('TUIMessageList');
-  const { loadMore: contextLoadMore, setHighlightedMessageId } = useTUIChatActionContext('TUIMessageList');
-  const { TUIMessage, EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('TUIMessageList');
-
-  const highlightedMessageId = propsHighlightedMessageId
-    || TUIMessageListConfig?.highlightedMessageId
-    || contextHighlightedMessageId;
-
-  const intervalsTimer = (propsIntervalsTimer || TUIMessageListConfig?.intervalsTimer || 30) * 60;
-
-  const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
-
-  const elements = contextMessageList && useMessageListElement({
-    enrichedMessageList: contextMessageList,
-    TUIMessage,
-    intervalsTimer,
-  });
-  useEffect(() => {
-    (async () => {
-      const parentElement = ulElement?.parentElement?.parentElement;
-      if (
-        !isCompleted
-        && parentElement && parentElement?.clientHeight >= ulElement?.clientHeight
-      ) {
-        loadMore && await loadMore();
-      }
-      if (ulElement?.children) {
-        const HTMLCollection = ulElement?.children || [];
-        const element = HTMLCollection[HTMLCollection.length - 1];
-        const timer = setTimeout(() => {
-          if (messageListRef?.current) {
-            messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
-          }
-          setFirstRender(true);
-          clearTimeout(timer);
-        }, 100);
-      }
-    })();
-  }, [elements, firstRender]);
-
-  useEffect(() => {
-    if (highlightedMessageId) {
-      const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
-      if (!element) {
-        return;
-      }
-      const { children } = element;
-      children[children.length - 1].classList.add('high-lighted');
-      if (messageListRef?.current) {
-        const highlightedMessageRect = element.getBoundingClientRect();
-        const messageListRect = messageListRef.current.getBoundingClientRect();
-        const finalScrollTop = highlightedMessageRect.top - messageListRect.top + messageListRef.current.scrollTop;
-        messageListRef.current.scrollTop = finalScrollTop;
-      }
-      const timer = setTimeout(() => {
-        children[children.length - 1].classList.remove('high-lighted');
-        clearTimeout(timer);
-        setHighlightedMessageId && setHighlightedMessageId('');
-      }, 1000);
-    }
-  }, [highlightedMessageId]);
-
-  return (
-    <div className={`message-list ${propsClassName} ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
-      {noMore}
-      {noMore && <p className="no-more">{t('TUIChat.No More')}</p>}
-      <InfiniteScroll
-        className="message-list-infinite-scroll"
-        hasMore
-        loadMore={loadMore}
-        threshold={1}
-      >
-        <ul ref={setUlElement}>
-          {
-            elements?.length && elements.length > 0 ? elements : <EmptyStateIndicator listType="message" />
-          }
-        </ul>
-      </InfiniteScroll>
-    </div>
-  );
-}
-
-const MemoizedTUIMessageListContext = React.memo(TUIMessageListWithContext) as
-  typeof TUIMessageListWithContext;
-
-export function MessageList(props: MessageListProps): React.ReactElement {
-  return (
-    <MemoizedTUIMessageListContext {...props} />
-  );
-}

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

@@ -1,50 +0,0 @@
-import React, {
-  PropsWithChildren, useMemo,
-} from 'react';
-import { Message } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { UnknowPorps } from '../../../context';
-import { TUIMessageProps } from '../../MessageElement/Message';
-import { getTimeStamp } from '../../utils';
-
-interface MessageListElementProps {
-  enrichedMessageList: Message[];
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
-  intervalsTimer?: number;
-}
-
-function useMessageListElement<T extends MessageListElementProps>(
-  props: PropsWithChildren<T>,
-) {
-  const {
-    enrichedMessageList,
-    TUIMessage,
-    intervalsTimer,
-  } = props;
-  const { language } = useUIKit();
-
-  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;
-    return (
-      <li className="message-list-item" key={key}>
-        {
-          isShowIntervalsTimer && (
-            <div className="message-list-time" key={`${currrentTimer + index}`}>
-              {currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}
-            </div>
-          )
-        }
-        {/* // eslint-disable-next-line
-        // @ts-ignore */}
-        <TUIMessage message={item} />
-      </li>
-    );
-  }), [enrichedMessageList]);
-}
-
-export default useMessageListElement;

package/src/components/MessageList/index.ts

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

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

@@ -1,2 +0,0 @@
-@import "./layout.scss";
-@import "./color.scss";

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

@@ -1,61 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-ul,
-li,
-div,
-p,
-label,
-span {
-  margin: 0;
-  padding: 0;
-}
-
-ul li {
-  list-style: none;
-}
-
-.message-list {
-  flex: 1;
-  height: 100%;
-  overflow: hidden auto;
-  position: relative;
-  padding: 0 20px;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  &.hide {
-    opacity: 0;
-  }
-
-  &-item {
-    display: grid;
-    padding: 5px 0;
-  }
-
-  .no-more {
-    text-align: center;
-    font-family: PingFangSC-Medium;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 17px;
-
-    @include theme() {
-      color: get(text-color-secondary);
-    }
-  }
-
-  &-time {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 14px;
-    padding: 10px;
-    text-align: center;
-
-    @include theme() {
-      color: get(text-color-secondary);
-    }
-  }
-}

package/src/components/PlaceHolder/index.tsx

@@ -1,79 +0,0 @@
-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>
-  );
-}