import { Popover as Kobalte } from "@kobalte/core/popover" import { Component, ComponentProps, createMemo, JSX, Show, ValidComponent } from "solid-js" import { createStore } from "solid-js/store" import { useLocal } from "@/context/local" import { useDialog } from "@opencode-ai/ui/context/dialog" import { popularProviders } from "@/hooks/use-providers" import { Button } from "@opencode-ai/ui/button" import { IconButton } from "@opencode-ai/ui/icon-button" import { Tag } from "@opencode-ai/ui/tag" import { Dialog } from "@opencode-ai/ui/dialog" import { List } from "@opencode-ai/ui/list" import { Tooltip } from "@opencode-ai/ui/tooltip" import { DialogSelectProvider } from "./dialog-select-provider" import { DialogManageModels } from "./dialog-manage-models" import { ModelTooltip } from "./model-tooltip" import { useLanguage } from "@/context/language" const isFree = (provider: string, cost: { input: number } | undefined) => provider === "opencode" && (!cost || cost.input === 0) type ModelState = ReturnType["model"] const ModelList: Component<{ provider?: string class?: string onSelect: () => void action?: JSX.Element model?: ModelState }> = (props) => { const model = props.model ?? useLocal().model const language = useLanguage() const models = createMemo(() => model .list() .filter((m) => model.visible({ modelID: m.id, providerID: m.provider.id })) .filter((m) => (props.provider ? m.provider.id === props.provider : true)), ) return ( `${x.provider.id}:${x.id}`} items={models} current={model.current()} filterKeys={["provider.name", "name", "id"]} sortBy={(a, b) => a.name.localeCompare(b.name)} groupBy={(x) => x.provider.name} sortGroupsBy={(a, b) => { const aProvider = a.items[0].provider.id const bProvider = b.items[0].provider.id if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1 if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1 return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider) }} itemWrapper={(item, node) => ( } > {node} )} onSelect={(x) => { model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true, }) props.onSelect() }} > {(i) => (

{i.name} {language.t("model.tag.free")} {language.t("model.tag.latest")}

)} ) } type ModelSelectorTriggerProps = Omit, "as" | "ref"> export function ModelSelectorPopover(props: { provider?: string model?: ModelState children?: JSX.Element triggerAs?: ValidComponent triggerProps?: ModelSelectorTriggerProps }) { const [store, setStore] = createStore<{ open: boolean dismiss: "escape" | "outside" | null }>({ open: false, dismiss: null, }) const dialog = useDialog() const handleManage = () => { setStore("open", false) dialog.show(() => ) } const handleConnectProvider = () => { setStore("open", false) dialog.show(() => ) } const language = useLanguage() return ( { if (next) setStore("dismiss", null) setStore("open", next) }} modal={false} placement="top-start" gutter={4} > {props.children} { setStore("dismiss", "escape") setStore("open", false) event.preventDefault() event.stopPropagation() }} onPointerDownOutside={() => { setStore("dismiss", "outside") setStore("open", false) }} onFocusOutside={() => { setStore("dismiss", "outside") setStore("open", false) }} onCloseAutoFocus={(event) => { if (store.dismiss === "outside") event.preventDefault() setStore("dismiss", null) }} > setStore("open", false)} class="p-1" action={

} /> ) } export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => { const dialog = useDialog() const language = useLanguage() return ( ) }