@tencentcloud/chat-uikit-react 0.0.3 → 1.0.1

package/src/components/TUIMessageInput/hooks/useMessageInputText.tsx

@@ -2,22 +2,21 @@ import React, {
   useCallback,
   ChangeEventHandler,
   MutableRefObject,
-  useEffect,
-  useState,
 } from 'react';
-import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE } from '../../../constants';
+import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
-  useTUIChatStateContext,
   useTUIKitContext,
 } from '../../../context';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
+import { filesData } from './useUploadPicker';
 
 interface useMessageInputTextProps extends IbaseStateProps {
   focus?: boolean,
   textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void
 }
 
 export const useMessageInputText = (props:useMessageInputTextProps) => {
@@ -26,19 +25,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     dispatch,
     focus,
     textareaRef,
+    sendUploadMessage,
   } = props;
 
-  const [quoteMessage, setQuoteMessage] = useState(null);
-
   const { tim } = useTUIKitContext('useMessageInputText');
   const { sendMessage, createTextMessage, operateMessage } = useTUIChatActionContext('TUIMessageInput');
-  const {
-    operateData,
-  } = useTUIChatStateContext('TUIMessageInputDefault');
-
-  useEffect(() => {
-    setQuoteMessage(operateData[MESSAGE_OPERATE.QUOTE]);
-  }, [operateData]);
 
   const { cloudCustomData } = useHandleQuoteMessage();
 
@@ -101,27 +92,34 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   );
 
   const handlePasete = useCallback(
-    async (e: ClipboardEvent) => {
+    async (e: React.ClipboardEvent | any) => {
       e.preventDefault();
       if (!(e.clipboardData && e.clipboardData.items)) {
         return;
       }
-      const str = formatEmojiString(e.clipboardData.getData('text'), 1);
-      if (str) {
-        dispatch({
-          type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-          getNewText: (text:string) => `${text}${str}`,
-        });
-      }
-      //  else {
-      //   for (let i = 0; i < e.clipboardData.items.length; i += 1) {
-      //     const item = e.clipboardData.items[i];
-      //     if (item.kind === 'file') {
-      //       const f = item.getAsFile();
-      //       console.log('file', f);
-      //     }
-      //   }
-      // }
+      const { types, items } = e.clipboardData;
+      types.find((type, index) => {
+        const item = items[index];
+        switch (type) {
+          case 'text/plain':
+            item.getAsString((str) => {
+              dispatch({
+                type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+                getNewText: (text:string) => `${text}${str}`,
+              });
+            });
+            return true;
+          case 'Files': {
+            const file = item.getAsFile();
+            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+              sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
+            }
+            return true;
+          }
+          default:
+            return false;
+        }
+      });
     },
     [textareaRef],
   );

package/src/components/TUIMessageInput/hooks/useUploadPicker.tsx

@@ -16,6 +16,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     createImageMessage,
     createVideoMessage,
     createFileMessage,
+    updataUploadPenddingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
   const creatUploadMessage = {
@@ -29,6 +30,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
       payload: file,
       onProgress(num:number) {
         message.progress = num;
+        updataUploadPenddingMessageList(message);
       },
     });
     sendMessage(message);

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

@@ -7,6 +7,7 @@
     display: flex;
     align-items: center;
     padding: 14px 12px;
+    gap: 12px;
     .input-box {
       flex: 1;
       display: flex;
@@ -55,6 +56,11 @@
       display: none;
     }
   }
+  &-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
 }
 
 ul li {
@@ -115,6 +121,9 @@ ul li {
       }
     }
   }
+  .emoji-plugin-right {
+    right: 0;
+  }
 }
 
 
@@ -279,4 +288,11 @@ ul li {
       -webkit-box-orient: vertical;
     }
   }
+}
+
+.transmitter {
+  padding: 0 10px;
+  .icon-send {
+    transform: rotate(90deg);
+  }
 }

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -14,9 +14,11 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyState
 
 import './styles/index.scss';
 
