diff --git a/packages/desktop/src/components/dialog-connect-provider.tsx b/packages/desktop/src/components/dialog-connect-provider.tsx index 0d6737815..789a5d3b7 100644 --- a/packages/desktop/src/components/dialog-connect-provider.tsx +++ b/packages/desktop/src/components/dialog-connect-provider.tsx @@ -1,24 +1,24 @@ +import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client" +import { Button } from "@opencode-ai/ui/button" +import { useDialog } from "@opencode-ai/ui/context/dialog" +import { Dialog } from "@opencode-ai/ui/dialog" +import { Icon } from "@opencode-ai/ui/icon" +import { IconButton } from "@opencode-ai/ui/icon-button" +import type { IconName } from "@opencode-ai/ui/icons/provider" +import { List, type ListRef } from "@opencode-ai/ui/list" +import { ProviderIcon } from "@opencode-ai/ui/provider-icon" +import { Spinner } from "@opencode-ai/ui/spinner" +import { TextField } from "@opencode-ai/ui/text-field" +import { showToast } from "@opencode-ai/ui/toast" +import { iife } from "@opencode-ai/util/iife" import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js" import { createStore, produce } from "solid-js/store" -import { useDialog } from "@opencode-ai/ui/context/dialog" -import { useGlobalSync } from "@/context/global-sync" -import { useGlobalSDK } from "@/context/global-sdk" -import { usePlatform } from "@/context/platform" -import { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client" -import { Dialog } from "@opencode-ai/ui/dialog" -import { List, ListRef } from "@opencode-ai/ui/list" -import { Button } from "@opencode-ai/ui/button" -import { IconButton } from "@opencode-ai/ui/icon-button" -import { TextField } from "@opencode-ai/ui/text-field" -import { Spinner } from "@opencode-ai/ui/spinner" -import { Icon } from "@opencode-ai/ui/icon" -import { showToast } from "@opencode-ai/ui/toast" -import { ProviderIcon } from "@opencode-ai/ui/provider-icon" -import { IconName } from "@opencode-ai/ui/icons/provider" -import { iife } from "@opencode-ai/util/iife" import { Link } from "@/components/link" -import { DialogSelectProvider } from "./dialog-select-provider" +import { useGlobalSDK } from "@/context/global-sdk" +import { useGlobalSync } from "@/context/global-sync" +import { usePlatform } from "@/context/platform" import { DialogSelectModel } from "./dialog-select-model" +import { DialogSelectProvider } from "./dialog-select-provider" export function DialogConnectProvider(props: { provider: string }) { const dialog = useDialog() @@ -154,7 +154,9 @@ export function DialogConnectProvider(props: { provider: string }) {
Select login method for {provider().name}.
(listRef = ref)} + ref={(ref) => { + listRef = ref + }} items={methods} key={(m) => m?.label} onSelect={async (method, index) => { @@ -163,7 +165,7 @@ export function DialogConnectProvider(props: { provider: string }) { }} > {(i) => ( -
+
@@ -175,7 +177,7 @@ export function DialogConnectProvider(props: { provider: string }) {
-
+
Authorization in progress...
@@ -183,7 +185,7 @@ export function DialogConnectProvider(props: { provider: string }) {
-
+
Authorization failed: {store.error}
diff --git a/packages/desktop/src/components/dialog-manage-models.tsx b/packages/desktop/src/components/dialog-manage-models.tsx index 5765a8e1a..66d125288 100644 --- a/packages/desktop/src/components/dialog-manage-models.tsx +++ b/packages/desktop/src/components/dialog-manage-models.tsx @@ -1,16 +1,15 @@ -import { Component } from "solid-js" -import { useLocal } from "@/context/local" -import { popularProviders } from "@/hooks/use-providers" import { Dialog } from "@opencode-ai/ui/dialog" import { List } from "@opencode-ai/ui/list" import { Switch } from "@opencode-ai/ui/switch" +import type { Component } from "solid-js" +import { useLocal } from "@/context/local" +import { popularProviders } from "@/hooks/use-providers" export const DialogManageModels: Component = () => { const local = useLocal() return ( `${x?.provider?.id}:${x?.id}`} @@ -27,16 +26,24 @@ export const DialogManageModels: Component = () => { }} onSelect={(x) => { if (!x) return - const visible = local.model.visible({ modelID: x.id, providerID: x.provider.id }) + const visible = local.model.visible({ + modelID: x.id, + providerID: x.provider.id, + }) local.model.setVisibility({ modelID: x.id, providerID: x.provider.id }, !visible) }} > {(i) => ( -
+
{i.name}
e.stopPropagation()}> { local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked) }} diff --git a/packages/desktop/src/components/dialog-select-file.tsx b/packages/desktop/src/components/dialog-select-file.tsx index 61c518719..b27afdc8b 100644 --- a/packages/desktop/src/components/dialog-select-file.tsx +++ b/packages/desktop/src/components/dialog-select-file.tsx @@ -1,12 +1,12 @@ -import { useLocal } from "@/context/local" -import { Dialog } from "@opencode-ai/ui/dialog" -import { List } from "@opencode-ai/ui/list" -import { FileIcon } from "@opencode-ai/ui/file-icon" -import { getDirectory, getFilename } from "@opencode-ai/util/path" -import { useLayout } from "@/context/layout" import { useDialog } from "@opencode-ai/ui/context/dialog" +import { Dialog } from "@opencode-ai/ui/dialog" +import { FileIcon } from "@opencode-ai/ui/file-icon" +import { List } from "@opencode-ai/ui/list" +import { getDirectory, getFilename } from "@opencode-ai/util/path" import { useParams } from "@solidjs/router" import { createMemo } from "solid-js" +import { useLayout } from "@/context/layout" +import { useLocal } from "@/context/local" export function DialogSelectFile() { const layout = useLayout() @@ -18,7 +18,6 @@ export function DialogSelectFile() { return ( {(i) => (
-
+
diff --git a/packages/desktop/src/components/dialog-select-model-unpaid.tsx b/packages/desktop/src/components/dialog-select-model-unpaid.tsx index 77e493d3c..24ec8092d 100644 --- a/packages/desktop/src/components/dialog-select-model-unpaid.tsx +++ b/packages/desktop/src/components/dialog-select-model-unpaid.tsx @@ -1,15 +1,15 @@ -import { Component, onCleanup, onMount, Show } from "solid-js" -import { useLocal } from "@/context/local" -import { useDialog } from "@opencode-ai/ui/context/dialog" -import { popularProviders, useProviders } from "@/hooks/use-providers" import { Button } from "@opencode-ai/ui/button" -import { Tag } from "@opencode-ai/ui/tag" +import { useDialog } from "@opencode-ai/ui/context/dialog" import { Dialog } from "@opencode-ai/ui/dialog" -import { List, ListRef } from "@opencode-ai/ui/list" +import type { IconName } from "@opencode-ai/ui/icons/provider" +import { List, type ListRef } from "@opencode-ai/ui/list" import { ProviderIcon } from "@opencode-ai/ui/provider-icon" -import { IconName } from "@opencode-ai/ui/icons/provider" -import { DialogSelectProvider } from "./dialog-select-provider" +import { Tag } from "@opencode-ai/ui/tag" +import { type Component, onCleanup, onMount, 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" export const DialogSelectModelUnpaid: Component = () => { const local = useLocal() @@ -64,7 +64,7 @@ export const DialogSelectModelUnpaid: Component = () => {
Add more models from popular providers
x?.id} items={providers.popular} activeIcon="plus-small" @@ -79,17 +79,8 @@ export const DialogSelectModelUnpaid: Component = () => { }} > {(i) => ( -
- +
+ {i.name} Recommended diff --git a/packages/desktop/src/components/dialog-select-model.tsx b/packages/desktop/src/components/dialog-select-model.tsx index 622ab15fb..54783386a 100644 --- a/packages/desktop/src/components/dialog-select-model.tsx +++ b/packages/desktop/src/components/dialog-select-model.tsx @@ -35,7 +35,6 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => { } > `${x.provider.id}:${x.id}`} @@ -61,7 +60,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => { }} > {(i) => ( -
+
{i.name} Free diff --git a/packages/desktop/src/components/dialog-select-provider.tsx b/packages/desktop/src/components/dialog-select-provider.tsx index 52fac7073..5bbde5d41 100644 --- a/packages/desktop/src/components/dialog-select-provider.tsx +++ b/packages/desktop/src/components/dialog-select-provider.tsx @@ -15,7 +15,6 @@ export const DialogSelectProvider: Component = () => { return ( x?.id} @@ -38,17 +37,8 @@ export const DialogSelectProvider: Component = () => { }} > {(i) => ( -
- +
+ {i.name} Recommended diff --git a/packages/desktop/src/context/command.tsx b/packages/desktop/src/context/command.tsx index 362f35b97..f91a1cf05 100644 --- a/packages/desktop/src/context/command.tsx +++ b/packages/desktop/src/context/command.tsx @@ -119,7 +119,6 @@ function DialogCommand(props: { options: CommandOption[] }) { return ( props.options.filter((x) => !x.id.startsWith("suggested.") || !x.disabled)} diff --git a/packages/ui/src/assets/icons/provider/aihubmix.svg b/packages/ui/src/assets/icons/provider/aihubmix.svg index 39d6a7dc5..33164b78b 100644 --- a/packages/ui/src/assets/icons/provider/aihubmix.svg +++ b/packages/ui/src/assets/icons/provider/aihubmix.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/alibaba-cn.svg b/packages/ui/src/assets/icons/provider/alibaba-cn.svg index 6172e8813..5d8355c18 100644 --- a/packages/ui/src/assets/icons/provider/alibaba-cn.svg +++ b/packages/ui/src/assets/icons/provider/alibaba-cn.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/alibaba.svg b/packages/ui/src/assets/icons/provider/alibaba.svg index 6172e8813..b3a2edc3c 100644 --- a/packages/ui/src/assets/icons/provider/alibaba.svg +++ b/packages/ui/src/assets/icons/provider/alibaba.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/amazon-bedrock.svg b/packages/ui/src/assets/icons/provider/amazon-bedrock.svg index b69b6eed9..1f185ef53 100644 --- a/packages/ui/src/assets/icons/provider/amazon-bedrock.svg +++ b/packages/ui/src/assets/icons/provider/amazon-bedrock.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/packages/ui/src/assets/icons/provider/anthropic.svg b/packages/ui/src/assets/icons/provider/anthropic.svg index 59f6d7787..aaa01fcdb 100644 --- a/packages/ui/src/assets/icons/provider/anthropic.svg +++ b/packages/ui/src/assets/icons/provider/anthropic.svg @@ -1,7 +1,3 @@ - - - - + + + \ No newline at end of file diff --git a/packages/ui/src/assets/icons/provider/azure.svg b/packages/ui/src/assets/icons/provider/azure.svg index ecd0f9cbd..07c6519ba 100644 --- a/packages/ui/src/assets/icons/provider/azure.svg +++ b/packages/ui/src/assets/icons/provider/azure.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/bailing.svg b/packages/ui/src/assets/icons/provider/bailing.svg index 3d933dde5..b8ed486a8 100644 --- a/packages/ui/src/assets/icons/provider/bailing.svg +++ b/packages/ui/src/assets/icons/provider/bailing.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/baseten.svg b/packages/ui/src/assets/icons/provider/baseten.svg index 401c9b3dc..ffd4fbd8b 100644 --- a/packages/ui/src/assets/icons/provider/baseten.svg +++ b/packages/ui/src/assets/icons/provider/baseten.svg @@ -1 +1,3 @@ -Baseten + + + diff --git a/packages/ui/src/assets/icons/provider/cerebras.svg b/packages/ui/src/assets/icons/provider/cerebras.svg index 00d2ceb15..b16759672 100644 --- a/packages/ui/src/assets/icons/provider/cerebras.svg +++ b/packages/ui/src/assets/icons/provider/cerebras.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/ui/src/assets/icons/provider/cloudflare-ai-gateway.svg b/packages/ui/src/assets/icons/provider/cloudflare-ai-gateway.svg index f04d0959f..02c7e51d3 100644 --- a/packages/ui/src/assets/icons/provider/cloudflare-ai-gateway.svg +++ b/packages/ui/src/assets/icons/provider/cloudflare-ai-gateway.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/cloudflare-workers-ai.svg b/packages/ui/src/assets/icons/provider/cloudflare-workers-ai.svg index f04d0959f..02c7e51d3 100644 --- a/packages/ui/src/assets/icons/provider/cloudflare-workers-ai.svg +++ b/packages/ui/src/assets/icons/provider/cloudflare-workers-ai.svg @@ -1,6 +1,4 @@ - - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/cohere.svg b/packages/ui/src/assets/icons/provider/cohere.svg index 0752883f8..cfeaa6002 100644 --- a/packages/ui/src/assets/icons/provider/cohere.svg +++ b/packages/ui/src/assets/icons/provider/cohere.svg @@ -1,19 +1,5 @@ - - - - - - - - - - - - - + + + + diff --git a/packages/ui/src/assets/icons/provider/deepinfra.svg b/packages/ui/src/assets/icons/provider/deepinfra.svg index bf908d1cf..c35ab7183 100644 --- a/packages/ui/src/assets/icons/provider/deepinfra.svg +++ b/packages/ui/src/assets/icons/provider/deepinfra.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/ui/src/assets/icons/provider/deepseek.svg b/packages/ui/src/assets/icons/provider/deepseek.svg index 7eaa6a83c..5d6efa991 100644 --- a/packages/ui/src/assets/icons/provider/deepseek.svg +++ b/packages/ui/src/assets/icons/provider/deepseek.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/fastrouter.svg b/packages/ui/src/assets/icons/provider/fastrouter.svg index da8521c11..ec73dc49c 100644 --- a/packages/ui/src/assets/icons/provider/fastrouter.svg +++ b/packages/ui/src/assets/icons/provider/fastrouter.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/fireworks-ai.svg b/packages/ui/src/assets/icons/provider/fireworks-ai.svg index 834b2b0d0..72cc91f09 100644 --- a/packages/ui/src/assets/icons/provider/fireworks-ai.svg +++ b/packages/ui/src/assets/icons/provider/fireworks-ai.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/github-copilot.svg b/packages/ui/src/assets/icons/provider/github-copilot.svg index 423f676cc..2d426f265 100644 --- a/packages/ui/src/assets/icons/provider/github-copilot.svg +++ b/packages/ui/src/assets/icons/provider/github-copilot.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/github-models.svg b/packages/ui/src/assets/icons/provider/github-models.svg index 177a15242..39689d95c 100644 --- a/packages/ui/src/assets/icons/provider/github-models.svg +++ b/packages/ui/src/assets/icons/provider/github-models.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/google-vertex.svg b/packages/ui/src/assets/icons/provider/google-vertex.svg index 47d238715..fda56b447 100644 --- a/packages/ui/src/assets/icons/provider/google-vertex.svg +++ b/packages/ui/src/assets/icons/provider/google-vertex.svg @@ -1,3 +1,10 @@ - - + + + + + + + + + diff --git a/packages/ui/src/assets/icons/provider/google.svg b/packages/ui/src/assets/icons/provider/google.svg index 2b574c1dd..4ebfcfd2b 100644 --- a/packages/ui/src/assets/icons/provider/google.svg +++ b/packages/ui/src/assets/icons/provider/google.svg @@ -1,7 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/groq.svg b/packages/ui/src/assets/icons/provider/groq.svg index e58ff6963..fdd22ed7d 100644 --- a/packages/ui/src/assets/icons/provider/groq.svg +++ b/packages/ui/src/assets/icons/provider/groq.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/helicone.svg b/packages/ui/src/assets/icons/provider/helicone.svg index 68dcd520b..8a4bd43ad 100644 --- a/packages/ui/src/assets/icons/provider/helicone.svg +++ b/packages/ui/src/assets/icons/provider/helicone.svg @@ -1,3 +1,6 @@ - - + + + + + diff --git a/packages/ui/src/assets/icons/provider/huggingface.svg b/packages/ui/src/assets/icons/provider/huggingface.svg index 255d07593..4241ff94e 100644 --- a/packages/ui/src/assets/icons/provider/huggingface.svg +++ b/packages/ui/src/assets/icons/provider/huggingface.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/iflowcn.svg b/packages/ui/src/assets/icons/provider/iflowcn.svg index f90d80069..6f35a7d59 100644 --- a/packages/ui/src/assets/icons/provider/iflowcn.svg +++ b/packages/ui/src/assets/icons/provider/iflowcn.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/inception.svg b/packages/ui/src/assets/icons/provider/inception.svg index bde688837..f70ffbc78 100644 --- a/packages/ui/src/assets/icons/provider/inception.svg +++ b/packages/ui/src/assets/icons/provider/inception.svg @@ -1,9 +1,4 @@ - - - - - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/inference.svg b/packages/ui/src/assets/icons/provider/inference.svg index 1966aeb81..c17f66574 100644 --- a/packages/ui/src/assets/icons/provider/inference.svg +++ b/packages/ui/src/assets/icons/provider/inference.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/io-net.svg b/packages/ui/src/assets/icons/provider/io-net.svg index 23671a21b..651e57df8 100644 --- a/packages/ui/src/assets/icons/provider/io-net.svg +++ b/packages/ui/src/assets/icons/provider/io-net.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/packages/ui/src/assets/icons/provider/kimi-for-coding.svg b/packages/ui/src/assets/icons/provider/kimi-for-coding.svg index 77eb5eb66..8f2af02e6 100644 --- a/packages/ui/src/assets/icons/provider/kimi-for-coding.svg +++ b/packages/ui/src/assets/icons/provider/kimi-for-coding.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/llama.svg b/packages/ui/src/assets/icons/provider/llama.svg index 7ce9f56bf..3053b251f 100644 --- a/packages/ui/src/assets/icons/provider/llama.svg +++ b/packages/ui/src/assets/icons/provider/llama.svg @@ -1,7 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/lucidquery.svg b/packages/ui/src/assets/icons/provider/lucidquery.svg index 1d40cf5bb..6420a042e 100644 --- a/packages/ui/src/assets/icons/provider/lucidquery.svg +++ b/packages/ui/src/assets/icons/provider/lucidquery.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/minimax-cn.svg b/packages/ui/src/assets/icons/provider/minimax-cn.svg index 086f4e9e6..44c5eec21 100644 --- a/packages/ui/src/assets/icons/provider/minimax-cn.svg +++ b/packages/ui/src/assets/icons/provider/minimax-cn.svg @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/minimax.svg b/packages/ui/src/assets/icons/provider/minimax.svg index 086f4e9e6..44c5eec21 100644 --- a/packages/ui/src/assets/icons/provider/minimax.svg +++ b/packages/ui/src/assets/icons/provider/minimax.svg @@ -1,5 +1,3 @@ - - - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/mistral.svg b/packages/ui/src/assets/icons/provider/mistral.svg index b3cd0b5cf..966e474bc 100644 --- a/packages/ui/src/assets/icons/provider/mistral.svg +++ b/packages/ui/src/assets/icons/provider/mistral.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/modelscope.svg b/packages/ui/src/assets/icons/provider/modelscope.svg index b54f8ee9a..94a894a55 100644 --- a/packages/ui/src/assets/icons/provider/modelscope.svg +++ b/packages/ui/src/assets/icons/provider/modelscope.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/packages/ui/src/assets/icons/provider/moonshotai-cn.svg b/packages/ui/src/assets/icons/provider/moonshotai-cn.svg index 77eb5eb66..3cdf7c868 100644 --- a/packages/ui/src/assets/icons/provider/moonshotai-cn.svg +++ b/packages/ui/src/assets/icons/provider/moonshotai-cn.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/moonshotai.svg b/packages/ui/src/assets/icons/provider/moonshotai.svg index 77eb5eb66..3cdf7c868 100644 --- a/packages/ui/src/assets/icons/provider/moonshotai.svg +++ b/packages/ui/src/assets/icons/provider/moonshotai.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/nebius.svg b/packages/ui/src/assets/icons/provider/nebius.svg index eb7a4f5e3..aeba5890d 100644 --- a/packages/ui/src/assets/icons/provider/nebius.svg +++ b/packages/ui/src/assets/icons/provider/nebius.svg @@ -1 +1,4 @@ -Nebius \ No newline at end of file + + + + diff --git a/packages/ui/src/assets/icons/provider/nvidia.svg b/packages/ui/src/assets/icons/provider/nvidia.svg index b0d47f227..1f53eefca 100644 --- a/packages/ui/src/assets/icons/provider/nvidia.svg +++ b/packages/ui/src/assets/icons/provider/nvidia.svg @@ -1,4 +1,3 @@ - - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/ollama-cloud.svg b/packages/ui/src/assets/icons/provider/ollama-cloud.svg index 4c77f4296..08c05cf28 100644 --- a/packages/ui/src/assets/icons/provider/ollama-cloud.svg +++ b/packages/ui/src/assets/icons/provider/ollama-cloud.svg @@ -1,3 +1,7 @@ - - + + + + + + diff --git a/packages/ui/src/assets/icons/provider/openai.svg b/packages/ui/src/assets/icons/provider/openai.svg index cd4c28c52..000f65c34 100644 --- a/packages/ui/src/assets/icons/provider/openai.svg +++ b/packages/ui/src/assets/icons/provider/openai.svg @@ -1,7 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/opencode.svg b/packages/ui/src/assets/icons/provider/opencode.svg index 9adb6f2d8..9e336ef2d 100644 --- a/packages/ui/src/assets/icons/provider/opencode.svg +++ b/packages/ui/src/assets/icons/provider/opencode.svg @@ -1,5 +1,4 @@ - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/openrouter.svg b/packages/ui/src/assets/icons/provider/openrouter.svg index 2dabb4556..7e8abc81d 100644 --- a/packages/ui/src/assets/icons/provider/openrouter.svg +++ b/packages/ui/src/assets/icons/provider/openrouter.svg @@ -1,19 +1,8 @@ - - - - - - - + + + + + + + diff --git a/packages/ui/src/assets/icons/provider/ovhcloud.svg b/packages/ui/src/assets/icons/provider/ovhcloud.svg index 7b53f446f..064b0835b 100644 --- a/packages/ui/src/assets/icons/provider/ovhcloud.svg +++ b/packages/ui/src/assets/icons/provider/ovhcloud.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/perplexity.svg b/packages/ui/src/assets/icons/provider/perplexity.svg index 70b382523..a0f38862a 100644 --- a/packages/ui/src/assets/icons/provider/perplexity.svg +++ b/packages/ui/src/assets/icons/provider/perplexity.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/poe.svg b/packages/ui/src/assets/icons/provider/poe.svg index e03a44227..a5ab62d72 100644 --- a/packages/ui/src/assets/icons/provider/poe.svg +++ b/packages/ui/src/assets/icons/provider/poe.svg @@ -1,7 +1,7 @@ - - - - - - - \ No newline at end of file + + + + + + + diff --git a/packages/ui/src/assets/icons/provider/scaleway.svg b/packages/ui/src/assets/icons/provider/scaleway.svg index 64f6a4cca..7574f72f3 100644 --- a/packages/ui/src/assets/icons/provider/scaleway.svg +++ b/packages/ui/src/assets/icons/provider/scaleway.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/packages/ui/src/assets/icons/provider/siliconflow-cn.svg b/packages/ui/src/assets/icons/provider/siliconflow-cn.svg new file mode 100644 index 000000000..13cac22b9 --- /dev/null +++ b/packages/ui/src/assets/icons/provider/siliconflow-cn.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/provider/siliconflow.svg b/packages/ui/src/assets/icons/provider/siliconflow.svg index 808f52a7e..13cac22b9 100644 --- a/packages/ui/src/assets/icons/provider/siliconflow.svg +++ b/packages/ui/src/assets/icons/provider/siliconflow.svg @@ -1,6 +1,3 @@ - - SiliconFlow - - - - \ No newline at end of file + + + diff --git a/packages/ui/src/assets/icons/provider/submodel.svg b/packages/ui/src/assets/icons/provider/submodel.svg index 5dd4fcfc7..5bef03c64 100644 --- a/packages/ui/src/assets/icons/provider/submodel.svg +++ b/packages/ui/src/assets/icons/provider/submodel.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/packages/ui/src/assets/icons/provider/togetherai.svg b/packages/ui/src/assets/icons/provider/togetherai.svg index b31a60fe2..68413386c 100644 --- a/packages/ui/src/assets/icons/provider/togetherai.svg +++ b/packages/ui/src/assets/icons/provider/togetherai.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/packages/ui/src/assets/icons/provider/v0.svg b/packages/ui/src/assets/icons/provider/v0.svg index d4e9a436c..09f3b411e 100644 --- a/packages/ui/src/assets/icons/provider/v0.svg +++ b/packages/ui/src/assets/icons/provider/v0.svg @@ -1,4 +1,3 @@ - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/venice.svg b/packages/ui/src/assets/icons/provider/venice.svg index 086e9aa1f..3d5809e3b 100644 --- a/packages/ui/src/assets/icons/provider/venice.svg +++ b/packages/ui/src/assets/icons/provider/venice.svg @@ -1,24 +1,4 @@ - - - - + + + diff --git a/packages/ui/src/assets/icons/provider/vercel.svg b/packages/ui/src/assets/icons/provider/vercel.svg index 4d2395bbf..a99425f2a 100644 --- a/packages/ui/src/assets/icons/provider/vercel.svg +++ b/packages/ui/src/assets/icons/provider/vercel.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/ui/src/assets/icons/provider/vultr.svg b/packages/ui/src/assets/icons/provider/vultr.svg index e24a1dda2..9205d4484 100644 --- a/packages/ui/src/assets/icons/provider/vultr.svg +++ b/packages/ui/src/assets/icons/provider/vultr.svg @@ -1,18 +1,6 @@ - - - - - + + + + + diff --git a/packages/ui/src/assets/icons/provider/xai.svg b/packages/ui/src/assets/icons/provider/xai.svg index 9a6263086..ccd22443c 100644 --- a/packages/ui/src/assets/icons/provider/xai.svg +++ b/packages/ui/src/assets/icons/provider/xai.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/xiaomi.svg b/packages/ui/src/assets/icons/provider/xiaomi.svg new file mode 100644 index 000000000..4a893919e --- /dev/null +++ b/packages/ui/src/assets/icons/provider/xiaomi.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/ui/src/assets/icons/provider/zai-coding-plan.svg b/packages/ui/src/assets/icons/provider/zai-coding-plan.svg index 121abb371..d7da9b7c5 100644 --- a/packages/ui/src/assets/icons/provider/zai-coding-plan.svg +++ b/packages/ui/src/assets/icons/provider/zai-coding-plan.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/zai.svg b/packages/ui/src/assets/icons/provider/zai.svg index 121abb371..d7da9b7c5 100644 --- a/packages/ui/src/assets/icons/provider/zai.svg +++ b/packages/ui/src/assets/icons/provider/zai.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/zenmux.svg b/packages/ui/src/assets/icons/provider/zenmux.svg index dfb56b1d0..d8d9ef665 100644 --- a/packages/ui/src/assets/icons/provider/zenmux.svg +++ b/packages/ui/src/assets/icons/provider/zenmux.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/zhipuai-coding-plan.svg b/packages/ui/src/assets/icons/provider/zhipuai-coding-plan.svg index 121abb371..3d0d0c455 100644 --- a/packages/ui/src/assets/icons/provider/zhipuai-coding-plan.svg +++ b/packages/ui/src/assets/icons/provider/zhipuai-coding-plan.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/assets/icons/provider/zhipuai.svg b/packages/ui/src/assets/icons/provider/zhipuai.svg index 121abb371..d7da9b7c5 100644 --- a/packages/ui/src/assets/icons/provider/zhipuai.svg +++ b/packages/ui/src/assets/icons/provider/zhipuai.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css index 6fa71c64c..782f2570c 100644 --- a/packages/ui/src/components/dialog.css +++ b/packages/ui/src/components/dialog.css @@ -4,7 +4,7 @@ position: fixed; inset: 0; z-index: 50; - background-color: transparent; + background-color: hsl(from var(--background-base) h s l / 0.2); /* animation: overlayHide 250ms ease 100ms forwards; */ /**/ @@ -43,13 +43,14 @@ /* padding: 8px; */ /* padding: 8px 8px 0 8px; */ - border: 1px solid var(--border-base); + border: 1px solid hsl(from var(--border-base) h s l / 0.2); border-radius: var(--radius-xl); background: var(--surface-raised-stronger-non-alpha); + background-clip: padding-box; box-shadow: - 0 15px 45px 0 rgba(19, 16, 16, 0.22), - 0 3.35px 10.051px 0 rgba(19, 16, 16, 0.13), - 0 0.998px 2.993px 0 rgba(19, 16, 16, 0.09); + 0 15px 45px 0 rgba(19, 16, 16, 0.35), + 0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25), + 0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2); /* animation: contentHide 300ms ease-in forwards; */ /**/ @@ -59,8 +60,7 @@ [data-slot="dialog-header"] { display: flex; - padding: 16px; - padding-left: 20px; + padding: 16px 16px 16px 24px; justify-content: space-between; align-items: center; flex-shrink: 0; diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css index 368065e53..1714b3513 100644 --- a/packages/ui/src/components/list.css +++ b/packages/ui/src/components/list.css @@ -1,17 +1,36 @@ +@property --bottom-fade { + syntax: ""; + inherits: false; + initial-value: 0px; +} + +@keyframes scroll { + 0% { + --bottom-fade: 20px; + } + 90% { + --bottom-fade: 20px; + } + 100% { + --bottom-fade: 0; + } +} + [data-component="list"] { display: flex; flex-direction: column; - gap: 20px; + gap: 12px; overflow: hidden; + padding: 0 12px; [data-slot="list-search"] { display: flex; - height: 40px; flex-shrink: 0; - padding: 4px 10px 4px 16px; + padding: 8px; align-items: center; gap: 12px; align-self: stretch; + margin-bottom: 4px; border-radius: var(--radius-md); background: var(--surface-base); @@ -19,11 +38,17 @@ [data-slot="list-search-container"] { display: flex; align-items: center; - gap: 16px; + gap: 8px; flex: 1 0 0; + max-height: 20px; [data-slot="list-search-input"] { width: 100%; + + &[data-slot="input-input"] { + line-height: 20px; + max-height: 20px; + } } } } @@ -31,88 +56,67 @@ [data-slot="list-scroll"] { display: flex; flex-direction: column; - gap: 20px; + gap: 12px; overflow-y: auto; + overscroll-behavior: contain; + mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000); + animation: scroll; + animation-timeline: --scroll; + scroll-timeline: --scroll y; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } - } - [data-slot="list-empty-state"] { - display: flex; - padding: 32px 0px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 8px; - align-self: stretch; - - [data-slot="list-message"] { + [data-slot="list-empty-state"] { display: flex; + padding: 32px 0px; + flex-direction: column; justify-content: center; align-items: center; - gap: 2px; - color: var(--text-weak); - text-align: center; - - /* text-14-regular */ - font-family: var(--font-family-sans); - font-size: 14px; - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); /* 142.857% */ - letter-spacing: var(--letter-spacing-normal); - } - - [data-slot="list-filter"] { - color: var(--text-strong); - } - } - - [data-slot="list-group"] { - position: relative; - display: flex; - flex-direction: column; - - [data-slot="list-header"] { - display: flex; - z-index: 10; - height: 28px; - padding: 0 10px; - justify-content: space-between; - align-items: center; + gap: 8px; align-self: stretch; - background: var(--surface-raised-stronger-non-alpha); - position: sticky; - top: 0; - color: var(--text-base); + [data-slot="list-message"] { + display: flex; + justify-content: center; + align-items: center; + gap: 2px; + color: var(--text-weak); + text-align: center; - /* text-14-medium */ - font-family: var(--font-family-sans); - font-size: 14px; - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); /* 142.857% */ - letter-spacing: var(--letter-spacing-normal); + /* text-14-regular */ + font-family: var(--font-family-sans); + font-size: 14px; + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + } + + [data-slot="list-filter"] { + color: var(--text-strong); + } } - [data-slot="list-items"] { + [data-slot="list-group"] { + position: relative; display: flex; flex-direction: column; - align-items: flex-start; - align-self: stretch; - [data-slot="list-item"] { + [data-slot="list-header"] { display: flex; - width: 100%; - height: 28px; - padding: 4px 10px; + z-index: 10; + padding: 0 12px 8px 8px; + justify-content: space-between; align-items: center; - color: var(--text-strong); - scroll-margin-top: 28px; + align-self: stretch; + background: var(--surface-raised-stronger-non-alpha); + position: sticky; + top: 0; + + color: var(--text-base); /* text-14-medium */ font-family: var(--font-family-sans); @@ -122,30 +126,76 @@ line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); - [data-slot="list-item-selected-icon"] { - color: var(--icon-strong-base); - } - [data-slot="list-item-active-icon"] { - display: none; - color: var(--icon-strong-base); + &::after { + content: ""; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 16px; + background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent); + pointer-events: none; + opacity: 0; + transition: opacity 0.15s ease; } - &[data-active="true"] { - border-radius: var(--radius-md); - background: var(--surface-raised-base-hover); + &[data-stuck="true"]::after { + opacity: 1; + } + } + + [data-slot="list-items"] { + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + + [data-slot="list-item"] { + display: flex; + width: 100%; + padding: 6px 8px 6px 8px; + align-items: center; + color: var(--text-strong); + scroll-margin-top: 28px; + + /* text-14-medium */ + font-family: var(--font-family-sans); + font-size: 14px; + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 142.857% */ + letter-spacing: var(--letter-spacing-normal); + + [data-slot="list-item-selected-icon"] { + color: var(--icon-strong-base); + } [data-slot="list-item-active-icon"] { - display: block; + display: none; + color: var(--icon-strong-base); } + [data-slot="list-item-extra-icon"] { - display: block !important; - color: var(--icon-strong-base) !important; + color: var(--icon-base); + margin-left: -4px; + } + + &[data-active="true"] { + border-radius: var(--radius-md); + background: var(--surface-raised-base-hover); + [data-slot="list-item-active-icon"] { + display: block; + } + [data-slot="list-item-extra-icon"] { + display: block !important; + color: var(--icon-strong-base) !important; + } + } + &:active { + background: var(--surface-raised-base-active); + } + &:focus-visible { + outline: none; } - } - &:active { - background: var(--surface-raised-base-active); - } - &:focus-visible { - outline: none; } } } diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx index 0ed745f32..4f6df0faf 100644 --- a/packages/ui/src/components/list.tsx +++ b/packages/ui/src/components/list.tsx @@ -1,7 +1,7 @@ -import { createEffect, on, Show, For, type JSX, createSignal } from "solid-js" +import { type FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks" +import { createEffect, createSignal, For, type JSX, on, Show } from "solid-js" import { createStore } from "solid-js/store" -import { FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks" -import { Icon, IconProps } from "./icon" +import { Icon, type IconProps } from "./icon" import { IconButton } from "./icon-button" import { TextField } from "./text-field" @@ -149,7 +149,31 @@ export function List(props: ListProps & { ref?: (ref: ListRef) => void }) {(group) => (
-
{group.category}
+ {(() => { + const [stuck, setStuck] = createSignal(false) + return ( +
{ + createEffect(() => { + const scroll = scrollRef() + if (!scroll) return + const handler = () => { + const rect = el.getBoundingClientRect() + const scrollRect = scroll.getBoundingClientRect() + setStuck(rect.top <= scrollRect.top + 1 && scroll.scrollTop > 0) + } + scroll.addEventListener("scroll", handler, { passive: true }) + handler() + return () => scroll.removeEventListener("scroll", handler) + }) + }} + > + {group.category} +
+ ) + })()}
@@ -160,10 +184,14 @@ export function List(props: ListProps & { ref?: (ref: ListRef) => void }) data-active={props.key(item) === active()} data-selected={item === props.current} onClick={() => handleSelect(item, i())} + type="button" onMouseMove={() => { setStore("mouseActive", true) setActive(props.key(item)) }} + onMouseLeave={() => { + setActive(null) + }} > {props.children(item)} diff --git a/packages/ui/src/components/provider-icons/sprite.svg b/packages/ui/src/components/provider-icons/sprite.svg index 3bb4b9617..22e1223a1 100644 --- a/packages/ui/src/components/provider-icons/sprite.svg +++ b/packages/ui/src/components/provider-icons/sprite.svg @@ -1,37 +1,48 @@ - - - - - - - + + + + + + + - + - + - + + + + @@ -58,59 +69,45 @@ stroke-linejoin="round" > - + - - + + - - - - - - + + + + + @@ -137,12 +134,16 @@ stroke-linejoin="round" > - + + - - - - - - - - SiliconFlow - - - - - + + + + + + + + + + @@ -247,90 +251,135 @@ stroke-linejoin="round" > - + - + - - - - - - - - - - - - - - - - - - - - + - - - - - Nebius - + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -357,53 +406,51 @@ stroke-linejoin="round" > - + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + @@ -430,105 +477,123 @@ stroke-linejoin="round" > - + - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + - + - + + + + - - - - + - + + + + @@ -555,40 +620,44 @@ stroke-linejoin="round" > - + - + - + - + - + - + @@ -615,49 +684,39 @@ stroke-linejoin="round" > - - - - - - - - - - + + + + - - - - - + + + - - - - - + + + - - - - - - Baseten - - - + + + + + + + + - + @@ -737,32 +796,36 @@ stroke-linejoin="round" > - + - + - + - + - + diff --git a/packages/ui/src/components/provider-icons/types.ts b/packages/ui/src/components/provider-icons/types.ts index b3caf7edb..81fcc3678 100644 --- a/packages/ui/src/components/provider-icons/types.ts +++ b/packages/ui/src/components/provider-icons/types.ts @@ -6,6 +6,7 @@ export const iconNames = [ "zenmux", "zai", "zai-coding-plan", + "xiaomi", "xai", "wandb", "vultr", @@ -17,6 +18,7 @@ export const iconNames = [ "synthetic", "submodel", "siliconflow", + "siliconflow-cn", "scaleway", "sap-ai-core", "requesty",