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/index.tsx

@@ -0,0 +1,28 @@
+import ModelsSection from './components/ModelsSection';
+import ProvidersSection from './components/ProvidersSection';
+import UsageHistorySection from './components/UsageHistorySection';
+
+export default function ModelsPage() {
+  return (
+    <section className="h-full w-full min-h-0">
+      <div className="flex h-full w-full min-h-0 flex-col rounded-[16px] bg-white p-[20px] dark:bg-[#1b1b1d]">
+        <div className="mb-[20px] flex items-end justify-between gap-4 border-b border-[#E5E8EE] pb-[20px] dark:border-[#2a2a2d]">
+          <div className="flex min-w-0 items-end gap-[8px]">
+            <span className="text-[24px] font-medium leading-[32px] text-[#171717] dark:text-gray-100">
+              Models Configuration
+            </span>
+            <span className="pb-[3px] text-[12px] leading-[16px] text-[#99A0AE] dark:text-gray-500">
+              Configure your AI providers and view token usage.
+            </span>
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 space-y-12 overflow-y-auto pb-10 pr-2">
+          <ModelsSection />
+          <ProvidersSection />
+          <UsageHistorySection />
+        </div>
+      </div>
+    </section>
+  );
+}