feat(composer): default AI toggles ON + toast feedback on click

- Self-critique and auto-compact-context now default to ON for new
visitors (first-time = no localStorage entry write 'true' so it
sticks; existing users keep their previous choice).
- Clicking either icon now fires a sonner toast describing what just
changed and what the feature does, so users actually know what those
little icons under the input do.

Adds 'sonner' dep + <Toaster /> in app/layout.tsx (bottom-center, rich
colors, theme-aware, dismissible).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { AuthProvider } from "@/components/auth-provider"
 import { PWARegister } from "@/components/pwa-register"
 import { VoiceMode } from "@/components/voice-mode"
+import { Toaster } from "sonner"
 import "./globals.css"
 
 export const metadata: Metadata = {
@@ -38,6 +39,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <TooltipProvider delayDuration={300}>
               {children}
               <VoiceMode />
+              <Toaster position="bottom-center" theme="system" richColors closeButton />
             </TooltipProvider>
           </ThemeProvider>
         </AuthProvider>

components/composer.tsx

@@ -18,6 +18,7 @@ import { searchActiveCollection } from "@/lib/collections"
 import { countTokens } from "@/lib/tokens"
 import { useSpeechRecognition } from "@/hooks/use-voice"
 import { cn } from "@/lib/utils"
+import { toast } from "sonner"
 
 type QuoteEventDetail = {
   text?: string
@@ -571,8 +572,22 @@ export function Composer({ value, onChange, onSubmit, onStop, isStreaming, disab
         </div>
       </div>
       <div className="mt-1.5 flex items-center justify-end gap-1 px-2 text-[10px] text-muted-foreground">
-        <AiFeatureToggle storageKey="tans:self-critique" label="Tự đánh giá câu trả lời" icon={<Brain className="h-3.5 w-3.5" />} />
-        <AiFeatureToggle storageKey="tans:auto-compact" label="Tự nén context khi đầy" icon={<FolderArchive className="h-3.5 w-3.5" />} />
+        <AiFeatureToggle
+          storageKey="tans:self-critique"
+          label="Tự đánh giá câu trả lời"
+          icon={<Brain className="h-3.5 w-3.5" />}
+          defaultEnabled
+          onMessage="AI sẽ tự kiểm tra câu trả lời trước khi trả về để giảm sai sót."
+          offMessage="AI trả lời thẳng, không tự kiểm tra lại."
+        />
+        <AiFeatureToggle
+          storageKey="tans:auto-compact"
+          label="Tự nén context khi đầy"
+          icon={<FolderArchive className="h-3.5 w-3.5" />}
+          defaultEnabled
+          onMessage="Khi context gần đầy, các tin nhắn cũ sẽ được tóm tắt tự động để chừa chỗ cho phần mới."
+          offMessage="Context sẽ không được nén — bạn cần chủ động xóa hoặc tạo chat mới khi đầy."
+        />
         <span className="mx-1 h-3 w-px bg-border/60" aria-hidden />
         <Tooltip>
           <TooltipTrigger asChild>
@@ -616,16 +631,46 @@ export function Composer({ value, onChange, onSubmit, onStop, isStreaming, disab
   )
 }
 
-function AiFeatureToggle({ storageKey, label, icon }: { storageKey: string; label: string; icon: React.ReactNode }) {
-  const [enabled, setEnabled] = useState(false)
+function AiFeatureToggle({
+  storageKey,
+  label,
+  icon,
+  defaultEnabled = false,
+  onMessage,
+  offMessage,
+}: {
+  storageKey: string
+  label: string
+  icon: React.ReactNode
+  defaultEnabled?: boolean
+  onMessage?: string
+  offMessage?: string
+}) {
+  const [enabled, setEnabled] = useState(defaultEnabled)
   useEffect(() => {
     if (typeof window === "undefined") return
-    setEnabled(window.localStorage.getItem(storageKey) === "true")
-  }, [storageKey])
+    const raw = window.localStorage.getItem(storageKey)
+    if (raw === null) {
+      // First-time visitor — apply default + persist so it sticks.
+      setEnabled(defaultEnabled)
+      window.localStorage.setItem(storageKey, String(defaultEnabled))
+    } else {
+      setEnabled(raw === "true")
+    }
+  }, [storageKey, defaultEnabled])
   function toggle() {
     const next = !enabled
     setEnabled(next)
     if (typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next))
+    if (next) {
+      toast.success(`${label}: Bật`, {
+        description: onMessage ?? "Đã bật tính năng.",
+      })
+    } else {
+      toast(`${label}: Tắt`, {
+        description: offMessage ?? "Đã tắt tính năng.",
+      })
+    }
   }
   return (
     <Tooltip>

package-lock.json

@@ -40,6 +40,7 @@
         "rehype-katex": "^7.0.1",
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^2.5.4",
         "zod": "^3.23.8"
       },
@@ -8706,6 +8707,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "license": "BSD-3-Clause",

package.json

@@ -41,6 +41,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8"
   },