feat: add Text to Speech (TTS) functionality with provider selection, generation, and history management

- Implemented CreateTTSDialog for generating TTS from user input.
- Added TTSHeader for search, sorting, and creation controls.
- Created TTSList to display TTS history with filtering and sorting capabilities.
- Developed TTSLoadingStates for handling loading and error states.
- Introduced TTSRow for individual TTS entries with play and delete options.
- Built TTSTable for structured display of TTS history.
- Integrated TTS service API for generating and managing TTS data.
- Added TTSPage to encapsulate the TTS feature with pagination and state management.

src/components/tts/TTSLoadingStates.tsx

@@ -0,0 +1,83 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { AlertCircle, Mic, RefreshCw } from 'lucide-react'
+
+export function TTSLoading() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Card key={i}>
+          <CardContent className="pt-6">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1 space-y-2">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-5 w-16" />
+                  <Skeleton className="h-5 w-20" />
+                </div>
+                <Skeleton className="h-4 w-3/4" />
+                <div className="flex gap-1">
+                  <Skeleton className="h-4 w-12" />
+                  <Skeleton className="h-4 w-16" />
+                </div>
+                <Skeleton className="h-3 w-32" />
+              </div>
+              <Skeleton className="h-8 w-8" />
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+interface TTSErrorProps {
+  error: string
+  onRetry: () => void
+}
+
+export function TTSError({ error, onRetry }: TTSErrorProps) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <AlertCircle className="h-12 w-12 text-destructive" />
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold">Failed to load TTS generations</h3>
+            <p className="text-sm text-muted-foreground">{error}</p>
+          </div>
+          <Button onClick={onRetry} variant="outline">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Try again
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+interface TTSEmptyProps {
+  searchQuery: string
+}
+
+export function TTSEmpty({ searchQuery }: TTSEmptyProps) {
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <Mic className="h-12 w-12 text-muted-foreground" />
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold">
+              {searchQuery ? 'No TTS generations found' : 'No TTS generations yet'}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {searchQuery
+                ? 'Try adjusting your search or create a new TTS generation.'
+                : 'Create your first text-to-speech generation to get started.'}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}