ai-sdk-react-model-picker
Version:
A flexible, theme-aware React component library for selecting and managing AI models. Built for seamless integration with Vercel's AI SDK v5, with special support for VSCode extensions and JetBrains IDEs.
1,225 lines • 77.3 kB
JavaScript
import { jsx as i, jsxs as y, Fragment as X } from "react/jsx-runtime";
import { useState as V, useEffect as O, createElement as x, useRef as F, createContext as ee, useCallback as R, useContext as te, useMemo as j, useReducer as xe } from "react";
import { useForm as be } from "react-hook-form";
const oe = "/";
function q(e) {
return `${e.provider.id}${oe}${e.model.id}`;
}
function W(e) {
const t = e.split(oe);
if (t.length !== 2)
throw new TypeError("Invalid ProviderAndModelKey format");
return { providerId: t[0], modelId: t[1] };
}
function ke(e) {
return typeof e == "object" && e !== null && !Array.isArray(e);
}
function we(e) {
if (!ke(e))
throw new Error("Value is not an object");
for (const [t, o] of Object.entries(e))
if (typeof o != "string")
throw new TypeError(`Value at key "${t}" is not a string`);
}
var N = /* @__PURE__ */ ((e) => (e.RequiresApiKey = "Requires API Key", e.Local = "Local", e.Free = "Free", e.OpenSource = "Open-Source", e.Vision = "Vision", e.Tools = "Tools/Functions", e.LongContext = "Long Context", e))(N || {});
class S {
hasCredentials(t) {
return this.configuration.validateConfig(t).ok;
}
validateCredentials(t) {
const o = this.configuration.validateConfig(t);
return o.ok ? o.fieldValidationWarnings.length > 0 ? {
isValid: !0,
warning: o.fieldValidationWarnings.join(`
`)
} : { isValid: !0 } : {
isValid: !1,
error: o.message ?? `${this.metadata.name} configuration is invalid`
};
}
// Optional dynamic model loading
// eslint-disable-next-line @typescript-eslint/require-await
async getModels() {
return this.models;
}
getDefaultModel() {
return this.models.find((t) => t.isDefault === !0) ?? this.models[0];
}
}
const T = (e) => e, l = (e) => e, U = "recentlyUsedModels", $ = "providersWithCredentials", Ce = "config";
function Ne(e) {
try {
we(e);
} catch (t) {
return console.error("Invalid storage format:", t), [];
}
try {
return Object.entries(e).toSorted((t, o) => Number(o[1]) - Number(t[1])).map(([t]) => t);
} catch (t) {
return console.error("Invalid value format:", t), [];
}
}
async function re(e) {
return e.get(U).then(Ne);
}
async function Te(e) {
return re(e).then((t) => t.length > 0 ? t[0] : void 0);
}
async function Me(e, t) {
return e.get(U).then((o) => e.set(U, {
...o,
[t]: Date.now().toString()
}));
}
async function Le(e, t) {
const o = await e.get(U);
if (o === void 0)
return {};
for (const r of t)
delete o[r];
return e.set(U, o).then(() => o);
}
async function Ae(e) {
return e.get($).then((t) => Object.keys(t ?? {}));
}
async function Pe(e, t) {
return e.get($).then((o) => e.set($, {
...o,
[t]: Date.now().toString()
}));
}
async function Ie(e, t) {
return e.get($).then((o) => {
if (o !== void 0)
return delete o[t], e.set($, o);
});
}
function H(e) {
return `${e}:${Ce}`;
}
async function Ve(e, t, o) {
return e.set(H(t), o);
}
async function ne(e, t) {
return e.get(H(t));
}
async function Ee(e, t) {
return e.remove(H(t));
}
function Se(e) {
const t = {}, o = /* @__PURE__ */ new Map();
for (const r of e)
t[r.metadata.id] = r.metadata, o.set(
r.metadata.id,
r.models.reduce((a, s) => (a.set(s.id, s), a), /* @__PURE__ */ new Map())
);
return { providerMetadata: t, providerModels: o };
}
function Ke(e, t) {
const [o, r] = V([]), [a, s] = V([]), [n, h] = V(
void 0
), b = (d) => {
Ie(e, d);
const c = o.filter((k) => k.provider.id === d).map((k) => k.key);
Le(e, c);
const u = o.filter((k) => k.provider.id !== d), v = a.filter(
(k) => k.provider.id !== d
), C = u[0] ?? v[0];
return r(u), s(v), h(C), C === void 0 ? void 0 : { model: C.model, provider: C.provider };
}, p = (d, c) => {
const u = t.getProvider(d), v = c === void 0 ? u.getDefaultModel() : u.models.find((f) => f.id === c);
if (v === void 0)
return;
const C = { model: v, provider: u.metadata };
Pe(e, d), Me(e, q(C));
const k = /* @__PURE__ */ new Set([
...o.map((f) => f.key),
...a.map((f) => f.key)
]), L = u.models.filter((f) => f.id !== v.id && !k.has(
q({ model: f, provider: u.metadata })
)).map((f) => ({
model: f,
provider: u.metadata,
key: q({ model: f, provider: u.metadata })
}));
s((f) => [...L, ...f]);
const g = q(C), m = { ...C, key: g };
return h(m), r((f) => {
const I = f.findIndex((E) => E.key === g);
return I === -1 ? [m, ...f] : [m, ...f.slice(0, I), ...f.slice(I + 1)];
}), s((f) => f.filter((I) => I.key !== g)), m;
};
return O(() => {
async function d() {
try {
const c = await re(e), u = await Ae(e), C = [.../* @__PURE__ */ new Set([
...c.map((m) => W(m).providerId),
...u
])].map((m) => t.getProvider(m)), { providerMetadata: k, providerModels: L } = Se(C), g = c.map((m) => {
const { providerId: f, modelId: I } = W(m), E = L.get(f)?.get(I);
if (E !== void 0)
return L.get(f)?.delete(I), {
model: E,
provider: k[f],
key: m
};
}).filter((m) => m !== void 0);
h((m) => m ?? g[0]), r(g), s(
[...L.entries()].flatMap(([m, f]) => [...f.entries()].map(([I, E]) => ({
model: E,
provider: k[m],
key: q({ model: E, provider: k[m] })
})))
);
} catch (c) {
console.error("Failed to load recently used models:", c);
}
}
d();
}, [e, t]), {
recentlyUsedModels: o,
modelsWithCredentials: a,
selectedModel: n,
setSelectedProviderAndModel: p,
deleteProvider: b
};
}
const Re = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M16.804 1.957l7.22 4.105v.087L16.73 10.21l.017-2.117-.821-.03c-1.059-.028-1.611.002-2.268.11-1.064.175-2.038.577-3.147 1.352L8.345 11.03c-.284.195-.495.336-.68.455l-.515.322-.397.234.385.23.53.338c.476.314 1.17.796 2.701 1.866 1.11.775 2.083 1.177 3.147 1.352l.3.045c.694.091 1.375.094 2.825.033l.022-2.159 7.22 4.105v.087L16.589 22l.014-1.862-.635.022c-1.386.042-2.137.002-3.138-.162-1.694-.28-3.26-.926-4.881-2.059l-2.158-1.5a21.997 21.997 0 00-.755-.498l-.467-.28a55.927 55.927 0 00-.76-.43C2.908 14.73.563 14.116 0 14.116V9.888l.14.004c.564-.007 2.91-.622 3.809-1.124l1.016-.58.438-.274c.428-.28 1.072-.726 2.686-1.853 1.621-1.133 3.186-1.78 4.881-2.059 1.152-.19 1.974-.213 3.814-.138l.02-1.907z"
})
), ze = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
})
), Oe = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M1.052 16.916l9.539 2.552a21.007 21.007 0 00.06 2.033l5.956 1.593a11.997 11.997 0 01-5.586.865l-.18-.016-.044-.004-.084-.009-.094-.01a11.605 11.605 0 01-.157-.02l-.107-.014-.11-.016a11.962 11.962 0 01-.32-.051l-.042-.008-.075-.013-.107-.02-.07-.015-.093-.019-.075-.016-.095-.02-.097-.023-.094-.022-.068-.017-.088-.022-.09-.024-.095-.025-.082-.023-.109-.03-.062-.02-.084-.025-.093-.028-.105-.034-.058-.019-.08-.026-.09-.031-.066-.024a6.293 6.293 0 01-.044-.015l-.068-.025-.101-.037-.057-.022-.08-.03-.087-.035-.088-.035-.079-.032-.095-.04-.063-.028-.063-.027a5.655 5.655 0 01-.041-.018l-.066-.03-.103-.047-.052-.024-.096-.046-.062-.03-.084-.04-.086-.044-.093-.047-.052-.027-.103-.055-.057-.03-.058-.032a6.49 6.49 0 01-.046-.026l-.094-.053-.06-.034-.051-.03-.072-.041-.082-.05-.093-.056-.052-.032-.084-.053-.061-.039-.079-.05-.07-.047-.053-.035a7.785 7.785 0 01-.054-.036l-.044-.03-.044-.03a6.066 6.066 0 01-.04-.028l-.057-.04-.076-.054-.069-.05-.074-.054-.056-.042-.076-.057-.076-.059-.086-.067-.045-.035-.064-.052-.074-.06-.089-.073-.046-.039-.046-.039a7.516 7.516 0 01-.043-.037l-.045-.04-.061-.053-.07-.062-.068-.06-.062-.058-.067-.062-.053-.05-.088-.084a13.28 13.28 0 01-.099-.097l-.029-.028-.041-.042-.069-.07-.05-.051-.05-.053a6.457 6.457 0 01-.168-.179l-.08-.088-.062-.07-.071-.08-.042-.049-.053-.062-.058-.068-.046-.056a7.175 7.175 0 01-.027-.033l-.045-.055-.066-.082-.041-.052-.05-.064-.02-.025a11.99 11.99 0 01-1.44-2.402zm-1.02-5.794l11.353 3.037a20.468 20.468 0 00-.469 2.011l10.817 2.894a12.076 12.076 0 01-1.845 2.005L.657 15.923l-.016-.046-.035-.104a11.965 11.965 0 01-.05-.153l-.007-.023a11.896 11.896 0 01-.207-.741l-.03-.126-.018-.08-.021-.097-.018-.081-.018-.09-.017-.084-.018-.094c-.026-.141-.05-.283-.071-.426l-.017-.118-.011-.083-.013-.102a12.01 12.01 0 01-.019-.161l-.005-.047a12.12 12.12 0 01-.034-2.145zm1.593-5.15l11.948 3.196c-.368.605-.705 1.231-1.01 1.875l11.295 3.022c-.142.82-.368 1.612-.668 2.365l-11.55-3.09L.124 10.26l.015-.1.008-.049.01-.067.015-.087.018-.098c.026-.148.056-.295.088-.442l.028-.124.02-.085.024-.097c.022-.09.045-.18.07-.268l.028-.102.023-.083.03-.1.025-.082.03-.096.026-.082.031-.095a11.896 11.896 0 011.01-2.232zm4.442-4.4L17.352 4.59a20.77 20.77 0 00-1.688 1.721l7.823 2.093c.267.852.442 1.744.513 2.665L2.106 5.213l.045-.065.027-.04.04-.055.046-.065.055-.076.054-.072.064-.086.05-.065.057-.073.055-.07.06-.074.055-.069.065-.077.054-.066.066-.077.053-.06.072-.082.053-.06.067-.074.054-.058.073-.078.058-.06.063-.067.168-.17.1-.098.059-.056.076-.071a12.084 12.084 0 012.272-1.677zM12.017 0h.097l.082.001.069.001.054.002.068.002.046.001.076.003.047.002.06.003.054.002.087.005.105.007.144.011.088.007.044.004.077.008.082.008.047.005.102.012.05.006.108.014.081.01.042.006.065.01.207.032.07.012.065.011.14.026.092.018.11.022.046.01.075.016.041.01L14.7.3l.042.01.065.015.049.012.071.017.096.024.112.03.113.03.113.032.05.015.07.02.078.024.073.023.05.016.05.016.076.025.099.033.102.036.048.017.064.023.093.034.11.041.116.045.1.04.047.02.06.024.041.018.063.026.04.018.057.025.11.048.1.046.074.035.075.036.06.028.092.046.091.045.102.052.053.028.049.026.046.024.06.033.041.022.052.029.088.05.106.06.087.051.057.034.053.032.096.059.088.055.098.062.036.024.064.041.084.056.04.027.062.042.062.043.023.017c.054.037.108.075.161.114l.083.06.065.048.056.043.086.065.082.064.04.03.05.041.086.069.079.065.085.071c.712.6 1.353 1.283 1.909 2.031L7.222.994l.062-.027.065-.028.081-.034.086-.035c.113-.045.227-.09.341-.131l.096-.035.093-.033.084-.03.096-.031c.087-.03.176-.058.264-.085l.091-.027.086-.025.102-.03.085-.023.1-.026L9.04.37l.09-.023.091-.022.095-.022.09-.02.098-.021.091-.02.095-.018.092-.018.1-.018.091-.016.098-.017.092-.014.097-.015.092-.013.102-.013.091-.012.105-.012.09-.01.105-.01c.093-.01.186-.018.28-.024l.106-.008.09-.005.11-.006.093-.004.1-.004.097-.002.099-.002.197-.002z"
})
), De = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M13.05 15.513h3.08c.214 0 .389.177.389.394v1.82a1.704 1.704 0 011.296 1.661c0 .943-.755 1.708-1.685 1.708-.931 0-1.686-.765-1.686-1.708 0-.807.554-1.484 1.297-1.662v-1.425h-2.69v4.663a.395.395 0 01-.188.338l-2.69 1.641a.385.385 0 01-.405-.002l-4.926-3.086a.395.395 0 01-.185-.336V16.3L2.196 14.87A.395.395 0 012 14.555L2 14.528V9.406c0-.14.073-.27.192-.34l2.465-1.462V4.448c0-.129.062-.249.165-.322l.021-.014L9.77 1.058a.385.385 0 01.407 0l2.69 1.675a.395.395 0 01.185.336V7.6h3.856V5.683a1.704 1.704 0 01-1.296-1.662c0-.943.755-1.708 1.685-1.708.931 0 1.685.765 1.685 1.708 0 .807-.553 1.484-1.296 1.662v2.311a.391.391 0 01-.389.394h-4.245v1.806h6.624a1.69 1.69 0 011.64-1.313c.93 0 1.685.764 1.685 1.707 0 .943-.754 1.708-1.685 1.708a1.69 1.69 0 01-1.64-1.314H13.05v1.937h4.953l.915 1.18a1.66 1.66 0 01.84-.227c.931 0 1.685.764 1.685 1.707 0 .943-.754 1.708-1.685 1.708-.93 0-1.685-.765-1.685-1.708 0-.346.102-.668.276-.937l-.724-.935H13.05v1.806zM9.973 1.856L7.93 3.122V6.09h-.778V3.604L5.435 4.669v2.945l2.11 1.36L9.712 7.61V5.334h.778V7.83c0 .136-.07.263-.184.335L7.963 9.638v2.081l1.422 1.009-.446.646-1.406-.998-1.53 1.005-.423-.66 1.605-1.055v-1.99L5.038 8.29l-2.26 1.34v1.676l1.972-1.189.398.677-2.37 1.429V14.3l2.166 1.258 2.27-1.368.397.677-2.176 1.311V19.3l1.876 1.175 2.365-1.426.398.678-2.017 1.216 1.918 1.201 2.298-1.403v-5.78l-4.758 2.893-.4-.675 5.158-3.136V3.289L9.972 1.856zM16.13 18.47a.913.913 0 00-.908.92c0 .507.406.918.908.918a.913.913 0 00.907-.919.913.913 0 00-.907-.92zm3.63-3.81a.913.913 0 00-.908.92c0 .508.406.92.907.92a.913.913 0 00.908-.92.913.913 0 00-.908-.92zm1.555-4.99a.913.913 0 00-.908.92c0 .507.407.918.908.918a.913.913 0 00.907-.919.913.913 0 00-.907-.92zM17.296 3.1a.913.913 0 00-.907.92c0 .508.406.92.907.92a.913.913 0 00.908-.92.913.913 0 00-.908-.92z"
})
), qe = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"
})
), Ue = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81"
})
), $e = (e) => x(
"svg",
{
viewBox: "0 0 96 96",
fill: "currentColor",
...e
},
x("path", {
d: "M33.338 6.544a4.118 4.118 0 0 0-3.943 2.879L4.252 83.917a4.14 4.14 0 0 0 3.908 5.538h20.787a4.443 4.443 0 0 0 3.41-2.9l5.014-14.777 17.91 16.705a4.237 4.237 0 0 0 2.666.972H81.24L71.024 60.261l-29.781.007L59.47 6.544z"
}),
x("path", {
d: "M66.595 9.364a4.145 4.145 0 0 0-3.928-2.82H33.648a4.146 4.146 0 0 1 3.928 2.82l25.184 74.62a4.146 4.146 0 0 1-3.928 5.472h29.02a4.146 4.146 0 0 0 3.927-5.472z"
})
), Be = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"
})
), je = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
...e
},
x("path", {
d: "M8.128 14.099c.592 0 1.77-.033 3.398-.703 1.897-.781 5.672-2.2 8.395-3.656 1.905-1.018 2.74-2.366 2.74-4.18A4.56 4.56 0 0018.1 1H7.549A6.55 6.55 0 001 7.55c0 3.617 2.745 6.549 7.128 6.549z"
}),
x("path", {
d: "M9.912 18.61a4.387 4.387 0 012.705-4.052l3.323-1.38c3.361-1.394 7.06 1.076 7.06 4.715a5.104 5.104 0 01-5.105 5.104l-3.597-.001a4.386 4.386 0 01-4.386-4.387z"
}),
x("path", {
d: "M4.776 14.962A3.775 3.775 0 001 18.738v.489a3.776 3.776 0 007.551 0v-.49a3.775 3.775 0 00-3.775-3.775z"
})
), We = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "currentColor",
width: "512",
height: "512",
...e
},
x("path", {
d: "M11.7 18q-2.4-.125-4.05-1.85T6 12q0-2.5 1.75-4.25T12 6q2.425 0 4.15 1.65T18 11.7l-2.1-.625q-.325-1.35-1.4-2.212T12 8q-1.65 0-2.825 1.175T8 12q0 1.425.863 2.5t2.212 1.4L11.7 18Zm1.2 3.95q-.225.05-.45.05H12q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12v.45q0 .225-.05.45L20 12.3V12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20h.3l.6 1.95Zm7.625.55l-4.275-4.275L15 22l-3-10l10 3l-3.775 1.25l4.275 4.275l-1.975 1.975Z"
})
), _e = (e) => x(
"svg",
{
viewBox: "0 0 41.336 41.336",
fill: "currentColor",
width: "800",
height: "800",
...e
},
x("path", {
d: "M36.335,5.668h-8.167V1.5c0-0.828-0.672-1.5-1.5-1.5h-12c-0.828,0-1.5,0.672-1.5,1.5v4.168H5.001c-1.104,0-2,0.896-2,2 s0.896,2,2,2h2.001v29.168c0,1.381,1.119,2.5,2.5,2.5h22.332c1.381,0,2.5-1.119,2.5-2.5V9.668h2.001c1.104,0,2-0.896,2-2 S37.438,5.668,36.335,5.668z M14.168,35.67c0,0.828-0.672,1.5-1.5,1.5s-1.5-0.672-1.5-1.5v-21c0-0.828,0.672-1.5,1.5-1.5 s1.5,0.672,1.5,1.5V35.67z M22.168,35.67c0,0.828-0.672,1.5-1.5,1.5s-1.5-0.672-1.5-1.5v-21c0-0.828,0.672-1.5,1.5-1.5 s1.5,0.672,1.5,1.5V35.67z M25.168,5.668h-9V3h9V5.668z M30.168,35.67c0,0.828-0.672,1.5-1.5,1.5s-1.5-0.672-1.5-1.5v-21 c0-0.828,0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5V35.67z"
})
), ie = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
...e
},
x("polyline", {
points: "20 6 9 17 4 12"
})
), se = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
...e
},
x("polyline", {
points: "6 9 12 15 18 9"
})
), Ge = (e) => x(
"svg",
{
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
...e
},
x("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
x("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
), ae = ee(void 0);
function Z() {
const e = te(ae);
if (!e)
throw new Error("Listbox components must be used within a Listbox");
return e;
}
function de({ value: e, onChange: t = () => {
}, children: o, className: r = "" }) {
const [a, s] = V(!1), n = F(null), h = F(null);
return O(() => {
function b(p) {
a && n.current && h.current && p.target instanceof Node && !n.current.contains(p.target) && !h.current.contains(p.target) && s(!1);
}
return document.addEventListener("mousedown", b), () => {
document.removeEventListener("mousedown", b);
};
}, [a]), O(() => {
function b(p) {
p.key === "Escape" && a && (s(!1), n.current?.focus(), p.stopPropagation());
}
return document.addEventListener("keydown", b), () => {
document.removeEventListener("keydown", b);
};
}, [a]), /* @__PURE__ */ i(
ae.Provider,
{
value: {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
value: e,
onChange: t,
isOpen: a,
setIsOpen: s,
buttonRef: n,
optionsRef: h
},
children: /* @__PURE__ */ i("div", { className: `relative ${r}`, children: o })
}
);
}
function le({
children: e,
className: t = "",
shouldOpenList: o,
...r
}) {
const { isOpen: a, setIsOpen: s, buttonRef: n } = Z();
return /* @__PURE__ */ i(
"button",
{
type: "button",
ref: n,
onClick: (p) => {
(o === void 0 || o()) && s(!a);
},
onKeyDown: (p) => {
p.key === "Enter" || p.key === " " ? (p.preventDefault(), s(!a)) : p.key === "ArrowDown" && (p.preventDefault(), s(!0));
},
"aria-expanded": a,
"aria-haspopup": "listbox",
className: `
leading-none flex items-center justify-between w-full
bg-transparent rounded
focus:text-foreground
transition-all duration-150
${t}
`,
...r,
children: e
}
);
}
function ce({ children: e, className: t = "", ...o }) {
const { isOpen: r, optionsRef: a, buttonRef: s } = Z(), [n, h] = V({ top: 0, left: 0 }), b = R(() => {
if (!s.current || !a.current)
return;
const p = s.current.getBoundingClientRect(), c = a.current.getBoundingClientRect().height, u = 8;
let v = p.top - c - u;
v < u && (v = p.bottom + u);
const C = p.left;
h({ top: v, left: C });
}, [s, a]);
return O(() => (r && b(), () => {
}), [r, b]), r ? /* @__PURE__ */ i(
"div",
{
style: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
background: "transparent",
zIndex: 1e3,
pointerEvents: "none"
},
children: /* @__PURE__ */ i(
"div",
{
ref: a,
role: "listbox",
className: `
absolute z-50 max-w-xs mt-1 py-1
bg-background border border-solid border-border rounded
max-h-60 overflow-auto
${t}
`,
style: {
top: n.top,
left: n.left,
pointerEvents: "auto"
},
...o,
children: e
}
)
}
) : null;
}
function Q({
value: e,
children: t,
disabled: o = !1,
className: r = "",
onClick: a,
...s
}) {
const { value: n, onChange: h, setIsOpen: b } = Z(), p = n === e;
return /* @__PURE__ */ i(
"div",
{
role: "option",
"aria-selected": p,
tabIndex: o ? -1 : 0,
onClick: (u) => {
o || (h(e), b(!1), a?.(u));
},
onKeyDown: (u) => {
o || ((u.key === "Enter" || u.key === " ") && (u.preventDefault(), h(e), b(!1), u.stopPropagation()), u.key === "Escape" && (u.preventDefault(), b(!1), u.stopPropagation()));
},
className: `
px-3 py-1 cursor-pointer select-none
${p ? "bg-primary text-white" : "text-foreground hover:bg-accent"}
${o ? "opacity-50 cursor-not-allowed" : "hover:bg-accent"}
transition-colors duration-150
${r}
`,
...s,
children: typeof t == "function" ? t({ selected: p }) : t
}
);
}
function Fe({ show: e = !0, children: t, className: o = "" }) {
if (e)
return /* @__PURE__ */ i("div", { className: `transition-all duration-150 ease-out ${o}`, children: t });
}
function He({
selectedItem: e,
onSelectionChange: t,
topOptions: o = [],
otherOptions: r = [],
className: a = "",
placeholder: s = "Select an option",
isLoading: n = !1,
disabled: h = !1
}) {
const b = e?.name ?? s, p = e?.icon ?? We, d = (c) => {
const u = c.name, v = c.icon;
return /* @__PURE__ */ i(
Q,
{
value: c,
className: "flex items-center justify-between gap-2",
children: ({ selected: C }) => /* @__PURE__ */ y(X, { children: [
/* @__PURE__ */ y("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
/* @__PURE__ */ i(v, { className: "w-4 h-4 flex-shrink-0 text-current" }),
/* @__PURE__ */ i("span", { className: "text-xs truncate", children: u })
] }),
C && /* @__PURE__ */ i(ie, { className: "w-3 h-3 flex-shrink-0" })
] })
},
`provider-${c.id}`
);
};
return /* @__PURE__ */ y(de, { value: e, onChange: t, className: a, children: [
/* @__PURE__ */ y(
le,
{
disabled: h || n,
className: "relative w-full text-foreground p-2 border border-border border-solid text-sm",
"aria-label": b,
children: [
/* @__PURE__ */ y("span", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
/* @__PURE__ */ i(p, { className: "w-4 h-4 flex-shrink-0 text-current" }),
/* @__PURE__ */ i("span", { className: "truncate pl-2", children: n ? "Loading..." : b })
] }),
/* @__PURE__ */ i(se, { className: "w-4 h-4 flex-shrink-0 text-muted", "aria-hidden": "true" })
]
}
),
/* @__PURE__ */ i(Fe, { children: /* @__PURE__ */ y(ce, { className: "py-1", children: [
o.length > 0 && /* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ i("div", { className: "px-3 py-1 text-xs font-medium uppercase tracking-wider text-muted bg-transparent", children: "Popular" }),
o.map((c) => d(c))
] }),
o.length > 0 && r.length > 0 && /* @__PURE__ */ i("div", { className: "border-t border-border my-1" }),
r.length > 0 && /* @__PURE__ */ y("div", { children: [
o.length > 0 && /* @__PURE__ */ i("div", { className: "px-3 py-1 text-xs font-medium uppercase tracking-wider text-muted bg-transparent", children: "Additional Options" }),
r.map((c) => d(c))
] }),
o.length === 0 && r.length === 0 && !n && /* @__PURE__ */ i("div", { className: "px-3 py-4 text-center text-sm text-muted", children: "No options available" }),
n && /* @__PURE__ */ i("div", { className: "px-3 py-4 text-center text-sm text-muted", children: /* @__PURE__ */ y("div", { className: "flex items-center justify-center gap-2", children: [
/* @__PURE__ */ i("div", { className: "w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
"Loading options..."
] }) })
] }) })
] });
}
function Ze({
providerRegistry: e,
storage: t,
onClose: o,
onProviderConfigured: r,
className: a = "",
onProviderDeleted: s
}) {
const [n, h] = V(), [b, p] = V({}), [d, c] = V(), [u, v] = V(!1), {
register: C,
handleSubmit: k,
formState: { errors: L, isValid: g, isSubmitting: m },
reset: f,
getFieldState: I
} = be({
mode: "onTouched"
}), E = () => {
const w = n?.metadata.id;
if (p({}), c(void 0), n === void 0) {
f();
return;
}
const A = n.configuration.fields.reduce(
(M, P) => (M[P.key] = "", M),
{}
);
w === n.metadata.id && f(A);
}, { topProviders: me, otherProviders: he } = j(() => {
const w = e.getAllProviders().map((P) => P.metadata), A = [], M = [];
for (const P of w)
e.topProviders.includes(P.id) ? A.push(P) : M.push(P);
return { topProviders: A, otherProviders: M };
}, [e]), fe = (w, A) => {
if (n === void 0)
return "Provider is required";
const M = n.configuration.validateField(w, A), P = A !== void 0 && A.trim().length > 0, { isDirty: B } = I(w);
if (M?.error !== void 0)
return P || B ? M.error : void 0;
M?.warning === void 0 && w in b && P ? p((G) => {
const { [w]: vt, ...ye } = G;
return ye;
}) : M?.warning !== void 0 && (P || B) && p((G) => ({ ...G, [w]: M.warning }));
}, ve = async (w) => {
E();
const A = await ne(t, w.id);
A !== void 0 && f(A), v(A !== void 0), h(e.getProvider(w.id));
}, ge = async (w) => {
const A = Object.fromEntries(
Object.entries(w).filter(([M, P]) => typeof P == "string")
);
if (n !== void 0)
try {
const M = n.validateCredentials(A);
if (!M.isValid) {
c(M.error ?? "An unknown error occurred");
return;
}
await Ve(t, n.metadata.id, A), r(n.metadata), f(), p({}), c(void 0), v(!1);
} catch (M) {
c(
`Error saving model configuration: ${M instanceof Error ? M.message : String(M)}`
);
}
};
return /* @__PURE__ */ i(
"div",
{
className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm",
onClick: o,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "add-model-title",
children: /* @__PURE__ */ i(
"div",
{
className: `transition-all duration-250 min-h-1/2
bg-background border border-border rounded-lg shadow-lg
max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto
${a}
`,
onClick: (w) => w.stopPropagation(),
children: /* @__PURE__ */ y("form", { onSubmit: k(ge), className: "p-6", children: [
/* @__PURE__ */ y("div", { className: "flex items-center justify-between mb-6", children: [
/* @__PURE__ */ i("h2", { id: "add-model-title", className: "text-md font-semibold text-foreground leading-none", children: "Add Provider" }),
/* @__PURE__ */ i(
"button",
{
type: "button",
onClick: o,
className: `text-muted p-1 bg-transparent border-none rounded
text-foreground hover:bg-accent
transition-colors duration-150`,
"aria-label": "Close dialog",
children: /* @__PURE__ */ i(
"svg",
{
className: "w-5 h-5",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
"aria-hidden": "true",
children: /* @__PURE__ */ i(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
)
}
)
}
)
] }),
/* @__PURE__ */ y("div", { className: "space-y-6", children: [
/* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ i("label", { className: "block text-sm font-medium text-foreground mb-2", children: "Provider" }),
/* @__PURE__ */ i(
He,
{
selectedItem: n?.metadata,
onSelectionChange: (w) => void ve(w),
topOptions: me,
otherOptions: he
}
),
/* @__PURE__ */ y("p", { className: "mt-1 text-xs text-muted", children: [
"Don't see your provider?",
" ",
/* @__PURE__ */ i(
"a",
{
href: "https://github.com/hbmartin/ai-sdk-react-model-picker/issues",
target: "_blank",
rel: "noopener noreferrer",
className: "text-primary hover:underline",
children: "Request one here"
}
)
] })
] }),
n?.configuration.fields.map(
({ key: w, label: A, placeholder: M, required: P }) => /* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ y("label", { className: "block text-sm font-medium text-foreground mb-2", children: [
A,
P === !0 ? " *" : ""
] }),
/* @__PURE__ */ i(
"input",
{
placeholder: M,
autoComplete: "off",
spellCheck: "false",
autoCorrect: "off",
autoCapitalize: "off",
type: "text",
className: "w-full px-3 py-2 border border-border border-solid rounded bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary",
...C(w, {
validate: (B) => fe(w, B)
})
}
),
L[w] && /* @__PURE__ */ i("p", { className: "mt-1 px-1 text-xs text-destructive", children: L[w].message }),
w in b && !(w in L) && /* @__PURE__ */ i("p", { className: "mt-1 px-1 text-xs text-warning", children: b[w] }),
w === "apiKey" && n.metadata.apiKeyUrl !== void 0 && !(w in b) && !(w in L) && /* @__PURE__ */ i("p", { className: "mt-1 text-xs text-muted", children: /* @__PURE__ */ i(
"a",
{
href: n.metadata.apiKeyUrl,
target: "_blank",
rel: "noopener noreferrer",
className: "text-primary hover:underline",
children: "Get your API key here"
}
) })
] }, w)
)
] }),
d !== void 0 && /* @__PURE__ */ i("p", { className: "my-2 px-1 text-sm text-destructive", children: d }),
/* @__PURE__ */ y("div", { className: "flex justify-between gap-2", children: [
n !== void 0 && u && /* @__PURE__ */ i(
"button",
{
type: "button",
disabled: m,
"aria-busy": m,
onClick: () => {
Ee(t, n.metadata.id), v(!1), E(), s(n.metadata.id);
},
className: `w-1/4
mt-8 px-4 py-2 text-sm bg-destructive text-white rounded
disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed
border border-border border-solid transition-colors
active:scale-95 transition-all duration-100 ease-in-out
`,
children: /* @__PURE__ */ i(_e, { className: "w-4 h-4 flex-shrink-0 text-current" })
}
),
/* @__PURE__ */ i(
"button",
{
type: "submit",
disabled: m || !g || n === void 0,
"aria-busy": m,
className: `
mt-8 px-4 py-2 text-sm bg-primary text-white rounded w-full font-medium
disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed
border border-border border-solid transition-colors
active:scale-95 transition-all duration-100 ease-in-out
`,
children: u ? (
// eslint-disable-next-line sonarjs/no-nested-conditional
m ? "Updating..." : "Update"
) : (
// eslint-disable-next-line sonarjs/no-nested-conditional
m ? "Connecting..." : "Connect"
)
}
)
] })
] })
}
)
}
);
}
function J({ model: e }) {
const t = e.provider.icon;
return /* @__PURE__ */ i(Q, { value: e.key, children: ({ selected: o }) => /* @__PURE__ */ y("div", { className: "flex w-full items-center justify-between", children: [
/* @__PURE__ */ y("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
/* @__PURE__ */ i(t, { className: "h-3 w-3 text-current flex-shrink-0", "aria-hidden": "true" }),
/* @__PURE__ */ y("span", { className: "line-clamp-1 text-xs", children: [
e.model.displayName,
/* @__PURE__ */ i("span", { className: "text-muted ml-1.5 text-[10px] italic", children: e.provider.name })
] })
] }),
/* @__PURE__ */ i(ie, { className: `h-3 w-3 flex-shrink-0 ${o ? "" : "invisible"}` })
] }) }, e.key);
}
function Qe({
optionOne: e,
optionTwo: t,
selected: o,
onClick: r,
className: a = "",
disabled: s = !1
}) {
return /* @__PURE__ */ y(
"div",
{
className: `
inline-flex items-center text-center cursor-pointer
border border-border bg-accent rounded-default
${s ? "opacity-50 cursor-not-allowed" : "hover:bg-opacity-80"}
${a}
`,
onClick: s ? void 0 : r,
onKeyDown: s ? void 0 : r,
onKeyUp: s ? void 0 : r,
role: "button",
tabIndex: s ? -1 : 0,
"aria-disabled": s,
"aria-pressed": o,
"aria-label": `Toggle between ${e} and ${t}`,
children: [
/* @__PURE__ */ i(
"div",
{
className: `
text-center px-3 py-2 rounded-default transition-all duration-200 ease-in-out
${o ? "bg-primary text-white shadow-sm" : "text-foreground hover:bg-opacity-60"}
`,
children: e
}
),
/* @__PURE__ */ i(
"div",
{
className: `
text-center px-3 py-2 rounded-default transition-all duration-200 ease-in-out
${o ? "text-foreground hover:bg-opacity-60" : "bg-primary text-white shadow-sm"}
`,
children: t
}
)
]
}
);
}
const Y = "__add_model__";
function bt({
storage: e,
providerRegistry: t,
onModelChange: o,
roles: r,
selectedRole: a,
onRoleChange: s,
className: n = "",
disabled: h = !1
}) {
const [b, p] = V(!1), {
recentlyUsedModels: d,
modelsWithCredentials: c,
selectedModel: u,
setSelectedProviderAndModel: v,
deleteProvider: C
} = Ke(e, t), k = (g) => {
if (g === Y) {
p(!0);
return;
}
const { providerId: m, modelId: f } = W(g);
if (f === u?.model.id && m === u.provider.id)
return;
const I = v(m, f);
I && o?.(I);
}, L = R(() => d.length === 0 && c.length === 0 ? (p(!0), !1) : !0, [d, c]);
return /* @__PURE__ */ y("div", { className: `ai-sdk-model-picker ${n}`, children: [
r && r.length > 0 && /* @__PURE__ */ i("div", { className: "mb-3", children: /* @__PURE__ */ i(
Qe,
{
optionOne: r[0]?.label || "Option 1",
optionTwo: r[1]?.label || "Option 2",
selected: a === r[0]?.id,
onClick: () => {
s && r.length > 1 && s(a === r[0].id ? r[1].id : r[0].id);
}
}
) }),
/* @__PURE__ */ i(de, { value: u?.key, onChange: k, children: /* @__PURE__ */ y("div", { className: "relative flex", children: [
/* @__PURE__ */ y(
le,
{
disabled: h,
className: "h-[18px] gap-1 border-none min-w-0 flex-1 text-muted hover:text-foreground py-0 px-1 text-xs",
shouldOpenList: L,
children: [
/* @__PURE__ */ i("span", { className: "line-clamp-1 break-all hover:brightness-110 text-left", children: u?.model.displayName ?? "Add Model Provider" }),
/* @__PURE__ */ i(
se,
{
className: "hidden h-2 w-2 flex-shrink-0 hover:brightness-110 min-[200px]:flex",
"aria-hidden": "true"
}
)
]
}
),
/* @__PURE__ */ y(ce, { className: "min-w-[160px]", children: [
/* @__PURE__ */ i("div", { className: "no-scrollbar max-h-[300px] mb-1", children: c.length === 0 && d.length === 0 ? /* @__PURE__ */ i("div", { className: "text-muted px-2 py-4 text-center text-xs", children: "No models configured" }) : /* @__PURE__ */ y(X, { children: [
/* @__PURE__ */ i("div", { className: "px-2 py-1 text-[10px] font-semibold text-muted uppercase", children: "Recently Used" }),
d.map((g) => /* @__PURE__ */ i(J, { model: g }, g.key)),
c.length > 0 && /* @__PURE__ */ i("div", { className: "px-2 py-1 text-[10px] font-semibold text-muted uppercase", children: "Available Models" }),
c.map((g) => /* @__PURE__ */ i(J, { model: g }, g.key))
] }) }),
/* @__PURE__ */ i("hr", { className: "bg-accent h-px border-0 m-0" }),
/* @__PURE__ */ i(Q, { value: Y, children: /* @__PURE__ */ y("div", { className: "text-muted flex items-center my-1 hover:text-foreground text-xs font-semibold", children: [
/* @__PURE__ */ i(Ge, { className: "mr-2 h-3 w-3" }),
"Add Model Provider"
] }) })
] })
] }) }),
b && /* @__PURE__ */ i(
Ze,
{
providerRegistry: t,
storage: e,
onClose: () => p(!1),
onProviderConfigured: (g) => {
const m = v(g.id);
p(!1), o?.(m);
},
onProviderDeleted: (g) => {
const m = C(g);
o?.(m);
}
}
)
] });
}
function Je() {
const [e, t] = V("light"), [o, r] = V("web");
return O(() => {
if (typeof document > "u")
return;
if (document.body.className.includes("vscode-")) {
r("vscode");
const h = document.body.className.includes("vscode-dark") ? "dark" : "light";
t(h);
return;
}
const a = document.body.dataset["vscode-theme-kind"] ?? document.body.dataset.vscodeThemeKind;
if (a?.includes("vscode-") === !0) {
r("vscode");
const h = a.includes("dark") ? "dark" : "light";
t(h);
return;
}
if (document.body.dataset.ide !== void 0 && document.body.dataset.ide === "jetbrains") {
r("jetbrains");
const h = document.body.classList.contains("dark") || document.documentElement.dataset.theme === "dark";
t(h ? "dark" : "light");
return;
}
r("web");
const s = globalThis.window.matchMedia("(prefers-color-scheme: dark)");
t(s.matches ? "dark" : "light");
const n = (h) => t(h.matches ? "dark" : "light");
return s.addEventListener("change", n), () => s.removeEventListener("change", n);
}, []), { theme: e, environment: o };
}
function Ye({ tag: e, className: t = "" }) {
const { environment: o } = Je(), r = "inline-flex items-center px-2 py-1 text-xs font-medium rounded-md", s = (o === "vscode" ? {
[N.RequiresApiKey]: "bg-vscode-error/20 text-vscode-error border border-vscode-error/30",
[N.Local]: "bg-vscode-success/20 text-vscode-success border border-vscode-success/30",
[N.Free]: "bg-vscode-warning/20 text-vscode-warning border border-vscode-warning/30",
[N.OpenSource]: "bg-vscode-button-bg/20 text-vscode-button-fg border border-vscode-button-bg/30",
[N.Vision]: "bg-vscode-text-link/20 text-vscode-text-link border border-vscode-text-link/30",
[N.Tools]: "bg-vscode-info/20 text-vscode-info border border-vscode-info/30",
[N.LongContext]: "bg-vscode-warning/15 text-vscode-warning border border-vscode-warning/25"
} : {
[N.RequiresApiKey]: "bg-destructive/10 text-destructive border border-destructive/20",
[N.Local]: "bg-success/10 text-success border border-success/20",
[N.Free]: "bg-warning/10 text-warning border border-warning/20",
[N.OpenSource]: "bg-primary/10 text-primary border border-primary/20",
[N.Vision]: "bg-primary/15 text-primary border border-primary/25",
[N.Tools]: "bg-accent/50 text-accent-foreground border border-border",
[N.LongContext]: "bg-warning/5 text-warning border border-warning/15"
})[e] || "bg-accent text-accent-foreground border border-border", n = [r, s, t].filter(Boolean).join(" ");
return /* @__PURE__ */ i("span", { className: n, title: `This model ${e.toLowerCase()}`, children: e });
}
const Xe = 5e4;
function kt({
model: e,
title: t,
description: o,
tags: r = [],
documentationUrl: a,
onClick: s,
disabled: n = !1,
className: h = ""
}) {
const [b, p] = V(!1), d = t ?? e.model.displayName, c = o ?? e.provider.description ?? "", u = a ?? e.provider.documentationUrl, v = [];
e.model.supportsVision === !0 && v.push(N.Vision), e.model.supportsTools === !0 && v.push(N.Tools), e.model.contextLength !== void 0 && e.model.contextLength > Xe && v.push(N.LongContext);
const C = [.../* @__PURE__ */ new Set([...r, ...v])];
return /* @__PURE__ */ i(
"div",
{
className: `
relative w-full border border-border rounded-default transition-all duration-500
${n ? "opacity-50 cursor-not-allowed" : b ? "border-primary bg-primary bg-opacity-10 cursor-pointer shadow-sm" : "hover:shadow-sm"}
${h}
`,
onMouseEnter: () => !n && p(!0),
onMouseLeave: () => !n && p(!1),
onClick: n ? void 0 : (k) => {
k.target.closest("a") || s?.(k, e);
},
children: /* @__PURE__ */ y("div", { className: "px-4 py-3", children: [
/* @__PURE__ */ y("div", { className: "flex items-center mb-3", children: [
/* @__PURE__ */ i("div", { className: "mr-3 w-6 h-6 flex-shrink-0", children: /* @__PURE__ */ i(e.provider.icon, { className: "w-6 h-6 text-foreground" }) }),
/* @__PURE__ */ i("h3", { className: "text-lg font-semibold text-foreground truncate", children: d })
] }),
C.length > 0 && /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-2 mb-3", children: C.map((k) => /* @__PURE__ */ i(Ye, { tag: k }, k)) }),
c && /* @__PURE__ */ i("p", { className: "text-muted text-sm mb-3 leading-relaxed", children: c }),
/* @__PURE__ */ y("div", { className: "flex flex-wrap gap-4 text-xs text-muted", children: [
e.model.maxTokens !== void 0 && /* @__PURE__ */ y("span", { children: [
"Max tokens: ",
e.model.maxTokens.toLocaleString()
] }),
e.model.contextLength !== void 0 && /* @__PURE__ */ y("span", { children: [
"Context: ",
e.model.contextLength.toLocaleString()
] })
] }),
typeof u == "string" && u.trim() !== "" && /* @__PURE__ */ i(
"a",
{
href: u,
target: "_blank",
rel: "noopener noreferrer",
className: `
absolute top-3 right-3 p-1.5
text-muted hover:text-foreground
transition-colors duration-200
`,
title: "Read the documentation",
"aria-label": "Read the documentation",
onClick: (k) => k.stopPropagation(),
children: /* @__PURE__ */ y(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
"aria-hidden": "true",
children: [
/* @__PURE__ */ i("path", { d: "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" }),
/* @__PURE__ */ i("path", { d: "M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" })
]
}
)
}
)
] })
}
);
}
const ue = ee(void 0);
function et(e, t) {
switch (t.type) {
case "SET_MODEL":
return { ...e, selectedModelId: t.payload };
case "SET_ROLE":
return { ...e, selectedRole: t.payload };
case "SET_LOADING":
return { ...e, isLoading: t.payload };
case "SET_ERROR":
return { ...e, error: t.payload ?? void 0 };
default:
return e;
}
}
function wt({
children: e,
providerRegistry: t,
storage: o,
initialModelId: r,
initialRole: a,
roles: s,
theme: n,
onConfigureProvider: h,
onMissingConfiguration: b
}) {
const [p, d] = xe(et, {
selectedModelId: r ?? void 0,
selectedRole: a,
isLoading: !1,
error: void 0
}), c = j(() => t.getAllModels(), [t]), u = j(() => {
if (p.selectedModelId !== void 0)
return c.find((m) => m.model.id === p.selectedModelId) ?? void 0;
}, [p.selectedModelId, c]), v = R((m) => {
d({ type: "SET_MODEL", payload: m.model.id });
}, []), C = R((m) => {
d({ type: "SET_ROLE", payload: m });
}, []), k = R((m) => {
d({ type: "SET_LOADING", payload: m });
}, []), L = R((m) => {
d({ type: "SET_ERROR", payload: m });
}, []), g = j(
() => ({
state: p,
selectedModel: u,
allModels: c,
providerRegistry: t,
storage: o,
roles: s,
theme: n,
selectModel: v,
selectRole: C,
setLoading: k,
setError: L,
onConfigureProvider: h,
onMissingConfiguration: b
}),
[
p,
u,
c,
t,
o,
s,
n,
v,
C,
k,
L,
h,
b
]
);
return x(ue.Provider, { value: g }, e);
}
function _() {
const e = te(ue);
if (!e)
throw new Error("useModelPicker must be used within a ModelPickerProvider");
return e;
}
function Ct() {
const { selectedModel: e } = _();
return e;
}
function Nt() {
const { allModels: e } = _();
return e;
}
function Tt() {
const { state: e, selectedModel: t, selectModel: o, selectRole: r, setLoading: a, setError: s } = _();
return {
selectedModelId: e.selectedModelId,
selectedRole: e.selectedRole,
selectedModel: t,
isLoading: e.isLoading,
error: e.error,
selectModel: o,
selectRole: r,
setLoading: a,
setError: s
};
}
function Mt() {
const { providerRegistry: e, storage: t, onConfigureProvider: o, onMissingConfiguration: r } = _(), a = R(
(n) => {
o(n);
},
[o]
), s = R(
(n) => {
r(n);
},
[r]
);
return {
providerRegistry: e,
storage: t,
configureProvider: a,
handleMissingConfiguration: s
};
}
function Lt() {
const [e, t] = V(() => {
if (typeof document > "u")
return {
isVSCodeEnv: !1,
themeKind: void 0,
isJetBrainsEnv: !1
};
const r = typeof globalThis.window.acquireVsCodeApi == "function", a = document.body.dataset.ide === "jetbrains";
let s;
if (r) {
const n = document.body.className;
if (n.includes("vscode-dark"))
s = "vscode-dark";
else if (n.includes("vscode-light"))
s = "vscode-light";
else if (n.includes("vscode-high-contrast"))
s = "vscode-high-contrast";
else {
const h = document.body.dataset.vscodeThemeKind;
(