UNPKG

@capitol.ai/ui

Version:

Library of React components from Capitol AI

1,669 lines 205 kB
import { jsx as d, jsxs as L, Fragment as Ot } from "react/jsx-runtime"; import ae, { useState as Z, useMemo as ke, useEffect as _e, createContext as Bn, useContext as Fn, useRef as It, useLayoutEffect as Rn } from "react"; const gt = () => /* @__PURE__ */ d( "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ d("g", { id: "marker-pin-01", children: /* @__PURE__ */ L("g", { id: "Icon", children: [ /* @__PURE__ */ d( "path", { d: "M10 10.8333C11.3807 10.8333 12.5 9.71404 12.5 8.33332C12.5 6.95261 11.3807 5.83332 10 5.83332C8.61929 5.83332 7.5 6.95261 7.5 8.33332C7.5 9.71404 8.61929 10.8333 10 10.8333Z", stroke: "#242329", strokeOpacity: "0.64", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ d( "path", { d: "M10 18.3333C13.3333 15 16.6667 12.0152 16.6667 8.33332C16.6667 4.65142 13.6819 1.66666 10 1.66666C6.3181 1.66666 3.33333 4.65142 3.33333 8.33332C3.33333 12.0152 6.66667 15 10 18.3333Z", stroke: "#242329", strokeOpacity: "0.64", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ) ] }) }) } ), bt = ({ color: e = "#6B757B" }) => /* @__PURE__ */ d( "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ d( "path", { d: "M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ) } ), rt = ({ color: e = "currentColor" }) => /* @__PURE__ */ d( "svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ d( "path", { d: "M8.75036 10.0001H4.16702M4.09648 10.243L2.15071 16.0552C1.99785 16.5119 1.92142 16.7402 1.97627 16.8808C2.0239 17.0029 2.1262 17.0954 2.25244 17.1307C2.3978 17.1712 2.61736 17.0724 3.05647 16.8748L16.9827 10.608C17.4113 10.4151 17.6256 10.3187 17.6918 10.1847C17.7494 10.0684 17.7494 9.93179 17.6918 9.8154C17.6256 9.68143 17.4113 9.585 16.9827 9.39212L3.05161 3.12317C2.61383 2.92617 2.39493 2.82767 2.24971 2.86807C2.1236 2.90317 2.0213 2.99549 1.97351 3.11736C1.91847 3.25769 1.99408 3.4855 2.14531 3.94113L4.09702 9.82134C4.12299 9.8996 4.13598 9.93873 4.14111 9.97874C4.14565 10.0143 4.14561 10.0502 4.14097 10.0857C4.13574 10.1257 4.12265 10.1648 4.09648 10.243Z", stroke: e, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ) } ), $n = ({ color: e = "#242329" }) => /* @__PURE__ */ d( "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ d( "path", { d: "M10.0003 4.16699V15.8337M10.0003 15.8337L15.8337 10.0003M10.0003 15.8337L4.16699 10.0003", stroke: e, strokeOpacity: "0.64", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" } ) } ), Pn = ({ color: e = "#6b7280", className: n = "" }) => /* @__PURE__ */ L( "svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: e, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: n, children: [ /* @__PURE__ */ d("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ d("line", { x1: "6", y1: "6", x2: "18", y2: "18" }) ] } ), On = ({ accentColor: e = "#1C76F3", arrowColor: n = "#fff", onSubmitPrompt: t, disabled: r = !1 }) => /* @__PURE__ */ d( "button", { className: "submitButton", style: e ? { background: e } : {}, onClick: t, disabled: r, "aria-label": "Submit prompt", children: /* @__PURE__ */ d(rt, { color: n }) } ), In = ({ setPrompt: e, prompt: n }) => /* @__PURE__ */ d( "textarea", { suppressContentEditableWarning: !0, role: "textbox", id: "capitolai-summary__prompt", className: "border-2 rounded-lg p-4 mt-4 whitespace-pre-wrap", style: { minHeight: "200px" }, onKeyUp: (t) => { let r = t.currentTarget.lastElementChild; r && r.tagName === "BR" && r.remove(); }, onInput: (t) => { const r = t.target.value; e(r); }, value: n } ), Hn = ({ placeholderText: e, minHeight: n, setPrompt: t, onSubmitPrompt: r, isEditable: l = !0, onChange: o }) => /* @__PURE__ */ d( "div", { suppressContentEditableWarning: !0, role: "textbox", id: "capitolai-summary__prompt", className: "contentEditable", style: n ? { minHeight: `${n}px` } : {}, contentEditable: l, "data-placeholder": e, onKeyUp: (i) => { let s = i.currentTarget.lastElementChild; s && s.tagName === "BR" && s.remove(); }, onKeyDown: (i) => { i.key === "Enter" && (i.preventDefault(), r()); }, onInput: (i) => { const s = i.currentTarget.textContent || ""; t(s), o && o(s); }, "aria-placeholder": e } ), Ht = ({ placeholderText: e = "Enter prompt", minHeight: n, accentColor: t, arrowColor: r = "#fff", onSubmit: l = () => { }, onChange: o = () => { }, disabled: i = !1, enableFormatPrompt: s = !1, defaultFormatPrompt: a = "" }) => { const [u, p] = Z(""), [c, f] = Z(a), b = () => { if (s && c && c.length > 0 ? l(u, c) : l(u), p(""), typeof document < "u") { const h = document.getElementById("capitolai-summary__prompt"); h && (h.textContent = ""); } }; return /* @__PURE__ */ L(Ot, { children: [ /* @__PURE__ */ L("div", { className: "promptContainer", id: "capitolai-summary__prompt-container", children: [ /* @__PURE__ */ d("div", { className: "promptWrapper", children: /* @__PURE__ */ d( Hn, { placeholderText: e, minHeight: n, setPrompt: p, onSubmitPrompt: b, isEditable: !i, onChange: o } ) }), /* @__PURE__ */ d("div", { className: "buttonWrapper", children: /* @__PURE__ */ d( On, { onSubmitPrompt: b, accentColor: t, arrowColor: r, disabled: i } ) }) ] }), s && /* @__PURE__ */ d(In, { setPrompt: f, prompt: c }) ] }); }, ia = ({ onSubmit: e }) => /* @__PURE__ */ L("div", { className: "fancyPromptContainer", "data-testid": "fancy-prompt-container", children: [ /* @__PURE__ */ d( Ht, { placeholderText: "Ask a question", minHeight: 100, accentColor: "#d02523", onSubmit: e } ), /* @__PURE__ */ d("div", { className: "fancyPromptFooter", "data-testid": "fancy-prompt-footer", children: "TODO" }) ] }), jn = ({ prompt: e, onClickHandler: n, arrowColor: t = "#000", arrowComp: r = /* @__PURE__ */ d(rt, { color: t }) }) => /* @__PURE__ */ L( "div", { className: "rounded-lg border-2 border-gray-200 py-2 px-4 flex items-center hover:bg-stone-100 cursor-pointer capitolai-summary__prompt-suggestion", onClick: () => { n(e); }, children: [ /* @__PURE__ */ d("div", { className: "flex-1 text-[13px] ", children: e }), /* @__PURE__ */ d("div", { className: "stroke-gray-500 pl-2", children: r }) ] } ), Vn = ({ prompts: e = [], onClickHandler: n = () => { }, title: t = "Suggestions", arrowColor: r = "#000", arrowComp: l }) => e.length === 0 ? null : /* @__PURE__ */ L("div", { className: "capitolai-summary__prompt-suggestions-container", children: [ /* @__PURE__ */ d("div", { className: "font-bold text-xl pb-4", children: t }), /* @__PURE__ */ d("div", { className: "grid grid-cols-1 justify-between gap-2 sm:grid-cols-2", children: e.map((o, i) => /* @__PURE__ */ d( jn, { prompt: o, onClickHandler: n, arrowColor: r, arrowComp: l }, i )) }) ] }), jt = ({ className: e = "" }) => /* @__PURE__ */ d("div", { className: `${e}`, children: /* @__PURE__ */ L( "svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-arrow-left-icon lucide-arrow-left", children: [ /* @__PURE__ */ d("path", { d: "m12 19-7-7 7-7" }), /* @__PURE__ */ d("path", { d: "M19 12H5" }) ] } ) }), Vt = ({ className: e = "" }) => /* @__PURE__ */ d("div", { className: `${e}`, children: /* @__PURE__ */ L( "svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-arrow-right-icon lucide-arrow-right", children: [ /* @__PURE__ */ d("path", { d: "M5 12h14" }), /* @__PURE__ */ d("path", { d: "m12 5 7 7-7 7" }) ] } ) }), Un = ({ currentPage: e, totalPages: n, onPageChange: t, maxVisiblePages: r = 5, selectedPageColor: l = "bg-blue-500", hoverPageColor: o = "bg-gray-100", useArrows: i = !1, rounded: s }) => { if (n <= 1) return null; const a = () => { const f = Math.floor(r / 2); let b = Math.max(1, e - f), h = Math.min(n, b + r - 1); return h - b + 1 < r && (b = Math.max(1, h - r + 1)), Array.from( { length: h - b + 1 }, (k, x) => b + x ); }, u = (f) => !!f && (f.startsWith("#") || /^rgb\(|^hsl\(|^rgba\(|^hsla\(/.test(f) || // Only treat single word colors as CSS colors, not Tailwind classes /^[a-zA-Z]+$/.test(f) && !f.includes("-") && !f.includes(":")), p = ke( () => u(l) ? { backgroundColor: l, color: "#fff" } : void 0, [l] ), c = ke( () => u(o) ? { backgroundColor: o } : void 0, [o] ); return _e(() => { if (typeof window < "u" && !document.getElementById("pagination-custom-hover")) { const f = document.createElement("style"); return f.id = "pagination-custom-hover", f.innerHTML = ` .custom-hover-color:hover { filter: brightness(0.9); } `, document.head.appendChild(f), () => { f.parentNode && f.parentNode.removeChild(f); }; } }, []), /* @__PURE__ */ L("div", { className: `flex justify-center items-center mt-6${s !== void 0 ? " gap-2" : " space-x-2"}`, children: [ /* @__PURE__ */ d( "button", { onClick: () => t(e - 1), disabled: e === 1, className: `py-1 rounded${s ? `-${s} px-1` : " px-3"} capitolai-pagination__previous-button ${e === 1 ? i ? "bg-transparent text-gray-300 cursor-not-allowed capitolai-pagination__previous-button__disabled" : "bg-gray-200 text-gray-500 cursor-not-allowed capitolai-pagination__previous-button__disabled" : i ? "bg-transparent text-gray-700 capitolai-pagination__previous-button__active" : "bg-white text-gray-700 hover:bg-gray-100 capitolai-pagination__previous-button__active"}`, children: i ? /* @__PURE__ */ d(jt, { className: "w-6 h-6" }) : "Previous" } ), a().map((f) => { const b = e === f; return /* @__PURE__ */ d( "button", { onClick: () => t(f), className: `px-3 py-1 rounded${s ? `-${s}` : ""} capitolai-pagination__page-number ${b ? u(l) ? "capitolai-pagination__page-number__selected" : `${l} text-white capitolai-pagination__page-number__selected` : u(o) ? "bg-white text-gray-700 capitolai-pagination__page-number__not-selected custom-hover-color" : `bg-white text-gray-700 hover:${o} capitolai-pagination__page-number__not-selected`}`, style: b && u(l) ? p : !b && u(o) ? c : void 0, children: f }, f ); }), /* @__PURE__ */ d( "button", { onClick: () => t(e + 1), disabled: e === n, className: `py-1 rounded${s ? `-${s} px-1` : " px-3"} capitolai-pagination__next-button ${e === n ? i ? "bg-transparent text-gray-300 cursor-not-allowed capitolai-pagination__next-button__disabled" : "bg-gray-200 text-gray-500 cursor-not-allowed capitolai-pagination__next-button__disabled" : i ? "bg-transparent text-gray-700 capitolai-pagination__next-button__active" : "bg-white text-gray-700 hover:bg-gray-100 capitolai-pagination__next-button__active"}`, children: i ? /* @__PURE__ */ d(Vt, { className: "w-6 h-6" }) : "Next" } ) ] }); }, Ut = { primaryColor: "#007bff", background: "#fff", textColor: "#222", borderRadius: "8px", inputInnerBorderRadius: "12px", inputBackground: "#f5f5f5", inputTextColor: "#222", inputBorderColor: "#ccc", rowBackground: "#fff", placeholderColor: "#6B757B", boxShadow: "0px 8px 10px -8px rgba(0, 0, 0, 0.20), 0px 16px 24px -16px rgba(0, 0, 0, 0.14), 0px 6px 30px -6px rgba(0, 0, 0, 0.12)", outerBorderColor: "#DFE5E4", isDarkMode: !1, isLightMode: !0, // Source component colors cardBackground: "#f5f5f4", cardHoverBackground: "#e7e5e4", secondaryTextColor: "#6b7280", badgeBackground: "#d1d5db", badgeTextColor: "#374151" }, la = { primaryColor: "#31B455", background: "#181A1B", // halo textColor: "#E6F3E9", borderRadius: "8px", inputInnerBorderRadius: "12px", inputBackground: "#232323", // input area inputTextColor: "#E6F3E9", inputBorderColor: "#212120", rowBackground: "#232323", // input area placeholderColor: "rgba(230, 243, 233, 0.7)", boxShadow: "0px 0px 25px 11px rgba(19, 19, 19, 0.75)", outerBorderColor: "#212120", isDarkMode: !0, isLightMode: !1, // Source component colors cardBackground: "#2a2a2a", cardHoverBackground: "#333", secondaryTextColor: "#9ca3af", badgeBackground: "#4a4a4a", badgeTextColor: "#e5e7eb" }, qt = Bn(Ut), oa = ({ theme: e = Ut, children: n }) => /* @__PURE__ */ d(qt.Provider, { value: e, children: n }), ue = () => Fn(qt), qn = ({ currentPage: e, totalPages: n, onPageChange: t, maxVisiblePages: r = 5, useArrows: l = !1, rounded: o, selectedPageColor: i, hoverPageColor: s, buttonBackground: a, buttonTextColor: u, disabledButtonColor: p, disabledTextColor: c, borderRadius: f, boxShadow: b, className: h = "", style: k = {} }) => { const x = ue(); if (n <= 1) return null; const C = () => { const N = Math.floor(r / 2); let I = Math.max(1, e - N), V = Math.min(n, I + r - 1); return V - I + 1 < r && (I = Math.max(1, V - r + 1)), Array.from( { length: V - I + 1 }, (X, re) => I + re ); }, w = f || x.borderRadius || "8px", S = b || "none", D = i || x.primaryColor || "#007bff", T = s || (x.isDarkMode ? "#2a2a2a" : "#f0f0f0"), A = a || x.rowBackground || "#fff", B = u || x.textColor || "#222", E = p || (x.isDarkMode ? "#2a2a2a" : "#f5f5f5"), v = c || x.placeholderColor || "#6B757B", m = (N) => !!N && (N.startsWith("#") || /^rgb\(|^hsl\(|^rgba\(|^hsla\(/.test(N) || // Only treat single word colors as CSS colors, not Tailwind classes /^[a-zA-Z]+$/.test(N) && !N.includes("-") && !N.includes(":")), F = ke( () => m(D) ? { backgroundColor: D, color: "#fff" } : void 0, [D] ); ke( () => m(T) ? { backgroundColor: T } : void 0, [T] ); const R = ke( () => m(A) ? { backgroundColor: A, color: B } : void 0, [A, B] ), _ = ke( () => m(E) ? { backgroundColor: E, color: v } : void 0, [E, v] ), O = () => o ? `rounded-${o}` : "", g = `px-3 py-1 transition-colors duration-200${o ? ` ${O()}` : ""} capitolai-pagination__button`, M = `px-3 py-1 transition-colors duration-200${o ? ` ${O()}` : ""} capitolai-pagination__page-number`, W = (N, I) => N ? "" : I ? "custom-hover-color" : "hover:bg-gray-100", ee = (N, I, V, X) => N ? _ : I && V ? V : X, te = (N, I) => { if (I) return N ? F : R; if (x.isDarkMode) return N ? { backgroundColor: "#3b82f6", color: "#ffffff" } : { backgroundColor: "#1f2937", color: "#e5e7eb" }; }, $ = (N, I) => { let V = `${M} ${N ? "capitolai-pagination__page-number__selected" : "capitolai-pagination__page-number__not-selected"}`; return I || (N ? V += " bg-blue-500 text-white" : V += " bg-white text-gray-700"), V; }; return _e(() => { if (typeof window < "u" && !document.getElementById("pagination-custom-hover")) { const N = document.createElement("style"); return N.id = "pagination-custom-hover", N.innerHTML = ` .custom-hover-color:hover { filter: brightness(0.9); } `, document.head.appendChild(N), () => { N.parentNode && N.parentNode.removeChild(N); }; } }, []), /* @__PURE__ */ L( "div", { className: `flex justify-center items-center mt-6 gap-2 capitolai-pagination ${h}`, style: { borderRadius: w, boxShadow: S, ...k }, children: [ /* @__PURE__ */ d( "button", { onClick: () => t(e - 1), disabled: e === 1, className: `${g} capitolai-pagination__previous-button ${e === 1 ? "capitolai-pagination__previous-button__disabled" : "capitolai-pagination__previous-button__active"}`, style: ee( e === 1, !!(a && m(a)), R, { backgroundColor: A, color: B, ...x.isDarkMode ? { backgroundColor: "#2a2a2a", color: "#e5e5e5" } : {} } ), children: l ? /* @__PURE__ */ d(jt, { className: "w-6 h-6" }) : "Previous" } ), C().map((N) => { const I = e === N, V = !!(i && m(i)), X = !!(s && m(s)), re = !!(a && m(a)), K = V || X || re, fe = W(I, K), he = $(I, K), me = te(I, K); return /* @__PURE__ */ d( "button", { onClick: () => t(N), className: `${he} ${fe}`, style: me, children: N }, N ); }), /* @__PURE__ */ d( "button", { onClick: () => t(e + 1), disabled: e === n, className: `${g} capitolai-pagination__next-button ${e === n ? "capitolai-pagination__next-button__disabled" : "capitolai-pagination__next-button__active"}`, style: ee( e === n, !!(a && m(a)), R, { backgroundColor: A, color: B, ...x.isDarkMode ? { backgroundColor: "#2a2a2a", color: "#e5e5e5" } : {} } ), children: l ? /* @__PURE__ */ d(Vt, { className: "w-6 h-6" }) : "Next" } ) ] } ); }, Wn = ({ sources: e = [], initialItemsCount: n = 3, expandButtonText: t = "Show all Sources", expandedHeaderText: r = "Viewing all sources", horizontalBreakpoint: l = 768, className: o = "", style: i = {} }) => { const [s, a] = Z(!1), u = ue(), p = `${l}px`, c = l, [f, b] = Z( typeof window < "u" && window.innerWidth < l ); _e(() => { const k = () => { b(window.innerWidth < l); }; return window.addEventListener("resize", k), k(), () => { window.removeEventListener("resize", k); }; }, [l]); const h = s || f ? e : e.slice(0, n); return /* @__PURE__ */ L("div", { className: o, style: i, children: [ s && !f && /* @__PURE__ */ L( "div", { className: "flex items-center justify-between", style: { padding: "12px 0px 12px 16px" }, children: [ /* @__PURE__ */ d( "span", { className: "font-semibold text-sm", style: { color: u.textColor }, children: r } ), /* @__PURE__ */ d( "button", { onClick: () => a(!1), className: "p-1 rounded-full transition-colors duration-200", style: { background: "transparent", color: u.secondaryTextColor || "#6b7280", width: "24px", height: "24px", display: "flex", alignItems: "center", justifyContent: "center" }, onMouseEnter: (k) => { k.currentTarget.style.background = u.isDarkMode ? "#4a4a4a" : "#e5e7eb"; }, onMouseLeave: (k) => { k.currentTarget.style.background = "transparent"; }, children: /* @__PURE__ */ d(Pn, { color: u.secondaryTextColor || "#6b7280" }) } ) ] } ), /* @__PURE__ */ L( "div", { className: "capitolai__summary-sources__list", style: { "--breakpoint": p }, children: [ /* @__PURE__ */ d("style", { children: ` .capitolai__summary-sources__list { display: grid; grid-template-columns: 1fr; gap: 8px; } .capitolai__summary-sources__list > div { width: auto; } @media (max-width: ${c - 1}px) { .capitolai__summary-sources__list { display: flex; overflow-x: auto; padding-bottom: 8px; gap: 8px; scrollbar-width: thin; scrollbar-color: ${u.secondaryTextColor || "#6b7280"} transparent; } .capitolai__summary-sources__list > div { flex-shrink: 0; width: 252px; } } @media (min-width: 768px) and (max-width: ${c - 1}px) { .capitolai__summary-sources__list > div { width: 340px; } } ` }), h.map((k, x) => /* @__PURE__ */ d("div", { className: "", children: /* @__PURE__ */ d(Wt, { source: k, index: x, isMasonryLayout: !0 }) }, x)) ] } ), e.length > n && !s && !f && /* @__PURE__ */ L( "div", { className: "flex items-center justify-center gap-2 mt-1 p-3 cursor-pointer rounded-lg transition-colors duration-200", style: { background: "transparent" }, onClick: () => a(!0), onMouseEnter: (k) => { k.currentTarget.style.background = u.cardBackground || u.rowBackground || "#f5f5f4"; }, onMouseLeave: (k) => { k.currentTarget.style.background = "transparent"; }, children: [ /* @__PURE__ */ d($n, { color: u.isDarkMode ? "#FFF" : "#242329" }), /* @__PURE__ */ d( "span", { className: "capitolai__summary-sources__expand-button", style: { color: u.textColor, fontSize: "13px", fontStyle: "normal", fontWeight: 700, lineHeight: "20px" }, children: t } ) ] } ) ] }); }, Wt = ({ source: e, index: n, isMasonryLayout: t = !1 }) => { const r = ue(); function l(p) { return new URL(p).hostname; } const o = l(e.url), i = o, s = (e == null ? void 0 : e.title) || o, a = (e == null ? void 0 : e.description) || s, u = e == null ? void 0 : e.image; return /* @__PURE__ */ L( "div", { className: "group p-4 rounded-lg flex cursor-pointer capitolai-pagination__sources__source-block", style: { background: t && (r.cardBackground || r.rowBackground) || "transparent", borderRadius: r.borderRadius }, onMouseEnter: (p) => { t ? p.currentTarget.style.background = r.cardHoverBackground || r.cardBackground || r.rowBackground || "transparent" : p.currentTarget.style.background = r.cardBackground || r.rowBackground || "transparent"; }, onMouseLeave: (p) => { t ? p.currentTarget.style.background = r.cardBackground || r.rowBackground || "transparent" : p.currentTarget.style.background = "transparent"; }, children: [ /* @__PURE__ */ L( "div", { onClick: () => { typeof window < "u" && window.open(e.url, "_blank"); }, className: "flex-1", "data-testid": "source-clickable", children: [ /* @__PURE__ */ L("div", { className: "flex items-center", children: [ /* @__PURE__ */ d( "div", { className: "w-5 h-5 min-w-5 rounded-full flex items-center justify-center text-xs", style: { background: r.badgeBackground || "#d1d5db", color: r.badgeTextColor || "#374151" }, children: n + 1 } ), /* @__PURE__ */ d( "img", { style: { marginLeft: "-4px" }, className: "w-5 h-5 rounded-full flex items-center justify-center", src: `https://www.google.com/s2/favicons?sz=18&domain=${o}` } ), /* @__PURE__ */ d( "div", { className: "pl-2 uppercase font-medium text-[11px] line-clamp-1 break-all", style: { color: r.secondaryTextColor || "#6b7280" }, children: i } ) ] }), !t && /* @__PURE__ */ d( "div", { className: "font-bold text-[19px] mt-2 line-clamp-1 break-all group-hover:underline py-1", style: { color: r.textColor }, children: s } ), /* @__PURE__ */ d( "div", { className: t ? "text-[13px] pt-2 font-bold group-hover:underline line-clamp-3" : "text-[15px] line-clamp-3", style: { color: t ? r.textColor : r.secondaryTextColor || "#6b7280" }, children: a } ) ] }, `source-${n}` ), t ? null : u ? /* @__PURE__ */ d("img", { className: "w-[174px] h-[116px] ml-12 object-cover", src: u }) : /* @__PURE__ */ d("div", { className: "w-[174px] h-[116px] ml-12" }) ] } ); }, Zn = ({ sources: e = [], itemsPerPage: n = 4, layout: t = "default", paginationConfig: r = {}, showTitle: l = !0 }) => { const [o, i] = Z(1), s = t === "masonry", a = Math.ceil(e.length / n), u = (o - 1) * n, p = u + n, c = e.slice(u, p); switch (t) { case "compact": return /* @__PURE__ */ L("div", { className: "inline-flex items-center gap-2 px-3 py-2 bg-[rgba(36,35,41,0.06)] rounded-full", children: [ l && /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ L("span", { className: "text-[13px] font-normal text-[rgba(36,35,41,0.8)]", children: [ e.length, " Source", e.length !== 1 ? "s" : "" ] }) }), /* @__PURE__ */ d("div", { className: "flex -space-x-1.5", children: e.map((f, b) => { const h = new URL(f.url).hostname; return /* @__PURE__ */ L( "div", { onClick: () => window.open(f.url, "_blank"), className: "group relative w-5 h-5 rounded-full bg-[#E7E7E7] border border-white shadow-[0px_1px_5px_-1px_rgba(0,0,0,0.12),0px_2px_2px_-2px_rgba(0,0,0,0.14),0px_3px_1px_-3px_rgba(0,0,0,0.2)] overflow-visible cursor-pointer hover:scale-110 hover:z-20 transition-transform duration-200", children: [ /* @__PURE__ */ d( "img", { src: `https://www.google.com/s2/favicons?sz=32&domain=${h}`, alt: `${h} favicon`, className: "w-full h-full object-cover" } ), /* @__PURE__ */ L("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-700 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none z-30", children: [ f.url, /* @__PURE__ */ d("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-gray-700" }) ] }) ] }, f.url ); }) }) ] }); case "ai-summary": return /* @__PURE__ */ d(Wn, { sources: e }); case "masonry": case "default": default: return /* @__PURE__ */ L("div", { children: [ l && /* @__PURE__ */ d( "div", { className: `font-bold text-xl capitolai-pagination__sources__title ${s ? "pb-6" : "pb-12"} `, children: `${e.length} source${e.length > 0 ? "s" : ""}` } ), /* @__PURE__ */ d( "div", { className: `grid grid-cols-1 justify-between capitolai-pagination__sources__list ${s ? "gap-2 sm:grid-cols-2" : "gap-6"}`, children: c.map((f, b) => /* @__PURE__ */ d( Wt, { source: f, index: u + b, isMasonryLayout: s }, b )) } ), (() => { const { useV2: f, ...b } = r, h = { currentPage: o, totalPages: a, onPageChange: i, ...b }; return f ? /* @__PURE__ */ d(qn, { ...h }) : /* @__PURE__ */ d(Un, { ...h }); })() ] }); } }; class De { /** * @constructor * @param {Properties} property * @param {Normal} normal * @param {string} [space] */ constructor(n, t, r) { this.property = n, this.normal = t, r && (this.space = r); } } De.prototype.property = {}; De.prototype.normal = {}; De.prototype.space = null; function Zt(e, n) { const t = {}, r = {}; let l = -1; for (; ++l < e.length; ) Object.assign(t, e[l].property), Object.assign(r, e[l].normal); return new De(t, r, n); } function Le(e) { return e.toLowerCase(); } class J { /** * @constructor * @param {string} property * @param {string} attribute */ constructor(n, t) { this.property = n, this.attribute = t; } } J.prototype.space = null; J.prototype.boolean = !1; J.prototype.booleanish = !1; J.prototype.overloadedBoolean = !1; J.prototype.number = !1; J.prototype.commaSeparated = !1; J.prototype.spaceSeparated = !1; J.prototype.commaOrSpaceSeparated = !1; J.prototype.mustUseProperty = !1; J.prototype.defined = !1; let Kn = 0; const z = pe(), U = pe(), Kt = pe(), y = pe(), P = pe(), Ce = pe(), Y = pe(); function pe() { return 2 ** ++Kn; } const Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, boolean: z, booleanish: U, commaOrSpaceSeparated: Y, commaSeparated: Ce, number: y, overloadedBoolean: Kt, spaceSeparated: P }, Symbol.toStringTag, { value: "Module" })), Ie = Object.keys(Je); class it extends J { /** * @constructor * @param {string} property * @param {string} attribute * @param {number|null} [mask] * @param {string} [space] */ constructor(n, t, r, l) { let o = -1; if (super(n, t), xt(this, "space", l), typeof r == "number") for (; ++o < Ie.length; ) { const i = Ie[o]; xt(this, Ie[o], (r & Je[i]) === Je[i]); } } } it.prototype.defined = !0; function xt(e, n, t) { t && (e[n] = t); } const Gn = {}.hasOwnProperty; function ye(e) { const n = {}, t = {}; let r; for (r in e.properties) if (Gn.call(e.properties, r)) { const l = e.properties[r], o = new it( r, e.transform(e.attributes || {}, r), l, e.space ); e.mustUseProperty && e.mustUseProperty.includes(r) && (o.mustUseProperty = !0), n[r] = o, t[Le(r)] = r, t[Le(o.attribute)] = r; } return new De(n, t, e.space); } const Gt = ye({ space: "xlink", transform(e, n) { return "xlink:" + n.slice(5).toLowerCase(); }, properties: { xLinkActuate: null, xLinkArcRole: null, xLinkHref: null, xLinkRole: null, xLinkShow: null, xLinkTitle: null, xLinkType: null } }), Yt = ye({ space: "xml", transform(e, n) { return "xml:" + n.slice(3).toLowerCase(); }, properties: { xmlLang: null, xmlBase: null, xmlSpace: null } }); function Qt(e, n) { return n in e ? e[n] : n; } function Xt(e, n) { return Qt(e, n.toLowerCase()); } const Jt = ye({ space: "xmlns", attributes: { xmlnsxlink: "xmlns:xlink" }, transform: Xt, properties: { xmlns: null, xmlnsXLink: null } }), en = ye({ transform(e, n) { return n === "role" ? n : "aria-" + n.slice(4).toLowerCase(); }, properties: { ariaActiveDescendant: null, ariaAtomic: U, ariaAutoComplete: null, ariaBusy: U, ariaChecked: U, ariaColCount: y, ariaColIndex: y, ariaColSpan: y, ariaControls: P, ariaCurrent: null, ariaDescribedBy: P, ariaDetails: null, ariaDisabled: U, ariaDropEffect: P, ariaErrorMessage: null, ariaExpanded: U, ariaFlowTo: P, ariaGrabbed: U, ariaHasPopup: null, ariaHidden: U, ariaInvalid: null, ariaKeyShortcuts: null, ariaLabel: null, ariaLabelledBy: P, ariaLevel: y, ariaLive: null, ariaModal: U, ariaMultiLine: U, ariaMultiSelectable: U, ariaOrientation: null, ariaOwns: P, ariaPlaceholder: null, ariaPosInSet: y, ariaPressed: U, ariaReadOnly: U, ariaRelevant: null, ariaRequired: U, ariaRoleDescription: P, ariaRowCount: y, ariaRowIndex: y, ariaRowSpan: y, ariaSelected: U, ariaSetSize: y, ariaSort: null, ariaValueMax: y, ariaValueMin: y, ariaValueNow: y, ariaValueText: null, role: null } }), Yn = ye({ space: "html", attributes: { acceptcharset: "accept-charset", classname: "class", htmlfor: "for", httpequiv: "http-equiv" }, transform: Xt, mustUseProperty: ["checked", "multiple", "muted", "selected"], properties: { // Standard Properties. abbr: null, accept: Ce, acceptCharset: P, accessKey: P, action: null, allow: null, allowFullScreen: z, allowPaymentRequest: z, allowUserMedia: z, alt: null, as: null, async: z, autoCapitalize: null, autoComplete: P, autoFocus: z, autoPlay: z, blocking: P, capture: null, charSet: null, checked: z, cite: null, className: P, cols: y, colSpan: null, content: null, contentEditable: U, controls: z, controlsList: P, coords: y | Ce, crossOrigin: null, data: null, dateTime: null, decoding: null, default: z, defer: z, dir: null, dirName: null, disabled: z, download: Kt, draggable: U, encType: null, enterKeyHint: null, fetchPriority: null, form: null, formAction: null, formEncType: null, formMethod: null, formNoValidate: z, formTarget: null, headers: P, height: y, hidden: z, high: y, href: null, hrefLang: null, htmlFor: P, httpEquiv: P, id: null, imageSizes: null, imageSrcSet: null, inert: z, inputMode: null, integrity: null, is: null, isMap: z, itemId: null, itemProp: P, itemRef: P, itemScope: z, itemType: P, kind: null, label: null, lang: null, language: null, list: null, loading: null, loop: z, low: y, manifest: null, max: null, maxLength: y, media: null, method: null, min: null, minLength: y, multiple: z, muted: z, name: null, nonce: null, noModule: z, noValidate: z, onAbort: null, onAfterPrint: null, onAuxClick: null, onBeforeMatch: null, onBeforePrint: null, onBeforeToggle: null, onBeforeUnload: null, onBlur: null, onCancel: null, onCanPlay: null, onCanPlayThrough: null, onChange: null, onClick: null, onClose: null, onContextLost: null, onContextMenu: null, onContextRestored: null, onCopy: null, onCueChange: null, onCut: null, onDblClick: null, onDrag: null, onDragEnd: null, onDragEnter: null, onDragExit: null, onDragLeave: null, onDragOver: null, onDragStart: null, onDrop: null, onDurationChange: null, onEmptied: null, onEnded: null, onError: null, onFocus: null, onFormData: null, onHashChange: null, onInput: null, onInvalid: null, onKeyDown: null, onKeyPress: null, onKeyUp: null, onLanguageChange: null, onLoad: null, onLoadedData: null, onLoadedMetadata: null, onLoadEnd: null, onLoadStart: null, onMessage: null, onMessageError: null, onMouseDown: null, onMouseEnter: null, onMouseLeave: null, onMouseMove: null, onMouseOut: null, onMouseOver: null, onMouseUp: null, onOffline: null, onOnline: null, onPageHide: null, onPageShow: null, onPaste: null, onPause: null, onPlay: null, onPlaying: null, onPopState: null, onProgress: null, onRateChange: null, onRejectionHandled: null, onReset: null, onResize: null, onScroll: null, onScrollEnd: null, onSecurityPolicyViolation: null, onSeeked: null, onSeeking: null, onSelect: null, onSlotChange: null, onStalled: null, onStorage: null, onSubmit: null, onSuspend: null, onTimeUpdate: null, onToggle: null, onUnhandledRejection: null, onUnload: null, onVolumeChange: null, onWaiting: null, onWheel: null, open: z, optimum: y, pattern: null, ping: P, placeholder: null, playsInline: z, popover: null, popoverTarget: null, popoverTargetAction: null, poster: null, preload: null, readOnly: z, referrerPolicy: null, rel: P, required: z, reversed: z, rows: y, rowSpan: y, sandbox: P, scope: null, scoped: z, seamless: z, selected: z, shadowRootClonable: z, shadowRootDelegatesFocus: z, shadowRootMode: null, shape: null, size: y, sizes: null, slot: null, span: y, spellCheck: U, src: null, srcDoc: null, srcLang: null, srcSet: null, start: y, step: null, style: null, tabIndex: y, target: null, title: null, translate: null, type: null, typeMustMatch: z, useMap: null, value: U, width: y, wrap: null, writingSuggestions: null, // Legacy. // See: https://html.spec.whatwg.org/#other-elements,-attributes-and-apis align: null, // Several. Use CSS `text-align` instead, aLink: null, // `<body>`. Use CSS `a:active {color}` instead archive: P, // `<object>`. List of URIs to archives axis: null, // `<td>` and `<th>`. Use `scope` on `<th>` background: null, // `<body>`. Use CSS `background-image` instead bgColor: null, // `<body>` and table elements. Use CSS `background-color` instead border: y, // `<table>`. Use CSS `border-width` instead, borderColor: null, // `<table>`. Use CSS `border-color` instead, bottomMargin: y, // `<body>` cellPadding: null, // `<table>` cellSpacing: null, // `<table>` char: null, // Several table elements. When `align=char`, sets the character to align on charOff: null, // Several table elements. When `char`, offsets the alignment classId: null, // `<object>` clear: null, // `<br>`. Use CSS `clear` instead code: null, // `<object>` codeBase: null, // `<object>` codeType: null, // `<object>` color: null, // `<font>` and `<hr>`. Use CSS instead compact: z, // Lists. Use CSS to reduce space between items instead declare: z, // `<object>` event: null, // `<script>` face: null, // `<font>`. Use CSS instead frame: null, // `<table>` frameBorder: null, // `<iframe>`. Use CSS `border` instead hSpace: y, // `<img>` and `<object>` leftMargin: y, // `<body>` link: null, // `<body>`. Use CSS `a:link {color: *}` instead longDesc: null, // `<frame>`, `<iframe>`, and `<img>`. Use an `<a>` lowSrc: null, // `<img>`. Use a `<picture>` marginHeight: y, // `<body>` marginWidth: y, // `<body>` noResize: z, // `<frame>` noHref: z, // `<area>`. Use no href instead of an explicit `nohref` noShade: z, // `<hr>`. Use background-color and height instead of borders noWrap: z, // `<td>` and `<th>` object: null, // `<applet>` profile: null, // `<head>` prompt: null, // `<isindex>` rev: null, // `<link>` rightMargin: y, // `<body>` rules: null, // `<table>` scheme: null, // `<meta>` scrolling: U, // `<frame>`. Use overflow in the child context standby: null, // `<object>` summary: null, // `<table>` text: null, // `<body>`. Use CSS `color` instead topMargin: y, // `<body>` valueType: null, // `<param>` version: null, // `<html>`. Use a doctype. vAlign: null, // Several. Use CSS `vertical-align` instead vLink: null, // `<body>`. Use CSS `a:visited {color}` instead vSpace: y, // `<img>` and `<object>` // Non-standard Properties. allowTransparency: null, autoCorrect: null, autoSave: null, disablePictureInPicture: z, disableRemotePlayback: z, prefix: null, property: null, results: y, security: null, unselectable: null } }), Qn = ye({ space: "svg", attributes: { accentHeight: "accent-height", alignmentBaseline: "alignment-baseline", arabicForm: "arabic-form", baselineShift: "baseline-shift", capHeight: "cap-height", className: "class", clipPath: "clip-path", clipRule: "clip-rule", colorInterpolation: "color-interpolation", colorInterpolationFilters: "color-interpolation-filters", colorProfile: "color-profile", colorRendering: "color-rendering", crossOrigin: "crossorigin", dataType: "datatype", dominantBaseline: "dominant-baseline", enableBackground: "enable-background", fillOpacity: "fill-opacity", fillRule: "fill-rule", floodColor: "flood-color", floodOpacity: "flood-opacity", fontFamily: "font-family", fontSize: "font-size", fontSizeAdjust: "font-size-adjust", fontStretch: "font-stretch", fontStyle: "font-style", fontVariant: "font-variant", fontWeight: "font-weight", glyphName: "glyph-name", glyphOrientationHorizontal: "glyph-orientation-horizontal", glyphOrientationVertical: "glyph-orientation-vertical", hrefLang: "hreflang", horizAdvX: "horiz-adv-x", horizOriginX: "horiz-origin-x", horizOriginY: "horiz-origin-y", imageRendering: "image-rendering", letterSpacing: "letter-spacing", lightingColor: "lighting-color", markerEnd: "marker-end", markerMid: "marker-mid", markerStart: "marker-start", navDown: "nav-down", navDownLeft: "nav-down-left", navDownRight: "nav-down-right", navLeft: "nav-left", navNext: "nav-next", navPrev: "nav-prev", navRight: "nav-right", navUp: "nav-up", navUpLeft: "nav-up-left", navUpRight: "nav-up-right", onAbort: "onabort", onActivate: "onactivate", onAfterPrint: "onafterprint", onBeforePrint: "onbeforeprint", onBegin: "onbegin", onCancel: "oncancel", onCanPlay: "oncanplay", onCanPlayThrough: "oncanplaythrough", onChange: "onchange", onClick: "onclick", onClose: "onclose", onCopy: "oncopy", onCueChange: "oncuechange", onCut: "oncut", onDblClick: "ondblclick", onDrag: "ondrag", onDragEnd: "ondragend", onDragEnter: "ondragenter", onDragExit: "ondragexit", onDragLeave: "ondragleave", onDragOver: "ondragover", onDragStart: "ondragstart", onDrop: "ondrop", onDurationChange: "ondurationchange", onEmptied: "onemptied", onEnd: "onend", onEnded: "onended", onError: "onerror", onFocus: "onfocus", onFocusIn: "onfocusin", onFocusOut: "onfocusout", onHashChange: "onhashchange", onInput: "oninput", onInvalid: "oninvalid", onKeyDown: "onkeydown", onKeyPress: "onkeypress", onKeyUp: "onkeyup", onLoad: "onload", onLoadedData: "onloadeddata", onLoadedMetadata: "onloadedmetadata", onLoadStart: "onloadstart", onMessage: "onmessage", onMouseDown: "onmousedown", onMouseEnter: "onmouseenter", onMouseLeave: "onmouseleave", onMouseMove: "onmousemove", onMouseOut: "onmouseout", onMouseOver: "onmouseover", onMouseUp: "onmouseup", onMouseWheel: "onmousewheel", onOffline: "onoffline", onOnline: "ononline", onPageHide: "onpagehide", onPageShow: "onpageshow", onPaste: "onpaste", onPause: "onpause", onPlay: "onplay", onPlaying: "onplaying", onPopState: "onpopstate", onProgress: "onprogress", onRateChange: "onratechange", onRepeat: "onrepeat", onReset: "onreset", onResize: "onresize", onScroll: "onscroll", onSeeked: "onseeked", onSeeking: "onseeking", onSelect: "onselect", onShow: "onshow", onStalled: "onstalled", onStorage: "onstorage", onSubmit: "onsubmit", onSuspend: "onsuspend", onTimeUpdate: "ontimeupdate", onToggle: "ontoggle", onUnload: "onunload", onVolumeChange: "onvolumechange", onWaiting: "onwaiting", onZoom: "onzoom", overlinePosition: "overline-position", overlineThickness: "overline-thickness", paintOrder: "paint-order", panose1: "panose-1", pointerEvents: "pointer-events", referrerPolicy: "referrerpolicy", renderingIntent: "rendering-intent", shapeRendering: "shape-rendering", stopColor: "stop-color", stopOpacity: "stop-opacity", strikethroughPosition: "strikethrough-position", strikethroughThickness: "strikethrough-thickness", strokeDashArray: "stroke-dasharray", strokeDashOffset: "stroke-dashoffset", strokeLineCap: "stroke-linecap", strokeLineJoin: "stroke-linejoin", strokeMiterLimit: "stroke-miterlimit", strokeOpacity: "stroke-opacity", strokeWidth: "stroke-width", tabIndex: "tabindex", textAnchor: "text-anchor", textDecoration: "text-decoration", textRendering: "text-rendering", transformOrigin: "transform-origin", typeOf: "typeof", underlinePosition: "underline-position", underlineThickness: "underline-thickness", unicodeBidi: "unicode-bidi", unicodeRange: "unicode-range", unitsPerEm: "units-per-em", vAlphabetic: "v-alphabetic", vHanging: "v-hanging", vIdeographic: "v-ideographic", vMathematical: "v-mathematical", vectorEffect: "vector-effect", vertAdvY: "vert-adv-y", vertOriginX: "vert-origin-x", vertOriginY: "vert-origin-y", wordSpacing: "word-spacing", writingMode: "writing-mode", xHeight: "x-height", // These were camelcased in Tiny. Now lowercased in SVG 2 playbackOrder: "playbackorder", timelineBegin: "timelinebegin" }, transform: Qt, properties: { about: Y, accentHeight: y, accumulate: null, additive: null, alignmentBaseline: null, alphabetic: y, amplitude: y, arabicForm: null, ascent: y, attributeName: null, attributeType: null, azimuth: y, bandwidth: null, baselineShift: null, baseFrequency: null, baseProfile: null, bbox: null, begin: null, bias: y, by: null, calcMode: null, capHeight: y, className: P, clip: null, clipPath: null, clipPathUnits: null, clipRule: null, color: null, colorInterpolation: null, colorInterpolationFilters: null, colorProfile: null, colorRendering: null, content: null, contentScriptType: null, contentStyleType: null, crossOrigin: null, cursor: null, cx: null, cy: null, d: null, dataType: null, defaultAction: null, descent: y, diffuseConstant: y, direction: null, display: null, dur: null, divisor: y, dominantBaseline: null, download: z, dx: null, dy: null, edgeMode: null, editable: null, elevation: y, enableBackground: null, end: null, event: null, exponent: y, externalResourcesRequired: null, fill: null, fillOpacity: y, fillRule: null, filter: null, filterRes: null, filterUnits: null, floodColor: null, floodOpacity: null, focusable: null, focusHighlight: null, fontFamily: null, fontSize: null, fontSizeAdjust: null, fontStretch: null, fontStyle: null, fontVariant: null, fontWeight: null, format: null, fr: null, from: null, fx: null, fy: null, g1: Ce, g2: Ce, glyphName: Ce, glyphOrientationHorizontal: null, glyphOrientationVertical: null, glyphRef: null, gradientTransform