reigncode-app 1.3.2

package/src/components/dialog-select-model-unpaid.tsx

@@ -0,0 +1,137 @@
+import { Button } from "@reign-labs/ui/button"
+import { useDialog } from "@reign-labs/ui/context/dialog"
+import { Dialog } from "@reign-labs/ui/dialog"
+import { List, type ListRef } from "@reign-labs/ui/list"
+import { ProviderIcon } from "@reign-labs/ui/provider-icon"
+import { Tag } from "@reign-labs/ui/tag"
+import { Tooltip } from "@reign-labs/ui/tooltip"
+import { type Component, Show } from "solid-js"
+import { useLocal } from "@/context/local"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+import { DialogSelectProvider } from "./dialog-select-provider"
+import { ModelTooltip } from "./model-tooltip"
+import { useLanguage } from "@/context/language"
+
+type ModelState = ReturnType<typeof useLocal>["model"]
+
+export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
+  const model = props.model ?? useLocal().model
+  const dialog = useDialog()
+  const providers = useProviders()
+  const language = useLanguage()
+
+  let listRef: ListRef | undefined
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") return
+    listRef?.onKeyDown(e)
+  }
+
+  return (
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
+    >
+      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
+        <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
+        <List
+          class="[&_[data-slot=list-scroll]]:overflow-visible"
+          ref={(ref) => (listRef = ref)}
+          items={model.list}
+          current={model.current()}
+          key={(x) => `${x.provider.id}:${x.id}`}
+          itemWrapper={(item, node) => (
+            <Tooltip
+              class="w-full"
+              placement="right-start"
+              gutter={12}
+              value={
+                <ModelTooltip
+                  model={item}
+                  latest={item.latest}
+                  free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
+                />
+              }
+            >
+              {node}
+            </Tooltip>
+          )}
+          onSelect={(x) => {
+            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+              recent: true,
+            })
+            dialog.close()
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center gap-x-2.5">
+              <span>{i.name}</span>
+              <Tag>{language.t("model.tag.free")}</Tag>
+              <Show when={i.latest}>
+                <Tag>{language.t("model.tag.latest")}</Tag>
+              </Show>
+            </div>
+          )}
+        </List>
+      </div>
+      <div class="px-1.5 pb-1.5">
+        <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
+          <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
+            <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
+            <div class="w-full">
+              <List
+                class="w-full px-0"
+                key={(x) => x?.id}
+                items={providers.popular}
+                activeIcon="plus-small"
+                sortBy={(a, b) => {
+                  if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+                    return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+                  return a.name.localeCompare(b.name)
+                }}
+                onSelect={(x) => {
+                  if (!x) return
+                  dialog.show(() => <DialogConnectProvider provider={x.id} />)
+                }}
+              >
+                {(i) => (
+                  <div class="w-full flex items-center gap-x-3">
+                    <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+                    <span>{i.name}</span>
+                    <Show when={i.id === "opencode"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
+                    </Show>
+                    <Show when={i.id === "opencode"}>
+                      <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                    </Show>
+                    <Show when={i.id === "opencode-go"}>
+                      <>
+                        <div class="text-14-regular text-text-weak">
+                          {language.t("dialog.provider.opencodeGo.tagline")}
+                        </div>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </>
+                    </Show>
+                    <Show when={i.id === "anthropic"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
+                    </Show>
+                  </div>
+                )}
+              </List>
+              <Button
+                variant="ghost"
+                class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
+                icon="dot-grid"
+                onClick={() => {
+                  dialog.show(() => <DialogSelectProvider />)
+                }}
+              >
+                {language.t("dialog.provider.viewAll")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

package/src/components/dialog-select-model.tsx

@@ -0,0 +1,220 @@
+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 "@reign-labs/ui/context/dialog"
+import { popularProviders } from "@/hooks/use-providers"
+import { Button } from "@reign-labs/ui/button"
+import { IconButton } from "@reign-labs/ui/icon-button"
+import { Tag } from "@reign-labs/ui/tag"
+import { Dialog } from "@reign-labs/ui/dialog"
+import { List } from "@reign-labs/ui/list"
+import { Tooltip } from "@reign-labs/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<typeof useLocal>["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 (
+    <List
+      class={`flex-1 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
+      search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true, action: props.action }}
+      emptyMessage={language.t("dialog.model.empty")}
+      key={(x) => `${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) => (
+        <Tooltip
+          class="w-full"
+          placement="right-start"
+          gutter={12}
+          value={<ModelTooltip model={item} latest={item.latest} free={isFree(item.provider.id, item.cost)} />}
+        >
+          {node}
+        </Tooltip>
+      )}
+      onSelect={(x) => {
+        model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+          recent: true,
+        })
+        props.onSelect()
+      }}
+    >
+      {(i) => (
+        <div class="w-full flex items-center gap-x-2 text-13-regular">
+          <span class="truncate">{i.name}</span>
+          <Show when={isFree(i.provider.id, i.cost)}>
+            <Tag>{language.t("model.tag.free")}</Tag>
+          </Show>
+          <Show when={i.latest}>
+            <Tag>{language.t("model.tag.latest")}</Tag>
+          </Show>
+        </div>
+      )}
+    </List>
+  )
+}
+
+type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "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(() => <DialogManageModels />)
+  }
+
+  const handleConnectProvider = () => {
+    setStore("open", false)
+    dialog.show(() => <DialogSelectProvider />)
+  }
+  const language = useLanguage()
+
+  return (
+    <Kobalte
+      open={store.open}
+      onOpenChange={(next) => {
+        if (next) setStore("dismiss", null)
+        setStore("open", next)
+      }}
+      modal={false}
+      placement="top-start"
+      gutter={4}
+    >
+      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
+        {props.children}
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content
+          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          onEscapeKeyDown={(event) => {
+            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)
+          }}
+        >
+          <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
+          <ModelList
+            provider={props.provider}
+            model={props.model}
+            onSelect={() => setStore("open", false)}
+            class="p-1"
+            action={
+              <div class="flex items-center gap-1">
+                <Tooltip placement="top" value={language.t("command.provider.connect")}>
+                  <IconButton
+                    icon="plus-small"
+                    variant="ghost"
+                    iconSize="normal"
+                    class="size-6"
+                    aria-label={language.t("command.provider.connect")}
+                    onClick={handleConnectProvider}
+                  />
+                </Tooltip>
+                <Tooltip placement="top" value={language.t("dialog.model.manage")}>
+                  <IconButton
+                    icon="sliders"
+                    variant="ghost"
+                    iconSize="normal"
+                    class="size-6"
+                    aria-label={language.t("dialog.model.manage")}
+                    onClick={handleManage}
+                  />
+                </Tooltip>
+              </div>
+            }
+          />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
+
+export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+
+  return (
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      action={
+        <Button
+          class="h-7 -my-1 text-14-medium"
+          icon="plus-small"
+          tabIndex={-1}
+          onClick={() => dialog.show(() => <DialogSelectProvider />)}
+        >
+          {language.t("command.provider.connect")}
+        </Button>
+      }
+    >
+      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <Button
+        variant="ghost"
+        class="ml-3 mt-5 mb-6 text-text-base self-start"
+        onClick={() => dialog.show(() => <DialogManageModels />)}
+      >
+        {language.t("dialog.model.manage")}
+      </Button>
+    </Dialog>
+  )
+}

