exAichatbot_agent/chatbotApp-chatbot2.0-agent/web/src/components/ActionButtonList.tsx

import type { WebActionButton } from "@/lib/types";

interface ActionButtonListProps {
  buttons?: WebActionButton[];
}

function resolveHref(button: WebActionButton): string | undefined {
  if (button.action === "phone") {
    const number = button.phoneNumber?.replace(/[^0-9+]/g, "");
    return number ? `tel:${number}` : button.url;
  }
  return button.url || button.webUrl || button.pcUrl || button.mobileUrl || button.androidUrl || button.iosUrl;
}

function isExternalHref(href: string): boolean {
  return /^https?:\/\//i.test(href);
}

export function ActionButtonList({ buttons }: ActionButtonListProps) {
  const resolvedButtons = (buttons ?? [])
    .map((button) => ({ button, href: resolveHref(button) }))
    .filter((item): item is { button: WebActionButton; href: string } => Boolean(item.href));

  if (resolvedButtons.length === 0) {
    return null;
  }

  return (
    <div className="action-buttons">
      {resolvedButtons.map(({ button, href }, index) => (
        <a
          key={`${button.action ?? "link"}-${button.label}-${href}-${index}`}
          className="action-button"
          href={href}
          target={isExternalHref(href) ? "_blank" : undefined}
          rel={isExternalHref(href) ? "noopener noreferrer" : undefined}
        >
          {button.label || "바로가기"}
        </a>
      ))}
    </div>
  );
}