feat: frontend part of support try apps (#31287)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>

web/app/components/base/alert.tsx

@@ -0,0 +1,59 @@
+import {
+  RiCloseLine,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import { cva } from 'class-variance-authority'
+import {
+  memo,
+} from 'react'
+import { cn } from '@/utils/classnames'
+
+type Props = {
+  type?: 'info'
+  message: string
+  onHide: () => void
+  className?: string
+}
+const bgVariants = cva(
+  '',
+  {
+    variants: {
+      type: {
+        info: 'from-components-badge-status-light-normal-halo to-background-gradient-mask-transparent',
+      },
+    },
+  },
+)
+const Alert: React.FC<Props> = ({
+  type = 'info',
+  message,
+  onHide,
+  className,
+}) => {
+  return (
+    <div className={cn('pointer-events-none w-full', className)}>
+      <div
+        className="relative flex space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg"
+      >
+        <div className={cn('pointer-events-none absolute inset-0 bg-gradient-to-r  opacity-[0.4]', bgVariants({ type }))}>
+        </div>
+        <div className="flex h-6 w-6 items-center justify-center">
+          <RiInformation2Fill className="text-text-accent" />
+        </div>
+        <div className="p-1">
+          <div className="system-xs-regular text-text-secondary">
+            {message}
+          </div>
+        </div>
+        <div
+          className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
+          onClick={onHide}
+        >
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(Alert)