@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/scripts/publish-intl-experience-demo.js

@@ -1,14 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Change directory to tuikit/examples/sample-chat
-process.chdir(path.join('examples', 'sample-chat'));
-
-// Change directory to src
-process.chdir('src');
-process.chdir('demo');
-// Remove file
-fs.unlinkSync('SampleChat.tsx');
-// Rename index-intl.tsx to index
-fs.renameSync('SampleChat-experience.tsx', 'SampleChat.tsx');

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -1,170 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Conversation, Profile } from '@tencentcloud/chat';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { Input } from '../Input';
-import './styles/ConversationCreatGroupDetail.scss';
-import { Icon, IconTypes } from '../Icon';
-import {
-  Avatar,
-  defaultGroupAvatarWork,
-  defaultGroupAvatarAVChatRoom,
-  defaultGroupAvatarMeeting,
-  defaultGroupAvatarPublic, defaultUserAvatar,
-} from '../Avatar';
-import { PageStateTypes } from './ConversationCreate';
-import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
-import { useUIManager } from '../../context';
-import { CreateGroupConversationParams } from '../../hooks';
-
-export interface ConversationCreatGroupDetailProps {
-  profileList: Array<Profile>,
-  pageState: PageStateTypes,
-  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
-  createConversation: (params: string | CreateGroupConversationParams) => Promise<Conversation>,
-  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
-}
-
-export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetailProps) {
-  const {
-    profileList, pageState, setPageState, createConversation, setConversationCreated,
-  } = props;
-  const { t } = useTranslation();
-  const { setActiveConversation, myProfile } = useUIManager();
-  const temp = [...profileList];
-  myProfile && temp.unshift(myProfile);
-  const name = temp.map((item) => item.nick || item.userID).toString();
-  const [groupName, setGroupName] = useState(
-    name.length >= 15 ? `${name.slice(0, 12)}...` : name,
-  );
-  const [groupID, setGroupID] = useState('');
-  const [groupType, setGroupType] = useState<string>('Work');
-  const groupInfoChange = (e: any, type: string) => {
-    const { value } = e.target;
-    switch (type) {
-      case 'name':
-        setGroupName(value);
-        break;
-      case 'id':
-        setGroupID(value);
-        break;
-      case 'type':
-        setGroupType(value);
-        break;
-      default:
-    }
-  };
-  const showGroupTypeInfo = () => {
-    setPageState(PageStateTypes.GROUP_TYPE);
-  };
-  const getDefaultAvatar = (type: string) => {
-    switch (type) {
-      case 'Work':
-        return defaultGroupAvatarWork;
-      case 'Public':
-        return defaultGroupAvatarPublic;
-      case 'Meeting':
-        return defaultGroupAvatarMeeting;
-      case 'AVChatRoom':
-        return defaultGroupAvatarAVChatRoom;
-      default:
-        return '';
-    }
-  };
-  // eslint-disable-next-line
-  // @ts-ignore
-  const getDes = () => typeInfoList?.find((item: any) => item.type === groupType).des;
-
-  const next = async () => {
-    const memberList = profileList.map((item) => ({
-      userID: item.userID,
-    }));
-    const avatar = getDefaultAvatar(groupType);
-    const conversation = await createConversation({
-      name: groupName,
-      // eslint-disable-next-line
-      // @ts-ignore
-      type: GroupType[groupType],
-      groupID,
-      avatar,
-      memberList,
-    });
-    setActiveConversation(conversation);
-    TUIConversationService.switchConversation(conversation?.conversationID);
-    setConversationCreated(false);
-  };
-  return pageState !== PageStateTypes.GROUP_TYPE ? (
-    <>
-      <div className="tui-conversation-create-group-detail">
-        <div className="create-group-box create-group-name">
-          <Input
-            maxLength={15}
-            value={groupName}
-            onChange={(e) => {
-              groupInfoChange(e, 'name');
-            }}
-            border="bottom"
-            customClassName="input-group-name"
-            clearable
-            prefix={<div className="input-group-title">{t('TUIConversation.Group Name')}</div>}
-          />
-        </div>
-        <div className="create-group-box create-group-id">
-          <Input
-            border="bottom"
-            customClassName="input-group-text"
-            clearable
-            value={groupID}
-            onChange={(e) => {
-              groupInfoChange(e, 'id');
-            }}
-            prefix={<div className="input-group-title">{t('TUIConversation.Group ID')}</div>}
-          />
-        </div>
-        <div className="create-group-box create-group-type" onClick={showGroupTypeInfo}>
-          <Input
-            readOnly
-            border="bottom"
-            customClassName="input-group-text"
-            prefix={<div className="input-group-title">{t('TUIConversation.Group Type')}</div>}
-            suffix={(
-              <Icon
-                onClick={showGroupTypeInfo}
-                type={IconTypes.ARROW_RIGHT}
-                width={7}
-                height={12}
-              />
-            )}
-            value={t(`TUIConversation.${groupType}`)}
-            onChange={(e) => {
-              groupInfoChange(e, 'type');
-            }}
-          />
-        </div>
-        <div className="create-group-illustrate">
-          {t(`TUIConversation.${getDes()}`)}
-        </div>
-        <div className="create-group-portrait">
-          <div className="create-group-portrait-title">{t('TUIConversation.Participants')}</div>
-          <div className="create-group-portrait-info-container">
-            {profileList.map(({ avatar, userID, nick }) => (
-              <div className="create-group-portrait-info" key={userID}>
-                <Avatar shape="square" size={50} image={avatar || defaultUserAvatar} />
-                <div className="create-group-portrait-info-nick">{nick}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="tui-conversation-create-next-container">
-        <div role="presentation" className="tui-conversation-create-next" onClick={next}>{t('TUIConversation.Create')}</div>
-      </div>
-    </>
-  ) : (
-    <ConversationGroupTypeInfo
-      groupType={groupType}
-      setGroupType={setGroupType}
-      setPageState={setPageState}
-    />
-  );
-}

package/src/components/ConversationPreview/ConversationListContainer.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import './styles/index.scss';
-
-export interface ConversationListContainerProps {
-  error?: Error | null,
-  loading?: boolean,
-  setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>
-}
-
-export function ConversationListContainer<
-  T extends ConversationListContainerProps
-  >(props: React.PropsWithChildren<T>) {
-  const { children } = props;
-  return (
-    <div className="conversation-list-container">
-      {children}
-    </div>
-  );
-}

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,190 +0,0 @@
-/* eslint-disable react/jsx-key */
-import React, { useRef, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { isPC } from '../../utils/env';
-import { ConversationPreviewUIComponentProps } from './ConversationPreview';
-
-import { Avatar as DefaultAvatar } from '../Avatar/index';
-import './styles/index.scss';
-import { Icon, IconTypes } from '../Icon';
-import { Plugins } from '../Plugins';
-import { useConversation } from '../../hooks';
-import { useUIKit, useUIManager } from '../../context';
-
-export interface IPluginsRef {
-  closeMore?: () => void,
-}
-export function unMemoConversationPreviewContent<T extends ConversationPreviewUIComponentProps>(
-  props: T,
-):React.ReactElement {
-  const {
-    conversation,
-    Avatar = DefaultAvatar,
-    displayImage,
-    displayTitle,
-    displayMessage,
-    displayTime,
-    unread,
-    active,
-    activeConversationID,
-    setActiveConversationID,
-    setActiveConversation,
-  } = props;
-
-  const { t } = useTranslation();
-  const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
-  const { chat } = useUIKit();
-  const { conversation: activeConversation } = useUIManager('ConversationPreviewContent');
-  const { pinConversation, deleteConversation } = useConversation(chat);
-  const activeClass = active ? 'conversation-preview-content--active' : '';
-  const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
-  const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
-  const [isHover, setIsHover] = useState(false);
-  const pluginsRef = useRef<IPluginsRef>(null);
-
-  const onSelectConversation = () => {
-    TUIConversationService.switchConversation(conversation?.conversationID);
-    if (setActiveConversation) {
-      setActiveConversation(conversation);
-    }
-    if (conversationPreviewButton?.current) {
-      conversationPreviewButton.current.blur();
-    }
-  };
-  const handleMouseEnter = () => {
-    setIsHover(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHover(false);
-  };
-  useEffect(() => {
-    if (activeConversationID !== conversation.conversationID) {
-      setIsHover(false);
-    }
-  }, [activeConversationID]);
-  // h5 long press
-  let timer: any;
-  const handleH5LongPress = (type: string) => {
-    if (isPC) return;
-    const { conversationID } = conversation;
-    setActiveConversationID && setActiveConversationID(conversationID);
-    function longPressHandler() {
-      clearTimeout(timer);
-      setIsHover(true);
-    }
-    function touchStartHandler() {
-      timer = setTimeout(longPressHandler, 500);
-    }
-    function touchEndHandler() {
-      clearTimeout(timer);
-    }
-    switch (type) {
-      case 'touchstart':
-        touchStartHandler();
-        break;
-      case 'touchend':
-        touchEndHandler();
-        setTimeout(() => {
-          // setIsHover(false);
-        }, 200);
-        break;
-      default:
-    }
-  };
-
-  const moreHandle = (e: any, type: string) => {
-    const { conversationID, isPinned } = conversation;
-    e.stopPropagation();
-    setIsHover(false);
-    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-    switch (type) {
-      case 'pin':
-        pinConversation({ conversationID, isPinned: !isPinned });
-        break;
-      case 'delete':
-        deleteConversation(conversationID);
-        if (setActiveConversation && conversationID === activeConversation?.conversationID) {
-          setActiveConversation(undefined);
-        }
-        break;
-      default:
-    }
-  };
-
-  return (
-    <button
-      type="button"
-      aria-selected={active}
-      role="option"
-      className={`conversation-preview-container ${activeClass} ${unreadClass} ${pinClass}`}
-      onClick={onSelectConversation}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onTouchStart={() => handleH5LongPress('touchstart')}
-      onTouchEnd={() => handleH5LongPress('touchend')}
-      ref={conversationPreviewButton}
-    >
-      <div className="avatar">
-        <Avatar image={displayImage} name={displayTitle} size={40} />
-      </div>
-      <div className="content">
-        <div className="title text-ellipsis">
-          {displayTitle}
-        </div>
-        <div className="message">
-          {displayMessage}
-        </div>
-      </div>
-      <div className="external">
-        {unread ? (<div className="unread">{unread <= 99 ? unread : '99+'}</div>) : (<div className="unread" />)}
-        {!isHover
-          ? (
-            <div className="time">
-              {displayTime}
-            </div>
-          )
-          : (
-            <div className={`${isHover ? 'more--hover' : 'more'}`}>
-              <Plugins
-                customClass="more-handle-box"
-                ref={pluginsRef}
-                plugins={[
-                  <div
-                    role="presentation"
-                    className="more-handle-item"
-                    onClick={(e) => {
-                      moreHandle(e, 'pin');
-                    }}
-                  >
-                    {t(!conversation.isPinned ? 'TUIConversation.Pin' : 'TUIConversation.Unpin')}
-                  </div>,
-                  <div
-                    className="more-handle-item delete"
-                    onClick={(e) => {
-                      moreHandle(e, 'delete');
-                    }}
-                    role="presentation"
-                  >
-                    {t('TUIConversation.Delete')}
-                  </div>,
-                ]}
-                showNumber={0}
-                MoreIcon={(
-                  <Icon
-                    className="icon-more"
-                    width={16}
-                    height={16}
-                    type={IconTypes.MORE}
-                  />
-              )}
-              />
-            </div>
-          )}
-      </div>
-    </button>
-  );
-}
-
-export const ConversationPreviewContent = React.memo(unMemoConversationPreviewContent) as
-  typeof unMemoConversationPreviewContent;

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

@@ -1,171 +0,0 @@
-@use "../../../styles/colors/color-theme" as *;
-
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
-}
-
-.conversation-preview-container {
-  display: flex;
-  align-items: center;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
-
-  @include theme() {
-    background-color: get(bg-primary);
-  }
-
-  .content {
-    flex: 1 1 auto;
-    text-align: left;
-    margin-left: 10px;
-    min-width: 0;
-
-    .title {
-      font-style: normal;
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 17px;
-      font-family: PingFangSC-Medium;
-      padding: 1px 0;
-      width: 100%;
-
-      @include theme() {
-        color: get(text-primary);
-      }
-    }
-
-    .message {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-family: PingFangSC-Medium;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-
-      @include theme() {
-        color: get(text-secondary);
-      }
-    }
-  }
-
-  .external {
-    text-align: right;
-    flex: 0 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    .unread {
-      height: 19px;
-      padding: 1px 0;
-    }
-
-    .time {
-      font-family: PingFangSC-Medium;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-
-      @include theme() {
-        color: get(text-secondary);
-      }
-    }
-
-    .more--hover {
-      display: flex;
-      justify-content: flex-end;
-      flex: 1 1;
-      .icon-more {
-        transform: scale(1.5);
-        &:hover {
-        }
-      }
-
-      .more-handle-box {
-        top: 0;
-        right: 0;
-        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
-        bottom: initial;
-        padding: 14px 0;
-        box-sizing: border-box;
-        text-align: start;
-        white-space: nowrap;
-
-        .more-handle-item {
-          font-size: 16px;
-          font-family: PingFangSC-Medium;
-          line-height: 19px;
-          padding: 6px 16px;
-          cursor: pointer;
-          font-weight: 500;
-          box-sizing: border-box;
-
-          &.delete {
-            @include theme() {
-              color: get(status-danger);
-            }
-          }
-
-          &:hover {
-            @include theme() {
-              background-color: get(bg-active);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &:hover {
-    @include theme() {
-      background-color: get(bg-active);
-    }
-  }
-
-  &.conversation-preview-content--pin {
-    @include theme() {
-      background-color: get(bg-secondary);
-    }
-  }
-
-  &.conversation-preview-content--active {
-    @include theme() {
-      background-color: get(bg-active);
-    }
-
-    .title {
-      @include theme() {
-        color: get(status-info);
-      }
-    }
-  }
-
-  &.conversation-preview-content--unread {
-    .unread {
-      width: 16px;
-      height: 13px;
-      border-radius: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2px 5px 1px;
-      font-size: 11px;
-      font-weight: 700;
-      margin: 2px 0 2px auto;
-      color: #fff;
-
-      @include theme() {
-        background-color: get(status-danger);
-      }
-    }
-  }
-}

package/src/components/ConversationSearch/ConversationSearchInput.tsx

@@ -1,27 +0,0 @@
-import React, { useState, useEffect, InputHTMLAttributes } from 'react';
-import { useTranslation } from 'react-i18next';
-import './styles/index.scss';
-import { Icon, IconTypes } from '../Icon';
-import { Input, InputProps } from '../Input';
-
-export function ConversationSearchInput(props:InputProps) {
-  const {
-    className = '',
-    placeholder,
-    clearable,
-    value,
-    onChange: handleChange,
-    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
-  } = props;
-  const { t } = useTranslation();
-  return (
-    <Input
-      className={`conversation-search-input ${className}`}
-      placeholder={placeholder || t('TUIConversation.Search')}
-      clearable={clearable}
-      value={value}
-      onChange={handleChange}
-      prefix={prefix}
-    />
-  );
-}

package/src/components/ConversationSearch/ConversationSearchResult.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import {
-  ConversationPreview,
-  ConversationPreviewUIComponentProps,
-} from '../ConversationPreview';
-import { Icon, IconTypes } from '../Icon';
-
-export interface ConversationSearchResultProps {
-  result: Array<Conversation>
-  searchValue?: string,
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>
-}
-export function ConversationSearchResult(props:ConversationSearchResultProps):React.ReactElement {
-  const { result, searchValue, Preview } = props;
-  return (
-    <div>
-      {result?.length === 0 ? (
-        <div className="conversation-search-result no-result">
-          <Icon className="no-result-icon" type={IconTypes.CRY} width={42} height={42} />
-          <span className="no-result-message">{`No results for "${searchValue}"`}</span>
-        </div>
-      )
-        : result.map((item) => {
-          const previewProps = {
-            conversation: item,
-            Preview,
-          };
-          return (
-            <ConversationPreview
-              searchValue={searchValue}
-              key={item.conversationID}
-              {...previewProps}
-            />
-          );
-        })}
-    </div>
-  );
-}

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

@@ -1,20 +0,0 @@
-.conversation-search-result.no-result {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  &-icon {
-    margin: 100px auto 50px;
-  }
-  &-message {
-    color: #999999;
-    font-weight: 400;
-    font-family: PingFangSC-Medium;
-    font-size: 16px;
-    line-height: 22px;
-  }
-}
-.conversation-search-input {
-  height: 36px;
-  width: 100%;
-}

package/src/components/TUIChat/index.ts

@@ -1,2 +0,0 @@
-export * from './TUIChat';
-export * from './hooks/useCreateTUIChatStateContext';

package/src/components/TUIChat/unitls.ts

@@ -1,39 +0,0 @@
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import constant from '../../constants';
-import { JSONStringToParse } from '../untils';
-
-export const handleMessage = (messageList:Array<Message>):Array<Message> => {
-  let customPayloadData: any = null;
-  return messageList.filter((item) => {
-    if (item.type === TencentCloudChat.TYPES.MSG_CUSTOM) {
-      customPayloadData = JSONStringToParse(item?.payload?.data);
-    }
-    if (customPayloadData && customPayloadData?.businessID === constant.TYPE_TYPING) {
-      return false;
-    }
-    return true;
-  });
-};
-
-export const handleEditMessage = (
-  messageList: Array<Message>,
-  message: Message,
-) => {
-  const list = [...messageList];
-  const index = list.findIndex((item) => item?.ID === message?.ID);
-  list[index] = message;
-  return list;
-};
-
-export const handleUploadPendingMessage = (
-  messageList: Array<Message>,
-  message: Message,
-) => {
-  const list = [...messageList];
-  if (!list.some((item:Message) => item.ID === message?.ID)) {
-    list.push(message);
-  }
-  const index = list.findIndex((item) => item?.ID === message?.ID);
-  list[index] = message;
-  return list;
-};