@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import cs from 'classnames';
-import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { ConversationPreview as DefaultConversationPreview, IConversationPreviewProps } from '../../ConversationPreview';
-import { Avatar as DefaultAvatar, AvatarProps } from '../../Avatar';
-import { PlaceHolder, PlaceHolderTypes } from '../../PlaceHolder';
-
-import './ConversationSearchResult.scss';
-
-interface IConversationSearchResultProps {
-  /** Whether to show the search result */
-  visible?: boolean;
-  /** The search result */
-  searchResult?: IConversationModel[];
-  /** The search input value */
-  searchValue?: string;
-  /** The custom ResultPreview component */
-  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
-  /** The custom Avatar component */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** The custom no result Placeholder component */
-  PlaceholderNoResult?: React.ReactNode;
-  /**  Callback when the ResultPreview is clicked */
-  onSelectResult?: (conversation: IConversationModel) => void;
-  /** The custom class name */
-  className?: string;
-  /** The custom css style */
-  style?: React.CSSProperties;
-}
-
-function ConversationSearchResult(props: IConversationSearchResultProps) {
-  const {
-    visible = false,
-    searchResult,
-    searchValue,
-    Avatar = DefaultAvatar,
-    ResultPreview = DefaultConversationPreview,
-    PlaceholderNoResult = <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />,
-    onSelectResult,
-    className,
-    style,
-  } = props;
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cs('uikit-conversation-search-result', className)}
-      style={style}
-    >
-      {searchResult?.length === 0
-        ? PlaceholderNoResult
-        : (searchResult?.map(item => (
-            <ResultPreview
-              key={item.conversationID}
-              conversation={item}
-              Avatar={Avatar}
-              highlightMatchString={searchValue}
-              onSelectConversation={onSelectResult}
-            />
-          ))
-          )}
-    </div>
-  );
-}
-
-export {
-  ConversationSearchResult,
-  IConversationSearchResultProps,
-};

package/src/components/ConversationSearch/ConversationSearchResult/index.ts

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

package/src/components/ConversationSearch/index.ts

@@ -1,3 +0,0 @@
-export * from './ConversationSearchInput/ConversationSearchInput';
-export * from './ConversationSearchResult/ConversationSearchResult';
-export * from './ConversationSearch';

package/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx

@@ -1,115 +0,0 @@
-import React, {
-  PropsWithChildren, useCallback, useEffect, useRef,
-} from 'react';
-
-/**
- * Prevents Chrome hangups
- * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
- */
-const mousewheelListener = (event: Event) => {
-  if (event instanceof WheelEvent && event.deltaY === 1) {
-    event.preventDefault();
-  }
-};
-
-export interface InfiniteScrollProps {
-  className?: string;
-  element?: React.ElementType;
-  hasMore?: boolean;
-  hasMoreNewer?: boolean;
-  initialLoad?: boolean;
-  isLoading?: boolean;
-  listenToScroll?: (offset: number, reverseOffset: number, threshold: number) => void;
-  loader?: React.ReactNode;
-  loading?: React.ReactNode;
-  loadMore?: () => void;
-  loadMoreNewer?: () => void;
-  pageStart?: number;
-  threshold?: number;
-  useCapture?: boolean;
-}
-
-export function InfiniteScroll(props: PropsWithChildren<InfiniteScrollProps>) {
-  const {
-    children,
-    element = 'div',
-    hasMore = false,
-    hasMoreNewer = false,
-    initialLoad = true,
-    isLoading = false,
-    listenToScroll,
-    loader,
-    loadMore,
-    loadMoreNewer,
-    threshold = 150,
-    useCapture = false,
-    ...elementProps
-  } = props;
-
-  const scrollComponent = useRef<HTMLElement>();
-
-  const scrollListener = useCallback(() => {
-    const ele = scrollComponent.current;
-
-    if (!ele || ele.offsetParent === null) {
-      return;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const parentElement = ele.parentElement!;
-
-    const offset = ele.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
-    const reverseOffset = parentElement.scrollTop;
-
-    if (listenToScroll) {
-      listenToScroll(offset, reverseOffset, threshold);
-    }
-
-    if (reverseOffset < Number(threshold) && typeof loadMore === 'function' && hasMore) {
-      loadMore();
-    }
-
-    if (offset < Number(threshold) && typeof loadMoreNewer === 'function' && hasMoreNewer) {
-      loadMoreNewer();
-    }
-  }, [hasMore, hasMoreNewer, threshold, listenToScroll, loadMore, loadMoreNewer]);
-
-  useEffect(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
-
-    if (isLoading || !scrollElement) {
-      return () => undefined;
-    }
-
-    scrollElement.addEventListener('scroll', scrollListener, useCapture);
-    scrollElement.addEventListener('resize', scrollListener, useCapture);
-
-    return () => {
-      scrollElement.removeEventListener('scroll', scrollListener, useCapture);
-      scrollElement.removeEventListener('resize', scrollListener, useCapture);
-    };
-  }, [initialLoad, isLoading, scrollListener, useCapture]);
-
-  useEffect(() => {
-    const scrollElement = scrollComponent.current?.parentNode;
-    if (scrollElement) {
-      scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
-    }
-    return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
-      }
-    };
-  }, [useCapture]);
-
-  const attributes = {
-    ...elementProps,
-    ref: (ele: HTMLElement) => {
-      scrollComponent.current = ele;
-    },
-  };
-
-  const childrenArray = [loader, children];
-
-  return React.createElement(element, attributes, childrenArray);
-}

