Toast Notifications

/**
 * Toast container component for displaying notification messages
 * @param messages - Array of toast messages to display
 */
export interface ToastProps {
  messages: ToastMessage[];
}

/**
 * Events dispatched by Toast components
 */
interface ToastEvents {
  /** Dispatched when a toast is closed, returns the toast ID */
  close: CustomEvent<number>;
}

/**
 * Interface defining toast message structure
 * @param type - Message type determining icon and styling
 * @param title - Toast title text
 * @param message - Toast message content (supports HTML)
 * @param id - Unique identifier for the toast
 * @param duration - Auto-dismiss duration in seconds (null for no auto-dismiss)
 * @param visible - Visibility state of the toast
 */
export interface ToastMessage {
  type: "error" | "warning" | "info" | "success";
  title: string;
  message: string;
  id: number;
  duration: number | null;
  visible: boolean;
}

/**
 * Individual toast content component
 * @param title - Toast title text
 * @param message - Toast message content (HTML supported, sanitized)
 * @param type - Message type for styling and icon selection
 * @param id - Unique toast identifier
 * @param duration - Auto-dismiss duration in seconds (default: 10)
 * @param visible - Visibility state (default: true)
 */
export interface ToastContentProps {
  title?: string;
  message?: string;
  type: "error" | "warning" | "info" | "success";
  id: number;
  duration?: number | null;
  visible?: boolean;
}

import { Toast, type ToastMessage } from "@gradio/statustracker";

// Basic toast usage
const messages: ToastMessage[] = [
  {
    type: "success",
    title: "Success",
    message: "Operation completed successfully",
    id: 1,
    duration: 5,
    visible: true
  },
  {
    type: "error", 
    title: "Error",
    message: "Failed to process request",
    id: 2,
    duration: null, // No auto-dismiss
    visible: true
  }
];

<Toast messages={messages} on:close={handleToastClose} />

// Creating dynamic toast messages
let toastId = 1;
const toasts: ToastMessage[] = [];

function showSuccessToast(title: string, message: string) {
  toasts.push({
    type: "success",
    title,
    message,
    id: toastId++,
    duration: 5,
    visible: true
  });
  toasts = toasts; // Trigger reactivity
}

function showErrorToast(title: string, message: string) {
  toasts.push({
    type: "error",
    title,
    message,
    id: toastId++,
    duration: null, // Persistent until manually closed
    visible: true
  });
  toasts = toasts;
}

// HTML content in messages (sanitized automatically)
const htmlMessage: ToastMessage = {
  type: "info",
  title: "Information",
  message: "Click <a href='#'>here</a> to learn more",
  id: 3,
  duration: 10,
  visible: true
};