Feat: Install sonner library #3221 (#6898)

### What problem does this PR solve?

Feat: Install sonner library #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/package-lock.json

@@ -65,6 +65,7 @@
         "lodash": "^4.17.21",
         "lucide-react": "^0.454.0",
         "mammoth": "^1.7.2",
+        "next-themes": "^0.4.6",
         "openai-speech-stream-player": "^1.0.8",
         "rc-tween-one": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
@@ -83,7 +84,7 @@
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
-        "sonner": "^1.7.1",
+        "sonner": "^1.7.4",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "umi": "^4.0.90",
@@ -23664,6 +23665,16 @@
       "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==",
       "dev": true
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/next-tick/-/next-tick-1.1.0.tgz",
@@ -29499,9 +29510,10 @@
       }
     },
     "node_modules/sonner": {
-      "version": "1.7.1",
+      "version": "1.7.4",
-      "resolved": "https://registry.npmmirror.com/sonner/-/sonner-1.7.1.tgz",
+      "resolved": "https://registry.npmmirror.com/sonner/-/sonner-1.7.4.tgz",
-      "integrity": "sha512-b6LHBfH32SoVasRFECrdY8p8s7hXPDn3OHUFbZZbiB1ctLS9Gdh6rpX2dVrpQA0kiL5jcRzDDldwwLkSKk3+QQ==",
+      "integrity": "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==",
+      "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"

web/package.json

@@ -76,6 +76,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.454.0",
     "mammoth": "^1.7.2",
+    "next-themes": "^0.4.6",
     "openai-speech-stream-player": "^1.0.8",
     "rc-tween-one": "^3.0.6",
     "react-copy-to-clipboard": "^5.1.0",
@@ -94,7 +95,7 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "sonner": "^1.7.1",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "umi": "^4.0.90",

web/src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

web/src/components/ui/toast.tsx

@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0  sm:flex-col md:max-w-[420px]',
       className,
     )}
     {...props}

web/src/layouts/index.tsx

@@ -4,6 +4,9 @@ import { Outlet } from 'umi';
 import '../locales/config';
 import Header from './components/header';
 
+import { Toaster as Sonner } from '@/components/ui/sonner';
+import { Toaster } from '@/components/ui/toaster';
+
 import styles from './index.less';
 
 const { Content } = Layout;
@@ -29,6 +32,8 @@ const App: React.FC = () => {
         >
           <Outlet />
         </Content>
+        <Toaster />
+        <Sonner position={'top-right'} expand richColors closeButton></Sonner>
       </Layout>
     </Layout>
   );