feat: add models management and usage history components

- Introduced RequestContentDialog for displaying request content details.
- Added UsageBarChart for visualizing token usage data.
- Implemented UsageHistorySection to manage and display usage history with filtering and pagination.
- Created provider-types for managing provider-related types.
- Developed ModelsPage to encapsulate models configuration, providers, and usage history.
- Defined usage-history types and utility functions for managing usage data.
- Updated routing to include models page and redirect agents to models.
- Refactored chat store to integrate models instead of agents.
- Established models store for managing model-related state and data fetching.

src/pages/Models/components/DialogSurface.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+
+type DialogSurfaceProps = {
+  open: boolean;
+  title: string;
+  subtitle?: string;
+  widthClassName?: string;
+  onClose: () => void;
+  children: ReactNode;
+};
+
+export default function DialogSurface({
+  open,
+  title,
+  subtitle,
+  widthClassName = 'max-w-[560px]',
+  onClose,
+  children,
+}: DialogSurfaceProps) {
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 px-4 py-6 backdrop-blur-[2px]"
+      onClick={onClose}
+    >
+      <div
+        className={[
+          'w-full rounded-[20px] bg-[#F4F3EB] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] dark:bg-[#1f1f22]',
+          widthClassName,
+        ].join(' ')}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-start justify-between border-b border-black/6 px-6 py-5 dark:border-white/6">
+          <div className="min-w-0">
+            <h2
+              className="text-[20px] font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6]"
+              style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
+            >
+              {title}
+            </h2>
+            {subtitle ? (
+              <p className="mt-1 text-[13px] text-[#99A0AE] dark:text-gray-500">
+                {subtitle}
+              </p>
+            ) : null}
+          </div>
+
+          <button
+            type="button"
+            className="mt-0.5 rounded-full p-1 text-[#99A0AE] transition-colors hover:text-[#171717] dark:hover:text-[#f3f4f6]"
+            onClick={onClose}
+            aria-label="Close dialog"
+          >
+            <svg viewBox="0 0 24 24" className="h-5 w-5 fill-none stroke-current" strokeWidth="1.8">
+              <path d="M6 6L18 18M18 6L6 18" strokeLinecap="round" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="px-6 pb-6 pt-5">{children}</div>
+      </div>
+    </div>
+  );
+}