diff --git a/apps/desktop/src/components/main/sidebar/banner/registry.tsx b/apps/desktop/src/components/main/sidebar/banner/registry.tsx index 16add99f7b..213244f301 100644 --- a/apps/desktop/src/components/main/sidebar/banner/registry.tsx +++ b/apps/desktop/src/components/main/sidebar/banner/registry.tsx @@ -28,6 +28,53 @@ export function createBannerRegistry({ }: BannerRegistryParams): BannerRegistryEntry[] { // order matters return [ + { + banner: { + id: "stt-loading", + description: ( + <> + Transcription model is + + loading + + . This may take a moment. + > + ), + primaryAction: { + label: "View status", + onClick: onOpenSTTSettings, + }, + dismissible: false, + }, + condition: () => + isLocalSttModel && + sttServerStatus === "loading" && + !hasSttConfigured && + !isAiTranscriptionTabActive, + }, + { + banner: { + id: "stt-unreachable", + variant: "error", + description: ( + <> + Transcription model{" "} + failed to start. + Please try again. + > + ), + primaryAction: { + label: "Configure transcription", + onClick: onOpenSTTSettings, + }, + dismissible: false, + }, + condition: () => + isLocalSttModel && + sttServerStatus === "unreachable" && + !hasSttConfigured && + !isAiTranscriptionTabActive, + }, { banner: { id: "missing-stt", diff --git a/apps/desktop/src/components/settings/ai/stt/select.tsx b/apps/desktop/src/components/settings/ai/stt/select.tsx index 3086fcf503..f16c590092 100644 --- a/apps/desktop/src/components/settings/ai/stt/select.tsx +++ b/apps/desktop/src/components/settings/ai/stt/select.tsx @@ -15,6 +15,7 @@ import { cn } from "@hypr/utils"; import { useBillingAccess } from "../../../../billing"; import { useConfigValues } from "../../../../config/use-config"; +import { useSTTConnection } from "../../../../hooks/useSTTConnection"; import * as settings from "../../../../store/tinybase/settings"; import { getProviderSelectionBlockers, @@ -35,6 +36,16 @@ export function SelectProviderAndModel() { ] as const); const billing = useBillingAccess(); const configuredProviders = useConfiguredMapping(); + const { local: sttLocal } = useSTTConnection(); + const sttServerStatus = sttLocal.data?.status; + + const isLocalSttModel = + current_stt_provider === "hyprnote" && + !!current_stt_model && + current_stt_model !== "cloud"; + + const isUnreachable = isLocalSttModel && sttServerStatus === "unreachable"; + const isNotConfigured = !current_stt_provider || !current_stt_model; const handleSelectProvider = settings.UI.useSetValueCallback( "current_stt_provider", @@ -80,9 +91,7 @@ export function SelectProviderAndModel() { className={cn([ "flex flex-col gap-4", "p-4 rounded-xl border border-neutral-200", - !!current_stt_provider && !!current_stt_model - ? "bg-neutral-50" - : "bg-red-50", + isNotConfigured || isUnreachable ? "bg-red-50" : "bg-neutral-50", ])} >