Show transcription language warning as toast

Replace the transcription settings banner with a persistent warning toast that can be dismissed and clears when leaving the view.

Author: ComputelessComputer

apps/desktop/src/settings/ai/stt/index.tsx

@@ -4,15 +4,15 @@ import { ConfigureProviders } from "./configure";
 import { SttSettingsProvider } from "./context";
 import {
   SelectProviderAndModel,
-  TranscriptionLanguageWarningBanner,
+  TranscriptionLanguageWarningToast,
 } from "./select";
 
 import { SettingsPageTitle } from "~/settings/page-title";
 
 export function STT() {
   return (
     <SttSettingsProvider>
-      <TranscriptionLanguageWarningBanner />
+      <TranscriptionLanguageWarningToast />
       <div className="flex flex-col gap-6">
         <SettingsPageTitle title={<Trans>Transcription</Trans>} />
         <SelectProviderAndModel />

apps/desktop/src/settings/ai/stt/select.tsx

@@ -52,7 +52,12 @@ import {
   requiresEntitlement,
 } from "~/settings/ai/shared/eligibility";
 import { useConfigValues } from "~/shared/config";
+import { useMountEffect } from "~/shared/hooks/useMountEffect";
 import { SettingsAlert } from "~/shared/ui/settings-alert";
+import {
+  showTransientToast,
+  useTransientToast,
+} from "~/sidebar/toast/transient";
 import * as settings from "~/store/tinybase/store/settings";
 import {
   isConfiguredSttModel,
@@ -284,21 +289,51 @@ export function SelectProviderAndModel() {
   );
 }
 
-export function TranscriptionLanguageWarningBanner() {
+const TRANSCRIPTION_LANGUAGE_WARNING_TOAST_ID =
+  "transcription-language-warning";
+
+export function TranscriptionLanguageWarningToast() {
   const hasLanguageWarning = useHasLanguageWarning();
 
   if (!hasLanguageWarning) {
     return null;
   }
 
-  return (
-    <div className="-mx-6 -mt-6 mb-6 border-b border-amber-200 bg-amber-50 px-6 py-3 dark:border-amber-900/60 dark:bg-amber-950/30">
-      <span className="flex items-center justify-center gap-2 text-center text-sm text-amber-600 dark:text-amber-200">
-        <AlertTriangle className="size-4 shrink-0" />
-        Selected model may not support all your spoken languages.
-      </span>
-    </div>
-  );
+  return <TranscriptionLanguageWarningToastLifecycle />;
+}
+
+function TranscriptionLanguageWarningToastLifecycle() {
+  useMountEffect(() => {
+    showTransientToast(
+      {
+        id: TRANSCRIPTION_LANGUAGE_WARNING_TOAST_ID,
+        icon: <AlertTriangle className="size-4 shrink-0 text-amber-500" />,
+        description: "Model doesn't support all languages.",
+        anchor: "main-content-panel",
+        actions: [
+          {
+            label: "Dismiss",
+            onClick: clearTranscriptionLanguageWarningToast,
+          },
+        ],
+        dismissible: false,
+        variant: "warning",
+      },
+      { durationMs: null },
+    );
+
+    return clearTranscriptionLanguageWarningToast;
+  });
+
+  return null;
+}
+
+function clearTranscriptionLanguageWarningToast() {
+  const { toast, clearToast } = useTransientToast.getState();
+
+  if (toast?.id === TRANSCRIPTION_LANGUAGE_WARNING_TOAST_ID) {
+    clearToast(toast.key);
+  }
 }
 
 function useHasLanguageWarning() {

apps/desktop/src/sidebar/toast/component.test.tsx

@@ -66,4 +66,33 @@ describe("Toast", () => {
     expect(action.className).toContain("bg-destructive");
     expect(action.className).toContain("text-destructive-foreground");
   });
+
+  it("does not truncate warning toast text", () => {
+    render(
+      <Toast
+        toast={{
+          id: "transcription-language-warning",
+          description: "Model doesn't support all languages.",
+          dismissible: false,
+          variant: "warning",
+          actions: [
+            {
+              label: "Dismiss",
+              onClick: vi.fn(),
+            },
+          ],
+        }}
+      />,
+    );
+
+    const description = screen.getByText(
+      "Model doesn't support all languages.",
+    );
+
+    expect(description.className).not.toContain("truncate");
+    expect(description.className).toContain("whitespace-nowrap");
+    expect(
+      screen.getByRole("button", { name: "Dismiss" }).parentElement?.className,
+    ).toContain("pl-2");
+  });
 });

apps/desktop/src/sidebar/toast/component.tsx

@@ -21,17 +21,21 @@ export function Toast({
           "border shadow-lg backdrop-blur-none",
           toast.variant === "error"
             ? "border-alert-border shadow-red-100 dark:shadow-red-950/30"
-            : "border-border",
+            : toast.variant === "warning"
+              ? "border-amber-200 bg-amber-50 text-amber-950 shadow-amber-100 dark:border-amber-800/60 dark:bg-amber-950 dark:text-amber-100 dark:shadow-amber-950/30"
+              : "border-border",
         ])}
       >
         {toast.icon ? <span className="shrink-0">{toast.icon}</span> : null}
 
         <div
           className={cn([
-            "max-w-50 truncate text-sm",
+            "min-w-0 text-sm",
             toast.variant === "error"
-              ? "text-alert-foreground"
-              : "text-muted-foreground",
+              ? "text-alert-foreground max-w-50 truncate"
+              : toast.variant === "warning"
+                ? "max-w-[min(720px,calc(100vw-16rem))] whitespace-nowrap text-amber-950 dark:text-amber-100"
+                : "text-muted-foreground max-w-50 truncate",
           ])}
         >
           {toast.description}
@@ -40,7 +44,12 @@ export function Toast({
         {progress !== null ? <ProgressPill progress={progress} /> : null}
 
         {actions.length > 0 ? (
-          <div className="flex items-center gap-1">
+          <div
+            className={cn([
+              "flex items-center gap-1",
+              toast.variant === "warning" && "pl-2",
+            ])}
+          >
             {actions.map((action, index) => (
               <button
                 key={action.label}
@@ -92,6 +101,10 @@ function getActionClassName(toast: ToastType, index: number) {
     return "bg-destructive text-destructive-foreground hover:bg-destructive/90";
   }
 
+  if (toast.variant === "warning" && index === 0) {
+    return "bg-amber-950 text-amber-50 hover:bg-amber-900 dark:bg-amber-100 dark:text-amber-950 dark:hover:bg-amber-200";
+  }
+
   if (index === 0) {
     return "bg-foreground text-background hover:bg-foreground/90";
   }

apps/desktop/src/sidebar/toast/index.test.tsx

@@ -76,6 +76,7 @@ vi.mock("./useDismissedToasts", () => ({
 }));
 
 import { ToastArea } from "./index";
+import { showTransientToast, useTransientToast } from "./transient";
 
 describe("ToastArea", () => {
   beforeEach(() => {
@@ -86,9 +87,11 @@ describe("ToastArea", () => {
     mocks.updateSettingsTabState.mockClear();
     mocks.clearDevtoolsPreview.mockClear();
     mocks.setToastActionTarget.mockClear();
+    useTransientToast.getState().clearToast();
   });
 
   afterEach(() => {
+    useTransientToast.getState().clearToast();
     cleanup();
     document.body.innerHTML = "";
     vi.useRealTimers();
@@ -139,7 +142,7 @@ describe("ToastArea", () => {
     expect(toastContainer?.style.top).toBe("88px");
   });
 
-  it("positions the left sidebar toast relative to the main content panel", () => {
+  it("centers the left sidebar toast on the main content panel", () => {
     const mainContentPanel = document.createElement("div");
     mainContentPanel.setAttribute("data-main-content-panel", "");
     vi.spyOn(mainContentPanel, "getBoundingClientRect").mockReturnValue({
@@ -161,9 +164,9 @@ describe("ToastArea", () => {
       bottom: 520,
       height: 500,
       left: 300,
-      right: 900,
+      right: 700,
       top: 20,
-      width: 600,
+      width: 400,
       x: 300,
       y: 20,
       toJSON: () => ({}),
@@ -184,6 +187,60 @@ describe("ToastArea", () => {
     expect(toastContainer?.style.top).toBe("56px");
   });
 
+  it("centers anchored transient toasts on the main content panel", () => {
+    const mainContentPanel = document.createElement("div");
+    mainContentPanel.setAttribute("data-main-content-panel", "");
+    vi.spyOn(mainContentPanel, "getBoundingClientRect").mockReturnValue({
+      bottom: 520,
+      height: 500,
+      left: 200,
+      right: 1_000,
+      top: 20,
+      width: 800,
+      x: 200,
+      y: 20,
+      toJSON: () => ({}),
+    });
+    document.body.appendChild(mainContentPanel);
+
+    const mainSurface = document.createElement("div");
+    mainSurface.setAttribute("data-chat-floating-anchor", "");
+    vi.spyOn(mainSurface, "getBoundingClientRect").mockReturnValue({
+      bottom: 520,
+      height: 500,
+      left: 300,
+      right: 700,
+      top: 20,
+      width: 400,
+      x: 300,
+      y: 20,
+      toJSON: () => ({}),
+    });
+    document.body.appendChild(mainSurface);
+
+    showTransientToast(
+      {
+        id: "transcription-language-warning",
+        description: "Model doesn't support all languages.",
+        anchor: "main-content-panel",
+      },
+      { durationMs: null },
+    );
+
+    render(<ToastArea />);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    const toastContainer = screen
+      .getByText("Model doesn't support all languages.")
+      .closest(".fixed") as HTMLElement | null;
+
+    expect(toastContainer?.style.left).toBe("600px");
+    expect(toastContainer?.style.top).toBe("56px");
+  });
+
   it("repositions the left sidebar toast when the main surface scrolls", () => {
     const mainSurface = document.createElement("div");
     mainSurface.setAttribute("data-chat-floating-anchor", "");

apps/desktop/src/sidebar/toast/index.tsx

@@ -226,6 +226,7 @@ export function ToastArea({
   const dismissAction = displayToast?.dismissible ? handleDismiss : undefined;
   const position =
     getMainSurfacePosition({
+      anchor: displayToast?.anchor,
       contentOffset,
       mainContentPanelRect,
       mainSurfaceRect,
@@ -377,11 +378,13 @@ function useElementRect(selector: string) {
 }
 
 function getMainSurfacePosition({
+  anchor,
   contentOffset,
   mainContentPanelRect,
   mainSurfaceRect,
   placement,
 }: {
+  anchor?: "main-content-panel";
   contentOffset: number;
   mainContentPanelRect: ElementRect | null;
   mainSurfaceRect: ElementRect | null;
@@ -395,7 +398,7 @@ function getMainSurfacePosition({
 
   return {
     left:
-      placement === "left-sidebar"
+      anchor === "main-content-panel" || placement === "left-sidebar"
         ? horizontalAnchorRect.left + horizontalAnchorRect.width / 2
         : `calc(50% + ${contentOffset}px)`,
     top: verticalAnchorRect.top + LEFT_SIDEBAR_TOP_OFFSET_PX,

apps/desktop/src/sidebar/toast/transient.test.ts

@@ -0,0 +1,32 @@
+import { act } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { showTransientToast, useTransientToast } from "./transient";
+
+describe("transient toast store", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    useTransientToast.getState().clearToast();
+  });
+
+  afterEach(() => {
+    useTransientToast.getState().clearToast();
+    vi.useRealTimers();
+  });
+
+  it("keeps a toast visible when duration is disabled", () => {
+    showTransientToast(
+      {
+        id: "persistent-toast",
+        description: "Persistent warning",
+      },
+      { durationMs: null },
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(10_000);
+    });
+
+    expect(useTransientToast.getState().toast?.id).toBe("persistent-toast");
+  });
+});

apps/desktop/src/sidebar/toast/transient.ts

@@ -17,7 +17,7 @@ type TransientToastState = {
   toast: TransientToast | null;
   showToast: (
     toast: TransientToastInput,
-    options?: { durationMs?: number },
+    options?: { durationMs?: number | null },
   ) => void;
   clearToast: (key?: string) => void;
 };
@@ -43,6 +43,10 @@ export const useTransientToast = create<TransientToastState>((set, get) => ({
 
     set({ toast: nextToast });
 
+    if (options?.durationMs === null) {
+      return;
+    }
+
     dismissTimer = setTimeout(() => {
       if (get().toast?.key === key) {
         set({ toast: null });
@@ -66,7 +70,7 @@ export const useTransientToast = create<TransientToastState>((set, get) => ({
 
 export function showTransientToast(
   toast: TransientToastInput,
-  options?: { durationMs?: number },
+  options?: { durationMs?: number | null },
 ) {
   useTransientToast.getState().showToast(toast, options);
 }

apps/desktop/src/sidebar/toast/types.ts

@@ -12,6 +12,8 @@ export type DownloadProgress = {
   progress: number;
 };
 
+export type ToastAnchor = "main-content-panel";
+
 export type ToastType = {
   id: string;
   icon?: ReactNode;
@@ -23,7 +25,8 @@ export type ToastType = {
   dismissible: boolean;
   progress?: number;
   downloads?: DownloadProgress[];
-  variant?: "default" | "error";
+  variant?: "default" | "error" | "warning";
+  anchor?: ToastAnchor;
   gradient?: string;
 };