@repobit/dex-system-design 0.24.3 → 0.24.5

package/src/components/agent-endpoints/agent-endpoints.stories.js

@@ -0,0 +1,148 @@
+import { html } from "lit";
+import "./agent-endpoints.js";
+
+export default {
+  title     : "Components/Agent Endpoints",
+  component : "bd-agent-endpoints",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs  : {
+      description: {
+        component: `
+**AgentEndpoints** shows an eyebrow/title/description block followed by two rows of
+pill-shaped links: machine-readable endpoint URLs (\`/llms.txt\`, \`/sitemap.xml\`,
+etc.) and "Ask <assistant>" quick links (ChatGPT, Perplexity, Gemini, Copilot).
+
+Both rows share the same \`button--outline-white\` class — a reusable white pill with
+a thin border — so the visual style stays consistent across any future use of that
+class elsewhere.
+
+### Usage
+\`\`\`html
+<bd-agent-endpoints
+  eyebrow="For AI agents and assistants"
+  title="Machine-readable endpoints"
+  description="This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:"
+  .endpoints=\${[
+    { label: "/llms.txt", href: "/llms.txt" },
+    { label: "/llms-full.txt", href: "/llms-full.txt" },
+    { label: "/index.md", href: "/index.md" },
+    { label: "/sitemap.xml", href: "/sitemap.xml" },
+    { label: "/robots.txt", href: "/robots.txt" }
+  ]}
+  .assistants=\${[
+    { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=...", icon: "/openai-brands-solid-full.svg" },
+    { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=...", icon: "/perplexity-icon-dark.svg" }
+  ]}
+></bd-agent-endpoints>
+\`\`\`
+
+### Attributes
+| Attribute      | Type   | Default | Description                                             |
+|------------------|--------|---------|--------------------------------------------------------------|
+| \`eyebrow\`        | String | \`""\`    | Small blue label above the title                            |
+| \`title\`          | String | \`""\`    | Heading (or the \`title\` slot)                               |
+| \`description\`    | String | \`""\`    | Paragraph under the title (or the \`description\` slot)      |
+| \`endpoints\`      | Array  | \`[]\`    | \`{ label, href }\` — rendered with a leading arrow, monospace label |
+| \`assistants\`     | Array  | \`[]\`    | \`{ label, href, icon }\` — rendered with a leading icon image |
+
+### Slots
+| Slot            | Description                                            |
+|-------------------|------------------------------------------------------------|
+| \`eyebrow\`        | Overrides the \`eyebrow\` attribute                          |
+| \`title\`          | Overrides the \`title\` attribute                            |
+| \`description\`    | Overrides the \`description\` attribute                      |
+| \`rows\`           | Extra freeform pill rows appended after the two generated ones |
+        `
+      }
+    }
+  }
+};
+
+const render = (args) => html`
+  <bd-agent-endpoints
+    eyebrow=${args.eyebrow}
+    title=${args.title}
+    description=${args.description}
+    .endpoints=${args.endpoints}
+    .assistants=${args.assistants}
+  ></bd-agent-endpoints>
+`;
+
+export const Default = {
+  name: "Default — Machine-Readable Endpoints",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "This site is built to be read by AI assistants, browsers, and agents. Structured, curated context is available at:",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/llms-full.txt", href: "/llms-full.txt" },
+      { label: "/index.md", href: "/index.md" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" },
+      { label: "/robots.txt", href: "/robots.txt" }
+    ],
+    assistants: [
+      { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/openai-brands-solid-full.svg" },
+      { label: "Ask Perplexity", href: "https://www.perplexity.ai/search?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/perplexity-icon-dark.svg" },
+      { label: "Ask Gemini", href: "https://gemini.google.com/app?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/Google_Gemini_icon_2025.svg" },
+      { label: "Ask Copilot", href: "https://copilot.microsoft.com/?q=Summarize%20https%3A%2F%2Fai.bitdefender.com%2F", icon: "/microsoft-copilot.svg" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: eyebrow, title, description, a row of 5 endpoint pills, and a row of 4 assistant pills, all using button--outline-white."
+      }
+    }
+  }
+};
+
+export const EndpointsOnly = {
+  name: "Endpoints Only",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" }
+    ],
+    assistants: []
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "assistants left empty — only the endpoints row renders."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    eyebrow    : "For AI agents and assistants",
+    title      : "Machine-readable endpoints",
+    description: "This site is built to be read by AI assistants, browsers, and agents.",
+    endpoints  : [
+      { label: "/llms.txt", href: "/llms.txt" },
+      { label: "/sitemap.xml", href: "/sitemap.xml" },
+      { label: "/robots.txt", href: "/robots.txt" }
+    ],
+    assistants: [
+      { label: "Ask ChatGPT", href: "https://chatgpt.com/?q=test", icon: "/openai-brands-solid-full.svg" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive — use the Controls panel to edit eyebrow, title, description, and both pill arrays live."
+      }
+    }
+  }
+};