AkurAI-Framework / site/frontend/ai/components/display/link_preview.js

Latest change 88d669a6b3c5464f8a947a66be0437a90424470f - feat(ai): add Display components — citation, link_preview, stats_display, terminal, weather_widget by Ólafur Búi Ólafsson

/**
 * Link Preview — OpenGraph-style preview card.
 * Payload: { url, title, description, image? }
 */

function el(tag, cls) {
  const node = document.createElement(tag);
  if (cls) node.className = cls;
  return node;
}

export const def = {
  name: "link_preview",
  category: "Display",
  title: "Link Preview",

  match(payload) {
    return (
      payload !== null &&
      typeof payload === "object" &&
      typeof payload.url === "string" &&
      typeof payload.title === "string" &&
      typeof payload.description === "string"
    );
  },

  render(payload) {
    const { url, title, description, image } = payload;

    let domain = "";
    try { domain = new URL(url).hostname.replace(/^www\./, ""); } catch (_) { domain = url; }

    const card = el("a", "card tc-display-link-preview");
    card.href = url;
    card.rel = "noopener noreferrer";
    card.target = "_blank";
    // Override <a> underline from the global stylesheet
    card.style.textDecoration = "none";
    card.style.display = "block";

    if (image) {
      const img = document.createElement("img");
      img.className = "tc-display-link-preview__image";
      img.src = image;
      img.alt = title;
      card.appendChild(img);
    }

    const body = el("div", "tc-display-link-preview__body");

    const domainSpan = el("span", "tc-display-link-preview__domain muted small");
    domainSpan.textContent = domain;
    body.appendChild(domainSpan);

    const titleEl = el("div", "tc-display-link-preview__title");
    titleEl.textContent = title;
    body.appendChild(titleEl);

    const desc = el("p", "tc-display-link-preview__desc muted");
    desc.textContent = description;
    body.appendChild(desc);

    card.appendChild(body);
    return card;
  },

  example: {
    url: "https://akurai.is",
    title: "AkurAI — AI for Icelandic businesses",
    description:
      "AI solutions, automation, and training built specifically for Icelandic companies. Up to 90% training reimbursement via vocational funds.",
    image: "https://akurai.is/og-image.png",
  },
};