커스텀 메시지

import { useMemo } from 'react';
import {
  Chat,
  ChatHeader,
  MessageInput,
  MessageList,
  MessageType,
  useChatContext,
  CustomMessage,
  type MessageInfo,
  type CustomMessagePayload,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

interface ProductMessageData {
  businessID: 'product';
  name: string;
  price: string;
  link: string;
}

function parseProductMessage(message: MessageInfo): ProductMessageData | null {
  try {
    const payload = message.messagePayload as CustomMessagePayload;
    const rawData = payload.customData || '{}';
    const parsed = JSON.parse(rawData) as ProductMessageData;
    return parsed.businessID === 'product' ? parsed : null;
  } catch {
    return null;
  }
}

function ProductMessage({ message }: { message: MessageInfo }) {
  const product = parseProductMessage(message);

  if (!product) {
    // If it is not a known custom message
    // it is recommended to return the default custom message.
    return <CustomMessage message={message} />;
  }

  return (
    <div className="custom-message-basic-demo__card">
      <div className="custom-message-basic-demo__cover">Product</div>
      <div className="custom-message-basic-demo__info">
        <strong>{product.name}</strong>
        <span>{product.price}</span>
        <a href={product.link} rel="noreferrer" target="_blank">
          Buy now
        </a>
      </div>
    </div>
  );
}

function CustomMessageBasicDemo() {
  const { sendMessage } = useChatContext();
  const messageRenderers = useMemo(() => ({
    [MessageType.Custom]: ProductMessage,
  }), []);

  const handleSendProductMessage = () => {
    sendMessage({
      type: 'customMessage',
      customData: JSON.stringify({
        businessID: 'product',
        name: 'T-Shirt',
        price: '$19.99',
        link: 'https://trtc.io/document/chat-overview?product=chat&menulabel=uikit&platform=react',
      }),
      description: '[Product]',
    });
  };

  return (
    <div className="custom-message-basic-demo">
      <div className="custom-message-basic-demo__frame">
        <Chat className="custom-message-basic-demo__chat">
          <ChatHeader />
          <MessageList messageRenderers={messageRenderers} />
          <div className="custom-message-basic-demo__toolbar">
            <button onClick={handleSendProductMessage} type="button">
              Send Product Message
            </button>
          </div>
          <MessageInput autoFocus={false} hideSendButton={false} />
        </Chat>
      </div>
    </div>
  );
}