@tencentcloud/chat-uikit-react 0.0.1

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

@@ -0,0 +1,176 @@
+import React, {
+  useCallback,
+  ChangeEventHandler,
+  MutableRefObject,
+  useEffect,
+  useState,
+} from 'react';
+import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE } from '../../../constants';
+import {
+  useTUIChatActionContext,
+  useTUIChatStateContext,
+  useTUIKitContext,
+} from '../../../context';
+import { useHandleQuoteMessage } from './useHandleQuoteMessage';
+import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
+
+interface useMessageInputTextProps extends IbaseStateProps {
+  focus?: boolean,
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+}
+
+export const useMessageInputText = (props:useMessageInputTextProps) => {
+  const {
+    state,
+    dispatch,
+    focus,
+    textareaRef,
+  } = 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();
+
+  const enterCodeList = ['Enter', 'NumpadEnter'];
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!event || !event.target) {
+        return;
+      }
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+        getNewText: (text:string) => event.target.value,
+      });
+    },
+    [tim],
+  );
+
+  const handleSubmit = async (
+    event?: React.BaseSyntheticEvent,
+  ) => {
+    event?.preventDefault();
+    if (!state.text) {
+      return;
+    }
+    const options:any = {
+      payload: {
+        text: state.text,
+      },
+    };
+    if (cloudCustomData.messageReply) {
+      options.cloudCustomData = JSON.stringify(cloudCustomData);
+    }
+    const message = createTextMessage(options);
+    await sendMessage(message);
+    dispatch({
+      getNewText: (text:string) => '',
+      type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+    });
+    operateMessage({
+      [MESSAGE_OPERATE.QUOTE]: null,
+    });
+  };
+
+  const handleKeyDown = useCallback(
+    (event?:React.KeyboardEvent<EventTarget>) => {
+      if (!event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+        event?.preventDefault();
+        handleSubmit(event);
+      }
+      if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+        dispatch({
+          type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+          getNewText: (text:string) => `${text}\n`,
+        });
+      }
+    },
+    [handleSubmit, dispatch],
+  );
+
+  const handlePasete = useCallback(
+    async (e: ClipboardEvent) => {
+      e.preventDefault();
+      if (!(e.clipboardData && e.clipboardData.items)) {
+        return;
+      }
+      const str = e.clipboardData.getData('text');
+      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);
+      //     }
+      //   }
+      // }
+    },
+    [textareaRef],
+  );
+
+  const insertText = useCallback(
+    (textToInsert: string) => {
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+        getNewText: (text:string) => `${text.slice(0, state.cursorPos.start)}${textToInsert}${text.slice(state.cursorPos.start)}`,
+      });
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
+        value: {
+          start: state.cursorPos.start + textToInsert.length,
+          end: state.cursorPos.end + textToInsert.length,
+        },
+      });
+      textareaRef?.current?.focus();
+    },
+    [textareaRef, state],
+  );
+
+  const setText = useCallback(
+    (textToInsert: string) => {
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+        getNewText: () => `${textToInsert}`,
+      });
+      textareaRef?.current?.focus();
+    },
+    [textareaRef],
+  );
+
+  const setCursorPos = useCallback(
+    (cursorPos: ICursorPos) => {
+      dispatch({
+        type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
+        value: cursorPos,
+      });
+    },
+    [textareaRef],
+  );
+
+  return {
+    handleChange,
+    handleSubmit,
+    handleKeyDown,
+    handlePasete,
+    insertText,
+    setText,
+    setCursorPos,
+  };
+};

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

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { UnknowPorps } from '../../../context';
+
+interface PluginsElementProps {
+  plugin?: Array<React.ComponentType<UnknowPorps>>,
+  showNumber?: number,
+}
+
+export function usePluginsElement <T extends PluginsElementProps>(
+  props: PropsWithChildren<T>,
+) {
+  const { plugin, showNumber = 1 } = props;
+
+  return useMemo(() => {
+    const elements = plugin?.map((Item: any, index:number) => {
+      const key = `${JSON.stringify(Item)}${index}`;
+      return (<Item key={key} />);
+    });
+    return {
+      showPicker: elements?.splice(0, showNumber),
+      elements,
+    };
+  }, [plugin]);
+}

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

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+
+interface UploadProps {
+  type?: string,
+  accept?: string,
+  onChange?: (files: HTMLInputElement | File) => void,
+}
+
+export function useUploadElement<
+  T extends UploadProps
+>(props:PropsWithChildren<T>):React.ReactElement {
+  const {
+    children,
+    type,
+    accept,
+    onChange,
+  } = props;
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files.length > 0) {
+      const { files } = e.target;
+      const options = {
+        type: files[0].type,
+      };
+      const file = new File(files as any, files[0].name, options);
+      onChange(file);
+    }
+    e.target.value = '';
+  };
+  return (
+    <div className="upload-picker">
+      <main className="upload-picker-content">{children}</main>
+      <input title="图片" type="file" data-type={type} accept={accept} onChange={handleChange} />
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+import {
+  PropsWithChildren,
+  useCallback,
+} from 'react';
+import { MESSAGE_TYPE_NAME } from '../../../constants';
+import { useTUIChatActionContext } from '../../../context';
+import type { IbaseStateProps } from './useMessageInputState';
+
+export interface filesData {
+  file: HTMLInputElement | File
+}
+
+export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildren<T>) {
+  const {
+    sendMessage,
+    createImageMessage,
+    createVideoMessage,
+    createFileMessage,
+  } = useTUIChatActionContext('useUploadPicker');
+
+  const creatUploadMessage = {
+    [MESSAGE_TYPE_NAME.IMAGE]: createImageMessage,
+    [MESSAGE_TYPE_NAME.VIDEO]: createVideoMessage,
+    [MESSAGE_TYPE_NAME.FILE]: createFileMessage,
+  };
+
+  const sendUploadMessage = useCallback((file: filesData, type:MESSAGE_TYPE_NAME) => {
+    const message = creatUploadMessage[type]({
+      payload: file,
+      onProgress(num:number) {
+        message.progress = num;
+      },
+    });
+    sendMessage(message);
+  }, [sendMessage]);
+
+  return {
+    sendUploadMessage,
+  };
+}

