@kat-ai/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,956 @@
+// src/citations/CitationDialog.tsx
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import { jsx, jsxs } from "react/jsx-runtime";
+function extractPageFromUrl(url) {
+  if (!url) return null;
+  try {
+    const parsed = new URL(url, typeof window !== "undefined" ? window.location.origin : "http://localhost");
+    const searchPage = parsed.searchParams.get("page");
+    const hashPart = url.split("#")[1];
+    const hashParams = new URLSearchParams(hashPart?.replace(/^\?/, "") || "");
+    const hashPage = hashParams.get("page");
+    const candidate = hashPage || searchPage;
+    if (candidate) {
+      const num = Number.parseInt(candidate, 10);
+      return Number.isFinite(num) && num > 0 ? num : null;
+    }
+  } catch {
+  }
+  return null;
+}
+function parseCitationMeta(url) {
+  if (!url) return null;
+  try {
+    const hashPart = url.split("#")[1];
+    const hashParams = new URLSearchParams(hashPart?.replace(/^\?/, "") || "");
+    const metaRaw = hashParams.get("meta");
+    if (!metaRaw) return null;
+    const parsed = JSON.parse(metaRaw);
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function CitationDialog({ url, isOpen, onClose, citation }) {
+  const [content, setContent] = useState("");
+  const [pdfUrl, setPdfUrl] = useState(null);
+  const [isPdf, setIsPdf] = useState(false);
+  const [pageNumber, setPageNumber] = useState(null);
+  const [citationMeta, setCitationMeta] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (isOpen && (url || citation)) {
+      let cancelled = false;
+      const loadCitation = async () => {
+        setLoading(true);
+        setError(null);
+        setContent("");
+        setPdfUrl(null);
+        setIsPdf(false);
+        setPageNumber(null);
+        if (citation) {
+          const meta2 = {
+            label: citation.label,
+            source: citation.referenceSummary,
+            fileName: citation.fileName,
+            preview: citation.preview,
+            // Map other fields if available in reference metadata
+            ...citation.reference?.file?.metadata || {}
+          };
+          setCitationMeta(meta2);
+          if (citation.content) {
+            setContent(citation.content);
+            setLoading(false);
+            return;
+          }
+        }
+        const targetUrl = url || citation?.reference?.file?.signedUrl || citation?.reference?.file?.signed_url;
+        if (!targetUrl) {
+          if (citation?.content) {
+            setContent(citation.content);
+            setLoading(false);
+          } else {
+            setError("No content or URL available");
+            setLoading(false);
+          }
+          return;
+        }
+        const meta = parseCitationMeta(targetUrl);
+        if (!citationMeta) {
+          setCitationMeta(meta);
+        }
+        const [baseUrl, hashFragment] = targetUrl.split("#");
+        const fragment = hashFragment ? `#${hashFragment}` : "";
+        const apiUrlBase = baseUrl.startsWith("/api/citation") ? baseUrl : `/api/citation?url=${encodeURIComponent(baseUrl)}`;
+        const apiUrlWithFragment = `${apiUrlBase}${fragment}`;
+        const derivedPage = extractPageFromUrl(apiUrlWithFragment) ?? meta?.page ?? null;
+        setPageNumber(derivedPage);
+        let urlToCheck = baseUrl.toLowerCase();
+        try {
+          let decoded = urlToCheck;
+          for (let i = 0; i < 3; i++) {
+            const newDecoded = decodeURIComponent(decoded);
+            if (newDecoded === decoded) break;
+            decoded = newDecoded;
+          }
+          urlToCheck = decoded;
+        } catch {
+        }
+        const looksLikePdf = urlToCheck.includes(".pdf") || urlToCheck.includes("content-type=application/pdf") || urlToCheck.includes("application/pdf") || targetUrl.toLowerCase().includes("pdf") || citation?.contentType === "application/pdf";
+        if (looksLikePdf) {
+          if (!cancelled) {
+            setPdfUrl(apiUrlWithFragment);
+            setIsPdf(true);
+            setPageNumber(derivedPage);
+            setLoading(false);
+          }
+          return;
+        }
+        try {
+          const res = await fetch(apiUrlBase);
+          if (!res.ok) {
+            const errorData = await res.json().catch(() => ({ error: res.statusText }));
+            throw new Error(errorData.error || `Failed to fetch: ${res.status} ${res.statusText}`);
+          }
+          const contentType = res.headers.get("content-type") || "";
+          if (contentType.includes("application/pdf")) {
+            if (!cancelled) {
+              setPdfUrl(apiUrlWithFragment);
+              setIsPdf(true);
+              setPageNumber(derivedPage);
+            }
+            return;
+          }
+          const text = await res.text();
+          if (!cancelled) {
+            setContent(text);
+          }
+        } catch (err) {
+          console.error("Error fetching citation content:", err);
+          if (!cancelled) {
+            setError(err instanceof Error ? err.message : "Failed to load content");
+          }
+        } finally {
+          if (!cancelled) {
+            setLoading(false);
+          }
+        }
+      };
+      loadCitation();
+      return () => {
+        cancelled = true;
+      };
+    } else {
+      setContent("");
+      setError(null);
+      setPdfUrl(null);
+      setIsPdf(false);
+      setPageNumber(null);
+      setCitationMeta(null);
+      setLoading(false);
+    }
+  }, [isOpen, url, citation]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  const renderCitationInfo = () => {
+    if (!citationMeta && !pageNumber) return null;
+    const meta = citationMeta || {};
+    const infoItems = [
+      { label: "Page", value: pageNumber ?? meta.page ?? "Not provided" },
+      { label: "Label", value: meta.label },
+      { label: "Source", value: meta.source },
+      { label: "File", value: meta.fileName },
+      { label: "Row ID", value: meta.rowId },
+      { label: "Category", value: meta.category },
+      { label: "Source Type", value: meta.sourceType }
+    ].filter((item) => item.value !== void 0 && item.value !== null && item.value !== "");
+    return /* @__PURE__ */ jsx("div", { style: {
+      padding: "12px 14px",
+      backgroundColor: "#1a1a1a",
+      border: "1px solid #2a2a2a",
+      borderRadius: "8px",
+      color: "#d0d0d0",
+      fontSize: "14px",
+      lineHeight: "1.6"
+    }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "10px", alignItems: "center" }, children: infoItems.map((item) => /* @__PURE__ */ jsxs("span", { style: {
+      padding: "6px 10px",
+      borderRadius: "6px",
+      backgroundColor: "#0f172a",
+      color: "#7dd3fc",
+      border: "1px solid #1f2937",
+      fontWeight: 600,
+      fontSize: "13px"
+    }, children: [
+      item.label,
+      ": ",
+      String(item.value)
+    ] }, item.label)) }) });
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        backdropFilter: "blur(8px)",
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px",
+        animation: "fadeIn 0.2s ease-out"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        @keyframes spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        .citation-dialog-scrollbar::-webkit-scrollbar {
+          width: 8px;
+        }
+        .citation-dialog-scrollbar::-webkit-scrollbar-track {
+          background: #111111;
+          border-radius: 4px;
+        }
+        .citation-dialog-scrollbar::-webkit-scrollbar-thumb {
+          background: #1a1a1a;
+          border-radius: 4px;
+        }
+        .citation-dialog-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: #2a2a2a;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              backgroundColor: "#111111",
+              borderRadius: "12px",
+              border: "1px solid #1a1a1a",
+              width: "100%",
+              maxWidth: "950px",
+              maxHeight: "92vh",
+              display: "flex",
+              flexDirection: "column",
+              boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05)",
+              animation: "slideUp 0.3s ease-out",
+              overflow: "hidden"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "20px 28px",
+                    borderBottom: "1px solid #1a1a1a",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    background: "linear-gradient(to bottom, #111111, #0a0a0a)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            width: "36px",
+                            height: "36px",
+                            borderRadius: "8px",
+                            background: "linear-gradient(135deg, #0070f3 0%, #0051cc 100%)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "18px",
+                            boxShadow: "0 2px 8px rgba(0, 112, 243, 0.3)"
+                          },
+                          children: "\u{1F4C4}"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("h2", { style: {
+                          color: "#ffffff",
+                          margin: 0,
+                          fontSize: "20px",
+                          fontWeight: "600",
+                          letterSpacing: "-0.01em",
+                          lineHeight: "1.2"
+                        }, children: "Source Document" }),
+                        /* @__PURE__ */ jsx("div", { style: {
+                          fontSize: "13px",
+                          color: "#888888",
+                          marginTop: "4px",
+                          fontWeight: "400"
+                        }, children: "Reference information" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          background: "transparent",
+                          border: "1px solid #1a1a1a",
+                          color: "#888888",
+                          fontSize: "20px",
+                          cursor: "pointer",
+                          padding: "8px",
+                          lineHeight: 1,
+                          borderRadius: "6px",
+                          transition: "all 0.2s ease",
+                          width: "36px",
+                          height: "36px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#1a1a1a";
+                          e.currentTarget.style.borderColor = "#2a2a2a";
+                          e.currentTarget.style.color = "#ffffff";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                          e.currentTarget.style.borderColor = "#1a1a1a";
+                          e.currentTarget.style.color = "#888888";
+                        },
+                        "aria-label": "Close dialog",
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "citation-dialog-scrollbar",
+                  style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "24px",
+                    color: "#ffffff",
+                    background: "#111111"
+                  },
+                  children: [
+                    loading && /* @__PURE__ */ jsxs("div", { style: {
+                      textAlign: "center",
+                      padding: "4rem 2rem",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: "1rem"
+                    }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            width: "40px",
+                            height: "40px",
+                            border: "3px solid #2a2a2a",
+                            borderTopColor: "#4a9eff",
+                            borderRadius: "50%",
+                            animation: "spin 0.8s linear infinite"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { style: {
+                        color: "#a0a0a0",
+                        fontSize: "0.95rem",
+                        fontWeight: "500"
+                      }, children: "Loading document..." })
+                    ] }),
+                    error && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: "1.25rem 1.5rem",
+                          backgroundColor: "#2a1a1a",
+                          borderRadius: "8px",
+                          color: "#ff6b6b",
+                          border: "1px solid #4a2a2a",
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: "0.75rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem" }, children: "\u26A0\uFE0F" }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx("strong", { style: { display: "block", marginBottom: "0.25rem", fontSize: "0.95rem" }, children: "Error loading document" }),
+                            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.875rem", color: "#ff9999" }, children: error })
+                          ] })
+                        ]
+                      }
+                    ),
+                    !loading && !error && isPdf && pdfUrl && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                      renderCitationInfo(),
+                      /* @__PURE__ */ jsx("div", { style: {
+                        borderRadius: "8px",
+                        overflow: "hidden",
+                        border: "1px solid #1a1a1a",
+                        backgroundColor: "#0a0a0a",
+                        minHeight: "60vh"
+                      }, children: /* @__PURE__ */ jsx(
+                        "object",
+                        {
+                          data: pdfUrl,
+                          type: "application/pdf",
+                          width: "100%",
+                          height: "100%",
+                          "aria-label": "PDF viewer",
+                          style: { display: "block", minHeight: "70vh" },
+                          children: /* @__PURE__ */ jsx(
+                            "iframe",
+                            {
+                              src: pdfUrl,
+                              title: "PDF viewer",
+                              style: { width: "100%", height: "70vh", border: "none" }
+                            }
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: "12px",
+                        flexWrap: "wrap"
+                      }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { color: "#888888", fontSize: "13px" }, children: "Prefer a new tab? Open the PDF directly." }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => window.open(pdfUrl, "_blank", "noopener,noreferrer"),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              padding: "10px 16px",
+                              backgroundColor: "#0070f3",
+                              color: "#ffffff",
+                              border: "none",
+                              borderRadius: "6px",
+                              fontSize: "14px",
+                              fontWeight: "600",
+                              cursor: "pointer",
+                              transition: "all 0.2s ease"
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.backgroundColor = "#0051cc";
+                              e.currentTarget.style.transform = "translateY(-1px)";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.backgroundColor = "#0070f3";
+                              e.currentTarget.style.transform = "translateY(0)";
+                            },
+                            children: /* @__PURE__ */ jsx("span", { children: "Open in new tab" })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    !loading && !error && !isPdf && content && /* @__PURE__ */ jsxs("div", { style: {
+                      maxWidth: "800px",
+                      margin: "0 auto"
+                    }, children: [
+                      /* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: renderCitationInfo() }),
+                      /* @__PURE__ */ jsx(
+                        ReactMarkdown,
+                        {
+                          remarkPlugins: [remarkMath],
+                          rehypePlugins: [rehypeKatex],
+                          components: {
+                            p: ({ children }) => /* @__PURE__ */ jsx("p", { style: {
+                              marginBottom: "1.25rem",
+                              marginTop: 0,
+                              lineHeight: "1.75",
+                              color: "#d0d0d0",
+                              fontSize: "0.95rem"
+                            }, children }),
+                            h1: ({ children }) => /* @__PURE__ */ jsx("h1", { style: {
+                              fontSize: "2rem",
+                              fontWeight: "700",
+                              marginBottom: "1.25rem",
+                              marginTop: "0",
+                              color: "#fff",
+                              borderBottom: "2px solid #2a2a2a",
+                              paddingBottom: "0.75rem",
+                              letterSpacing: "-0.02em",
+                              lineHeight: "1.3"
+                            }, children }),
+                            h2: ({ children }) => /* @__PURE__ */ jsx("h2", { style: {
+                              fontSize: "1.5rem",
+                              fontWeight: "600",
+                              marginBottom: "1rem",
+                              marginTop: "1.75rem",
+                              color: "#fff",
+                              letterSpacing: "-0.01em",
+                              lineHeight: "1.4"
+                            }, children }),
+                            h3: ({ children }) => /* @__PURE__ */ jsx("h3", { style: {
+                              fontSize: "1.25rem",
+                              fontWeight: "600",
+                              marginBottom: "0.75rem",
+                              marginTop: "1.5rem",
+                              color: "#f0f0f0",
+                              lineHeight: "1.4"
+                            }, children }),
+                            h4: ({ children }) => /* @__PURE__ */ jsx("h4", { style: {
+                              fontSize: "1.1rem",
+                              fontWeight: "600",
+                              marginBottom: "0.75rem",
+                              marginTop: "1.25rem",
+                              color: "#f0f0f0",
+                              lineHeight: "1.4"
+                            }, children }),
+                            strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: {
+                              fontWeight: "600",
+                              color: "#fff"
+                            }, children }),
+                            em: ({ children }) => /* @__PURE__ */ jsx("em", { style: {
+                              fontStyle: "italic",
+                              color: "#d0d0d0"
+                            }, children }),
+                            ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: {
+                              marginBottom: "1.25rem",
+                              paddingLeft: "1.75rem",
+                              listStyleType: "disc",
+                              lineHeight: "1.75"
+                            }, children }),
+                            ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: {
+                              marginBottom: "1.25rem",
+                              paddingLeft: "1.75rem",
+                              listStyleType: "decimal",
+                              lineHeight: "1.75"
+                            }, children }),
+                            li: ({ children }) => /* @__PURE__ */ jsx("li", { style: {
+                              marginBottom: "0.5rem",
+                              lineHeight: "1.75",
+                              color: "#d0d0d0",
+                              paddingLeft: "0.25rem"
+                            }, children }),
+                            code: ({ children }) => /* @__PURE__ */ jsx("code", { style: {
+                              backgroundColor: "#0f0f0f",
+                              padding: "0.2rem 0.5rem",
+                              borderRadius: "4px",
+                              fontSize: "0.875em",
+                              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+                              color: "#a0e0a0",
+                              border: "1px solid #1a1a1a"
+                            }, children }),
+                            pre: ({ children }) => /* @__PURE__ */ jsx("pre", { style: {
+                              backgroundColor: "#0f0f0f",
+                              padding: "1.25rem",
+                              borderRadius: "8px",
+                              overflow: "auto",
+                              marginBottom: "1.25rem",
+                              border: "1px solid #2a2a2a",
+                              fontSize: "0.875rem",
+                              lineHeight: "1.6"
+                            }, children }),
+                            blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { style: {
+                              borderLeft: "4px solid #4a9eff",
+                              paddingLeft: "1.25rem",
+                              marginLeft: 0,
+                              marginBottom: "1.25rem",
+                              color: "#c0c0c0",
+                              fontStyle: "italic",
+                              backgroundColor: "#1f1f1f",
+                              padding: "1rem 1.25rem",
+                              borderRadius: "0 6px 6px 0"
+                            }, children }),
+                            a: ({ href, children }) => /* @__PURE__ */ jsx(
+                              "a",
+                              {
+                                href,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                style: {
+                                  color: "#4a9eff",
+                                  textDecoration: "none",
+                                  borderBottom: "1px solid rgba(74, 158, 255, 0.3)",
+                                  transition: "all 0.2s"
+                                },
+                                onMouseEnter: (e) => {
+                                  e.currentTarget.style.color = "#6bb0ff";
+                                  e.currentTarget.style.borderBottomColor = "rgba(107, 176, 255, 0.6)";
+                                },
+                                onMouseLeave: (e) => {
+                                  e.currentTarget.style.color = "#4a9eff";
+                                  e.currentTarget.style.borderBottomColor = "rgba(74, 158, 255, 0.3)";
+                                },
+                                children
+                              }
+                            ),
+                            table: ({ children }) => /* @__PURE__ */ jsx("div", { style: {
+                              overflowX: "auto",
+                              marginBottom: "1.25rem"
+                            }, children: /* @__PURE__ */ jsx("table", { style: {
+                              width: "100%",
+                              borderCollapse: "collapse"
+                            }, children }) }),
+                            th: ({ children }) => /* @__PURE__ */ jsx("th", { style: {
+                              border: "1px solid #2a2a2a",
+                              padding: "0.75rem",
+                              backgroundColor: "#1f1f1f",
+                              textAlign: "left",
+                              fontWeight: "600",
+                              color: "#fff",
+                              fontSize: "0.9rem"
+                            }, children }),
+                            td: ({ children }) => /* @__PURE__ */ jsx("td", { style: {
+                              border: "1px solid #2a2a2a",
+                              padding: "0.75rem",
+                              color: "#d0d0d0",
+                              fontSize: "0.9rem"
+                            }, children }),
+                            hr: () => /* @__PURE__ */ jsx("hr", { style: {
+                              border: "none",
+                              borderTop: "1px solid #2a2a2a",
+                              margin: "2rem 0"
+                            } })
+                          },
+                          children: content
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/citations/CitationDisplay.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function stripMarkdown(text) {
+  if (!text) return "";
+  return text.replace(/^#+\s*/gm, "").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/__([^_]+)__/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/_([^_]+)_/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/`{1,3}[^`]*`{1,3}/g, "").replace(/\s+/g, " ").trim();
+}
+function formatReferenceSummary(summary, maxLength) {
+  if (!summary) return "";
+  const cleaned = stripMarkdown(summary);
+  if (cleaned.length <= maxLength) {
+    return cleaned;
+  }
+  return cleaned.substring(0, maxLength - 3) + "...";
+}
+function CitationDisplay({
+  citations,
+  onCitationClick,
+  chipColor = "#2a1a3a",
+  borderColor = "#4a2a5a",
+  maxSummaryLength = 40
+}) {
+  if (!citations || citations.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.35rem", marginTop: "0.5rem" }, children: citations.map((citation, idx) => {
+    const displaySummary = formatReferenceSummary(citation.referenceSummary, maxSummaryLength);
+    const tooltipText = stripMarkdown(citation.preview || citation.referenceSummary || "");
+    return /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        title: tooltipText,
+        onClick: () => onCitationClick(citation),
+        style: {
+          padding: "0.35rem 0.5rem",
+          backgroundColor: chipColor,
+          borderRadius: "4px",
+          border: `1px solid ${borderColor}`,
+          fontSize: "0.75rem",
+          color: "#d0a0f0",
+          cursor: "pointer",
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("span", { style: { fontWeight: 600 }, children: [
+            "[",
+            citation.label,
+            "]"
+          ] }),
+          displaySummary && /* @__PURE__ */ jsx2("span", { children: displaySummary })
+        ]
+      },
+      citation.label || idx
+    );
+  }) });
+}
+
+// src/multichoice/MultiChoiceWidget.tsx
+import { useState as useState2, useCallback } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MultiChoiceWidget({
+  options,
+  onSelect,
+  freeTextPlaceholder = "Or type your own answer...",
+  chipColor = "rgba(139, 92, 246, 0.15)",
+  borderColor = "rgba(139, 92, 246, 0.3)",
+  accentColor = "rgba(139, 92, 246, 0.5)",
+  textColor = "#d4b8ff",
+  disabled = false
+}) {
+  const [showFreeText, setShowFreeText] = useState2(false);
+  const [freeTextValue, setFreeTextValue] = useState2("");
+  const handleOptionClick = useCallback(
+    (option) => {
+      if (disabled) return;
+      onSelect(option.label);
+    },
+    [onSelect, disabled]
+  );
+  const handleOtherClick = useCallback(() => {
+    if (disabled) return;
+    setShowFreeText(true);
+  }, [disabled]);
+  const handleFreeTextSubmit = useCallback(() => {
+    if (disabled || !freeTextValue.trim()) return;
+    onSelect(freeTextValue.trim());
+    setFreeTextValue("");
+    setShowFreeText(false);
+  }, [onSelect, freeTextValue, disabled]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleFreeTextSubmit();
+      } else if (e.key === "Escape") {
+        setShowFreeText(false);
+        setFreeTextValue("");
+      }
+    },
+    [handleFreeTextSubmit]
+  );
+  const baseChipStyle = {
+    padding: "0.5rem 0.875rem",
+    backgroundColor: chipColor,
+    borderRadius: "9999px",
+    border: `1px solid ${borderColor}`,
+    fontSize: "0.875rem",
+    color: textColor,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    transition: "all 0.15s ease",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem"
+  };
+  const hoverChipStyle = {
+    ...baseChipStyle,
+    backgroundColor: accentColor,
+    borderColor: textColor
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        marginTop: "0.75rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "0.5rem"
+            },
+            children: [
+              options.map((option) => /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: () => handleOptionClick(option),
+                  disabled,
+                  title: option.description,
+                  style: baseChipStyle,
+                  onMouseEnter: (e) => {
+                    if (!disabled) {
+                      Object.assign(e.currentTarget.style, hoverChipStyle);
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    Object.assign(e.currentTarget.style, baseChipStyle);
+                  },
+                  children: option.label
+                },
+                option.id
+              )),
+              !showFreeText && /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  onClick: handleOtherClick,
+                  disabled,
+                  style: {
+                    ...baseChipStyle,
+                    backgroundColor: "transparent",
+                    borderStyle: "dashed"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!disabled) {
+                      e.currentTarget.style.backgroundColor = chipColor;
+                      e.currentTarget.style.borderStyle = "solid";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.borderStyle = "dashed";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3("span", { style: { fontSize: "1rem", lineHeight: 1 }, children: "+" }),
+                    "Other"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showFreeText && /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "0.5rem",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "text",
+                  value: freeTextValue,
+                  onChange: (e) => setFreeTextValue(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder: freeTextPlaceholder,
+                  disabled,
+                  autoFocus: true,
+                  style: {
+                    flex: 1,
+                    padding: "0.5rem 0.75rem",
+                    backgroundColor: "rgba(0, 0, 0, 0.2)",
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: "0.5rem",
+                    color: textColor,
+                    fontSize: "0.875rem",
+                    outline: "none"
+                  },
+                  onFocus: (e) => {
+                    e.currentTarget.style.borderColor = accentColor;
+                  },
+                  onBlur: (e) => {
+                    e.currentTarget.style.borderColor = borderColor;
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: handleFreeTextSubmit,
+                  disabled: disabled || !freeTextValue.trim(),
+                  style: {
+                    padding: "0.5rem 1rem",
+                    backgroundColor: freeTextValue.trim() ? accentColor : chipColor,
+                    border: `1px solid ${freeTextValue.trim() ? textColor : borderColor}`,
+                    borderRadius: "0.5rem",
+                    color: textColor,
+                    fontSize: "0.875rem",
+                    cursor: disabled || !freeTextValue.trim() ? "not-allowed" : "pointer",
+                    opacity: disabled || !freeTextValue.trim() ? 0.5 : 1,
+                    transition: "all 0.15s ease"
+                  },
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: () => {
+                    setShowFreeText(false);
+                    setFreeTextValue("");
+                  },
+                  disabled,
+                  style: {
+                    padding: "0.5rem",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    color: textColor,
+                    fontSize: "1rem",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    opacity: disabled ? 0.5 : 0.7
+                  },
+                  title: "Cancel",
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CitationDialog,
+  CitationDisplay,
+  MultiChoiceWidget
+};
+//# sourceMappingURL=index.mjs.map