Source

Citation chip with index number, title, and domain. Hover to reveal excerpt.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

SourceCitation chip with index number, title, and domain. Hover to reveal excerpt.

"use client";
import { useState } from "react";

type SourceProps = {
  title: string;
  url: string;
  excerpt?: string;
  index?: number;
};

function getDomain(url: string): string {
  try {
    return new URL(url).hostname.replace("www.", "");
  } catch {
    return url;
  }
}

export function Source({ title, url, excerpt, index }: SourceProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      className="pk-source"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        className="pk-source-chip"
      >
        {index !== undefined && (
          <span className="pk-source-idx">{index}</span>
        )}
        <div className="pk-source-info">
          <span className="pk-source-title">{title}</span>
          <span className="pk-source-domain">{getDomain(url)}</span>
        </div>
      </a>
      {hovered && excerpt && (
        <div className="pk-source-excerpt">{excerpt}</div>
      )}
    </div>
  );
}

Props

Prop	Type	Default	Description
`title`*	`string`	—	Source title
`url`*	`string`	—	Link URL (domain extracted automatically)
`excerpt`	`string`	—	Short excerpt shown on hover
`index`	`number`	—	Citation number shown as badge