Spaces:
Paused
Paused
File size: 4,429 Bytes
4a940a5 b7d4394 4ebb914 b7d4394 5f8456f b7d4394 4a940a5 4ebb914 4a940a5 06a5304 3cf831b 06a5304 b7d4394 4ebb914 5db3721 06a5304 b7d4394 4ebb914 2ee9797 4ebb914 b7d4394 06a5304 3cf831b 06a5304 b7d4394 e6a1587 4ebb914 b7d4394 4ebb914 b7d4394 7824fcd b7d4394 5f8456f 2f3712c 5f8456f 2f3712c b7d4394 7824fcd b7d4394 06a5304 b7d4394 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | import { I18nProvider } from "../../shared/i18n/context";
import { ThemeProvider } from "../../shared/theme/context";
import { Header } from "./components/Header";
import { AccountList } from "./components/AccountList";
import { AddAccount } from "./components/AddAccount";
import { ProxyPool } from "./components/ProxyPool";
import { ApiConfig } from "./components/ApiConfig";
import { AnthropicSetup } from "./components/AnthropicSetup";
import { CodeExamples } from "./components/CodeExamples";
import { Footer } from "./components/Footer";
import { useAccounts } from "../../shared/hooks/use-accounts";
import { useProxies } from "../../shared/hooks/use-proxies";
import { useStatus } from "../../shared/hooks/use-status";
import { useUpdateStatus } from "../../shared/hooks/use-update-status";
import { useI18n } from "../../shared/i18n/context";
function useUpdateMessage() {
const { t } = useI18n();
const update = useUpdateStatus();
let msg: string | null = null;
let color = "text-primary";
if (!update.checking && update.result) {
const parts: string[] = [];
const r = update.result;
if (r.proxy?.error) {
parts.push(`Proxy: ${r.proxy.error}`);
color = "text-red-500";
} else if (r.proxy?.update_applied) {
parts.push(t("updateApplied"));
color = "text-blue-500";
} else if (r.proxy && r.proxy.commits_behind > 0) {
parts.push(`Proxy: ${r.proxy.commits_behind} ${t("commits")} ${t("proxyBehind")}`);
color = "text-amber-500";
}
if (r.codex?.error) {
parts.push(`Codex: ${r.codex.error}`);
color = "text-red-500";
} else if (r.codex_update_in_progress) {
parts.push(t("fingerprintUpdating"));
} else if (r.codex?.version_changed) {
parts.push(`Codex: v${r.codex.current_version}`);
color = "text-blue-500";
}
msg = parts.length > 0 ? parts.join(" · ") : t("upToDate");
} else if (!update.checking && update.error) {
msg = update.error;
color = "text-red-500";
}
return { ...update, msg, color };
}
function Dashboard() {
const accounts = useAccounts();
const proxies = useProxies();
const status = useStatus(accounts.list.length);
const update = useUpdateMessage();
const handleProxyChange = async (accountId: string, proxyId: string) => {
accounts.patchLocal(accountId, { proxyId });
await proxies.assignProxy(accountId, proxyId);
};
return (
<>
<Header
onAddAccount={accounts.startAdd}
onCheckUpdate={update.checkForUpdate}
checking={update.checking}
updateStatusMsg={update.msg}
updateStatusColor={update.color}
version={update.status?.proxy.version ?? null}
/>
<main class="flex-grow px-4 md:px-8 lg:px-40 py-8 flex justify-center">
<div class="flex flex-col w-full max-w-[960px] gap-6">
<AddAccount
visible={accounts.addVisible}
onSubmitRelay={accounts.submitRelay}
addInfo={accounts.addInfo}
addError={accounts.addError}
/>
<AccountList
accounts={accounts.list}
loading={accounts.loading}
onDelete={accounts.deleteAccount}
onRefresh={accounts.refresh}
refreshing={accounts.refreshing}
lastUpdated={accounts.lastUpdated}
proxies={proxies.proxies}
onProxyChange={handleProxyChange}
/>
<ProxyPool proxies={proxies} />
<ApiConfig
baseUrl={status.baseUrl}
apiKey={status.apiKey}
models={status.models}
selectedModel={status.selectedModel}
onModelChange={status.setSelectedModel}
modelFamilies={status.modelFamilies}
selectedEffort={status.selectedEffort}
onEffortChange={status.setSelectedEffort}
/>
<AnthropicSetup
apiKey={status.apiKey}
selectedModel={status.selectedModel}
/>
<CodeExamples
baseUrl={status.baseUrl}
apiKey={status.apiKey}
model={status.selectedModel}
reasoningEffort={status.selectedEffort}
/>
</div>
</main>
<Footer updateStatus={update.status} />
</>
);
}
export function App() {
return (
<I18nProvider>
<ThemeProvider>
<Dashboard />
</ThemeProvider>
</I18nProvider>
);
}
|