openrouter-model-picker
Version:
Third-party React component for OpenRouter model selection
1,430 lines (1,428 loc) • 61.3 kB
JavaScript
var jr = Object.defineProperty;
var wr = (i, t, o) => t in i ? jr(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
var H = (i, t, o) => wr(i, typeof t != "symbol" ? t + "" : t, o);
import qe, { forwardRef as Cr, createElement as ze, useState as N, useCallback as D, useEffect as Ke, useMemo as he, useRef as Tr } from "react";
var ge = { exports: {} }, J = {};
/**
* @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 Er() {
if (We) return J;
We = 1;
var i = qe, t = Symbol.for("react.element"), o = Symbol.for("react.fragment"), l = Object.prototype.hasOwnProperty, d = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, h = { key: !0, ref: !0, __self: !0, __source: !0 };
function j(v, a, y) {
var x, c = {}, u = null, p = null;
y !== void 0 && (u = "" + y), a.key !== void 0 && (u = "" + a.key), a.ref !== void 0 && (p = a.ref);
for (x in a) l.call(a, x) && !h.hasOwnProperty(x) && (c[x] = a[x]);
if (v && v.defaultProps) for (x in a = v.defaultProps, a) c[x] === void 0 && (c[x] = a[x]);
return { $$typeof: t, type: v, key: u, ref: p, props: c, _owner: d.current };
}
return J.Fragment = o, J.jsx = j, J.jsxs = j, J;
}
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 _r() {
return Ue || (Ue = 1, process.env.NODE_ENV !== "production" && function() {
var i = qe, t = Symbol.for("react.element"), o = Symbol.for("react.portal"), l = Symbol.for("react.fragment"), d = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), j = Symbol.for("react.provider"), v = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), x = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), p = Symbol.for("react.offscreen"), E = Symbol.iterator, R = "@@iterator";
function S(e) {
if (e === null || typeof e != "object")
return null;
var n = E && e[E] || e[R];
return typeof n == "function" ? n : null;
}
var C = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function T(e) {
{
for (var n = arguments.length, s = new Array(n > 1 ? n - 1 : 0), f = 1; f < n; f++)
s[f - 1] = arguments[f];
L("error", e, s);
}
}
function L(e, n, s) {
{
var f = C.ReactDebugCurrentFrame, b = f.getStackAddendum();
b !== "" && (n += "%s", s = s.concat([b]));
var w = s.map(function(g) {
return String(g);
});
w.unshift("Warning: " + n), Function.prototype.apply.call(console[e], console, w);
}
}
var z = !1, re = !1, B = !1, te = !1, ne = !1, U;
U = Symbol.for("react.module.reference");
function oe(e) {
return !!(typeof e == "string" || typeof e == "function" || e === l || e === h || ne || e === d || e === y || e === x || te || e === p || z || re || B || typeof e == "object" && e !== null && (e.$$typeof === u || e.$$typeof === c || e.$$typeof === j || 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 === U || e.getModuleId !== void 0));
}
function ie(e, n, s) {
var f = e.displayName;
if (f)
return f;
var b = n.displayName || n.name || "";
return b !== "" ? s + "(" + b + ")" : s;
}
function O(e) {
return e.displayName || "Context";
}
function F(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && T("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 l:
return "Fragment";
case o:
return "Portal";
case h:
return "Profiler";
case d:
return "StrictMode";
case y:
return "Suspense";
case x:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case v:
var n = e;
return O(n) + ".Consumer";
case j:
var s = e;
return O(s._context) + ".Provider";
case a:
return ie(e, e.render, "ForwardRef");
case c:
var f = e.displayName || null;
return f !== null ? f : F(e.type) || "Memo";
case u: {
var b = e, w = b._payload, g = b._init;
try {
return F(g(w));
} catch {
return null;
}
}
}
return null;
}
var $ = Object.assign, q = 0, ve, ye, xe, be, je, we, Ce;
function Te() {
}
Te.__reactDisabledLog = !0;
function He() {
{
if (q === 0) {
ve = console.log, ye = console.info, xe = console.warn, be = console.error, je = console.group, we = console.groupCollapsed, Ce = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: Te,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
q++;
}
}
function Je() {
{
if (q--, q === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: $({}, e, {
value: ve
}),
info: $({}, e, {
value: ye
}),
warn: $({}, e, {
value: xe
}),
error: $({}, e, {
value: be
}),
group: $({}, e, {
value: je
}),
groupCollapsed: $({}, e, {
value: we
}),
groupEnd: $({}, e, {
value: Ce
})
});
}
q < 0 && T("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var se = C.ReactCurrentDispatcher, ae;
function X(e, n, s) {
{
if (ae === void 0)
try {
throw Error();
} catch (b) {
var f = b.stack.trim().match(/\n( *(at )?)/);
ae = f && f[1] || "";
}
return `
` + ae + e;
}
}
var le = !1, Z;
{
var Ge = typeof WeakMap == "function" ? WeakMap : Map;
Z = new Ge();
}
function Ee(e, n) {
if (!e || le)
return "";
{
var s = Z.get(e);
if (s !== void 0)
return s;
}
var f;
le = !0;
var b = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var w;
w = se.current, se.current = null, He();
try {
if (n) {
var g = function() {
throw Error();
};
if (Object.defineProperty(g.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(g, []);
} catch (M) {
f = M;
}
Reflect.construct(e, [], g);
} else {
try {
g.call();
} catch (M) {
f = M;
}
e.call(g.prototype);
}
} else {
try {
throw Error();
} catch (M) {
f = M;
}
e();
}
} catch (M) {
if (M && f && typeof M.stack == "string") {
for (var m = M.stack.split(`
`), P = f.stack.split(`
`), _ = m.length - 1, k = P.length - 1; _ >= 1 && k >= 0 && m[_] !== P[k]; )
k--;
for (; _ >= 1 && k >= 0; _--, k--)
if (m[_] !== P[k]) {
if (_ !== 1 || k !== 1)
do
if (_--, k--, k < 0 || m[_] !== P[k]) {
var A = `
` + m[_].replace(" at new ", " at ");
return e.displayName && A.includes("<anonymous>") && (A = A.replace("<anonymous>", e.displayName)), typeof e == "function" && Z.set(e, A), A;
}
while (_ >= 1 && k >= 0);
break;
}
}
} finally {
le = !1, se.current = w, Je(), Error.prepareStackTrace = b;
}
var Y = e ? e.displayName || e.name : "", W = Y ? X(Y) : "";
return typeof e == "function" && Z.set(e, W), W;
}
function Xe(e, n, s) {
return Ee(e, !1);
}
function Ze(e) {
var n = e.prototype;
return !!(n && n.isReactComponent);
}
function Q(e, n, s) {
if (e == null)
return "";
if (typeof e == "function")
return Ee(e, Ze(e));
if (typeof e == "string")
return X(e);
switch (e) {
case y:
return X("Suspense");
case x:
return X("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case a:
return Xe(e.render);
case c:
return Q(e.type, n, s);
case u: {
var f = e, b = f._payload, w = f._init;
try {
return Q(w(b), n, s);
} catch {
}
}
}
return "";
}
var K = Object.prototype.hasOwnProperty, _e = {}, ke = C.ReactDebugCurrentFrame;
function ee(e) {
if (e) {
var n = e._owner, s = Q(e.type, e._source, n ? n.type : null);
ke.setExtraStackFrame(s);
} else
ke.setExtraStackFrame(null);
}
function Qe(e, n, s, f, b) {
{
var w = Function.call.bind(K);
for (var g in e)
if (w(e, g)) {
var m = void 0;
try {
if (typeof e[g] != "function") {
var P = Error((f || "React class") + ": " + s + " type `" + g + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[g] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw P.name = "Invariant Violation", P;
}
m = e[g](n, g, f, s, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (_) {
m = _;
}
m && !(m instanceof Error) && (ee(b), T("%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, g, typeof m), ee(null)), m instanceof Error && !(m.message in _e) && (_e[m.message] = !0, ee(b), T("Failed %s type: %s", s, m.message), ee(null));
}
}
}
var er = Array.isArray;
function ce(e) {
return er(e);
}
function rr(e) {
{
var n = typeof Symbol == "function" && Symbol.toStringTag, s = n && e[Symbol.toStringTag] || e.constructor.name || "Object";
return s;
}
}
function tr(e) {
try {
return Re(e), !1;
} catch {
return !0;
}
}
function Re(e) {
return "" + e;
}
function Se(e) {
if (tr(e))
return T("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", rr(e)), Re(e);
}
var Pe = C.ReactCurrentOwner, nr = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Fe, Me;
function or(e) {
if (K.call(e, "ref")) {
var n = Object.getOwnPropertyDescriptor(e, "ref").get;
if (n && n.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function ir(e) {
if (K.call(e, "key")) {
var n = Object.getOwnPropertyDescriptor(e, "key").get;
if (n && n.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function sr(e, n) {
typeof e.ref == "string" && Pe.current;
}
function ar(e, n) {
{
var s = function() {
Fe || (Fe = !0, T("%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 lr(e, n) {
{
var s = function() {
Me || (Me = !0, T("%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 cr = function(e, n, s, f, b, w, g) {
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: g,
// Record the component responsible for creating this element.
_owner: w
};
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: b
}), Object.freeze && (Object.freeze(m.props), Object.freeze(m)), m;
};
function ur(e, n, s, f, b) {
{
var w, g = {}, m = null, P = null;
s !== void 0 && (Se(s), m = "" + s), ir(n) && (Se(n.key), m = "" + n.key), or(n) && (P = n.ref, sr(n, b));
for (w in n)
K.call(n, w) && !nr.hasOwnProperty(w) && (g[w] = n[w]);
if (e && e.defaultProps) {
var _ = e.defaultProps;
for (w in _)
g[w] === void 0 && (g[w] = _[w]);
}
if (m || P) {
var k = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
m && ar(g, k), P && lr(g, k);
}
return cr(e, m, P, b, f, Pe.current, g);
}
}
var ue = C.ReactCurrentOwner, Oe = C.ReactDebugCurrentFrame;
function V(e) {
if (e) {
var n = e._owner, s = Q(e.type, e._source, n ? n.type : null);
Oe.setExtraStackFrame(s);
} else
Oe.setExtraStackFrame(null);
}
var de;
de = !1;
function fe(e) {
return typeof e == "object" && e !== null && e.$$typeof === t;
}
function Ie() {
{
if (ue.current) {
var e = F(ue.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function dr(e) {
return "";
}
var Ae = {};
function fr(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 $e(e, n) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var s = fr(n);
if (Ae[s])
return;
Ae[s] = !0;
var f = "";
e && e._owner && e._owner !== ue.current && (f = " It was passed a child from " + F(e._owner.type) + "."), V(e), T('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), V(null);
}
}
function De(e, n) {
{
if (typeof e != "object")
return;
if (ce(e))
for (var s = 0; s < e.length; s++) {
var f = e[s];
fe(f) && $e(f, n);
}
else if (fe(e))
e._store && (e._store.validated = !0);
else if (e) {
var b = S(e);
if (typeof b == "function" && b !== e.entries)
for (var w = b.call(e), g; !(g = w.next()).done; )
fe(g.value) && $e(g.value, n);
}
}
}
function pr(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 === c))
s = n.propTypes;
else
return;
if (s) {
var f = F(n);
Qe(s, e.props, "prop", f, e);
} else if (n.PropTypes !== void 0 && !de) {
de = !0;
var b = F(n);
T("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", b || "Unknown");
}
typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && T("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function hr(e) {
{
for (var n = Object.keys(e.props), s = 0; s < n.length; s++) {
var f = n[s];
if (f !== "children" && f !== "key") {
V(e), T("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), V(null);
break;
}
}
e.ref !== null && (V(e), T("Invalid attribute `ref` supplied to `React.Fragment`."), V(null));
}
}
var Le = {};
function Ne(e, n, s, f, b, w) {
{
var g = oe(e);
if (!g) {
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 P = dr();
P ? m += P : m += Ie();
var _;
e === null ? _ = "null" : ce(e) ? _ = "array" : e !== void 0 && e.$$typeof === t ? (_ = "<" + (F(e.type) || "Unknown") + " />", m = " Did you accidentally export a JSX literal instead of a component?") : _ = typeof e, T("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", _, m);
}
var k = ur(e, n, s, b, w);
if (k == null)
return k;
if (g) {
var A = n.children;
if (A !== void 0)
if (f)
if (ce(A)) {
for (var Y = 0; Y < A.length; Y++)
De(A[Y], e);
Object.freeze && Object.freeze(A);
} else
T("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
De(A, e);
}
if (K.call(n, "key")) {
var W = F(e), M = Object.keys(n).filter(function(br) {
return br !== "key";
}), pe = M.length > 0 ? "{key: someKey, " + M.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Le[W + pe]) {
var xr = M.length > 0 ? "{" + M.join(": ..., ") + ": ...}" : "{}";
T(`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, xr, W), Le[W + pe] = !0;
}
}
return e === l ? hr(k) : pr(k), k;
}
}
function mr(e, n, s) {
return Ne(e, n, s, !0);
}
function gr(e, n, s) {
return Ne(e, n, s, !1);
}
var vr = gr, yr = mr;
G.Fragment = l, G.jsx = vr, G.jsxs = yr;
}()), G;
}
process.env.NODE_ENV === "production" ? ge.exports = Er() : ge.exports = _r();
var r = ge.exports, kr = {
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 Rr = (i) => i.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Sr = (i, t) => {
const o = Cr(
({ color: l = "currentColor", size: d = 24, strokeWidth: h = 2, absoluteStrokeWidth: j, children: v, ...a }, y) => ze(
"svg",
{
ref: y,
...kr,
width: d,
height: d,
stroke: l,
strokeWidth: j ? Number(h) * 24 / Number(d) : h,
className: `lucide lucide-${Rr(i)}`,
...a
},
[
...t.map(([x, c]) => ze(x, c)),
...(Array.isArray(v) ? v : [v]) || []
]
)
);
return o.displayName = `${i}`, o;
};
var I = Sr;
const Pr = I("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" }]
]), Fr = I("ChevronDown", [
["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
]), Ve = I("ChevronUp", [
["path", { d: "m18 15-6-6-6 6", key: "153udz" }]
]), Mr = I("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" }]
]), Or = I("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" }]
]), Ir = I("Filter", [
[
"polygon",
{ points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3", key: "1yg77f" }
]
]), Ar = I("Loader2", [
["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
]), $r = I("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" }]
]), Dr = I("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" }]
]), Lr = I("Search", [
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
]), Nr = I("Shield", [
["path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", key: "3xmgem" }]
]), zr = I("X", [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
]), Wr = I("Zap", [
[
"polygon",
{ points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", key: "45s27k" }
]
]), Ur = "https://openrouter.ai/api/v1/models", Vr = "https://openrouter.ai/api/v1/chat/completions";
class Yr {
// 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 || Ur;
}
async fetchModels(t = !1) {
if (!t && this.cache && Date.now() - this.cacheTimestamp < this.CACHE_DURATION)
return this.cache;
try {
const o = {
"Content-Type": "application/json"
}, l = await fetch(this.endpoint, { headers: o });
if (!l.ok)
throw new Error(`HTTP error! status: ${l.status}`);
const d = await l.json(), h = d.data.length, j = this.filterAvailableModels(d.data), v = h - j.length;
console.log(`📊 Model filtering stats: ${h} total → ${j.length} available (${v} filtered out)`);
const a = j.map((y) => this.transformModel(y));
return this.cache = a, this.cacheTimestamp = Date.now(), a;
} catch (o) {
return console.error("Failed to fetch models from OpenRouter:", o), this.cache ? this.cache : this.getFallbackModels();
}
}
/**
* Test a model with an actual API call
*/
async testModel(t, o, l = "Hello! Please respond with a brief greeting.") {
var d, h, j, v;
if (!o)
return {
success: !1,
error: "API key is required for testing models"
};
try {
const a = await fetch(Vr, {
method: "POST",
headers: {
Authorization: `Bearer ${o}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: t,
messages: [
{ role: "user", content: l }
],
max_tokens: 100,
// Keep it short for testing
temperature: 0.7
})
});
if (!a.ok) {
const x = await a.json().catch(() => ({}));
return {
success: !1,
error: `HTTP ${a.status}: ${((d = x.error) == null ? void 0 : d.message) || a.statusText}`
};
}
const y = await a.json();
return {
success: !0,
response: ((v = (j = (h = y.choices) == null ? void 0 : h[0]) == null ? void 0 : j.message) == null ? void 0 : v.content) || "No response content",
usage: y.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((o) => {
if (!o.context_length || o.context_length <= 0)
return console.debug(`Filtered out model ${o.id}: invalid context length (${o.context_length})`), !1;
if (this.isModelDeprecated(o))
return console.debug(`Filtered out model ${o.id}: deprecated`), !1;
if (o.per_request_limits) {
const d = parseInt(o.per_request_limits.prompt_tokens || "0"), h = parseInt(o.per_request_limits.completion_tokens || "0");
if (d <= 0 && h <= 0)
return console.debug(`Filtered out model ${o.id}: zero capacity limits`), !1;
}
return !o.pricing || !o.pricing.prompt && !o.pricing.completion ? (console.debug(`Filtered out model ${o.id}: invalid pricing`), !1) : !o.id || o.id.trim() === "" ? (console.debug("Filtered out model: empty or invalid ID"), !1) : this.isKnownProblematicModel(o.id) ? (console.debug(`Filtered out model ${o.id}: known problematic model`), !1) : !0;
});
}
/**
* Check if a model is deprecated using multiple detection strategies
*/
isModelDeprecated(t) {
var l, d, h, j;
if ((d = (l = t.architecture) == null ? void 0 : l.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((y) => v.includes(y)))
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(((j = t.pricing) == null ? void 0 : j.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 o = [], l = [];
return t.forEach((d) => {
d.costTier === "free" ? o.push(d) : l.push(d);
}), { freeModels: o, paidModels: l };
}
transformModel(t) {
const o = this.extractProvider(t.id), l = this.calculateCostTier(t.pricing), d = this.extractFeatures(t);
return {
id: t.id,
// CRITICAL: Use exact model ID without modification
name: t.name,
provider: o,
costTier: l,
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)
};
}
extractProvider(t) {
const o = t.split("/");
if (o.length > 1) {
const l = o[0];
return l.charAt(0).toUpperCase() + l.slice(1);
}
return "Unknown";
}
calculateCostTier(t) {
const o = parseFloat(t.prompt) || 0, l = parseFloat(t.completion) || 0;
if (o === 0 && l === 0) return "free";
const d = (o + l) / 2;
return d < 1e-6 ? "low" : d < 1e-5 ? "medium" : "high";
}
extractFeatures(t) {
var h;
const o = [];
((h = t.architecture.input_modalities) != null && h.includes("image") || t.architecture.modality === "multimodal") && o.push("Vision"), t.top_provider.is_moderated && o.push("Moderated"), t.context_length > 1e5 && o.push("Long Context"), t.architecture.instruct_type && o.push("Instruct");
const l = parseFloat(t.pricing.prompt) || 0, d = parseFloat(t.pricing.completion) || 0;
return l === 0 && d === 0 && o.push("Free"), o;
}
isMultimodal(t) {
var o;
return ((o = t.architecture.input_modalities) == null ? void 0 : o.includes("image")) || t.architecture.modality === "multimodal" || !1;
}
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
},
{
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
},
{
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
},
// 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
}
];
}
clearCache() {
this.cache = null, this.cacheTimestamp = 0;
}
}
function Br(i, t) {
const [o, l] = N([]), [d, h] = N([]), [j, v] = N([]), [a, y] = N(!0), [x, c] = N(null), [u] = N(() => new Yr(i)), p = D(async (S = !1) => {
try {
y(!0), c(null);
let C;
try {
C = await u.fetchModels(S);
} catch (z) {
if (t && t.length > 0)
C = t;
else
throw z;
}
l(C);
const { freeModels: T, paidModels: L } = u.categorizeModels(C);
h(T), v(L);
} catch (C) {
const T = C instanceof Error ? C.message : "Failed to fetch models";
if (c(T), t && t.length > 0) {
l(t);
const { freeModels: L, paidModels: z } = u.categorizeModels(t);
h(L), v(z);
}
} finally {
y(!1);
}
}, [u, t]), E = D(async () => {
await p(!0);
}, [p]), R = D(async (S, C, T) => await u.testModel(S, C, T), [u]);
return Ke(() => {
p();
}, [p]), {
models: o,
freeModels: d,
paidModels: j,
loading: a,
error: x,
refresh: E,
testModel: R
};
}
const Ye = {
searchTerm: "",
selectedProviders: [],
selectedCostTiers: [],
showMultimodal: !1,
hideExperimental: !1
};
function qr(i) {
const [t, o] = N(Ye), [l, d] = N({ key: null, direction: "asc" }), h = he(() => [...new Set(i.map((p) => p.provider))].sort(), [i]), j = D((u, p) => {
o((E) => ({ ...E, [u]: p }));
}, []), v = D(() => {
o(Ye);
}, []), a = D((u, p = "asc") => {
d((E) => E.key === u ? { key: u, direction: E.direction === "asc" ? "desc" : "asc" } : { key: u, direction: p });
}, []), y = D((u) => [
/.*-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((E) => E.test(u.id)) || u.name.toLowerCase().includes("experimental") || u.name.toLowerCase().includes("preview") || u.name.toLowerCase().includes("beta") || u.description.toLowerCase().includes("experimental"), []), x = he(() => {
let u = [...i];
if (t.searchTerm) {
const p = t.searchTerm.toLowerCase();
u = u.filter(
(E) => {
var R;
return E.name.toLowerCase().includes(p) || E.provider.toLowerCase().includes(p) || E.description.toLowerCase().includes(p) || E.id.toLowerCase().includes(p) || ((R = E.features) == null ? void 0 : R.some((S) => S.toLowerCase().includes(p)));
}
);
}
return t.selectedProviders.length > 0 && (u = u.filter(
(p) => t.selectedProviders.includes(p.provider)
)), t.selectedCostTiers.length > 0 && (u = u.filter(
(p) => t.selectedCostTiers.includes(p.costTier)
)), t.showMultimodal && (u = u.filter((p) => p.multimodal)), t.hideExperimental && (u = u.filter((p) => !y(p))), l.key && u.sort((p, E) => {
const R = p[l.key], S = E[l.key];
if (R === void 0 && S === void 0) return 0;
if (R === void 0) return 1;
if (S === void 0) return -1;
let C = 0;
return typeof R == "string" && typeof S == "string" ? C = R.localeCompare(S) : typeof R == "number" && typeof S == "number" ? C = R - S : C = String(R).localeCompare(String(S)), l.direction === "desc" ? -C : C;
}), u;
}, [i, t, l, y]), c = he(() => ({
total: i.length,
filtered: x.length
}), [i.length, x.length]);
return {
filteredModels: x,
filterState: t,
sortConfig: l,
updateFilter: j,
clearFilters: v,
setSort: a,
availableProviders: h,
filterStats: c
};
}
function Be(i) {
if (i === 0) return "Free";
const t = i * 1e3;
return t < 0.01 ? `$${t.toFixed(4)}/1K` : `$${t.toFixed(2)}/1K`;
}
function Kr(i) {
return i ? i >= 1e6 ? `${(i / 1e6).toFixed(1)}M` : i >= 1e3 ? `${(i / 1e3).toFixed(0)}K` : i.toString() : "Unknown";
}
function tt(i) {
switch (i) {
case "free":
return "#10b981";
case "low":
return "#3b82f6";
case "medium":
return "#f59e0b";
case "high":
return "#ef4444";
default:
return "#6b7280";
}
}
function Hr(i) {
switch (i) {
case "free":
return "Free";
case "low":
return "Low Cost";
case "medium":
return "Medium Cost";
case "high":
return "High Cost";
default:
return "Unknown";
}
}
function Jr(i, t) {
return i.length <= t ? i : i.slice(0, t - 3) + "...";
}
function nt(i, t) {
let o;
return (...l) => {
clearTimeout(o), o = setTimeout(() => i(...l), t);
};
}
const Gr = ["free", "low", "medium", "high"];
function Xr({
filterState: i,
onFilterChange: t,
onClearFilters: o,
availableProviders: l,
filterStats: d
}) {
const h = Tr(), j = D((c) => {
h.current && clearTimeout(h.current), h.current = setTimeout(() => {
t("searchTerm", c);
}, 300);
}, [t]), v = (c) => {
j(c.target.value);
}, a = (c) => {
const u = i.selectedProviders.includes(c) ? i.selectedProviders.filter((p) => p !== c) : [...i.selectedProviders, c];
t("selectedProviders", u);
}, y = (c) => {
const u = i.selectedCostTiers.includes(c) ? i.selectedCostTiers.filter((p) => p !== c) : [...i.selectedCostTiers, c];
t("selectedCostTiers", u);
}, x = i.searchTerm || i.selectedProviders.length > 0 || i.selectedCostTiers.length > 0 || i.showMultimodal || i.hideExperimental;
return /* @__PURE__ */ r.jsxs("div", { className: "filter-bar", children: [
/* @__PURE__ */ r.jsxs("div", { style: { position: "relative", marginBottom: "0.75rem" }, children: [
/* @__PURE__ */ r.jsx(Lr, { 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: i.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(Ir, { 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:" })
] }),
x && /* @__PURE__ */ r.jsxs(
"button",
{
onClick: o,
className: "clear-filters-button",
style: { display: "flex", alignItems: "center", gap: "0.25rem" },
children: [
/* @__PURE__ */ r.jsx(Dr, { 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: l.map((c) => /* @__PURE__ */ r.jsx(
"button",
{
onClick: () => a(c),
className: `filter-button ${i.selectedProviders.includes(c) ? "active" : ""}`,
style: { fontSize: "0.7rem", padding: "0.25rem 0.5rem" },
children: c
},
c
)) })
] }),
/* @__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:" }),
Gr.map((c) => /* @__PURE__ */ r.jsx(
"button",
{
onClick: () => y(c),
className: `filter-button ${i.selectedCostTiers.includes(c) ? "active" : ""}`,
style: { fontSize: "0.7rem", padding: "0.25rem 0.5rem" },
children: Hr(c)
},
c
))
] }),
/* @__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: i.showMultimodal,
onChange: (c) => t("showMultimodal", c.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("label", { style: { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer" }, children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: i.hideExperimental,
onChange: (c) => t("hideExperimental", c.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: i,
selectedModel: t,
onModelSelect: o,
sortConfig: l,
onSort: d
}) {
const h = (a) => l.key !== a ? /* @__PURE__ */ r.jsx(Ve, { style: { width: "1rem", height: "1rem", color: "var(--or-text-secondary)" } }) : l.direction === "asc" ? /* @__PURE__ */ r.jsx(Ve, { style: { width: "1rem", height: "1rem", color: "var(--or-primary-color)" } }) : /* @__PURE__ */ r.jsx(Fr, { style: { width: "1rem", height: "1rem", color: "var(--or-primary-color)" } }), j = (a) => {
const y = { width: "0.75rem", height: "0.75rem" };
switch (a.toLowerCase()) {
case "vision":
return /* @__PURE__ */ r.jsx(Mr, { style: y });
case "fast":
return /* @__PURE__ */ r.jsx(Wr, { style: y });
case "moderated":
return /* @__PURE__ */ r.jsx(Nr, { style: y });
case "long context":
return /* @__PURE__ */ r.jsx(Or, { style: y });
default:
return null;
}
}, v = (a) => {
if (!a || a.length === 0) return null;
const y = a.slice(0, 3), x = a.length - 3;
return /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.25rem" }, children: [
y.map((c, u) => /* @__PURE__ */ r.jsxs(
"span",
{
className: "feature-tag",
children: [
j(c),
c
]
},
u
)),
x > 0 && /* @__PURE__ */ r.jsxs("span", { style: {
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
color: "var(--or-text-secondary)",
borderRadius: "0.375rem"
}, children: [
"+",
x,
" 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: i.map((a) => /* @__PURE__ */ r.jsxs(
"tr",
{
onClick: () => o(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