import { TUIChatService } from "@tencentcloud/chat-uikit-engine";

const sendCustomMessageParams = {
    payload: {
      data: JSON.stringify({
        Welcome to the Tencent Cloud family
        url: 'https://www.tencentcloud.com/document/product/269?from_cn_redirect=1'
      }),
      description: "text_with_link",
      extension: "text_with_link"
    },
};

// simulation send a custom message
TUIChatService.sendCustomMessage(sendCustomMessageParams)
    .catch(err => { /** */ });

import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider,  Message } from '@tencentcloud/chat-uikit-react';

function CustomMessage(props: React.ComponentProps<typeof Message>) {
  if (props.message.type === TUIChatEngine.TYPES.MSG_CUSTOM) {
    const { data, extension } = props.message.payload;
    if (data && extension === 'text_with_link') {
      const { text, url } = JSON.parse(data);
      return (
        <div style={{
          backgroundColor: 'lightblue',
          padding: '10px',
          borderRadius: '10px',
        }}
        >
          <div>{text}</div>
          <a href={url} target="_blank" rel="noopener noreferrer">
            Jump to
          </a>
        </div>
      );
    }
  }
  return <Message {...props} />;
}

function ChatApp() {
  return (
      <UIKitProvider language="auto" theme="light">
        <div style={{ display: 'flex', height: '100vh' }}>
          <ConversationList />
          <MessageList Message={CustomMessage} />
        </div>
      </UIKitProvider>
  );
}

export default ChatApp;