openrouter-model-picker
Version:
Third-party React component for OpenRouter model selection
2,004 lines • 71.4 kB
JavaScript
var wr = Object.defineProperty;
var Cr = (o, t, i) => t in o ? wr(o, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[t] = i;
var H = (o, t, i) => Cr(o, typeof t != "symbol" ? t + "" : t, i);
import He, { forwardRef as kr, createElement as Ne, useState as $, useCallback as z, useEffect as Ke, useMemo as he, useRef as Tr } from "react";
var ge = { exports: {} }, K = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var We;
function Rr() {
if (We) return K;
We = 1;
var o = He, t = Symbol.for("react.element"), i = Symbol.for("react.fragment"), c = Object.prototype.hasOwnProperty, d = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
function k(v, a, g) {
var b, u = {}, l = null, p = null;
g !== void 0 && (l = "" + g), a.key !== void 0 && (l = "" + a.key), a.ref !== void 0 && (p = a.ref);
for (b in a) c.call(a, b) && !h.hasOwnProperty(b) && (u[b] = a[b]);
if (v && v.defaultProps) for (b in a = v.defaultProps, a) u[b] === void 0 && (u[b] = a[b]);
return { $$typeof: t, type: v, key: l, ref: p, props: u, _owner: d.current };
}
return K.Fragment = i, K.jsx = k, K.jsxs = k, K;
}
var G = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ue;
function Sr() {
return Ue || (Ue = 1, process.env.NODE_ENV !== "production" && function() {
var o = He, t = Symbol.for("react.element"), i = Symbol.for("react.portal"), c = Symbol.for("react.fragment"), d = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), k = Symbol.for("react.provider"), v = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), g = Symbol.for("react.suspense"), b = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), l = Symbol.for("react.lazy"), p = Symbol.for("react.offscreen"), R = Symbol.iterator, F = "@@iterator";
function _(e) {
if (e === null || typeof e != "object")
return null;
var n = R && e[R] || e[F];
return typeof n == "function" ? n : null;
}
var T = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function w(e) {
{
for (var n = arguments.length, s = new Array(n > 1 ? n - 1 : 0), f = 1; f < n; f++)
s[f - 1] = arguments[f];
N("error", e, s);
}
}
function N(e, n, s) {
{
var f = T.ReactDebugCurrentFrame, j = f.getStackAddendum();
j !== "" && (n += "%s", s = s.concat([j]));
var C = s.map(function(y) {
return String(y);
});
C.unshift("Warning: " + n), Function.prototype.apply.call(console[e], console, C);
}
}
var L = !1, te = !1, ne = !1, B = !1, ie = !1, J;
J = Symbol.for("react.module.reference");
function Y(e) {
return !!(typeof e == "string" || typeof e == "function" || e === c || e === h || ie || e === d || e === g || e === b || B || e === p || L || te || ne || typeof e == "object" && e !== null && (e.$$typeof === l || e.$$typeof === u || e.$$typeof === k || e.$$typeof === v || e.$$typeof === a || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === J || e.getModuleId !== void 0));
}
function oe(e, n, s) {
var f = e.displayName;
if (f)
return f;
var j = n.displayName || n.name || "";
return j !== "" ? s + "(" + j + ")" : s;
}
function X(e) {
return e.displayName || "Context";
}
function x(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && w("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case c:
return "Fragment";
case i:
return "Portal";
case h:
return "Profiler";
case d:
return "StrictMode";
case g:
return "Suspense";
case b:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case v:
var n = e;
return X(n) + ".Consumer";
case k:
var s = e;
return X(s._context) + ".Provider";
case a:
return oe(e, e.render, "ForwardRef");
case u:
var f = e.displayName || null;
return f !== null ? f : x(e.type) || "Memo";
case l: {
var j = e, C = j._payload, y = j._init;
try {
return x(y(C));
} catch {
return null;
}
}
}
return null;
}
var P = Object.assign, D = 0, ye, ve, xe, be, je, we, Ce;
function ke() {
}
ke.__reactDisabledLog = !0;
function Ge() {
{
if (D === 0) {
ye = console.log, ve = console.info, xe = console.warn, be = console.error, je = console.group, we = console.groupCollapsed, Ce = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: ke,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
D++;
}
}
function Je() {
{
if (D--, D === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: P({}, e, {
value: ye
}),
info: P({}, e, {
value: ve
}),
warn: P({}, e, {
value: xe
}),
error: P({}, e, {
value: be
}),
group: P({}, e, {
value: je
}),
groupCollapsed: P({}, e, {
value: we
}),
groupEnd: P({}, e, {
value: Ce
})
});
}
D < 0 && w("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var se = T.ReactCurrentDispatcher, ae;
function Z(e, n, s) {
{
if (ae === void 0)
try {
throw Error();
} catch (j) {
var f = j.stack.trim().match(/\n( *(at )?)/);
ae = f && f[1] || "";
}
return `
` + ae + e;
}
}
var le = !1, Q;
{
var Xe = typeof WeakMap == "function" ? WeakMap : Map;
Q = new Xe();
}
function Te(e, n) {
if (!e || le)
return "";
{
var s = Q.get(e);
if (s !== void 0)
return s;
}
var f;
le = !0;
var j = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var C;
C = se.current, se.current = null, Ge();
try {
if (n) {
var y = function() {
throw Error();
};
if (Object.defineProperty(y.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(y, []);
} catch (I) {
f = I;
}
Reflect.construct(e, [], y);
} else {
try {
y.call();
} catch (I) {
f = I;
}
e.call(y.prototype);
}
} else {
try {
throw Error();
} catch (I) {
f = I;
}
e();
}
} catch (I) {
if (I && f && typeof I.stack == "string") {
for (var m = I.stack.split(`
`), O = f.stack.split(`
`), S = m.length - 1, E = O.length - 1; S >= 1 && E >= 0 && m[S] !== O[E]; )
E--;
for (; S >= 1 && E >= 0; S--, E--)
if (m[S] !== O[E]) {
if (S !== 1 || E !== 1)
do
if (S--, E--, E < 0 || m[S] !== O[E]) {
var A = `
` + m[S].replace(" at new ", " at ");
return e.displayName && A.includes("<anonymous>") && (A = A.replace("<anonymous>", e.displayName)), typeof e == "function" && Q.set(e, A), A;
}
while (S >= 1 && E >= 0);
break;
}
}
} finally {
le = !1, se.current = C, Je(), Error.prepareStackTrace = j;
}
var V = e ? e.displayName || e.name : "", W = V ? Z(V) : "";
return typeof e == "function" && Q.set(e, W), W;
}
function Ze(e, n, s) {
return Te(e, !1);
}
function Qe(e) {
var n = e.prototype;
return !!(n && n.isReactComponent);
}
function ee(e, n, s) {
if (e == null)
return "";
if (typeof e == "function")
return Te(e, Qe(e));
if (typeof e == "string")
return Z(e);
switch (e) {
case g:
return Z("Suspense");
case b:
return Z("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case a:
return Ze(e.render);
case u:
return ee(e.type, n, s);
case l: {
var f = e, j = f._payload, C = f._init;
try {
return ee(C(j), n, s);
} catch {
}
}
}
return "";
}
var q = Object.prototype.hasOwnProperty, Re = {}, Se = T.ReactDebugCurrentFrame;
function re(e) {
if (e) {
var n = e._owner, s = ee(e.type, e._source, n ? n.type : null);
Se.setExtraStackFrame(s);
} else
Se.setExtraStackFrame(null);
}
function er(e, n, s, f, j) {
{
var C = Function.call.bind(q);
for (var y in e)
if (C(e, y)) {
var m = void 0;
try {
if (typeof e[y] != "function") {
var O = Error((f || "React class") + ": " + s + " type `" + y + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[y] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw O.name = "Invariant Violation", O;
}
m = e[y](n, y, f, s, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (S) {
m = S;
}
m && !(m instanceof Error) && (re(j), w("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", s, y, typeof m), re(null)), m instanceof Error && !(m.message in Re) && (Re[m.message] = !0, re(j), w("Failed %s type: %s", s, m.message), re(null));
}
}
}
var rr = Array.isArray;
function ce(e) {
return rr(e);
}
function tr(e) {
{
var n = typeof Symbol == "function" && Symbol.toStringTag, s = n && e[Symbol.toStringTag] || e.constructor.name || "Object";
return s;
}
}
function nr(e) {
try {
return Ee(e), !1;
} catch {
return !0;
}
}
function Ee(e) {
return "" + e;
}
function _e(e) {
if (nr(e))
return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", tr(e)), Ee(e);
}
var Pe = T.ReactCurrentOwner, ir = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Fe, Me;
function or(e) {
if (q.call(e, "ref")) {
var n = Object.getOwnPropertyDescriptor(e, "ref").get;
if (n && n.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function sr(e) {
if (q.call(e, "key")) {
var n = Object.getOwnPropertyDescriptor(e, "key").get;
if (n && n.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function ar(e, n) {
typeof e.ref == "string" && Pe.current;
}
function lr(e, n) {
{
var s = function() {
Fe || (Fe = !0, w("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
};
s.isReactWarning = !0, Object.defineProperty(e, "key", {
get: s,
configurable: !0
});
}
}
function cr(e, n) {
{
var s = function() {
Me || (Me = !0, w("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
};
s.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: s,
configurable: !0
});
}
}
var dr = function(e, n, s, f, j, C, y) {
var m = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: t,
// Built-in properties that belong on the element
type: e,
key: n,
ref: s,
props: y,
// Record the component responsible for creating this element.
_owner: C
};
return m._store = {}, Object.defineProperty(m._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(m, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: f
}), Object.defineProperty(m, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: j
}), Object.freeze && (Object.freeze(m.props), Object.freeze(m)), m;
};
function ur(e, n, s, f, j) {
{
var C, y = {}, m = null, O = null;
s !== void 0 && (_e(s), m = "" + s), sr(n) && (_e(n.key), m = "" + n.key), or(n) && (O = n.ref, ar(n, j));
for (C in n)
q.call(n, C) && !ir.hasOwnProperty(C) && (y[C] = n[C]);
if (e && e.defaultProps) {
var S = e.defaultProps;
for (C in S)
y[C] === void 0 && (y[C] = S[C]);
}
if (m || O) {
var E = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
m && lr(y, E), O && cr(y, E);
}
return dr(e, m, O, j, f, Pe.current, y);
}
}
var de = T.ReactCurrentOwner, Oe = T.ReactDebugCurrentFrame;
function U(e) {
if (e) {
var n = e._owner, s = ee(e.type, e._source, n ? n.type : null);
Oe.setExtraStackFrame(s);
} else
Oe.setExtraStackFrame(null);
}
var ue;
ue = !1;
function fe(e) {
return typeof e == "object" && e !== null && e.$$typeof === t;
}
function Ie() {
{
if (de.current) {
var e = x(de.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function fr(e) {
return "";
}
var Ae = {};
function pr(e) {
{
var n = Ie();
if (!n) {
var s = typeof e == "string" ? e : e.displayName || e.name;
s && (n = `
Check the top-level render call using <` + s + ">.");
}
return n;
}
}
function De(e, n) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var s = pr(n);
if (Ae[s])
return;
Ae[s] = !0;
var f = "";
e && e._owner && e._owner !== de.current && (f = " It was passed a child from " + x(e._owner.type) + "."), U(e), w('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', s, f), U(null);
}
}
function ze(e, n) {
{
if (typeof e != "object")
return;
if (ce(e))
for (var s = 0; s < e.length; s++) {
var f = e[s];
fe(f) && De(f, n);
}
else if (fe(e))
e._store && (e._store.validated = !0);
else if (e) {
var j = _(e);
if (typeof j == "function" && j !== e.entries)
for (var C = j.call(e), y; !(y = C.next()).done; )
fe(y.value) && De(y.value, n);
}
}
}
function hr(e) {
{
var n = e.type;
if (n == null || typeof n == "string")
return;
var s;
if (typeof n == "function")
s = n.propTypes;
else if (typeof n == "object" && (n.$$typeof === a || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
n.$$typeof === u))
s = n.propTypes;
else
return;
if (s) {
var f = x(n);
er(s, e.props, "prop", f, e);
} else if (n.PropTypes !== void 0 && !ue) {
ue = !0;
var j = x(n);
w("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", j || "Unknown");
}
typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && w("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function mr(e) {
{
for (var n = Object.keys(e.props), s = 0; s < n.length; s++) {
var f = n[s];
if (f !== "children" && f !== "key") {
U(e), w("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), U(null);
break;
}
}
e.ref !== null && (U(e), w("Invalid attribute `ref` supplied to `React.Fragment`."), U(null));
}
}
var Le = {};
function $e(e, n, s, f, j, C) {
{
var y = Y(e);
if (!y) {
var m = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (m += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var O = fr();
O ? m += O : m += Ie();
var S;
e === null ? S = "null" : ce(e) ? S = "array" : e !== void 0 && e.$$typeof === t ? (S = "<" + (x(e.type) || "Unknown") + " />", m = " Did you accidentally export a JSX literal instead of a component?") : S = typeof e, w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", S, m);
}
var E = ur(e, n, s, j, C);
if (E == null)
return E;
if (y) {
var A = n.children;
if (A !== void 0)
if (f)
if (ce(A)) {
for (var V = 0; V < A.length; V++)
ze(A[V], e);
Object.freeze && Object.freeze(A);
} else
w("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
ze(A, e);
}
if (q.call(n, "key")) {
var W = x(e), I = Object.keys(n).filter(function(jr) {
return jr !== "key";
}), pe = I.length > 0 ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Le[W + pe]) {
var br = I.length > 0 ? "{" + I.join(": ..., ") + ": ...}" : "{}";
w(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, pe, W, br, W), Le[W + pe] = !0;
}
}
return e === c ? mr(E) : hr(E), E;
}
}
function gr(e, n, s) {
return $e(e, n, s, !0);
}
function yr(e, n, s) {
return $e(e, n, s, !1);
}
var vr = yr, xr = gr;
G.Fragment = c, G.jsx = vr, G.jsxs = xr;
}()), G;
}
process.env.NODE_ENV === "production" ? ge.exports = Rr() : ge.exports = Sr();
var r = ge.exports, Er = {
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"
};
const _r = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Pr = (o, t) => {
const i = kr(
({ color: c = "currentColor", size: d = 24, strokeWidth: h = 2, absoluteStrokeWidth: k, children: v, ...a }, g) => Ne(
"svg",
{
ref: g,
...Er,
width: d,
height: d,
stroke: c,
strokeWidth: k ? Number(h) * 24 / Number(d) : h,
className: `lucide lucide-${_r(o)}`,
...a
},
[
...t.map(([b, u]) => Ne(b, u)),
...(Array.isArray(v) ? v : [v]) || []
]
)
);
return i.displayName = `${o}`, i;
};
var M = Pr;
const Fr = M("AlertCircle", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
]), Mr = M("Brain", [
[
"path",
{
d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z",
key: "1mhkh5"
}
],
[
"path",
{
d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z",
key: "1d6s00"
}
]
]), Or = M("ChevronDown", [
["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
]), Ve = M("ChevronUp", [
["path", { d: "m18 15-6-6-6 6", key: "153udz" }]
]), Ir = M("Eye", [
[
"path",
{ d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z", key: "rwhkz3" }
],
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
]), Ar = M("FileText", [
[
"path",
{
d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",
key: "1nnpy2"
}
],
["polyline", { points: "14 2 14 8 20 8", key: "1ew0cm" }],
["line", { x1: "16", x2: "8", y1: "13", y2: "13", key: "14keom" }],
["line", { x1: "16", x2: "8", y1: "17", y2: "17", key: "17nazh" }],
["line", { x1: "10", x2: "8", y1: "9", y2: "9", key: "1a5vjj" }]
]), Dr = M("Filter", [
[
"polygon",
{ points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3", key: "1yg77f" }
]
]), Be = M("Info", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["path", { d: "M12 16v-4", key: "1dtifu" }],
["path", { d: "M12 8h.01", key: "e9boi3" }]
]), zr = M("Loader2", [
["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
]), Lr = M("RefreshCw", [
[
"path",
{ d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }
],
["path", { d: "M21 3v5h-5", key: "1q7to0" }],
[
"path",
{ d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }
],
["path", { d: "M8 16H3v5", key: "1cv678" }]
]), $r = M("RotateCcw", [
[
"path",
{ d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }
],
["path", { d: "M3 3v5h5", key: "1xhq8a" }]
]), Nr = M("Search", [
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
]), Wr = M("Shield", [
["path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", key: "3xmgem" }]
]), Ur = M("StopCircle", [
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
["rect", { width: "6", height: "6", x: "9", y: "9", key: "1wrtvo" }]
]), Vr = M("X", [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
]), Br = M("Zap", [
[
"polygon",
{ points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", key: "45s27k" }
]
]), Yr = "https://openrouter.ai/api/v1/models", qr = "https://openrouter.ai/api/v1/chat/completions";
class Hr {
// 5 minutes
constructor(t) {
H(this, "endpoint");
H(this, "cache", null);
H(this, "cacheTimestamp", 0);
H(this, "CACHE_DURATION", 5 * 60 * 1e3);
this.endpoint = t || Yr;
}
async fetchModels(t = !1) {
if (!t && this.cache && Date.now() - this.cacheTimestamp < this.CACHE_DURATION)
return this.cache;
try {
const i = {
"Content-Type": "application/json"
}, c = await fetch(this.endpoint, { headers: i });
if (!c.ok)
throw new Error(`HTTP error! status: ${c.status}`);
const d = await c.json(), h = this.filterAvailableModels(d.data).map((k) => this.transformModel(k));
return this.cache = h, this.cacheTimestamp = Date.now(), h;
} catch (i) {
return console.error("Failed to fetch models from OpenRouter:", i), this.cache ? this.cache : this.getFallbackModels();
}
}
/**
* Test a model with an actual API call
*/
async testModel(t, i, c = "Hello! Please respond with a brief greeting.") {
var d, h, k, v;
if (!i)
return {
success: !1,
error: "API key is required for testing models"
};
try {
const a = await fetch(qr, {
method: "POST",
headers: {
Authorization: `Bearer ${i}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: t,
messages: [
{ role: "user", content: c }
],
max_tokens: 100,
// Keep it short for testing
temperature: 0.7
})
});
if (!a.ok) {
const b = await a.json().catch(() => ({}));
return {
success: !1,
error: `HTTP ${a.status}: ${((d = b.error) == null ? void 0 : d.message) || a.statusText}`
};
}
const g = await a.json();
return {
success: !0,
response: ((v = (k = (h = g.choices) == null ? void 0 : h[0]) == null ? void 0 : k.message) == null ? void 0 : v.content) || "No response content",
usage: g.usage
};
} catch (a) {
return {
success: !1,
error: a instanceof Error ? a.message : "Unknown error occurred"
};
}
}
/**
* Filter out models with known availability issues
*/
filterAvailableModels(t) {
return t.filter((i) => {
if (!i.context_length || i.context_length <= 0)
return console.debug(`Filtered out model ${i.id}: invalid context length (${i.context_length})`), !1;
if (this.isModelDeprecated(i))
return console.debug(`Filtered out model ${i.id}: deprecated`), !1;
if (i.per_request_limits) {
const d = parseInt(i.per_request_limits.prompt_tokens || "0"), h = parseInt(i.per_request_limits.completion_tokens || "0");
if (d <= 0 && h <= 0)
return console.debug(`Filtered out model ${i.id}: zero capacity limits`), !1;
}
return !i.pricing || !i.pricing.prompt && !i.pricing.completion ? (console.debug(`Filtered out model ${i.id}: invalid pricing`), !1) : !i.id || i.id.trim() === "" ? (console.debug("Filtered out model: empty or invalid ID"), !1) : this.isKnownProblematicModel(i.id) ? (console.debug(`Filtered out model ${i.id}: known problematic model`), !1) : !0;
});
}
/**
* Check if a model is deprecated using multiple detection strategies
*/
isModelDeprecated(t) {
var c, d, h, k;
if ((d = (c = t.architecture) == null ? void 0 : c.instruct_type) != null && d.toLowerCase().includes("deprecated"))
return !0;
if (t.description) {
const v = t.description.toLowerCase();
if ([
"deprecated",
"has been deprecated",
"please switch to",
"no longer supported",
"discontinued",
"replaced by"
].some((g) => v.includes(g)))
return !0;
}
if ([
/.*-exp-\d{2}-\d{2}$/,
// Experimental models with date endings like "exp-03-25"
/.*experimental.*$/i
// Models with "experimental" in the name
].some((v) => v.test(t.id))) {
const v = parseFloat(((h = t.pricing) == null ? void 0 : h.prompt) || "0"), a = parseFloat(((k = t.pricing) == null ? void 0 : k.completion) || "0");
if (v === 0 && a === 0)
return !0;
}
return !1;
}
/**
* Check for known problematic model IDs that consistently cause issues
*/
isKnownProblematicModel(t) {
return [
"google/gemini-2.5-pro-exp-03-25"
// Known deprecated model causing 404s
// Add other known problematic models here as they're discovered
].includes(t);
}
/**
* Categorize models into free and paid
*/
categorizeModels(t) {
const i = [], c = [];
return t.forEach((d) => {
d.costTier === "free" ? i.push(d) : c.push(d);
}), { freeModels: i, paidModels: c };
}
transformModel(t) {
const i = this.extractProvider(t.id), c = this.calculateCostTier(t.pricing), d = this.extractFeatures(t);
return {
id: t.id,
// CRITICAL: Use exact model ID without modification
name: t.name,
provider: i,
costTier: c,
description: t.description || "No description available",
features: d,
pricing: {
input: parseFloat(t.pricing.prompt) || 0,
output: parseFloat(t.pricing.completion) || 0,
currency: "USD"
},
context: t.context_length,
multimodal: this.isMultimodal(t),
reasoning: this.isReasoningModel(t),
streamCancel: this.supportsStreamCancellation(t)
};
}
extractProvider(t) {
const i = t.split("/");
if (i.length > 1) {
const c = i[0];
return c.charAt(0).toUpperCase() + c.slice(1);
}
return "Unknown";
}
calculateCostTier(t) {
const i = parseFloat(t.prompt) || 0, c = parseFloat(t.completion) || 0;
if (i === 0 && c === 0) return "free";
const d = (i + c) / 2;
return d < 1e-6 ? "low" : d < 1e-5 ? "medium" : "high";
}
extractFeatures(t) {
var h;
const i = [];
((h = t.architecture.input_modalities) != null && h.includes("image") || t.architecture.modality === "multimodal") && i.push("Vision"), this.isReasoningModel(t) && i.push("Reasoning"), this.supportsStreamCancellation(t) && i.push("Stream Cancel"), t.top_provider.is_moderated && i.push("Moderated"), t.context_length > 1e5 && i.push("Long Context"), t.architecture.instruct_type && i.push("Instruct");
const c = parseFloat(t.pricing.prompt) || 0, d = parseFloat(t.pricing.completion) || 0;
return c === 0 && d === 0 && i.push("Free"), i;
}
isMultimodal(t) {
var i;
return ((i = t.architecture.input_modalities) == null ? void 0 : i.includes("image")) || t.architecture.modality === "multimodal" || !1;
}
isReasoningModel(t) {
var d;
const i = ((d = t.id) == null ? void 0 : d.toLowerCase()) || "";
return [
/\bo1(-preview|-mini)?\b/i,
// OpenAI o1, o1-preview, o1-mini
/\bdeepseek.*r1\b/i,
// DeepSeek R1 variants
/\bgemini.*thinking\b/i,
// Gemini Thinking models
/\bclaude.*thinking/i,
// Claude thinking variants (e.g., claude-3.7-sonnet:thinking)
/anthropic.*thinking/i,
// Anthropic thinking models (covers anthropic/claude-3.7-sonnet:thinking)
/\bgrok.*reasoning\b/i,
// Grok reasoning models
/\bminimax.*m1\b/i,
// MiniMax M1 reasoning models
/\bqwen.*r1\b/i,
// Qwen R1 reasoning models
/reasoning.*model/i,
// Generic reasoning model names
/thinking.*model/i
// Generic thinking model names
].some((h) => h.test(i));
}
supportsStreamCancellation(t) {
const i = this.extractProvider(t.id).toLowerCase();
return (/* @__PURE__ */ new Set([
"openai",
"azure",
"anthropic",
"fireworks",
"mancer",
"recursal",
"anyscale",
"lepton",
"octoai",
"novita",
"deepinfra",
"together",
"cohere",
"hyperbolic",
"infermatic",
"avian",
"xai",
"cloudflare",
"sfcompute",
"nineteen",
"liquid",
"friendli",
"chutes",
"deepseek"
])).has(i);
}
getFallbackModels() {
return [
{
id: "openai/gpt-4o-mini",
name: "GPT-4o Mini",
provider: "OpenAI",
costTier: "low",
description: "Fast and affordable multimodal model",
features: ["Vision", "Fast"],
pricing: { input: 15e-5, output: 6e-4, currency: "USD" },
context: 128e3,
multimodal: !0,
reasoning: !1,
streamCancel: !0
// OpenAI supports stream cancellation
},
{
id: "openai/o1-preview",
name: "o1-preview",
provider: "OpenAI",
costTier: "high",
description: "Advanced reasoning model with enhanced thinking capabilities",
features: ["Reasoning", "Advanced"],
pricing: { input: 0.015, output: 0.06, currency: "USD" },
context: 128e3,
multimodal: !1,
reasoning: !0,
streamCancel: !0
// OpenAI supports stream cancellation
},
{
id: "openai/gpt-4o",
name: "GPT-4o",
provider: "OpenAI",
costTier: "high",
description: "Most capable multimodal model",
features: ["Vision", "Advanced"],
pricing: { input: 5e-3, output: 0.015, currency: "USD" },
context: 128e3,
multimodal: !0,
reasoning: !1,
streamCancel: !0
// OpenAI supports stream cancellation
},
{
id: "deepseek/deepseek-r1",
name: "DeepSeek R1",
provider: "DeepSeek",
costTier: "medium",
description: "Advanced reasoning model with step-by-step thinking",
features: ["Reasoning", "Long Context"],
pricing: { input: 2e-3, output: 8e-3, currency: "USD" },
context: 2e5,
multimodal: !1,
reasoning: !0,
streamCancel: !0
// DeepSeek supports stream cancellation
},
{
id: "anthropic/claude-3-sonnet",
name: "Claude 3 Sonnet",
provider: "Anthropic",
costTier: "medium",
description: "Balanced performance and cost",
features: ["Long Context"],
pricing: { input: 3e-3, output: 0.015, currency: "USD" },
context: 2e5,
multimodal: !1,
reasoning: !1,
streamCancel: !0
// Anthropic supports stream cancellation
},
// Add some free models to fallback
{
id: "meta-llama/llama-3.2-3b-instruct:free",
name: "Llama 3.2 3B Instruct (Free)",
provider: "Meta",
costTier: "free",
description: "Free tier access to Llama 3.2 3B",
features: ["Free", "Instruct"],
pricing: { input: 0, output: 0, currency: "USD" },
context: 131072,
multimodal: !1,
reasoning: !1,
streamCancel: !1
// Meta/HuggingFace does not support stream cancellation
}
];
}
clearCache() {
this.cache = null, this.cacheTimestamp = 0;
}
}
function Kr(o, t) {
const [i, c] = $([]), [d, h] = $([]), [k, v] = $([]), [a, g] = $(!0), [b, u] = $(null), [l] = $(() => new Hr(o)), p = z(async (_ = !1) => {
try {
g(!0), u(null);
let T;
try {
T = await l.fetchModels(_);
} catch (L) {
if (t && t.length > 0)
T = t;
else
throw L;
}
c(T);
const { freeModels: w, paidModels: N } = l.categorizeModels(T);
h(w), v(N);
} catch (T) {
const w = T instanceof Error ? T.message : "Failed to fetch models";
if (u(w), t && t.length > 0) {
c(t);
const { freeModels: N, paidModels: L } = l.categorizeModels(t);
h(N), v(L);
}
} finally {
g(!1);
}
}, [l, t]), R = z(async () => {
await p(!0);
}, [p]), F = z(async (_, T, w) => await l.testModel(_, T, w), [l]);
return Ke(() => {
p();
}, [p]), {
models: i,
freeModels: d,
paidModels: k,
loading: a,
error: b,
refresh: R,
testModel: F
};
}
const Ye = {
searchTerm: "",
selectedProviders: [],
selectedCostTiers: [],
showMultimodal: !1,
hideExperimental: !1,
showReasoning: !1,
showStreamCancel: !1
};
function Gr(o) {
const [t, i] = $(Ye), [c, d] = $({ key: null, direction: "asc" }), h = he(() => [...new Set(o.map((p) => p.provider))].sort(), [o]), k = z((l, p) => {
i((R) => ({ ...R, [l]: p }));
}, []), v = z(() => {
i(Ye);
}, []), a = z((l, p = "asc") => {
d((R) => R.key === l ? { key: l, direction: R.direction === "asc" ? "desc" : "asc" } : { key: l, direction: p });
}, []), g = z((l) => [
/.*-exp-\d{2}-\d{2}$/i,
// Models ending with -exp-MM-DD
/.*experimental.*$/i,
// Models with "experimental" in the name
/.*-preview.*$/i,
// Preview models
/.*-beta.*$/i,
// Beta models
/.*-alpha.*$/i,
// Alpha models
/.*-test.*$/i
// Test models
].some((R) => R.test(l.id)) || l.name.toLowerCase().includes("experimental") || l.name.toLowerCase().includes("preview") || l.name.toLowerCase().includes("beta") || l.description.toLowerCase().includes("experimental"), []), b = he(() => {
let l = [...o];
if (t.searchTerm) {
const p = t.searchTerm.toLowerCase();
l = l.filter(
(R) => {
var F;
return R.name.toLowerCase().includes(p) || R.provider.toLowerCase().includes(p) || R.description.toLowerCase().includes(p) || R.id.toLowerCase().includes(p) || ((F = R.features) == null ? void 0 : F.some((_) => _.toLowerCase().includes(p)));
}
);
}
return t.selectedProviders.length > 0 && (l = l.filter(
(p) => t.selectedProviders.includes(p.provider)
)), t.selectedCostTiers.length > 0 && (l = l.filter(
(p) => t.selectedCostTiers.includes(p.costTier)
)), t.showMultimodal && (l = l.filter((p) => p.multimodal)), t.showReasoning && (l = l.filter((p) => p.reasoning)), t.showStreamCancel && (l = l.filter((p) => p.streamCancel)), t.hideExperimental && (l = l.filter((p) => !g(p))), c.key && l.sort((p, R) => {
const F = p[c.key], _ = R[c.key];
if (F === void 0 && _ === void 0) return 0;
if (F === void 0) return 1;
if (_ === void 0) return -1;
let T = 0;
return typeof F == "string" && typeof _ == "string" ? T = F.localeCompare(_) : typeof F == "number" && typeof _ == "number" ? T = F - _ : T = String(F).localeCompare(String(_)), c.direction === "desc" ? -T : T;
}), l;
}, [o, t, c, g]), u = he(() => ({
total: o.length,
filtered: b.length
}), [o.length, b.length]);
return {
filteredModels: b,
filterState: t,
sortConfig: c,
updateFilter: k,
clearFilters: v,
setSort: a,
availableProviders: h,
filterStats: u
};
}
function qe(o) {
if (o === 0) return "Free";
const t = o * 1e3;
return t < 0.01 ? `$${t.toFixed(4)}/1K` : `$${t.toFixed(2)}/1K`;
}
function Jr(o) {
return o ? o >= 1e6 ? `${(o / 1e6).toFixed(1)}M` : o >= 1e3 ? `${(o / 1e3).toFixed(0)}K` : o.toString() : "Unknown";
}
function ot(o) {
switch (o) {
case "free":
return "#10b981";
case "low":
return "#3b82f6";
case "medium":
return "#f59e0b";
case "high":
return "#ef4444";
default:
return "#6b7280";
}
}
function Xr(o) {
switch (o) {
case "free":
return "Free";
case "low":
return "Low Cost";
case "medium":
return "Medium Cost";
case "high":
return "High Cost";
default:
return "Unknown";
}
}
function Zr(o, t) {
return o.length <= t ? o : o.slice(0, t - 3) + "...";
}
function st(o, t) {
let i;
return (...c) => {
clearTimeout(i), i = setTimeout(() => o(...c), t);
};
}
const Qr = ["free", "low", "medium", "high"];
function et({
filterState: o,
onFilterChange: t,
onClearFilters: i,
availableProviders: c,
filterStats: d
}) {
const h = Tr(), k = z((u) => {
h.current && clearTimeout(h.current), h.current = setTimeout(() => {
t("searchTerm", u);
}, 300);
}, [t]), v = (u) => {
k(u.target.value);
}, a = (u) => {
const l = o.selectedProviders.includes(u) ? o.selectedProviders.filter((p) => p !== u) : [...o.selectedProviders, u];
t("selectedProviders", l);
}, g = (u) => {
const l = o.selectedCostTiers.includes(u) ? o.selectedCostTiers.filter((p) => p !== u) : [...o.selectedCostTiers, u];
t("selectedCostTiers", l);
}, b = o.searchTerm || o.selectedProviders.length > 0 || o.selectedCostTiers.length > 0 || o.showMultimodal || o.showReasoning || o.showStreamCancel || o.hideExperimental;
return /* @__PURE__ */ r.jsxs("div", { className: "filter-bar", children: [
/* @__PURE__ */ r.jsxs("div", { style: { position: "relative", marginBottom: "0.75rem" }, children: [
/* @__PURE__ */ r.jsx(Nr, { style: {
position: "absolute",
left: "0.75rem",
top: "50%",
transform: "translateY(-50%)",
color: "var(--or-text-secondary)",
width: "1rem",
height: "1rem"
} }),
/* @__PURE__ */ r.jsx(
"input",
{
type: "text",
placeholder: "Search models, providers, or features...",
className: "search-input",
style: { paddingLeft: "2.5rem" },
onChange: v,
defaultValue: o.searchTerm
}
)
] }),
/* @__PURE__ */ r.jsxs("div", { className: "filter-row", style: { flexDirection: "column", gap: "0.5rem", alignItems: "flex-start" }, children: [
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", justifyContent: "space-between", width: "100%" }, children: [
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
/* @__PURE__ */ r.jsx(Dr, { style: { width: "1rem", height: "1rem", color: "var(--or-text-secondary)" } }),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem", fontWeight: "500", color: "var(--or-text)" }, children: "Filters:" })
] }),
b && /* @__PURE__ */ r.jsxs(
"button",
{
onClick: i,
className: "clear-filters-button",
style: { display: "flex", alignItems: "center", gap: "0.25rem" },
children: [
/* @__PURE__ */ r.jsx($r, { style: { width: "0.75rem", height: "0.75rem" } }),
"Clear all"
]
}
)
] }),
/* @__PURE__ */ r.jsxs("div", { style: { width: "100%" }, children: [
/* @__PURE__ */ r.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center", marginBottom: "0.25rem" }, children: /* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.75rem", color: "var(--or-text-secondary)", textTransform: "uppercase", fontWeight: "500", minWidth: "fit-content" }, children: "Provider:" }) }),
/* @__PURE__ */ r.jsx("div", { style: {
display: "flex",
flexWrap: "wrap",
gap: "0.375rem",
maxHeight: "50px",
overflowY: "auto",
padding: "0.375rem",
border: "1px solid var(--or-border)",
borderRadius: "0.25rem",
backgroundColor: "rgba(0, 0, 0, 0.01)"
}, children: c.map((u) => /* @__PURE__ */ r.jsx(
"button",
{
onClick: () => a(u),
className: `filter-button ${o.selectedProviders.includes(u) ? "active" : ""}`,
style: { fontSize: "0.7rem", padding: "0.25rem 0.5rem" },
children: u
},
u
)) })
] }),
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.375rem", alignItems: "center" }, children: [
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.75rem", color: "var(--or-text-secondary)", textTransform: "uppercase", fontWeight: "500" }, children: "Cost:" }),
Qr.map((u) => /* @__PURE__ */ r.jsx(
"button",
{
onClick: () => g(u),
className: `filter-button ${o.selectedCostTiers.includes(u) ? "active" : ""}`,
style: { fontSize: "0.7rem", padding: "0.25rem 0.5rem" },
children: Xr(u)
},
u
))
] }),
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }, children: [
/* @__PURE__ */ r.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer" }, children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: o.showMultimodal,
onChange: (u) => t("showMultimodal", u.target.checked),
style: { width: "0.875rem", height: "0.875rem" }
}
),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.8rem", color: "var(--or-text)" }, children: "Multimodal only" })
] }),
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
/* @__PURE__ */ r.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer" }, children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: o.showReasoning,
onChange: (u) => t("showReasoning", u.target.checked),
style: { width: "0.875rem", height: "0.875rem" }
}
),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.8rem", color: "var(--or-text)" }, children: "Reasoning only" })
] }),
/* @__PURE__ */ r.jsx(
"div",
{
style: {
position: "relative",
display: "flex",
alignItems: "center",
cursor: "help"
},
title: "⚠️ Reasoning detection uses pattern matching for known models (o1, DeepSeek R1, Gemini Thinking, etc.). New reasoning models may not be detected. OpenRouter doesn't provide an official reasoning capability field.",
children: /* @__PURE__ */ r.jsx(Be, { style: {
width: "0.75rem",
height: "0.75rem",
color: "var(--or-text-secondary)",
opacity: 0.7
} })
}
)
] }),
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
/* @__PURE__ */ r.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer" }, children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: o.showStreamCancel,
onChange: (u) => t("showStreamCancel", u.target.checked),
style: { width: "0.875rem", height: "0.875rem" }
}
),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.8rem", color: "var(--or-text)" }, children: "Stream cancel only" })
] }),
/* @__PURE__ */ r.jsx(
"div",
{
style: {
position: "relative",
display: "flex",
alignItems: "center",
cursor: "help"
},
title: "⚠️ Stream cancellation stops model processing and billing immediately when you abort a request. Provider-dependent: OpenAI, Anthropic, DeepSeek support it; Google, Groq, HuggingFace don't. Critical for cost control in streaming scenarios.",
children: /* @__PURE__ */ r.jsx(Be, { style: {
width: "0.75rem",
height: "0.75rem",
color: "var(--or-text-secondary)",
opacity: 0.7
} })
}
)
] }),
/* @__PURE__ */ r.jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer" }, children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: o.hideExperimental,
onChange: (u) => t("hideExperimental", u.target.checked),
style: { width: "0.875rem", height: "0.875rem" }
}
),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.8rem", color: "var(--or-text)" }, children: "Hide experimental" })
] })
] })
] }),
/* @__PURE__ */ r.jsxs("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontSize: "0.8rem",
color: "var(--or-text-secondary)",
marginTop: "0.5rem",
paddingTop: "0.5rem",
borderTop: "1px solid var(--or-border)"
}, children: [
/* @__PURE__ */ r.jsxs("span", { className: "results-count", children: [
"Showing ",
d.filtered,
" of ",
d.total,
" models"
] }),
d.filtered < d.total && /* @__PURE__ */ r.jsxs("span", { style: { color: "var(--or-primary-color)", marginLeft: "1rem" }, children: [
d.total - d.filtered,
" hidden by filters"
] })
] })
] });
}
function me({
models: o,
selectedModel: t,
onModelSelect: i,
sortConfig: c,
onSort: d
}) {
const h = (a) => c.key !== a ? /* @__PURE__ */ r.jsx(Ve, { style: { width: "1rem", height: "1rem", color: "var(--or-text-secondary)" } }) : c.direction === "asc" ? /* @__PURE__ */ r.jsx(Ve, { style: { width: "1rem", height: "1rem", color: "var(--or-primary-color)" } }) : /* @__PURE__ */ r.jsx(Or, { style: { width: "1rem", height: "1rem", color: "var(--or-primary-color)" } }), k = (a) => {
const g = { width: "0.75rem", height: "0.75rem" };
switch (a.toLowerCase()) {
case "vision":
return /* @__PURE__ */ r.jsx(Ir, { style: g });
case "reasoning":
return /* @__PURE__ */ r.jsx(Mr, { style: g });
case "stream cancel":
return /* @__PURE__ */ r.jsx(Ur, { style: g });
case "fast":
return /* @__PURE__ */ r.jsx(Br, { style: g });
case "moderated":
return /* @__PURE__ */ r.jsx(Wr, { style: g });
case "long context":
return /* @__PURE__ */ r.jsx(Ar, { style: g });
default:
return null;
}
}, v = (a) => {
if (!a || a.length === 0) return null;
const g = a.slice(0, 3), b = a.length - 3;
return /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.25rem" }, children: [
g.map((u, l) => /* @__PURE__ */ r.jsxs(
"span",
{
className: "feature-tag",
children: [
k(u),
u
]
},
l
)),
b > 0 && /* @__PURE__ */ r.jsxs("span", { style: {
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
color: "var(--or-text-secondary)",
borderRadius: "0.375rem"
}, children: [
"+",
b,
" more"
] })
] });
};
return /* @__PURE__ */ r.jsxs("div", { className: "table-container", children: [
/* @__PURE__ */ r.jsxs("table", { className: "model-table", children: [
/* @__PURE__ */ r.jsx("thead", { children: /* @__PURE__ */ r.jsxs("tr", { children: [
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsxs(
"button",
{
onClick: () => d("name"),
style: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
background: "none",
border: "none",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: "500",
color: "var(--or-text)"
},
children: [
"Model",
h("name")
]
}
) }),
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsxs(
"button",
{
onClick: () => d("provider"),
style: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
background: "none",
border: "none",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: "500",
color: "var(--or-text)"
},
children: [
"Provider",
h("provider")
]
}
) }),
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsxs(
"button",
{
onClick: () => d("costTier"),
style: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
background: "none",
border: "none",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: "500",
color: "var(--or-text)"
},
children: [
"Cost",
h("costTier")
]
}
) }),
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsxs(
"button",
{
onClick: () => d("context"),
style: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
background: "none",
border: "none",
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: "500",
color: "var(--or-text)"
},
children: [
"Context",
h("context")
]
}
) }),
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem", fontWeight: "500", color: "var(--or-text)" }, children: "Features" }) }),
/* @__PURE__ */ r.jsx("th", { children: /* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem", fontWeight: "500", color: "var(--or-text)" }, children: "Description" }) })
] }) }),
/* @__PURE__ */ r.jsx("tbody", { children: o.map((a) => /* @__PURE__ */ r.jsxs(
"tr",
{
onClick: () => i(a.id),
className: t === a.id ? "selected" : "",
children: [
/* @__PURE__ */ r.jsx("td", { children: /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
/* @__PURE__ */ r.jsx("span", { style: { fontWeight: "500", color: "var(--or-text)" }, children: a.name }),
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.75rem", color: "var(--or-text-secondary)" }, children: a.id })
] }) }),
/* @__PURE__ */ r.jsx("td", { children: /* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem", color: "var(--or-text)" }, children: a.provider }) }),
/* @__PURE__ */ r.jsx("td", { children: /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
/* @__PURE__ */ r.jsx(
"span",
{
className: `cost-tier-${a.costTier}`,
style: {
display: "inline-flex",
alignItems: "center",
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
fontWeight: "500",
borderRadius: "0.375rem",
color: "white",
width: "fit-content"
},
children: a.costTier.charAt(0).toUpperCase() + a.costTier.slice(1)
}
),
a.pricing && /* @__PURE__ */ r.jsxs("div", { style: { fontSize: "0.75rem", color: "var(--or-text-secondary)" }, children: [
"In: ",
qe(a.pricing.input),
" | Out: ",
qe(a.pricing.output)
] })
] }) }),
/* @__PURE__ */ r.jsx("td", { children: /* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem", color: "var(--or-text)" }, children: Jr(a.context) }) }),
/* @__PURE__ */ r.jsx("td", { children: v(a.features) }),
/* @__PURE__ */ r.jsx("td", { children: /* @__PURE__ */ r.jsx("p", { style: {
fontSize: "0.875rem",
color: "var(--or-text-secondary)",
maxWidth: "20rem",
margin: 0
}, children: Zr(a.description, 100) }) })
]
},
a.id
)) })
] }),
o.length === 0 && /* @__PURE__ */ r.jsxs("div", { className: "empty-container", children: [
/* @__PURE__ */ r.jsx("div", { style: { fontSize: "1.125rem", fontWeight: "500", marginBottom: "0.5rem", color: "var(--or-text)" }, children: "No models found" }),
/* @__PURE__ */ r.jsx("p", { style: { fontSize: "0.875rem", textAlign: "center", maxWidth: "24rem", margin: 0 }, children: "Try adjusting your search terms or clearing some filters to see more results." })
] })
] });
}
function rt({ message: o = "Loading models..." }) {
return /* @__PURE__ */ r.jsxs("div", { className: "loading-container", children: [
/* @__PURE__ */ r.jsx(zr, { className: "loading-spinner spinner", style: { width: "2rem", height: "2rem" } }),
/* @__PURE__ */ r.jsx("p", { style: { color: "var(--or-text-secondary)", textAlign: "center" }, children: o })
] });
}
function tt({ error: o, onRetry: t }) {
return /* @__PURE__ */ r.jsxs("div", { className: "error-container", children: [
/* @__PURE__ */ r.jsx(Fr, { style: { width: "2rem", height: "2rem", color: "#ef4444", marginBottom: "1rem" } }),
/* @__PURE__ */ r.jsx("h3", { style: {
fontSize: "1.125rem",
fontWeight: "500",
color: "var(--or-text)",
marginBottom: "0.5rem"
}, children: "Failed to load models" }),
/* @__PURE__ */ r.jsx("p", { className: "error-message", style: { textAlign: "center", maxWidth: "24rem" }, children: o }),
t && /* @__PURE__ */ r.jsxs(
"button",
{
onClick: t,
className: "retry-button",
style: { display: "flex", alignItems: "center", gap: "0.5rem" },
children: [
/* @__PURE__ */ r.jsx(Lr, { style: { width: "1rem", height: "1rem" } }),
"Try Again"
]
}
)
] });
}
function at({ onClearFilters: o }) {
return /* @__PURE__ */ r.jsxs("div", { className: "empty-container", children: [
/* @__PURE__ */ r.jsx("div", { style: { fontSize: "3.75rem", marginBottom: "1rem" }, children: "🔍" }),
/* @__PURE__ */ r.jsx("h3", { style: {
fontSize: "1.125rem",
fontWeight: "500",
color: "var(--or-text)",
marginBottom: "0.5rem"
}, children: "No models match your criteria" }),
/* @__PURE__ */ r.jsx("p", { style: {
color: "var(--or-text-secondary)",
textAlign: "center",
maxWidth: "24rem",
marginBottom: "1rem"
}, children: "Try adjusting your search terms or clearing some filters to see more results." }),
o && /* @__PURE__ */ r.jsx(
"button",
{
onClick: o,
style: {
padding: "0.5rem 1rem",
backgroundColor: "rgba(0, 0, 0, 0.05)",
color: "var(--or-text)",
border: "none",
borderRadius: "0.5rem",
cursor: "pointer",
fontSize: "0.875rem"
},
children: "Clear all filters"
}
)
] });
}
function lt({
isOpen: o,
onClose: t,
selectedModel: i,
onModelChange: c,
onModelSelect: d,
apiEndpoint: h,
fallbackModels: k,
theme: v = "light",
maxHeight: a = "80vh",
maxWidth: g,
className: b,
categorizeByType: u = !1
}) {
const {
models: l,
freeModels: p,
paidModels: R,
loading: F,
error: _,
refresh: T
} = Kr(h, k), {
filteredModels: w,
filterState: N,
sortConfig: L,
updateFilter: te,
clearFilters: ne,
setSort: B,
availableProviders: ie,
filterStats: J
} = Gr(l);
Ke(() => {
const x = (P) => {
P.key === "Escape" && t();
};
return o && (document.addEventListener("keydown", x), document.body.style.overflow = "hidden"), () => {
document.removeEventListener("keydown", x), document.body.style.overflow = "";
};
}, [o, t]);
const Y = z((x) => {
if (c(x), d) {
const P = l.find((D) => D.id === x);
P && d(P);
}
}, [c, d, l]), oe = z(() => {
i && t();
}, [i, t]);
if (!o) return null;
const X = () => {
if (!u)
return /* @__PURE__ */ r.jsx(
me,
{
models: w,
selectedModel: i,
onModelSelect: Y,
sortConfig: L,
onSort: B
}
);
const x = w.filter((D) => D.costTier === "free"), P = w.filter((D) => D.costTier !== "free");
return /* @__PURE__ */ r.jsxs("div", { className: "categorized-models", children: [
x.length > 0 && /* @__PURE__ */ r.jsxs("div", { className: "model-category", children: [
/* @__PURE__ */ r.jsxs("h3", { style: {
fontSize: "1rem",
fontWeight: "600",
margin: "0.75rem 0 0.5rem",
color: "#10b981",
display: "flex",
alignItems: "center",
gap: "0.5rem"
}, children: [
"Free Models (",
x.length,
")"
] }),
/* @__PURE__ */ r.jsx(
me,
{
models: x,
selectedModel: i,
onModelSelect: Y,
sortConfig: L,
onSort: B
}
)
] }),
P.length > 0 && /* @__PURE__ */ r.jsxs("div", { className: "model-category", children: [
/* @__PURE__ */ r.jsxs("h3", { style: {
fontSize: "1rem",
fontWeight: "600",
margin: "1rem 0 0.5rem",
color: "var(--or-text)",
display: "flex",
alignItems: "center",
gap: "0.5rem"
}, children: [
"Paid Models (",
P.length,
")"
] }),
/* @__PURE__ */ r.jsx(
me,
{
models: P,
selectedModel: i,
onModelSelect: Y,
sortConfig: L,
onSort: B
}
)
] })
] });
};
return /* @__PURE__ */ r.jsx("div", { className: `openrouter-modal ${v === "dark" ? "dark" : ""} ${b || ""}`, children: /* @__PURE__ */ r.jsx(
"div",
{
className: "modal-overlay",
onClick: t,
children: /* @__PURE__ */ r.jsxs(
"div",
{
className: "modal-content",
onClick: (x) => x.stopPropagation(),
style: {
maxHeight: a,
...g && { maxWidth: g, width: g }
},
children: [
/* @__PURE__ */ r.jsxs("div", { className: "modal-header", children: [
/* @__PURE__ */ r.jsxs("h2", { className: "modal-title", children: [
"Choose OpenRouter LLM Model",
!F && !_ && l.length > 0 && /* @__PURE__ */ r.jsxs("span", { style: {
fontWeight: "400",
fontSize: "0.875rem",
color: "var(--or-text-secondary)",
marginLeft: "0.5rem"
}, children: [
"(",
l.length,
" models",
p.length > 0 && `: ${p.length} free, ${R.length} paid`,
")"
] })
] }),
/* @__PURE__ */ r.jsx(
"button",
{
onClick: t,
className: "modal-close-button",
children: /* @__PURE__ */ r.jsx(Vr, { style: { width: "1.25rem", height: "1.25rem" } })
}
)
] }),
/* @__PURE__ */ r.jsx("div", { className: "modal-body", children: F ? /* @__PURE__ */ r.jsx(rt, { message: "Loading available models..." }) : _ ? /* @__PURE__ */ r.jsx(tt, { error: _, onRetry: T }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
/* @__PURE__ */ r.jsx(
et,
{
filterState: N,
onFilterChange: te,
onClearFilters: ne,
availableProviders: ie,
filterStats: J
}
),
X()
] }) }),
w.some((x) => x.reasoning) && /* @__PURE__ */ r.jsx("div", { style: {
padding: "0.75rem 1.5rem",
borderTop: "1px solid var(--or-border)",
backgroundColor: "#fef3c7",
borderLeft: "4px solid #f59e0b",
fontSize: "0.75rem",
color: "#92400e",
lineHeight: "1.4"
}, children: /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.5rem" }, children: [
/* @__PURE__ */ r.jsx("span", { style: { fontSize: "0.875rem" }, children: "⚠️" }),
/* @__PURE__ */ r.jsxs("div", { children: [
/* @__PURE__ */ r.jsx("strong", { children: "Reasoning Detection Notice:" }),
" Reasoning capabilities are detected using pattern matching for known models (o1, DeepSeek R1, Gemini Thinking, etc.). This may not detect all reasoning models or may change as new models are released. OpenRouter doesn't provide an official reasoning capability field."
] })
] }) }),
/* @__PURE__ */ r.jsxs("div", { style: {
padding: "1rem 1.5rem",
borderTop: w.some((x) => x.reasoning) ? "none" : "1px solid var(--or-border)",
backgroundColor: "rgba(0, 0, 0, 0.02)",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}, children: [
/* @__PURE__ */ r.jsx("div", { children: i && (() => {
const x = l.find((P) => P.id === i);
return /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
/* @__PURE__ */ r.jsxs("div", { style: { fontSize: "0.875rem", color: "var(--or-text-secondary)" }, children: [
"Selected: ",
/* @__PURE__ */ r.jsx("span", { style: {
fontWeight: "500",
color: "var(--or-text)",
fontFamily: "monospace",
fontSize: "0.8rem"
}, children: i })
] }),
x && /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
/* @__PURE__ */ r.jsxs("span", { style: { fontSize: "0.75rem", color: "var(--or-text-secondary)" }, children: [
x.name,
" • ",
x.provider
] }),
x.reasoning && /* @__PURE__ */ r.jsx("span", { style: {
padding: "0.125rem 0.375rem",
fontSize: "0.7rem",
backgroundColor: "#8b5cf6",
color: "white",
borderRadius: "0.25rem",
fontWeight: "500"
}, children: "🧠 Reasoning" }),
x.multimodal && /* @__PURE__ */ r.jsx("span", { style: {
padding: "0.125rem 0.375rem",
fontSize: "0.7rem",
backgroundColor: "#10b981",
color: "white",
borderRadius: "0.25rem",
fontWeight: "500"
}, children: "👁 Vision" }),
x.streamCancel && /* @__PURE__ */ r.jsx("span", { style: {
padding: "0.125rem 0.375rem",
fontSize: "0.7rem",
backgroundColor: "#f59e0b",
color: "white",
borderRadius: "0.25rem",
fontWeight: "500"
}, children: "⏹️ Stream Cancel" })
] })
] });
})() }),
/* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
/* @__PURE__ */ r.jsx(
"button",
{
onClick: t,
style: {
padding: "0.5rem 1rem",
color: "var(--or-text)",
backgroundColor: "var(--or-background)",
border: "1px solid var(--or-border)",
borderRadius: "0.5rem",
cursor: "pointer",
fontSize: "0.875rem"
},
children: "Cancel"
}
),
/* @__PURE__ */ r.jsx(
"button",
{
onClick: oe,
disabled: !i,
style: {
padding: "0.5rem 1.5rem",
borderRadius: "0.5rem",
fontWeight: "500",
fontSize: "0.875rem",
border: "none",
cursor: i ? "pointer" : "not-allowed",
backgroundColor: i ? "var(--or-primary-color)" : "#d1d5db",
color: i ? "white" : "#6b7280"
},
children: "Select Model"
}
)
] })
] })
]
}
)
}
) });
}
export {
Hr as ApiClient,
at as EmptyState,
tt as ErrorState,
et as FilterBar,
rt as LoadingState,
lt as ModelChooserModal,
me as ModelTable,
st as debounce,
Jr as formatContextLength,
qe as formatPrice,
ot as getCostTierColor,
Xr as getCostTierLabel,
Zr as truncateText,
Gr as useFiltering,
Kr as useModelData
};