@blaaiz/docs-core 0.1.0

package/dist/ui/ask-ai.js

@@ -0,0 +1,808 @@
+'use client';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MAX_MESSAGE_CHARS = 4e3;
+function toRequestMessages(turns) {
+  const messages = [];
+  for (const turn of turns) {
+    if (turn.role === "assistant" && turn.state === "error") {
+      continue;
+    }
+    const content = turn.text.trim().slice(0, MAX_MESSAGE_CHARS);
+    if (content === "") {
+      continue;
+    }
+    messages.push({ role: turn.role, content });
+  }
+  return messages.slice(-10);
+}
+
+// src/ui/ask-ai/markdown.ts
+var SCHEME = /^([a-z][a-z0-9+.-]*):/i;
+var FENCE = /^ {0,3}(`{3,})\s*([^\s`]*)/;
+var HEADING = /^ {0,3}(#{1,6})\s+(.*)$/;
+var BULLET_ITEM = /^ {0,3}[-*+][ \t]+(.*)$/;
+var ORDERED_ITEM = /^ {0,3}\d{1,9}[.)][ \t]+(.*)$/;
+function hasControlChars(value) {
+  for (const char of value) {
+    const code = char.codePointAt(0) ?? 0;
+    if (code < 32 || code === 127) {
+      return true;
+    }
+  }
+  return false;
+}
+function safeAnswerHref(raw) {
+  const href = raw.trim();
+  if (href === "" || hasControlChars(href)) {
+    return null;
+  }
+  const scheme = SCHEME.exec(href);
+  if (scheme !== null) {
+    const name = (scheme[1] ?? "").toLowerCase();
+    return name === "http" || name === "https" ? { href, external: true } : null;
+  }
+  if (href.startsWith("//") || !href.startsWith("/")) {
+    return null;
+  }
+  return { href, external: false };
+}
+function pushText(nodes, text) {
+  if (text === "") {
+    return;
+  }
+  const last = nodes.at(-1);
+  if (last?.kind === "text") {
+    nodes[nodes.length - 1] = { kind: "text", text: last.text + text };
+    return;
+  }
+  nodes.push({ kind: "text", text });
+}
+function readLink(source, start) {
+  const labelEnd = source.indexOf("]", start + 1);
+  if (labelEnd === -1 || source[labelEnd + 1] !== "(") {
+    return null;
+  }
+  const targetEnd = source.indexOf(")", labelEnd + 2);
+  if (targetEnd === -1) {
+    return null;
+  }
+  const label = source.slice(start + 1, labelEnd);
+  const target = source.slice(labelEnd + 2, targetEnd);
+  const href = safeAnswerHref(target.split(/\s+/)[0] ?? "");
+  const next = targetEnd + 1;
+  if (href === null) {
+    return { node: { kind: "text", text: label }, next };
+  }
+  return {
+    node: { kind: "link", text: label, href: href.href, external: href.external },
+    next
+  };
+}
+function parseAnswerInline(source, allowStrong = true) {
+  const nodes = [];
+  let plain = "";
+  let index = 0;
+  while (index < source.length) {
+    const char = source[index];
+    if (char === "`") {
+      const end = source.indexOf("`", index + 1);
+      if (end > index + 1) {
+        pushText(nodes, plain);
+        plain = "";
+        nodes.push({ kind: "code", text: source.slice(index + 1, end) });
+        index = end + 1;
+        continue;
+      }
+    } else if (allowStrong && char === "*" && source[index + 1] === "*") {
+      const end = source.indexOf("**", index + 2);
+      if (end > index + 2) {
+        pushText(nodes, plain);
+        plain = "";
+        nodes.push({
+          kind: "strong",
+          children: parseAnswerInline(source.slice(index + 2, end), false)
+        });
+        index = end + 2;
+        continue;
+      }
+    } else if (char === "[") {
+      const link = readLink(source, index);
+      if (link !== null) {
+        pushText(nodes, plain);
+        plain = "";
+        if (link.node.kind === "text") {
+          pushText(nodes, link.node.text);
+        } else {
+          nodes.push(link.node);
+        }
+        index = link.next;
+        continue;
+      }
+    }
+    plain += char ?? "";
+    index += 1;
+  }
+  pushText(nodes, plain);
+  return nodes;
+}
+function readItem(line) {
+  const bullet = BULLET_ITEM.exec(line);
+  if (bullet !== null) {
+    return { text: bullet[1] ?? "", ordered: false };
+  }
+  const ordered = ORDERED_ITEM.exec(line);
+  if (ordered !== null) {
+    return { text: ordered[1] ?? "", ordered: true };
+  }
+  return null;
+}
+function startsBlock(line) {
+  return line.trim() === "" || FENCE.test(line) || HEADING.test(line) || readItem(line) !== null;
+}
+function parseAnswerMarkdown(source) {
+  const lines = source.split(/\r\n|\r|\n/);
+  const blocks = [];
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index] ?? "";
+    if (line.trim() === "") {
+      index += 1;
+      continue;
+    }
+    const fence = FENCE.exec(line);
+    if (fence !== null) {
+      const marker = fence[1] ?? "```";
+      const language = fence[2] === void 0 || fence[2] === "" ? void 0 : fence[2];
+      const body = [];
+      let closed = false;
+      index += 1;
+      while (index < lines.length) {
+        const inner = lines[index] ?? "";
+        index += 1;
+        if (inner.trimStart().startsWith(marker)) {
+          closed = true;
+          break;
+        }
+        body.push(inner);
+      }
+      blocks.push({ kind: "code", language, text: body.join("\n"), closed });
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading !== null) {
+      blocks.push({
+        kind: "heading",
+        level: (heading[1] ?? "#").length,
+        children: parseAnswerInline((heading[2] ?? "").trim())
+      });
+      index += 1;
+      continue;
+    }
+    const first = readItem(line);
+    if (first !== null) {
+      const texts = [first.text];
+      index += 1;
+      while (index < lines.length) {
+        const next = lines[index] ?? "";
+        const item = readItem(next);
+        if (item !== null) {
+          texts.push(item.text);
+          index += 1;
+          continue;
+        }
+        if (startsBlock(next)) {
+          break;
+        }
+        texts[texts.length - 1] = `${texts.at(-1) ?? ""} ${next.trim()}`;
+        index += 1;
+      }
+      blocks.push({
+        kind: "list",
+        ordered: first.ordered,
+        items: texts.map((text) => parseAnswerInline(text))
+      });
+      continue;
+    }
+    const paragraph = [line.trim()];
+    index += 1;
+    while (index < lines.length && !startsBlock(lines[index] ?? "")) {
+      paragraph.push((lines[index] ?? "").trim());
+      index += 1;
+    }
+    blocks.push({ kind: "paragraph", children: parseAnswerInline(paragraph.join(" ")) });
+  }
+  return blocks;
+}
+
+// src/ui/ask-ai/stream.ts
+function takeLine(buffer) {
+  const match = /\r\n|\n|\r/.exec(buffer);
+  if (match === null) {
+    return null;
+  }
+  if (match[0] === "\r" && match.index + 1 === buffer.length) {
+    return null;
+  }
+  return {
+    line: buffer.slice(0, match.index),
+    rest: buffer.slice(match.index + match[0].length)
+  };
+}
+function createAnswerFrameSplitter() {
+  let buffer = "";
+  let event;
+  let data = [];
+  function addLine(line) {
+    if (line.startsWith(":")) {
+      return;
+    }
+    const colon = line.indexOf(":");
+    const field = colon === -1 ? line : line.slice(0, colon);
+    const raw = colon === -1 ? "" : line.slice(colon + 1);
+    const value = raw.startsWith(" ") ? raw.slice(1) : raw;
+    if (field === "event") {
+      event = value;
+    } else if (field === "data") {
+      data.push(value);
+    }
+  }
+  function take() {
+    if (event === void 0 && data.length === 0) {
+      return null;
+    }
+    const frame = { event, data: data.join("\n") };
+    event = void 0;
+    data = [];
+    return frame;
+  }
+  return {
+    push(chunk) {
+      buffer += chunk;
+      const frames = [];
+      for (; ; ) {
+        const taken = takeLine(buffer);
+        if (taken === null) {
+          break;
+        }
+        buffer = taken.rest;
+        if (taken.line === "") {
+          const frame = take();
+          if (frame !== null) {
+            frames.push(frame);
+          }
+        } else {
+          addLine(taken.line);
+        }
+      }
+      return frames;
+    },
+    flush() {
+      if (buffer !== "") {
+        addLine(buffer);
+        buffer = "";
+      }
+      const frame = take();
+      return frame === null ? [] : [frame];
+    }
+  };
+}
+function parsePayload(data) {
+  if (data === "") {
+    return void 0;
+  }
+  try {
+    return JSON.parse(data);
+  } catch {
+    return void 0;
+  }
+}
+function readSources(payload) {
+  if (!Array.isArray(payload)) {
+    return [];
+  }
+  const sources = [];
+  for (const entry of payload) {
+    if (typeof entry !== "object" || entry === null) {
+      continue;
+    }
+    const record = entry;
+    const url = record["url"];
+    const title = record["title"];
+    if (typeof url === "string" && url !== "" && typeof title === "string" && title !== "") {
+      sources.push({ url, title });
+    }
+  }
+  return sources;
+}
+function readString(payload, field) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const value = payload[field];
+  return typeof value === "string" ? value : void 0;
+}
+function readAnswerEvent(frame) {
+  const payload = parsePayload(frame.data);
+  switch (frame.event) {
+    case "sources":
+      return { kind: "sources", sources: readSources(payload) };
+    case "text": {
+      const text = readString(payload, "text");
+      return text === void 0 || text === "" ? null : { kind: "text", text };
+    }
+    case "done":
+      return { kind: "done" };
+    case "error":
+      return {
+        kind: "error",
+        message: readString(payload, "message") ?? "The answer stopped unexpectedly."
+      };
+    default:
+      return null;
+  }
+}
+var DEFAULT_SUGGESTIONS = [
+  "What is this documentation about?",
+  "How do I get started?",
+  "Show me an example request."
+];
+var MAX_COMPOSER_HEIGHT = 132;
+function sparkleIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 3.5l1.6 4.4 4.4 1.6-4.4 1.6L12 15.5l-1.6-4.4L6 9.5l4.4-1.6L12 3.5ZM18.5 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8.8-2.2Z",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function closeIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18", strokeLinecap: "round" }) });
+}
+function newChatIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 11.5A8 8 0 1 1 17.6 6M20 4v4h-4", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function sendIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function stopIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "2" }) });
+}
+function InlineRuns({ nodes }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node, index) => {
+    const key = `${String(index)}-${node.kind}`;
+    if (node.kind === "code") {
+      return /* @__PURE__ */ jsx("code", { className: "askai-inline-code", children: node.text }, key);
+    }
+    if (node.kind === "strong") {
+      return /* @__PURE__ */ jsx("strong", { className: "askai-strong", children: /* @__PURE__ */ jsx(InlineRuns, { nodes: node.children }) }, key);
+    }
+    if (node.kind === "link") {
+      return node.external ? /* @__PURE__ */ jsx("a", { className: "askai-link", href: node.href, target: "_blank", rel: "noreferrer", children: node.text }, key) : /* @__PURE__ */ jsx("a", { className: "askai-link", href: node.href, children: node.text }, key);
+    }
+    return /* @__PURE__ */ jsx("span", { children: node.text }, key);
+  }) });
+}
+function caret() {
+  return /* @__PURE__ */ jsx("span", { className: "askai-caret", "aria-hidden": "true" });
+}
+function AnswerBlockView({
+  block,
+  withCaret
+}) {
+  if (block.kind === "code") {
+    return /* @__PURE__ */ jsx("pre", { className: "askai-codeblock", "data-language": block.language, children: /* @__PURE__ */ jsx("code", { children: block.text }) });
+  }
+  if (block.kind === "heading") {
+    return /* @__PURE__ */ jsxs("p", { className: "askai-answer-heading", children: [
+      /* @__PURE__ */ jsx(InlineRuns, { nodes: block.children }),
+      withCaret ? caret() : null
+    ] });
+  }
+  if (block.kind === "list") {
+    const items = block.items.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(InlineRuns, { nodes: item }),
+      withCaret && index === block.items.length - 1 ? caret() : null
+    ] }, String(index)));
+    return block.ordered ? /* @__PURE__ */ jsx("ol", { className: "askai-list", children: items }) : /* @__PURE__ */ jsx("ul", { className: "askai-list", children: items });
+  }
+  return /* @__PURE__ */ jsxs("p", { className: "askai-paragraph", children: [
+    /* @__PURE__ */ jsx(InlineRuns, { nodes: block.children }),
+    withCaret ? caret() : null
+  ] });
+}
+function AnswerBody({ text, streaming }) {
+  const blocks = parseAnswerMarkdown(text);
+  if (blocks.length === 0) {
+    return streaming ? /* @__PURE__ */ jsx("p", { className: "askai-paragraph", children: caret() }) : null;
+  }
+  const last = blocks.length - 1;
+  const tailTakesCaret = streaming && blocks[last]?.kind !== "code";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    blocks.map((block, index) => /* @__PURE__ */ jsx(
+      AnswerBlockView,
+      {
+        block,
+        withCaret: tailTakesCaret && index === last
+      },
+      `${String(index)}-${block.kind}`
+    )),
+    streaming && !tailTakesCaret ? /* @__PURE__ */ jsx("p", { className: "askai-paragraph", children: caret() }) : null
+  ] });
+}
+async function readRouteError(response) {
+  try {
+    const payload = await response.json();
+    if (typeof payload === "object" && payload !== null) {
+      const message = payload["error"];
+      if (typeof message === "string" && message.trim() !== "") {
+        return message;
+      }
+    }
+  } catch {
+  }
+  return `Ask AI could not answer this question (HTTP ${String(response.status)}).`;
+}
+function AskAi({
+  endpoint = "/api/ai",
+  suggestions = DEFAULT_SUGGESTIONS,
+  label = "Ask AI",
+  placeholder = "Ask a question\u2026"
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [thread, setThread] = useState([]);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [shortcutHint, setShortcutHint] = useState("\u2318I");
+  const abortRef = useRef(null);
+  const threadRef = useRef([]);
+  const openRef = useRef(false);
+  const scrollRef = useRef(null);
+  const composerRef = useRef(null);
+  const askCount = useRef(0);
+  useEffect(() => {
+    setMounted(true);
+    const mac = /mac|iphone|ipad/i.test(navigator.userAgent);
+    setShortcutHint(mac ? "\u2318I" : "Ctrl I");
+  }, []);
+  useEffect(() => {
+    threadRef.current = thread;
+  }, [thread]);
+  useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const close = useCallback(() => {
+    abortRef.current?.abort();
+    setOpen(false);
+  }, []);
+  const ask = useCallback(
+    (question, history) => {
+      const text = question.trim().slice(0, MAX_MESSAGE_CHARS);
+      if (text === "" || abortRef.current !== null) {
+        return;
+      }
+      askCount.current += 1;
+      const turn = String(askCount.current);
+      const userTurn = { id: `q${turn}`, role: "user", text };
+      const answerId = `a${turn}`;
+      const answer = {
+        id: answerId,
+        role: "assistant",
+        text: "",
+        sources: [],
+        state: "streaming",
+        error: void 0
+      };
+      const messages = toRequestMessages([...history, userTurn]);
+      const next = [...history, userTurn, answer];
+      threadRef.current = next;
+      setThread(next);
+      setBusy(true);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const update = (change) => {
+        setThread(
+          (current) => current.map(
+            (entry) => entry.id === answerId && entry.role === "assistant" ? change(entry) : entry
+          )
+        );
+      };
+      const run = async () => {
+        let answered = "";
+        let terminal = false;
+        try {
+          const response = await fetch(endpoint, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ messages }),
+            signal: controller.signal
+          });
+          if (!response.ok) {
+            const message = await readRouteError(response);
+            update((previous) => ({ ...previous, state: "error", error: message }));
+            return;
+          }
+          if (response.body === null) {
+            update((previous) => ({
+              ...previous,
+              state: "error",
+              error: "Ask AI sent an empty answer."
+            }));
+            return;
+          }
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          const splitter = createAnswerFrameSplitter();
+          for (; ; ) {
+            const result = await reader.read();
+            const frames = result.done ? splitter.flush() : splitter.push(decoder.decode(result.value, { stream: true }));
+            for (const frame of frames) {
+              const event = readAnswerEvent(frame);
+              if (event === null) {
+                continue;
+              }
+              if (event.kind === "text") {
+                answered += event.text;
+                const snapshot = answered;
+                update((previous) => ({ ...previous, text: snapshot }));
+                continue;
+              }
+              if (event.kind === "sources") {
+                const { sources } = event;
+                update((previous) => ({ ...previous, sources }));
+                continue;
+              }
+              if (event.kind === "error") {
+                const { message } = event;
+                update((previous) => ({ ...previous, state: "error", error: message }));
+              } else {
+                update((previous) => ({ ...previous, state: "done" }));
+              }
+              terminal = true;
+            }
+            if (terminal || result.done) {
+              break;
+            }
+          }
+          if (!terminal) {
+            update(
+              (previous) => previous.text === "" ? { ...previous, state: "error", error: "The answer stopped before it started." } : { ...previous, state: "done" }
+            );
+          }
+        } catch {
+          if (controller.signal.aborted) {
+            update(
+              (previous) => previous.text === "" ? { ...previous, state: "error", error: "The question was stopped." } : { ...previous, state: "done" }
+            );
+          } else {
+            update((previous) => ({
+              ...previous,
+              state: "error",
+              error: "Ask AI could not be reached. Check your connection, then try again."
+            }));
+          }
+        } finally {
+          if (abortRef.current === controller) {
+            abortRef.current = null;
+            setBusy(false);
+          }
+        }
+      };
+      void run();
+    },
+    [endpoint]
+  );
+  const retry = useCallback(
+    (answerId) => {
+      const current = threadRef.current;
+      const index = current.findIndex((entry) => entry.id === answerId);
+      const question = index > 0 ? current[index - 1] : void 0;
+      if (question?.role !== "user") {
+        return;
+      }
+      ask(question.text, current.slice(0, index - 1));
+    },
+    [ask]
+  );
+  const newChat = useCallback(() => {
+    abortRef.current?.abort();
+    threadRef.current = [];
+    setThread([]);
+    setDraft("");
+  }, []);
+  const submit = useCallback(() => {
+    const text = draft.trim();
+    if (text === "" || abortRef.current !== null) {
+      return;
+    }
+    setDraft("");
+    ask(text, threadRef.current);
+  }, [ask, draft]);
+  useEffect(() => {
+    const onKey = (event) => {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.key.toLowerCase() !== "i") {
+        return;
+      }
+      event.preventDefault();
+      if (openRef.current) {
+        close();
+      } else {
+        setOpen(true);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [close]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.stopPropagation();
+      if (abortRef.current !== null) {
+        stop();
+        return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.body.style.overflow = "";
+    };
+  }, [open, stop]);
+  useEffect(() => {
+    if (open) {
+      composerRef.current?.focus();
+    }
+  }, [open]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [thread]);
+  useEffect(() => {
+    const el = composerRef.current;
+    if (!el) {
+      return;
+    }
+    el.style.height = "auto";
+    el.style.height = `${String(Math.min(el.scrollHeight, MAX_COMPOSER_HEIGHT))}px`;
+  }, [draft, open]);
+  const onComposerKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+  if (!mounted) {
+    return null;
+  }
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "askai-trigger",
+      "aria-label": `${label} (${shortcutHint})`,
+      onClick: () => {
+        setOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "askai-trigger-icon", children: sparkleIcon() }),
+        /* @__PURE__ */ jsx("span", { className: "askai-trigger-label", children: label }),
+        /* @__PURE__ */ jsx("kbd", { className: "askai-kbd", children: shortcutHint })
+      ]
+    }
+  );
+  const panel = /* @__PURE__ */ jsxs("aside", { className: "askai-panel", role: "dialog", "aria-modal": "false", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("header", { className: "askai-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "askai-head-icon", children: sparkleIcon() }),
+      /* @__PURE__ */ jsx("h2", { className: "askai-head-title", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "askai-head-hint", children: "Esc" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "askai-head-btn",
+          "aria-label": "New chat",
+          title: "New chat",
+          disabled: thread.length === 0,
+          onClick: newChat,
+          children: newChatIcon()
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "askai-head-btn", "aria-label": "Close", onClick: close, children: closeIcon() })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "askai-thread", ref: scrollRef, children: thread.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "askai-empty", children: [
+      /* @__PURE__ */ jsx("p", { className: "askai-empty-line", children: "Ask a question about this documentation. Answers cite the pages they come from." }),
+      /* @__PURE__ */ jsx("div", { className: "askai-chips", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "askai-chip",
+          onClick: () => {
+            ask(suggestion, threadRef.current);
+          },
+          children: suggestion
+        },
+        suggestion
+      )) })
+    ] }) : thread.map(
+      (entry) => entry.role === "user" ? /* @__PURE__ */ jsx("div", { className: "askai-question", children: /* @__PURE__ */ jsx("div", { className: "askai-bubble", children: entry.text }) }, entry.id) : /* @__PURE__ */ jsxs("div", { className: "askai-answer", "data-state": entry.state, children: [
+        /* @__PURE__ */ jsx(AnswerBody, { text: entry.text, streaming: entry.state === "streaming" }),
+        entry.sources.length > 0 && entry.state !== "error" ? /* @__PURE__ */ jsxs("div", { className: "askai-sources", children: [
+          /* @__PURE__ */ jsx("span", { className: "askai-sources-label", children: "Sources" }),
+          /* @__PURE__ */ jsx("div", { className: "askai-sources-chips", children: entry.sources.map((source) => /* @__PURE__ */ jsx("a", { className: "askai-source", href: source.url, children: source.title }, source.url)) })
+        ] }) : null,
+        entry.error === void 0 ? null : /* @__PURE__ */ jsxs("div", { className: "askai-error", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { className: "askai-error-text", children: entry.error }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "askai-retry",
+              disabled: busy,
+              onClick: () => {
+                retry(entry.id);
+              },
+              children: "Try again"
+            }
+          )
+        ] })
+      ] }, entry.id)
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "askai-composer", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: composerRef,
+          className: "askai-input",
+          rows: 1,
+          value: draft,
+          placeholder,
+          "aria-label": placeholder,
+          maxLength: MAX_MESSAGE_CHARS,
+          disabled: busy,
+          onChange: (event) => {
+            setDraft(event.target.value);
+          },
+          onKeyDown: onComposerKeyDown
+        }
+      ),
+      busy ? /* @__PURE__ */ jsx("button", { type: "button", className: "askai-send", "aria-label": "Stop", onClick: stop, children: stopIcon() }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "askai-send",
+          "aria-label": "Send",
+          disabled: draft.trim() === "",
+          onClick: submit,
+          children: sendIcon()
+        }
+      )
+    ] })
+  ] });
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: "askai-root", "data-open": open ? "" : void 0, children: open ? panel : trigger }),
+    document.body
+  );
+}
+
+export { AskAi };
+//# sourceMappingURL=ask-ai.js.map
+//# sourceMappingURL=ask-ai.js.map