fixed bugs

src/pages/ChatbotBuilderPage.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { chatbotsAPI, documentsAPI } from '@/services/api'
+import { chatbotsAPI, documentsAPI, modelsAPI } from '@/services/api'
 import { useAuthStore } from '@/store/authStore'
 import { Button, Input, Textarea, Select, Card, Badge, StatusDot, Spinner } from '@/components/ui'
-import { AVAILABLE_MODELS, CATEGORIES, INDUSTRIES, LANGUAGES, formatBytes, getFileIcon } from '@/lib/utils'
+import { CATEGORIES, INDUSTRIES, LANGUAGES, formatBytes, getFileIcon } from '@/lib/utils'
 import { ChatInterface } from '@/components/ChatInterface'
 import { useDropzone } from 'react-dropzone'
-import type { ChatbotFormData } from '@/types'
+import type { ChatbotFormData, AvailableModel } from '@/types'
 import {
   ArrowLeft, Save, Eye, Upload, Trash2, FileText,
-  Bot, Sliders, Globe, Code, AlertCircle, CheckCircle
+  Bot, Sliders, Globe, Code, AlertCircle, CheckCircle,
+  ChevronDown, ChevronRight, Settings2, ImagePlus, X
 } from 'lucide-react'
 
 const DEFAULT_FORM: ChatbotFormData = {
@@ -22,6 +23,7 @@ const DEFAULT_FORM: ChatbotFormData = {
   max_tokens: 1000,
   primary_color: '#6366f1',
   welcome_message: 'Hello! How can I help you today?',
+  logo_url: '',
   category: '',
   industry: '',
   languages: ['en'],
@@ -58,6 +60,7 @@ export const ChatbotBuilderPage: React.FC = () => {
         max_tokens: existingChatbot.max_tokens,
         primary_color: existingChatbot.primary_color,
         welcome_message: existingChatbot.welcome_message,
+        logo_url: existingChatbot.logo_url || '',
         category: existingChatbot.category || '',
         industry: existingChatbot.industry || '',
         languages: existingChatbot.languages,
@@ -101,10 +104,6 @@ export const ChatbotBuilderPage: React.FC = () => {
     setTimeout(() => setToast(null), 3000)
   }
 
-  const availableModels = AVAILABLE_MODELS.filter(m =>
-      m.plans.includes(user?.plan || 'free') || m.plans.includes('starter')
-  )
-
   if (loadingChatbot) {
     return <div className="flex items-center justify-center h-full"><Spinner className="text-primary-600" /></div>
   }
@@ -117,76 +116,82 @@ export const ChatbotBuilderPage: React.FC = () => {
             <ArrowLeft className="w-4 h-4 text-gray-600" />
           </Link>
           <h1 className="font-semibold text-gray-900 flex-1">
-            {isNew ? 'Create Chatbot' : form.name || 'Edit Chatbot'}
+            {isNew ? 'Create Chatbot' : `Edit: ${form.name || 'Untitled'}`}
           </h1>
-          {existingChatbot && (
-              <div className="flex items-center gap-1.5">
-                <StatusDot status={existingChatbot.is_published ? 'published' : 'preview'} />
-                <span className="text-xs text-gray-500">
-              {existingChatbot.is_published ? 'Published' : 'Preview only'}
-            </span>
-              </div>
-          )}
-          <Button
-              onClick={handleSave}
-              loading={createMutation.isPending || updateMutation.isPending}
-              size="sm"
-          >
-            <Save className="w-3.5 h-3.5" />
-            Save
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button
+                variant="primary"
+                size="sm"
+                onClick={handleSave}
+                loading={createMutation.isPending || updateMutation.isPending}
+            >
+              <Save className="w-3.5 h-3.5" />
+              Save
+            </Button>
+          </div>
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-1 px-6 py-2 bg-white border-b border-gray-100">
+        <div className="flex gap-1 px-6 py-2 bg-gray-50 border-b border-gray-200 overflow-x-auto">
           {([
-            { id: 'settings', label: 'Settings', icon: Sliders },
-            { id: 'documents', label: 'Documents', icon: FileText, disabled: !chatbotId },
-            { id: 'preview', label: 'Preview', icon: Eye, disabled: !chatbotId },
-          ] as const).map(({ id: tid, label, icon: Icon, disabled }) => (
+            { key: 'settings' as Tab, label: 'Settings', icon: Sliders },
+            { key: 'documents' as Tab, label: 'Documents', icon: FileText },
+            { key: 'preview' as Tab, label: 'Preview', icon: Eye },
+          ]).map(t => (
               <button
-                  key={tid}
-                  onClick={() => !disabled && setTab(tid as Tab)}
-                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                      tab === tid
-                          ? 'bg-primary-50 text-primary-700'
-                          : disabled
-                              ? 'text-gray-300 cursor-not-allowed'
-                              : 'text-gray-600 hover:bg-gray-100'
+                  key={t.key}
+                  onClick={() => setTab(t.key)}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${
+                      tab === t.key
+                          ? 'bg-white text-primary-700 shadow-sm'
+                          : 'text-gray-500 hover:text-gray-700 hover:bg-white/50'
                   }`}
               >
-                <Icon className="w-3.5 h-3.5" />
-                {label}
+                <t.icon className="w-4 h-4" />
+                {t.label}
               </button>
           ))}
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto p-6">
           {tab === 'settings' && (
-              <SettingsTab form={form} setForm={setForm} availableModels={availableModels} userPlan={user?.plan || 'free'} />
+              <SettingsTab
+                  form={form}
+                  setForm={setForm}
+                  userPlan={user?.plan || 'free'}
+              />
           )}
-          {tab === 'documents' && chatbotId && (
-              <DocumentsTab chatbotId={chatbotId} />
+          {tab === 'documents' && chatbotId && <DocumentsTab chatbotId={chatbotId} />}
+          {tab === 'documents' && !chatbotId && (
+              <Card className="p-8 text-center">
+                <AlertCircle className="w-8 h-8 text-amber-500 mx-auto mb-3" />
+                <p className="text-gray-600 text-sm">Save your chatbot first to upload documents.</p>
+              </Card>
           )}
-          {tab === 'preview' && chatbotId && existingChatbot && (
-              <div className="p-6 max-w-2xl mx-auto">
-                <div className="h-[600px]">
-                  <ChatInterface
-                      chatbotId={chatbotId}
-                      chatbotName={existingChatbot.name}
-                      welcomeMessage={existingChatbot.welcome_message}
-                      primaryColor={existingChatbot.primary_color}
-                      isPreview
-                  />
-                </div>
+          {tab === 'preview' && chatbotId && (
+              <div className="h-[calc(100vh-280px)] min-h-[400px] max-h-[700px]">
+                <ChatInterface
+                    chatbotId={chatbotId}
+                    chatbotName={form.name || 'Preview'}
+                    welcomeMessage={form.welcome_message}
+                    primaryColor={form.primary_color}
+                    logoUrl={form.logo_url}
+                    isPreview
+                />
               </div>
           )}
+          {tab === 'preview' && !chatbotId && (
+              <Card className="p-8 text-center">
+                <Eye className="w-8 h-8 text-gray-400 mx-auto mb-3" />
+                <p className="text-gray-600 text-sm">Save your chatbot first to preview it.</p>
+              </Card>
+          )}
         </div>
 
         {/* Toast */}
         {toast && (
-            <div className={`fixed bottom-4 right-4 px-4 py-2 rounded-lg text-sm shadow-lg z-50 text-white flex items-center gap-2 ${
+            <div className={`fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white ${
                 toast.type === 'success' ? 'bg-green-600' : 'bg-red-600'
             }`}>
               {toast.type === 'success' ? <CheckCircle className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
@@ -198,102 +203,251 @@ export const ChatbotBuilderPage: React.FC = () => {
 }
 
 
-const SettingsTab: React.FC<{
+// ═══════════════════════════════════════════════════════════════════════════════
+// SETTINGS TAB
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface SettingsTabProps {
   form: ChatbotFormData
   setForm: React.Dispatch<React.SetStateAction<ChatbotFormData>>
-  availableModels: typeof AVAILABLE_MODELS
   userPlan: string
-}> = ({ form, setForm, availableModels, userPlan }) => {
-  const set = (key: keyof ChatbotFormData) => (val: any) => setForm(f => ({ ...f, [key]: val }))
+}
+
+const SettingsTab: React.FC<SettingsTabProps> = ({ form, setForm, userPlan }) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+
+  const set = (field: keyof ChatbotFormData) => (value: any) => {
+    setForm(prev => ({ ...prev, [field]: value }))
+  }
+
+  // ── IMPROVEMENT #3: Load models dynamically from backend ──────────────────
+  const { data: modelsData, isLoading: modelsLoading } = useQuery({
+    queryKey: ['available-models'],
+    queryFn: modelsAPI.available,
+    staleTime: 5 * 60 * 1000, // cache for 5 minutes
+  })
+
+  const availableModels = modelsData?.models || []
+  const hasPremiumAccess = modelsData?.has_premium_access || false
+  const upgradeLabel = modelsData?.upgrade_label || null
 
   return (
-      <div className="p-6 max-w-2xl mx-auto space-y-6">
+      <div className="max-w-2xl mx-auto space-y-6">
         {/* Basic Info */}
         <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900 text-sm uppercase tracking-wide text-gray-500">Basic Info</h2>
-          <Input label="Chatbot Name *" value={form.name} onChange={e => set('name')(e.target.value)} placeholder="My Support Bot" />
-          <Textarea label="Description" value={form.description} onChange={e => set('description')(e.target.value)} placeholder="What does this chatbot help with?" rows={2} />
+          <h2 className="font-semibold text-sm uppercase tracking-wide text-gray-500">Basic Info</h2>
+          <Input
+              label="Chatbot Name"
+              value={form.name}
+              onChange={e => set('name')(e.target.value)}
+              placeholder="e.g. Customer Support Bot"
+          />
+          <Textarea
+              label="Description"
+              value={form.description}
+              onChange={e => set('description')(e.target.value)}
+              placeholder="What does this chatbot do?"
+              rows={2}
+          />
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1.5">Welcome Message</label>
-            <Textarea value={form.welcome_message} onChange={e => set('welcome_message')(e.target.value)} rows={2} />
+            <Textarea
+                value={form.welcome_message}
+                onChange={e => set('welcome_message')(e.target.value)}
+                rows={2}
+            />
           </div>
-          <Textarea label="System Prompt (optional)" value={form.system_prompt} onChange={e => set('system_prompt')(e.target.value)} placeholder="You are a helpful assistant for..." rows={3} hint="Custom instructions for the AI's behavior and personality" />
+          <Textarea
+              label="System Prompt (optional)"
+              value={form.system_prompt}
+              onChange={e => set('system_prompt')(e.target.value)}
+              placeholder="You are a helpful assistant for..."
+              rows={3}
+              hint="Custom instructions for the AI's behavior and personality"
+          />
         </Card>
 
-        {/* Appearance */}
+        {/* ── IMPROVEMENT #2: Appearance with logo upload ──────────────────────── */}
         <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900 text-sm uppercase tracking-wide text-gray-500">Appearance</h2>
+          <h2 className="font-semibold text-sm uppercase tracking-wide text-gray-500">Appearance</h2>
+
+          {/* Logo upload */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">Chatbot Logo</label>
+            <p className="text-xs text-gray-400 mb-2">Upload your company logo. It will appear in the chat header.</p>
+            <LogoUploader logoUrl={form.logo_url} onLogoChange={set('logo_url')} />
+          </div>
+
+          {/* Brand Color */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1.5">Brand Color</label>
-            <div className="flex items-center gap-3">
-              <input type="color" value={form.primary_color} onChange={e => set('primary_color')(e.target.value)}
-                     className="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer" />
-              <Input value={form.primary_color} onChange={e => set('primary_color')(e.target.value)} className="w-32" />
+            <div className="flex items-center gap-3 flex-wrap">
+              <input
+                  type="color"
+                  value={form.primary_color}
+                  onChange={e => set('primary_color')(e.target.value)}
+                  className="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer"
+              />
+              <Input
+                  value={form.primary_color}
+                  onChange={e => set('primary_color')(e.target.value)}
+                  className="w-32"
+              />
               <div className="flex gap-2">
                 {['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'].map(c => (
-                    <button key={c} onClick={() => set('primary_color')(c)}
-                            className="w-6 h-6 rounded-full border-2 border-white shadow-sm"
-                            style={{ background: c }} />
+                    <button
+                        key={c}
+                        onClick={() => set('primary_color')(c)}
+                        className="w-6 h-6 rounded-full border-2 border-white shadow-sm hover:scale-110 transition-transform"
+                        style={{ background: c }}
+                    />
                 ))}
               </div>
             </div>
           </div>
         </Card>
 
-        {/* AI Model */}
-        <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900 text-sm uppercase tracking-wide text-gray-500">AI Model</h2>
-          <div className="space-y-2">
-            {availableModels.map(m => (
-                <label key={m.id} className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-colors ${
-                    form.model === m.id ? 'border-primary-400 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
-                }`}>
-                  <input type="radio" name="model" value={m.id} checked={form.model === m.id} onChange={() => set('model')(m.id)} className="sr-only" />
-                  <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600">
-                    {m.provider[0]}
-                  </div>
-                  <div className="flex-1">
-                    <p className="text-sm font-medium text-gray-900">{m.name}</p>
-                    <p className="text-xs text-gray-500">{m.provider}</p>
-                  </div>
-                  <Badge variant={m.badge === 'Powerful' ? 'purple' : 'default'}>{m.badge}</Badge>
-                </label>
-            ))}
-            {userPlan === 'free' || userPlan === 'starter' ? (
-                <div className="p-3 bg-gray-50 rounded-xl border border-dashed border-gray-300 text-center">
-                  <p className="text-xs text-gray-500">🔒 <Link to="/pricing" className="text-primary-600 font-medium">Upgrade to Pro</Link> for GPT-4o, Claude, Gemini</p>
-                </div>
-            ) : null}
-          </div>
+        {/* ── IMPROVEMENT #1: Advanced Settings (collapsible) ──────────────────── */}
+        <Card className="overflow-hidden">
+          <button
+              type="button"
+              onClick={() => setAdvancedOpen(!advancedOpen)}
+              className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+          >
+            <div className="flex items-center gap-2">
+              <Settings2 className="w-4 h-4 text-gray-500" />
+              <h2 className="font-semibold text-sm uppercase tracking-wide text-gray-500">
+                Advanced Settings
+              </h2>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-gray-400">AI Model, Temperature, Max Tokens</span>
+              {advancedOpen
+                  ? <ChevronDown className="w-4 h-4 text-gray-400" />
+                  : <ChevronRight className="w-4 h-4 text-gray-400" />
+              }
+            </div>
+          </button>
 
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1.5">Temperature</label>
-              <input type="range" min="0" max="1" step="0.1" value={form.temperature}
-                     onChange={e => set('temperature')(parseFloat(e.target.value))}
-                     className="w-full accent-primary-600" />
-              <div className="flex justify-between text-xs text-gray-400 mt-1">
-                <span>Precise ({form.temperature})</span>
-                <span>Creative</span>
+          {advancedOpen && (
+              <div className="px-6 pb-6 space-y-4 border-t border-gray-100 pt-4">
+                {/* AI Model Selection - loaded from backend */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">AI Model</label>
+
+                  {modelsLoading ? (
+                      <div className="flex items-center gap-2 p-4 bg-gray-50 rounded-xl">
+                        <Spinner className="w-4 h-4 text-primary-600" />
+                        <span className="text-sm text-gray-500">Loading available models...</span>
+                      </div>
+                  ) : (
+                      <div className="space-y-2">
+                        {availableModels.map((m: AvailableModel) => (
+                            <label
+                                key={m.id}
+                                className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-colors ${
+                                    form.model === m.id
+                                        ? 'border-primary-400 bg-primary-50'
+                                        : 'border-gray-200 hover:border-gray-300'
+                                }`}
+                            >
+                              <input
+                                  type="radio"
+                                  name="model"
+                                  value={m.id}
+                                  checked={form.model === m.id}
+                                  onChange={() => set('model')(m.id)}
+                                  className="sr-only"
+                              />
+                              <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600">
+                                {m.provider[0]}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-gray-900">
+                                  {m.name}
+                                  {m.is_default && (
+                                      <span className="ml-1.5 text-xs text-primary-600 font-normal">(default)</span>
+                                  )}
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  {m.provider}
+                                  {m.description && ` · ${m.description}`}
+                                </p>
+                              </div>
+                              <Badge variant={
+                                m.badge === 'Powerful' ? 'purple'
+                                    : m.badge === 'Free' ? 'default'
+                                        : 'default'
+                              }>
+                                {m.badge}
+                              </Badge>
+                            </label>
+                        ))}
+
+                        {availableModels.length === 0 && !modelsLoading && (
+                            <div className="p-4 bg-amber-50 rounded-xl border border-amber-200 text-center">
+                              <p className="text-sm text-amber-700">
+                                No models available on your current plan.{' '}
+                                <Link to="/pricing" className="text-primary-600 font-medium underline">
+                                  Upgrade
+                                </Link>{' '}
+                                to access AI models.
+                              </p>
+                            </div>
+                        )}
+
+                        {upgradeLabel && (
+                            <div className="p-3 bg-gray-50 rounded-xl border border-dashed border-gray-300 text-center">
+                              <p className="text-xs text-gray-500">
+                                🔒{' '}
+                                <Link to="/pricing" className="text-primary-600 font-medium">
+                                  {upgradeLabel}
+                                </Link>
+                              </p>
+                            </div>
+                        )}
+                      </div>
+                  )}
+                </div>
+
+                {/* Temperature & Max Tokens */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1.5">Temperature</label>
+                    <input
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.1"
+                        value={form.temperature}
+                        onChange={e => set('temperature')(parseFloat(e.target.value))}
+                        className="w-full accent-primary-600"
+                    />
+                    <div className="flex justify-between text-xs text-gray-400 mt-1">
+                      <span>Precise ({form.temperature})</span>
+                      <span>Creative</span>
+                    </div>
+                  </div>
+                  <div>
+                    <Input
+                        label="Max Tokens"
+                        type="number"
+                        value={form.max_tokens}
+                        onChange={e => set('max_tokens')(parseInt(e.target.value))}
+                        min={100}
+                        max={8000}
+                        hint="Max response length"
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
-            <div>
-              <Input
-                  label="Max Tokens"
-                  type="number"
-                  value={form.max_tokens}
-                  onChange={e => set('max_tokens')(parseInt(e.target.value))}
-                  min={100} max={8000}
-                  hint="Max response length"
-              />
-            </div>
-          </div>
+          )}
         </Card>
 
         {/* Classification */}
         <Card className="p-6 space-y-4">
-          <h2 className="font-semibold text-gray-900 text-sm uppercase tracking-wide text-gray-500">Classification</h2>
-          <div className="grid grid-cols-2 gap-4">
+          <h2 className="font-semibold text-sm uppercase tracking-wide text-gray-500">Classification</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <Select
                 label="Category"
                 value={form.category}
@@ -313,6 +467,141 @@ const SettingsTab: React.FC<{
 }
 
 
+// ═══════════════════════════════════════════════════════════════════════════════
+// LOGO UPLOADER COMPONENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface LogoUploaderProps {
+  logoUrl: string
+  onLogoChange: (url: string) => void
+}
+
+const LogoUploader: React.FC<LogoUploaderProps> = ({ logoUrl, onLogoChange }) => {
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleFile = useCallback(async (file: File) => {
+    setError('')
+
+    // Validate file type
+    const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml', 'image/webp']
+    if (!allowedTypes.includes(file.type)) {
+      setError('Please upload a PNG, JPG, GIF, SVG, or WebP image.')
+      return
+    }
+
+    // Validate file size (max 2MB)
+    if (file.size > 2 * 1024 * 1024) {
+      setError('Image must be under 2MB.')
+      return
+    }
+
+    setUploading(true)
+    try {
+      // Convert to base64 data URL for now.
+      // In production, you'd upload to Supabase Storage and get a public URL back.
+      // e.g.: const { data } = await supabase.storage.from('logos').upload(path, file)
+      //        onLogoChange(supabase.storage.from('logos').getPublicUrl(data.path).data.publicUrl)
+      const reader = new FileReader()
+      reader.onloadend = () => {
+        onLogoChange(reader.result as string)
+        setUploading(false)
+      }
+      reader.onerror = () => {
+        setError('Failed to read file.')
+        setUploading(false)
+      }
+      reader.readAsDataURL(file)
+    } catch {
+      setError('Upload failed. Please try again.')
+      setUploading(false)
+    }
+  }, [onLogoChange])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (files) => files[0] && handleFile(files[0]),
+    accept: {
+      'image/png': ['.png'],
+      'image/jpeg': ['.jpg', '.jpeg'],
+      'image/gif': ['.gif'],
+      'image/svg+xml': ['.svg'],
+      'image/webp': ['.webp'],
+    },
+    maxFiles: 1,
+    multiple: false,
+  })
+
+  if (logoUrl) {
+    return (
+        <div className="flex items-center gap-4">
+          <div className="relative group">
+            <img
+                src={logoUrl}
+                alt="Chatbot logo"
+                className="w-16 h-16 rounded-xl object-cover border border-gray-200 shadow-sm"
+            />
+            <button
+                type="button"
+                onClick={() => onLogoChange('')}
+                className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-sm hover:bg-red-600"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+          <div className="flex-1">
+            <p className="text-sm text-gray-700 font-medium">Logo uploaded</p>
+            <button
+                type="button"
+                onClick={() => onLogoChange('')}
+                className="text-xs text-red-500 hover:text-red-600 mt-0.5"
+            >
+              Remove logo
+            </button>
+          </div>
+        </div>
+    )
+  }
+
+  return (
+      <div>
+        <div
+            {...getRootProps()}
+            className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-colors ${
+                isDragActive
+                    ? 'border-primary-400 bg-primary-50'
+                    : 'border-gray-300 hover:border-gray-400 bg-gray-50'
+            }`}
+        >
+          <input {...getInputProps()} />
+          {uploading ? (
+              <div className="flex items-center justify-center gap-2">
+                <Spinner className="w-4 h-4 text-primary-600" />
+                <span className="text-sm text-gray-500">Processing...</span>
+              </div>
+          ) : (
+              <>
+                <ImagePlus className="w-8 h-8 text-gray-400 mx-auto mb-2" />
+                <p className="text-sm text-gray-600">
+                  {isDragActive ? 'Drop your logo here' : 'Click or drag to upload a logo'}
+                </p>
+                <p className="text-xs text-gray-400 mt-1">PNG, JPG, SVG, or WebP · Max 2MB</p>
+              </>
+          )}
+        </div>
+        {error && (
+            <p className="text-xs text-red-500 mt-1.5 flex items-center gap-1">
+              <AlertCircle className="w-3 h-3" /> {error}
+            </p>
+        )}
+      </div>
+  )
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// DOCUMENTS TAB (unchanged from original)
+// ═══════════════════════════════════════════════════════════════════════════════
+
 const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
   const queryClient = useQueryClient()
   const [uploading, setUploading] = useState(false)
@@ -322,9 +611,10 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
   const { data: documents = [], isLoading } = useQuery({
     queryKey: ['documents', chatbotId],
     queryFn: () => documentsAPI.list(chatbotId),
-    refetchInterval: (data) => {
+    refetchInterval: (query) => {
+      const data = query.state.data
       if (data && Array.isArray(data)) {
-        const hasProcessing = data.some(d => d.status === 'processing' || d.status === 'pending')
+        const hasProcessing = data.some((d: any) => d.status === 'processing' || d.status === 'pending')
         return hasProcessing ? 3000 : false
       }
       return false
@@ -333,112 +623,117 @@ const DocumentsTab: React.FC<{ chatbotId: string }> = ({ chatbotId }) => {
 
   const deleteMutation = useMutation({
     mutationFn: (docId: string) => documentsAPI.delete(chatbotId, docId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] })
-      queryClient.invalidateQueries({ queryKey: ['chatbots'] })
-    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] }),
   })
 
+  const handleUpload = async (files: File[]) => {
+    if (!files.length) return
+    setUploading(true)
+    setUploadProgress(0)
+
+    try {
+      for (const file of files) {
+        await documentsAPI.upload(chatbotId, file, (pct) => setUploadProgress(pct))
+      }
+      queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] })
+      setToast('Documents uploaded successfully!')
+      setTimeout(() => setToast(''), 3000)
+    } catch (err: any) {
+      setToast(err.response?.data?.detail || 'Upload failed')
+      setTimeout(() => setToast(''), 3000)
+    } finally {
+      setUploading(false)
+      setUploadProgress(0)
+    }
+  }
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: handleUpload,
     accept: {
       'application/pdf': ['.pdf'],
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
       'text/csv': ['.csv'],
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
       'text/plain': ['.txt'],
-    },
-    multiple: true,
-    onDrop: async (files) => {
-      for (const file of files) {
-        setUploading(true)
-        setUploadProgress(0)
-        try {
-          await documentsAPI.upload(chatbotId, file, setUploadProgress)
-          queryClient.invalidateQueries({ queryKey: ['documents', chatbotId] })
-          setToast(`${file.name} uploaded successfully`)
-        } catch (err: any) {
-          setToast(err.response?.data?.detail || `Failed to upload ${file.name}`)
-        } finally {
-          setUploading(false)
-        }
-      }
+      'text/markdown': ['.md'],
     },
   })
 
   return (
-      <div className="p-6 max-w-2xl mx-auto space-y-4">
+      <div className="max-w-2xl mx-auto space-y-6">
         {/* Dropzone */}
-        <div
-            {...getRootProps()}
-            className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
-                isDragActive ? 'border-primary-400 bg-primary-50' : 'border-gray-300 hover:border-gray-400'
-            }`}
-        >
-          <input {...getInputProps()} />
-          {uploading ? (
-              <div className="space-y-3">
-                <Spinner className="mx-auto text-primary-600" />
-                <p className="text-sm text-gray-600">Uploading & processing... {uploadProgress}%</p>
+        <Card className="p-6">
+          <div
+              {...getRootProps()}
+              className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
+                  isDragActive ? 'border-primary-400 bg-primary-50' : 'border-gray-300 hover:border-gray-400'
+              }`}
+          >
+            <input {...getInputProps()} />
+            <Upload className="w-10 h-10 text-gray-400 mx-auto mb-3" />
+            <p className="text-sm text-gray-600 font-medium">
+              {isDragActive ? 'Drop files here' : 'Click or drag files to upload'}
+            </p>
+            <p className="text-xs text-gray-400 mt-1">PDF, DOCX, CSV, XLSX, TXT, MD</p>
+          </div>
+
+          {uploading && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
+                  <span>Uploading...</span>
+                  <span>{uploadProgress}%</span>
+                </div>
                 <div className="w-full bg-gray-200 rounded-full h-1.5">
-                  <div className="bg-primary-600 h-1.5 rounded-full transition-all" style={{ width: `${uploadProgress}%` }} />
+                  <div
+                      className="bg-primary-600 h-1.5 rounded-full transition-all"
+                      style={{ width: `${uploadProgress}%` }}
+                  />
                 </div>
               </div>
-          ) : (
-              <>
-                <Upload className="w-8 h-8 text-gray-400 mx-auto mb-3" />
-                <p className="text-sm font-medium text-gray-700">
-                  {isDragActive ? 'Drop files here' : 'Drag & drop files or click to browse'}
-                </p>
-                <p className="text-xs text-gray-500 mt-1">Supports PDF, DOCX, CSV, XLSX, TXT • Max 50MB</p>
-              </>
           )}
-        </div>
+        </Card>
 
-        {/* Documents list */}
+        {/* Document list */}
         {isLoading ? (
-            <div className="flex justify-center py-8"><Spinner /></div>
+            <div className="flex justify-center py-8">
+              <Spinner className="text-primary-600" />
+            </div>
         ) : documents.length === 0 ? (
             <Card className="p-8 text-center">
               <FileText className="w-8 h-8 text-gray-300 mx-auto mb-3" />
-              <p className="text-sm font-medium text-gray-500">No documents yet</p>
-              <p className="text-xs text-gray-400 mt-1">Upload files to give your chatbot knowledge</p>
+              <p className="text-gray-500 text-sm">No documents yet. Upload files to build your chatbot's knowledge base.</p>
             </Card>
         ) : (
-            <div className="space-y-2">
-              {documents.map((doc) => (
-                  <Card key={doc.id} className="p-4">
-                    <div className="flex items-center gap-3">
-                      <span className="text-xl">{getFileIcon(doc.file_type)}</span>
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium text-gray-900 truncate">{doc.file_name}</p>
-                        <div className="flex items-center gap-2 mt-0.5">
-                    <span className={`w-1.5 h-1.5 rounded-full ${
-                        doc.status === 'completed' ? 'bg-green-500' :
-                            doc.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500 animate-pulse'
-                    }`} />
-                          <p className="text-xs text-gray-400 capitalize">
-                            {doc.status === 'completed' ? `${doc.chunk_count} chunks indexed` :
-                                doc.status === 'failed' ? doc.error_message || 'Processing failed' :
-                                    'Processing...'}
-                          </p>
-                        </div>
-                      </div>
-                      <button
-                          onClick={() => deleteMutation.mutate(doc.id)}
-                          className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </button>
+            <Card className="divide-y divide-gray-100">
+              {documents.map((doc: any) => (
+                  <div key={doc.id} className="flex items-center gap-3 p-4">
+                    <span className="text-xl">{getFileIcon(doc.file_type)}</span>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-gray-900 truncate">{doc.file_name}</p>
+                      <p className="text-xs text-gray-400">
+                        {formatBytes(doc.file_size)}
+                        {doc.chunk_count > 0 && ` · ${doc.chunk_count} chunks`}
+                      </p>
                     </div>
-                  </Card>
+                    <StatusDot
+                        status={doc.status === 'completed' ? 'success' : doc.status === 'failed' ? 'error' : 'warning'}
+                        label={doc.status}
+                    />
+                    <button
+                        onClick={() => deleteMutation.mutate(doc.id)}
+                        className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
               ))}
-            </div>
+            </Card>
         )}
 
+        {/* Toast */}
         {toast && (
-            <div className="fixed bottom-4 right-4 bg-gray-900 text-white px-4 py-2 rounded-lg text-sm shadow-lg z-50">
+            <div className="fixed bottom-6 right-6 z-50 bg-gray-900 text-white px-4 py-2.5 rounded-xl shadow-lg text-sm">
               {toast}
-              <button onClick={() => setToast('')} className="ml-3 opacity-60 hover:opacity-100">×</button>
             </div>
         )}
       </div>