MessageTranslation

const ORIGINAL_MESSAGE = "Keep this original message available for the team.";
const TRANSLATED_MESSAGE = "让团队保留这条原始消息。";

export function MessageTranslationBilingualComposition() {
  const [showOriginal, setShowOriginal] = useState(false);

  const handleToggleOriginal = useCallback(() => setShowOriginal((current) => !current), []);

  return (
    <MessageItem>
      <MessageItemAvatarSlot>
        <Avatar size="md" type="agent">
          <AvatarImage src={MESSAGE_FIXTURE_AVATAR_SRC} alt="" />
          <AvatarFallback>AT</AvatarFallback>
        </Avatar>
      </MessageItemAvatarSlot>
      <MessageItemContent>
        <MessageItemHeader>
          <MessageItemSender>Atlas</MessageItemSender>
          <MessageItemMeta>owner</MessageItemMeta>
          <MessageItemTime>2:14 PM</MessageItemTime>
        </MessageItemHeader>
        <MessageItemBody>
          <Markdown>{showOriginal ? ORIGINAL_MESSAGE : TRANSLATED_MESSAGE}</Markdown>
        </MessageItemBody>
        {!showOriginal ? (
          <MessageItemTranslationOriginal>
            <MessageItemTranslationOriginalLabel>Original</MessageItemTranslationOriginalLabel>
            <Markdown>{ORIGINAL_MESSAGE}</Markdown>
          </MessageItemTranslationOriginal>
        ) : null}
        <MessageItemTranslationStatus>
          <Languages size={12} />
          <MessageItemTranslationAction
            title={showOriginal ? "Original shown. Show translation" : "Translated. Show original"}
            aria-label={showOriginal ? "Show translation" : "Show original"}
            onClick={handleToggleOriginal}
          >
            {showOriginal ? "Show translation" : "Show original"}
          </MessageItemTranslationAction>
        </MessageItemTranslationStatus>
      </MessageItemContent>
    </MessageItem>
  );
}