package/src/components/TUIMessageInput/index.ts

@@ -0,0 +1,3 @@
+export * from './TUIMessageInput';
+export * from './TUIMessageInputDefault';
+export * from './InputPluginsDefalut';

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

@@ -0,0 +1,17 @@
+.tui-message-input {
+  .tui-kit-input-box--focus {
+    outline: 1px solid #147AFF;
+  }
+  .input-box {
+    border: 1px solid #D3DAF3;
+    background: #FFFFFF;
+  }
+}
+
+.input-plugin-popup {
+  &-box {
+    background: rgba(249, 249, 249, 0.94);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+    border-radius: 16px;
+  }
+}

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

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

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

@@ -0,0 +1,280 @@
+// message input styles
+.tui-message-input {
+  display: flex;
+  flex-direction: column;
+  &-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 14px 12px;
+    .input-box {
+      flex: 1;
+      display: flex;
+      padding: 0 8px;
+      position: relative;
+      min-height: 20px;
+      max-height: 200px;
+      border-radius: 15px;
+      overflow: hidden;
+      padding: 10px;
+      .input-visibility-content {
+        word-break: break-all;
+        visibility: hidden;
+        max-width: -webkit-fill-available;
+        font-family: 'SF Pro Text';
+        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: 'SF Pro Text';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 17px;
+        margin: 9px;
+        resize: none;
+        border: none;
+        background: none;
+        &:focus, &:active{
+          border: none;
+          outline: none;
+        }
+      }
+    }
+  
+    .disabled {
+      display: none;
+    }
+  }
+}
+
+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;
+  line-height: 19px;
+  display: flex;
+  span {
+    padding: 0 17px;
+  }
+}
+
+
+// emoji picker styles
+.emoji-picker {
+  .face-list {
+    min-width: 265px;
+    padding: 10px 5px;
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 120px;
+    overflow-y: auto;
+    &-item {
+      padding: 5px;
+      cursor: pointer;
+      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%;
+      }
+    }
+  }
+}
+
+
+// upload styles
+.upload-picker {
+  position: relative;
+  padding: 10px 16px;
+  min-width: 180px;
+  &:hover {
+    background: rgba(0,110,255,.1);
+    color: #147aff;
+  }
+  input {
+    position: absolute;
+    cursor: pointer;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.input-quote {
+  padding: 7px 16px;
+  background: #F9F9F9;
+  display: flex;
+  align-items: center;
+  &-content {
+    flex: 1;
+    background: #FFFFFF;
+    padding: 2px 14px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 17px;
+    color: #000000;
+    &::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 100%;
+      background: #999999;
+      top: 0;
+      left: 0;
+    }
+    span {
+      padding-top: 8px;
+      opacity: 0.6;
+    }
+  }
+  .icon {
+    margin: 0 5px 0 16px;
+  }
+}
+
+// TUIForward
+.tui-forward {
+  background: #FFFFFF;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 300px;
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 24px 20px;
+  }
+  &-title {
+    padding: 0 16px;
+    font-family: 'SF Pro Text';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 17px;
+  }
+  &-main {
+    padding: 0 20px;
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+    .no-result {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-style: normal;
+      line-height: 20px;
+      padding: 10px;
+      text-align: center;
+      color: #999999;
+    }
+  }
+  &-search {
+    padding: 10px 15px;
+  }
+  &-list {
+    padding: 13px 0;
+    &-title {
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    &-item {
+      padding: 6px 0;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .info {
+        display: flex;
+        align-items: center;
+        &-nick {
+          padding: 0 13px;
+          font-family: 'PingFang SC';
+          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;
+        }
+      }
+    }
+  }
+  &-footer {
+    background: rgba(249, 249, 249, 0.94);
+    padding: 13px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .button {
+      cursor: pointer;
+      background: #0365F9;
+      border-radius: 31px;
+      padding: 10px 21px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #FFFFFF;
+      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;
+    }
+  }
+}

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -0,0 +1,106 @@
+import React, { PropsWithChildren, useState, useEffect } from 'react';
+import { Message } from 'tim-js-sdk';
+import {
+  useTUIChatStateContext,
+  useTUIChatActionContext,
+  useComponentContext,
+} from '../../context';
+import useEnrichedMessageList from './hooks/useEnrichedMessageList';
+import useMessageListElement from './hooks/useMessageListElement';
+
+import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator';
+
+import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
+
+import './styles/index.scss';
+
+interface MessageListProps extends InfiniteScrollProps {
+  messageList?: Array<Message>,
+  highlightedMessageId?: string,
+}
+function TUIMessageListWithContext <T extends MessageListProps>(
+  props: PropsWithChildren<T>,
+):React.ReactElement {
+  const {
+    messageList: propsMessageList,
+    highlightedMessageId: propsHighlightedMessageId,
+    loadMore: propsLoadMore,
+  } = props;
+
+  const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
+  const [firstRender, setFirstRender] = useState<boolean>(false);
+
+  const {
+    messageList: contextMessageList,
+    highlightedMessageId: contextHighlightedMessageId,
+    isCompleted,
+    isSameLastMessageID,
+    messageListRef,
+    noMore,
+  } = useTUIChatStateContext('TUIMessageList');
+  const { loadMore: contextLoadMore } = useTUIChatActionContext('TUIMessageList');
+  const { TUIMessage, EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('TUIMessageList');
+  const highlightedMessageId = propsHighlightedMessageId || contextHighlightedMessageId;
+
+  const { messageList: enrichedMessageList } = useEnrichedMessageList({
+    messageList: propsMessageList || contextMessageList,
+  });
+
+  const loadMore = propsLoadMore || contextLoadMore;
+
+  const elements = useMessageListElement({
+    enrichedMessageList,
+    TUIMessage,
+  });
+
+  useEffect(() => {
+    (async () => {
+      const parentElement = ulElement?.parentElement?.parentElement;
+      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 || [];
+        const element = HTMLCollection[HTMLCollection.length - 1];
+        const timer = setTimeout(() => {
+          element?.scrollIntoView({ block: 'end' });
+          setFirstRender(true);
+          clearTimeout(timer);
+        }, 100);
+      }
+    })();
+  }, [elements, firstRender]);
+
+  return (
+    <div className="message-list" ref={messageListRef}>
+      {noMore}
+      {noMore && <p className="no-more">no More</p>}
+      <InfiniteScroll
+        className="message-list-infinite-scroll"
+        hasMore
+        loadMore={loadMore}
+        threshold={1}
+      >
+        <ul ref={setUlElement}>
+          {
+              elements?.length > 0 ? elements : <EmptyStateIndicator listType="message" />
+            }
+        </ul>
+      </InfiniteScroll>
+    </div>
+  );
+}
+
+const MemoizedTUIMessageListContext = React.memo(TUIMessageListWithContext) as
+typeof TUIMessageListWithContext;
+
+export function TUIMessageList(props:MessageListProps):React.ReactElement {
+  return (
+    <MemoizedTUIMessageListContext {...props} />
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Message } from 'tim-js-sdk';
+
+interface EnrichedMessageListProps {
+  messageList: Array<Message>;
+}
+
+function useEnrichedMessageList(props:EnrichedMessageListProps) {
+  const { messageList } = props;
+
+  return {
+    messageList,
+  };
+}
+
+export default useEnrichedMessageList;