-interface MessageListProps extends InfiniteScrollProps {
+export interface MessageListProps extends InfiniteScrollProps {
+  className?: string,
   messageList?: Array<Message>,
   highlightedMessageId?: string,
+  intervalsTimer?: number,
 }
 function TUIMessageListWithContext <T extends MessageListProps>(
   props: PropsWithChildren<T>,
@@ -25,6 +27,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     messageList: propsMessageList,
     highlightedMessageId: propsHighlightedMessageId,
     loadMore: propsLoadMore,
+    intervalsTimer: propsIntervalsTimer,
   } = props;
 
   const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
@@ -37,20 +40,26 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     isSameLastMessageID,
     messageListRef,
     noMore,
+    TUIMessageListConfig,
   } = useTUIChatStateContext('TUIMessageList');
-  const { loadMore: contextLoadMore } = useTUIChatActionContext('TUIMessageList');
+  const { loadMore: contextLoadMore, setHighlightedMessageId } = useTUIChatActionContext('TUIMessageList');
   const { TUIMessage, EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('TUIMessageList');
-  const highlightedMessageId = propsHighlightedMessageId || contextHighlightedMessageId;
+
+  const highlightedMessageId = propsHighlightedMessageId
+  || TUIMessageListConfig?.highlightedMessageId
+  || contextHighlightedMessageId;
+  const intervalsTimer = (propsIntervalsTimer || TUIMessageListConfig?.intervalsTimer || 30) * 60;
 
   const { messageList: enrichedMessageList } = useEnrichedMessageList({
-    messageList: propsMessageList || contextMessageList,
+    messageList: propsMessageList || TUIMessageListConfig?.messageList || contextMessageList,
   });
 
-  const loadMore = propsLoadMore || contextLoadMore;
+  const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
 
   const elements = useMessageListElement({
     enrichedMessageList,
     TUIMessage,
+    intervalsTimer,
   });
 
   useEffect(() => {
@@ -59,10 +68,6 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       if (!isCompleted && parentElement?.clientHeight >= ulElement?.clientHeight) {
         await loadMore();
       }
-      if (highlightedMessageId) {
-        const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
-        element?.scrollIntoView({ block: 'center' });
-      }
 
       if (ulElement?.children && (!firstRender || !isSameLastMessageID)) {
         const HTMLCollection = ulElement?.children || [];
@@ -76,8 +81,25 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     })();
   }, [elements, firstRender]);
 