package/src/components/InfiniteScrollPaginator/index.ts

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

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

@@ -1,62 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-kit-input-box {
-  //width: 100%;
-  display: flex;
-  align-items: center;
-  border-radius: 10px;
-  padding: 0 8px;
-  height: 38px;
-  box-sizing: border-box;
-
-  @include theme() {
-    background-color: get(bg-color-input);
-  }
-
-  &.tui-kit-input-box--focus {
-    @include theme() {
-      outline: 1px solid get(text-color-link);
-    }
-  }
-
-  &.tui-kit-input-border--bottom {
-    outline: none;
-    border-radius: 0;
-
-    @include theme() {
-      border-bottom: 1px solid get(stroke-color-primary);
-      background-color: get(bg-color-operate);
-    }
-  }
-
-  .tui-kit-input {
-    margin-left: 6px;
-    margin-right: auto;
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    background-color: transparent;
-    border-radius: 10px;
-    border: none;
-    box-sizing: border-box;
-    font-size: 14px;
-
-    @include theme() {
-      color: get(text-color-primary);
-    }
-
-    &:focus {
-      border: none;
-      outline: none;
-    }
-
-    &::placeholder {
-      padding: 2px 0;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-}

package/src/components/MessageElement/Message.tsx

@@ -1,150 +0,0 @@
-import React, { PropsWithChildren, ReactEventHandler } from 'react';
-import { Message } from '@tencentcloud/chat';
-
-import { UnknowPorps, useComponentContext, useTUIChatStateContext } from '../../context';
-
-import { messageShowType, TUIMessageContextProvider } from '../../context/MessageContext';
-import { useMessageHandler } from './hooks';
-
-import './styles/index.scss';
-import { TUIMessageDefault } from './MessageDefault';
-import { MessagePlugins as MessagePluginsDefault, MessagePluginsProps } from './MessagePlugins';
-import { MessageContext as MessageContextDefault } from './MessageContext';
-
-interface TUIMessageBasicProps {
-  className?: string;
-  filter?: (data: Message) => void;
-  isShowTime?: boolean;
-  isShowRead?: boolean;
-  plugin?: MessagePluginsProps;
-  prefix?: React.ReactElement | string;
-  suffix?: React.ReactElement | string;
-  customName?: React.ReactElement;
-  showAvatar?: messageShowType;
-  showName?: messageShowType;
-  customAvatar?: React.ReactElement;
-  isShowProgress?: boolean;
-  Progress?: React.ComponentType<{ message: Message }>;
-}
-
-export interface TUIMessageProps extends TUIMessageBasicProps {
-  message?: Message;
-  className?: string;
-  TUIMessage?: React.ComponentType;
-  MessageContext?: React.ComponentType<UnknowPorps>;
-  MessagePlugins?: React.ComponentType<UnknowPorps>;
-  handleDelete?: ReactEventHandler;
-  CustemElement?: React.ComponentType<{ message: Message }>;
-  TextElement?: React.ComponentType<{ message: Message }>;
-  ImageElement?: React.ComponentType<{ message: Message }>;
-  VideoElement?: React.ComponentType<{ message: Message }>;
-  AudioElement?: React.ComponentType<{ message: Message }>;
-  FileElement?: React.ComponentType<{ message: Message }>;
-  MergerElement?: React.ComponentType<{ message: Message }>;
-  LocationElement?: React.ComponentType<{ message: Message }>;
-  FaceElement?: React.ComponentType<{ message: Message }>;
-}
-function TUIMessageWithContext<T extends TUIMessageProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message: propsMessage,
-    TUIMessage: propTUIMessage,
-    MessagePlugins: propMessagePlugins,
-    MessageContext: propMessageContext,
-    handleDelete,
-    CustemElement,
-    TextElement,
-    ImageElement,
-    VideoElement,
-    AudioElement,
-    FileElement,
-    MergerElement,
-    LocationElement,
-    FaceElement,
-    className,
-    filter: propsFilter,
-    isShowTime,
-    isShowRead,
-    plugin,
-    prefix,
-    suffix,
-    customName,
-    showAvatar,
-    showName,
-    customAvatar,
-    isShowProgress,
-    Progress,
-  } = props;
-
-  const {
-    MessagePlugins: ContextMessagePlugins,
-    MessageContext: ContextMessageContext,
-  } = useComponentContext('TUIMessage');
-
-  const {
-    messageConfig,
-  } = useTUIChatStateContext('TUIMessage');
-
-  const TUIMessageUIComponent = propTUIMessage || TUIMessageDefault;
-  const MessagePlugins = propMessagePlugins || ContextMessagePlugins || MessagePluginsDefault;
-  const MessageContext = propMessageContext || ContextMessageContext || MessageContextDefault;
-
-  const filter = propsFilter || messageConfig?.filter;
-  const message = propsMessage || messageConfig?.message;
-  if (filter && message) {
-    filter(message);
-  }
-
-  const messageContextValue = {
-    message,
-    handleDelete: handleDelete || messageConfig?.handleDelete,
-    CustemElement: CustemElement || messageConfig?.CustemElement,
-    TextElement: TextElement || messageConfig?.TextElement,
-    ImageElement: ImageElement || messageConfig?.ImageElement,
-    VideoElement: VideoElement || messageConfig?.VideoElement,
-    AudioElement: AudioElement || messageConfig?.AudioElement,
-    FileElement: FileElement || messageConfig?.FileElement,
-    MergerElement: MergerElement || messageConfig?.MergerElement,
-    LocationElement: LocationElement || messageConfig?.LocationElement,
-    FaceElement: FaceElement || messageConfig?.FaceElement,
-    isShowTime: isShowTime || messageConfig?.isShowTime,
-    isShowRead: isShowRead || messageConfig?.isShowRead,
-    plugin: plugin || messageConfig?.plugin,
-    prefix: prefix || messageConfig?.prefix,
-    suffix: suffix || messageConfig?.suffix,
-    customName: customName || messageConfig?.customName,
-    showAvatar: showAvatar || messageConfig?.showAvatar,
-    showName: showName || messageConfig?.showName,
-    customAvatar: customAvatar || messageConfig?.customAvatar,
-    isShowProgress: isShowProgress || messageConfig?.isShowProgress,
-    Progress: Progress || messageConfig?.Progress,
-  };
-
-  return (
-    <TUIMessageContextProvider value={messageContextValue}>
-      <TUIMessageUIComponent
-        message={message}
-        MessageContext={MessageContext}
-        MessagePlugins={MessagePlugins}
-        className={className || messageConfig?.className}
-      />
-    </TUIMessageContextProvider>
-  );
-}
-
-const MemoizedTUIMessage = React.memo(TUIMessageWithContext) as
-typeof TUIMessageWithContext;
-
-export function TUIMessage(props: TUIMessageProps): React.ReactElement {
-  const {
-    message,
-  } = props;
-  const { handleDelMessage } = useMessageHandler({ message });
-  return (
-    <MemoizedTUIMessage
-      handleDelete={handleDelMessage}
-      {...props}
-    />
-  );
-}

