openAgent

1import { createMemo, createSignal } from "solid-js"
2import { useLocal } from "../context/local"
3import { map, pipe, flatMap, entries, filter, sortBy, take } from "remeda"
4import { DialogSelect } from "../ui/dialog-select"
5import { useDialog } from "../ui/dialog"
6import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
7import { DialogVariant } from "./dialog-variant"
8import * as fuzzysort from "fuzzysort"
9import { useConnected } from "./use-connected"
10import { useSync } from "../context/sync"
11 
12export function DialogModel(props: { providerID?: string }) {
13  const local = useLocal()
14  const sync = useSync()
15  const dialog = useDialog()
16  const [query, setQuery] = createSignal("")
17 
18  const connected = useConnected()
19  const providers = createDialogProviderOptions()
20 
21  const showExtra = createMemo(() => connected() && !props.providerID)
22 
23  const options = createMemo(() => {
24    const needle = query().trim()
25    const showSections = showExtra() && needle.length === 0
26    const favorites = connected() ? local.model.favorite() : []
27    const recents = local.model.recent()
28 
29    function toOptions(items: typeof favorites, category: string) {
30      if (!showSections) return []
31      return items.flatMap((item) => {
32        const provider = sync.data.provider.find((provider) => provider.id === item.providerID)
33        if (!provider) return []
34        const model = provider.models[item.modelID]
35        if (!model) return []
36        return [
37          {
38            key: item,
39            value: { providerID: provider.id, modelID: model.id },
40            title: model.name ?? item.modelID,
41            description: provider.name,
42            category,
43            disabled: provider.id === "opencode" && model.id.includes("-nano"),
44            footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
45            onSelect: () => {
46              onSelect(provider.id, model.id)
47            },
48          },
49        ]
50      })
51    }
52 
53    const favoriteOptions = toOptions(favorites, "Favorites")
54    const recentOptions = toOptions(
55      recents.filter(
56        (item) => !favorites.some((fav) => fav.providerID === item.providerID && fav.modelID === item.modelID),
57      ),
58      "Recent",
59    )
60 
61    const providerOptions = pipe(
62      sync.data.provider,
63      sortBy(
64        (provider) => provider.id !== "opencode",
65        (provider) => provider.name,
66      ),
67      flatMap((provider) =>
68        pipe(
69          provider.models,
70          entries(),
71          filter(([_, info]) => info.status !== "deprecated"),
72          filter(([_, info]) => (props.providerID ? info.providerID === props.providerID : true)),
73          map(([model, info]) => ({
74            value: { providerID: provider.id, modelID: model },
75            title: info.name ?? model,
76            releaseDate: info.release_date,
77            description: favorites.some((item) => item.providerID === provider.id && item.modelID === model)
78              ? "(Favorite)"
79              : undefined,
80            category: connected() ? provider.name : undefined,
81            disabled: provider.id === "opencode" && model.includes("-nano"),
82            footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
83            onSelect() {
84              onSelect(provider.id, model)
85            },
86          })),
87          filter((option) => {
88            if (!showSections) return true
89            if (
90              favorites.some(
91                (item) => item.providerID === option.value.providerID && item.modelID === option.value.modelID,
92              )
93            )
94              return false
95            if (
96              recents.some(
97                (item) => item.providerID === option.value.providerID && item.modelID === option.value.modelID,
98              )
99            )
100              return false
101            return true
102          }),
103          (options) => sortModelOptions(options, props.providerID !== undefined),
104        ),
105      ),
106    )
107 
108    const popularProviders = !connected()
109      ? pipe(
110          providers(),
111          map((option) => ({
112            ...option,
113            category: "Popular providers",
114          })),
115          take(6),
116        )
117      : []
118 
119    if (needle) {
120      return [
121        ...sortModelOptions(
122          fuzzysort.go(needle, providerOptions, { keys: ["title", "category"] }).map((x) => x.obj),
123          false,
124        ),
125        ...fuzzysort.go(needle, popularProviders, { keys: ["title"] }).map((x) => x.obj),
126      ]
127    }
128 
129    return [...favoriteOptions, ...recentOptions, ...providerOptions, ...popularProviders]
130  })
131 
132  const provider = createMemo(() =>
133    props.providerID ? sync.data.provider.find((item) => item.id === props.providerID) : null,
134  )
135 
136  const title = createMemo(() => {
137    const value = provider()
138    if (!value) return "Select model"
139    return value.name
140  })
141 
142  function onSelect(providerID: string, modelID: string) {
143    local.model.set({ providerID, modelID }, { recent: true })
144    const list = local.model.variant.list()
145    const cur = local.model.variant.selected()
146    if (cur === "default" || (cur && list.includes(cur))) {
147      dialog.clear()
148      return
149    }
150    if (list.length > 0) {
151      dialog.replace(() => <DialogVariant />)
152      return
153    }
154    dialog.clear()
155  }
156 
157  return (
158    <DialogSelect<ReturnType<typeof options>[number]["value"]>
159      options={options()}
160      actions={[
161        {
162          command: "model.dialog.provider",
163          title: connected() ? "Connect provider" : "View all providers",
164          onTrigger() {
165            dialog.replace(() => <DialogProvider />)
166          },
167        },
168        {
169          command: "model.dialog.favorite",
170          title: "Favorite",
171          hidden: !connected(),
172          onTrigger: (option) => {
173            local.model.toggleFavorite(option.value as { providerID: string; modelID: string })
174          },
175        },
176      ]}
177      onFilter={setQuery}
178      flat={true}
179      skipFilter={true}
180      title={title()}
181      current={local.model.current()}
182    />
183  )
184}
185 
186export function sortModelOptions<T extends { footer?: string; releaseDate: string | number; title: string }>(
187  options: T[],
188  newestFirst: boolean,
189) {
190  if (newestFirst) return sortBy(options, [(option) => option.releaseDate, "desc"], (option) => option.title)
191  return sortBy(
192    options,
193    (option) => option.footer !== "Free",
194    [(option) => option.releaseDate, "desc"],
195    (option) => option.title,
196  )
197}
198