mirror of
https://github.com/sipeed/picoclaw.git
synced 2026-06-12 18:08:54 +00:00
feat(web): migrate launcher to modular web frontend/backend and improve management UX (#1275)
* refactor: remove the legacy picoclaw-launcher * feat: create initial web frontend and backend structure * feat(packaging): add desktop entry for PicoClaw Launcher (#1062) - Add .desktop file with Terminal=true, named "PicoClaw Launcher" - Install to /usr/share/applications/ for app menu visibility - Add 512x512 PNG icon to /usr/share/icons/hicolor/ Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * `make dev`: If you haven't built it before, you need to run `build` first. * feat(web): comprehensive web UI and backend refactoring This commit introduces a major overhaul of both the frontend web UI and the Go backend API, transitioning to a highly modular architecture and integrating new core features. Backend: - Refactored monolithic API endpoints into domain-specific modules (config, gateway, log, models, pico, session). - Cleaned up obsolete files (`server.go`, `status.go`, WebSocket handlers) and outdated tests. - Implemented Gateway process lifecycle management (start/stop/restart) and real-time log streaming. Frontend: - Integrated Shadcn UI components to establish a modern, consistent design system. - Introduced a new application layout featuring a responsive sidebar (`app-sidebar`) and header. - Implemented internationalization (i18n) with initial support for English and Chinese. - Restructured API clients, hooks, and Zustand stores into logical domains. - Added new management pages for Settings, Logs, Models, Providers, and Credentials. - Upgraded the Pico chat interface with session history management and dynamic model selection. Build & Config: - Updated frontend dependencies, Vite configuration, and lockfiles. - Refined routing setup and overarching application stylesheets. * feat(web): enhance model management, sorting, and deletion logic - Implement model sorting in UI (default > configured > unconfigured) - Prevent deletion of default models in the frontend - Update backend to clear default settings when a model is deleted - Add existence validation when setting a default model via API - Group models in chat UI by type (API Key, OAuth, Local) - Conditionally display model selector in chat based on configuration status * refactor(web): refactor chat page into modular components/hooks and update i18n - split chat route into dedicated chat components (page, composer, empty state, messages, history, model selector) - extract model/session logic into use-chat-models and use-session-history hooks - update chat locale keys in en/zh and add empty-state/history-related translations * refactor(models): refactor models page into modular components and improve UX - split /models route into dedicated components (page, provider section, card, add/edit sheets, delete dialog) - add provider grouping/sorting, provider labels/icons, and a no-default hint in the models page - add "Set as default model" toggle to add/edit flows with safer defaults - introduce shared form helpers and new UI primitives (field, label, switch) - update i18n strings (en/zh) for models and gateway header text usage - apply minor UI polish (models nav icon, separator client directive) * fix(web): add SPA index fallback for embedded frontend routes Serve existing static assets as-is, keep /api/* and missing asset paths returning 404, and add tests for SPA fallback behavior on refresh. * fix(frontend/chat): normalize message timestamp units to prevent invalid far-future dates * chore: delete TestSPARouteFallsBackToIndex * feat: update build for web-based launcher (#1186) - Makefile: add build-launcher target (builds frontend + Go backend) - GoReleaser: point picoclaw-launcher build to web/backend, add frontend build hook, restore winres hook with updated paths - Restore icon.ico and winres config from main for Windows builds Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * feat(credentials): add multi-provider OAuth credential management - add backend `/api/oauth/*` endpoints for provider status, browser/device-code/token login, flow query/polling, and logout - extend API handler with OAuth flow/state tracking and route registration, plus OAuth unit tests - implement frontend credentials page/components for OpenAI, Anthropic, and Google Antigravity login/logout - add OAuth API client and `useCredentialsPage` hook, with new EN/ZH i18n strings * chore: remove placeholder index.html from dist (#1188) The .gitkeep is sufficient for go:embed to find the dist directory. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * fix(frontend): polish model and credential UX; remove Providers nav - remove the Providers item from sidebar navigation and locale keys - simplify chat composer by dropping attach/voice action buttons - support ReactNode titles in credential cards and add provider brand icons - refine sheet header/footer styling and device-code footer button hierarchy - disable “Set default” when a model is unconfigured or already default * feat(web): Update config page (#1173) * feat(web): Update config page * fix(web): useEffect resets editorValue whenever config changes * fix(web): react-hooks/set-state-in-effect error & pnpm lint #1173 * feat(web): add channel management page for web console (#1190) * feat(web): add channel management page for web console Add a complete channel management UI that allows users to configure messaging channels (Telegram, Discord, Slack, Feishu, etc.) directly from the web console instead of manually editing config.json. Backend: GET/PUT/PATCH API endpoints for listing, updating, and toggling channels with secret field masking. Frontend: Channel cards grid with enable/disable toggles, per-channel configuration sheets with dedicated forms for major platforms and a generic fallback for others. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(web/channels): move channels to own sidebar group and fix sheet padding - Channels now has its own navigation group instead of being under Services - Fix edit sheet form content padding (px-1 -> px-4) to match header/footer - Fix naked return lint error in extractChannelInfo Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> * fix(web): harden channel config updates and resolve frontend lint issues - validate channel PUT/PATCH updates before saving and return structured validation errors - require `enabled` in toggle requests to avoid silent false defaults - support editing `allow_origins` in the generic channel form and parse string/array inputs on backend - replace channel form `any` usage with `ChannelConfig` (`Record<string, unknown>`) and add safe value helpers - add i18n strings for allow-origins fields and apply related frontend formatting cleanups * fix(frontend): prevent false "Invalid JSON" errors in config editor * feat: add startup readiness checks and propagate start availability to UI - add gateway precondition validation for default model and credentials - auto-start gateway on backend boot when conditions are met - include gateway_start_allowed and gateway_start_reason in status updates - prevent frontend start actions when gateway cannot be started * feat(web): revamp channel config UX with catalog-based routing - replace legacy channel management endpoints with a backend channel catalog API - switch frontend channel updates to PATCH /api/config and per-channel config pages - add dynamic channel items in the sidebar with support for expand/collapse - migrate /channels to nested routes (/channels/$name) and remove old card/sheet flow - improve channel forms with clearer hints, required/error states, and reusable switch cards - fix Discord mention-only toggle to read/write group_trigger.mention_only * refactor(frontend): move shared-form to components and unify default-model switch with SwitchCardField * fix(frontend): improve model form validation and unify secret placeholder handling - block duplicate model aliases when adding a model (with localized error messages) - share masked secret placeholder logic across model and channel forms - refresh gateway state after setting the default model - apply minor UI cleanup to provider icon rendering * feat(web): add visual system config and launcher/autostart controls - add launcher config model and persistence (`launcher-config.json`) for port/public/CIDR settings - add system APIs for launch-at-login and launcher parameters - apply CIDR-based access-control middleware to backend HTTP routes - split config routing into visual config and raw JSON config pages - add frontend system API client and visual config sections for runtime/devices/launcher - expand i18n strings (en/zh) for new config UI - improve sidebar active matching and session ID generation fallback * refactor(frontend): remove i18n fallback strings and drop providers route - Replace `t(key, defaultValue)` calls with key-only translations across UI pages - Clean up locale files by pruning unused keys and adding missing shared keys - Remove the obsolete `/providers` page and update generated route tree * fix(backend): correct gateway status detection on Windows * fix(repo): keep web backend dist placeholder tracked --------- Co-authored-by: Guoguo <16666742+imguoguo@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Dihubopen <dihubcn@gmail.com> Co-authored-by: Dihubopen <130813726+Dihubopen@users.noreply.github.com>
This commit is contained in:
wenjie
@@ -0,0 +1,108 @@
|
||||
import {
|
||||
IconKey,
|
||||
IconLoader2,
|
||||
IconPlayerStopFilled,
|
||||
IconSparkles,
|
||||
} from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { OAuthProviderStatus } from "@/api/oauth"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
import { CredentialCard } from "./credential-card"
|
||||
|
||||
interface AnthropicCredentialCardProps {
|
||||
status?: OAuthProviderStatus
|
||||
activeAction: string
|
||||
token: string
|
||||
onTokenChange: (value: string) => void
|
||||
onStopLoading: () => void
|
||||
onSaveToken: () => void
|
||||
onAskLogout: () => void
|
||||
}
|
||||
|
||||
export function AnthropicCredentialCard({
|
||||
status,
|
||||
activeAction,
|
||||
token,
|
||||
onTokenChange,
|
||||
onStopLoading,
|
||||
onSaveToken,
|
||||
onAskLogout,
|
||||
}: AnthropicCredentialCardProps) {
|
||||
const { t } = useTranslation()
|
||||
const actionBusy = activeAction !== ""
|
||||
const tokenLoading = activeAction === "anthropic:token"
|
||||
const stopLabel = t("credentials.actions.stopLoading")
|
||||
|
||||
return (
|
||||
<CredentialCard
|
||||
title={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="border-muted inline-flex size-6 items-center justify-center rounded-full border">
|
||||
<IconSparkles className="size-3.5" />
|
||||
</span>
|
||||
<span>Anthropic</span>
|
||||
</span>
|
||||
}
|
||||
description={t("credentials.providers.anthropic.description")}
|
||||
status={status?.status ?? "not_logged_in"}
|
||||
authMethod={status?.auth_method}
|
||||
actions={
|
||||
<div className="border-muted flex h-[120px] flex-col justify-center rounded-lg border p-3">
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<div className="flex h-full items-center gap-2">
|
||||
<Input
|
||||
value={token}
|
||||
onChange={(e) => onTokenChange(e.target.value)}
|
||||
type="password"
|
||||
placeholder={t("credentials.fields.anthropicToken")}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="w-fit"
|
||||
disabled={actionBusy || !token.trim()}
|
||||
onClick={onSaveToken}
|
||||
>
|
||||
{tokenLoading && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<IconKey className="size-4" />
|
||||
{t("credentials.actions.saveToken")}
|
||||
</Button>
|
||||
{tokenLoading && (
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={onStopLoading}
|
||||
aria-label={stopLabel}
|
||||
title={stopLabel}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<IconPlayerStopFilled className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
status?.logged_in ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={actionBusy}
|
||||
onClick={onAskLogout}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
{activeAction === "anthropic:logout" && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
{t("credentials.actions.logout")}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import {
|
||||
IconBrandGoogle,
|
||||
IconLoader2,
|
||||
IconLockOpen,
|
||||
IconPlayerStopFilled,
|
||||
} from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { OAuthProviderStatus } from "@/api/oauth"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
import { CredentialCard } from "./credential-card"
|
||||
|
||||
interface AntigravityCredentialCardProps {
|
||||
status?: OAuthProviderStatus
|
||||
activeAction: string
|
||||
onStopLoading: () => void
|
||||
onStartBrowserOAuth: () => void
|
||||
onAskLogout: () => void
|
||||
}
|
||||
|
||||
export function AntigravityCredentialCard({
|
||||
status,
|
||||
activeAction,
|
||||
onStopLoading,
|
||||
onStartBrowserOAuth,
|
||||
onAskLogout,
|
||||
}: AntigravityCredentialCardProps) {
|
||||
const { t } = useTranslation()
|
||||
const actionBusy = activeAction !== ""
|
||||
const browserLoading = activeAction === "google-antigravity:browser"
|
||||
|
||||
return (
|
||||
<CredentialCard
|
||||
title={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="border-muted inline-flex size-6 items-center justify-center rounded-full border">
|
||||
<IconBrandGoogle className="size-3.5" />
|
||||
</span>
|
||||
<span>Google Antigravity</span>
|
||||
</span>
|
||||
}
|
||||
description={t("credentials.providers.antigravity.description")}
|
||||
status={status?.status ?? "not_logged_in"}
|
||||
authMethod={status?.auth_method}
|
||||
details={
|
||||
<div className="space-y-1">
|
||||
{status?.email && (
|
||||
<p>
|
||||
{t("credentials.labels.email")}: {status.email}
|
||||
</p>
|
||||
)}
|
||||
{status?.project_id && (
|
||||
<p>
|
||||
{t("credentials.labels.project")}: {status.project_id}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
<div className="border-muted flex h-[120px] flex-col justify-center rounded-lg border p-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={actionBusy}
|
||||
onClick={onStartBrowserOAuth}
|
||||
>
|
||||
{browserLoading && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<IconLockOpen className="size-4" />
|
||||
{t("credentials.actions.browser")}
|
||||
</Button>
|
||||
{browserLoading && (
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="secondary"
|
||||
onClick={onStopLoading}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<IconPlayerStopFilled className="size-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
status?.logged_in ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={actionBusy}
|
||||
onClick={onAskLogout}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
{activeAction === "google-antigravity:logout" && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
{t("credentials.actions.logout")}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
import type { OAuthProviderStatus } from "@/api/oauth"
|
||||
|
||||
import { ProviderStatusLine } from "./provider-status-line"
|
||||
|
||||
interface CredentialCardProps {
|
||||
title: ReactNode
|
||||
description: string
|
||||
status: OAuthProviderStatus["status"]
|
||||
authMethod?: string
|
||||
details?: ReactNode
|
||||
actions: ReactNode
|
||||
footer?: ReactNode
|
||||
}
|
||||
|
||||
export function CredentialCard({
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
authMethod,
|
||||
details,
|
||||
actions,
|
||||
footer,
|
||||
}: CredentialCardProps) {
|
||||
return (
|
||||
<section className="bg-card flex h-full flex-col rounded-xl border p-4">
|
||||
<div className="min-h-16">
|
||||
<h3 className="text-base font-semibold">{title}</h3>
|
||||
<p className="text-muted-foreground mt-1 text-xs">{description}</p>
|
||||
</div>
|
||||
|
||||
<ProviderStatusLine status={status} authMethod={authMethod} />
|
||||
<div className="text-muted-foreground mt-3 min-h-11 text-xs leading-5">
|
||||
{details}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex flex-col gap-4 pt-4">
|
||||
<div className="min-h-[112px]">{actions}</div>
|
||||
<div className="min-h-8">{footer}</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { IconLoader2 } from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import { PageHeader } from "@/components/page-header"
|
||||
import { useCredentialsPage } from "@/hooks/use-credentials-page"
|
||||
|
||||
import { AnthropicCredentialCard } from "./anthropic-credential-card"
|
||||
import { AntigravityCredentialCard } from "./antigravity-credential-card"
|
||||
import { DeviceCodeSheet } from "./device-code-sheet"
|
||||
import { LogoutConfirmDialog } from "./logout-confirm-dialog"
|
||||
import { OpenAICredentialCard } from "./openai-credential-card"
|
||||
|
||||
export function CredentialsPage() {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
loading,
|
||||
error,
|
||||
activeAction,
|
||||
activeFlow,
|
||||
flowHint,
|
||||
openAIToken,
|
||||
anthropicToken,
|
||||
openaiStatus,
|
||||
anthropicStatus,
|
||||
antigravityStatus,
|
||||
logoutDialogOpen,
|
||||
logoutConfirmProvider,
|
||||
logoutProviderLabel,
|
||||
deviceSheetOpen,
|
||||
deviceFlow,
|
||||
setOpenAIToken,
|
||||
setAnthropicToken,
|
||||
startBrowserOAuth,
|
||||
startOpenAIDeviceCode,
|
||||
stopLoading,
|
||||
saveToken,
|
||||
askLogout,
|
||||
handleConfirmLogout,
|
||||
handleLogoutDialogOpenChange,
|
||||
handleDeviceSheetOpenChange,
|
||||
} = useCredentialsPage()
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<PageHeader title={t("navigation.credentials")} />
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 sm:px-6">
|
||||
<div className="pt-2">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("credentials.description")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-destructive bg-destructive/10 mt-4 rounded-lg px-4 py-3 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeFlow && (
|
||||
<div className="bg-muted mt-4 rounded-lg border px-4 py-3 text-sm">
|
||||
<p className="font-medium">{t("credentials.flow.current")}</p>
|
||||
<p className="text-muted-foreground mt-1">{flowHint}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-muted-foreground flex items-center gap-2 py-10 text-sm">
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
{t("credentials.loading")}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 py-5 lg:auto-rows-fr lg:grid-cols-3">
|
||||
<OpenAICredentialCard
|
||||
status={openaiStatus}
|
||||
activeAction={activeAction}
|
||||
token={openAIToken}
|
||||
onTokenChange={setOpenAIToken}
|
||||
onStartBrowserOAuth={() => void startBrowserOAuth("openai")}
|
||||
onStartDeviceCode={() => void startOpenAIDeviceCode()}
|
||||
onStopLoading={stopLoading}
|
||||
onSaveToken={() => void saveToken("openai", openAIToken.trim())}
|
||||
onAskLogout={() => askLogout("openai")}
|
||||
/>
|
||||
|
||||
<AnthropicCredentialCard
|
||||
status={anthropicStatus}
|
||||
activeAction={activeAction}
|
||||
token={anthropicToken}
|
||||
onTokenChange={setAnthropicToken}
|
||||
onStopLoading={stopLoading}
|
||||
onSaveToken={() =>
|
||||
void saveToken("anthropic", anthropicToken.trim())
|
||||
}
|
||||
onAskLogout={() => askLogout("anthropic")}
|
||||
/>
|
||||
|
||||
<AntigravityCredentialCard
|
||||
status={antigravityStatus}
|
||||
activeAction={activeAction}
|
||||
onStopLoading={stopLoading}
|
||||
onStartBrowserOAuth={() =>
|
||||
void startBrowserOAuth("google-antigravity")
|
||||
}
|
||||
onAskLogout={() => askLogout("google-antigravity")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<LogoutConfirmDialog
|
||||
open={logoutDialogOpen}
|
||||
providerLabel={logoutProviderLabel}
|
||||
isSubmitting={activeAction === `${logoutConfirmProvider}:logout`}
|
||||
onOpenChange={handleLogoutDialogOpenChange}
|
||||
onConfirm={handleConfirmLogout}
|
||||
/>
|
||||
|
||||
<DeviceCodeSheet
|
||||
open={deviceSheetOpen}
|
||||
flow={deviceFlow}
|
||||
flowHint={flowHint}
|
||||
onOpenChange={handleDeviceSheetOpenChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { IconRefresh } from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { OAuthFlowState } from "@/api/oauth"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
|
||||
interface DeviceCodeSheetProps {
|
||||
open: boolean
|
||||
flow: OAuthFlowState | null
|
||||
flowHint: string
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function DeviceCodeSheet({
|
||||
open,
|
||||
flow,
|
||||
flowHint,
|
||||
onOpenChange,
|
||||
}: DeviceCodeSheetProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="data-[side=right]:!w-full data-[side=right]:sm:!w-[480px] data-[side=right]:sm:!max-w-[480px]"
|
||||
>
|
||||
<SheetHeader className="border-b-muted border-b px-6 py-5">
|
||||
<SheetTitle>{t("credentials.device.title")}</SheetTitle>
|
||||
<SheetDescription>
|
||||
{t("credentials.device.description")}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-4 px-6 py-5">
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs uppercase">
|
||||
{t("credentials.device.code")}
|
||||
</p>
|
||||
<p className="mt-1 rounded-md border px-3 py-2 font-mono text-lg font-semibold tracking-wide">
|
||||
{flow?.user_code || "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-muted-foreground text-xs uppercase">
|
||||
{t("credentials.device.url")}
|
||||
</p>
|
||||
<a
|
||||
href={flow?.verify_url || "#"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-primary mt-1 block text-sm break-all underline"
|
||||
>
|
||||
{flow?.verify_url || "-"}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
||||
<IconRefresh className="size-4" />
|
||||
{t("credentials.device.polling")}
|
||||
</div>
|
||||
|
||||
{flow && (
|
||||
<div className="bg-muted rounded-md border px-3 py-2 text-sm">
|
||||
{flowHint}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SheetFooter className="border-t-muted border-t px-6 py-4">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button asChild disabled={!flow?.verify_url}>
|
||||
<a href={flow?.verify_url || "#"} target="_blank" rel="noreferrer">
|
||||
{t("credentials.device.open")}
|
||||
</a>
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { IconLoader2 } from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
|
||||
interface LogoutConfirmDialogProps {
|
||||
open: boolean
|
||||
providerLabel: string
|
||||
isSubmitting: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onConfirm: () => void | Promise<void>
|
||||
}
|
||||
|
||||
export function LogoutConfirmDialog({
|
||||
open,
|
||||
providerLabel,
|
||||
isSubmitting,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
}: LogoutConfirmDialogProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
{t("credentials.logoutDialog.title")}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t(
|
||||
"credentials.logoutDialog.description",
|
||||
"This will remove your saved credential for {{provider}}.",
|
||||
{ provider: providerLabel },
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onConfirm} variant="destructive">
|
||||
{isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
|
||||
{t("credentials.actions.logout")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import {
|
||||
IconBrandOpenai,
|
||||
IconClockHour4,
|
||||
IconKey,
|
||||
IconLoader2,
|
||||
IconPlayerStopFilled,
|
||||
} from "@tabler/icons-react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { OAuthProviderStatus } from "@/api/oauth"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
import { CredentialCard } from "./credential-card"
|
||||
|
||||
interface OpenAICredentialCardProps {
|
||||
status?: OAuthProviderStatus
|
||||
activeAction: string
|
||||
token: string
|
||||
onTokenChange: (value: string) => void
|
||||
onStartBrowserOAuth: () => void
|
||||
onStartDeviceCode: () => void
|
||||
onStopLoading: () => void
|
||||
onSaveToken: () => void
|
||||
onAskLogout: () => void
|
||||
}
|
||||
|
||||
export function OpenAICredentialCard({
|
||||
status,
|
||||
activeAction,
|
||||
token,
|
||||
onTokenChange,
|
||||
onStartBrowserOAuth,
|
||||
onStartDeviceCode,
|
||||
onStopLoading,
|
||||
onSaveToken,
|
||||
onAskLogout,
|
||||
}: OpenAICredentialCardProps) {
|
||||
const { t } = useTranslation()
|
||||
const actionBusy = activeAction !== ""
|
||||
const browserLoading = activeAction === "openai:browser"
|
||||
const deviceLoading = activeAction === "openai:device"
|
||||
const oauthLoading = browserLoading || deviceLoading
|
||||
const tokenLoading = activeAction === "openai:token"
|
||||
|
||||
return (
|
||||
<CredentialCard
|
||||
title={
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="border-muted inline-flex size-6 items-center justify-center rounded-full border">
|
||||
<IconBrandOpenai className="size-3.5" />
|
||||
</span>
|
||||
<span>OpenAI</span>
|
||||
</span>
|
||||
}
|
||||
description={t("credentials.providers.openai.description")}
|
||||
status={status?.status ?? "not_logged_in"}
|
||||
authMethod={status?.auth_method}
|
||||
details={
|
||||
status?.account_id ? (
|
||||
<p>
|
||||
{t("credentials.labels.account")}: {status.account_id}
|
||||
</p>
|
||||
) : null
|
||||
}
|
||||
actions={
|
||||
<div className="border-muted flex h-[120px] flex-col rounded-lg border p-3">
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
<div className="min-h-8">
|
||||
<div className="flex flex-nowrap items-center gap-2 overflow-x-auto">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={actionBusy}
|
||||
onClick={onStartBrowserOAuth}
|
||||
>
|
||||
{browserLoading && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<IconBrandOpenai className="size-4" />
|
||||
{t("credentials.actions.browser")}
|
||||
</Button>
|
||||
|
||||
{oauthLoading && !deviceLoading && (
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="secondary"
|
||||
onClick={onStopLoading}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<IconPlayerStopFilled className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={actionBusy}
|
||||
onClick={onStartDeviceCode}
|
||||
>
|
||||
{deviceLoading && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<IconClockHour4 className="size-4" />
|
||||
{t("credentials.actions.deviceCode")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-9 flex-1">
|
||||
<div className="flex h-full items-center gap-2">
|
||||
<Input
|
||||
value={token}
|
||||
onChange={(e) => onTokenChange(e.target.value)}
|
||||
type="password"
|
||||
placeholder={t("credentials.fields.openaiToken")}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={actionBusy || !token.trim()}
|
||||
onClick={onSaveToken}
|
||||
>
|
||||
{tokenLoading && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
<IconKey className="size-4" />
|
||||
{t("credentials.actions.saveToken")}
|
||||
</Button>
|
||||
{tokenLoading && (
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={onStopLoading}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<IconPlayerStopFilled className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
status?.logged_in ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={actionBusy}
|
||||
onClick={onAskLogout}
|
||||
className="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
{activeAction === "openai:logout" && (
|
||||
<IconLoader2 className="size-4 animate-spin" />
|
||||
)}
|
||||
{t("credentials.actions.logout")}
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import type { OAuthProviderStatus } from "@/api/oauth"
|
||||
|
||||
interface ProviderStatusLineProps {
|
||||
status: OAuthProviderStatus["status"]
|
||||
authMethod?: string
|
||||
}
|
||||
|
||||
export function ProviderStatusLine({
|
||||
status,
|
||||
authMethod,
|
||||
}: ProviderStatusLineProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const style =
|
||||
status === "connected"
|
||||
? "bg-green-500/10 text-green-700 dark:text-green-300"
|
||||
: status === "needs_refresh"
|
||||
? "bg-amber-500/10 text-amber-700 dark:text-amber-300"
|
||||
: status === "expired"
|
||||
? "bg-red-500/10 text-red-700 dark:text-red-300"
|
||||
: "bg-muted text-muted-foreground"
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className={`rounded px-2 py-1 text-xs font-medium ${style}`}>
|
||||
{status === "connected"
|
||||
? t("credentials.status.connected")
|
||||
: status === "needs_refresh"
|
||||
? t("credentials.status.needsRefresh")
|
||||
: status === "expired"
|
||||
? t("credentials.status.expired")
|
||||
: t("credentials.status.notLoggedIn")}
|
||||
</span>
|
||||
{authMethod && (
|
||||
<span className="text-muted-foreground text-xs uppercase">
|
||||
{authMethod}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user