Enhance HistoryTable Component with Infinite Scroll and Cache Management

- Updated HistoryTable to implement infinite scrolling for loading history items dynamically.
- Introduced state management for accumulated history and total item count.
- Added Intersection Observer for triggering additional data fetches when scrolling.
- Implemented cache clearing functionality in the backend to manage voice prompt caches effectively.
- Improved loading indicators and user feedback for data fetching states.
- Refactored code for better readability and maintainability.

app/src/components/VoiceProfiles/SampleList.tsx

@@ -2,8 +2,8 @@ import { Plus, Trash2, Play, Edit, Check, X, Volume2, Pause } from 'lucide-react
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { CircleButton } from '@/components/ui/circle-button';
-import { Textarea } from '@/components/ui/textarea';
 import { Slider } from '@/components/ui/slider';
+import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import { useDeleteSample, useProfileSamples, useUpdateSample } from '@/lib/hooks/useProfiles';
@@ -194,7 +194,9 @@ export function SampleList({ profileId }: SampleListProps) {
         <div className="flex flex-col items-center justify-center py-8 text-center border border-dashed rounded-lg">
           <Volume2 className="h-8 w-8 text-muted-foreground/50 mb-2" />
           <p className="text-sm text-muted-foreground">No samples yet</p>
-          <p className="text-xs text-muted-foreground/70 mt-1">Add your first audio sample to get started</p>
+          <p className="text-xs text-muted-foreground/70 mt-1">
+            Add your first audio sample to get started
+          </p>
         </div>
       ) : (
         <div className="space-y-2">
@@ -206,7 +208,7 @@ export function SampleList({ profileId }: SampleListProps) {
                 key={sample.id}
                 className={cn(
                   'group relative rounded-lg border bg-card transition-all duration-200',
-                  isEditing ? 'ring-2 ring-primary/20' : 'hover:border-primary/30'
+                  isEditing ? 'ring-2 ring-primary/20' : 'hover:border-primary/30',
                 )}
               >
                 {isEditing ? (
@@ -287,11 +289,22 @@ export function SampleList({ profileId }: SampleListProps) {
         </div>
       )}
 
-      <Button type="button" variant="outline" className="w-full" onClick={() => setUploadOpen(true)}>
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        onClick={() => setUploadOpen(true)}
+      >
         <Plus className="mr-2 h-4 w-4" />
         Add Sample
       </Button>
 
+      <p className="text-xs text-muted-foreground text-center px-2">
+        Note: A single 30-second sample is the sweet spot. Quality may decrease with multiple
+        samples. In a future update samples might be interchangable and tagged for varying styles of
+        the same voice.
+      </p>
+
       <SampleUpload profileId={profileId} open={uploadOpen} onOpenChange={setUploadOpen} />
     </div>
   );