+  useEffect(() => {
+    if (highlightedMessageId) {
+      const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+      if (!element) {
+        return;
+      }
+      const { children } = element.children[1];
+      children[children.length - 1].classList.add('high-lighted');
+      element?.scrollIntoView({ block: 'center' });
+      const timer = setTimeout(() => {
+        children[children.length - 1].classList.remove('high-lighted');
+        clearTimeout(timer);
+        setHighlightedMessageId('');
+      }, 1000);
+    }
+  }, [highlightedMessageId]);
+
   return (
-    <div className="message-list" ref={messageListRef}>
+    <div className={`message-list ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
       {noMore}
       {noMore && <p className="no-more">no More</p>}
       <InfiniteScroll

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

@@ -1,22 +1,42 @@
-import React, { PropsWithChildren, useEffect, useMemo } from 'react';
+import React, {
+  PropsWithChildren, useMemo,
+} from 'react';
 import { Message } from 'tim-js-sdk';
+import { UnknowPorps } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
+import { getTimeStamp } from '../../untils';
 
 interface MessageListElementProps {
   enrichedMessageList: Array<Message>;
-  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
+  intervalsTimer?: number
 }
 
 function useMessageListElement <T extends MessageListElementProps>(
   props: PropsWithChildren<T>,
 ) {
-  const { enrichedMessageList, TUIMessage } = props;
+  const {
+    enrichedMessageList,
+    TUIMessage,
+    intervalsTimer,
+  } = props;
+
   return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
     const key = `${JSON.stringify(item)}${index}`;
+    const preMessageTImer = index > 0 ? enrichedMessageList[index - 1]?.time : -1;
+    const currrentTimer = item?.time || 0;
+    const isShowIntervalsTImer = preMessageTImer !== -1
+      ? (currrentTimer - preMessageTImer) >= intervalsTimer : false;
     return (
-      <li className="message-list-item" key={key}>
-        <TUIMessage message={item} />
-      </li>
+      <>
+        {
+         isShowIntervalsTImer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000) : 0}</div>
+       }
+        <li className="message-list-item" key={key}>
+          <TUIMessage message={item} key={key} />
+        </li>
+
+      </>
     );
   }), [enrichedMessageList]);
 }

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

@@ -1,7 +1,7 @@
 ul,li,div,p,label,span {
   margin: 0;
   padding: 0;
-} 
+}
 ul li {
   list-style: none;
 }
@@ -12,6 +12,9 @@ ul li {
   overflow-y: auto;
   position: relative;
   padding: 0 20px;
+  &.hide {
+    opacity: 0;
+  }
   &-item {
     display: grid;
     padding: 5px 0;
@@ -25,4 +28,13 @@ ul li {
     line-height: 17px;
     color: #999999;
   }
+  &-time {
+    color: #7a7a7a;
+    font-family: PingFangSC-Medium;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14px;
+    padding: 10px;
+    text-align: center;
+  }
 }

package/src/components/index.ts

@@ -5,8 +5,20 @@ export * from './TUIChat';
 export * from './ConversationPreview';
 export * from './TUIChatHeader';
 export * from './TUIMessageList';
+export * from './TUIMessage';
 export * from './TUIMessageInput';
 export * from './TUIProfile';
 export * from './Avatar';
 export * from './ConversationSearch';
 export * from './TUIManage';
+export * from './Popup';
+export * from './Checkbox';
+export * from './DivWithEdit';
+export * from './Icon';
+export * from './EmptyStateIndicator';
+export * from './Input';
+export * from './Model';
+export * from './Plugins';
+export * from './Switch';
+export * from './Toast';
+export * from './Popup';

package/src/constants.ts

@@ -42,6 +42,9 @@ export enum CONSTANT_DISPATCH_TYPE {
   OPERATE_MESSAGE = 'operateMessage',
   SET_NO_MORE = 'setNoMore',
   SET_CURSOR_POS = 'setCursorPos',
+  SET_AUDIO_SOURCE = 'setAudioSource',
+  SET_VIDEO_SOURCE = 'setVideoSource',
+  UPDATE_UPLOAD_PENDDING_MESSAGE_LIST = 'updateUploadPenddingMessageList'
 }
 
 export enum MESSAGE_TYPE {

package/src/context/ComponentContext.tsx

@@ -8,7 +8,7 @@ export interface UnknowPorps {
 }
 
 export interface ComponentContextValue {
-  TUIMessage?: React.ComponentType<TUIMessageProps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
   TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
   EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>,
   TUIMessageInput?: React.ComponentType<UnknowPorps>,

package/src/context/TUIChatActionContext.tsx

@@ -1,15 +1,19 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { Message } from 'tim-js-sdk';
 import type {
+  CreateCustomMessageProps,
   CreateFaceMessageProps,
   CreateForwardMessageProps,
+  CreateLocationMessageProps,
+  CreateMergerMessageProps,
+  CreateTextAtMessageProps,
   CreateTextMessageProps,
   CreateUploadMessageProps,
 } from '../components/TUIChat/hooks/useCreateMessage';
 import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
 
 export interface TUIChatActionContextValue {
-  sendMessage?: (message: Message) => Promise<void>,
+  sendMessage?: (message: Message, options?:any) => Promise<void>,
   removeMessage?: (message: Message) => void,
   updateMessage?: (messages: Array<Message>) => void,
   createTextMessage?: (options: CreateTextMessageProps) => Message,
@@ -18,10 +22,19 @@ export interface TUIChatActionContextValue {
   createVideoMessage?: (options: CreateUploadMessageProps) => Message,
   createFileMessage?: (options: CreateUploadMessageProps) => Message,
   createForwardMessage?: (options: CreateForwardMessageProps) => Message,
+  createCustomMessage?: (options: CreateCustomMessageProps) => Message,
+  createAudioMessage?: (options: CreateUploadMessageProps) => Message,
+  createTextAtMessage?: (options: CreateTextAtMessageProps) => Message,
+  createLocationMessage?: (options: CreateLocationMessageProps) => Message,
+  createMergerMessage?: (options: CreateMergerMessageProps) => Message,
   editLocalmessage?: (message: Message) => void,
   operateMessage?: (data?: OperateMessageParams) => void,
   loadMore?: () => Promise<void>,
   revokeMessage?: (message:Message) => Promise<Message>,
+  setAudioSource?: (source: HTMLAudioElement | null) => void,
+  setVideoSource?: (source: HTMLVideoElement | null) => void,
+  setHighlightedMessageId?: (highlightedMessageId: string) => void,
+  updataUploadPenddingMessageList?: (message?:Message) => void,
 }
 
 export const TUIChatActionContext = React.createContext<

package/src/context/TUIChatStateContext.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren, useContext, MutableRefObject, RefObject,
 } from 'react';
 import { Conversation, Message } from 'tim-js-sdk';
+import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
 import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
 
 export interface TUIChatStateContextValue {
@@ -17,6 +18,13 @@ export interface TUIChatStateContextValue {
   textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
   operateData?: OperateMessageParams,
   noMore?: boolean,
+  messageConfig?: TUIMessageProps,
+  cloudCustomData?: string,
+  TUIMessageInputConfig?: TUIMessageInputBasicProps,
+  audioSource?: HTMLAudioElement,
+  vidoeSource?: HTMLVideoElement,
+  TUIMessageListConfig?: MessageListProps,
+  uploadPenddingMessageList?: Array<Message>,
 }
 
 export const TUIChatStateContext = React.createContext<TUIChatStateContextValue>(null);

package/src/context/TUIKitContext.tsx

@@ -1,5 +1,9 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import { ChatSDK, Conversation, Profile } from 'tim-js-sdk';
+import {
+  ChatSDK,
+  Conversation,
+  Profile,
+} from 'tim-js-sdk';
 
 export interface TUIKitContextValue {
     tim: ChatSDK,

package/src/context/TUIMessageContext.tsx

@@ -1,5 +1,13 @@
 import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
 import { Message } from 'tim-js-sdk';
+import { MessagePluginsProps } from '../components';
+
+export enum messageShowType {
+   IN = 'in',
+   OUT = 'out',
+   ALL = 'all',
+   NONE = 'none',
+}
 
 export interface TUIMessageContextValue {
   message?: Message,
@@ -13,6 +21,18 @@ export interface TUIMessageContextValue {
   MergerElement?: React.ComponentType<{message: Message}>,
   LocationElement?: React.ComponentType<{message: Message}>,
   FaceElement?: React.ComponentType<{message: Message}>,
+  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 const TUIMessageContext = React.createContext<TUIMessageContextValue>(undefined);

package/src/context/TUIMessageInputContext.tsx

@@ -5,6 +5,7 @@ import React, {
   KeyboardEventHandler,
   MutableRefObject,
 } from 'react';
+import { PluginConfigProps } from '../components';
 import type { ICursorPos } from '../components/TUIMessageInput/hooks';
 import type { EmojiData } from '../components/TUIMessageInput/hooks/useEmojiPicker';
 import type { filesData } from '../components/TUIMessageInput/hooks/useUploadPicker';
@@ -28,11 +29,9 @@ export interface TUIMessageInputContextValue {
   insertText?: (textToInsert: string) => void,
   setText?: (textToInsert: string) => void,
   focus?: boolean,
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
   handlePasete?: (e:ClipboardEvent) => void,
   setCursorPos?: (e:ICursorPos) => void,
+  pluginConfig?: PluginConfigProps,
 }
 
 export const TUIMessageInputContext = React.createContext<TUIMessageInputContextValue>(undefined);