Originator.tsx

import React, { memo } from 'react';

import { type ReplyAction } from '../../types/external/OrgSchema/ReplyAction';

type Props = Readonly<{ replyAction: ReplyAction }>;

const Originator = memo(({ replyAction }: Props) => {
  const { description, provider } = replyAction;

  const text = description || provider?.name;
  const url = provider?.url;

  return url ? (
    <a
      className="webchat__activity-status__originator webchat__activity-status__originator--has-link"
      href={url}
      rel="noopener noreferrer"
      target="_blank"
      title={text} // In case the content is clipped with ellipsis, customers can hover to see the full text.
    >
      {text}
    </a>
  ) : (
    <span className="webchat__activity-status__originator">{text}</span>
  );
});

Originator.displayName = 'Originator';

export default Originator;