Refactored Playground.tsx into modular components + Assistant-specific documents

frontend/src/components/playground/AssistantSelector.tsx

@@ -0,0 +1,242 @@
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Bot, Plus, X, User, Bookmark, Save, Settings } from 'lucide-react'
+
+interface SavedAssistant {
+  id: string
+  name: string
+  systemPrompt: string
+  temperature: number
+  maxTokens: number
+  model?: string
+  ragEnabled?: boolean
+  retrievalCount?: number
+  createdAt: string
+}
+
+interface SystemPromptPreset {
+  name: string
+  prompt: string
+}
+
+interface SelectedAssistant {
+  id: string
+  name: string
+  type: 'user'|'template'|'new'
+  originalTemplate?: string
+}
+
+interface AssistantSelectorProps {
+  savedAssistants: SavedAssistant[]
+  loadSavedAssistant: (id: string) => void
+  openSaveDialog: () => void
+  presets: SystemPromptPreset[]
+  onPresetSelect: (presetName: string) => void
+  isLoading: boolean
+  selectedAssistant: SelectedAssistant | null
+  createNewAssistant: () => void
+  clearCurrentAssistant: () => void
+  openRenameDialog: () => void
+  systemPrompt: string
+}
+
+export function AssistantSelector({
+  savedAssistants,
+  loadSavedAssistant,
+  openSaveDialog,
+  presets,
+  onPresetSelect,
+  isLoading,
+  selectedAssistant,
+  createNewAssistant,
+  clearCurrentAssistant,
+  openRenameDialog,
+  systemPrompt
+}: AssistantSelectorProps) {
+  const handleAssistantSelect = (value: string) => {
+    if (value === 'create_new') {
+      createNewAssistant()
+    } else if (value === 'clear_current') {
+      clearCurrentAssistant()
+    } else if (value.startsWith('user_')) {
+      // Check if it's a saved assistant (starts with user_)
+      const assistantId = value.replace('user_', '')
+      loadSavedAssistant(assistantId)
+    } else {
+      // It's a template preset
+      onPresetSelect(value)
+    }
+  }
+
+  // Get current selection value for the Select component
+  const getCurrentValue = () => {
+    if (!selectedAssistant) return ''
+    
+    if (selectedAssistant.type === 'user') {
+      return `user_${selectedAssistant.id}`
+    } else if (selectedAssistant.type === 'new') {
+      return 'new_assistant'
+    } else {
+      return selectedAssistant.id
+    }
+  }
+
+  // Get badge for assistant type
+  const getAssistantBadge = (type: 'user'|'template'|'new') => {
+    switch (type) {
+      case 'user':
+        return { variant: 'secondary' as const, text: 'Mine' }
+      case 'template':
+        return { variant: 'outline' as const, text: 'Template' }
+      case 'new':
+        return { variant: 'default' as const, text: 'New', className: 'bg-green-100 text-green-700' }
+    }
+  }
+
+  const totalAssistants = savedAssistants.length + presets.length
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label className="text-sm font-medium mb-2 block">Load Assistant</Label>
+        <Select value={getCurrentValue()} onValueChange={handleAssistantSelect}>
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder={`Choose assistant (${totalAssistants} available)`}>
+              {selectedAssistant ? (
+                <div className="flex items-center gap-2">
+                  <Bot className="h-4 w-4" />
+                  <span>{selectedAssistant.name}</span>
+                  {selectedAssistant.originalTemplate && (
+                    <span className="text-xs text-muted-foreground">
+                      (from {selectedAssistant.originalTemplate})
+                    </span>
+                  )}
+                  <Badge 
+                    variant={getAssistantBadge(selectedAssistant.type).variant} 
+                    className={`text-xs ml-auto ${getAssistantBadge(selectedAssistant.type).className || ''}`}
+                  >
+                    {getAssistantBadge(selectedAssistant.type).text}
+                  </Badge>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <Bot className="h-4 w-4" />
+                  <span>Choose assistant</span>
+                  <Badge variant="outline" className="text-xs ml-auto">
+                    {totalAssistants}
+                  </Badge>
+                </div>
+              )}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {/* Actions Section */}
+            <SelectGroup>
+              <SelectLabel className="flex items-center gap-2 text-sm font-medium">
+                <Plus className="h-4 w-4" />
+                Actions
+              </SelectLabel>
+              <SelectItem value="create_new">
+                <div className="flex items-center gap-2 w-full">
+                  <Plus className="h-4 w-4 text-green-600" />
+                  <span className="truncate flex-1">Create New Assistant</span>
+                  <Badge variant="default" className="text-xs bg-green-100 text-green-700">New</Badge>
+                </div>
+              </SelectItem>
+              {selectedAssistant && (
+                <SelectItem value="clear_current">
+                  <div className="flex items-center gap-2 w-full">
+                    <X className="h-4 w-4 text-gray-600" />
+                    <span className="truncate flex-1">Clear Current</span>
+                    <Badge variant="outline" className="text-xs">Clear</Badge>
+                  </div>
+                </SelectItem>
+              )}
+            </SelectGroup>
+            
+            {/* My Assistants Section */}
+            {savedAssistants.length > 0 && (
+              <SelectGroup>
+                <SelectLabel className="flex items-center gap-2 text-sm font-medium">
+                  <User className="h-4 w-4" />
+                  My Assistants ({savedAssistants.length})
+                </SelectLabel>
+                {savedAssistants.map((assistant) => (
+                  <SelectItem key={`user_${assistant.id}`} value={`user_${assistant.id}`}>
+                    <div className="flex items-center gap-2 w-full">
+                      <Bot className="h-4 w-4 text-blue-600" />
+                      <span className="truncate flex-1">{assistant.name}</span>
+                      <Badge variant="secondary" className="text-xs">Mine</Badge>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            )}
+            
+            {/* Templates Section */}
+            {presets.length > 0 && (
+              <SelectGroup>
+                <SelectLabel className="flex items-center gap-2 text-sm font-medium">
+                  <Bookmark className="h-4 w-4" />
+                  Templates ({presets.length})
+                </SelectLabel>
+                {presets.map((preset) => (
+                  <SelectItem key={preset.name} value={preset.name}>
+                    <div className="flex items-center gap-2 w-full">
+                      <Bot className="h-4 w-4 text-green-600" />
+                      <span className="truncate flex-1">{preset.name}</span>
+                      <Badge variant="outline" className="text-xs">Template</Badge>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            )}
+
+            {/* Empty State */}
+            {totalAssistants === 0 && (
+              <div className="p-2 text-sm text-muted-foreground text-center">
+                No assistants available
+              </div>
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Rename Assistant */}
+      {selectedAssistant && selectedAssistant.type !== 'template' && (
+        <Button 
+          onClick={openRenameDialog} 
+          size="sm" 
+          variant="ghost" 
+          className="w-full justify-start"
+          disabled={isLoading}
+        >
+          <Settings className="h-4 w-4 mr-2" />
+          Rename
+        </Button>
+      )}
+
+      {/* Save Current Configuration */}
+      <Button 
+        onClick={openSaveDialog} 
+        size="sm" 
+        variant="outline" 
+        className="w-full"
+        disabled={isLoading || !systemPrompt.trim()}
+      >
+        <Save className="h-4 w-4 mr-2" />
+        Save Assistant
+      </Button>
+    </div>
+  )
+}

frontend/src/components/playground/DocumentsTab.tsx

@@ -0,0 +1,382 @@
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Slider } from '@/components/ui/slider'
+import { Label } from '@/components/ui/label'
+import { User, Upload, FileText, File, X } from 'lucide-react'
+
+interface UploadedFile {
+  id: string
+  name: string
+  size: number
+  type: string
+  uploadedAt: string
+  status: string
+  chunks?: number
+  assistantId?: string | null
+}
+
+interface SelectedAssistant {
+  id: string
+  name: string
+  type: 'user'|'template'|'new'
+  originalTemplate?: string
+}
+
+interface DocumentsTabProps {
+  isLoading: boolean
+  ragEnabled: boolean
+  setRagEnabled: (enabled: boolean) => void
+  retrievalCount: number
+  setRetrievalCount: (count: number) => void
+  currentAssistant: SelectedAssistant | null
+}
+
+export function DocumentsTab({
+  isLoading,
+  ragEnabled,
+  setRagEnabled,
+  retrievalCount,
+  setRetrievalCount,
+  currentAssistant
+}: DocumentsTabProps) {
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
+  const [isUploading, setIsUploading] = useState(false)
+
+  // Load assistant-specific documents when assistant changes
+  useEffect(() => {
+    const loadDocuments = async () => {
+      if (!currentAssistant) {
+        setUploadedFiles([])
+        return
+      }
+
+      try {
+        // For now, load all documents but filter by assistant in the future
+        const response = await fetch('/rag/documents')
+        if (response.ok) {
+          const data = await response.json()
+          if (data.documents) {
+            const documentList = Object.entries(data.documents).map(([docId, docInfo]: [string, any]) => ({
+              id: docId,
+              name: docInfo.filename,
+              size: 0,
+              type: docInfo.file_type,
+              uploadedAt: new Date().toISOString(),
+              status: docInfo.status,
+              chunks: docInfo.chunks,
+              assistantId: docInfo.assistant_id || null // Future: filter by assistant
+            })) as UploadedFile[]
+            
+            // TODO: Filter documents by currentAssistant.id when backend supports it
+            setUploadedFiles(documentList)
+          }
+        }
+      } catch (error) {
+        console.error('Error loading documents:', error)
+      }
+    }
+
+    loadDocuments()
+  }, [currentAssistant])
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files
+    if (!files || !currentAssistant) return
+
+    setIsUploading(true)
+    
+    try {
+      const formData = new FormData()
+      
+      // Add assistant ID to the upload
+      formData.append('assistant_id', currentAssistant.id)
+      
+      for (const file of Array.from(files)) {
+        formData.append('files', file)
+      }
+
+      const response = await fetch('/rag/upload', {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (response.ok) {
+        const result = await response.json()
+        
+        // Add successfully processed files to the list
+        const newFiles = result.results
+          .filter((r: any) => r.success)
+          .map((r: any) => ({
+            id: r.doc_id,
+            name: r.filename,
+            size: 0, // Server doesn't return size currently
+            type: 'processed',
+            uploadedAt: new Date().toISOString(),
+            status: 'processed',
+            chunks: r.chunks,
+            assistantId: currentAssistant?.id
+          })) as UploadedFile[]
+        
+        setUploadedFiles((prev: UploadedFile[]) => [...prev, ...newFiles])
+        
+        // Show errors for failed uploads
+        const failedUploads = result.results.filter((r: any) => !r.success)
+        if (failedUploads.length > 0) {
+          console.error('Some files failed to upload:', failedUploads)
+        }
+      } else {
+        console.error('Upload failed:', response.statusText)
+      }
+      
+      // Reset input
+      event.target.value = ''
+    } catch (error) {
+      console.error('File upload error:', error)
+    } finally {
+      setIsUploading(false)
+    }
+  }
+
+  const removeFile = async (fileId: string) => {
+    try {
+      const response = await fetch(`/rag/documents/${fileId}`, {
+        method: 'DELETE',
+      })
+      
+      if (response.ok) {
+        setUploadedFiles((prev: UploadedFile[]) => prev.filter((f: UploadedFile) => f.id !== fileId))
+      } else {
+        console.error('Failed to delete document:', response.statusText)
+      }
+    } catch (error) {
+      console.error('Error deleting document:', error)
+      // Remove from UI anyway
+      setUploadedFiles((prev: UploadedFile[]) => prev.filter((f: UploadedFile) => f.id !== fileId))
+    }
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  }
+
+  return (
+    <div className="space-y-4 pb-6">
+      {/* Current Assistant Info */}
+      {currentAssistant && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Current Assistant</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center space-x-2">
+              <User className="h-4 w-4 text-blue-600" />
+              <span className="font-medium">{currentAssistant.name}</span>
+              <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
+                currentAssistant.type === 'user' ? 'bg-blue-100 text-blue-700' :
+                currentAssistant.type === 'template' ? 'bg-gray-100 text-gray-700' :
+                'bg-green-100 text-green-700'
+              }`}>
+                {currentAssistant.type === 'user' ? 'My Assistant' :
+                 currentAssistant.type === 'template' ? 'Template' : 'New Assistant'}
+              </span>
+              {currentAssistant.originalTemplate && (
+                <span className="text-xs text-muted-foreground">
+                  (from {currentAssistant.originalTemplate})
+                </span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* RAG Configuration */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            RAG Configuration
+            {currentAssistant && (
+              <span className="text-xs text-muted-foreground font-normal ml-2">
+                for "{currentAssistant.name}"
+              </span>
+            )}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="space-y-1">
+                <Label className="text-sm font-medium">Enable RAG</Label>
+                <p className="text-xs text-muted-foreground">
+                  Use uploaded documents to enhance responses
+                </p>
+              </div>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  id="rag-enabled"
+                  checked={ragEnabled}
+                  onChange={(e) => setRagEnabled(e.target.checked)}
+                  className="rounded"
+                  disabled={isLoading || uploadedFiles.length === 0}
+                />
+                <Label htmlFor="rag-enabled" className="text-sm">
+                  {ragEnabled ? 'On' : 'Off'}
+                </Label>
+              </div>
+            </div>
+
+            {ragEnabled && (
+              <div className="space-y-3 border-t pt-4">
+                <div>
+                  <Label className="text-sm font-medium mb-2 block">
+                    Retrieval Count: {retrievalCount}
+                  </Label>
+                  <Slider
+                    value={[retrievalCount]}
+                    onValueChange={(value) => setRetrievalCount(value[0])}
+                    max={10}
+                    min={1}
+                    step={1}
+                    className="w-full"
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
+                    <span>1 (Focused)</span>
+                    <span>5 (Balanced)</span>
+                    <span>10 (Comprehensive)</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-2">
+                    Number of relevant document chunks to retrieve for context
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* File Upload */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base flex items-center">
+            <Upload className="h-4 w-4 mr-2" />
+            Upload Documents
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors">
+              <input
+                type="file"
+                id="file-upload"
+                multiple
+                accept=".pdf,.txt,.docx,.md"
+                onChange={handleFileUpload}
+                className="hidden"
+                disabled={isUploading || isLoading || !currentAssistant}
+              />
+              <Label
+                htmlFor="file-upload"
+                className="cursor-pointer flex flex-col items-center space-y-2"
+              >
+                <Upload className="h-8 w-8 text-gray-400" />
+                <span className="text-sm font-medium">
+                  {isUploading ? 'Uploading...' : 
+                   !currentAssistant ? 'Select an assistant first' :
+                   'Click to upload documents'}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {currentAssistant ? 'PDF, TXT, DOCX, MD files supported' : 
+                   'Documents will be specific to the selected assistant'}
+                </span>
+              </Label>
+            </div>
+
+            <div className="text-xs text-muted-foreground bg-blue-50 p-3 rounded">
+              <strong>💡 How it works:</strong>
+              <br />
+              • Upload documents specific to this assistant's domain
+              • Each assistant maintains its own knowledge base
+              • Enable RAG to use these documents as context
+              • The AI will search relevant information to answer questions
+              {!currentAssistant && (
+                <>
+                  <br />
+                  <strong>⚠️ Note:</strong> Select an assistant first to upload documents
+                </>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Uploaded Files */}
+      {uploadedFiles.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center">
+              <FileText className="h-4 w-4 mr-2" />
+              {currentAssistant ? 
+                `${currentAssistant.name}'s Documents (${uploadedFiles.length})` :
+                `Documents (${uploadedFiles.length})`
+              }
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {uploadedFiles.map((file) => (
+                <div
+                  key={file.id}
+                  className="flex items-center justify-between p-3 border rounded-lg bg-gray-50"
+                >
+                  <div className="flex items-center space-x-3">
+                    <File className="h-4 w-4 text-blue-600" />
+                    <div className="flex-1">
+                      <p className="text-sm font-medium truncate max-w-[200px]">
+                        {file.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {formatFileSize(file.size)} • {file.status}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeFile(file.id)}
+                    disabled={isLoading}
+                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* RAG Status */}
+      {ragEnabled && uploadedFiles.length > 0 && (
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center space-x-2 text-green-600">
+              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              <span className="text-sm font-medium">
+                RAG Active - Using {uploadedFiles.length} document(s)
+                {currentAssistant && ` for "${currentAssistant.name}"`}
+              </span>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {currentAssistant?.name || 'This assistant'} will use context from uploaded documents to enhance responses
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

frontend/src/components/playground/ModelParametersTab.tsx

@@ -0,0 +1,203 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Slider } from '@/components/ui/slider'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Cloud, Brain, Zap } from 'lucide-react'
+
+interface ModelInfo {
+  model_name: string
+  name: string
+  supports_thinking: boolean
+  description: string
+  size_gb: string
+  is_loaded: boolean
+  type: 'local' | 'api'
+}
+
+interface ModelParametersTabProps {
+  models: ModelInfo[]
+  selectedModel: string | null
+  setSelectedModel: (model: string) => void
+  autoLoadingModel: string | null
+  temperature: number
+  setTemperature: (temp: number) => void
+  maxTokens: number
+  setMaxTokens: (tokens: number) => void
+}
+
+export function ModelParametersTab({
+  models,
+  selectedModel,
+  setSelectedModel,
+  autoLoadingModel,
+  temperature,
+  setTemperature,
+  maxTokens,
+  setMaxTokens
+}: ModelParametersTabProps) {
+  return (
+    <>
+      {/* Model Selection */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Model</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <Select value={selectedModel || ""} onValueChange={setSelectedModel}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a model...">
+                  {selectedModel && (() => {
+                    const model = models.find(m => m.model_name === selectedModel)
+                    if (!model) return selectedModel
+                    const isApiModel = model.type === 'api'
+                    return (
+                      <div className="flex items-center gap-2">
+                        {isApiModel ? (
+                          <Cloud className="h-4 w-4 text-blue-500" />
+                        ) : model.supports_thinking ? (
+                          <Brain className="h-4 w-4 text-purple-500" />
+                        ) : (
+                          <Zap className="h-4 w-4 text-green-500" />
+                        )}
+                        <span className="truncate">{model.name}</span>
+                        {autoLoadingModel === selectedModel ? (
+                          <Badge variant="outline" className="text-xs">
+                            Loading...
+                          </Badge>
+                        ) : (
+                          <Badge variant="outline" className="text-xs">
+                            {isApiModel ? "API" : model.is_loaded ? "Loaded" : "Available"}
+                          </Badge>
+                        )}
+                      </div>
+                    )
+                  })()}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>🌐 API Models</SelectLabel>
+                  {models.filter(m => m.type === 'api').map((model) => (
+                    <SelectItem key={model.model_name} value={model.model_name}>
+                      <div className="flex items-center gap-2">
+                        <Cloud className="h-4 w-4 text-blue-500" />
+                        <span>{model.name}</span>
+                        <Badge variant="outline" className="text-xs bg-blue-50">API</Badge>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+                <SelectGroup>
+                  <SelectLabel>💻 Local Models</SelectLabel>
+                  {models.filter(m => m.type === 'local').map((model) => (
+                    <SelectItem key={model.model_name} value={model.model_name}>
+                      <div className="flex items-center gap-2">
+                        {model.supports_thinking ? (
+                          <Brain className="h-4 w-4 text-purple-500" />
+                        ) : (
+                          <Zap className="h-4 w-4 text-green-500" />
+                        )}
+                        <span>{model.name}</span>
+                        {autoLoadingModel === model.model_name ? (
+                          <Badge variant="outline" className="text-xs bg-yellow-50">Loading...</Badge>
+                        ) : model.is_loaded ? (
+                          <Badge variant="outline" className="text-xs bg-green-50">Loaded</Badge>
+                        ) : (
+                          <Badge variant="outline" className="text-xs bg-gray-50">Available</Badge>
+                        )}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Generation Parameters */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Parameters</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Temperature Slider */}
+          <div>
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm font-medium">Temperature</Label>
+              <Badge variant="outline" className="text-xs">
+                {temperature}
+              </Badge>
+            </div>
+            <Slider
+              value={[temperature]}
+              onValueChange={(value) => setTemperature(value[0])}
+              max={2}
+              min={0}
+              step={0.1}
+              className="w-full mb-3"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mb-2">
+              <span>0.0 (Focused)</span>
+              <span>1.0 (Balanced)</span>
+              <span>2.0 (Creative)</span>
+            </div>
+            <div className="text-xs text-muted-foreground bg-gray-50 p-2 rounded">
+              {temperature <= 0.3 
+                ? "🎯 Very focused and deterministic responses"
+                : temperature <= 0.7 
+                  ? "⚖️ Balanced creativity and consistency"
+                  : temperature <= 1.2
+                    ? "🎨 More creative and varied responses"
+                    : "🚀 Highly creative, unpredictable responses"
+              }
+            </div>
+          </div>
+
+          {/* Max Tokens Slider */}
+          <div>
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm font-medium">Max Tokens</Label>
+              <Badge variant="outline" className="text-xs">
+                {maxTokens}
+              </Badge>
+            </div>
+            <Slider
+              value={[maxTokens]}
+              onValueChange={(value) => setMaxTokens(value[0])}
+              max={4000}
+              min={50}
+              step={50}
+              className="w-full mb-3"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mb-2">
+              <span>50 (Short)</span>
+              <span>1024 (Medium)</span>
+              <span>4000 (Long)</span>
+            </div>
+            <div className="text-xs text-muted-foreground bg-gray-50 p-2 rounded">
+              {maxTokens <= 200 
+                ? "📝 Brief responses, good for quick answers"
+                : maxTokens <= 1000 
+                  ? "📄 Medium responses, balanced length"
+                  : maxTokens <= 2000
+                    ? "📋 Long responses, detailed explanations"
+                    : "📚 Very long responses, comprehensive content"
+              }
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}

frontend/src/components/playground/SystemInstructionsTab.tsx

@@ -0,0 +1,145 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { 
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Brain, MessageSquare } from 'lucide-react'
+
+interface SystemInstructionsTabProps {
+  systemPrompt: string
+  setSystemPrompt: (prompt: string) => void
+  isLoading: boolean
+}
+
+export function SystemInstructionsTab({
+  systemPrompt,
+  setSystemPrompt,
+  isLoading
+}: SystemInstructionsTabProps) {
+  const promptExamples = [
+    {
+      title: "Helpful Assistant",
+      prompt: "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and well-structured responses. If you're unsure about something, say so."
+    },
+    {
+      title: "Code Expert", 
+      prompt: "You are an expert software developer. Provide clean, efficient code with clear explanations. Always follow best practices and include helpful comments."
+    },
+    {
+      title: "Creative Writer",
+      prompt: "You are a creative writer. Use vivid language, engaging storytelling, and imaginative descriptions. Be expressive and artistic in your responses."
+    },
+    {
+      title: "Teacher/Tutor",
+      prompt: "You are a patient and knowledgeable teacher. Break down complex concepts into simple, understandable parts. Use examples and analogies to help explain ideas."
+    }
+  ]
+
+  const bestPractices = [
+    "Be specific about the assistant's role and expertise",
+    "Include desired communication style and tone", 
+    "Specify output format if needed (lists, paragraphs, etc.)",
+    "Add ethical guidelines and behavior expectations"
+  ]
+
+  return (
+    <div className="space-y-4 pb-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">System Instructions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <Label className="text-base font-medium text-blue-700">
+              System Prompt
+            </Label>
+            <textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="Define your AI assistant's role, personality, and behavior..."
+              className="w-full h-[250px] text-base p-4 border-2 border-blue-200 rounded-lg bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none overflow-y-auto"
+              disabled={isLoading}
+            />
+            
+            {/* Character count */}
+            <div className="text-xs text-muted-foreground text-right">
+              {systemPrompt.length} characters
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Quick Examples */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center">
+            <Brain className="h-4 w-4 mr-2" />
+            Quick Examples
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <Label className="text-xs font-medium text-muted-foreground">
+              Choose a template to get started:
+            </Label>
+            <Select
+              value=""
+              onValueChange={(value) => {
+                const example = promptExamples[parseInt(value)]
+                if (example) {
+                  setSystemPrompt(example.prompt)
+                }
+              }}
+              disabled={isLoading}
+            >
+              <SelectTrigger className="w-full h-10">
+                <SelectValue placeholder="Select example prompt..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Example Prompts</SelectLabel>
+                  {promptExamples.map((example, index) => (
+                    <SelectItem key={index} value={index.toString()}>
+                      <div className="flex flex-col items-start">
+                        <span className="font-medium text-sm">{example.title}</span>
+                        <span className="text-xs text-muted-foreground line-clamp-1 mt-1">
+                          {example.prompt.substring(0, 60)}...
+                        </span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Best Practices */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center">
+            <MessageSquare className="h-4 w-4 mr-2" />
+            Best Practices
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="text-xs space-y-2 text-muted-foreground">
+            {bestPractices.map((practice, index) => (
+              <li key={index} className="flex items-start">
+                <span className="inline-block w-1.5 h-1.5 bg-blue-400 rounded-full mt-1.5 mr-2 flex-shrink-0" />
+                {practice}
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

frontend/src/components/playground/index.ts

@@ -0,0 +1,4 @@
+export { ModelParametersTab } from './ModelParametersTab'
+export { AssistantSelector } from './AssistantSelector'
+export { SystemInstructionsTab } from './SystemInstructionsTab'
+export { DocumentsTab } from './DocumentsTab'

frontend/src/pages/Playground.tsx

@@ -1,21 +1,9 @@
 import { useState, useEffect } from 'react'
 import { AssistantInfo } from '@/types/chat'
 import { Button } from '@/components/ui/button'
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Card } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Slider } from '@/components/ui/slider'
 import { Label } from '@/components/ui/label'
-import { Badge } from '@/components/ui/badge'
-
-import { 
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 
 import {
   AlertDialog,
@@ -30,27 +18,25 @@ import {
 import { Chat } from '@/components/ui/chat'
 import { useChat } from '@/hooks/useChat'
 import { 
-  Brain, 
-  Zap, 
-  MessageSquare, 
-  Settings,
-  Cloud,
   Plus,
-  X,
   Trash2,
-  Bot,
   Save,
+  Settings,
   Sliders,
-  Bookmark,
-  User,
-  ChevronLeft,
-  ChevronRight,
   BookOpen,
-  Upload,
-  FileText,
-  File
+  MessageSquare,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react'
 
+// Import refactored components
+import { 
+  ModelParametersTab, 
+  AssistantSelector, 
+  SystemInstructionsTab, 
+  DocumentsTab 
+} from '@/components/playground'
+
 interface ModelInfo {
   model_name: string
   name: string
@@ -115,8 +101,6 @@ export function Playground() {
   // Rename assistant dialog state
   const [showRenameDialog, setShowRenameDialog] = useState(false)
   const [renameAssistantName, setRenameAssistantName] = useState('')
-  
-
 
   // Load saved assistants
   const loadSavedAssistants = () => {
@@ -161,6 +145,7 @@ export function Playground() {
       model: selectedModel,
       ragEnabled,
       retrievalCount,
+      documents: [], // Assistant-specific documents (future: populated from DocumentsTab)
       createdAt: new Date().toISOString()
     }
 
@@ -300,9 +285,7 @@ export function Playground() {
     setShowRenameDialog(false)
     setRenameAssistantName('')
   }
-  
 
-  
   // Get current assistant information
   const getCurrentAssistantInfo = (): AssistantInfo => {
     return {
@@ -314,8 +297,6 @@ export function Playground() {
       originalTemplate: selectedAssistant?.originalTemplate
     }
   }
-  
-
 
   // Convert template to new assistant when settings change
   const convertTemplateToNew = () => {
@@ -361,8 +342,6 @@ export function Playground() {
     loadSavedAssistants()
   }, [])
 
-
-
   // Debug logs for Session issue
   useEffect(() => {
     console.log('Sidebar states:', { sessionsCollapsed, configCollapsed, sessionsCount: sessions.length, currentSessionId })
@@ -481,8 +460,6 @@ export function Playground() {
     }
   }
 
-
-
   // Cleanup: unload all local models when component unmounts or user leaves
   useEffect(() => {
     const handlePageUnload = async () => {
@@ -623,12 +600,8 @@ export function Playground() {
         </div>
       </div>
 
-
-
       {/* Main Content */}
       <div className="flex-1 flex flex-col h-full">
-
-
         {/* Content Area - Responsive layout */}
         <div className="flex-1 flex overflow-hidden">
           {/* Chat Area */}
@@ -884,854 +857,3 @@ export function Playground() {
     </div>
   )
 }
-
-// Model Parameters Tab Component
-function ModelParametersTab({
-  models,
-  selectedModel,
-  setSelectedModel,
-  autoLoadingModel,
-  temperature,
-  setTemperature,
-  maxTokens,
-  setMaxTokens
-}: {
-  models: ModelInfo[]
-  selectedModel: string | null
-  setSelectedModel: (model: string) => void
-  autoLoadingModel: string | null
-  temperature: number
-  setTemperature: (temp: number) => void
-  maxTokens: number
-  setMaxTokens: (tokens: number) => void
-}) {
-  return (
-    <>
-      {/* Model Selection */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Model</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div>
-            <Select value={selectedModel || ""} onValueChange={setSelectedModel}>
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select a model...">
-                  {selectedModel && (() => {
-                    const model = models.find(m => m.model_name === selectedModel)
-                    if (!model) return selectedModel
-                    const isApiModel = model.type === 'api'
-                    return (
-                      <div className="flex items-center gap-2">
-                        {isApiModel ? (
-                          <Cloud className="h-4 w-4 text-blue-500" />
-                        ) : model.supports_thinking ? (
-                          <Brain className="h-4 w-4 text-purple-500" />
-                        ) : (
-                          <Zap className="h-4 w-4 text-green-500" />
-                        )}
-                        <span className="truncate">{model.name}</span>
-                        {autoLoadingModel === selectedModel ? (
-                          <Badge variant="outline" className="text-xs">
-                            Loading...
-                          </Badge>
-                        ) : (
-                          <Badge variant="outline" className="text-xs">
-                            {isApiModel ? "API" : model.is_loaded ? "Loaded" : "Available"}
-                          </Badge>
-                        )}
-                      </div>
-                    )
-                  })()}
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>🌐 API Models</SelectLabel>
-                  {models.filter(m => m.type === 'api').map((model) => (
-                    <SelectItem key={model.model_name} value={model.model_name}>
-                      <div className="flex items-center gap-2">
-                        <Cloud className="h-4 w-4 text-blue-500" />
-                        <span>{model.name}</span>
-                        <Badge variant="outline" className="text-xs bg-blue-50">API</Badge>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-                <SelectGroup>
-                  <SelectLabel>💻 Local Models</SelectLabel>
-                  {models.filter(m => m.type === 'local').map((model) => (
-                    <SelectItem key={model.model_name} value={model.model_name}>
-                      <div className="flex items-center gap-2">
-                        {model.supports_thinking ? (
-                          <Brain className="h-4 w-4 text-purple-500" />
-                        ) : (
-                          <Zap className="h-4 w-4 text-green-500" />
-                        )}
-                        <span>{model.name}</span>
-                        {autoLoadingModel === model.model_name ? (
-                          <Badge variant="outline" className="text-xs bg-yellow-50">Loading...</Badge>
-                        ) : model.is_loaded ? (
-                          <Badge variant="outline" className="text-xs bg-green-50">Loaded</Badge>
-                        ) : (
-                          <Badge variant="outline" className="text-xs bg-gray-50">Available</Badge>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-
-
-        </CardContent>
-      </Card>
-
-      {/* Generation Parameters */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Parameters</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {/* Temperature Slider */}
-          <div>
-            <div className="flex items-center justify-between mb-3">
-              <Label className="text-sm font-medium">Temperature</Label>
-              <Badge variant="outline" className="text-xs">
-                {temperature}
-              </Badge>
-            </div>
-            <Slider
-              value={[temperature]}
-              onValueChange={(value) => setTemperature(value[0])}
-              max={2}
-              min={0}
-              step={0.1}
-              className="w-full mb-3"
-            />
-            <div className="flex justify-between text-xs text-gray-500 mb-2">
-              <span>0.0 (Focused)</span>
-              <span>1.0 (Balanced)</span>
-              <span>2.0 (Creative)</span>
-            </div>
-            <div className="text-xs text-muted-foreground bg-gray-50 p-2 rounded">
-              {temperature <= 0.3 
-                ? "🎯 Very focused and deterministic responses"
-                : temperature <= 0.7 
-                  ? "⚖️ Balanced creativity and consistency"
-                  : temperature <= 1.2
-                    ? "🎨 More creative and varied responses"
-                    : "🚀 Highly creative, unpredictable responses"
-              }
-            </div>
-          </div>
-
-          {/* Max Tokens Slider */}
-          <div>
-            <div className="flex items-center justify-between mb-3">
-              <Label className="text-sm font-medium">Max Tokens</Label>
-              <Badge variant="outline" className="text-xs">
-                {maxTokens}
-              </Badge>
-            </div>
-            <Slider
-              value={[maxTokens]}
-              onValueChange={(value) => setMaxTokens(value[0])}
-              max={4000}
-              min={50}
-              step={50}
-              className="w-full mb-3"
-            />
-            <div className="flex justify-between text-xs text-gray-500 mb-2">
-              <span>50 (Short)</span>
-              <span>1024 (Medium)</span>
-              <span>4000 (Long)</span>
-            </div>
-            <div className="text-xs text-muted-foreground bg-gray-50 p-2 rounded">
-              {maxTokens <= 200 
-                ? "📝 Brief responses, good for quick answers"
-                : maxTokens <= 1000 
-                  ? "📄 Medium responses, balanced length"
-                  : maxTokens <= 2000
-                    ? "📋 Long responses, detailed explanations"
-                    : "📚 Very long responses, comprehensive content"
-              }
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  )
-}
-
-
-
-// Assistant Selector Component (above tabs)
-function AssistantSelector({
-  savedAssistants,
-  loadSavedAssistant,
-  openSaveDialog,
-  presets,
-  onPresetSelect,
-  isLoading,
-  selectedAssistant,
-  createNewAssistant,
-  clearCurrentAssistant,
-  openRenameDialog,
-  systemPrompt
-}: {
-  savedAssistants: any[]
-  loadSavedAssistant: (id: string) => void
-  openSaveDialog: () => void
-  presets: Array<{name: string; prompt: string}>
-  onPresetSelect: (presetName: string) => void
-  isLoading: boolean
-  selectedAssistant: {id: string, name: string, type: 'user'|'template'|'new', originalTemplate?: string} | null
-  createNewAssistant: () => void
-  clearCurrentAssistant: () => void
-  openRenameDialog: () => void
-  systemPrompt: string
-}) {
-  const handleAssistantSelect = (value: string) => {
-    if (value === 'create_new') {
-      createNewAssistant()
-    } else if (value === 'clear_current') {
-      clearCurrentAssistant()
-    } else if (value.startsWith('user_')) {
-      // Check if it's a saved assistant (starts with user_)
-      const assistantId = value.replace('user_', '')
-      loadSavedAssistant(assistantId)
-    } else {
-      // It's a template preset
-      onPresetSelect(value)
-    }
-  }
-
-  // Get current selection value for the Select component
-  const getCurrentValue = () => {
-    if (!selectedAssistant) return ''
-    
-    if (selectedAssistant.type === 'user') {
-      return `user_${selectedAssistant.id}`
-    } else if (selectedAssistant.type === 'new') {
-      return 'new_assistant'
-    } else {
-      return selectedAssistant.id
-    }
-  }
-
-  // Get badge for assistant type
-  const getAssistantBadge = (type: 'user'|'template'|'new') => {
-    switch (type) {
-      case 'user':
-        return { variant: 'secondary' as const, text: 'Mine' }
-      case 'template':
-        return { variant: 'outline' as const, text: 'Template' }
-      case 'new':
-        return { variant: 'default' as const, text: 'New', className: 'bg-green-100 text-green-700' }
-    }
-  }
-
-  const totalAssistants = savedAssistants.length + presets.length
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <Label className="text-sm font-medium mb-2 block">Load Assistant</Label>
-        <Select value={getCurrentValue()} onValueChange={handleAssistantSelect}>
-          <SelectTrigger className="w-full">
-            <SelectValue placeholder={`Choose assistant (${totalAssistants} available)`}>
-              {selectedAssistant ? (
-                <div className="flex items-center gap-2">
-                  <Bot className="h-4 w-4" />
-                  <span>{selectedAssistant.name}</span>
-                  {selectedAssistant.originalTemplate && (
-                    <span className="text-xs text-muted-foreground">
-                      (from {selectedAssistant.originalTemplate})
-                    </span>
-                  )}
-                  <Badge 
-                    variant={getAssistantBadge(selectedAssistant.type).variant} 
-                    className={`text-xs ml-auto ${getAssistantBadge(selectedAssistant.type).className || ''}`}
-                  >
-                    {getAssistantBadge(selectedAssistant.type).text}
-                  </Badge>
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <Bot className="h-4 w-4" />
-                  <span>Choose assistant</span>
-                  <Badge variant="outline" className="text-xs ml-auto">
-                    {totalAssistants}
-                  </Badge>
-                </div>
-              )}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            {/* Actions Section */}
-            <SelectGroup>
-              <SelectLabel className="flex items-center gap-2 text-sm font-medium">
-                <Plus className="h-4 w-4" />
-                Actions
-              </SelectLabel>
-              <SelectItem value="create_new">
-                <div className="flex items-center gap-2 w-full">
-                  <Plus className="h-4 w-4 text-green-600" />
-                  <span className="truncate flex-1">Create New Assistant</span>
-                  <Badge variant="default" className="text-xs bg-green-100 text-green-700">New</Badge>
-                </div>
-              </SelectItem>
-              {selectedAssistant && (
-                <SelectItem value="clear_current">
-                  <div className="flex items-center gap-2 w-full">
-                    <X className="h-4 w-4 text-gray-600" />
-                    <span className="truncate flex-1">Clear Current</span>
-                    <Badge variant="outline" className="text-xs">Clear</Badge>
-                  </div>
-                </SelectItem>
-              )}
-            </SelectGroup>
-            
-            {/* My Assistants Section */}
-            {savedAssistants.length > 0 && (
-              <SelectGroup>
-                <SelectLabel className="flex items-center gap-2 text-sm font-medium">
-                  <User className="h-4 w-4" />
-                  My Assistants ({savedAssistants.length})
-                </SelectLabel>
-                {savedAssistants.map((assistant) => (
-                  <SelectItem key={`user_${assistant.id}`} value={`user_${assistant.id}`}>
-                    <div className="flex items-center gap-2 w-full">
-                      <Bot className="h-4 w-4 text-blue-600" />
-                      <span className="truncate flex-1">{assistant.name}</span>
-                      <Badge variant="secondary" className="text-xs">Mine</Badge>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            )}
-            
-            {/* Templates Section */}
-            {presets.length > 0 && (
-              <SelectGroup>
-                <SelectLabel className="flex items-center gap-2 text-sm font-medium">
-                  <Bookmark className="h-4 w-4" />
-                  Templates ({presets.length})
-                </SelectLabel>
-                {presets.map((preset) => (
-                  <SelectItem key={preset.name} value={preset.name}>
-                    <div className="flex items-center gap-2 w-full">
-                      <Bot className="h-4 w-4 text-green-600" />
-                      <span className="truncate flex-1">{preset.name}</span>
-                      <Badge variant="outline" className="text-xs">Template</Badge>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            )}
-
-            {/* Empty State */}
-            {totalAssistants === 0 && (
-              <div className="p-2 text-sm text-muted-foreground text-center">
-                No assistants available
-              </div>
-            )}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Rename Assistant */}
-      {selectedAssistant && selectedAssistant.type !== 'template' && (
-        <Button 
-          onClick={openRenameDialog} 
-          size="sm" 
-          variant="ghost" 
-          className="w-full justify-start"
-          disabled={isLoading}
-        >
-          <Settings className="h-4 w-4 mr-2" />
-          Rename
-        </Button>
-      )}
-
-
-
-      {/* Save Current Configuration */}
-      <Button 
-        onClick={openSaveDialog} 
-        size="sm" 
-        variant="outline" 
-        className="w-full"
-        disabled={isLoading || !systemPrompt.trim()}
-      >
-        <Save className="h-4 w-4 mr-2" />
-        Save Assistant
-      </Button>
-    </div>
-  )
-}
-
-// System Instructions Tab Component
-function SystemInstructionsTab({
-  systemPrompt,
-  setSystemPrompt,
-  isLoading
-}: {
-  systemPrompt: string
-  setSystemPrompt: (prompt: string) => void
-  isLoading: boolean
-}) {
-  const promptExamples = [
-    {
-      title: "Helpful Assistant",
-      prompt: "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and well-structured responses. If you're unsure about something, say so."
-    },
-    {
-      title: "Code Expert", 
-      prompt: "You are an expert software developer. Provide clean, efficient code with clear explanations. Always follow best practices and include helpful comments."
-    },
-    {
-      title: "Creative Writer",
-      prompt: "You are a creative writer. Use vivid language, engaging storytelling, and imaginative descriptions. Be expressive and artistic in your responses."
-    },
-    {
-      title: "Teacher/Tutor",
-      prompt: "You are a patient and knowledgeable teacher. Break down complex concepts into simple, understandable parts. Use examples and analogies to help explain ideas."
-    }
-  ]
-
-  const bestPractices = [
-    "Be specific about the assistant's role and expertise",
-    "Include desired communication style and tone", 
-    "Specify output format if needed (lists, paragraphs, etc.)",
-    "Add ethical guidelines and behavior expectations"
-  ]
-
-  return (
-    <div className="space-y-4 pb-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">System Instructions</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <Label className="text-base font-medium text-blue-700">
-              System Prompt
-            </Label>
-            <textarea
-              value={systemPrompt}
-              onChange={(e) => setSystemPrompt(e.target.value)}
-              placeholder="Define your AI assistant's role, personality, and behavior..."
-              className="w-full h-[250px] text-base p-4 border-2 border-blue-200 rounded-lg bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none overflow-y-auto"
-              disabled={isLoading}
-            />
-            
-            {/* Character count */}
-            <div className="text-xs text-muted-foreground text-right">
-              {systemPrompt.length} characters
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Quick Examples */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm flex items-center">
-            <Brain className="h-4 w-4 mr-2" />
-            Quick Examples
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            <Label className="text-xs font-medium text-muted-foreground">
-              Choose a template to get started:
-            </Label>
-            <Select
-              value=""
-              onValueChange={(value) => {
-                const example = promptExamples[parseInt(value)]
-                if (example) {
-                  setSystemPrompt(example.prompt)
-                }
-              }}
-              disabled={isLoading}
-            >
-              <SelectTrigger className="w-full h-10">
-                <SelectValue placeholder="Select example prompt..." />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Example Prompts</SelectLabel>
-                  {promptExamples.map((example, index) => (
-                    <SelectItem key={index} value={index.toString()}>
-                      <div className="flex flex-col items-start">
-                        <span className="font-medium text-sm">{example.title}</span>
-                        <span className="text-xs text-muted-foreground line-clamp-1 mt-1">
-                          {example.prompt.substring(0, 60)}...
-                        </span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Best Practices */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm flex items-center">
-            <MessageSquare className="h-4 w-4 mr-2" />
-            Best Practices
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ul className="text-xs space-y-2 text-muted-foreground">
-            {bestPractices.map((practice, index) => (
-              <li key={index} className="flex items-start">
-                <span className="inline-block w-1.5 h-1.5 bg-blue-400 rounded-full mt-1.5 mr-2 flex-shrink-0" />
-                {practice}
-              </li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-// Documents Tab Component for RAG functionality
-function DocumentsTab({
-  isLoading,
-  ragEnabled,
-  setRagEnabled,
-  retrievalCount,
-  setRetrievalCount,
-  currentAssistant
-}: {
-  isLoading: boolean
-  ragEnabled: boolean
-  setRagEnabled: (enabled: boolean) => void
-  retrievalCount: number
-  setRetrievalCount: (count: number) => void
-  currentAssistant: {id: string, name: string, type: 'user'|'template'|'new', originalTemplate?: string} | null
-}) {
-  const [uploadedFiles, setUploadedFiles] = useState<any[]>([])
-  const [isUploading, setIsUploading] = useState(false)
-
-  // Load existing documents on component mount
-  useEffect(() => {
-    const loadDocuments = async () => {
-      try {
-        const response = await fetch('/rag/documents')
-        if (response.ok) {
-          const data = await response.json()
-          if (data.documents) {
-            const documentList = Object.entries(data.documents).map(([docId, docInfo]: [string, any]) => ({
-              id: docId,
-              name: docInfo.filename,
-              size: 0,
-              type: docInfo.file_type,
-              uploadedAt: new Date().toISOString(),
-              status: docInfo.status,
-              chunks: docInfo.chunks
-            }))
-            setUploadedFiles(documentList)
-          }
-        }
-      } catch (error) {
-        console.error('Error loading documents:', error)
-      }
-    }
-
-    loadDocuments()
-  }, [])
-
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files
-    if (!files) return
-
-    setIsUploading(true)
-    
-    try {
-      const formData = new FormData()
-      
-      for (const file of Array.from(files)) {
-        formData.append('files', file)
-      }
-
-      const response = await fetch('/rag/upload', {
-        method: 'POST',
-        body: formData,
-      })
-
-      if (response.ok) {
-        const result = await response.json()
-        
-        // Add successfully processed files to the list
-        const newFiles = result.results
-          .filter((r: any) => r.success)
-          .map((r: any) => ({
-            id: r.doc_id,
-            name: r.filename,
-            size: 0, // Server doesn't return size currently
-            type: 'processed',
-            uploadedAt: new Date().toISOString(),
-            status: 'processed',
-            chunks: r.chunks
-          }))
-        
-        setUploadedFiles(prev => [...prev, ...newFiles])
-        
-        // Show errors for failed uploads
-        const failedUploads = result.results.filter((r: any) => !r.success)
-        if (failedUploads.length > 0) {
-          console.error('Some files failed to upload:', failedUploads)
-        }
-      } else {
-        console.error('Upload failed:', response.statusText)
-      }
-      
-      // Reset input
-      event.target.value = ''
-    } catch (error) {
-      console.error('File upload error:', error)
-    } finally {
-      setIsUploading(false)
-    }
-  }
-
-  const removeFile = async (fileId: string) => {
-    try {
-      const response = await fetch(`/rag/documents/${fileId}`, {
-        method: 'DELETE',
-      })
-      
-      if (response.ok) {
-        setUploadedFiles(prev => prev.filter(f => f.id !== fileId))
-      } else {
-        console.error('Failed to delete document:', response.statusText)
-      }
-    } catch (error) {
-      console.error('Error deleting document:', error)
-      // Remove from UI anyway
-      setUploadedFiles(prev => prev.filter(f => f.id !== fileId))
-    }
-  }
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes'
-    const k = 1024
-    const sizes = ['Bytes', 'KB', 'MB', 'GB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-  }
-
-  return (
-    <div className="space-y-4 pb-6">
-      {/* Current Assistant Info */}
-      {currentAssistant && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-sm">Current Assistant</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center space-x-2">
-              <User className="h-4 w-4 text-blue-600" />
-              <span className="font-medium">{currentAssistant.name}</span>
-              <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${
-                currentAssistant.type === 'user' ? 'bg-blue-100 text-blue-700' :
-                currentAssistant.type === 'template' ? 'bg-gray-100 text-gray-700' :
-                'bg-green-100 text-green-700'
-              }`}>
-                {currentAssistant.type === 'user' ? 'My Assistant' :
-                 currentAssistant.type === 'template' ? 'Template' : 'New Assistant'}
-              </span>
-              {currentAssistant.originalTemplate && (
-                <span className="text-xs text-muted-foreground">
-                  (from {currentAssistant.originalTemplate})
-                </span>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* RAG Configuration */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            RAG Configuration
-            {currentAssistant && (
-              <span className="text-xs text-muted-foreground font-normal ml-2">
-                for "{currentAssistant.name}"
-              </span>
-            )}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="space-y-1">
-                <Label className="text-sm font-medium">Enable RAG</Label>
-                <p className="text-xs text-muted-foreground">
-                  Use uploaded documents to enhance responses
-                </p>
-              </div>
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  id="rag-enabled"
-                  checked={ragEnabled}
-                  onChange={(e) => setRagEnabled(e.target.checked)}
-                  className="rounded"
-                  disabled={isLoading || uploadedFiles.length === 0}
-                />
-                <Label htmlFor="rag-enabled" className="text-sm">
-                  {ragEnabled ? 'On' : 'Off'}
-                </Label>
-              </div>
-            </div>
-
-            {ragEnabled && (
-              <div className="space-y-3 border-t pt-4">
-                <div>
-                  <Label className="text-sm font-medium mb-2 block">
-                    Retrieval Count: {retrievalCount}
-                  </Label>
-                  <Slider
-                    value={[retrievalCount]}
-                    onValueChange={(value) => setRetrievalCount(value[0])}
-                    max={10}
-                    min={1}
-                    step={1}
-                    className="w-full"
-                  />
-                  <div className="flex justify-between text-xs text-muted-foreground mt-1">
-                    <span>1 (Focused)</span>
-                    <span>5 (Balanced)</span>
-                    <span>10 (Comprehensive)</span>
-                  </div>
-                  <p className="text-xs text-muted-foreground mt-2">
-                    Number of relevant document chunks to retrieve for context
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* File Upload */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base flex items-center">
-            <Upload className="h-4 w-4 mr-2" />
-            Upload Documents
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors">
-              <input
-                type="file"
-                id="file-upload"
-                multiple
-                accept=".pdf,.txt,.docx,.md"
-                onChange={handleFileUpload}
-                className="hidden"
-                disabled={isUploading || isLoading}
-              />
-              <Label
-                htmlFor="file-upload"
-                className="cursor-pointer flex flex-col items-center space-y-2"
-              >
-                <Upload className="h-8 w-8 text-gray-400" />
-                <span className="text-sm font-medium">
-                  {isUploading ? 'Uploading...' : 'Click to upload documents'}
-                </span>
-                <span className="text-xs text-muted-foreground">
-                  PDF, TXT, DOCX, MD files supported
-                </span>
-              </Label>
-            </div>
-
-            <div className="text-xs text-muted-foreground bg-blue-50 p-3 rounded">
-              <strong>💡 How it works:</strong>
-              <br />
-              • Upload your documents to create a knowledge base
-              • Enable RAG to use these documents as context
-              • The AI will search relevant information to answer questions
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Uploaded Files */}
-      {uploadedFiles.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center">
-              <FileText className="h-4 w-4 mr-2" />
-              Uploaded Documents ({uploadedFiles.length})
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {uploadedFiles.map((file) => (
-                <div
-                  key={file.id}
-                  className="flex items-center justify-between p-3 border rounded-lg bg-gray-50"
-                >
-                  <div className="flex items-center space-x-3">
-                    <File className="h-4 w-4 text-blue-600" />
-                    <div className="flex-1">
-                      <p className="text-sm font-medium truncate max-w-[200px]">
-                        {file.name}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {formatFileSize(file.size)} • {file.status}
-                      </p>
-                    </div>
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => removeFile(file.id)}
-                    disabled={isLoading}
-                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* RAG Status */}
-      {ragEnabled && uploadedFiles.length > 0 && (
-        <Card>
-          <CardContent className="pt-6">
-            <div className="flex items-center space-x-2 text-green-600">
-              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-              <span className="text-sm font-medium">
-                RAG Active - Using {uploadedFiles.length} document(s)
-                {currentAssistant && ` for "${currentAssistant.name}"`}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground mt-1">
-              {currentAssistant?.name || 'This assistant'} will use context from uploaded documents to enhance responses
-            </p>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  )
-}

static/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edge LLM</title>
-    <script type="module" crossorigin src="/assets/index-37eb6913.js"></script>
+    <script type="module" crossorigin src="/assets/index-76cf04a9.js"></script>
     <link rel="stylesheet" href="/assets/index-7ec1bc04.css">
   </head>
   <body>