make model switch work with toast

lama_cleaner/app/src/components/shared/Toast.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import { ToastProps } from '@radix-ui/react-toast'
+import { CheckIcon, ExclamationCircleIcon } from '@heroicons/react/outline'
+
+const LoadingIcon = () => {
+  return (
+    <span className="loading-icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <line x1="12" y1="2" x2="12" y2="6" />
+        <line x1="12" y1="18" x2="12" y2="22" />
+        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
+        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
+        <line x1="2" y1="12" x2="6" y2="12" />
+        <line x1="18" y1="12" x2="22" y2="12" />
+        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
+        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
+      </svg>
+    </span>
+  )
+}
+
+export type ToastState = 'default' | 'error' | 'loading' | 'success'
+
+interface MyToastProps extends ToastProps {
+  desc: string
+  state?: ToastState
+}
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Root>,
+  MyToastProps
+>((props, forwardedRef) => {
+  const { state, desc, ...itemProps } = props
+
+  const getIcon = () => {
+    switch (state) {
+      case 'error':
+        return <ExclamationCircleIcon className="error-icon" />
+      case 'success':
+        return <CheckIcon className="success-icon" />
+      case 'loading':
+        return <LoadingIcon />
+      default:
+        return <></>
+    }
+  }
+
+  return (
+    <ToastPrimitive.Provider>
+      <ToastPrimitive.Root
+        {...itemProps}
+        ref={forwardedRef}
+        className={`toast-root ${state}`}
+      >
+        <div className="toast-icon">{getIcon()}</div>
+        <ToastPrimitive.Description className="toast-desc">
+          {desc}
+        </ToastPrimitive.Description>
+      </ToastPrimitive.Root>
+      <ToastPrimitive.Viewport className="toast-viewpoint" />
+    </ToastPrimitive.Provider>
+  )
+})
+
+Toast.defaultProps = {
+  desc: '',
+  state: 'loading',
+}
+
+export default Toast