package/src/components/dialog-select-provider.tsx

@@ -0,0 +1,86 @@
+import { Component, Show } from "solid-js"
+import { useDialog } from "@reign-labs/ui/context/dialog"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { Dialog } from "@reign-labs/ui/dialog"
+import { List } from "@reign-labs/ui/list"
+import { Tag } from "@reign-labs/ui/tag"
+import { ProviderIcon } from "@reign-labs/ui/provider-icon"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+import { useLanguage } from "@/context/language"
+import { DialogCustomProvider } from "./dialog-custom-provider"
+
+const CUSTOM_ID = "_custom"
+
+export const DialogSelectProvider: Component = () => {
+  const dialog = useDialog()
+  const providers = useProviders()
+  const language = useLanguage()
+
+  const popularGroup = () => language.t("dialog.provider.group.popular")
+  const otherGroup = () => language.t("dialog.provider.group.other")
+  const customLabel = () => language.t("settings.providers.tag.custom")
+  const note = (id: string) => {
+    if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
+    if (id === "openai") return language.t("dialog.provider.openai.note")
+    if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
+    if (id === "opencode-go") return language.t("dialog.provider.opencodeGo.tagline")
+  }
+
+  return (
+    <Dialog title={language.t("command.provider.connect")} transition>
+      <List
+        search={{ placeholder: language.t("dialog.provider.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.provider.empty")}
+        activeIcon="plus-small"
+        key={(x) => x?.id}
+        items={() => {
+          language.locale()
+          return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all()]
+        }}
+        filterKeys={["id", "name"]}
+        groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
+        sortBy={(a, b) => {
+          if (a.id === CUSTOM_ID) return -1
+          if (b.id === CUSTOM_ID) return 1
+          if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+            return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+          return a.name.localeCompare(b.name)
+        }}
+        sortGroupsBy={(a, b) => {
+          const popular = popularGroup()
+          if (a.category === popular && b.category !== popular) return -1
+          if (b.category === popular && a.category !== popular) return 1
+          return 0
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          if (x.id === CUSTOM_ID) {
+            dialog.show(() => <DialogCustomProvider back="providers" />)
+            return
+          }
+          dialog.show(() => <DialogConnectProvider provider={x.id} />)
+        }}
+      >
+        {(i) => (
+          <div class="px-1.25 w-full flex items-center gap-x-3">
+            <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+            <span>{i.name}</span>
+            <Show when={i.id === "opencode"}>
+              <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
+            </Show>
+            <Show when={i.id === CUSTOM_ID}>
+              <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+            </Show>
+            <Show when={i.id === "opencode"}>
+              <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+            </Show>
+            <Show when={note(i.id)}>{(value) => <div class="text-14-regular text-text-weak">{value()}</div>}</Show>
+            <Show when={i.id === "opencode-go"}>
+              <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+            </Show>
+          </div>
+        )}
+      </List>
+    </Dialog>
+  )
+}