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,87 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
|
||||
import { type ModelInfo, getModels, setDefaultModel } from "@/api/models"
|
||||
|
||||
interface UseChatModelsOptions {
|
||||
isConnected: boolean
|
||||
}
|
||||
|
||||
function isLocalModel(model: ModelInfo): boolean {
|
||||
const isLocalHostBase = Boolean(
|
||||
model.api_base?.includes("localhost") ||
|
||||
model.api_base?.includes("127.0.0.1"),
|
||||
)
|
||||
|
||||
return (
|
||||
model.auth_method === "local" || (!model.auth_method && isLocalHostBase)
|
||||
)
|
||||
}
|
||||
|
||||
export function useChatModels({ isConnected }: UseChatModelsOptions) {
|
||||
const [modelList, setModelList] = useState<ModelInfo[]>([])
|
||||
const [defaultModelName, setDefaultModelName] = useState("")
|
||||
|
||||
const loadModels = useCallback(async () => {
|
||||
try {
|
||||
const data = await getModels()
|
||||
setModelList(data.models)
|
||||
if (data.models.some((m) => m.model_name === data.default_model)) {
|
||||
setDefaultModelName(data.default_model)
|
||||
}
|
||||
} catch {
|
||||
// silently fail
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const timerId = setTimeout(() => {
|
||||
void loadModels()
|
||||
}, 0)
|
||||
|
||||
return () => clearTimeout(timerId)
|
||||
}, [isConnected, loadModels])
|
||||
|
||||
const handleSetDefault = useCallback(async (modelName: string) => {
|
||||
try {
|
||||
await setDefaultModel(modelName)
|
||||
setDefaultModelName(modelName)
|
||||
setModelList((prev) =>
|
||||
prev.map((m) => ({ ...m, is_default: m.model_name === modelName })),
|
||||
)
|
||||
} catch (err) {
|
||||
console.error("Failed to set default model:", err)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const hasConfiguredModels = useMemo(
|
||||
() => modelList.some((m) => m.configured),
|
||||
[modelList],
|
||||
)
|
||||
|
||||
const oauthModels = useMemo(
|
||||
() => modelList.filter((m) => m.configured && m.auth_method === "oauth"),
|
||||
[modelList],
|
||||
)
|
||||
|
||||
const localModels = useMemo(
|
||||
() => modelList.filter((m) => m.configured && isLocalModel(m)),
|
||||
[modelList],
|
||||
)
|
||||
|
||||
const apiKeyModels = useMemo(
|
||||
() =>
|
||||
modelList.filter(
|
||||
(m) => m.configured && m.auth_method !== "oauth" && !isLocalModel(m),
|
||||
),
|
||||
[modelList],
|
||||
)
|
||||
|
||||
return {
|
||||
defaultModelName,
|
||||
hasConfiguredModels,
|
||||
apiKeyModels,
|
||||
oauthModels,
|
||||
localModels,
|
||||
handleSetDefault,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
import {
|
||||
type OAuthFlowState,
|
||||
type OAuthProvider,
|
||||
type OAuthProviderStatus,
|
||||
getOAuthFlow,
|
||||
getOAuthProviders,
|
||||
loginOAuth,
|
||||
logoutOAuth,
|
||||
pollOAuthFlow,
|
||||
} from "@/api/oauth"
|
||||
|
||||
type FlowWatchMode = "" | "status" | "poll"
|
||||
|
||||
function getProviderLabel(provider: OAuthProvider | ""): string {
|
||||
if (provider === "openai") return "OpenAI"
|
||||
if (provider === "anthropic") return "Anthropic"
|
||||
if (provider === "google-antigravity") return "Google Antigravity"
|
||||
return ""
|
||||
}
|
||||
|
||||
export function useCredentialsPage() {
|
||||
const { t } = useTranslation()
|
||||
const [providers, setProviders] = useState<OAuthProviderStatus[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState("")
|
||||
|
||||
const [activeAction, setActiveAction] = useState("")
|
||||
const [activeFlow, setActiveFlow] = useState<OAuthFlowState | null>(null)
|
||||
const actionTokenRef = useRef(0)
|
||||
|
||||
const [watchFlowID, setWatchFlowID] = useState("")
|
||||
const [watchMode, setWatchMode] = useState<FlowWatchMode>("")
|
||||
const [pollIntervalMs, setPollIntervalMs] = useState(2000)
|
||||
|
||||
const [openAIToken, setOpenAIToken] = useState("")
|
||||
const [anthropicToken, setAnthropicToken] = useState("")
|
||||
|
||||
const [logoutDialogOpen, setLogoutDialogOpen] = useState(false)
|
||||
const [logoutConfirmProvider, setLogoutConfirmProvider] = useState<
|
||||
OAuthProvider | ""
|
||||
>("")
|
||||
|
||||
const [deviceSheetOpen, setDeviceSheetOpen] = useState(false)
|
||||
const [deviceFlow, setDeviceFlow] = useState<OAuthFlowState | null>(null)
|
||||
|
||||
const loadProviders = useCallback(async () => {
|
||||
try {
|
||||
const data = await getOAuthProviders()
|
||||
setProviders(data.providers)
|
||||
setError("")
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : t("credentials.errors.loadFailed"),
|
||||
)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [t])
|
||||
|
||||
useEffect(() => {
|
||||
void loadProviders()
|
||||
}, [loadProviders])
|
||||
|
||||
useEffect(() => {
|
||||
if (!watchFlowID || !watchMode) {
|
||||
return
|
||||
}
|
||||
|
||||
let canceled = false
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const step = async () => {
|
||||
try {
|
||||
const flow =
|
||||
watchMode === "poll"
|
||||
? await pollOAuthFlow(watchFlowID)
|
||||
: await getOAuthFlow(watchFlowID)
|
||||
|
||||
if (canceled) {
|
||||
return
|
||||
}
|
||||
|
||||
setActiveFlow(flow)
|
||||
setDeviceFlow((prev) =>
|
||||
prev?.flow_id === flow.flow_id ? { ...prev, ...flow } : prev,
|
||||
)
|
||||
|
||||
if (flow.status === "pending") {
|
||||
timer = setTimeout(step, pollIntervalMs)
|
||||
return
|
||||
}
|
||||
|
||||
if (watchMode === "poll") {
|
||||
setDeviceSheetOpen(false)
|
||||
}
|
||||
|
||||
setWatchFlowID("")
|
||||
setWatchMode("")
|
||||
setActiveAction("")
|
||||
await loadProviders()
|
||||
} catch (err) {
|
||||
if (canceled) {
|
||||
return
|
||||
}
|
||||
setWatchFlowID("")
|
||||
setWatchMode("")
|
||||
setActiveAction("")
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: t("credentials.errors.flowFailed"),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
void step()
|
||||
|
||||
return () => {
|
||||
canceled = true
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}
|
||||
}, [loadProviders, pollIntervalMs, t, watchFlowID, watchMode])
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const flowID = params.get("oauth_flow_id")
|
||||
if (!flowID) {
|
||||
return
|
||||
}
|
||||
|
||||
setWatchFlowID(flowID)
|
||||
setWatchMode("status")
|
||||
setPollIntervalMs(700)
|
||||
|
||||
window.history.replaceState({}, "", window.location.pathname)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
const data = event.data as
|
||||
| { type?: string; flowId?: string; status?: string }
|
||||
| undefined
|
||||
if (!data || data.type !== "picoclaw-oauth-result" || !data.flowId) {
|
||||
return
|
||||
}
|
||||
|
||||
setWatchFlowID(data.flowId)
|
||||
setWatchMode("status")
|
||||
setPollIntervalMs(700)
|
||||
}
|
||||
|
||||
window.addEventListener("message", onMessage)
|
||||
return () => window.removeEventListener("message", onMessage)
|
||||
}, [])
|
||||
|
||||
const providersMap = useMemo(() => {
|
||||
const map = new Map<OAuthProvider, OAuthProviderStatus>()
|
||||
for (const item of providers) {
|
||||
map.set(item.provider, item)
|
||||
}
|
||||
return map
|
||||
}, [providers])
|
||||
|
||||
const openaiStatus = providersMap.get("openai")
|
||||
const anthropicStatus = providersMap.get("anthropic")
|
||||
const antigravityStatus = providersMap.get("google-antigravity")
|
||||
|
||||
const bumpActionToken = useCallback(() => {
|
||||
actionTokenRef.current += 1
|
||||
return actionTokenRef.current
|
||||
}, [])
|
||||
|
||||
const isActionTokenCurrent = useCallback((token: number) => {
|
||||
return actionTokenRef.current === token
|
||||
}, [])
|
||||
|
||||
const startBrowserOAuth = useCallback(
|
||||
async (provider: OAuthProvider) => {
|
||||
const actionToken = bumpActionToken()
|
||||
setActiveAction(`${provider}:browser`)
|
||||
setError("")
|
||||
|
||||
const authTab = window.open("", "_blank")
|
||||
if (!authTab) {
|
||||
if (!isActionTokenCurrent(actionToken)) {
|
||||
return
|
||||
}
|
||||
setActiveAction("")
|
||||
setError(t("credentials.errors.popupBlocked"))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await loginOAuth({ provider, method: "browser" })
|
||||
if (!isActionTokenCurrent(actionToken)) {
|
||||
authTab.close()
|
||||
return
|
||||
}
|
||||
if (!resp.auth_url || !resp.flow_id) {
|
||||
throw new Error(t("credentials.errors.invalidBrowserResponse"))
|
||||
}
|
||||
|
||||
authTab.location.href = resp.auth_url
|
||||
|
||||
setActiveFlow({
|
||||
flow_id: resp.flow_id,
|
||||
provider,
|
||||
method: "browser",
|
||||
status: "pending",
|
||||
expires_at: resp.expires_at,
|
||||
})
|
||||
setWatchFlowID(resp.flow_id)
|
||||
setWatchMode("status")
|
||||
setPollIntervalMs(2000)
|
||||
} catch (err) {
|
||||
if (!isActionTokenCurrent(actionToken)) {
|
||||
authTab.close()
|
||||
return
|
||||
}
|
||||
authTab.close()
|
||||
setActiveAction("")
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: t("credentials.errors.loginFailed"),
|
||||
)
|
||||
}
|
||||
},
|
||||
[bumpActionToken, isActionTokenCurrent, t],
|
||||
)
|
||||
|
||||
const startOpenAIDeviceCode = useCallback(async () => {
|
||||
const actionToken = bumpActionToken()
|
||||
setActiveAction("openai:device")
|
||||
setError("")
|
||||
|
||||
try {
|
||||
const resp = await loginOAuth({
|
||||
provider: "openai",
|
||||
method: "device_code",
|
||||
})
|
||||
if (!isActionTokenCurrent(actionToken)) {
|
||||
return
|
||||
}
|
||||
if (!resp.flow_id || !resp.user_code || !resp.verify_url) {
|
||||
throw new Error(t("credentials.errors.invalidDeviceResponse"))
|
||||
}
|
||||
|
||||
const flow: OAuthFlowState = {
|
||||
flow_id: resp.flow_id,
|
||||
provider: "openai",
|
||||
method: "device_code",
|
||||
status: "pending",
|
||||
user_code: resp.user_code,
|
||||
verify_url: resp.verify_url,
|
||||
interval: resp.interval,
|
||||
expires_at: resp.expires_at,
|
||||
}
|
||||
|
||||
setDeviceFlow(flow)
|
||||
setDeviceSheetOpen(true)
|
||||
setActiveFlow(flow)
|
||||
setWatchFlowID(resp.flow_id)
|
||||
setWatchMode("poll")
|
||||
setPollIntervalMs(Math.max(1000, (resp.interval ?? 5) * 1000))
|
||||
} catch (err) {
|
||||
if (!isActionTokenCurrent(actionToken)) {
|
||||
return
|
||||
}
|
||||
setActiveAction("")
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: t("credentials.errors.loginFailed"),
|
||||
)
|
||||
}
|
||||
}, [bumpActionToken, isActionTokenCurrent, t])
|
||||
|
||||
const saveToken = useCallback(
|
||||
async (provider: OAuthProvider, token: string) => {
|
||||
const actionID = `${provider}:token`
|
||||
setActiveAction(actionID)
|
||||
setError("")
|
||||
|
||||
try {
|
||||
await loginOAuth({ provider, method: "token", token })
|
||||
if (provider === "openai") {
|
||||
setOpenAIToken("")
|
||||
}
|
||||
if (provider === "anthropic") {
|
||||
setAnthropicToken("")
|
||||
}
|
||||
await loadProviders()
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: t("credentials.errors.loginFailed"),
|
||||
)
|
||||
} finally {
|
||||
setActiveAction("")
|
||||
}
|
||||
},
|
||||
[loadProviders, t],
|
||||
)
|
||||
|
||||
const doLogout = useCallback(
|
||||
async (provider: OAuthProvider) => {
|
||||
const actionID = `${provider}:logout`
|
||||
setActiveAction(actionID)
|
||||
setError("")
|
||||
|
||||
try {
|
||||
await logoutOAuth(provider)
|
||||
await loadProviders()
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: t("credentials.errors.logoutFailed"),
|
||||
)
|
||||
} finally {
|
||||
setActiveAction("")
|
||||
}
|
||||
},
|
||||
[loadProviders, t],
|
||||
)
|
||||
|
||||
const askLogout = useCallback((provider: OAuthProvider) => {
|
||||
setLogoutConfirmProvider(provider)
|
||||
setLogoutDialogOpen(true)
|
||||
}, [])
|
||||
|
||||
const handleConfirmLogout = useCallback(async () => {
|
||||
if (!logoutConfirmProvider) {
|
||||
return
|
||||
}
|
||||
await doLogout(logoutConfirmProvider)
|
||||
setLogoutDialogOpen(false)
|
||||
setLogoutConfirmProvider("")
|
||||
}, [doLogout, logoutConfirmProvider])
|
||||
|
||||
const handleLogoutDialogOpenChange = useCallback((open: boolean) => {
|
||||
setLogoutDialogOpen(open)
|
||||
if (!open) {
|
||||
setLogoutConfirmProvider("")
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDeviceSheetOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
setDeviceSheetOpen(open)
|
||||
if (open) {
|
||||
return
|
||||
}
|
||||
|
||||
if (watchMode === "poll") {
|
||||
setWatchFlowID("")
|
||||
setWatchMode("")
|
||||
if (activeAction === "openai:device") {
|
||||
setActiveAction("")
|
||||
}
|
||||
}
|
||||
|
||||
setDeviceFlow(null)
|
||||
if (
|
||||
activeFlow?.method === "device_code" &&
|
||||
activeFlow.status === "pending"
|
||||
) {
|
||||
setActiveFlow(null)
|
||||
}
|
||||
},
|
||||
[activeAction, activeFlow, watchMode],
|
||||
)
|
||||
|
||||
const stopLoading = useCallback(() => {
|
||||
bumpActionToken()
|
||||
setWatchFlowID("")
|
||||
setWatchMode("")
|
||||
setActiveAction("")
|
||||
setDeviceSheetOpen(false)
|
||||
setDeviceFlow(null)
|
||||
setActiveFlow((prev) => (prev?.status === "pending" ? null : prev))
|
||||
}, [bumpActionToken])
|
||||
|
||||
const logoutProviderLabel = getProviderLabel(logoutConfirmProvider)
|
||||
|
||||
const flowHint = useMemo(() => {
|
||||
if (!activeFlow) {
|
||||
return ""
|
||||
}
|
||||
if (activeFlow.status === "pending") {
|
||||
return t("credentials.flow.pending")
|
||||
}
|
||||
if (activeFlow.status === "success") {
|
||||
return t("credentials.flow.success")
|
||||
}
|
||||
if (activeFlow.status === "expired") {
|
||||
return t("credentials.flow.expired")
|
||||
}
|
||||
return activeFlow.error || t("credentials.flow.error")
|
||||
}, [activeFlow, t])
|
||||
|
||||
return {
|
||||
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,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { useAtom } from "jotai"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
|
||||
import {
|
||||
type GatewayStatusResponse,
|
||||
getGatewayStatus,
|
||||
startGateway,
|
||||
stopGateway,
|
||||
} from "@/api/gateway"
|
||||
import { gatewayAtom } from "@/store"
|
||||
|
||||
// Global variable to ensure we only have one SSE connection
|
||||
let sseInitialized = false
|
||||
|
||||
export function useGateway() {
|
||||
const [{ status: state, canStart }, setGateway] = useAtom(gatewayAtom)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const applyGatewayStatus = useCallback(
|
||||
(data: GatewayStatusResponse) => {
|
||||
setGateway((prev) => ({
|
||||
...prev,
|
||||
status: data.gateway_status ?? "unknown",
|
||||
canStart: data.gateway_start_allowed ?? true,
|
||||
}))
|
||||
},
|
||||
[setGateway],
|
||||
)
|
||||
|
||||
// Initialize global SSE connection once
|
||||
useEffect(() => {
|
||||
if (sseInitialized) return
|
||||
sseInitialized = true
|
||||
|
||||
getGatewayStatus()
|
||||
.then((data) => applyGatewayStatus(data))
|
||||
.catch(() => {
|
||||
setGateway({
|
||||
status: "unknown",
|
||||
canStart: true,
|
||||
})
|
||||
})
|
||||
|
||||
const statusPoll = window.setInterval(() => {
|
||||
getGatewayStatus()
|
||||
.then((data) => applyGatewayStatus(data))
|
||||
.catch(() => {
|
||||
// ignore polling errors
|
||||
})
|
||||
}, 5000)
|
||||
|
||||
// Subscribe to SSE for real-time updates globally
|
||||
const es = new EventSource("/api/gateway/events")
|
||||
|
||||
es.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
if (
|
||||
data.gateway_status ||
|
||||
typeof data.gateway_start_allowed === "boolean"
|
||||
) {
|
||||
setGateway((prev) => ({
|
||||
...prev,
|
||||
status: data.gateway_status ?? prev.status,
|
||||
canStart:
|
||||
typeof data.gateway_start_allowed === "boolean"
|
||||
? data.gateway_start_allowed
|
||||
: prev.canStart,
|
||||
}))
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
es.onerror = () => {
|
||||
// EventSource will auto-reconnect
|
||||
setGateway((prev) => ({ ...prev, status: "unknown" }))
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.clearInterval(statusPoll)
|
||||
es.close()
|
||||
sseInitialized = false
|
||||
}
|
||||
}, [applyGatewayStatus, setGateway])
|
||||
|
||||
const start = useCallback(async () => {
|
||||
if (!canStart) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
await startGateway()
|
||||
// SSE will push the real state changes, but set optimistic state
|
||||
setGateway((prev) => ({ ...prev, status: "starting" }))
|
||||
} catch (err) {
|
||||
console.error("Failed to start gateway:", err)
|
||||
try {
|
||||
const status = await getGatewayStatus()
|
||||
applyGatewayStatus(status)
|
||||
} catch {
|
||||
setGateway((prev) => ({ ...prev, status: "unknown" }))
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [applyGatewayStatus, canStart, setGateway])
|
||||
|
||||
const stop = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
await stopGateway()
|
||||
} catch (err) {
|
||||
console.error("Failed to stop gateway:", err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { state, loading, canStart, start, stop }
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
import dayjs from "dayjs"
|
||||
import { useAtomValue } from "jotai"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
|
||||
import { getPicoToken } from "@/api/pico"
|
||||
import { getSessionHistory } from "@/api/sessions"
|
||||
import { gatewayAtom } from "@/store"
|
||||
|
||||
// Pico Protocol message types
|
||||
interface PicoMessage {
|
||||
type: string
|
||||
id?: string
|
||||
session_id?: string
|
||||
timestamp?: number | string
|
||||
payload?: Record<string, unknown>
|
||||
}
|
||||
|
||||
export interface ChatMessage {
|
||||
id: string
|
||||
role: "user" | "assistant"
|
||||
content: string
|
||||
timestamp: number | string
|
||||
}
|
||||
|
||||
type ConnectionState = "disconnected" | "connecting" | "connected" | "error"
|
||||
|
||||
function generateSessionId(): string {
|
||||
const webCrypto = globalThis.crypto
|
||||
if (webCrypto && typeof webCrypto.randomUUID === "function") {
|
||||
return webCrypto.randomUUID()
|
||||
}
|
||||
|
||||
if (webCrypto && typeof webCrypto.getRandomValues === "function") {
|
||||
const bytes = new Uint8Array(16)
|
||||
webCrypto.getRandomValues(bytes)
|
||||
|
||||
// RFC4122 v4: set version and variant bits.
|
||||
bytes[6] = (bytes[6] & 0x0f) | 0x40
|
||||
bytes[8] = (bytes[8] & 0x3f) | 0x80
|
||||
|
||||
const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"))
|
||||
return (
|
||||
`${hex[0]}${hex[1]}${hex[2]}${hex[3]}-` +
|
||||
`${hex[4]}${hex[5]}-` +
|
||||
`${hex[6]}${hex[7]}-` +
|
||||
`${hex[8]}${hex[9]}-` +
|
||||
`${hex[10]}${hex[11]}${hex[12]}${hex[13]}${hex[14]}${hex[15]}`
|
||||
)
|
||||
}
|
||||
|
||||
return `session-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`
|
||||
}
|
||||
|
||||
const UNIX_MS_THRESHOLD = 1e12
|
||||
|
||||
function normalizeUnixTimestamp(timestamp: number): number {
|
||||
return timestamp < UNIX_MS_THRESHOLD ? timestamp * 1000 : timestamp
|
||||
}
|
||||
|
||||
function parseTimestamp(dateRaw: number | string | Date) {
|
||||
if (typeof dateRaw === "number") {
|
||||
return dayjs(normalizeUnixTimestamp(dateRaw))
|
||||
}
|
||||
|
||||
if (typeof dateRaw === "string") {
|
||||
const trimmed = dateRaw.trim()
|
||||
if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
|
||||
const numeric = Number(trimmed)
|
||||
if (Number.isFinite(numeric)) {
|
||||
return dayjs(normalizeUnixTimestamp(numeric))
|
||||
}
|
||||
}
|
||||
return dayjs(trimmed)
|
||||
}
|
||||
|
||||
return dayjs(dateRaw)
|
||||
}
|
||||
|
||||
// Helper to format message timestamps
|
||||
export function formatMessageTime(dateRaw: number | string | Date): string {
|
||||
const date = parseTimestamp(dateRaw)
|
||||
if (!date.isValid()) {
|
||||
return ""
|
||||
}
|
||||
const now = dayjs()
|
||||
|
||||
const isToday = date.isSame(now, "day")
|
||||
const isThisYear = date.isSame(now, "year")
|
||||
|
||||
if (isToday) {
|
||||
return date.format("LT")
|
||||
}
|
||||
|
||||
// Cross-day formatting
|
||||
if (isThisYear) {
|
||||
return date.format("MMM D LT")
|
||||
}
|
||||
|
||||
return date.format("ll LT")
|
||||
}
|
||||
|
||||
export function usePicoChat() {
|
||||
const { status: gatewayState } = useAtomValue(gatewayAtom)
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([])
|
||||
const [connectionState, setConnectionState] =
|
||||
useState<ConnectionState>("disconnected")
|
||||
const [isTyping, setIsTyping] = useState(false)
|
||||
const [activeSessionId, setActiveSessionId] =
|
||||
useState<string>(generateSessionId)
|
||||
|
||||
const wsRef = useRef<WebSocket | null>(null)
|
||||
const isConnectingRef = useRef(false)
|
||||
const msgIdCounter = useRef(0)
|
||||
const activeSessionIdRef = useRef(activeSessionId)
|
||||
|
||||
// Keep ref in sync
|
||||
useEffect(() => {
|
||||
activeSessionIdRef.current = activeSessionId
|
||||
}, [activeSessionId])
|
||||
|
||||
const handlePicoMessage = useCallback((msg: PicoMessage) => {
|
||||
const payload = msg.payload || {}
|
||||
|
||||
switch (msg.type) {
|
||||
case "message.create": {
|
||||
const content = (payload.content as string) || ""
|
||||
const messageId = (payload.message_id as string) || `pico-${Date.now()}`
|
||||
// Use provided timestamp or current time
|
||||
const timestampRaw =
|
||||
msg.timestamp !== undefined && Number.isFinite(Number(msg.timestamp))
|
||||
? normalizeUnixTimestamp(Number(msg.timestamp))
|
||||
: Date.now()
|
||||
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: messageId,
|
||||
role: "assistant",
|
||||
content,
|
||||
timestamp: timestampRaw,
|
||||
},
|
||||
])
|
||||
setIsTyping(false)
|
||||
break
|
||||
}
|
||||
|
||||
case "message.update": {
|
||||
const content = (payload.content as string) || ""
|
||||
const messageId = payload.message_id as string
|
||||
if (!messageId) break
|
||||
|
||||
setMessages((prev) =>
|
||||
prev.map((m) => (m.id === messageId ? { ...m, content } : m)),
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
case "typing.start":
|
||||
setIsTyping(true)
|
||||
break
|
||||
|
||||
case "typing.stop":
|
||||
setIsTyping(false)
|
||||
break
|
||||
|
||||
case "error":
|
||||
console.error("Pico error:", payload)
|
||||
setIsTyping(false)
|
||||
break
|
||||
|
||||
case "pong":
|
||||
// heartbeat response, ignore
|
||||
break
|
||||
|
||||
default:
|
||||
console.log("Unknown pico message type:", msg.type)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
if (
|
||||
isConnectingRef.current ||
|
||||
(wsRef.current &&
|
||||
(wsRef.current.readyState === WebSocket.OPEN ||
|
||||
wsRef.current.readyState === WebSocket.CONNECTING))
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
isConnectingRef.current = true
|
||||
setConnectionState("connecting")
|
||||
|
||||
try {
|
||||
const { token, ws_url } = await getPicoToken()
|
||||
|
||||
if (!token) {
|
||||
console.error("No pico token available")
|
||||
setConnectionState("error")
|
||||
isConnectingRef.current = false
|
||||
return
|
||||
}
|
||||
|
||||
// If the backend returns a localhost URL but we are accessing it via a LAN IP
|
||||
// (e.g., from a mobile device during dev), rewrite the hostname to match.
|
||||
let finalWsUrl = ws_url
|
||||
try {
|
||||
const parsedUrl = new URL(ws_url)
|
||||
const isLocalHost =
|
||||
parsedUrl.hostname === "localhost" ||
|
||||
parsedUrl.hostname === "127.0.0.1" ||
|
||||
parsedUrl.hostname === "0.0.0.0"
|
||||
const isBrowserLocal =
|
||||
window.location.hostname === "localhost" ||
|
||||
window.location.hostname === "127.0.0.1"
|
||||
|
||||
if (isLocalHost && !isBrowserLocal) {
|
||||
parsedUrl.hostname = window.location.hostname
|
||||
finalWsUrl = parsedUrl.toString()
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Could not parse ws_url:", e)
|
||||
}
|
||||
|
||||
// Build WebSocket URL with session_id
|
||||
const sessionId = activeSessionIdRef.current
|
||||
const url = `${finalWsUrl}?token=${encodeURIComponent(token)}&session_id=${encodeURIComponent(sessionId)}`
|
||||
const socket = new WebSocket(url)
|
||||
|
||||
socket.onopen = () => {
|
||||
setConnectionState("connected")
|
||||
isConnectingRef.current = false
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const msg: PicoMessage = JSON.parse(event.data)
|
||||
handlePicoMessage(msg)
|
||||
} catch {
|
||||
console.warn("Non-JSON message from pico:", event.data)
|
||||
}
|
||||
}
|
||||
|
||||
socket.onclose = () => {
|
||||
setConnectionState("disconnected")
|
||||
wsRef.current = null
|
||||
isConnectingRef.current = false
|
||||
}
|
||||
|
||||
socket.onerror = () => {
|
||||
setConnectionState("error")
|
||||
isConnectingRef.current = false
|
||||
}
|
||||
|
||||
wsRef.current = socket
|
||||
} catch (err) {
|
||||
console.error("Failed to connect to pico:", err)
|
||||
setConnectionState("error")
|
||||
isConnectingRef.current = false
|
||||
}
|
||||
}, [handlePicoMessage])
|
||||
|
||||
const disconnect = useCallback(() => {
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close()
|
||||
wsRef.current = null
|
||||
}
|
||||
setConnectionState("disconnected")
|
||||
isConnectingRef.current = false
|
||||
}, [])
|
||||
|
||||
// Auto connect/disconnect based on gateway state
|
||||
useEffect(() => {
|
||||
// Wrap in setTimeout to avoid React calling setState synchronously during render
|
||||
const timerId = setTimeout(() => {
|
||||
if (gatewayState === "running") {
|
||||
connect()
|
||||
} else {
|
||||
disconnect()
|
||||
}
|
||||
}, 0)
|
||||
|
||||
return () => clearTimeout(timerId)
|
||||
}, [gatewayState, connect, disconnect])
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => disconnect()
|
||||
}, [disconnect])
|
||||
|
||||
const sendMessage = useCallback((content: string) => {
|
||||
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
|
||||
console.warn("WebSocket not connected")
|
||||
return
|
||||
}
|
||||
|
||||
const id = `msg-${++msgIdCounter.current}-${Date.now()}`
|
||||
const timestampRaw = Date.now()
|
||||
|
||||
// Add user message to local state
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{ id, role: "user", content, timestamp: timestampRaw },
|
||||
])
|
||||
|
||||
// Show typing indicator immediately
|
||||
setIsTyping(true)
|
||||
|
||||
// Send via Pico Protocol
|
||||
const picoMsg: PicoMessage = {
|
||||
type: "message.send",
|
||||
id,
|
||||
payload: { content },
|
||||
}
|
||||
wsRef.current.send(JSON.stringify(picoMsg))
|
||||
}, [])
|
||||
|
||||
// Switch to a historical session
|
||||
const switchSession = useCallback(
|
||||
async (sessionId: string) => {
|
||||
// Disconnect current WebSocket
|
||||
disconnect()
|
||||
|
||||
// Set new session ID
|
||||
setActiveSessionId(sessionId)
|
||||
setIsTyping(false)
|
||||
|
||||
// Load history from backend
|
||||
try {
|
||||
const detail = await getSessionHistory(sessionId)
|
||||
// Set all history messages timestamp from the session updated time as fallback,
|
||||
// since currently the backend doesn't return per-message timestamp in the history API.
|
||||
// We'll use the session's updated time for now.
|
||||
const fallbackTime = detail.updated
|
||||
|
||||
setMessages(
|
||||
detail.messages.map((m, i) => ({
|
||||
id: `hist-${i}-${Date.now()}`,
|
||||
role: m.role as "user" | "assistant",
|
||||
content: m.content,
|
||||
timestamp: fallbackTime,
|
||||
})),
|
||||
)
|
||||
} catch (err) {
|
||||
console.error("Failed to load session history:", err)
|
||||
setMessages([])
|
||||
}
|
||||
|
||||
// Reconnect with new session ID (will use the updated ref)
|
||||
// Small delay to ensure state has settled
|
||||
setTimeout(() => {
|
||||
if (gatewayState === "running") {
|
||||
connect()
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
[disconnect, connect, gatewayState],
|
||||
)
|
||||
|
||||
// Start a new empty chat
|
||||
const newChat = useCallback(() => {
|
||||
if (messages.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
disconnect()
|
||||
const newId = generateSessionId()
|
||||
setActiveSessionId(newId)
|
||||
setMessages([])
|
||||
setIsTyping(false)
|
||||
|
||||
// Reconnect with the fresh session
|
||||
setTimeout(() => {
|
||||
if (gatewayState === "running") {
|
||||
connect()
|
||||
}
|
||||
}, 100)
|
||||
}, [disconnect, connect, gatewayState, messages.length])
|
||||
|
||||
return {
|
||||
messages,
|
||||
connectionState,
|
||||
isTyping,
|
||||
activeSessionId,
|
||||
sendMessage,
|
||||
switchSession,
|
||||
newChat,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
|
||||
import { type SessionSummary, deleteSession, getSessions } from "@/api/sessions"
|
||||
|
||||
const LIMIT = 20
|
||||
|
||||
interface UseSessionHistoryOptions {
|
||||
activeSessionId: string
|
||||
onDeletedActiveSession: () => void
|
||||
}
|
||||
|
||||
export function useSessionHistory({
|
||||
activeSessionId,
|
||||
onDeletedActiveSession,
|
||||
}: UseSessionHistoryOptions) {
|
||||
const observerRef = useRef<HTMLDivElement>(null)
|
||||
const [sessions, setSessions] = useState<SessionSummary[]>([])
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false)
|
||||
|
||||
const loadSessions = useCallback(
|
||||
async (reset = true) => {
|
||||
try {
|
||||
const currentOffset = reset ? 0 : offset
|
||||
if (reset) {
|
||||
setHasMore(true)
|
||||
setOffset(0)
|
||||
}
|
||||
|
||||
const data = await getSessions(currentOffset, LIMIT)
|
||||
|
||||
if (data.length < LIMIT) {
|
||||
setHasMore(false)
|
||||
}
|
||||
|
||||
if (reset) {
|
||||
setSessions(data)
|
||||
} else {
|
||||
setSessions((prev) => {
|
||||
const existingIds = new Set(prev.map((s) => s.id))
|
||||
const newItems = data.filter((s) => !existingIds.has(s.id))
|
||||
return [...prev, ...newItems]
|
||||
})
|
||||
}
|
||||
|
||||
setOffset(currentOffset + data.length)
|
||||
} catch {
|
||||
// silently fail
|
||||
} finally {
|
||||
setIsLoadingMore(false)
|
||||
}
|
||||
},
|
||||
[offset],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!observerRef.current || !hasMore || isLoadingMore) return
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
|
||||
setIsLoadingMore(true)
|
||||
void loadSessions(false)
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
|
||||
observer.observe(observerRef.current)
|
||||
return () => observer.disconnect()
|
||||
}, [hasMore, isLoadingMore, loadSessions])
|
||||
|
||||
const handleDeleteSession = useCallback(
|
||||
async (id: string) => {
|
||||
try {
|
||||
await deleteSession(id)
|
||||
setSessions((prev) => prev.filter((s) => s.id !== id))
|
||||
if (id === activeSessionId) {
|
||||
onDeletedActiveSession()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to delete session:", err)
|
||||
}
|
||||
},
|
||||
[activeSessionId, onDeletedActiveSession],
|
||||
)
|
||||
|
||||
return {
|
||||
sessions,
|
||||
hasMore,
|
||||
observerRef,
|
||||
loadSessions,
|
||||
handleDeleteSession,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import {
|
||||
IconBrandChrome,
|
||||
IconBrandDingtalk,
|
||||
IconBrandDiscord,
|
||||
IconBrandLine,
|
||||
IconBrandMatrix,
|
||||
IconBrandQq,
|
||||
IconBrandSlack,
|
||||
IconBrandTelegram,
|
||||
IconBrandWechat,
|
||||
IconBrandWhatsapp,
|
||||
IconCamera,
|
||||
IconMessages,
|
||||
IconPlug,
|
||||
IconRobot,
|
||||
} from "@tabler/icons-react"
|
||||
import type { TFunction } from "i18next"
|
||||
import { useAtomValue } from "jotai"
|
||||
import * as React from "react"
|
||||
|
||||
import {
|
||||
type AppConfig,
|
||||
type SupportedChannel,
|
||||
getAppConfig,
|
||||
getChannelsCatalog,
|
||||
} from "@/api/channels"
|
||||
import { getChannelDisplayName } from "@/components/channels/channel-display-name"
|
||||
import { gatewayAtom } from "@/store/gateway"
|
||||
|
||||
const DEFAULT_VISIBLE_CHANNELS = 5
|
||||
const CHANNEL_IMPORTANCE_ORDER = [
|
||||
"discord",
|
||||
"feishu",
|
||||
"telegram",
|
||||
"slack",
|
||||
"line",
|
||||
"wecom",
|
||||
"wecom_app",
|
||||
"wecom_aibot",
|
||||
"dingtalk",
|
||||
"qq",
|
||||
"onebot",
|
||||
"matrix",
|
||||
"pico",
|
||||
"maixcam",
|
||||
"irc",
|
||||
"whatsapp",
|
||||
"whatsapp_native",
|
||||
]
|
||||
const CHANNEL_IMPORTANCE_INDEX = new Map(
|
||||
CHANNEL_IMPORTANCE_ORDER.map((name, index) => [name, index]),
|
||||
)
|
||||
|
||||
function IconLark({ className }: { className?: string }) {
|
||||
return React.createElement("span", {
|
||||
className,
|
||||
"aria-hidden": "true",
|
||||
style: {
|
||||
display: "inline-block",
|
||||
backgroundColor: "currentColor",
|
||||
mask: "url(/lark.svg) center / contain no-repeat",
|
||||
WebkitMask: "url(/lark.svg) center / contain no-repeat",
|
||||
} as React.CSSProperties,
|
||||
})
|
||||
}
|
||||
|
||||
const CHANNEL_ICON_MAP: Record<
|
||||
string,
|
||||
React.ComponentType<{ className?: string }>
|
||||
> = {
|
||||
telegram: IconBrandTelegram,
|
||||
discord: IconBrandDiscord,
|
||||
slack: IconBrandSlack,
|
||||
feishu: IconLark,
|
||||
dingtalk: IconBrandDingtalk,
|
||||
line: IconBrandLine,
|
||||
qq: IconBrandQq,
|
||||
wecom: IconBrandWechat,
|
||||
wecom_app: IconBrandWechat,
|
||||
wecom_aibot: IconBrandWechat,
|
||||
whatsapp: IconBrandWhatsapp,
|
||||
whatsapp_native: IconBrandWhatsapp,
|
||||
matrix: IconBrandMatrix,
|
||||
maixcam: IconCamera,
|
||||
onebot: IconRobot,
|
||||
pico: IconBrandChrome,
|
||||
irc: IconMessages,
|
||||
}
|
||||
|
||||
function asRecord(value: unknown): Record<string, unknown> {
|
||||
if (value && typeof value === "object" && !Array.isArray(value)) {
|
||||
return value as Record<string, unknown>
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
function isChannelEnabled(
|
||||
channel: SupportedChannel,
|
||||
channelsConfig: Record<string, unknown>,
|
||||
): boolean {
|
||||
const channelConfig = asRecord(channelsConfig[channel.config_key])
|
||||
if (channelConfig.enabled !== true) {
|
||||
return false
|
||||
}
|
||||
|
||||
// whatsapp / whatsapp_native share one config block and are split by use_native.
|
||||
if (channel.name === "whatsapp_native") {
|
||||
return channelConfig.use_native === true
|
||||
}
|
||||
if (channel.name === "whatsapp") {
|
||||
return channelConfig.use_native !== true
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
function buildChannelEnabledMap(
|
||||
channels: SupportedChannel[],
|
||||
appConfig: AppConfig,
|
||||
): Record<string, boolean> {
|
||||
const channelsConfig = asRecord(asRecord(appConfig).channels)
|
||||
const result: Record<string, boolean> = {}
|
||||
for (const channel of channels) {
|
||||
result[channel.name] = isChannelEnabled(channel, channelsConfig)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export interface SidebarChannelNavItem {
|
||||
key: string
|
||||
title: string
|
||||
url: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface UseSidebarChannelsOptions {
|
||||
t: TFunction
|
||||
}
|
||||
|
||||
export function useSidebarChannels({ t }: UseSidebarChannelsOptions) {
|
||||
const gateway = useAtomValue(gatewayAtom)
|
||||
const [channels, setChannels] = React.useState<SupportedChannel[]>([])
|
||||
const [enabledMap, setEnabledMap] = React.useState<Record<string, boolean>>(
|
||||
{},
|
||||
)
|
||||
const [showAllChannels, setShowAllChannels] = React.useState(false)
|
||||
|
||||
const reloadChannels = React.useCallback((shouldApply?: () => boolean) => {
|
||||
Promise.all([
|
||||
getChannelsCatalog(),
|
||||
getAppConfig().catch(() => ({}) as AppConfig),
|
||||
])
|
||||
.then(([catalog, appConfig]) => {
|
||||
if (shouldApply && !shouldApply()) {
|
||||
return
|
||||
}
|
||||
setChannels(catalog.channels)
|
||||
setEnabledMap(buildChannelEnabledMap(catalog.channels, appConfig))
|
||||
})
|
||||
.catch(() => {
|
||||
if (shouldApply && !shouldApply()) {
|
||||
return
|
||||
}
|
||||
setChannels([])
|
||||
setEnabledMap({})
|
||||
})
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true
|
||||
reloadChannels(() => active)
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [reloadChannels])
|
||||
|
||||
const previousGatewayStatusRef = React.useRef(gateway.status)
|
||||
React.useEffect(() => {
|
||||
const previousStatus = previousGatewayStatusRef.current
|
||||
if (previousStatus !== "running" && gateway.status === "running") {
|
||||
reloadChannels()
|
||||
}
|
||||
previousGatewayStatusRef.current = gateway.status
|
||||
}, [gateway.status, reloadChannels])
|
||||
|
||||
const sortedChannels = React.useMemo(() => {
|
||||
const list = [...channels]
|
||||
list.sort((a, b) => {
|
||||
const aEnabled = enabledMap[a.name] === true
|
||||
const bEnabled = enabledMap[b.name] === true
|
||||
if (aEnabled !== bEnabled) {
|
||||
return aEnabled ? -1 : 1
|
||||
}
|
||||
|
||||
const aImportance =
|
||||
CHANNEL_IMPORTANCE_INDEX.get(a.name) ?? Number.MAX_SAFE_INTEGER
|
||||
const bImportance =
|
||||
CHANNEL_IMPORTANCE_INDEX.get(b.name) ?? Number.MAX_SAFE_INTEGER
|
||||
if (aImportance !== bImportance) {
|
||||
return aImportance - bImportance
|
||||
}
|
||||
|
||||
return getChannelDisplayName(a, t).localeCompare(
|
||||
getChannelDisplayName(b, t),
|
||||
)
|
||||
})
|
||||
return list
|
||||
}, [channels, enabledMap, t])
|
||||
|
||||
const hasMoreChannels = sortedChannels.length > DEFAULT_VISIBLE_CHANNELS
|
||||
const visibleChannels = showAllChannels
|
||||
? sortedChannels
|
||||
: sortedChannels.slice(0, DEFAULT_VISIBLE_CHANNELS)
|
||||
|
||||
const channelItems = React.useMemo<SidebarChannelNavItem[]>(
|
||||
() =>
|
||||
visibleChannels.map((channel) => ({
|
||||
key: channel.name,
|
||||
title: getChannelDisplayName(channel, t),
|
||||
url: `/channels/${channel.name}`,
|
||||
icon: CHANNEL_ICON_MAP[channel.name] ?? IconPlug,
|
||||
})),
|
||||
[t, visibleChannels],
|
||||
)
|
||||
|
||||
const toggleShowAllChannels = React.useCallback(() => {
|
||||
setShowAllChannels((prev) => !prev)
|
||||
}, [])
|
||||
|
||||
return {
|
||||
channelItems,
|
||||
hasMoreChannels,
|
||||
showAllChannels,
|
||||
toggleShowAllChannels,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
|
||||
type Theme = "light" | "dark"
|
||||
|
||||
function getStoredTheme(): Theme {
|
||||
if (typeof window === "undefined") return "dark"
|
||||
return (localStorage.getItem("theme") as Theme) || "dark"
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const [theme, setThemeState] = useState<Theme>(getStoredTheme)
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement
|
||||
if (theme === "dark") {
|
||||
root.classList.add("dark")
|
||||
} else {
|
||||
root.classList.remove("dark")
|
||||
}
|
||||
localStorage.setItem("theme", theme)
|
||||
}, [theme])
|
||||
|
||||
const toggleTheme = useCallback(() => {
|
||||
setThemeState((prev) => (prev === "dark" ? "light" : "dark"))
|
||||
}, [])
|
||||
|
||||
return { theme, toggleTheme }
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
|
||||
export function useWebSocket(path: string) {
|
||||
const [message, setMessage] = useState<string>("No messages yet")
|
||||
const [connected, setConnected] = useState(false)
|
||||
const wsRef = useRef<WebSocket | null>(null)
|
||||
|
||||
const connect = useCallback(() => {
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close()
|
||||
}
|
||||
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"
|
||||
const url = `${protocol}//${window.location.host}${path}`
|
||||
const socket = new WebSocket(url)
|
||||
|
||||
socket.onopen = () => {
|
||||
setConnected(true)
|
||||
setMessage("Connected to WebSocket server.")
|
||||
}
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
setMessage(event.data)
|
||||
}
|
||||
|
||||
socket.onclose = () => {
|
||||
setConnected(false)
|
||||
setMessage("WebSocket connection closed.")
|
||||
}
|
||||
|
||||
socket.onerror = (error) => {
|
||||
setConnected(false)
|
||||
setMessage("WebSocket error occurred.")
|
||||
console.error("WebSocket Error:", error)
|
||||
}
|
||||
|
||||
wsRef.current = socket
|
||||
}, [path])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
wsRef.current?.close()
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { message, connected, connect }
|
||||
}
|
||||
Reference in New Issue
Block a user