diff options
Diffstat (limited to 'packages/cloud/app/src/component/workspace/new-user-section.tsx')
| -rw-r--r-- | packages/cloud/app/src/component/workspace/new-user-section.tsx | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/packages/cloud/app/src/component/workspace/new-user-section.tsx b/packages/cloud/app/src/component/workspace/new-user-section.tsx deleted file mode 100644 index 6e031e371..000000000 --- a/packages/cloud/app/src/component/workspace/new-user-section.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { query, useParams, createAsync } from "@solidjs/router" -import { createMemo, createSignal, Show } from "solid-js" -import { IconCopy, IconCheck } from "~/component/icon" -import { Key } from "@opencode/cloud-core/key.js" -import { Billing } from "@opencode/cloud-core/billing.js" -import { withActor } from "~/context/auth.withActor" -import styles from "./new-user-section.module.css" - -const getUsageInfo = query(async (workspaceID: string) => { - "use server" - return withActor(async () => { - return await Billing.usages() - }, workspaceID) -}, "usage.list") - -const listKeys = query(async (workspaceID: string) => { - "use server" - return withActor(() => Key.list(), workspaceID) -}, "key.list") - -export function NewUserSection() { - const params = useParams() - const [copiedKey, setCopiedKey] = createSignal(false) - const keys = createAsync(() => listKeys(params.id)) - const usage = createAsync(() => getUsageInfo(params.id)) - const isNew = createMemo(() => { - const keysList = keys() - const usageList = usage() - return keysList?.length === 1 && (!usageList || usageList.length === 0) - }) - const defaultKey = createMemo(() => keys()?.at(-1)?.key) - - return ( - <Show when={isNew()}> - <div class={styles.root}> - <div data-component="feature-grid"> - <div data-slot="feature"> - <h3>Tested & Verified Models</h3> - <p>We've benchmarked and tested models specifically for coding agents to ensure the best performance.</p> - </div> - <div data-slot="feature"> - <h3>Highest Quality</h3> - <p>Access models configured for optimal performance - no downgrades or routing to cheaper providers.</p> - </div> - <div data-slot="feature"> - <h3>No Lock-in</h3> - <p>Use Zen with any coding agent, and continue using other providers with opencode whenever you want.</p> - </div> - </div> - - <div data-component="api-key-highlight"> - <Show when={defaultKey()}> - <div data-slot="key-display"> - <div data-slot="key-container"> - <code data-slot="key-value">{defaultKey()}</code> - <button - data-color="primary" - disabled={copiedKey()} - onClick={async () => { - await navigator.clipboard.writeText(defaultKey() ?? "") - setCopiedKey(true) - setTimeout(() => setCopiedKey(false), 2000) - }} - title="Copy API key" - > - <Show - when={copiedKey()} - fallback={ - <> - <IconCopy style={{ width: "16px", height: "16px" }} /> Copy Key - </> - } - > - <IconCheck style={{ width: "16px", height: "16px" }} /> Copied! - </Show> - </button> - </div> - </div> - </Show> - </div> - - <div data-component="next-steps"> - <ol> - <li>Enable billing</li> - <li> - Run <code>opencode auth login</code> and select opencode - </li> - <li>Paste your API key</li> - <li> - Start opencode and run <code>/models</code> to select a model - </li> - </ol> - </div> - </div> - </Show> - ) -} |