package/src/components/MessageElement/MessageAudio.tsx

@@ -1,89 +0,0 @@
-import React, {
-  PropsWithChildren, useCallback, useEffect, useRef, useState,
-} from 'react';
-import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
-import { Icon, IconTypes } from '../Icon';
-import type { MessageContextProps } from './MessageText';
-
-function MessageAudioWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
-  const {
-    context,
-    message,
-    children,
-  } = props;
-
-  const { setAudioSource } = useTUIChatActionContext('MessageAudioWithContext');
-  const { audioSource } = useTUIChatStateContext('MessageAudioWithContext');
-  const [currentTime, setCurrentTime] = useState(0);
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [playClassName, setPlayClassName] = useState(false);
-
-  const play = useCallback(() => {
-    if (audioSource && audioSource !== audioRef?.current) {
-      audioSource.pause();
-      audioSource.currentTime = 0;
-      setAudioSource && setAudioSource(null);
-    }
-    if (audioRef?.current) {
-      if (!audioRef.current.paused) {
-        audioRef.current.pause();
-        endFunction();
-      } else {
-        audioRef.current.play();
-        setPlayClassName(true);
-        setAudioSource && setAudioSource(audioRef.current);
-      }
-    }
-  }, [audioRef, audioSource]);
-
-  const pauseFunction = () => {
-    setPlayClassName(false);
-  };
-  const endFunction = () => {
-    setAudioSource && setAudioSource(null);
-    if(audioRef.current) {
-      audioRef.current.currentTime = 0
-    }
-    pauseFunction();
-  };
-
-  useEffect(() => {
-    if (audioRef?.current) {
-      audioRef.current.addEventListener('pause', pauseFunction);
-      audioRef.current.addEventListener('ended', endFunction);
-      audioRef.current.addEventListener('canplay', () => {
-        setCurrentTime(parseInt(`${audioRef.current?.duration}`, 10));
-      });
-    }
-    return () => {
-      if (audioRef?.current) {
-        audioRef.current.removeEventListener('pause', pauseFunction);
-        audioRef.current.removeEventListener('ended', endFunction);
-      }
-    };
-  }, [audioRef]);
-
-  return (
-    <div className="message-audio">
-      <div className={`message-audio-content message-audio-${message?.flow}`}>
-        <Icon className={`${message?.flow} ${playClassName ? 'playing' : ''}`} type={IconTypes.VOICE} width={16} height={16} onClick={play} />
-        <span>{`${currentTime}s`}</span>
-      </div>
-      <audio src={context?.url} ref={audioRef} controls className="message-audio-none">
-        <track kind="captions" />
-      </audio>
-      {children}
-    </div>
-  );
-}
-
-const MemoizedMessageAudio = React.memo(MessageAudioWithContext) as
-typeof MessageAudioWithContext;
-
-export function MessageAudio(props:MessageContextProps):React.ReactElement {
-  return (
-    <MemoizedMessageAudio {...props} />
-  );
-}

package/src/components/MessageElement/MessageAvatar.tsx

@@ -1,38 +0,0 @@
-import React, {
-  PropsWithChildren,
-} from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { MESSAGE_FLOW } from '../../constants';
-import { messageShowType } from '../../context';
-import { Avatar } from '../Avatar';
-import { handleDisplayAvatar } from '../utils';
-
-export interface MessageAvatarProps {
-  CustomAvatar?: React.ReactElement;
-  className?: string;
-  message: Message;
-  showType?: messageShowType;
-}
-
-export function MessageAvatar<T extends MessageAvatarProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    className,
-    CustomAvatar,
-    message,
-    showType,
-  } = props;
-
-  const show = showType === messageShowType.ALL || message?.flow === showType;
-
-  if (!show || showType === messageShowType.NONE) {
-    return <></>;
-  }
-
-  if (CustomAvatar) {
-    return CustomAvatar;
-  }
-
-  return (<Avatar size={32} image={handleDisplayAvatar(message?.avatar)} />);
-}

package/src/components/MessageElement/MessageBubble.tsx

@@ -1,137 +0,0 @@
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useState,
-} from 'react';
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { MESSAGE_STATUS } from '../../constants';
-import { isCallMessage } from './utils';
-import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
-import { Icon, IconTypes } from '../Icon';
-import { useMessageReply } from './hooks/useMessageReply';
-import { MessageProgress } from './MessageProgress';
-
-export interface MessageBubbleProps {
-  message?: Message;
-  className?: string;
-  children?: ReactNode;
-  Context?: React.ComponentType<any>;
-  Plugins?: React.ComponentType<any> | undefined;
-}
-
-function MessageBubbleWithContext<T extends MessageBubbleProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    message,
-    children,
-    Context,
-    Plugins,
-  } = props;
-
-  const [PluginsShow, setPluginsShow] = useState(false);
-
-  const {
-    messageReply,
-    replyMessage,
-    sender,
-  } = useMessageReply({ message });
-
-  const { setHighlightedMessageId, setActiveMessageID } = useTUIChatActionContext('MessageBubbleWithContext');
-  const { activeMessageID } = useTUIChatStateContext('MessageBubbleWithContext');
-
-  const handleLoading = () => !!((
-    message?.type === TencentCloudChat.TYPES.MSG_IMAGE
-    || message?.type === TencentCloudChat.TYPES.MSG_VIDEO
-    || message?.type === TencentCloudChat.TYPES.MSG_FILE
-  ) && message?.status === MESSAGE_STATUS.UNSEND);
-
-  const handleMouseEnter = () => {
-    setActiveMessageID && message && setActiveMessageID(message?.ID);
-    setPluginsShow(true);
-  };
-  const handleMouseLeave = () => {
-    setActiveMessageID && message && setActiveMessageID(message.ID);
-    setPluginsShow(false);
-  };
-
-  const activeMessage = () => {
-    setActiveMessageID && message && setActiveMessageID(message.ID);
-  };
-
-  useEffect(() => {
-    if (activeMessageID !== message?.ID) {
-      setPluginsShow(false);
-    }
-  }, [activeMessageID]);
-
-  const handleReplyMessage = () => {
-    // eslint-disable-next-line
-    // @ts-ignore
-    setHighlightedMessageId && setHighlightedMessageId(replyMessage?.ID);
-  };
-
-  return (
-    <div className="meesage-bubble">
-      <div
-        className={`meesage-bubble-context ${message?.flow}`}
-        role="button"
-        tabIndex={0}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={activeMessage}
-      >
-        <div
-          className={
-            `message-context
-            ${messageReply ? `meesage-bubble-reply meesage-bubble-reply-${message?.flow}` : ''}
-            ${handleLoading() ? 'loading' : ''}`
-          }
-        >
-          {
-            messageReply && (
-              <div
-                className="meesage-bubble-reply-main"
-                role="menuitem"
-                tabIndex={0}
-                onClick={handleReplyMessage}
-              >
-                <header className="title">{sender}</header>
-                {Context && <Context message={replyMessage} />}
-              </div>
-            )
-          }
-          {children}
-          <MessageProgress message={message} />
-        </div>
-        {
-          Plugins && (
-            <div className="message-plugin">
-              {PluginsShow && <Plugins message={message} />}
-            </div>
-          )
-        }
-      </div>
-      <div className="message-bubble-status icon">
-        {
-          message?.status === MESSAGE_STATUS.FAIL
-          && <i className="icon-fail" />
-        }
-        {
-          message?.status === MESSAGE_STATUS.UNSEND
-          && <Icon width={10} height={10} type={IconTypes.PROGRESS} />
-        }
-      </div>
-    </div>
-  );
-}
-
-const MemoizedMessageBubble = React.memo(MessageBubbleWithContext) as
-typeof MessageBubbleWithContext;
-
-export function MessageBubble(props: MessageBubbleProps): React.ReactElement {
-  return (
-    <MemoizedMessageBubble {...props} />
-  );
-}