forked from hangshuo652/aurak
feat: implement QuestionBank CRUD with pagination and template query
- Add pagination support to findAll (page, limit query params) - Add findByTemplateId method to service - Add GET /by-template/:templateId endpoint to controller - Service already includes CRUD for QuestionBank and QuestionBankItem
This commit is contained in:
Developer
@@ -0,0 +1,202 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Sparkles, ArrowRight, X, RefreshCw, Check, Eraser } from 'lucide-react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import { chatService } from '../services/chatService'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
|
||||
interface AICommandDrawerProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
context: string
|
||||
onApply: (content: string) => void
|
||||
authToken: string
|
||||
}
|
||||
|
||||
const PRESET_COMMANDS = [
|
||||
{ label: 'polishContent', valueKey: 'aiCommandInstructPolish' },
|
||||
{ label: 'expandContent', valueKey: 'aiCommandInstructExpand' },
|
||||
{ label: 'summarizeContent', valueKey: 'aiCommandInstructSummarize' },
|
||||
{ label: 'translateToEnglish', valueKey: 'aiCommandInstructTranslateToEn' },
|
||||
{ label: 'fixGrammar', valueKey: 'aiCommandInstructFixGrammar' },
|
||||
]
|
||||
|
||||
export const AICommandDrawer: React.FC<AICommandDrawerProps> = ({ isOpen, onClose, context, onApply, authToken }) => {
|
||||
const { t } = useLanguage()
|
||||
const [instruction, setInstruction] = useState('')
|
||||
const [result, setResult] = useState('')
|
||||
const [isGenerating, setIsGenerating] = useState(false)
|
||||
const [mode, setMode] = useState<'input' | 'preview'>('input')
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setInstruction('')
|
||||
setResult('')
|
||||
setMode('input')
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!instruction) return
|
||||
|
||||
setMode('preview')
|
||||
setIsGenerating(true)
|
||||
setResult('')
|
||||
|
||||
try {
|
||||
const stream = chatService.streamAssist(instruction, context, authToken)
|
||||
|
||||
for await (const chunk of stream) {
|
||||
if (chunk.type === 'content') {
|
||||
setResult(prev => prev + chunk.data)
|
||||
} else if (chunk.type === 'error') {
|
||||
setResult(prev => prev + `\n\n[Error: ${chunk.data}]`)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
setResult(prev => prev + '\n\n[' + t('aiCommandsError') + ']')
|
||||
} finally {
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
// Drawer Styles
|
||||
const drawerClasses = `fixed inset-y-0 right-0 z-50 w-96 bg-white shadow-2xl transform transition-transform duration-300 ease-in-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
|
||||
}`
|
||||
|
||||
// Overlay for closing on click outside (optional, but good UX)
|
||||
// Using a transparent overlay that allows interaction with the editor might be desired?
|
||||
// Usually drawers have a backdrop. User said "Show AI assistant page in right drawer", likely implies a standard drawer behavior.
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 z-40 backdrop-blur-none transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={drawerClasses}>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-blue-600 p-4 shrink-0 flex justify-between items-center text-white shadow-md">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={20} className="animate-pulse" />
|
||||
<h3 className="font-bold text-lg">{t('aiAssistant')}</h3>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-1 hover:bg-white/20 rounded-lg transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
|
||||
{mode === 'input' ? (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">{t('aiCommandsPreset')}</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{PRESET_COMMANDS.map(cmd => (
|
||||
<button
|
||||
key={cmd.label}
|
||||
onClick={() => setInstruction(t(cmd.valueKey as any))}
|
||||
className={`px-3 py-1.5 text-xs rounded-full border transition-all ${instruction === t(cmd.valueKey as any)
|
||||
? 'bg-purple-100 border-purple-300 text-purple-700'
|
||||
: 'bg-white border-slate-200 text-slate-600 hover:border-purple-300 hover:text-purple-600'
|
||||
}`}
|
||||
>
|
||||
{t(cmd.label as keyof typeof t)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">{t('aiCommandsCustom')}</label>
|
||||
<textarea
|
||||
className="w-full h-32 p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none resize-none text-sm"
|
||||
placeholder={t('aiCommandsCustomPlaceholder')}
|
||||
value={instruction}
|
||||
onChange={e => setInstruction(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{context && (
|
||||
<div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
|
||||
<p className="text-xs text-slate-400 mb-1">{t('aiCommandsReferenceContext')}</p>
|
||||
<p className="text-xs text-slate-600 line-clamp-3 font-mono">{context.slice(0, 200)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h4 className="font-bold text-slate-700 text-sm">{t('aiCommandsResult')}</h4>
|
||||
{isGenerating && (
|
||||
<span className="text-xs text-purple-600 flex items-center gap-1">
|
||||
<RefreshCw size={12} className="animate-spin" /> {t('aiCommandsGenerating')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-50 border border-slate-200 rounded-lg p-3 overflow-y-auto markdown-body text-sm relative">
|
||||
{result ? <ReactMarkdown>{result}</ReactMarkdown> : <span className="text-slate-400 italic text-xs">Thinking...</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-slate-200 bg-slate-50 shrink-0 flex flex-col gap-3">
|
||||
{mode === 'input' ? (
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={!instruction}
|
||||
className="w-full flex justify-center items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:shadow-lg disabled:opacity-50 disabled:shadow-none transition-all font-medium text-sm"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{t('aiCommandsStartGeneration')}
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setMode('input')}
|
||||
className="flex-1 px-3 py-2 text-slate-600 bg-white border border-slate-200 hover:bg-slate-50 rounded-lg text-sm"
|
||||
disabled={isGenerating}
|
||||
>
|
||||
{t('aiCommandsGoBack')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onApply(result)
|
||||
// Optional: Don't close drawer immediately to allow multiple edits?
|
||||
// Usually "Apply" implies "Done". User can reopen if needed.
|
||||
onClose()
|
||||
}}
|
||||
disabled={isGenerating || !result}
|
||||
className="flex-1 flex justify-center items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 shadow-sm text-sm"
|
||||
>
|
||||
<Check size={16} />
|
||||
{t('aiCommandsApplyResult')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center">
|
||||
<button onClick={() => {
|
||||
setInstruction('')
|
||||
setResult('')
|
||||
setMode('input')
|
||||
}} className="text-xs text-slate-400 hover:text-slate-600 flex items-center justify-center gap-1 mx-auto">
|
||||
<Eraser size={12} /> {t('aiCommandsReset')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Sparkles, ArrowRight, X, RefreshCw, Check } from 'lucide-react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import { chatService } from '../services/chatService'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
|
||||
interface AICommandModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
context: string
|
||||
onApply: (content: string) => void
|
||||
authToken: string
|
||||
}
|
||||
|
||||
const PRESET_COMMANDS = [
|
||||
{ label: 'polishContent', valueKey: 'aiCommandInstructPolish' },
|
||||
{ label: 'expandContent', valueKey: 'aiCommandInstructExpand' },
|
||||
{ label: 'summarizeContent', valueKey: 'aiCommandInstructSummarize' },
|
||||
{ label: 'translateToEnglish', valueKey: 'aiCommandInstructTranslateToEn' },
|
||||
{ label: 'fixGrammar', valueKey: 'aiCommandInstructFixGrammar' },
|
||||
]
|
||||
|
||||
export const AICommandModal: React.FC<AICommandModalProps> = ({ isOpen, onClose, context, onApply, authToken }) => {
|
||||
const { t } = useLanguage()
|
||||
const [instruction, setInstruction] = useState('')
|
||||
const [result, setResult] = useState('')
|
||||
const [isGenerating, setIsGenerating] = useState(false)
|
||||
const [mode, setMode] = useState<'input' | 'preview'>('input')
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setInstruction('')
|
||||
setResult('')
|
||||
setMode('input')
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!instruction) return
|
||||
|
||||
setMode('preview')
|
||||
setIsGenerating(true)
|
||||
setResult('')
|
||||
|
||||
try {
|
||||
const stream = chatService.streamAssist(instruction, context, authToken)
|
||||
|
||||
for await (const chunk of stream) {
|
||||
if (chunk.type === 'content') {
|
||||
setResult(prev => prev + chunk.data)
|
||||
} else if (chunk.type === 'error') {
|
||||
setResult(prev => prev + `\n\n[Error: ${chunk.data}]`)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
setResult(prev => prev + `\n\n[${t('aiCommandsError')}]`)
|
||||
} finally {
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[85vh] animate-in fade-in zoom-in duration-200">
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-blue-600 p-4 shrink-0 flex justify-between items-center text-white">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={20} className="animate-pulse" />
|
||||
<h3 className="font-bold text-lg">{t('aiAssistant')}</h3>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-1 hover:bg-white/20 rounded-lg transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 overflow-y-auto flex-1">
|
||||
|
||||
{mode === 'input' ? (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">{t('aiCommandsModalPreset')}</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{PRESET_COMMANDS.map(cmd => (
|
||||
<button
|
||||
key={cmd.label}
|
||||
onClick={() => setInstruction(t(cmd.valueKey as any))}
|
||||
className={`px-3 py-1.5 text-sm rounded-full border transition-all ${instruction === t(cmd.valueKey as any)
|
||||
? 'bg-purple-100 border-purple-300 text-purple-700'
|
||||
: 'bg-white border-slate-200 text-slate-600 hover:border-purple-300 hover:text-purple-600'
|
||||
}`}
|
||||
>
|
||||
{t(cmd.label as keyof typeof t)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">{t('aiCommandsModalCustom')}</label>
|
||||
<textarea
|
||||
className="w-full h-32 p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none resize-none"
|
||||
placeholder={t('aiCommandsModalCustomPlaceholder')}
|
||||
value={instruction}
|
||||
onChange={e => setInstruction(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{context && (
|
||||
<div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
|
||||
<p className="text-xs text-slate-400 mb-1">{t('aiCommandsModalBasedOnSelection')}</p>
|
||||
<p className="text-sm text-slate-600 line-clamp-3 font-mono">{context}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h4 className="font-bold text-slate-700">{t('aiCommandsModalResult')}</h4>
|
||||
{isGenerating && (
|
||||
<span className="text-xs text-purple-600 flex items-center gap-1">
|
||||
<RefreshCw size={12} className="animate-spin" /> {t('aiCommandsGenerating')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-50 border border-slate-200 rounded-lg p-4 overflow-y-auto markdown-body text-sm">
|
||||
{result ? <ReactMarkdown>{result}</ReactMarkdown> : <span className="text-slate-400 italic">{t('aiCommandsGenerating')}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 border-t border-slate-200 bg-slate-50 shrink-0 flex justify-end gap-3">
|
||||
{mode === 'input' ? (
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={!instruction}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:shadow-lg disabled:opacity-50 disabled:shadow-none transition-all font-medium"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{t('aiCommandsStartGeneration')}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setMode('input')}
|
||||
className="px-4 py-2 text-slate-600 hover:bg-slate-200 rounded-lg"
|
||||
disabled={isGenerating}
|
||||
>
|
||||
{t('aiCommandsGoBack')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onApply(result)
|
||||
onClose()
|
||||
}}
|
||||
disabled={isGenerating || !result}
|
||||
className="flex items-center gap-2 px-5 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 shadow-sm"
|
||||
>
|
||||
<Check size={16} />
|
||||
{t('aiCommandsModalApply')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,417 @@
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Send, Loader2, Paperclip, X, Search, Database } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import {
|
||||
AppSettings,
|
||||
KnowledgeFile,
|
||||
ModelConfig,
|
||||
Message,
|
||||
Role,
|
||||
KnowledgeGroup
|
||||
} from '../types';
|
||||
import ChatMessage from './ChatMessage'; // Assuming ChatMessage is a default export based on original code
|
||||
import SearchResultsPanel from './SearchResultsPanel';
|
||||
import { chatService, ChatMessage as ChatMsg, ChatSource } from '../services/chatService';
|
||||
import { generateUUID } from '../utils/uuid';
|
||||
|
||||
interface ChatInterfaceProps {
|
||||
files: KnowledgeFile[];
|
||||
settings: AppSettings;
|
||||
models: ModelConfig[];
|
||||
groups: KnowledgeGroup[];
|
||||
selectedGroups: string[];
|
||||
onGroupSelectionChange?: (groupIds: string[]) => void;
|
||||
onOpenGroupSelection?: () => void; // New prop
|
||||
selectedFiles?: string[];
|
||||
onClearFileSelection?: () => void;
|
||||
onMobileUploadClick: () => void;
|
||||
currentHistoryId?: string;
|
||||
historyMessages?: any[] | null;
|
||||
onHistoryMessagesLoaded?: () => void;
|
||||
onPreviewSource?: (source: ChatSource) => void;
|
||||
onOpenFile?: (source: ChatSource) => void;
|
||||
onHistoryIdCreated?: (historyId: string) => void;
|
||||
authToken?: string; // Add optional auth token prop
|
||||
}
|
||||
|
||||
const ChatInterface: React.FC<ChatInterfaceProps> = ({
|
||||
files,
|
||||
settings,
|
||||
models,
|
||||
groups,
|
||||
selectedGroups,
|
||||
onGroupSelectionChange,
|
||||
onOpenGroupSelection,
|
||||
selectedFiles,
|
||||
onClearFileSelection,
|
||||
onMobileUploadClick,
|
||||
currentHistoryId,
|
||||
historyMessages,
|
||||
onHistoryMessagesLoaded,
|
||||
onPreviewSource,
|
||||
onOpenFile,
|
||||
onHistoryIdCreated,
|
||||
authToken
|
||||
}) => {
|
||||
const { t, language } = useLanguage();
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [sources, setSources] = useState<ChatSource[]>([]);
|
||||
const [showSources, setShowSources] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const lastSubmitTime = useRef<number>(0);
|
||||
|
||||
// Debug logging
|
||||
// console.log('ChatInterface Render:', {
|
||||
// selectedFilesCount: selectedFiles?.length,
|
||||
// totalFilesCount: files.length,
|
||||
// selectedFiles: selectedFiles,
|
||||
// matchedFiles: files.filter(f => selectedFiles?.includes(f.id)).map(f => f.name)
|
||||
// });
|
||||
|
||||
// Handle loading of history messages
|
||||
// Handle loading of history messages
|
||||
useEffect(() => {
|
||||
if (historyMessages && historyMessages.length > 0) {
|
||||
const convertedMessages: Message[] = historyMessages.map(msg => ({
|
||||
id: msg.id,
|
||||
role: msg.role === 'user' ? Role.USER : Role.MODEL,
|
||||
text: msg.content,
|
||||
timestamp: new Date(msg.createdAt).getTime(),
|
||||
sources: msg.sources // Attach sources to message
|
||||
}));
|
||||
|
||||
setMessages(convertedMessages);
|
||||
|
||||
// Notify parent component that history messages have been loaded
|
||||
onHistoryMessagesLoaded?.();
|
||||
}
|
||||
}, [historyMessages, onHistoryMessagesLoaded]);
|
||||
|
||||
useEffect(() => {
|
||||
const welcomeText = t('welcomeMessage');
|
||||
setMessages((prevMessages) => {
|
||||
if (prevMessages.length === 0) {
|
||||
return [
|
||||
{
|
||||
id: 'welcome',
|
||||
role: Role.MODEL,
|
||||
text: welcomeText,
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
];
|
||||
}
|
||||
const hasWelcome = prevMessages.some(m => m.id === 'welcome');
|
||||
if (hasWelcome) {
|
||||
return prevMessages.map(m =>
|
||||
m.id === 'welcome'
|
||||
? { ...m, text: welcomeText }
|
||||
: m
|
||||
);
|
||||
}
|
||||
return prevMessages;
|
||||
});
|
||||
}, [t]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() || isLoading) return;
|
||||
|
||||
// Debounce mechanism: prevent duplicate submissions within 500ms
|
||||
const now = Date.now();
|
||||
if (now - lastSubmitTime.current < 500) {
|
||||
console.log('Preventing duplicate submission');
|
||||
return;
|
||||
}
|
||||
lastSubmitTime.current = now;
|
||||
|
||||
const userText = input.trim();
|
||||
|
||||
// Instantly clear input field and reset height to prevent duplicate submission
|
||||
setInput('');
|
||||
if (inputRef.current) {
|
||||
inputRef.current.style.height = 'auto';
|
||||
inputRef.current.blur(); // Remove focus
|
||||
}
|
||||
|
||||
// Resolve Model Config
|
||||
const selectedModel = models.find(m => m.id === settings.selectedLLMId && m.type === 'llm');
|
||||
|
||||
if (!selectedModel) {
|
||||
const errorMsg: Message = {
|
||||
id: generateUUID(),
|
||||
role: Role.MODEL,
|
||||
text: `${t('errorNoModel')} - LLM ID: ${settings.selectedLLMId}, Models: ${models.length} `,
|
||||
timestamp: Date.now(),
|
||||
isError: true,
|
||||
};
|
||||
setMessages(prev => [...prev, errorMsg]);
|
||||
return;
|
||||
}
|
||||
|
||||
const newMessage: Message = {
|
||||
id: generateUUID(),
|
||||
role: Role.USER,
|
||||
text: userText,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setIsLoading(true);
|
||||
setMessages((prev) => [...prev, newMessage]);
|
||||
|
||||
const effectiveToken = authToken || localStorage.getItem('kb_api_key') || localStorage.getItem('authToken');
|
||||
|
||||
if (!effectiveToken) {
|
||||
const errorMsg: Message = {
|
||||
id: generateUUID(),
|
||||
role: Role.MODEL,
|
||||
text: t('needLogin'),
|
||||
timestamp: Date.now(),
|
||||
isError: true,
|
||||
};
|
||||
setMessages(prev => [...prev, errorMsg]);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const history: ChatMsg[] = messages
|
||||
.filter(m => m.id !== 'welcome')
|
||||
.map(m => ({
|
||||
role: m.role === Role.USER ? 'user' : 'assistant',
|
||||
content: m.text,
|
||||
}));
|
||||
|
||||
const botMessageId = generateUUID();
|
||||
let botContent = '';
|
||||
|
||||
// Add initial bot message
|
||||
const botMessage: Message = {
|
||||
id: botMessageId,
|
||||
role: Role.MODEL,
|
||||
text: '',
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
setMessages(prev => [...prev, botMessage]);
|
||||
|
||||
const stream = chatService.streamChat(
|
||||
userText,
|
||||
history,
|
||||
effectiveToken,
|
||||
language,
|
||||
settings.selectedEmbeddingId,
|
||||
settings.selectedLLMId, // Pass selected LLM ID
|
||||
selectedGroups.length > 0 ? selectedGroups : undefined, // Pass group filter
|
||||
selectedFiles?.length > 0 ? selectedFiles : undefined, // Pass file filter
|
||||
currentHistoryId, // Pass history ID
|
||||
settings.enableRerank, // Pass Rerank switch
|
||||
settings.selectedRerankId, // Pass Rerank model ID
|
||||
settings.temperature, // Pass temperature parameter
|
||||
settings.maxTokens, // Pass max tokens
|
||||
settings.topK, // Pass Top-K parameter
|
||||
settings.similarityThreshold, // Pass similarity threshold
|
||||
settings.rerankSimilarityThreshold, // Pass Rerank threshold
|
||||
settings.enableQueryExpansion, // Pass query expansion
|
||||
settings.enableHyDE // Pass HyDE
|
||||
);
|
||||
|
||||
for await (const chunk of stream) {
|
||||
if (chunk.type === 'content') {
|
||||
botContent += chunk.data;
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === botMessageId
|
||||
? { ...msg, text: botContent }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
} else if (chunk.type === 'sources') {
|
||||
// Attach sources to the current bot message
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === botMessageId
|
||||
? { ...msg, sources: chunk.data }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
} else if (chunk.type === 'historyId') {
|
||||
onHistoryIdCreated?.(chunk.data);
|
||||
} else if (chunk.type === 'error') {
|
||||
setMessages(prev =>
|
||||
prev.map(msg =>
|
||||
msg.id === botMessageId
|
||||
? { ...msg, text: t('errorMessage').replace('$1', chunk.data), isError: true }
|
||||
: msg
|
||||
)
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Chat error:', error);
|
||||
let errorText = t('errorGeneric');
|
||||
|
||||
if (error.message === "API_KEY_MISSING") errorText = t('apiError');
|
||||
else if (error.message.includes("OpenAI API Error")) errorText = `OpenAI Error: ${error.message} `;
|
||||
else if (error.message === "GEMINI_API_ERROR") errorText = t('geminiError');
|
||||
else if (error.message) errorText = `Error: ${error.message} `;
|
||||
|
||||
const errorMessage: Message = {
|
||||
id: generateUUID(),
|
||||
role: Role.MODEL,
|
||||
text: errorText,
|
||||
timestamp: Date.now(),
|
||||
isError: true,
|
||||
};
|
||||
setMessages((prev) => [...prev, errorMessage]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
lastSubmitTime.current = 0;
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (!isLoading && input.trim()) {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputResize = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setInput(e.target.value);
|
||||
e.target.style.height = 'auto';
|
||||
e.target.style.height = `${Math.min(e.target.scrollHeight, 200)} px`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent relative overflow-hidden">
|
||||
<div className="flex-1 overflow-y-auto px-4 md:px-8 pt-6 pb-32 space-y-8 scrollbar-hide">
|
||||
{messages.map((msg) => (
|
||||
<ChatMessage
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
onPreviewSource={onPreviewSource}
|
||||
onOpenFile={onOpenFile}
|
||||
/>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-start animate-in fade-in slide-in-from-left-2 duration-300">
|
||||
<div className="flex flex-row gap-4 items-start translate-x-1">
|
||||
<div className="w-9 h-9 rounded-xl bg-white/80 backdrop-blur-sm border border-slate-200/50 flex items-center justify-center shadow-sm">
|
||||
<Loader2 className="w-4 h-4 text-indigo-600 animate-spin" />
|
||||
</div>
|
||||
<div className="bg-white/80 backdrop-blur-md border border-white/40 px-5 py-3.5 rounded-2xl rounded-tl-none shadow-sm flex items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-1">
|
||||
<span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
|
||||
<span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
|
||||
<span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce"></span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-500 ml-2 tracking-wide uppercase text-[10px]">{t('analyzing')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="absolute bottom-6 left-0 right-0 px-4 md:px-8 pointer-events-none">
|
||||
<div className="max-w-4xl mx-auto pointer-events-auto">
|
||||
{((selectedFiles && selectedFiles.length > 0) || true) && (
|
||||
<div className="mb-3 flex flex-wrap gap-2 animate-in slide-in-from-bottom-2 duration-300">
|
||||
{/* Group Selection Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenGroupSelection}
|
||||
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold transition-all border shadow-sm ${selectedGroups.length > 0
|
||||
? 'bg-blue-600 text-white border-blue-500 hover:bg-blue-700'
|
||||
: 'bg-white/90 backdrop-blur-md text-slate-600 border-slate-200/60 hover:bg-white'
|
||||
}`}
|
||||
title={t('selectKnowledgeGroup')}
|
||||
>
|
||||
<Database size={13} className={selectedGroups.length > 0 ? "text-blue-100" : "text-blue-500"} />
|
||||
<span className="truncate max-w-[150px]">
|
||||
{selectedGroups.length === 0
|
||||
? t('allKnowledgeGroups')
|
||||
: selectedGroups.length <= 1
|
||||
? (groups.find(g => g.id === selectedGroups[0])?.name || t('unknownGroup'))
|
||||
: t('selectedGroupsCount').replace('$1', selectedGroups.length.toString())}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{files.filter(f => selectedFiles?.includes(f.id)).map(file => (
|
||||
<div key={file.id} className="flex items-center gap-1.5 bg-indigo-50 text-indigo-700 px-3 py-1.5 rounded-full text-xs font-semibold border border-indigo-100 shadow-sm animate-in zoom-in-95">
|
||||
<span className="truncate max-w-[150px]">{file.title || file.name}</span>
|
||||
<button
|
||||
onClick={onClearFileSelection}
|
||||
className="hover:bg-indigo-200/50 rounded-full p-0.5 transition-colors"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm flex items-end p-2.5 transition-all duration-300 focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-400 group/input">
|
||||
<button
|
||||
onClick={onMobileUploadClick}
|
||||
className="md:hidden p-3 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-colors"
|
||||
>
|
||||
<Paperclip className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={handleInputResize}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={files.length > 0 ? t('placeholderWithFiles') : t('placeholderEmpty')}
|
||||
className="flex-1 max-h-[250px] min-h-[48px] bg-transparent border-none focus:ring-0 text-slate-800 placeholder:text-slate-400/80 resize-none py-3 px-4 text-[15px] leading-relaxed"
|
||||
rows={1}
|
||||
disabled={files.length === 0 && messages.length < 2 && false}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={!input.trim() || isLoading}
|
||||
className={`p-3 rounded-xl mb-0.5 ml-2 transition-all duration-300 ${input.trim() && !isLoading
|
||||
? 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white hover:shadow-lg hover:shadow-blue-500/30 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-95'
|
||||
: 'bg-slate-100 text-slate-300 cursor-not-allowed'
|
||||
} `}
|
||||
type="button"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
) : (
|
||||
<Send className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-center text-[10px] text-slate-400/80 mt-3 font-medium tracking-tight uppercase">
|
||||
{t('aiDisclaimer')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatInterface;
|
||||
@@ -0,0 +1,250 @@
|
||||
import React, { useState } from 'react';
|
||||
import { copyToClipboard } from '../utils/clipboard';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { Message, Role } from '../types';
|
||||
import { Bot, User, AlertCircle, Copy, Check, Search, ChevronDown, ChevronRight, Sparkles } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { ChatSource } from '../types';
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: Message;
|
||||
onPreviewSource?: (source: ChatSource) => void;
|
||||
onOpenFile?: (source: ChatSource) => void;
|
||||
}
|
||||
|
||||
const ChatMessage: React.FC<ChatMessageProps> = ({ message, onPreviewSource, onOpenFile }) => {
|
||||
const { t } = useLanguage();
|
||||
const isUser = message.role === Role.USER;
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [sourcesExpanded, setSourcesExpanded] = useState(false);
|
||||
|
||||
const handleCopy = async () => {
|
||||
const success = await copyToClipboard(message.text);
|
||||
if (success) {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = (content: string) => {
|
||||
return (
|
||||
<div className="markdown-body text-[15px] leading-[1.6] tracking-tight">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }: any) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
const language = match ? match[1] : '';
|
||||
|
||||
if (language === 'mermaid') {
|
||||
return (
|
||||
<div className="my-6 p-5 bg-slate-900/5 border border-slate-200 rounded-2xl overflow-x-auto shadow-inner">
|
||||
<pre className="text-xs text-slate-600 font-mono whitespace-pre-wrap">
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</pre>
|
||||
<div className="flex items-center gap-2 text-[10px] text-slate-400 mt-4 font-bold uppercase tracking-wider">
|
||||
<div className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[8px]">M</div>
|
||||
Mermaid diagram rendering
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!inline && match) {
|
||||
return (
|
||||
<div className="my-5 group/code">
|
||||
<div className="flex items-center justify-between bg-slate-800 text-slate-300 px-4 py-2 rounded-t-xl text-[10px] font-bold uppercase tracking-widest border-b border-white/5">
|
||||
<span className="font-mono">{language}</span>
|
||||
<span className="opacity-0 group-hover/code:opacity-100 transition-opacity text-[10px]">Code Block</span>
|
||||
</div>
|
||||
<pre className="bg-[#1E293B] text-slate-100 p-4 rounded-b-xl overflow-x-auto border border-t-0 border-slate-800 shadow-lg">
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<code className="bg-blue-50 text-blue-700 rounded-md px-1.5 py-0.5 text-xs font-mono font-bold" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
h1: ({ children }) => (
|
||||
<h1 className="text-2xl font-bold mt-8 mb-4 text-slate-900 border-b pb-2 border-slate-100">{children}</h1>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="text-xl font-bold mt-6 mb-3 text-slate-800 flex items-start gap-2">
|
||||
<div className="w-1 h-5 bg-blue-500 rounded-full mt-1 shrink-0" />
|
||||
<span className="break-words min-w-0">{children}</span>
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h3 className="text-lg font-bold mt-5 mb-2 text-slate-800 tracking-tight">{children}</h3>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc list-outside ml-5 space-y-2 my-4 text-slate-700">{children}</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal list-outside ml-5 space-y-2 my-4 text-slate-700">{children}</ol>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="pl-1">{children}</li>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<p className="my-3 leading-[1.7] last:mb-0">{children}</p>
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<div className="overflow-x-auto my-6 border border-slate-200 rounded-xl shadow-sm">
|
||||
<table className="min-w-full divide-y divide-slate-200">{children}</table>
|
||||
</div>
|
||||
),
|
||||
th: ({ children }) => (
|
||||
<th className="border-b border-slate-200 bg-slate-50/80 px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-slate-500">{children}</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="px-4 py-3 text-sm text-slate-600 border-b border-slate-50">{children}</td>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-4 border-blue-200 bg-blue-50/30 px-5 py-3 my-5 rounded-r-xl italic text-slate-600">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
className={`flex w-full ${isUser ? 'justify-end' : 'justify-start'} mb-2`}
|
||||
>
|
||||
<div className={`flex max-w-[90%] md:max-w-[85%] gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
|
||||
|
||||
{/* Avatar */}
|
||||
<div className={`shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all ${isUser ? 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white shadow-blue-200 shadow-md' : 'bg-white border border-slate-200 text-indigo-600 shadow-sm'
|
||||
}`}>
|
||||
{isUser ? <User className="w-5 h-5" /> : <Sparkles className="w-5 h-5" />}
|
||||
</div>
|
||||
|
||||
{/* Message Bubble + Sources */}
|
||||
<div className={`flex flex-col ${isUser ? 'items-end' : 'items-start'} group max-w-full`}>
|
||||
<div className={`relative px-6 py-4 rounded-[24px] shadow-sm transition-all duration-300 ${isUser
|
||||
? 'bg-gradient-to-br from-blue-600 to-indigo-700 text-white rounded-tr-none shadow-blue-200/50 hover:shadow-lg hover:shadow-blue-200/50'
|
||||
: message.isError
|
||||
? 'bg-red-50 border border-red-200 text-red-700 rounded-tl-none'
|
||||
: 'bg-white/80 backdrop-blur-md border border-slate-200/60 text-slate-800 rounded-tl-none hover:shadow-md hover:border-slate-300/50'
|
||||
}`}>
|
||||
{message.isError && (
|
||||
<div className="flex items-center gap-2 mb-3 text-red-600 font-bold uppercase text-[10px] tracking-widest">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
<span>{t('errorLabel')}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={`${isUser ? 'text-blue-50' : 'text-slate-800'}`}>
|
||||
{renderContent(message.text)}
|
||||
</div>
|
||||
|
||||
{/* Copy Button (Always visible, icon only) */}
|
||||
<div className={`flex justify-end mt-3 pt-3 border-t ${isUser ? 'border-white/10' : 'border-slate-100/50'}`}>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className={`flex items-center justify-center p-2 rounded-lg transition-all ${isUser
|
||||
? 'text-blue-200 hover:bg-white/10 hover:text-white'
|
||||
: 'text-slate-400 hover:bg-slate-50 hover:text-indigo-600'
|
||||
}`}
|
||||
title={copied ? t('copied') : t('copy')}
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<span className="text-[10px] font-bold text-slate-400/80 mt-1.5 px-2 uppercase tracking-tight">
|
||||
{new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
|
||||
{!isUser && message.sources && message.sources.length > 0 && (
|
||||
<div className="mt-4 w-full pt-2">
|
||||
<button
|
||||
onClick={() => setSourcesExpanded(!sourcesExpanded)}
|
||||
className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-slate-500 hover:text-indigo-600 transition-all mb-3 group/btn"
|
||||
>
|
||||
<div className={`flex items-center justify-center w-5 h-5 rounded-full border border-slate-200 transition-transform ${sourcesExpanded ? 'rotate-90' : 'rotate-0'}`}>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Search className="w-3 h-3" />
|
||||
<span>{t('citationSources')} ({message.sources.length})</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{sourcesExpanded && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="grid gap-3 w-full overflow-hidden"
|
||||
>
|
||||
{message.sources.map((source, index) => (
|
||||
<div
|
||||
key={`${source.fileName}-${source.chunkIndex}-${index}`}
|
||||
className="bg-white/60 hover:bg-white border border-slate-200/60 rounded-xl p-4 transition-all cursor-pointer hover:shadow-lg hover:shadow-indigo-500/5 hover:border-indigo-200 group/source relative overflow-hidden"
|
||||
onClick={() => onPreviewSource?.(source)}
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500 opacity-0 group-hover/source:opacity-100 transition-opacity" />
|
||||
<div className="flex justify-between items-start mb-2.5">
|
||||
{source.fileId ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onOpenFile?.(source);
|
||||
}}
|
||||
className="font-bold text-slate-900 text-[13px] truncate pr-3 hover:text-indigo-600 transition-colors text-left"
|
||||
title={source.fileName}
|
||||
>
|
||||
{source.fileName}
|
||||
</button>
|
||||
) : (
|
||||
<div className="font-bold text-slate-900 text-[13px] truncate pr-3" title={source.fileName}>{source.fileName}</div>
|
||||
)}
|
||||
<div className="text-[10px] font-black bg-indigo-50 text-indigo-700 px-2.5 py-1 rounded-full shrink-0 border border-indigo-100 shadow-sm uppercase tracking-tighter">
|
||||
{(source.score * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-slate-600 text-sm leading-relaxed line-clamp-2 italic font-medium">
|
||||
“{source.content}”
|
||||
</div>
|
||||
<div className="text-[10px] font-bold text-slate-400 mt-3 flex justify-between items-center uppercase tracking-widest">
|
||||
<span>{t('chunkNumber')} #{source.chunkIndex + 1}</span>
|
||||
<span className="text-indigo-600 opacity-0 group-hover/source:opacity-100 transition-all transform translate-x-2 group-hover/source:translate-x-0 flex items-center gap-1">
|
||||
{t('sourcePreview')} →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatMessage;
|
||||
@@ -0,0 +1,149 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { knowledgeBaseService } from '../services/knowledgeBaseService';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface ChunkInfo {
|
||||
fileId: string;
|
||||
fileName: string;
|
||||
totalChunks: number;
|
||||
chunkSize: number;
|
||||
chunkOverlap: number;
|
||||
chunks: Array<{
|
||||
index: number;
|
||||
content: string;
|
||||
contentLength: number;
|
||||
startPosition: number;
|
||||
endPosition: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface ChunkInfoDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
fileId: string;
|
||||
fileName: string;
|
||||
authToken: string;
|
||||
}
|
||||
|
||||
export const ChunkInfoDrawer: React.FC<ChunkInfoDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
fileId,
|
||||
fileName,
|
||||
authToken,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [chunkInfo, setChunkInfo] = useState<ChunkInfo | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && fileId) {
|
||||
loadChunks();
|
||||
}
|
||||
}, [isOpen, fileId]);
|
||||
|
||||
const loadChunks = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await knowledgeBaseService.getFileChunks(fileId, authToken);
|
||||
setChunkInfo(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load chunks:', err);
|
||||
setError(t('errorLoadData'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-[9998]"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<div className="fixed right-0 top-0 h-full w-full md:w-2/3 lg:w-1/2 bg-white shadow-2xl z-[9999] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-slate-200 shrink-0">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-slate-800">
|
||||
{t('chunkInfo')}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 mt-1">{fileName}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-slate-500">{t('loading')}</div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-red-500">{error}</div>
|
||||
</div>
|
||||
) : chunkInfo ? (
|
||||
<div>
|
||||
{/* Summary */}
|
||||
<div className="bg-slate-50 rounded-lg p-4 mb-6 space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600">{t('totalChunks')}:</span>
|
||||
<span className="font-semibold">{chunkInfo.totalChunks}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600">{t('chunkSize')}:</span>
|
||||
<span className="font-semibold">{chunkInfo.chunkSize} tokens</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-600">{t('chunkOverlap')}:</span>
|
||||
<span className="font-semibold">{chunkInfo.chunkOverlap} tokens</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chunks List */}
|
||||
<div className="space-y-4">
|
||||
{chunkInfo.chunks.map((chunk) => (
|
||||
<div
|
||||
key={chunk.index}
|
||||
className="border border-slate-200 rounded-lg p-4 hover:border-blue-300 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="font-semibold text-slate-800">
|
||||
{t('chunkIndex')} #{chunk.index}
|
||||
</span>
|
||||
<span className="text-sm text-slate-500">
|
||||
{chunk.contentLength} {t('contentLength')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white border border-slate-200 rounded-lg p-4 max-h-96 overflow-y-auto">
|
||||
<div className="text-slate-700 text-sm leading-7 whitespace-pre-wrap break-words" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif' }}>
|
||||
{chunk.content}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-slate-400 mt-2">
|
||||
{t('position')}: {chunk.startPosition} - {chunk.endPosition}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,294 @@
|
||||
|
||||
import React from 'react';
|
||||
import { AppSettings, ModelConfig, ModelType } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { Settings, Database, Sliders, Layers, Cpu, ChevronRight } from 'lucide-react';
|
||||
import VisionModelSelector from './VisionModelSelector';
|
||||
|
||||
interface ConfigPanelProps {
|
||||
settings: AppSettings;
|
||||
models: ModelConfig[];
|
||||
onSettingsChange: (newSettings: AppSettings) => void;
|
||||
onOpenSettings: () => void;
|
||||
mode?: 'chat' | 'kb' | 'all';
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
const ConfigPanel: React.FC<ConfigPanelProps> = ({ settings, models, onSettingsChange, onOpenSettings, mode = 'all', isAdmin = false }) => {
|
||||
const { t } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
|
||||
const handleChange = (key: keyof AppSettings, value: any) => {
|
||||
onSettingsChange({
|
||||
...settings,
|
||||
[key]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const llmModels = models.filter(m => m.type === ModelType.LLM && m.isEnabled !== false && !m.supportsVision);
|
||||
const embeddingModels = models.filter(m => m.type === ModelType.EMBEDDING && m.isEnabled !== false);
|
||||
const rerankModels = models.filter(m => m.type === ModelType.RERANK && m.isEnabled !== false);
|
||||
|
||||
const showChatSettings = mode === 'chat' || mode === 'all';
|
||||
const showKbSettings = mode === 'kb' || mode === 'all';
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-6 bg-slate-50">
|
||||
{!isAdmin && (
|
||||
<div className="bg-orange-50 border border-orange-200 p-3 rounded-lg mb-4">
|
||||
<p className="text-xs text-orange-700 flex items-center gap-2">
|
||||
<Sliders className="w-3 h-3" />
|
||||
{t('onlyAdminCanModify') || "Only administrators can modify system settings."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Model Selection (LLM) - Chat Mode Only */}
|
||||
{showChatSettings && (
|
||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4 border-b border-slate-100 pb-2">
|
||||
<div className="flex items-center gap-2 text-slate-800 font-semibold">
|
||||
<Cpu className="w-4 h-4 text-blue-600" />
|
||||
{t('headerModelSelection')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1.5">{t('selectLLMModel')}</label>
|
||||
<select
|
||||
value={settings.selectedLLMId}
|
||||
onChange={(e) => handleChange('selectedLLMId', e.target.value)}
|
||||
disabled={!isAdmin}
|
||||
className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option value="">--- {t('selectLLMModel')} ---</option>
|
||||
{llmModels.map(m => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.modelId})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Embedding Model Selection - KB Mode Only */}
|
||||
{showKbSettings && (
|
||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4 border-b border-slate-100 pb-2">
|
||||
<div className="flex items-center gap-2 text-slate-800 font-semibold">
|
||||
<Cpu className="w-4 h-4 text-blue-600" />
|
||||
{t('lblEmbedding')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblEmbedding')}</label>
|
||||
<select
|
||||
value={settings.selectedEmbeddingId}
|
||||
onChange={async (e) => {
|
||||
const newId = e.target.value;
|
||||
if (newId !== settings.selectedEmbeddingId && settings.selectedEmbeddingId) {
|
||||
if (await confirm(t('confirmChangeEmbeddingModel') || "WARNING: Changing the embedding model will require re-indexing all existing files. Are you sure?")) {
|
||||
handleChange('selectedEmbeddingId', newId);
|
||||
}
|
||||
} else {
|
||||
handleChange('selectedEmbeddingId', newId);
|
||||
}
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option value="">--- {t('selectEmbeddingModel')} ---</option>
|
||||
{embeddingModels.map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-[10px] text-slate-400 mt-1">{t('defaultForUploads')}</p>
|
||||
<p className="text-[10px] text-orange-500 mt-1">{t('embeddingModelWarning') || "Changing this setting may require clearing and re-importing your knowledge base."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hyperparameters - Chat Mode Only */}
|
||||
{showChatSettings && (
|
||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-4 text-slate-800 font-semibold border-b border-slate-100 pb-2">
|
||||
<Sliders className="w-4 h-4 text-pink-500" />
|
||||
{t('headerHyperparams')}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-slate-500">{t('lblTemperature')}</label>
|
||||
<span className="text-xs text-blue-600 font-bold">{settings.temperature}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={settings.temperature}
|
||||
onChange={(e) => handleChange('temperature', parseFloat(e.target.value))}
|
||||
disabled={!isAdmin}
|
||||
className={`w-full h-2 rounded-lg appearance-none cursor-pointer accent-blue-600 ${!isAdmin ? 'bg-slate-100' : 'bg-slate-200'}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblMaxTokens')}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={settings.maxTokens}
|
||||
onChange={(e) => handleChange('maxTokens', parseInt(e.target.value))}
|
||||
disabled={!isAdmin}
|
||||
className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vision Model Settings - Chat Mode Only? Or both? Assuming Chat */}
|
||||
{/* Vision Model Settings - KB Only */}
|
||||
{showKbSettings && <VisionModelSelector isAdmin={isAdmin} />}
|
||||
|
||||
{/* Retrieval Settings - KB Mode Only */}
|
||||
{showKbSettings && (
|
||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-4 text-slate-800 font-semibold border-b border-slate-100 pb-2">
|
||||
<Database className="w-4 h-4 text-green-600" />
|
||||
{t('headerRetrieval')}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-slate-500">{t('lblTopK')}</label>
|
||||
<span className="text-xs text-blue-600 font-bold">{settings.topK}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
step="1"
|
||||
value={settings.topK}
|
||||
onChange={(e) => handleChange('topK', parseInt(e.target.value))}
|
||||
disabled={!isAdmin}
|
||||
className={`w-full h-2 rounded-lg appearance-none cursor-pointer accent-blue-600 ${!isAdmin ? 'bg-slate-100' : 'bg-slate-200'}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1.5">{t('lblRerankRef')}</label>
|
||||
<select
|
||||
value={settings.selectedRerankId}
|
||||
onChange={(e) => handleChange('selectedRerankId', e.target.value)}
|
||||
disabled={!settings.enableRerank || !isAdmin}
|
||||
className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option value="">--- {t('selectRerankModel')} ---</option>
|
||||
{rerankModels.map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-slate-500">{t('vectorSimilarityThreshold')}</label>
|
||||
<span className="text-xs text-blue-600 font-bold">{settings.similarityThreshold}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
value={settings.similarityThreshold}
|
||||
onChange={(e) => handleChange('similarityThreshold', parseFloat(e.target.value))}
|
||||
disabled={!isAdmin}
|
||||
className={`w-full h-2 rounded-lg appearance-none cursor-pointer accent-blue-600 ${!isAdmin ? 'bg-slate-100' : 'bg-slate-200'}`}
|
||||
/>
|
||||
<p className="text-[10px] text-slate-400 mt-1">{t('filterLowResults')}</p>
|
||||
</div>
|
||||
|
||||
{settings.enableRerank && (
|
||||
<div>
|
||||
<div className="flex justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-slate-500">{t('rerankSimilarityThreshold')}</label>
|
||||
<span className="text-xs text-blue-600 font-bold">{settings.rerankSimilarityThreshold}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
value={settings.rerankSimilarityThreshold}
|
||||
onChange={(e) => handleChange('rerankSimilarityThreshold', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-pink-600"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<label className="text-sm text-slate-700">{t('lblRerank')}</label>
|
||||
<button
|
||||
onClick={() => isAdmin && handleChange('enableRerank', !settings.enableRerank)}
|
||||
disabled={!isAdmin}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableRerank ? 'bg-blue-600' : 'bg-slate-300'
|
||||
} ${!isAdmin ? 'cursor-not-allowed opacity-50' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`${settings.enableRerank ? 'translate-x-6' : 'translate-x-1'
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<label className="text-sm text-slate-700">{t('fullTextSearch')}</label>
|
||||
<button
|
||||
onClick={() => isAdmin && handleChange('enableFullTextSearch', !settings.enableFullTextSearch)}
|
||||
disabled={!isAdmin}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${settings.enableFullTextSearch ? 'bg-blue-600' : 'bg-slate-300'
|
||||
} ${!isAdmin ? 'cursor-not-allowed opacity-50' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`${settings.enableFullTextSearch ? 'translate-x-6' : 'translate-x-1'
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{settings.enableFullTextSearch && (
|
||||
<div className="pt-2 animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<div className="flex justify-between mb-1.5">
|
||||
<label className="text-xs font-medium text-slate-500">{t('hybridVectorWeight')}</label>
|
||||
<span className="text-xs text-blue-600 font-bold">{settings.hybridVectorWeight}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
value={settings.hybridVectorWeight}
|
||||
onChange={(e) => handleChange('hybridVectorWeight', parseFloat(e.target.value))}
|
||||
disabled={!isAdmin}
|
||||
className={`w-full h-2 rounded-lg appearance-none cursor-pointer accent-blue-600 ${!isAdmin ? 'bg-slate-100' : 'bg-slate-200'}`}
|
||||
/>
|
||||
<p className="text-[10px] text-slate-400 mt-1">{t('hybridVectorWeightDesc')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfigPanel;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import { AlertCircle, X } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean;
|
||||
title?: string;
|
||||
message: string;
|
||||
confirmLabel?: string;
|
||||
cancelLabel?: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
|
||||
isOpen,
|
||||
title,
|
||||
message,
|
||||
confirmLabel,
|
||||
cancelLabel,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 bg-black/10 backdrop-blur-[2px] animate-in fade-in duration-200">
|
||||
<div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in duration-300 pointer-events-auto border border-white/40 ring-1 ring-black/5">
|
||||
<div className="flex justify-between items-center px-10 pt-10 pb-4">
|
||||
<h3 className="text-base font-black text-slate-900 flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-amber-50 flex items-center justify-center">
|
||||
<AlertCircle className="w-5 h-5 text-amber-500" />
|
||||
</div>
|
||||
{title || t('confirmTitle') || 'Confirm'}
|
||||
</h3>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="w-8 h-8 rounded-full flex items-center justify-center text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-all"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-10 py-6">
|
||||
<p className="text-sm font-bold text-slate-500 leading-relaxed whitespace-pre-wrap">{message}</p>
|
||||
</div>
|
||||
|
||||
<div className="px-10 pb-10 pt-2 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="flex-1 h-12 text-sm text-slate-600 hover:bg-slate-100 rounded-2xl transition-all font-black uppercase tracking-widest"
|
||||
>
|
||||
{cancelLabel || t('cancel') || 'Cancel'}
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className="flex-1 h-12 text-sm bg-indigo-600 text-white rounded-2xl hover:bg-indigo-700 transition-all font-black shadow-lg shadow-indigo-600/20 active:scale-95 uppercase tracking-widest"
|
||||
>
|
||||
{confirmLabel || t('confirm') || 'Confirm'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConfirmDialog;
|
||||
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Loader, Image as ImageIcon, Box } from 'lucide-react';
|
||||
import { ocrService } from '../services/ocrService';
|
||||
import { noteCategoryService } from '../services/noteCategoryService';
|
||||
import { NoteCategory } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
|
||||
interface CreateNoteFromPDFDialogProps {
|
||||
screenshot: Blob;
|
||||
extractedText: string;
|
||||
onSave: (title: string, content: string, categoryId?: string) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
authToken: string;
|
||||
initialCategoryId?: string;
|
||||
initialPageNumber?: number;
|
||||
}
|
||||
|
||||
export const CreateNoteFromPDFDialog: React.FC<CreateNoteFromPDFDialogProps> = ({
|
||||
screenshot,
|
||||
extractedText,
|
||||
onSave,
|
||||
onCancel,
|
||||
authToken,
|
||||
initialCategoryId,
|
||||
initialPageNumber,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showToast } = useToast();
|
||||
const defaultTitle = initialPageNumber
|
||||
? `${t('createPDFNote')} - ${t('page')} ${initialPageNumber} - ${new Date().toLocaleString()}`
|
||||
: `${t('createPDFNote')} - ${new Date().toLocaleString()}`;
|
||||
const [title, setTitle] = useState(defaultTitle);
|
||||
const [content, setContent] = useState(extractedText);
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string | undefined>(initialCategoryId);
|
||||
const [categories, setCategories] = useState<NoteCategory[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [ocrLoading, setOcrLoading] = useState(false);
|
||||
const [screenshotUrl, setScreenshotUrl] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
noteCategoryService.getAll(authToken).then(setCategories).catch(console.error);
|
||||
}
|
||||
}, [authToken]);
|
||||
|
||||
useEffect(() => {
|
||||
const url = URL.createObjectURL(screenshot);
|
||||
setScreenshotUrl(url);
|
||||
|
||||
// Trigger OCR if initial text is empty
|
||||
if (!extractedText && authToken) {
|
||||
setOcrLoading(true);
|
||||
ocrService.recognizeText(authToken, screenshot)
|
||||
.then(text => setContent(text))
|
||||
.catch(err => console.error('OCR failed:', err))
|
||||
.finally(() => setOcrLoading(false));
|
||||
}
|
||||
|
||||
return () => URL.revokeObjectURL(url);
|
||||
}, [screenshot, extractedText, authToken]);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
await onSave(title, content, selectedCategoryId);
|
||||
} catch (error) {
|
||||
console.error('Failed to save note:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-lg w-full max-w-3xl max-h-[90vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{t('createPDFNote')}</h2>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
disabled={saving}
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{/* Screenshot Preview */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
<ImageIcon size={16} className="inline mr-1" />
|
||||
{t('screenshotPreview')}
|
||||
</label>
|
||||
<div className="border rounded-lg p-2 bg-gray-50">
|
||||
{screenshotUrl && (
|
||||
<img
|
||||
src={screenshotUrl}
|
||||
alt="PDF Selection"
|
||||
className="max-w-full h-auto rounded"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Note Category selector */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
<Box size={16} className="inline mr-1" />
|
||||
{t('personalNotebook') || t('directoryLabel')}
|
||||
</label>
|
||||
<select
|
||||
value={selectedCategoryId || ''}
|
||||
onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
disabled={saving}
|
||||
>
|
||||
<option value="">{t('uncategorized')}</option>
|
||||
{categories.map(c => {
|
||||
const parent = categories.find(p => p.id === c.parentId)
|
||||
const grandparent = parent ? categories.find(gp => gp.id === parent.parentId) : null
|
||||
const path = [grandparent, parent, c].filter(Boolean).map(cat => cat?.name).join(' > ')
|
||||
return (
|
||||
<option key={c.id} value={c.id}>
|
||||
{'\u00A0'.repeat((c.level - 1) * 2)}{c.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Title Input */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{t('title')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder={t('enterNoteTitle')}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content Textarea */}
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{t('contentOCR')}
|
||||
</label>
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
|
||||
rows={10}
|
||||
placeholder={ocrLoading ? t('extractingText') : t('placeholderText')}
|
||||
disabled={saving || ocrLoading}
|
||||
/>
|
||||
{ocrLoading && (
|
||||
<div className="flex items-center gap-2 mt-2 p-2 bg-blue-50/50 rounded-md border border-blue-100/50">
|
||||
<Loader size={12} className="animate-spin" />
|
||||
{t('analyzingImage')}
|
||||
</div>
|
||||
)}
|
||||
{!ocrLoading && !content && (
|
||||
<p className="text-sm text-gray-500">
|
||||
{t('noTextExtracted')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-2 p-4 border-t bg-gray-50">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
disabled={saving}
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
disabled={saving || !title.trim()}
|
||||
>
|
||||
{saving && <Loader size={16} className="animate-spin" />}
|
||||
{saving ? t('saving') : t('saveNote')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import React, { useState } from 'react'
|
||||
import { X, Plus } from 'lucide-react'
|
||||
import { CreateGroupData } from '../types'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
import { useToast } from '../contexts/ToastContext'
|
||||
|
||||
interface CreateNotebookDialogProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onCreate: (data: CreateGroupData) => Promise<void>
|
||||
}
|
||||
|
||||
export const CreateNotebookDialog: React.FC<CreateNotebookDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreate,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showError } = useToast();
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim()) return
|
||||
|
||||
try {
|
||||
setIsSubmitting(true)
|
||||
await onCreate({
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
color: '#3b82f6', // Default color
|
||||
})
|
||||
// Reset form
|
||||
setName('')
|
||||
setDescription('')
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error('Failed to create notebook:', error)
|
||||
showError(t('createFailedRetry'))
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b">
|
||||
<h2 className="text-lg font-semibold text-slate-800">{t('createNotebookTitle')}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('name')} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('namePlaceholder')}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('shortDescription')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('descPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="flex justify-end pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg mr-2 transition-colors"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !name.trim()}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{isSubmitting ? t('creating') : t('createNow')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Plus, ChevronRight } from 'lucide-react'
|
||||
import { CreateGroupData } from '../types'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
import { useToast } from '../contexts/ToastContext'
|
||||
|
||||
interface CreateNotebookDrawerProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onCreate: (data: CreateGroupData) => Promise<void>
|
||||
}
|
||||
|
||||
export const CreateNotebookDrawer: React.FC<CreateNotebookDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreate,
|
||||
}) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError } = useToast()
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim()) return
|
||||
|
||||
try {
|
||||
setIsSubmitting(true)
|
||||
await onCreate({
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
color: '#3b82f6', // Default color
|
||||
})
|
||||
// Reset form
|
||||
setName('')
|
||||
setDescription('')
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error('Failed to create notebook:', error)
|
||||
showError(t('createFailedRetry'))
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<div
|
||||
className={`fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b bg-slate-50">
|
||||
<h2 className="text-xl font-semibold text-slate-800 flex items-center gap-2">
|
||||
<Plus className="w-6 h-6 text-blue-600" />
|
||||
{t('createNotebookTitle')}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-200 rounded-full transition-colors"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<form id="create-notebook-form" onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('name')} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
|
||||
placeholder={t('namePlaceholder')}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<p className="mt-1 text-xs text-slate-500">{t('nameHelp')}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('shortDescription')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
|
||||
placeholder={t('descPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t bg-slate-50">
|
||||
<button
|
||||
type="submit"
|
||||
form="create-notebook-form"
|
||||
disabled={isSubmitting || !name.trim()}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/20"
|
||||
>
|
||||
<Plus size={20} />
|
||||
{isSubmitting ? t('creating') : t('createNow')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Upload as UploadIcon, FileText, Image as ImageIcon, Folder, FileUp, ShieldCheck } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
interface DragDropUploadProps {
|
||||
onFilesSelected: (files: FileList) => void;
|
||||
isAdmin: boolean;
|
||||
globalMode?: boolean;
|
||||
}
|
||||
|
||||
export const DragDropUpload: React.FC<DragDropUploadProps> = ({ onFilesSelected, isAdmin, globalMode = false }) => {
|
||||
const { t } = useLanguage();
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
onFilesSelected(e.dataTransfer.files);
|
||||
e.dataTransfer.clearData();
|
||||
}
|
||||
}, [onFilesSelected]);
|
||||
|
||||
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
onFilesSelected(e.target.files);
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAdmin) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className={`relative w-full overflow-hidden rounded-2xl border-2 border-dashed transition-all duration-300 ${isDragging
|
||||
? 'border-blue-500 bg-blue-50/50 shadow-[0_0_25px_rgba(59,130,246,0.1)]'
|
||||
: 'border-slate-200 bg-slate-50/50 hover:border-slate-300 hover:bg-slate-50'
|
||||
}`}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => document.getElementById('file-upload-input')?.click()}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center py-12 px-6 text-center cursor-pointer">
|
||||
<div className={`p-4 rounded-2xl mb-6 transition-all duration-300 ${isDragging ? 'bg-blue-600 text-white scale-110' : 'bg-white text-blue-600 shadow-sm border border-slate-100'}`}>
|
||||
<FileUp size={32} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 mb-8">
|
||||
<h3 className="text-lg font-bold text-slate-900 tracking-tight">
|
||||
{t('dragDropUploadTitle')}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 font-medium">
|
||||
{t('dragDropUploadDesc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 mb-8">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-100 rounded-full text-[11px] font-bold text-slate-500 uppercase tracking-wider shadow-sm">
|
||||
<ShieldCheck size={14} className="text-emerald-500" />
|
||||
<span>{t('secureIngestion')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-100 rounded-full text-[11px] font-bold text-slate-500 uppercase tracking-wider shadow-sm">
|
||||
<FileText size={14} className="text-blue-500" />
|
||||
<span>{t('documentsAndText')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-100 rounded-full text-[11px] font-bold text-slate-500 uppercase tracking-wider shadow-sm">
|
||||
<ImageIcon size={14} className="text-purple-500" />
|
||||
<span>{t('imagesAndVision')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-md shadow-blue-100 transition-all font-semibold text-sm active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<Folder size={18} />
|
||||
{t('browseFiles')}
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleFileInput}
|
||||
className="hidden"
|
||||
id="file-upload-input"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md,.html,.csv,.rtf,.odt,.ods,.odp,.json,.js,.jsx,.ts,.tsx,.css,.xml,image/*"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isDragging && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 bg-blue-600/5 backdrop-blur-[2px] pointer-events-none flex items-center justify-center border-2 border-blue-500 rounded-2xl"
|
||||
>
|
||||
<div className="bg-white p-6 rounded-3xl shadow-2xl flex flex-col items-center gap-3">
|
||||
<div className="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center animate-bounce">
|
||||
<FileUp size={24} />
|
||||
</div>
|
||||
<span className="text-blue-600 font-bold">{t('dropToIngest')}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { X, Save } from 'lucide-react'
|
||||
import { KnowledgeGroup, UpdateGroupData } from '../types'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
import { useToast } from '../contexts/ToastContext'
|
||||
|
||||
interface EditNotebookDialogProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
notebook: KnowledgeGroup
|
||||
onUpdate: (id: string, data: UpdateGroupData) => Promise<void>
|
||||
}
|
||||
|
||||
export const EditNotebookDialog: React.FC<EditNotebookDialogProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
notebook,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const [name, setName] = useState(notebook.name)
|
||||
const [description, setDescription] = useState(notebook.description || '')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const { t } = useLanguage()
|
||||
const { showError } = useToast()
|
||||
|
||||
// Reset form when notebook changes or dialog opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setName(notebook.name)
|
||||
setDescription(notebook.description || '')
|
||||
}
|
||||
}, [isOpen, notebook])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim()) return
|
||||
|
||||
try {
|
||||
setIsSubmitting(true)
|
||||
await onUpdate(notebook.id, {
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
})
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error('Failed to update notebook:', error)
|
||||
showError(t('updateFailedRetry'))
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b">
|
||||
<h2 className="text-lg font-semibold text-slate-800">{t('editNotebookTitle')}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-600 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('name')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('namePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('shortDescription')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('descPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg mr-2 transition-colors"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !name.trim()}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Save size={18} />
|
||||
{isSubmitting ? t('saving') : t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Plus, ChevronRight, Save } from 'lucide-react'
|
||||
import { KnowledgeGroup, UpdateGroupData } from '../types'
|
||||
import { useLanguage } from '../contexts/LanguageContext'
|
||||
import { useToast } from '../contexts/ToastContext'
|
||||
|
||||
interface EditNotebookDrawerProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
notebook: KnowledgeGroup
|
||||
onUpdate: (id: string, data: UpdateGroupData) => Promise<void>
|
||||
}
|
||||
|
||||
export const EditNotebookDrawer: React.FC<EditNotebookDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
notebook,
|
||||
onUpdate,
|
||||
}) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError } = useToast()
|
||||
const [name, setName] = useState(notebook.name)
|
||||
const [description, setDescription] = useState(notebook.description || '')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
// Reset form when notebook changes or drawer opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setName(notebook.name)
|
||||
setDescription(notebook.description || '')
|
||||
}
|
||||
}, [isOpen, notebook])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim()) return
|
||||
|
||||
try {
|
||||
setIsSubmitting(true)
|
||||
await onUpdate(notebook.id, {
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
})
|
||||
onClose()
|
||||
} catch (error) {
|
||||
console.error('Failed to update notebook:', error)
|
||||
showError(t('updateFailedRetry'))
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300"
|
||||
onClick={onClose}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<div
|
||||
className={`fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b bg-slate-50">
|
||||
<h2 className="text-xl font-semibold text-slate-800 flex items-center gap-2">
|
||||
<Save className="w-5 h-5 text-blue-600" />
|
||||
{t('editNotebookTitle')}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-200 rounded-full transition-colors"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<form id="edit-notebook-form" onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('name')} <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
|
||||
placeholder={t('namePlaceholder')}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">
|
||||
{t('shortDescription')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
|
||||
placeholder={t('descPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t bg-slate-50">
|
||||
<button
|
||||
type="submit"
|
||||
form="edit-notebook-form"
|
||||
disabled={isSubmitting || !name.trim()}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/20"
|
||||
>
|
||||
<Save size={20} />
|
||||
{isSubmitting ? t('saving') : t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import React, { useState } from 'react';
|
||||
import { KnowledgeGroup } from '../types';
|
||||
import { knowledgeGroupService } from '../services/knowledgeGroupService';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { Tag, Plus, X, FolderPlus } from 'lucide-react';
|
||||
|
||||
interface FileGroupTagsProps {
|
||||
fileId: string;
|
||||
groups: KnowledgeGroup[];
|
||||
assignedGroups: string[];
|
||||
onGroupsChange: (groupIds: string[]) => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const FileGroupTags: React.FC<FileGroupTagsProps> = ({
|
||||
fileId,
|
||||
groups,
|
||||
assignedGroups,
|
||||
onGroupsChange,
|
||||
isAdmin = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { showToast } = useToast();
|
||||
|
||||
// Monitor custom events to open group selector
|
||||
React.useEffect(() => {
|
||||
const handleOpenGroupSelector = (event: CustomEvent) => {
|
||||
if (event.detail.fileId === fileId) {
|
||||
setIsOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('openGroupSelector', handleOpenGroupSelector as EventListener);
|
||||
return () => {
|
||||
document.removeEventListener('openGroupSelector', handleOpenGroupSelector as EventListener);
|
||||
};
|
||||
}, [fileId]);
|
||||
|
||||
const handleAddToGroup = async (groupId: string) => {
|
||||
if (assignedGroups.includes(groupId)) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Correct method: pass all group IDs (existing + new)
|
||||
const newGroupIds = [...assignedGroups, groupId];
|
||||
await knowledgeGroupService.addFileToGroups(fileId, newGroupIds);
|
||||
onGroupsChange(newGroupIds);
|
||||
showToast('success', t('fileAddedToGroup'));
|
||||
setIsOpen(false);
|
||||
} catch (error) {
|
||||
showToast('error', t('failedToAddToGroup'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveFromGroup = async (groupId: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await knowledgeGroupService.removeFileFromGroup(fileId, groupId);
|
||||
onGroupsChange(assignedGroups.filter(id => id !== groupId));
|
||||
showToast('success', t('fileRemovedFromGroup'));
|
||||
} catch (error) {
|
||||
showToast('error', t('failedToRemoveFromGroup'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const assignedGroupsData = assignedGroups.map(id => groups.find(g => g.id === id)).filter(Boolean);
|
||||
const availableGroups = groups.filter(g => !assignedGroups.includes(g.id));
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="flex items-center flex-wrap gap-1">
|
||||
{assignedGroupsData.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
className="flex items-center space-x-1 px-2 py-1 rounded-full text-xs"
|
||||
style={{ backgroundColor: group.color + '20', color: group.color }}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<span>{group.name}</span>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => handleRemoveFromGroup(group.id)}
|
||||
disabled={loading}
|
||||
className="hover:bg-black/10 rounded-full p-0.5"
|
||||
>
|
||||
<X size={10} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{availableGroups.length > 0 && (
|
||||
<span></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && availableGroups.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<div className="absolute top-full left-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-20 min-w-48">
|
||||
{availableGroups.map((group) => (
|
||||
<button
|
||||
key={group.id}
|
||||
onClick={() => {
|
||||
handleAddToGroup(group.id);
|
||||
}}
|
||||
disabled={loading}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 text-sm text-left hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<span>{group.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,162 @@
|
||||
import { useLayoutEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { FileUp, ShieldCheck, FileText, Image as ImageIcon } from 'lucide-react';
|
||||
|
||||
interface GlobalDragDropProps {
|
||||
onFilesSelected: (files: FileList) => void;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
let isDragDropEnabled = true;
|
||||
let forceHideCallback: (() => void) | null = null;
|
||||
|
||||
export const setDragDropEnabled = (enabled: boolean) => {
|
||||
isDragDropEnabled = enabled;
|
||||
if (!enabled && forceHideCallback) {
|
||||
forceHideCallback();
|
||||
}
|
||||
};
|
||||
|
||||
export const GlobalDragDropOverlay: React.FC<GlobalDragDropProps> = ({ onFilesSelected, isAdmin }) => {
|
||||
const { t } = useLanguage();
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const dragCounterRef = useRef(0);
|
||||
const isDragActiveRef = useRef(false);
|
||||
|
||||
const hasFiles = useCallback((dt: DataTransfer | null) => {
|
||||
if (!dt) return false;
|
||||
const hasFileType = dt.types && dt.types.includes('Files');
|
||||
if (!hasFileType) return false;
|
||||
if (dt.items && dt.items.length > 0) {
|
||||
for (let i = 0; i < dt.items.length; i++) {
|
||||
if (dt.items[i].kind === 'file') return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return hasFileType;
|
||||
}, []);
|
||||
|
||||
const handleDragEnter = useCallback((e: DragEvent) => {
|
||||
if (!isDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current++;
|
||||
if (dragCounterRef.current === 1) {
|
||||
setIsVisible(true);
|
||||
isDragActiveRef.current = true;
|
||||
}
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDragOver = useCallback((e: DragEvent) => {
|
||||
if (!isDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer!.dropEffect = 'copy';
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDragLeave = useCallback((e: DragEvent) => {
|
||||
if (!isDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
|
||||
if (dragCounterRef.current === 0 && isDragActiveRef.current) {
|
||||
setIsVisible(false);
|
||||
isDragActiveRef.current = false;
|
||||
}
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDrop = useCallback((e: DragEvent) => {
|
||||
if (!isDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current = 0;
|
||||
setIsVisible(false);
|
||||
isDragActiveRef.current = false;
|
||||
if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
|
||||
onFilesSelected(e.dataTransfer.files);
|
||||
}
|
||||
}, [hasFiles, onFilesSelected]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isAdmin) return;
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
forceHideCallback = () => {
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
setIsVisible(false);
|
||||
};
|
||||
document.addEventListener('dragenter', handleDragEnter);
|
||||
document.addEventListener('dragover', handleDragOver);
|
||||
document.addEventListener('dragleave', handleDragLeave);
|
||||
document.addEventListener('drop', handleDrop);
|
||||
return () => {
|
||||
document.removeEventListener('dragenter', handleDragEnter);
|
||||
document.removeEventListener('dragover', handleDragOver);
|
||||
document.removeEventListener('dragleave', handleDragLeave);
|
||||
document.removeEventListener('drop', handleDrop);
|
||||
forceHideCallback = null;
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
setIsVisible(false);
|
||||
};
|
||||
}, [isAdmin, handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);
|
||||
|
||||
if (!isAdmin || typeof window === 'undefined') return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-blue-600/10 backdrop-blur-md items-center justify-center z-[9999] pointer-events-none flex p-8"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, y: 20 }}
|
||||
animate={{ scale: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, y: 20 }}
|
||||
className="w-full max-w-2xl bg-white rounded-[2.5rem] p-12 text-center shadow-[0_32px_64px_-12px_rgba(0,0,0,0.14)] border border-white pointer-events-auto"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-8">
|
||||
<div className="w-24 h-24 bg-blue-600 text-white rounded-3xl flex items-center justify-center shadow-xl shadow-blue-200 animate-bounce">
|
||||
<FileUp size={48} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
||||
{t('dragDropUploadTitle')}
|
||||
</h3>
|
||||
<p className="text-lg text-slate-500 font-medium">
|
||||
{t('dropAnywhere')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 py-8 border-y border-slate-100 w-full">
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-2xl text-sm font-bold text-slate-600 uppercase tracking-wider">
|
||||
<ShieldCheck size={20} className="text-emerald-500" />
|
||||
<span>{t('secureProcessing')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-2xl text-sm font-bold text-slate-600 uppercase tracking-wider">
|
||||
<FileText size={20} className="text-blue-500" />
|
||||
<span>{t('allFormats')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-2xl text-sm font-bold text-slate-600 uppercase tracking-wider">
|
||||
<ImageIcon size={20} className="text-purple-500" />
|
||||
<span>{t('visualVision')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-slate-400 font-bold text-xs uppercase tracking-[0.3em]">
|
||||
{t('releaseToIngest')}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,240 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { KnowledgeGroup, CreateGroupData, UpdateGroupData } from '../types';
|
||||
import { knowledgeGroupService } from '../services/knowledgeGroupService';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { Folder, Plus, Edit2, Trash2, X } from 'lucide-react';
|
||||
|
||||
interface GroupManagerProps {
|
||||
groups: KnowledgeGroup[];
|
||||
onGroupsChange: (groups: KnowledgeGroup[]) => void;
|
||||
}
|
||||
|
||||
const DEFAULT_COLORS = [
|
||||
'#3B82F6', '#10B981', '#F59E0B', '#EF4444',
|
||||
'#8B5CF6', '#06B6D4', '#84CC16', '#F97316'
|
||||
];
|
||||
|
||||
export const GroupManager: React.FC<GroupManagerProps> = ({ groups, onGroupsChange }) => {
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<KnowledgeGroup | null>(null);
|
||||
const [formData, setFormData] = useState<CreateGroupData>({
|
||||
name: '',
|
||||
description: '',
|
||||
color: DEFAULT_COLORS[0],
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { showSuccess, showError } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
const { t } = useLanguage();
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
color: DEFAULT_COLORS[0],
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.name.trim()) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const newGroup = await knowledgeGroupService.createGroup(formData);
|
||||
onGroupsChange([...groups, newGroup]);
|
||||
setIsCreateModalOpen(false);
|
||||
resetForm();
|
||||
showSuccess(t('successNoteCreated')); // Note: Should probably have a more specific translation for group
|
||||
} catch (error) {
|
||||
showError(t('createFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!editingGroup || !formData.name.trim()) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const updatedGroup = await knowledgeGroupService.updateGroup(editingGroup.id, formData);
|
||||
onGroupsChange(groups.map(g => g.id === editingGroup.id ? updatedGroup : g));
|
||||
setEditingGroup(null);
|
||||
resetForm();
|
||||
showSuccess(t('successNoteUpdated'));
|
||||
} catch (error) {
|
||||
showError(t('updateFailedRetry'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (group: KnowledgeGroup) => {
|
||||
if (!(await confirm(t('confirmDeleteGroup').replace('$1', group.name)))) return;
|
||||
|
||||
try {
|
||||
await knowledgeGroupService.deleteGroup(group.id);
|
||||
onGroupsChange(groups.filter(g => g.id !== group.id));
|
||||
showSuccess(t('successNoteDeleted'));
|
||||
} catch (error) {
|
||||
showError(t('deleteFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const openEditModal = (group: KnowledgeGroup) => {
|
||||
setEditingGroup(group);
|
||||
setFormData({
|
||||
name: group.name,
|
||||
description: group.description || '',
|
||||
color: group.color,
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsCreateModalOpen(false);
|
||||
setEditingGroup(null);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const isModalOpen = isCreateModalOpen || editingGroup !== null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Group list */}
|
||||
<div className="space-y-2">
|
||||
{groups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
className="flex items-center justify-between p-3 bg-white rounded-lg border hover:shadow-sm transition-shadow"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{group.name}</div>
|
||||
{group.description && (
|
||||
<div className="text-sm text-gray-500">{group.description}</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-400">
|
||||
{group.fileCount} files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => openEditModal(group)}
|
||||
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(group)}
|
||||
className="p-1 text-gray-400 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Create button */}
|
||||
<button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className="w-full flex items-center justify-center p-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-600 transition-colors"
|
||||
title={t('createNotebook')}
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
|
||||
{/* Create/Edit modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">
|
||||
{editingGroup ? t('editNotebookTitle') : t('createNotebookTitle')}
|
||||
</h3>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={editingGroup ? handleUpdate : handleCreate} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('name')} *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('namePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{t('shortDescription')}
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={t('descPlaceholder')}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Color indicator
|
||||
</label>
|
||||
<div className="flex space-x-2">
|
||||
{DEFAULT_COLORS.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, color })}
|
||||
className={`w-8 h-8 rounded-full border-2 ${formData.color === color ? 'border-gray-400' : 'border-gray-200'
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeModal}
|
||||
className="flex-1 px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !formData.name.trim()}
|
||||
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? t('saving') : (editingGroup ? t('save') : t('create'))}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { KnowledgeGroup } from '../types';
|
||||
import { Check, X, Search, Database } from 'lucide-react';
|
||||
|
||||
interface GroupSelectionDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
groups: KnowledgeGroup[];
|
||||
selectedGroups: string[];
|
||||
onSelectionChange: (groupIds: string[]) => void;
|
||||
}
|
||||
|
||||
export const GroupSelectionDrawer: React.FC<GroupSelectionDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
groups,
|
||||
selectedGroups,
|
||||
onSelectionChange
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const filteredGroups = groups.filter(g =>
|
||||
g.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const isAllSelected = selectedGroups.length === 0;
|
||||
|
||||
const handleToggleGroup = (groupId: string) => {
|
||||
if (selectedGroups.includes(groupId)) {
|
||||
onSelectionChange(selectedGroups.filter(id => id !== groupId));
|
||||
} else {
|
||||
onSelectionChange([...selectedGroups, groupId]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
onSelectionChange([]);
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
<div className="absolute inset-y-0 right-0 max-w-md w-full flex">
|
||||
<div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
|
||||
<h2 className="text-lg font-medium text-gray-900 flex items-center gap-2">
|
||||
<Database size={20} />
|
||||
{t('selectKnowledgeGroups')}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Box */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('searchGroupsPlaceholder')}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-1">
|
||||
{!searchTerm && (
|
||||
<div
|
||||
onClick={handleSelectAll}
|
||||
className={`flex items-center px-4 py-3.5 cursor-pointer hover:bg-slate-50 rounded-xl transition-all ${isAllSelected ? 'bg-blue-50/50 text-blue-700 outline outline-1 outline-blue-200' : 'text-slate-700 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 mr-3 border rounded-md flex items-center justify-center transition-colors ${isAllSelected ? 'bg-blue-600 border-blue-600' : 'border-slate-300'
|
||||
}`}>
|
||||
{isAllSelected && <Check size={14} className="text-white" />}
|
||||
</div>
|
||||
<span className="font-semibold text-sm">{t('all')}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{filteredGroups.map((group) => {
|
||||
const isSelected = selectedGroups.includes(group.id);
|
||||
return (
|
||||
<div
|
||||
key={group.id}
|
||||
onClick={() => handleToggleGroup(group.id)}
|
||||
className={`flex items-center px-4 py-3 cursor-pointer hover:bg-slate-50 rounded-xl transition-all ${isSelected ? 'bg-blue-50/50 outline outline-1 outline-blue-200' : 'border border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 mr-3 border rounded-md flex items-center justify-center flex-shrink-0 transition-colors ${isSelected ? 'bg-blue-600 border-blue-600' : 'border-slate-300'
|
||||
}`}>
|
||||
{isSelected && <Check size={14} className="text-white" />}
|
||||
</div>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-3 flex-shrink-0 shadow-sm"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-sm truncate transition-colors ${isSelected ? 'text-blue-700 font-semibold' : 'text-slate-700 font-medium'}`}>
|
||||
{group.name}
|
||||
</div>
|
||||
<div className={`text-xs mt-0.5 transition-colors ${isSelected ? 'text-blue-500/80' : 'text-slate-400'}`}>
|
||||
{group.fileCount} 个文件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredGroups.length === 0 && (
|
||||
<div className="py-12 text-center text-slate-400 text-sm flex flex-col items-center justify-center gap-2">
|
||||
<Database size={32} className="text-slate-200" />
|
||||
<span>{searchTerm ? t('noGroupsFound') : t('noGroups')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-gray-200 bg-gray-50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
||||
>
|
||||
{t('done')} ({isAllSelected ? t('all') : selectedGroups.length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,184 @@
|
||||
|
||||
import React from 'react';
|
||||
import { KnowledgeGroup } from '../types';
|
||||
import { Check, ChevronDown, Search } from 'lucide-react';
|
||||
|
||||
interface GroupSelectorProps {
|
||||
groups: KnowledgeGroup[];
|
||||
selectedGroups: string[];
|
||||
onSelectionChange: (groupIds: string[]) => void;
|
||||
showSelectAll?: boolean;
|
||||
placeholder?: string;
|
||||
minimal?: boolean;
|
||||
direction?: 'up' | 'bottom'; // Added direction prop
|
||||
}
|
||||
|
||||
export const GroupSelector: React.FC<GroupSelectorProps> = ({
|
||||
groups,
|
||||
selectedGroups,
|
||||
onSelectionChange,
|
||||
showSelectAll = true,
|
||||
placeholder = 'Select group scope',
|
||||
minimal = false,
|
||||
direction = 'bottom'
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [dropdownStyle, setDropdownStyle] = React.useState<React.CSSProperties>({});
|
||||
const [searchTerm, setSearchTerm] = React.useState('');
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOpen && containerRef.current) {
|
||||
const button = containerRef.current.querySelector('button') as HTMLElement;
|
||||
if (button) {
|
||||
const rect = button.getBoundingClientRect();
|
||||
|
||||
// Calculate style based on direction
|
||||
const style: React.CSSProperties = {
|
||||
left: rect.left,
|
||||
width: Math.max(rect.width, 240), // Min width for readability
|
||||
};
|
||||
|
||||
if (direction === 'up') {
|
||||
style.bottom = window.innerHeight - rect.top + 4;
|
||||
style.maxHeight = '320px'; // Increased height for search + list
|
||||
} else {
|
||||
style.top = rect.bottom + 4;
|
||||
style.maxHeight = '320px';
|
||||
}
|
||||
|
||||
setDropdownStyle(style);
|
||||
|
||||
// Auto-focus search input when opening
|
||||
setTimeout(() => searchInputRef.current?.focus(), 50);
|
||||
}
|
||||
} else {
|
||||
setSearchTerm(''); // Reset search on close
|
||||
}
|
||||
}, [isOpen, direction]);
|
||||
|
||||
const filteredGroups = groups.filter(g =>
|
||||
g.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const isAllSelected = selectedGroups.length === 0;
|
||||
|
||||
// Optimized display logic
|
||||
let selectedGroupNames = '';
|
||||
if (selectedGroups.length === 0) {
|
||||
selectedGroupNames = 'All groups';
|
||||
} else if (selectedGroups.length <= 2) {
|
||||
selectedGroupNames = selectedGroups.map(id => groups.find(g => g.id === id)?.name).filter(Boolean).join(', ');
|
||||
} else {
|
||||
selectedGroupNames = `Selected ${selectedGroups.length} groups`;
|
||||
}
|
||||
|
||||
const handleToggleGroup = (groupId: string) => {
|
||||
if (selectedGroups.includes(groupId)) {
|
||||
onSelectionChange(selectedGroups.filter(id => id !== groupId));
|
||||
} else {
|
||||
onSelectionChange([...selectedGroups, groupId]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
onSelectionChange([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`relative ${minimal ? '' : 'w-full'} `} ref={containerRef}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`flex items - center justify - between px - 3 py - 2 bg - white border border - gray - 300 rounded - md text - left focus: outline - none focus: ring - 2 focus: ring - blue - 500 ${minimal ? 'h-9 text-sm min-w-[120px]' : 'w-full'} `}
|
||||
title={selectedGroups.length > 2 ? selectedGroups.map(id => groups.find(g => g.id === id)?.name).join(', ') : undefined}
|
||||
>
|
||||
<span className={`truncate mr - 2 ${selectedGroups.length === 0 ? 'text-gray-500' : 'text-gray-900'} `} style={{ maxWidth: minimal ? '120px' : 'none' }}>
|
||||
{selectedGroupNames || placeholder}
|
||||
</span>
|
||||
<ChevronDown size={14} className={`text - gray - 400 text - xs transition - transform flex - shrink - 0 ${isOpen ? 'rotate-180' : ''} `} />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-[9998]"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
<div className="fixed bg-white border border-gray-300 rounded-lg shadow-xl z-[9999] flex flex-col animate-in fade-in zoom-in-95 duration-100"
|
||||
style={dropdownStyle}>
|
||||
|
||||
{/* Search Box */}
|
||||
<div className="p-2 border-b border-gray-100 shrink-0">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="Search groups..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 bg-gray-50"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto flex-1 p-0">
|
||||
{!searchTerm && showSelectAll && (
|
||||
<div
|
||||
onClick={handleSelectAll}
|
||||
className={`flex items - center px - 3 py - 2 cursor - pointer hover: bg - gray - 50 border - b border - gray - 100 ${isAllSelected ? 'bg-blue-50 text-blue-700' : 'text-gray-700'
|
||||
} `}
|
||||
>
|
||||
<div className={`w - 4 h - 4 mr - 3 border rounded flex items - center justify - center ${isAllSelected ? 'bg-blue-600 border-blue-600' : 'border-gray-300'
|
||||
} `}>
|
||||
{isAllSelected && <Check size={12} className="text-white" />}
|
||||
</div>
|
||||
<span className="font-medium text-sm">All groups</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="py-1">
|
||||
{filteredGroups.map((group) => {
|
||||
const isSelected = selectedGroups.includes(group.id);
|
||||
return (
|
||||
<div
|
||||
key={group.id}
|
||||
onClick={() => handleToggleGroup(group.id)}
|
||||
className={`flex items - center px - 3 py - 2 cursor - pointer hover: bg - gray - 50 transition - colors ${isSelected ? 'bg-blue-50' : ''
|
||||
} `}
|
||||
>
|
||||
<div className={`w - 4 h - 4 mr - 3 border rounded flex items - center justify - center flex - shrink - 0 ${isSelected ? 'bg-blue-600 border-blue-600' : 'border-gray-300'
|
||||
} `}>
|
||||
{isSelected && <Check size={12} className="text-white" />}
|
||||
</div>
|
||||
<div
|
||||
className="w-2.5 h-2.5 rounded-full mr-2 flex-shrink-0"
|
||||
style={{ backgroundColor: group.color }}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text - sm truncate ${isSelected ? 'text-blue-700 font-medium' : 'text-gray-700'} `}>
|
||||
{group.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-400">
|
||||
{group.fileCount} files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredGroups.length === 0 && (
|
||||
<div className="px-3 py-6 text-center text-gray-400 text-xs">
|
||||
{searchTerm ? 'No related groups found' : 'No groups'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { KnowledgeGroup } from '../types';
|
||||
import { SearchHistoryList } from './SearchHistoryList';
|
||||
import { X, History } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface HistoryDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
groups: KnowledgeGroup[];
|
||||
onSelectHistory: (historyId: string) => void;
|
||||
}
|
||||
|
||||
export const HistoryDrawer: React.FC<HistoryDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
groups,
|
||||
onSelectHistory
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
if (!isOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
<div className="absolute inset-y-0 right-0 max-w-md w-full flex">
|
||||
<div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
|
||||
<h2 className="text-lg font-medium text-gray-900 flex items-center gap-2">
|
||||
<History size={20} />
|
||||
{t('historyTitle')}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<SearchHistoryList
|
||||
groups={groups}
|
||||
onSelectHistory={onSelectHistory}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,554 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, FolderInput, ArrowRight, Info, Layers, Clock, Upload, Calendar } from 'lucide-react';
|
||||
import { isExtensionAllowed } from '../constants/fileSupport';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { ModelConfig, ModelType, IndexingConfig, KnowledgeGroup } from '../types';
|
||||
import { modelConfigService } from '../services/modelConfigService';
|
||||
import { knowledgeGroupService } from '../services/knowledgeGroupService';
|
||||
import { apiClient } from '../services/apiClient';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import IndexingModalWithMode from './IndexingModalWithMode';
|
||||
|
||||
interface ImportFolderDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
authToken: string;
|
||||
initialGroupId?: string;
|
||||
initialGroupName?: string;
|
||||
onImportSuccess?: () => void;
|
||||
}
|
||||
|
||||
interface FileWithPath {
|
||||
file: File;
|
||||
relativePath: string;
|
||||
}
|
||||
|
||||
type ImportMode = 'immediate' | 'scheduled';
|
||||
|
||||
export const ImportFolderDrawer: React.FC<ImportFolderDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
authToken,
|
||||
initialGroupId,
|
||||
initialGroupName,
|
||||
onImportSuccess,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showError, showSuccess } = useToast();
|
||||
|
||||
// Tab
|
||||
const [importMode, setImportMode] = useState<ImportMode>('immediate');
|
||||
|
||||
// Immediate mode state
|
||||
const [localFiles, setLocalFiles] = useState<FileWithPath[]>([]);
|
||||
const [folderName, setFolderName] = useState('');
|
||||
const [targetName, setTargetName] = useState('');
|
||||
const [useHierarchy, setUseHierarchy] = useState(false);
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const [isIndexingConfigOpen, setIsIndexingConfigOpen] = useState(false);
|
||||
const [models, setModels] = useState<ModelConfig[]>([]);
|
||||
|
||||
// Scheduled mode state
|
||||
const [serverPath, setServerPath] = useState('');
|
||||
const [scheduledTime, setScheduledTime] = useState(() => {
|
||||
// Default to 30 min from now
|
||||
const d = new Date();
|
||||
d.setMinutes(d.getMinutes() + 30);
|
||||
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
|
||||
return d.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:mm"
|
||||
});
|
||||
const [schedTargetName, setSchedTargetName] = useState('');
|
||||
const [schedUseHierarchy, setSchedUseHierarchy] = useState(false);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [allGroups, setAllGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [parentGroupId, setParentGroupId] = useState<string>('');
|
||||
const [schedParentGroupId, setSchedParentGroupId] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setLocalFiles([]);
|
||||
setFolderName('');
|
||||
setTargetName(initialGroupName || '');
|
||||
setUseHierarchy(false);
|
||||
setIsIndexingConfigOpen(false);
|
||||
setImportMode('immediate');
|
||||
setServerPath('');
|
||||
setSchedTargetName(initialGroupName || '');
|
||||
setSchedUseHierarchy(false);
|
||||
setParentGroupId('');
|
||||
setSchedParentGroupId('');
|
||||
|
||||
// Default scheduled time = 30min from now
|
||||
const d = new Date();
|
||||
d.setMinutes(d.getMinutes() + 30);
|
||||
d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
|
||||
setScheduledTime(d.toISOString().slice(0, 16));
|
||||
|
||||
modelConfigService.getAll(authToken).then(res => {
|
||||
setModels(res.filter(m => m.type === ModelType.EMBEDDING));
|
||||
});
|
||||
|
||||
knowledgeGroupService.getGroups().then(groups => {
|
||||
const flat: any[] = [];
|
||||
function walk(items: any[], depth = 0) {
|
||||
for (const g of items) {
|
||||
flat.push({ ...g, d: depth });
|
||||
if (g.children?.length) walk(g.children, depth + 1);
|
||||
}
|
||||
}
|
||||
walk(groups);
|
||||
setAllGroups(flat);
|
||||
});
|
||||
}
|
||||
}, [isOpen, authToken, initialGroupName]);
|
||||
|
||||
// ---- Immediate mode handlers ----
|
||||
const handleLocalFolderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
const allFiles = Array.from(e.target.files);
|
||||
const files: FileWithPath[] = allFiles
|
||||
.filter(file => {
|
||||
const ext = file.name.split('.').pop() || '';
|
||||
return isExtensionAllowed(ext, 'group');
|
||||
})
|
||||
.map(file => ({
|
||||
file,
|
||||
relativePath: file.webkitRelativePath || file.name,
|
||||
}));
|
||||
|
||||
if (files.length === 0 && allFiles.length > 0) {
|
||||
showError(t('noFilesFound'));
|
||||
return;
|
||||
}
|
||||
setLocalFiles(files);
|
||||
|
||||
const firstPath = allFiles[0].webkitRelativePath;
|
||||
if (firstPath) {
|
||||
const parts = firstPath.split('/');
|
||||
if (parts.length > 0) {
|
||||
const name = parts[0];
|
||||
setFolderName(name);
|
||||
if (!initialGroupId && !targetName) setTargetName(name);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleImmediateNext = () => {
|
||||
if (localFiles.length === 0) {
|
||||
showError(t('clickToSelectFolder'));
|
||||
return;
|
||||
}
|
||||
if (!initialGroupId && !targetName) {
|
||||
showError(t('fillTargetName'));
|
||||
return;
|
||||
}
|
||||
setIsIndexingConfigOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmConfig = async (config: IndexingConfig) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const { uploadService } = await import('../services/uploadService');
|
||||
|
||||
if (useHierarchy) {
|
||||
// Step 1: Determine root group
|
||||
let rootGroupId = initialGroupId ?? null;
|
||||
if (!rootGroupId) {
|
||||
const newGroup = await knowledgeGroupService.createGroup({
|
||||
name: targetName,
|
||||
description: t('importedFromLocalFolder').replace('$1', folderName),
|
||||
parentId: parentGroupId || null,
|
||||
});
|
||||
rootGroupId = newGroup.id;
|
||||
}
|
||||
|
||||
// Step 2: Collect all unique directory paths
|
||||
const dirSet = new Set<string>();
|
||||
for (const { relativePath } of localFiles) {
|
||||
const parts = relativePath.split('/');
|
||||
const dirParts = initialGroupId
|
||||
? parts.slice(1, parts.length - 1)
|
||||
: parts.slice(0, parts.length - 1);
|
||||
for (let i = 1; i <= dirParts.length; i++) {
|
||||
dirSet.add(dirParts.slice(0, i).join('/'));
|
||||
}
|
||||
}
|
||||
|
||||
// Step 3: Sort by depth, create groups sequentially
|
||||
const sortedDirs = Array.from(dirSet).sort((a, b) =>
|
||||
a.split('/').length - b.split('/').length
|
||||
);
|
||||
const dirToGroupId = new Map<string, string>();
|
||||
dirToGroupId.set(initialGroupId ? '' : folderName, rootGroupId);
|
||||
|
||||
for (const dirPath of sortedDirs) {
|
||||
if (!dirPath || dirToGroupId.has(dirPath)) continue;
|
||||
const segments = dirPath.split('/');
|
||||
const segName = segments[segments.length - 1];
|
||||
const parentPath = segments.slice(0, segments.length - 1).join('/');
|
||||
const parentId = dirToGroupId.get(parentPath) ?? rootGroupId;
|
||||
const newGroup = await knowledgeGroupService.createGroup({ name: segName, parentId });
|
||||
dirToGroupId.set(dirPath, newGroup.id);
|
||||
}
|
||||
|
||||
// Step 4: Upload files in parallel batches
|
||||
const BATCH_SIZE = 3;
|
||||
for (let i = 0; i < localFiles.length; i += BATCH_SIZE) {
|
||||
const batch = localFiles.slice(i, i + BATCH_SIZE);
|
||||
await Promise.all(batch.map(async ({ file, relativePath }) => {
|
||||
try {
|
||||
const parts = relativePath.split('/');
|
||||
const dirParts = initialGroupId
|
||||
? parts.slice(1, parts.length - 1)
|
||||
: parts.slice(0, parts.length - 1);
|
||||
const fileDirPath = dirParts.join('/');
|
||||
const targetGroupId = dirToGroupId.get(fileDirPath) ?? rootGroupId!;
|
||||
const uploadedKb = await uploadService.uploadFileWithConfig(file, config, authToken);
|
||||
await knowledgeGroupService.addFileToGroups(uploadedKb.id, [targetGroupId]);
|
||||
} catch (err) {
|
||||
console.error(`Failed to upload ${file.name}:`, err);
|
||||
}
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
// Single-group mode
|
||||
let groupId = initialGroupId ?? null;
|
||||
if (!groupId) {
|
||||
const newGroup = await knowledgeGroupService.createGroup({
|
||||
name: targetName,
|
||||
description: t('importedFromLocalFolder').replace('$1', folderName),
|
||||
});
|
||||
groupId = newGroup.id;
|
||||
}
|
||||
const BATCH_SIZE = 3;
|
||||
for (let i = 0; i < localFiles.length; i += BATCH_SIZE) {
|
||||
const batch = localFiles.slice(i, i + BATCH_SIZE);
|
||||
await Promise.all(batch.map(async ({ file }) => {
|
||||
try {
|
||||
const uploadedKb = await uploadService.uploadFileWithConfig(file, config, authToken);
|
||||
if (groupId) await knowledgeGroupService.addFileToGroups(uploadedKb.id, [groupId]);
|
||||
} catch (err) {
|
||||
console.error(`Failed to upload ${file.name}:`, err);
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess(t('importComplete'));
|
||||
onImportSuccess?.();
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
showError(t('submitFailed', error.message));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsIndexingConfigOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Scheduled mode handler ----
|
||||
const handleScheduledSubmit = async () => {
|
||||
if (!serverPath.trim()) {
|
||||
showError(t('fillServerPath'));
|
||||
return;
|
||||
}
|
||||
if (!initialGroupId && !schedTargetName.trim()) {
|
||||
showError(t('fillTargetName'));
|
||||
return;
|
||||
}
|
||||
|
||||
const scheduledAt = new Date(scheduledTime);
|
||||
if (isNaN(scheduledAt.getTime())) {
|
||||
showError(t('invalidDateTime' as any));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
let finalGroupId = initialGroupId || undefined;
|
||||
if (!finalGroupId && schedTargetName.trim()) {
|
||||
const newGroup = await knowledgeGroupService.createGroup({
|
||||
name: schedTargetName.trim(),
|
||||
description: t('importedFromLocalFolder').replace('$1', schedTargetName.trim()),
|
||||
parentId: schedParentGroupId || null,
|
||||
});
|
||||
finalGroupId = newGroup.id;
|
||||
}
|
||||
|
||||
const defaultModel = models[0];
|
||||
await apiClient.post('/import-tasks', {
|
||||
sourcePath: serverPath.trim(),
|
||||
targetGroupId: finalGroupId,
|
||||
targetGroupName: undefined,
|
||||
embeddingModelId: defaultModel?.id,
|
||||
scheduledAt: scheduledAt.toISOString(),
|
||||
chunkSize: 500,
|
||||
chunkOverlap: 50,
|
||||
mode: 'fast',
|
||||
useHierarchy: schedUseHierarchy,
|
||||
});
|
||||
|
||||
showSuccess(t('scheduleTaskCreated'));
|
||||
onImportSuccess?.();
|
||||
onClose();
|
||||
} catch (error: any) {
|
||||
showError(t('submitFailed', error.message));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 z-50 flex justify-end">
|
||||
<div className="absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
|
||||
<div className="relative w-full max-w-md bg-white shadow-2xl flex flex-col h-full animate-in slide-in-from-right duration-300">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between shrink-0 bg-white">
|
||||
<h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
|
||||
<FolderInput className="w-5 h-5 text-blue-600" />
|
||||
{t('importFolderTitle')}
|
||||
</h2>
|
||||
<button onClick={onClose} className="p-2 -mr-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mode Tabs */}
|
||||
<div className="flex border-b border-slate-100 shrink-0">
|
||||
<button
|
||||
onClick={() => setImportMode('immediate')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-colors border-b-2 ${importMode === 'immediate'
|
||||
? 'border-blue-600 text-blue-600 bg-blue-50/40'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
}`}
|
||||
>
|
||||
<Upload size={15} />
|
||||
{t('importImmediate')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setImportMode('scheduled')}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-colors border-b-2 ${importMode === 'scheduled'
|
||||
? 'border-blue-600 text-blue-600 bg-blue-50/40'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
}`}
|
||||
>
|
||||
<Clock size={15} />
|
||||
{t('importScheduled')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-5">
|
||||
{importMode === 'immediate' ? (
|
||||
<>
|
||||
{/* Immediate: folder picker */}
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="border-2 border-dashed border-slate-200 rounded-xl p-8 flex flex-col items-center justify-center gap-3 cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all group"
|
||||
>
|
||||
<div className="w-12 h-12 bg-slate-50 text-slate-400 rounded-full flex items-center justify-center group-hover:bg-blue-100 group-hover:text-blue-600 transition-colors">
|
||||
<FolderInput size={24} />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-slate-700">
|
||||
{localFiles.length > 0
|
||||
? t('selectedFilesCount').replace('$1', localFiles.length.toString())
|
||||
: t('clickToSelectFolder')}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
{localFiles.length > 0 ? folderName : t('selectFolderTip')}
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleLocalFolderChange}
|
||||
className="hidden"
|
||||
multiple
|
||||
// @ts-ignore
|
||||
webkitdirectory=""
|
||||
directory=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Target group */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700">{t('lblTargetGroup')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={targetName}
|
||||
onChange={e => setTargetName(e.target.value)}
|
||||
disabled={!!initialGroupId}
|
||||
placeholder={t('placeholderNewGroup')}
|
||||
className={`w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none ${initialGroupId ? 'bg-slate-50 text-slate-500' : ''}`}
|
||||
/>
|
||||
{initialGroupId && <p className="text-xs text-slate-400">{t('importToCurrentGroup')}</p>}
|
||||
</div>
|
||||
{!initialGroupId && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700">{t('parentCategory') || 'Parent Category'}</label>
|
||||
<select
|
||||
value={parentGroupId}
|
||||
onChange={e => setParentGroupId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
>
|
||||
<option value="">{t('allGroups' as any) || '-- Root --'}</option>
|
||||
{allGroups.map((g: any) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{'\u00A0'.repeat(g.d * 4)}{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hierarchy toggle */}
|
||||
<HierarchyToggle value={useHierarchy} onChange={setUseHierarchy} t={t} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Scheduled: server path */}
|
||||
<div className="bg-amber-50 border border-amber-100 rounded-lg p-3 text-sm text-amber-800 flex items-start gap-2">
|
||||
<Info className="w-4 h-4 mt-0.5 shrink-0" />
|
||||
<p className="text-xs">{t('scheduledImportTip')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700">{t('lblServerPath')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serverPath}
|
||||
onChange={e => setServerPath(e.target.value)}
|
||||
placeholder={t('placeholderServerPath')}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Target group */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700">{t('lblTargetGroup')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={schedTargetName}
|
||||
onChange={e => setSchedTargetName(e.target.value)}
|
||||
disabled={!!initialGroupId}
|
||||
placeholder={t('placeholderNewGroup')}
|
||||
className={`w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none ${initialGroupId ? 'bg-slate-50 text-slate-500' : ''}`}
|
||||
/>
|
||||
{initialGroupId && <p className="text-xs text-slate-400">{t('importToCurrentGroup')}</p>}
|
||||
</div>
|
||||
{!initialGroupId && (
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700">{t('parentCategory') || 'Parent Category'}</label>
|
||||
<select
|
||||
value={schedParentGroupId}
|
||||
onChange={e => setSchedParentGroupId(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
>
|
||||
<option value="">{t('allGroups' as any) || '-- Root --'}</option>
|
||||
{allGroups.map((g: any) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{'\u00A0'.repeat(g.d * 4)}{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scheduled datetime */}
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-sm font-medium text-slate-700 flex items-center gap-1.5">
|
||||
<Calendar size={14} className="text-blue-500" />
|
||||
{t('lblScheduledTime')}
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={scheduledTime}
|
||||
onChange={e => setScheduledTime(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<p className="text-xs text-slate-400">{t('scheduledTimeHint')}</p>
|
||||
</div>
|
||||
|
||||
{/* Hierarchy toggle */}
|
||||
<HierarchyToggle value={schedUseHierarchy} onChange={setSchedUseHierarchy} t={t} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-slate-100 shrink-0 flex gap-3 bg-slate-50">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-200 rounded-lg transition-colors"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
{importMode === 'immediate' ? (
|
||||
<button
|
||||
onClick={handleImmediateNext}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm flex justify-center items-center gap-2 transition-all"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<span>{isLoading ? t('uploading') : t('nextStep')}</span>
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleScheduledSubmit}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm flex justify-center items-center gap-2 transition-all"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Clock size={16} />
|
||||
<span>{isLoading ? t('uploading') : t('scheduleImport')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Indexing Config Modal (immediate mode only) */}
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingConfigOpen}
|
||||
onClose={() => setIsIndexingConfigOpen(false)}
|
||||
files={[]}
|
||||
embeddingModels={models}
|
||||
defaultEmbeddingId={models.length > 0 ? models[0].id : ''}
|
||||
onConfirm={handleConfirmConfig}
|
||||
isReconfiguring={false}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
/** Reusable hierarchy toggle */
|
||||
const HierarchyToggle: React.FC<{
|
||||
value: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
t: (key: string) => string;
|
||||
}> = ({ value, onChange, t }) => (
|
||||
<label className="flex items-center gap-3 cursor-pointer select-none">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value}
|
||||
onChange={e => onChange(e.target.checked)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`w-10 h-5 rounded-full transition-colors ${value ? 'bg-blue-600' : 'bg-slate-200'}`} />
|
||||
<div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${value ? 'translate-x-5' : ''}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-700 flex items-center gap-1.5">
|
||||
<Layers size={14} className="text-blue-500" />
|
||||
{t('useHierarchyImport')}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{t('useHierarchyImportDesc')}</p>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
@@ -0,0 +1,343 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ModelConfig, RawFile, IndexingConfig } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { Layers, FileText, Database, X, ArrowRight, Files, Info } from 'lucide-react';
|
||||
import { formatBytes } from '../utils/fileUtils';
|
||||
import { chunkConfigService } from '../services/chunkConfigService';
|
||||
|
||||
interface IndexingModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
files: RawFile[];
|
||||
embeddingModels: ModelConfig[];
|
||||
defaultEmbeddingId: string;
|
||||
onConfirm: (config: IndexingConfig) => void;
|
||||
isReconfiguring?: boolean;
|
||||
}
|
||||
|
||||
const IndexingModal: React.FC<IndexingModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
files,
|
||||
embeddingModels,
|
||||
defaultEmbeddingId,
|
||||
onConfirm,
|
||||
isReconfiguring = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showWarning } = useToast();
|
||||
|
||||
// Configuration state
|
||||
const [chunkSize, setChunkSize] = useState(200);
|
||||
const [chunkOverlap, setChunkOverlap] = useState(40);
|
||||
const [selectedEmbedding, setSelectedEmbedding] = useState('');
|
||||
|
||||
// Limit info state
|
||||
const [limits, setLimits] = useState<{
|
||||
maxChunkSize: number;
|
||||
maxOverlapSize: number;
|
||||
defaultChunkSize: number;
|
||||
defaultOverlapSize: number;
|
||||
modelInfo: {
|
||||
name: string;
|
||||
maxInputTokens: number;
|
||||
maxBatchSize: number;
|
||||
expectedDimensions: number;
|
||||
};
|
||||
} | null>(null);
|
||||
|
||||
const [isLoadingLimits, setIsLoadingLimits] = useState(false);
|
||||
|
||||
// Get auth token
|
||||
const getAuthToken = () => {
|
||||
return localStorage.getItem('authToken') || '';
|
||||
};
|
||||
|
||||
// Load config limits when selected model changes
|
||||
useEffect(() => {
|
||||
if (!isOpen || !selectedEmbedding) {
|
||||
setLimits(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadLimits = async () => {
|
||||
setIsLoadingLimits(true);
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
if (!token) return;
|
||||
|
||||
const limitData = await chunkConfigService.getLimits(selectedEmbedding, token);
|
||||
setLimits(limitData);
|
||||
|
||||
// Auto-adjust if current values exceed new limits
|
||||
if (chunkSize > limitData.maxChunkSize) {
|
||||
setChunkSize(limitData.maxChunkSize);
|
||||
showWarning(t('autoAdjustChunk', limitData.maxChunkSize));
|
||||
}
|
||||
if (chunkOverlap > limitData.maxOverlapSize) {
|
||||
setChunkOverlap(limitData.maxOverlapSize);
|
||||
showWarning(t('autoAdjustOverlap', limitData.maxOverlapSize));
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to read configuration limits:', error);
|
||||
showWarning(t('loadLimitsFailed'));
|
||||
} finally {
|
||||
setIsLoadingLimits(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadLimits();
|
||||
}, [isOpen, selectedEmbedding]);
|
||||
|
||||
// Initialize modal
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Set default embedding model
|
||||
const validDefault = embeddingModels.find(m => m.id === defaultEmbeddingId);
|
||||
if (validDefault) {
|
||||
setSelectedEmbedding(defaultEmbeddingId);
|
||||
} else if (embeddingModels.length > 0) {
|
||||
setSelectedEmbedding(embeddingModels[0].id);
|
||||
} else {
|
||||
setSelectedEmbedding('');
|
||||
}
|
||||
|
||||
// Reset to defaults
|
||||
setChunkSize(200);
|
||||
setChunkOverlap(40);
|
||||
}
|
||||
}, [isOpen, defaultEmbeddingId, embeddingModels]);
|
||||
|
||||
// Handle chunk size change
|
||||
const handleChunkSizeChange = (value: number) => {
|
||||
if (limits && value > limits.maxChunkSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxChunkSize));
|
||||
setChunkSize(limits.maxChunkSize);
|
||||
return;
|
||||
}
|
||||
setChunkSize(value);
|
||||
|
||||
// Auto-adjust overlap if it exceeds 50% of new chunk size
|
||||
if (chunkOverlap > value * 0.5) {
|
||||
setChunkOverlap(Math.floor(value * 0.5));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle overlap size change
|
||||
const handleChunkOverlapChange = (value: number) => {
|
||||
if (limits && value > limits.maxOverlapSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxOverlapSize));
|
||||
setChunkOverlap(limits.maxOverlapSize);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it exceeds 50% of chunk size
|
||||
const maxOverlapByRatio = Math.floor(chunkSize * 0.5);
|
||||
if (value > maxOverlapByRatio) {
|
||||
showWarning(t('overlapRatioLimit', maxOverlapByRatio));
|
||||
setChunkOverlap(maxOverlapByRatio);
|
||||
return;
|
||||
}
|
||||
|
||||
setChunkOverlap(value);
|
||||
};
|
||||
|
||||
// Render limits info
|
||||
const renderLimitsInfo = () => {
|
||||
if (!limits || isLoadingLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-blue-50/50 backdrop-blur-sm border border-blue-100 rounded-xl p-4 text-xs">
|
||||
<div className="flex items-center gap-2 mb-2 font-bold text-blue-900">
|
||||
<Info className="w-4 h-4 text-blue-600" />
|
||||
{t('modelLimitsInfo')}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-y-2 gap-x-4 text-slate-600">
|
||||
<div>{t('model')}: <span className="font-semibold text-slate-900">{limits.modelInfo.name}</span></div>
|
||||
<div>{t('maxChunkSize')}: <span className="font-semibold text-slate-900">{limits.maxChunkSize} tokens</span></div>
|
||||
<div>{t('maxOverlapSize')}: <span className="font-semibold text-slate-900">{limits.maxOverlapSize} tokens</span></div>
|
||||
<div>{t('maxBatchSize')}: <span className="font-semibold text-slate-900">{limits.modelInfo.maxBatchSize}</span></div>
|
||||
</div>
|
||||
{limits.modelInfo.maxInputTokens > limits.maxChunkSize && (
|
||||
<div className="mt-2 text-blue-600/80 text-[10px] flex items-center gap-1">
|
||||
<Info size={10} />
|
||||
{t('envLimitWeaker')}: {limits.maxChunkSize} < {limits.modelInfo.maxInputTokens}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 backdrop-blur-md p-4 animate-in fade-in duration-300">
|
||||
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] border border-white/20">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-50 bg-white">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900 flex items-center gap-2.5">
|
||||
<div className="p-2 bg-blue-50 rounded-xl">
|
||||
<Database className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
{isReconfiguring ? t('reconfigureFile') : t('idxModalTitle')}
|
||||
</h2>
|
||||
<p className="text-[13px] text-slate-500 mt-1 ml-12">
|
||||
{isReconfiguring ? t('modifySettings') : t('idxDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl transition-all active:scale-95">
|
||||
<X className="w-5 h-5 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-6">
|
||||
|
||||
{/* Pending Files */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Files className="w-4 h-4 text-slate-500" />
|
||||
{t('idxFiles')}
|
||||
</h3>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto bg-slate-50/50 rounded-xl p-3 border border-slate-100">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="text-xs text-slate-600 flex items-center justify-between py-1.5 px-2 hover:bg-white/80 rounded-lg transition-colors">
|
||||
<span className="truncate flex-1">{file.name}</span>
|
||||
<span className="text-slate-400 ml-2 font-medium">{formatBytes(file.size)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Embedding Model Selection */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Layers className="w-4 h-4 text-slate-500" />
|
||||
{t('idxEmbeddingModel')}
|
||||
</h3>
|
||||
<select
|
||||
className="w-full text-sm border border-slate-100 bg-slate-50/50 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-400 outline-none transition-all cursor-pointer"
|
||||
value={selectedEmbedding}
|
||||
onChange={(e) => setSelectedEmbedding(e.target.value)}
|
||||
>
|
||||
<option value="">{t('pleaseSelect')}</option>
|
||||
{embeddingModels.map(model => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Chunk Configuration */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-slate-500" />
|
||||
{t('idxMethod')}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Chunk Size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkSize')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkSize}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="50"
|
||||
max={limits?.maxChunkSize || 8191}
|
||||
value={chunkSize}
|
||||
onChange={(e) => handleChunkSizeChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: 50</span>
|
||||
<span>{t('max')}: {limits?.maxChunkSize || '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlap Size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkOverlap')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkOverlap}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={limits?.maxOverlapSize || 200}
|
||||
value={chunkOverlap}
|
||||
onChange={(e) => handleChunkOverlapChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: 0</span>
|
||||
<span>{t('max')}: {limits?.maxOverlapSize || '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Limits Info */}
|
||||
{renderLimitsInfo()}
|
||||
|
||||
{/* Optimization Tips */}
|
||||
{limits && (
|
||||
<div className="bg-amber-50/50 backdrop-blur-sm border border-amber-100 rounded-xl p-4 text-xs text-amber-900">
|
||||
<p className="font-bold mb-2 flex items-center gap-1.5">
|
||||
<span className="text-amber-500">💡</span>
|
||||
{t('optimizationTips')}
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1.5 text-[11px] text-amber-800/80">
|
||||
{chunkSize > 800 && <li>{t('tipChunkTooLarge')}</li>}
|
||||
{chunkOverlap < chunkSize * 0.1 && <li>{t('tipOverlapSmall').replace('$1', String(Math.floor(chunkSize * 0.1)))}</li>}
|
||||
{chunkSize === limits.maxChunkSize && <li>{t('tipMaxValues')}</li>}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons */}
|
||||
<div className="p-6 border-t border-slate-50 bg-white flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-50 rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
{t('idxCancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (!selectedEmbedding) {
|
||||
showWarning(t('selectEmbeddingFirst'));
|
||||
return;
|
||||
}
|
||||
onConfirm({
|
||||
chunkSize,
|
||||
chunkOverlap,
|
||||
embeddingModelId: selectedEmbedding
|
||||
});
|
||||
}}
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
className="px-8 py-2.5 text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-200 flex items-center gap-2 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
{t('idxStart')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexingModal;
|
||||
@@ -0,0 +1,576 @@
|
||||
/**
|
||||
* Processing mode selection (Fast/Precise) support
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { ModelConfig, RawFile, IndexingConfig } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { Layers, FileText, Database, X, ArrowRight, Files, Info, Zap, Target, AlertTriangle, Clock, DollarSign } from 'lucide-react';
|
||||
import { formatBytes } from '../utils/fileUtils';
|
||||
import { chunkConfigService } from '../services/chunkConfigService';
|
||||
import { uploadService } from '../services/uploadService';
|
||||
|
||||
interface IndexingModalWithModeProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
files?: RawFile[];
|
||||
embeddingModels: ModelConfig[];
|
||||
defaultEmbeddingId: string;
|
||||
onConfirm: (config: IndexingConfig) => void;
|
||||
authToken?: string;
|
||||
isReconfiguring?: boolean;
|
||||
}
|
||||
|
||||
const IndexingModalWithMode: React.FC<IndexingModalWithModeProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
files = [],
|
||||
embeddingModels,
|
||||
defaultEmbeddingId,
|
||||
onConfirm,
|
||||
authToken,
|
||||
isReconfiguring = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showWarning, showInfo } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
|
||||
// Configuration state
|
||||
const [chunkSize, setChunkSize] = useState(200);
|
||||
const [chunkOverlap, setChunkOverlap] = useState(40);
|
||||
const [selectedEmbedding, setSelectedEmbedding] = useState('');
|
||||
const [mode, setMode] = useState<'fast' | 'precise'>('fast');
|
||||
const [userSelectedMode, setUserSelectedMode] = useState(false); // Track if user manually selected mode
|
||||
|
||||
// Mode recommendation info
|
||||
const [modeRecommendation, setModeRecommendation] = useState<any>(null);
|
||||
const [isLoadingRecommendation, setIsLoadingRecommendation] = useState(false);
|
||||
|
||||
// Limit info state
|
||||
const [limits, setLimits] = useState<{
|
||||
maxChunkSize: number;
|
||||
maxOverlapSize: number;
|
||||
minOverlapSize: number;
|
||||
defaultChunkSize: number;
|
||||
defaultOverlapSize: number;
|
||||
modelInfo: {
|
||||
name: string;
|
||||
maxInputTokens: number;
|
||||
maxBatchSize: number;
|
||||
expectedDimensions: number;
|
||||
};
|
||||
} | null>(null);
|
||||
|
||||
const [isLoadingLimits, setIsLoadingLimits] = useState(false);
|
||||
|
||||
// Get auth token
|
||||
const getAuthToken = () => {
|
||||
return authToken || localStorage.getItem('kb_api_key') || '';
|
||||
};
|
||||
|
||||
// Load mode recommendation when files change
|
||||
useEffect(() => {
|
||||
if (!isOpen || !files || files.length === 0) return;
|
||||
|
||||
const loadRecommendation = async () => {
|
||||
setIsLoadingRecommendation(true);
|
||||
try {
|
||||
// Use first file for recommendation (assume similar types)
|
||||
const file = files[0];
|
||||
const rec = await uploadService.recommendMode(file.file);
|
||||
setModeRecommendation(rec);
|
||||
|
||||
// Auto-select recommended mode if user hasn't manually selected one
|
||||
if (!isReconfiguring && !userSelectedMode) {
|
||||
setMode(rec.recommendedMode);
|
||||
showInfo(t('recommendationMsg', rec.recommendedMode === 'precise' ? t('preciseMode') : t('fastMode'), t(rec.reason, ...(rec.reasonArgs || []))));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get mode recommendation:', error);
|
||||
} finally {
|
||||
setIsLoadingRecommendation(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadRecommendation();
|
||||
}, [isOpen, files, isReconfiguring]);
|
||||
|
||||
// Load config limits when selected model changes
|
||||
useEffect(() => {
|
||||
if (!isOpen || !selectedEmbedding) {
|
||||
setLimits(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadLimits = async () => {
|
||||
setIsLoadingLimits(true);
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
if (!token) return;
|
||||
|
||||
const limitData = await chunkConfigService.getLimits(selectedEmbedding, token);
|
||||
setLimits(limitData);
|
||||
|
||||
// Auto-adjust if current values exceed new limits
|
||||
if (chunkSize > limitData.maxChunkSize) {
|
||||
setChunkSize(limitData.maxChunkSize);
|
||||
showWarning(t('autoAdjustChunk', limitData.maxChunkSize));
|
||||
}
|
||||
if (chunkOverlap > limitData.maxOverlapSize) {
|
||||
setChunkOverlap(limitData.maxOverlapSize);
|
||||
showWarning(t('autoAdjustOverlap', limitData.maxOverlapSize));
|
||||
}
|
||||
if (chunkOverlap < limitData.minOverlapSize) {
|
||||
setChunkOverlap(limitData.minOverlapSize);
|
||||
// Only show warning if it was manually set below the new minimum
|
||||
if (chunkOverlap < limitData.minOverlapSize) {
|
||||
showWarning(t('autoAdjustOverlapMin', limitData.minOverlapSize));
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to read configuration limits:', error);
|
||||
showWarning(t('loadLimitsFailed'));
|
||||
} finally {
|
||||
setIsLoadingLimits(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadLimits();
|
||||
}, [isOpen, selectedEmbedding]);
|
||||
|
||||
// Track isOpen state change, reset only on open
|
||||
const [prevOpen, setPrevOpen] = useState(false);
|
||||
|
||||
// Initialize modal
|
||||
useEffect(() => {
|
||||
if (isOpen && !prevOpen) {
|
||||
// Execute initialization only when going from closed to open
|
||||
console.log('DEBUG: IndexingModalWithMode opening, files:', files);
|
||||
|
||||
// Set default embedding model
|
||||
const enabledModels = embeddingModels.filter(m => m.isEnabled !== false);
|
||||
const validDefault = enabledModels.find(m => m.id === defaultEmbeddingId);
|
||||
|
||||
if (validDefault) {
|
||||
setSelectedEmbedding(defaultEmbeddingId);
|
||||
} else if (enabledModels.length > 0) {
|
||||
setSelectedEmbedding(enabledModels[0].id);
|
||||
} else {
|
||||
setSelectedEmbedding('');
|
||||
}
|
||||
|
||||
// Reset to defaults
|
||||
setChunkSize(200);
|
||||
setChunkOverlap(40);
|
||||
if (!isReconfiguring) {
|
||||
setMode('fast');
|
||||
setUserSelectedMode(false); // Reset user selection status
|
||||
}
|
||||
setModeRecommendation(null);
|
||||
}
|
||||
|
||||
setPrevOpen(isOpen);
|
||||
}, [isOpen, prevOpen, defaultEmbeddingId, embeddingModels, isReconfiguring]);
|
||||
|
||||
// Handle chunk size change
|
||||
const handleChunkSizeChange = (value: number) => {
|
||||
if (limits && value > limits.maxChunkSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxChunkSize));
|
||||
setChunkSize(limits.maxChunkSize);
|
||||
return;
|
||||
}
|
||||
setChunkSize(value);
|
||||
|
||||
// Auto-adjust overlap if it exceeds 50% of new chunk size
|
||||
if (chunkOverlap > value * 0.5) {
|
||||
setChunkOverlap(Math.floor(value * 0.5));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle overlap size change
|
||||
const handleChunkOverlapChange = (value: number) => {
|
||||
if (limits && value > limits.maxOverlapSize) {
|
||||
showWarning(t('maxValueMsg', limits.maxOverlapSize));
|
||||
setChunkOverlap(limits.maxOverlapSize);
|
||||
return;
|
||||
}
|
||||
|
||||
if (limits && value < limits.minOverlapSize) {
|
||||
// Don't show warning here, just set to min if they slide too low
|
||||
setChunkOverlap(limits.minOverlapSize);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if it exceeds 50% of chunk size
|
||||
const maxOverlapByRatio = Math.floor(chunkSize * 0.5);
|
||||
if (value > maxOverlapByRatio) {
|
||||
showWarning(t('overlapRatioLimit', maxOverlapByRatio));
|
||||
setChunkOverlap(maxOverlapByRatio);
|
||||
return;
|
||||
}
|
||||
|
||||
setChunkOverlap(value);
|
||||
};
|
||||
|
||||
// Render limits info
|
||||
const renderLimitsInfo = () => {
|
||||
if (!limits || isLoadingLimits) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-blue-50/50 backdrop-blur-sm border border-blue-100 rounded-xl p-4 text-xs mt-2">
|
||||
<div className="flex items-center gap-2 mb-2 font-bold text-blue-900">
|
||||
<Info className="w-4 h-4 text-blue-600" />
|
||||
{t('modelLimitsInfo')}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-y-2 gap-x-4 text-slate-600">
|
||||
<div>{t('model')}: <span className="font-semibold text-slate-900">{limits.modelInfo.name}</span></div>
|
||||
<div>{t('maxChunkSize')}: <span className="font-semibold text-slate-900">{limits.maxChunkSize} tokens</span></div>
|
||||
<div>{t('maxOverlapSize')}: <span className="font-semibold text-slate-900">{limits.maxOverlapSize} tokens</span></div>
|
||||
<div>{t('maxBatchSize')}: <span className="font-semibold text-slate-900">{limits.modelInfo.maxBatchSize}</span></div>
|
||||
</div>
|
||||
{limits.modelInfo.maxInputTokens > limits.maxChunkSize && (
|
||||
<div className="mt-2 text-blue-600/80 text-[10px] flex items-center gap-1">
|
||||
<Info size={10} />
|
||||
{t('envLimitWeaker')}: {limits.maxChunkSize} < {limits.modelInfo.maxInputTokens}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render mode recommendation info
|
||||
const renderModeRecommendation = () => {
|
||||
if (!modeRecommendation || isLoadingRecommendation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2 p-4 bg-purple-50/50 backdrop-blur-sm border border-purple-100 rounded-xl text-xs">
|
||||
<div className="font-bold text-purple-900 flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-purple-600" />
|
||||
{t('processingMode')}
|
||||
</div>
|
||||
<div className="text-slate-600">
|
||||
<strong className="text-purple-900/70">{t('recommendationReason')}:</strong> {t(modeRecommendation.reason, ...(modeRecommendation.reasonArgs || []))}
|
||||
</div>
|
||||
{modeRecommendation.warnings && modeRecommendation.warnings.length > 0 && (
|
||||
<div className="mt-2 space-y-1.5 border-t border-purple-100 pt-2">
|
||||
{modeRecommendation.warnings.map((warning: string, idx: number) => (
|
||||
<div key={idx} className="text-purple-800/80 flex items-start gap-1.5 leading-relaxed">
|
||||
<AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-purple-500" />
|
||||
<span>{t(warning as any)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render current mode description
|
||||
const renderModeDescription = () => {
|
||||
if (mode === 'fast') {
|
||||
return (
|
||||
<div className="text-xs text-slate-600 bg-slate-50/50 p-3 rounded-xl border border-slate-100">
|
||||
<div className="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
||||
<Zap className="w-4 h-4 text-yellow-500" />
|
||||
{t('fastModeFeatures')}
|
||||
</div>
|
||||
<ul className="grid grid-cols-1 gap-1.5 text-[11px] text-slate-500">
|
||||
{['fastFeature1', 'fastFeature2', 'fastFeature3', 'fastFeature4', 'fastFeature5'].map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-2 before:content-[''] before:w-1 before:h-1 before:bg-slate-300 before:rounded-full">
|
||||
{t(feature as any)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-xs text-slate-600 bg-slate-50/50 p-3 rounded-xl border border-slate-100">
|
||||
<div className="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-blue-600" />
|
||||
{t('preciseModeFeatures')}
|
||||
</div>
|
||||
<ul className="grid grid-cols-1 gap-1.5 text-[11px] text-slate-500">
|
||||
{['preciseFeature1', 'preciseFeature2', 'preciseFeature3', 'preciseFeature4', 'preciseFeature5', 'preciseFeature6'].map((feature) => (
|
||||
<li key={feature} className="flex items-center gap-2 before:content-[''] before:w-1 before:h-1 before:bg-slate-300 before:rounded-full">
|
||||
{t(feature as any)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-md transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="fixed right-0 top-0 h-full w-full max-w-lg bg-white shadow-2xl z-[101] transform transition-transform duration-500 ease-out animate-in slide-in-from-right flex flex-col border-l border-slate-50">
|
||||
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-50 bg-white shrink-0">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900 flex items-center gap-2.5">
|
||||
<div className="p-2 bg-blue-50 rounded-xl">
|
||||
<Database className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
{isReconfiguring ? t('reconfigureTitle') : t('indexingConfigTitle')}
|
||||
</h2>
|
||||
<p className="text-[13px] text-slate-500 mt-1 ml-12">
|
||||
{isReconfiguring ? t('reconfigureDesc') : t('indexingConfigDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
className="p-2 hover:bg-slate-100 rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
<X className="w-5 h-5 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-6">
|
||||
|
||||
{/* Pending files - only show when there are files */}
|
||||
{files && files.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Files className="w-4 h-4 text-slate-500" />
|
||||
{t('pendingFiles')}
|
||||
</h3>
|
||||
<div className="space-y-1 max-h-32 overflow-y-auto bg-slate-50/50 rounded-xl p-3 border border-slate-100">
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className="text-xs text-slate-600 flex items-center justify-between py-1.5 px-2 hover:bg-white/80 rounded-lg transition-colors">
|
||||
<span className="truncate flex-1">{file.name}</span>
|
||||
<span className="text-slate-400 ml-2 font-medium">{formatBytes(file.size)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Processing mode selection */}
|
||||
{!isReconfiguring && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-slate-500" />
|
||||
{t('processingMode')}
|
||||
{isLoadingRecommendation && <span className="text-xs text-blue-600 ml-2">{t('analyzingFile')}</span>}
|
||||
</h3>
|
||||
|
||||
{/* Mode recommendation info */}
|
||||
{renderModeRecommendation()}
|
||||
|
||||
{/* Mode selection */}
|
||||
<div className="grid grid-cols-2 gap-3 mt-3">
|
||||
{/* Fast Mode */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setMode('fast');
|
||||
setUserSelectedMode(true); // Mark manual selection by user
|
||||
}}
|
||||
className={`relative p-3 rounded-lg border-2 text-left transition-all ${mode === 'fast'
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Zap className="w-4 h-4 text-yellow-600" />
|
||||
<span className="font-semibold text-sm">{t('fastMode')}</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-600 leading-relaxed">
|
||||
{t('fastModeDesc')}
|
||||
</div>
|
||||
{mode === 'fast' && (
|
||||
<div className="absolute top-2 right-2 text-blue-600">
|
||||
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Precise Mode */}
|
||||
<button
|
||||
onClick={() => {
|
||||
setMode('precise');
|
||||
setUserSelectedMode(true); // Mark manual selection by user
|
||||
}}
|
||||
className={`relative p-3 rounded-lg border-2 text-left transition-all ${mode === 'precise'
|
||||
? 'border-purple-500 bg-purple-50'
|
||||
: 'border-slate-200 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Target className="w-4 h-4 text-purple-600" />
|
||||
<span className="font-semibold text-sm">{t('preciseMode')}</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-600 leading-relaxed">
|
||||
{t('preciseModeDesc')}
|
||||
</div>
|
||||
{mode === 'precise' && (
|
||||
<div className="absolute top-2 right-2 text-purple-600">
|
||||
<div className="w-2 h-2 bg-purple-600 rounded-full"></div>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mode description */}
|
||||
<div className="mt-3">
|
||||
{renderModeDescription()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Embedding model selection */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<Layers className="w-4 h-4 text-slate-500" />
|
||||
{t('embeddingModel')}
|
||||
</h3>
|
||||
<select
|
||||
className="w-full text-sm border border-slate-100 bg-slate-50/50 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-400 outline-none transition-all cursor-pointer"
|
||||
value={selectedEmbedding}
|
||||
onChange={(e) => setSelectedEmbedding(e.target.value)}
|
||||
>
|
||||
<option value="">{t('pleaseSelect')}</option>
|
||||
{embeddingModels.filter(m => m.isEnabled !== false).map(model => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Chunk config */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-slate-500" />
|
||||
{t('chunkConfig')}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Chunk size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkSize')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkSize}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="50"
|
||||
max={limits?.maxChunkSize || 8191}
|
||||
value={chunkSize}
|
||||
onChange={(e) => handleChunkSizeChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: 50</span>
|
||||
<span>{t('max')}: {limits?.maxChunkSize || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlap size */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-1 text-xs">
|
||||
<span className="text-slate-600">{t('chunkOverlap')}</span>
|
||||
<span className="font-mono font-semibold text-blue-600">{chunkOverlap}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={limits?.minOverlapSize || 25}
|
||||
max={limits?.maxOverlapSize || 200}
|
||||
value={chunkOverlap}
|
||||
onChange={(e) => handleChunkOverlapChange(Number(e.target.value))}
|
||||
className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
||||
disabled={!selectedEmbedding || isLoadingLimits}
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-slate-400 mt-1">
|
||||
<span>{t('min')}: {limits?.minOverlapSize || 25}</span>
|
||||
<span>{t('max')}: {limits?.maxOverlapSize || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isReconfiguring && renderLimitsInfo()}
|
||||
|
||||
{/* Optimization tips */}
|
||||
{limits && (
|
||||
<div className="bg-amber-50/50 backdrop-blur-sm border border-amber-100 rounded-xl p-4 text-xs text-amber-900">
|
||||
<p className="font-bold mb-2 flex items-center gap-1.5">
|
||||
<span className="text-amber-500">💡</span>
|
||||
{t('optimizationTips')}
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1.5 text-[11px] text-amber-800/80">
|
||||
{chunkSize > 800 && <li>{t('tipChunkTooLarge')}</li>}
|
||||
{chunkOverlap < chunkSize * 0.1 && <li>{t('tipOverlapSmall').replace('$1', `${Math.floor(chunkSize * 0.1)}`)}</li>}
|
||||
{chunkSize === limits.maxChunkSize && <li>{t('tipMaxValues')}</li>}
|
||||
{mode === 'precise' && <li>{t('tipPreciseCost')}</li>}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Footer buttons */}
|
||||
<div className="p-6 border-t border-slate-50 bg-white flex justify-end gap-3 shrink-0">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
className="px-6 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-50 rounded-xl transition-all active:scale-95"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (!selectedEmbedding) {
|
||||
showWarning(t('selectEmbeddingFirst'));
|
||||
return;
|
||||
}
|
||||
if (!isReconfiguring && mode === 'precise') {
|
||||
// Precise mode confirmation
|
||||
if (!(await confirm(t('confirmPreciseCost')))) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
onConfirm({
|
||||
chunkSize,
|
||||
chunkOverlap,
|
||||
embeddingModelId: selectedEmbedding,
|
||||
mode,
|
||||
});
|
||||
}}
|
||||
disabled={isLoadingLimits}
|
||||
className="px-8 py-2.5 text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-200 flex items-center gap-2 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
{t('startProcessing')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexingModalWithMode;
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { X, Check } from 'lucide-react';
|
||||
|
||||
interface InputDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
onSubmit: (value: string) => void;
|
||||
placeholder?: string;
|
||||
defaultValue?: string;
|
||||
submitLabel?: string;
|
||||
}
|
||||
|
||||
export const InputDrawer: React.FC<InputDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
onSubmit,
|
||||
placeholder = '',
|
||||
defaultValue = '',
|
||||
submitLabel = 'Confirm'
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setValue(defaultValue);
|
||||
setTimeout(() => {
|
||||
inputRef.current?.focus();
|
||||
}, 50);
|
||||
}
|
||||
}, [isOpen, defaultValue]);
|
||||
|
||||
const handleSubmit = (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (value.trim()) {
|
||||
onSubmit(value.trim());
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
<div className="absolute inset-y-0 right-0 max-w-sm w-full flex pointer-events-none">
|
||||
{/* pointer-events-none on wrapper, auto on content to allow closing by clicking left side */}
|
||||
<div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300 pointer-events-auto">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
|
||||
<h2 className="text-lg font-medium text-gray-900">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 flex-1 flex flex-col">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{title}
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
||||
/>
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!value.trim()}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { ShieldCheck, ArrowRight } from 'lucide-react';
|
||||
import { authService } from '../services/authService';
|
||||
|
||||
interface LoginPageProps {
|
||||
onLoginSuccess: (token: string) => void;
|
||||
}
|
||||
|
||||
const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
|
||||
const { t } = useLanguage();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!username.trim() || !password.trim()) {
|
||||
setError(t('loginError'));
|
||||
return;
|
||||
}
|
||||
setError('');
|
||||
try {
|
||||
const response = await authService.login(username, password);
|
||||
onLoginSuccess(response.access_token);
|
||||
} catch (err) {
|
||||
setError(err.message || 'Login failed.');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
|
||||
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
|
||||
<ShieldCheck className="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold text-slate-900 text-center mb-2">
|
||||
{t('loginTitle')}
|
||||
</h1>
|
||||
<p className="text-slate-500 text-center mb-8">
|
||||
{t('loginDesc')}
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
||||
placeholder={t('usernamePlaceholder') || 'Username'}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
setError('');
|
||||
}}
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
||||
placeholder={t('passwordPlaceholder') || 'Password'}
|
||||
/>
|
||||
{error && <p className="text-red-500 text-sm mt-1 ml-1">{error}</p>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg flex items-center justify-center gap-2 transition-transform active:scale-95"
|
||||
>
|
||||
{t('loginButton')}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-xs text-slate-400">
|
||||
Authorized Personnel Only
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
interface LogoProps {
|
||||
className?: string;
|
||||
size?: number;
|
||||
withText?: boolean;
|
||||
textClassName?: string;
|
||||
}
|
||||
|
||||
export const Logo: React.FC<LogoProps> = ({ className = '', size = 32, withText = false, textClassName = '' }) => {
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className}`}>
|
||||
<div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
|
||||
{/* Glow effect */}
|
||||
<div className="absolute inset-0 bg-blue-500/30 blur-xl rounded-full" />
|
||||
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="relative z-10"
|
||||
>
|
||||
<rect width="40" height="40" rx="12" fill="url(#logo-gradient)" />
|
||||
<path
|
||||
d="M20 10C20 10 24 18 28 20C24 22 20 30 20 30C20 30 16 22 12 20C16 18 20 10 20 10Z"
|
||||
fill="white"
|
||||
className="drop-shadow-sm"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="logo-gradient" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#2563EB" /> {/* Blue 600 */}
|
||||
<stop offset="50%" stopColor="#4F46E5" /> {/* Indigo 600 */}
|
||||
<stop offset="100%" stopColor="#7C3AED" /> {/* Violet 600 */}
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{withText && (
|
||||
<span className={`font-bold text-xl tracking-tight bg-gradient-to-r from-blue-400 to-indigo-300 bg-clip-text text-transparent ${textClassName}`}>
|
||||
AuraK
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* Processing mode selection component
|
||||
* Used to select fast or precise mode when uploading files
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { uploadService } from '../services/uploadService';
|
||||
import { ModeRecommendation } from '../types';
|
||||
|
||||
interface ModeSelectorProps {
|
||||
file: File | null;
|
||||
onModeChange: (mode: 'fast' | 'precise') => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ModeSelector: React.FC<ModeSelectorProps> = ({
|
||||
file,
|
||||
onModeChange,
|
||||
className = '',
|
||||
}) => {
|
||||
const [selectedMode, setSelectedMode] = useState<'fast' | 'precise'>('fast');
|
||||
const [recommendation, setRecommendation] = useState<ModeRecommendation | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (file) {
|
||||
loadRecommendation();
|
||||
} else {
|
||||
setRecommendation(null);
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
const loadRecommendation = async () => {
|
||||
if (!file) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const rec = await uploadService.recommendMode(file);
|
||||
setRecommendation(rec);
|
||||
|
||||
// Automatically select recommended mode
|
||||
setSelectedMode(rec.recommendedMode);
|
||||
onModeChange(rec.recommendedMode);
|
||||
} catch (error) {
|
||||
console.error('Failed to get mode recommendation:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModeChange = (mode: 'fast' | 'precise') => {
|
||||
setSelectedMode(mode);
|
||||
onModeChange(mode);
|
||||
};
|
||||
|
||||
if (!file) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`mode-selector ${className}`}>
|
||||
<div className="mode-selector-header">
|
||||
<h4>Select processing mode</h4>
|
||||
{loading && <span className="loading">Analyzing...</span>}
|
||||
</div>
|
||||
|
||||
{/* Mode recommendation info */}
|
||||
{recommendation && (
|
||||
<div className="recommendation-info">
|
||||
<div className="reason">
|
||||
<strong>Recommended:</strong> {recommendation.reason}
|
||||
</div>
|
||||
|
||||
{recommendation.warnings && recommendation.warnings.length > 0 && (
|
||||
<div className="warnings">
|
||||
{recommendation.warnings.map((warning, idx) => (
|
||||
<div key={idx} className="warning-item">
|
||||
⚠️ {warning}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mode selection */}
|
||||
<div className="mode-options">
|
||||
<label className={`mode-option ${selectedMode === 'fast' ? 'selected' : ''}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="processing-mode"
|
||||
value="fast"
|
||||
checked={selectedMode === 'fast'}
|
||||
onChange={() => handleModeChange('fast')}
|
||||
/>
|
||||
<div className="mode-content">
|
||||
<div className="mode-title">⚡ Fast Mode</div>
|
||||
<div className="mode-desc">
|
||||
Simple text extraction, fast, ideal for plain text documents
|
||||
</div>
|
||||
<div className="mode-benefits">
|
||||
✅ Fast<br />
|
||||
✅ No additional cost<br />
|
||||
❌ Processes text information only
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className={`mode-option ${selectedMode === 'precise' ? 'selected' : ''}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="processing-mode"
|
||||
value="precise"
|
||||
checked={selectedMode === 'precise'}
|
||||
onChange={() => handleModeChange('precise')}
|
||||
/>
|
||||
<div className="mode-content">
|
||||
<div className="mode-title">🎯 Precise Mode</div>
|
||||
<div className="mode-desc">
|
||||
Accurately recognizes content and retains full information
|
||||
</div>
|
||||
<div className="mode-benefits">
|
||||
✅ Recognizes images/tables<br />
|
||||
✅ Retains layout information<br />
|
||||
✅ Mixed image and text content<br />
|
||||
⚠️ API cost required<br />
|
||||
⚠️ Long processing time
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.mode-selector {
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.mode-selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mode-selector-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #1890ff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.recommendation-info {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.recommendation-info .reason {
|
||||
margin-bottom: 8px;
|
||||
color: #0050b3;
|
||||
}
|
||||
|
||||
.warnings {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #91d5ff;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
color: #d4380d;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.mode-options {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mode-option {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: 2px solid #d9d9d9;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.mode-option:hover {
|
||||
border-color: #1890ff;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.mode-option.selected {
|
||||
border-color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
.mode-option input[type="radio"] {
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mode-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mode-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mode-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mode-benefits {
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mode-options {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Upload as UploadIcon, FileText, Image as ImageIcon, Folder, FileUp, ShieldCheck } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { GROUP_ALLOWED_EXTENSIONS, IMAGE_MIME_TYPES } from '../constants/fileSupport';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
interface NotebookDragDropUploadProps {
|
||||
onFilesSelected: (files: FileList) => void;
|
||||
isAdmin: boolean;
|
||||
globalMode?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const NotebookDragDropUpload: React.FC<NotebookDragDropUploadProps> = ({ onFilesSelected, isAdmin, globalMode = false, children }) => {
|
||||
const { t } = useLanguage();
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
setIsDragging(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
onFilesSelected(e.dataTransfer.files);
|
||||
e.dataTransfer.clearData();
|
||||
}
|
||||
}, [onFilesSelected]);
|
||||
|
||||
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
onFilesSelected(e.target.files);
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAdmin) return <>{children}</>;
|
||||
|
||||
return (
|
||||
<div className="relative h-full flex flex-col">
|
||||
<AnimatePresence>
|
||||
{isDragging && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 z-[100] bg-blue-600/10 backdrop-blur-sm flex items-center justify-center p-8 pointer-events-none"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="bg-white rounded-[2rem] p-10 text-center shadow-2xl border border-blue-100 flex flex-col items-center gap-6"
|
||||
>
|
||||
<div className="w-16 h-16 bg-blue-600 text-white rounded-2xl flex items-center justify-center animate-bounce">
|
||||
<FileUp size={32} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-xl font-bold text-slate-900">Ingest into Group</h3>
|
||||
<p className="text-slate-500 font-medium text-sm">Release to start processing</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div
|
||||
className="flex-1 flex flex-col"
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleFileInput}
|
||||
className="hidden"
|
||||
id="notebook-file-upload-input"
|
||||
accept={GROUP_ALLOWED_EXTENSIONS.map(ext => `.${ext}`).join(',') + ',' + IMAGE_MIME_TYPES.join(',')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useLayoutEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { GROUP_ALLOWED_EXTENSIONS } from '../constants/fileSupport';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { FileUp, ShieldCheck, FileText, Image as ImageIcon } from 'lucide-react';
|
||||
|
||||
interface NotebookGlobalDragDropProps {
|
||||
onFilesSelected: (files: FileList) => void;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
let isNotebookDragDropEnabled = true;
|
||||
let notebookForceHideCallback: (() => void) | null = null;
|
||||
|
||||
export const setNotebookDragDropEnabled = (enabled: boolean) => {
|
||||
isNotebookDragDropEnabled = enabled;
|
||||
if (!enabled && notebookForceHideCallback) {
|
||||
notebookForceHideCallback();
|
||||
}
|
||||
};
|
||||
|
||||
export const NotebookGlobalDragDropOverlay: React.FC<NotebookGlobalDragDropProps> = ({ onFilesSelected, isAdmin }) => {
|
||||
const { t } = useLanguage();
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const dragCounterRef = useRef(0);
|
||||
const isDragActiveRef = useRef(false);
|
||||
|
||||
const hasFiles = useCallback((dt: DataTransfer | null) => {
|
||||
if (!dt) return false;
|
||||
const hasFileType = dt.types && dt.types.includes('Files');
|
||||
if (!hasFileType) return false;
|
||||
if (dt.items && dt.items.length > 0) {
|
||||
for (let i = 0; i < dt.items.length; i++) {
|
||||
if (dt.items[i].kind === 'file') return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return hasFileType;
|
||||
}, []);
|
||||
|
||||
const handleDragEnter = useCallback((e: DragEvent) => {
|
||||
if (!isNotebookDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current++;
|
||||
if (dragCounterRef.current === 1) {
|
||||
setIsVisible(true);
|
||||
isDragActiveRef.current = true;
|
||||
}
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDragOver = useCallback((e: DragEvent) => {
|
||||
if (!isNotebookDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.dataTransfer!.dropEffect = 'copy';
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDragLeave = useCallback((e: DragEvent) => {
|
||||
if (!isNotebookDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
|
||||
if (dragCounterRef.current === 0 && isDragActiveRef.current) {
|
||||
setIsVisible(false);
|
||||
isDragActiveRef.current = false;
|
||||
}
|
||||
}, [hasFiles]);
|
||||
|
||||
const handleDrop = useCallback((e: DragEvent) => {
|
||||
if (!isNotebookDragDropEnabled || !hasFiles(e.dataTransfer)) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
dragCounterRef.current = 0;
|
||||
setIsVisible(false);
|
||||
isDragActiveRef.current = false;
|
||||
if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
|
||||
onFilesSelected(e.dataTransfer.files);
|
||||
}
|
||||
}, [hasFiles, onFilesSelected]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isAdmin) return;
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
notebookForceHideCallback = () => {
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
setIsVisible(false);
|
||||
};
|
||||
document.addEventListener('dragenter', handleDragEnter);
|
||||
document.addEventListener('dragover', handleDragOver);
|
||||
document.addEventListener('dragleave', handleDragLeave);
|
||||
document.addEventListener('drop', handleDrop);
|
||||
return () => {
|
||||
document.removeEventListener('dragenter', handleDragEnter);
|
||||
document.removeEventListener('dragover', handleDragOver);
|
||||
document.removeEventListener('dragleave', handleDragLeave);
|
||||
document.removeEventListener('drop', handleDrop);
|
||||
notebookForceHideCallback = null;
|
||||
dragCounterRef.current = 0;
|
||||
isDragActiveRef.current = false;
|
||||
setIsVisible(false);
|
||||
};
|
||||
}, [isAdmin, handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);
|
||||
|
||||
if (!isAdmin || typeof window === 'undefined') return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-blue-600/10 backdrop-blur-md items-center justify-center z-[9999] pointer-events-none flex p-8"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, y: 20 }}
|
||||
animate={{ scale: 1, y: 0 }}
|
||||
exit={{ scale: 0.9, y: 20 }}
|
||||
className="w-full max-w-2xl bg-white rounded-[2.5rem] p-12 text-center shadow-[0_32px_64px_-12px_rgba(0,0,0,0.14)] border border-white pointer-events-auto"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-8">
|
||||
<div className="w-24 h-24 bg-blue-600 text-white rounded-3xl flex items-center justify-center shadow-xl shadow-blue-200 animate-bounce">
|
||||
<FileUp size={48} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-3xl font-black text-slate-900 tracking-tight">
|
||||
{t('dragDropUploadTitle')}
|
||||
</h3>
|
||||
<p className="text-lg text-slate-500 font-medium">
|
||||
Release to ingest files into this Group
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-6 py-8 border-y border-slate-100 w-full">
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-2xl text-sm font-bold text-slate-600 uppercase tracking-wider">
|
||||
<ShieldCheck size={20} className="text-emerald-500" />
|
||||
<span>Group Specific</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 px-4 py-2 bg-slate-50 rounded-2xl text-sm font-bold text-slate-600 uppercase tracking-wider">
|
||||
<FileText size={20} className="text-blue-500" />
|
||||
<span>{GROUP_ALLOWED_EXTENSIONS.slice(0, 3).join(', ').toUpperCase()}...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-slate-400 font-bold text-xs uppercase tracking-[0.3em]">
|
||||
Drop anywhere to begin
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,713 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { isFormatSupportedForPreview } from '../constants/fileSupport';
|
||||
import { PDFStatus } from '../types';
|
||||
import { pdfPreviewService } from '../services/pdfPreviewService';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { X, FileText, Loader, AlertCircle, Maximize2, Eye, Download, ExternalLink, RefreshCw, Scissors, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { PDFSelectionTool } from './PDFSelectionTool';
|
||||
import { CreateNoteFromPDFDialog } from './CreateNoteFromPDFDialog';
|
||||
import { noteService } from '../services/noteService';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { knowledgeBaseService } from '../services/knowledgeBaseService';
|
||||
import * as pdfjs from 'pdfjs-dist';
|
||||
|
||||
// Set worker path for PDF.js
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
|
||||
|
||||
interface PDFPreviewProps {
|
||||
fileId: string;
|
||||
fileName: string;
|
||||
authToken: string;
|
||||
groupId?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const PDFPreview: React.FC<PDFPreviewProps> = ({ fileId, fileName, authToken, groupId, onClose }) => {
|
||||
const [status, setStatus] = useState<PDFStatus>({ status: 'pending' });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [pdfUrl, setPdfUrl] = useState<string>('');
|
||||
const [iframeError, setIframeError] = useState(false);
|
||||
const [isSelectionMode, setIsSelectionMode] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pdfBlob, setPdfBlob] = useState<Blob | null>(null);
|
||||
const [selectionData, setSelectionData] = useState<{ screenshot: Blob; text: string } | null>(null);
|
||||
const [numPages, setNumPages] = useState<number>(0);
|
||||
const [pdfDoc, setPdfDoc] = useState<pdfjs.PDFDocumentProxy | null>(null);
|
||||
const [zoomLevel, setZoomLevel] = useState<number>(1.0); // Add zoom level state
|
||||
const currentRenderTask = useRef<pdfjs.RenderTask | null>(null); // Save current rendering task
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const flipDirection = useRef<'next' | 'prev' | null>(null);
|
||||
const lastFlipTime = useRef<number>(0);
|
||||
|
||||
const { showToast } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
const { t, language } = useLanguage();
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (status.status === 'ready') {
|
||||
pdfPreviewService.getPDFUrl(fileId)
|
||||
.then(result => {
|
||||
setPdfUrl(result.url); // Set pdfUrl for download
|
||||
|
||||
// Fetch PDF data and create blob URL
|
||||
fetch(result.url)
|
||||
.then(async response => {
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.message || 'Failed to fetch PDF data');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
setPdfBlob(blob);
|
||||
|
||||
// Start fetching and rendering PDF document
|
||||
loadAndRenderPDF(blob);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('PDF fetch error:', err);
|
||||
setIframeError(true);
|
||||
setStatus({ status: 'failed', error: err.message });
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('getPDFUrl error:', err);
|
||||
setIframeError(true);
|
||||
setStatus({ status: 'failed', error: err.message });
|
||||
});
|
||||
}
|
||||
}, [status.status, fileId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pdfDoc && currentPage) {
|
||||
// Re-render on page change or zoom level change
|
||||
renderCurrentPage(pdfDoc, currentPage);
|
||||
}
|
||||
}, [currentPage, pdfDoc, zoomLevel]);
|
||||
|
||||
const isSupported = isFormatSupportedForPreview(fileName);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSupported) {
|
||||
checkPDFStatus();
|
||||
const interval = setInterval(checkPDFStatus, 3000);
|
||||
return () => clearInterval(interval);
|
||||
} else {
|
||||
setLoading(false);
|
||||
setStatus({ status: 'failed', error: t('previewNotSupported') });
|
||||
}
|
||||
}, [fileId, isSupported]);
|
||||
|
||||
const checkPDFStatus = async () => {
|
||||
try {
|
||||
const pdfStatus = await pdfPreviewService.getPDFStatus(fileId);
|
||||
setStatus(pdfStatus);
|
||||
|
||||
// Actively trigger conversion if status is pending
|
||||
if (pdfStatus.status === 'pending') {
|
||||
setStatus({ status: 'converting' });
|
||||
try {
|
||||
// Access PDF URL to trigger conversion
|
||||
await pdfPreviewService.preloadPDF(fileId);
|
||||
} catch (error) {
|
||||
console.log('Preload triggered, conversion should start');
|
||||
}
|
||||
}
|
||||
|
||||
if (pdfStatus.status === 'ready' || pdfStatus.status === 'failed') {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setLoading(false);
|
||||
const errorMessage = error.message || t('checkPDFStatusFailed');
|
||||
setStatus({ status: 'failed', error: errorMessage });
|
||||
showToast(errorMessage, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const loadAndRenderPDF = async (blob: Blob) => {
|
||||
try {
|
||||
const pdfData = await blob.arrayBuffer();
|
||||
const pdf = await pdfjs.getDocument({ data: pdfData }).promise;
|
||||
|
||||
setPdfDoc(pdf);
|
||||
setNumPages(pdf.numPages);
|
||||
|
||||
if (currentPage > pdf.numPages) {
|
||||
setCurrentPage(pdf.numPages);
|
||||
}
|
||||
|
||||
renderCurrentPage(pdf, currentPage);
|
||||
} catch (error) {
|
||||
console.error('Failed to load PDF:', error);
|
||||
setIframeError(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleZoomIn = () => {
|
||||
setZoomLevel(prev => Math.min(3.0, prev + 0.1));
|
||||
};
|
||||
|
||||
const handleZoomOut = () => {
|
||||
setZoomLevel(prev => Math.max(0.5, prev - 0.1));
|
||||
};
|
||||
|
||||
const handleResetZoom = () => {
|
||||
setZoomLevel(1.0);
|
||||
};
|
||||
|
||||
const renderCurrentPage = async (pdf: pdfjs.PDFDocumentProxy, pageNum: number) => {
|
||||
if (!canvasRef.current) return;
|
||||
|
||||
try {
|
||||
// Cancel rendering task if one is in progress
|
||||
if (currentRenderTask.current) {
|
||||
currentRenderTask.current.cancel();
|
||||
}
|
||||
|
||||
const page = await pdf.getPage(pageNum);
|
||||
const canvas = canvasRef.current;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
if (!context) return;
|
||||
|
||||
// Get container dimensions
|
||||
if (!containerRef.current) return;
|
||||
const container = containerRef.current;
|
||||
const containerWidth = container.clientWidth;
|
||||
const containerHeight = container.clientHeight;
|
||||
|
||||
// Handle high DPI displays
|
||||
const devicePixelRatio = window.devicePixelRatio || 1;
|
||||
|
||||
// Calculate scale to fit page in container width while maintaining aspect ratio
|
||||
const viewport = page.getViewport({ scale: 1 });
|
||||
const baseScale = (containerWidth - 48) / viewport.width; // Add padding for width
|
||||
|
||||
// Apply zoom level to base scale
|
||||
const scale = baseScale * zoomLevel;
|
||||
|
||||
const finalScale = scale * devicePixelRatio;
|
||||
const scaledViewport = page.getViewport({ scale: finalScale });
|
||||
const cssViewport = page.getViewport({ scale: scale });
|
||||
|
||||
// Set canvas dimensions with device pixel ratio
|
||||
canvas.width = scaledViewport.width;
|
||||
canvas.height = scaledViewport.height;
|
||||
|
||||
// Set CSS dimensions explicitly for high-DPI
|
||||
canvas.style.width = `${cssViewport.width}px`;
|
||||
canvas.style.height = `${cssViewport.height}px`;
|
||||
|
||||
// Reset any previous transforms
|
||||
context.setTransform(1, 0, 0, 1, 0, 0);
|
||||
|
||||
// Clear canvas
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Fill with white background
|
||||
context.fillStyle = 'white';
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Set proper transform for high DPI
|
||||
context.scale(devicePixelRatio, devicePixelRatio);
|
||||
|
||||
// Create and save the new render task
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: page.getViewport({ scale: scale }),
|
||||
};
|
||||
|
||||
// Save the render task to allow for cancellation
|
||||
currentRenderTask.current = page.render(renderContext);
|
||||
|
||||
// Wait for rendering to complete
|
||||
await currentRenderTask.current.promise;
|
||||
|
||||
// Clear the current render task
|
||||
currentRenderTask.current = null;
|
||||
|
||||
// Adjust scroll position after page turn
|
||||
if (flipDirection.current && scrollContainerRef.current) {
|
||||
const container = scrollContainerRef.current;
|
||||
if (flipDirection.current === 'next') {
|
||||
container.scrollTop = 0;
|
||||
} else if (flipDirection.current === 'prev') {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
flipDirection.current = null;
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name !== 'RenderingCancelledException') {
|
||||
console.error('Failed to render PDF page:', error);
|
||||
}
|
||||
// Clear the current render task even if there's an error
|
||||
currentRenderTask.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleFullscreen = () => {
|
||||
setIsFullscreen(!isFullscreen);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (pdfUrl) {
|
||||
// Directly download if pdfUrl already exists
|
||||
const link = document.createElement('a');
|
||||
link.href = pdfUrl;
|
||||
link.download = fileName.replace(/\.[^/.]+$/, '.pdf');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} else {
|
||||
// Try fetching and downloading if pdfUrl does not exist
|
||||
pdfPreviewService.getPDFUrl(fileId)
|
||||
.then(result => {
|
||||
const link = document.createElement('a');
|
||||
link.href = result.url;
|
||||
link.download = fileName.replace(/\.[^/.]+$/, '.pdf');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Failed to download PDF:', error);
|
||||
showToast('error', t('downloadPDFFailed'));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenInNewTab = () => {
|
||||
if (pdfUrl) {
|
||||
window.open(pdfUrl, '_blank');
|
||||
} else {
|
||||
// Try fetching and opening if pdfUrl does not exist
|
||||
pdfPreviewService.getPDFUrl(fileId)
|
||||
.then(result => {
|
||||
window.open(result.url, '_blank');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Failed to open PDF in new tab:', error);
|
||||
showToast('error', t('openPDFInNewTabFailed'));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegenerate = async () => {
|
||||
if (await confirm(t('confirmRegeneratePDF'))) {
|
||||
setStatus({ status: 'converting' });
|
||||
setLoading(true);
|
||||
try {
|
||||
await pdfPreviewService.preloadPDF(fileId, true);
|
||||
// Reset state and trigger reload
|
||||
setPdfUrl('');
|
||||
setIframeError(false);
|
||||
setPdfDoc(null);
|
||||
setPdfBlob(null);
|
||||
setNumPages(0);
|
||||
} catch (error) {
|
||||
showToast('error', t('requestRegenerationFailed'));
|
||||
setStatus({ status: 'failed', error: t('requestRegenerationFailed') });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleIframeError = () => {
|
||||
setIframeError(true);
|
||||
};
|
||||
|
||||
const handleWheel = (e: React.WheelEvent) => {
|
||||
if (!scrollContainerRef.current || isSelectionMode) return;
|
||||
|
||||
const container = scrollContainerRef.current;
|
||||
const { scrollTop, scrollHeight, clientHeight } = container;
|
||||
const now = Date.now();
|
||||
const throttleMs = 600; // Prevent rapid page turning
|
||||
|
||||
// Scroll down for next page
|
||||
if (e.deltaY > 0 && scrollTop + clientHeight >= scrollHeight - 1) {
|
||||
if (currentPage < numPages && now - lastFlipTime.current > throttleMs) {
|
||||
flipDirection.current = 'next';
|
||||
lastFlipTime.current = now;
|
||||
setCurrentPage(prev => prev + 1);
|
||||
}
|
||||
}
|
||||
// Scroll up for previous page
|
||||
else if (e.deltaY < 0 && scrollTop <= 1) {
|
||||
if (currentPage > 1 && now - lastFlipTime.current > throttleMs) {
|
||||
flipDirection.current = 'prev';
|
||||
lastFlipTime.current = now;
|
||||
setCurrentPage(prev => prev - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectionComplete = (screenshot: Blob, text: string) => {
|
||||
// Set preliminary data and open dialog
|
||||
setSelectionData({ screenshot, text });
|
||||
setIsSelectionMode(false);
|
||||
};
|
||||
|
||||
const handleSaveNote = async (title: string, content: string, selectedCategoryId?: string) => {
|
||||
if (!authToken || !selectionData) return;
|
||||
|
||||
try {
|
||||
await noteService.createFromPDFSelection(
|
||||
authToken,
|
||||
fileId,
|
||||
selectionData.screenshot,
|
||||
undefined, // groupId is no longer used for notes from PDF
|
||||
selectedCategoryId,
|
||||
currentPage
|
||||
);
|
||||
showToast('success', t('noteCreatedSuccess'));
|
||||
setSelectionData(null);
|
||||
} catch (error) {
|
||||
console.error('Failed to create note:', error);
|
||||
showToast('error', t('noteCreatedFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
switch (status.status) {
|
||||
case 'pending':
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Loader size={48} className="animate-spin mb-4" />
|
||||
<div className="text-lg font-medium mb-2">{t('preparingPDFConversion')}</div>
|
||||
<div className="text-sm">{t('pleaseWait')}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'converting':
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Loader size={48} className="animate-spin mb-4" />
|
||||
<div className="text-lg font-medium mb-2">{t('convertingPDF')}</div>
|
||||
<div className="text-sm">{t('pleaseWait')}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'failed':
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-red-500">
|
||||
<AlertCircle size={48} className="mb-4" />
|
||||
<div className="text-lg font-medium mb-2">{t('pdfConversionFailed')}</div>
|
||||
<div className="text-sm text-gray-500 text-center max-w-md">
|
||||
{status.error || t('pdfConversionError')}
|
||||
</div>
|
||||
<button
|
||||
onClick={checkPDFStatus}
|
||||
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
{t('retry')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'ready':
|
||||
if (iframeError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<AlertCircle size={48} className="mb-4" />
|
||||
<div className="text-lg font-medium mb-2">{t('pdfLoadFailed')}</div>
|
||||
<div className="text-sm text-gray-500 mb-4">{t('pdfLoadError')}</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
<Download size={16} />
|
||||
{t('downloadPDF')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleOpenInNewTab}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
{t('openInNewWindow')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pdfDoc) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
||||
<Loader size={48} className="animate-spin mb-4" />
|
||||
<div className="text-lg font-medium mb-2">{t('loadingPDF')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col" ref={containerRef}>
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
onWheel={handleWheel}
|
||||
className="flex-grow overflow-auto pdf-canvas-container bg-gray-100"
|
||||
>
|
||||
<div className="flex flex-col items-center py-12 pb-32 min-h-full">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="bg-white shadow-xl max-w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isSelectionMode && (
|
||||
<PDFSelectionTool
|
||||
containerRef={containerRef}
|
||||
canvasRef={canvasRef}
|
||||
pdfBlob={pdfBlob}
|
||||
pageNumber={currentPage}
|
||||
authToken={authToken}
|
||||
zoomLevel={zoomLevel}
|
||||
onSelectionComplete={handleSelectionComplete}
|
||||
onCancel={() => setIsSelectionMode(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 bg-white/90 border border-slate-200 px-3 py-1.5 rounded-full shadow-lg z-40">
|
||||
<div className="flex items-center border-r border-slate-200 pr-2 mr-2">
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-1 hover:bg-slate-100 rounded text-slate-600 min-w-[28px] flex items-center justify-center"
|
||||
title={t('zoomOut')}
|
||||
>
|
||||
<span className="text-lg">−</span>
|
||||
</button>
|
||||
<span className="mx-1 text-sm text-slate-600 min-w-[40px] text-center">{Math.round(zoomLevel * 100)}%</span>
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-1 hover:bg-slate-100 rounded text-slate-600 min-w-[28px] flex items-center justify-center"
|
||||
title={t('zoomIn')}
|
||||
>
|
||||
<span className="text-lg">+</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleResetZoom}
|
||||
className="ml-1 p-1 px-2 hover:bg-slate-100 rounded text-slate-600 text-xs"
|
||||
title={t('resetZoom')}
|
||||
>
|
||||
100%
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newPage = Math.max(1, currentPage - 1);
|
||||
setCurrentPage(newPage);
|
||||
}}
|
||||
className="p-1 hover:bg-slate-100 rounded text-slate-600"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
<input
|
||||
type="number"
|
||||
value={currentPage}
|
||||
onChange={(e) => {
|
||||
const val = Math.max(1, Math.min(numPages, parseInt(e.target.value) || 1));
|
||||
setCurrentPage(val);
|
||||
}}
|
||||
className="w-12 text-center text-sm border-none focus:ring-0 bg-transparent font-medium"
|
||||
/>
|
||||
<span className="text-sm text-slate-500">/ {numPages}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newPage = Math.min(numPages, currentPage + 1);
|
||||
setCurrentPage(newPage);
|
||||
}}
|
||||
className="p-1 hover:bg-slate-100 rounded text-slate-600"
|
||||
>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{selectionData && (
|
||||
<CreateNoteFromPDFDialog
|
||||
screenshot={selectionData.screenshot}
|
||||
extractedText={selectionData.text}
|
||||
authToken={authToken}
|
||||
initialCategoryId={undefined} // Notes don't inherit KB group
|
||||
initialPageNumber={currentPage}
|
||||
onSave={handleSaveNote}
|
||||
onCancel={() => setSelectionData(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[999] ${isFullscreen ? 'p-0' : 'p-4'
|
||||
}`}>
|
||||
<div className={`bg-white rounded-lg overflow-hidden flex flex-col ${isFullscreen ? 'w-full h-full' : 'w-full max-w-4xl h-5/6'
|
||||
}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b bg-gray-50">
|
||||
<div className="flex items-center space-x-3">
|
||||
<FileText size={20} className="text-gray-600" />
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{fileName}</div>
|
||||
<div className="text-sm text-gray-500">{t('pdfPreview')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{status.status === 'ready' && !iframeError && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 mr-2 border-r pr-2">
|
||||
<span className="text-sm text-gray-500">{t('selectPageNumber')}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={numPages}
|
||||
value={currentPage}
|
||||
onChange={(e) => {
|
||||
const val = Math.max(1, Math.min(numPages, parseInt(e.target.value) || 1));
|
||||
setCurrentPage(val);
|
||||
}}
|
||||
className="w-16 px-2 py-1 border rounded text-sm"
|
||||
title={t('enterPageNumber')}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsSelectionMode(!isSelectionMode)}
|
||||
className={`p-2 transition-colors ${isSelectionMode ? 'bg-blue-100 text-blue-600 rounded' : 'text-gray-400 hover:text-blue-600'}`}
|
||||
title={isSelectionMode ? t('exitSelectionMode') : t('clickToSelectAndNote')}
|
||||
>
|
||||
<Scissors size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
title={t('regeneratePDF')}
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title={t('downloadPDF')}
|
||||
>
|
||||
<Download size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleOpenInNewTab}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title={t('openInNewWindow')}
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFullscreen}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
title={isFullscreen ? t('exitFullscreen') : t('fullscreenDisplay')}
|
||||
>
|
||||
<Maximize2 size={18} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 h-full">
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface PDFPreviewButtonProps {
|
||||
fileId: string;
|
||||
fileName: string;
|
||||
onPreview: () => void;
|
||||
}
|
||||
|
||||
export const PDFPreviewButton: React.FC<PDFPreviewButtonProps> = ({
|
||||
fileId,
|
||||
fileName,
|
||||
onPreview
|
||||
}) => {
|
||||
const [status, setStatus] = useState<PDFStatus>({ status: 'pending' });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { t } = useLanguage();
|
||||
const isSupported = isFormatSupportedForPreview(fileName);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSupported) {
|
||||
checkStatus();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fileId, isSupported]);
|
||||
|
||||
const checkStatus = async () => {
|
||||
try {
|
||||
const pdfStatus = await pdfPreviewService.getPDFStatus(fileId);
|
||||
setStatus(pdfStatus);
|
||||
} catch (error) {
|
||||
// Ignore error and use default state
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getIcon = () => {
|
||||
if (!isSupported) {
|
||||
return <Eye className="w-3 h-3 text-slate-200" />;
|
||||
}
|
||||
if (loading || status.status === 'converting') {
|
||||
return <Loader className="w-3 h-3 animate-spin" />;
|
||||
}
|
||||
if (status.status === 'failed') {
|
||||
return <AlertCircle className="w-3 h-3" />;
|
||||
}
|
||||
return <Eye className="w-3 h-3" />;
|
||||
};
|
||||
|
||||
const getTitle = () => {
|
||||
if (!isSupported) return t('previewNotSupported');
|
||||
switch (status.status) {
|
||||
case 'ready': return t('pdfPreviewReady');
|
||||
case 'converting': return t('convertingInProgress');
|
||||
case 'failed': return t('conversionFailed');
|
||||
default: return t('generatePDFPreviewButton');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onPreview}
|
||||
disabled={loading || status.status === 'converting' || !isSupported}
|
||||
className={`p-1 rounded transition-colors ${!isSupported
|
||||
? 'text-slate-200 cursor-not-allowed'
|
||||
: status.status === 'failed'
|
||||
? 'text-red-400 hover:text-red-500 hover:bg-red-50'
|
||||
: 'text-slate-400 hover:text-blue-500 hover:bg-blue-50'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
title={getTitle()}
|
||||
>
|
||||
{getIcon()}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,437 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import * as pdfjs from 'pdfjs-dist';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
// Set worker path for PDF.js
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
|
||||
|
||||
// Helper function to convert coordinates between different scales
|
||||
const convertCoordinates = (
|
||||
x: number,
|
||||
y: number,
|
||||
containerWidth: number,
|
||||
containerHeight: number,
|
||||
pdfWidth: number,
|
||||
pdfHeight: number,
|
||||
zoomLevel: number = 1.0
|
||||
) => {
|
||||
// Calculate the scale factors to fit the PDF page in the container while maintaining aspect ratio
|
||||
const scaleX = containerWidth / pdfWidth;
|
||||
const scaleY = containerHeight / pdfHeight;
|
||||
let scale = Math.min(scaleX, scaleY);
|
||||
|
||||
// Apply zoom level to the scale
|
||||
scale *= zoomLevel;
|
||||
|
||||
// Calculate padding offsets to center the PDF page in the container
|
||||
const paddedWidth = pdfWidth * scale;
|
||||
const paddedHeight = pdfHeight * scale;
|
||||
const offsetX = (containerWidth - paddedWidth) / 2;
|
||||
const offsetY = (containerHeight - paddedHeight) / 2;
|
||||
|
||||
// Convert from container coordinates to PDF page coordinates
|
||||
const pdfX = (x - offsetX) / scale;
|
||||
const pdfY = (y - offsetY) / scale;
|
||||
|
||||
return { x: pdfX, y: pdfY, scale, offsetX, offsetY };
|
||||
};
|
||||
|
||||
// Function to calculate how PDF page is laid out in container space
|
||||
const calculatePDFLayout = (
|
||||
containerWidth: number,
|
||||
containerHeight: number,
|
||||
pdfWidth: number,
|
||||
pdfHeight: number,
|
||||
zoomLevel: number = 1.0
|
||||
) => {
|
||||
// Calculate the scale factors to fit the PDF page in the container while maintaining aspect ratio
|
||||
const scaleX = containerWidth / pdfWidth;
|
||||
const scaleY = containerHeight / pdfHeight;
|
||||
let pageScale = Math.min(scaleX, scaleY);
|
||||
|
||||
// Apply zoom level to the page scale
|
||||
pageScale *= zoomLevel;
|
||||
|
||||
// Calculate padding offsets to center the PDF page in the container
|
||||
const paddedWidth = pdfWidth * pageScale;
|
||||
const paddedHeight = pdfHeight * pageScale;
|
||||
const offsetX = (containerWidth - paddedWidth) / 2;
|
||||
const offsetY = (containerHeight - paddedHeight) / 2;
|
||||
|
||||
return {
|
||||
pageScale,
|
||||
offsetX: Math.round(offsetX),
|
||||
offsetY: Math.round(offsetY),
|
||||
paddedWidth,
|
||||
paddedHeight
|
||||
};
|
||||
};
|
||||
|
||||
// Enhanced function to calculate precise PDF page layout with improved accuracy
|
||||
const calculatePrecisePDFLayout = (
|
||||
containerWidth: number,
|
||||
containerHeight: number,
|
||||
pdfWidth: number,
|
||||
pdfHeight: number,
|
||||
zoomLevel: number = 1.0
|
||||
) => {
|
||||
// Calculate scale to fit the PDF page in the container while maintaining aspect ratio
|
||||
const scaleX = containerWidth / pdfWidth;
|
||||
const scaleY = containerHeight / pdfHeight;
|
||||
let pageScale = Math.min(scaleX, scaleY);
|
||||
|
||||
// Apply zoom level to the page scale
|
||||
pageScale *= zoomLevel;
|
||||
|
||||
// Calculate exact page dimensions after scaling
|
||||
const scaledPageWidth = pdfWidth * pageScale;
|
||||
const scaledPageHeight = pdfHeight * pageScale;
|
||||
|
||||
// Calculate padding to center the page in the container
|
||||
const offsetX = (containerWidth - scaledPageWidth) / 2;
|
||||
const offsetY = (containerHeight - scaledPageHeight) / 2;
|
||||
|
||||
return {
|
||||
pageScale,
|
||||
offsetX: offsetX,
|
||||
offsetY: offsetY,
|
||||
scaledPageWidth,
|
||||
scaledPageHeight,
|
||||
containerWidth,
|
||||
containerHeight
|
||||
};
|
||||
};
|
||||
|
||||
export interface SelectionCoordinates {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface PDFSelectionToolProps {
|
||||
containerRef: React.RefObject<HTMLDivElement>;
|
||||
canvasRef: React.RefObject<HTMLCanvasElement>;
|
||||
onSelectionComplete: (screenshot: Blob, text: string) => void;
|
||||
onCancel: () => void;
|
||||
pdfBlob: Blob | null;
|
||||
pageNumber: number;
|
||||
authToken: string;
|
||||
zoomLevel?: number; // Optional zoom level parameter
|
||||
}
|
||||
|
||||
export const PDFSelectionTool: React.FC<PDFSelectionToolProps> = ({
|
||||
containerRef,
|
||||
canvasRef,
|
||||
onSelectionComplete,
|
||||
onCancel,
|
||||
pdfBlob,
|
||||
pageNumber,
|
||||
authToken,
|
||||
zoomLevel = 1.0, // Default zoom level is 1.0
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [isSelecting, setIsSelecting] = useState(false);
|
||||
const [startPoint, setStartPoint] = useState<{ x: number; y: number } | null>(null);
|
||||
const [currentPoint, setCurrentPoint] = useState<{ x: number; y: number } | null>(null);
|
||||
const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [onCancel]);
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
if (!containerRef.current || !pdfBlob) return;
|
||||
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
// Use actual coordinates relative to container
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
setStartPoint({ x, y });
|
||||
setCurrentPoint({ x, y });
|
||||
setIsSelecting(true);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (!isSelecting || !containerRef.current) return;
|
||||
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
setCurrentPoint({ x, y });
|
||||
};
|
||||
|
||||
const handleMouseUp = async () => {
|
||||
if (!isSelecting || !startPoint || !currentPoint || !containerRef.current || !canvasRef.current) return;
|
||||
|
||||
setIsSelecting(false);
|
||||
|
||||
// Calculate selection rectangle based on mouse events (in container coordinates)
|
||||
const startX = Math.min(startPoint.x, currentPoint.x);
|
||||
const startY = Math.min(startPoint.y, currentPoint.y);
|
||||
const endX = Math.max(startPoint.x, currentPoint.x);
|
||||
const endY = Math.max(startPoint.y, currentPoint.y);
|
||||
const width = endX - startX;
|
||||
const height = endY - startY;
|
||||
|
||||
// Minimum selection size
|
||||
if (width < 10 || height < 10) {
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get the actual canvas element from PDFPreview
|
||||
const sourceCanvas = canvasRef.current;
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
|
||||
console.log('=== Direct Canvas Capture ===');
|
||||
console.log('Container dimensions:', { width: containerRect.width, height: containerRect.height });
|
||||
console.log('Canvas dimensions:', { width: sourceCanvas.width, height: sourceCanvas.height });
|
||||
console.log('Selection in container space:', { startX, startY, endX, endY, width, height });
|
||||
|
||||
// Get the canvas bounding rect to find where it's positioned within the container
|
||||
const canvasRect = sourceCanvas.getBoundingClientRect();
|
||||
const canvasOffsetX = canvasRect.left - containerRect.left;
|
||||
const canvasOffsetY = canvasRect.top - containerRect.top;
|
||||
|
||||
console.log('Canvas position in container:', { offsetX: canvasOffsetX, offsetY: canvasOffsetY });
|
||||
console.log('Canvas display size:', { width: canvasRect.width, height: canvasRect.height });
|
||||
|
||||
// Calculate selection relative to the canvas element
|
||||
const selectionRelativeToCanvas = {
|
||||
x: startX - canvasOffsetX,
|
||||
y: startY - canvasOffsetY,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
|
||||
console.log('Selection relative to canvas:', selectionRelativeToCanvas);
|
||||
|
||||
// Calculate the scale factor between canvas display size and actual pixel size
|
||||
// The canvas may be rendered at higher resolution (devicePixelRatio)
|
||||
const scaleX = sourceCanvas.width / canvasRect.width;
|
||||
const scaleY = sourceCanvas.height / canvasRect.height;
|
||||
|
||||
console.log('Canvas scale factors:', { scaleX, scaleY });
|
||||
|
||||
// Convert selection coordinates to canvas pixel coordinates
|
||||
const canvasX = Math.round(selectionRelativeToCanvas.x * scaleX);
|
||||
const canvasY = Math.round(selectionRelativeToCanvas.y * scaleY);
|
||||
const canvasWidth = Math.round(selectionRelativeToCanvas.width * scaleX);
|
||||
const canvasHeight = Math.round(selectionRelativeToCanvas.height * scaleY);
|
||||
|
||||
console.log('Selection in canvas pixel space:', { canvasX, canvasY, canvasWidth, canvasHeight });
|
||||
|
||||
// Ensure coordinates are within canvas bounds
|
||||
const safeX = Math.max(0, Math.min(canvasX, sourceCanvas.width));
|
||||
const safeY = Math.max(0, Math.min(canvasY, sourceCanvas.height));
|
||||
const safeWidth = Math.max(0, Math.min(canvasWidth, sourceCanvas.width - safeX));
|
||||
const safeHeight = Math.max(0, Math.min(canvasHeight, sourceCanvas.height - safeY));
|
||||
|
||||
console.log('Safe coordinates:', { safeX, safeY, safeWidth, safeHeight });
|
||||
|
||||
if (safeWidth === 0 || safeHeight === 0) {
|
||||
console.warn('Selection is outside canvas bounds');
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
|
||||
// Extract the selected region from the source canvas
|
||||
const ctx = sourceCanvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
throw new Error('Could not get canvas context');
|
||||
}
|
||||
|
||||
const imageData = ctx.getImageData(safeX, safeY, safeWidth, safeHeight);
|
||||
|
||||
// Create a new canvas for the selected region
|
||||
const selectedCanvas = document.createElement('canvas');
|
||||
selectedCanvas.width = safeWidth;
|
||||
selectedCanvas.height = safeHeight;
|
||||
|
||||
const selectedCtx = selectedCanvas.getContext('2d');
|
||||
if (!selectedCtx) {
|
||||
throw new Error('Could not create selection canvas context');
|
||||
}
|
||||
|
||||
selectedCtx.putImageData(imageData, 0, 0);
|
||||
|
||||
// Convert selected canvas to blob
|
||||
const screenshot = await new Promise<Blob>((resolve, reject) => {
|
||||
selectedCanvas.toBlob((blob) => {
|
||||
if (blob) {
|
||||
resolve(blob);
|
||||
} else {
|
||||
reject(new Error('Failed to create blob from canvas'));
|
||||
}
|
||||
}, 'image/jpeg', 0.98);
|
||||
});
|
||||
|
||||
console.log('Screenshot created successfully');
|
||||
|
||||
// Extract text from the selected area using OCR
|
||||
let extractedText = '';
|
||||
try {
|
||||
extractedText = await performOCR(screenshot, authToken);
|
||||
} catch (ocrError) {
|
||||
console.error('OCR extraction failed:', ocrError);
|
||||
}
|
||||
|
||||
onSelectionComplete(screenshot, extractedText);
|
||||
} catch (error) {
|
||||
console.error('Failed to process selection:', error);
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
// Render PDF to canvas at specified scale
|
||||
const renderPDFToCanvas = async (
|
||||
pdfBlob: Blob,
|
||||
pageNumber: number,
|
||||
canvas: HTMLCanvasElement,
|
||||
containerWidth: number,
|
||||
containerHeight: number,
|
||||
renderScale: number,
|
||||
zoomLevel: number = 1.0
|
||||
): Promise<{ offsetX: number; offsetY: number; pageScale: number; viewport: any }> => {
|
||||
const pdfData = await pdfBlob.arrayBuffer();
|
||||
const pdf = await pdfjs.getDocument({ data: pdfData }).promise;
|
||||
|
||||
if (pageNumber < 1 || pageNumber > pdf.numPages) {
|
||||
throw new Error(`Invalid page number: ${pageNumber}`);
|
||||
}
|
||||
|
||||
const page = await pdf.getPage(pageNumber);
|
||||
|
||||
// Calculate the scale needed to render the PDF page to match the layout in container
|
||||
// We want the same aspect ratio and positioning as in the PDF viewer
|
||||
const originalViewport = page.getViewport({ scale: 1 });
|
||||
|
||||
// Calculate scale factors to fit page within container while preserving aspect ratio
|
||||
const scaleX = containerWidth / originalViewport.width;
|
||||
const scaleY = containerHeight / originalViewport.height;
|
||||
let pageScale = Math.min(scaleX, scaleY);
|
||||
|
||||
// Apply zoom level to the page scale
|
||||
pageScale *= zoomLevel;
|
||||
|
||||
// Apply the render scale factor for high resolution
|
||||
const finalScale = pageScale * renderScale;
|
||||
|
||||
// Create the viewport at this scale
|
||||
const viewport = page.getViewport({ scale: finalScale });
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context) {
|
||||
// Return default values if context not available
|
||||
return { offsetX: 0, offsetY: 0, pageScale: 1, viewport: originalViewport };
|
||||
}
|
||||
|
||||
// Calculate offset to center the page in the canvas
|
||||
const offsetX = Math.round((canvas.width - viewport.width) / 2);
|
||||
const offsetY = Math.round((canvas.height - viewport.height) / 2);
|
||||
|
||||
// Render the page with anti-aliasing and smooth rendering for quality
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
transform: [1, 0, 0, 1, offsetX, offsetY],
|
||||
intent: 'display' as const
|
||||
};
|
||||
|
||||
// Render the page with improved rendering quality
|
||||
await page.render(renderContext).promise;
|
||||
|
||||
return { offsetX, offsetY, pageScale, viewport };
|
||||
};
|
||||
|
||||
// Perform OCR on the captured image
|
||||
const performOCR = async (image: Blob, token: string): Promise<string> => {
|
||||
const formData = new FormData();
|
||||
formData.append('image', image);
|
||||
|
||||
const response = await fetch('/api/ocr/recognize', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to recognize text via OCR');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.text;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!overlayCanvasRef.current || !startPoint || !currentPoint || !containerRef.current) return;
|
||||
|
||||
const canvas = overlayCanvasRef.current;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Match the canvas dimensions to the container
|
||||
const containerRect = containerRef.current.getBoundingClientRect();
|
||||
canvas.width = containerRect.width;
|
||||
canvas.height = containerRect.height;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw selection rectangle
|
||||
const x = Math.min(startPoint.x, currentPoint.x);
|
||||
const y = Math.min(startPoint.y, currentPoint.y);
|
||||
const width = Math.abs(currentPoint.x - startPoint.x);
|
||||
const height = Math.abs(currentPoint.y - startPoint.y);
|
||||
|
||||
// Draw semi-transparent overlay
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Clear selection area
|
||||
ctx.clearRect(x, y, width, height);
|
||||
|
||||
// Draw selection border
|
||||
ctx.strokeStyle = '#3b82f6';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(x, y, width, height);
|
||||
|
||||
// Draw corner handles
|
||||
const handleSize = 8;
|
||||
ctx.fillStyle = '#3b82f6';
|
||||
ctx.fillRect(x - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
|
||||
ctx.fillRect(x + width - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
|
||||
ctx.fillRect(x - handleSize / 2, y + height - handleSize / 2, handleSize, handleSize);
|
||||
ctx.fillRect(x + width - handleSize / 2, y + height - handleSize / 2, handleSize, handleSize);
|
||||
}, [startPoint, currentPoint, containerRef]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 z-50 cursor-crosshair bg-white/20"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
<canvas
|
||||
ref={overlayCanvasRef}
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
/>
|
||||
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/75 text-white px-4 py-2 rounded-lg text-sm z-[60]">
|
||||
{t('dragToSelect')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,178 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { SearchHistoryItem, KnowledgeGroup } from '../types';
|
||||
import { searchHistoryService } from '../services/searchHistoryService';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { MessageCircle, Trash2, Clock, Users } from 'lucide-react';
|
||||
|
||||
interface SearchHistoryListProps {
|
||||
groups: KnowledgeGroup[];
|
||||
onSelectHistory: (historyId: string) => void;
|
||||
onDeleteHistory?: (historyId: string) => void;
|
||||
}
|
||||
|
||||
export const SearchHistoryList: React.FC<SearchHistoryListProps> = ({
|
||||
groups,
|
||||
onSelectHistory,
|
||||
onDeleteHistory
|
||||
}) => {
|
||||
const [histories, setHistories] = useState<SearchHistoryItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const { showError, showSuccess } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
const { t, language } = useLanguage();
|
||||
|
||||
const loadHistories = async (pageNum: number = 1, append: boolean = false) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await searchHistoryService.getHistories(pageNum, 20);
|
||||
|
||||
if (append) {
|
||||
setHistories(prev => [...prev, ...response.histories]);
|
||||
} else {
|
||||
setHistories(response.histories);
|
||||
}
|
||||
|
||||
setHasMore(response.histories.length === 20);
|
||||
setPage(pageNum);
|
||||
} catch (error) {
|
||||
showError(t('loadingHistoriesFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadHistories();
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (historyId: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (!(await confirm(t('confirmDeleteHistory')))) return;
|
||||
|
||||
try {
|
||||
await searchHistoryService.deleteHistory(historyId);
|
||||
setHistories(prev => prev.filter(h => h.id !== historyId));
|
||||
onDeleteHistory?.(historyId);
|
||||
showSuccess(t('deleteHistorySuccess'));
|
||||
} catch (error) {
|
||||
showError(t('deleteHistoryFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
if (!loading && hasMore) {
|
||||
loadHistories(page + 1, true);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
// Determine locale for standard date functions
|
||||
const localeMap: Record<string, string> = {
|
||||
'zh': 'zh-CN',
|
||||
'en': 'en-US',
|
||||
'ja': 'ja-JP'
|
||||
};
|
||||
const locale = localeMap[language] || 'ja-JP';
|
||||
|
||||
if (diffDays === 0) {
|
||||
return date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' });
|
||||
} else if (diffDays === 1) {
|
||||
return t('yesterday');
|
||||
} else if (diffDays < 7) {
|
||||
return t('daysAgo', diffDays);
|
||||
} else {
|
||||
return date.toLocaleDateString(locale);
|
||||
}
|
||||
};
|
||||
|
||||
const getGroupNames = (selectedGroups: string[] | null) => {
|
||||
if (!selectedGroups || selectedGroups.length === 0) {
|
||||
return t('allKnowledgeGroups');
|
||||
}
|
||||
return selectedGroups
|
||||
.map(id => groups.find(g => g.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
.join(', ');
|
||||
};
|
||||
|
||||
if (loading && histories.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="text-gray-500">{t('loading')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (histories.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<MessageCircle size={48} className="mx-auto text-gray-300 mb-4" />
|
||||
<div className="text-gray-500">{t('noHistory')}</div>
|
||||
<div className="text-sm text-gray-400 mt-1">{t('noHistoryDesc')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{histories.map((history) => (
|
||||
<div
|
||||
key={history.id}
|
||||
onClick={() => onSelectHistory(history.id)}
|
||||
className="p-4 bg-white rounded-lg border hover:shadow-sm cursor-pointer transition-all group"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-gray-900 truncate mb-1">
|
||||
{history.title}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4 text-sm text-gray-500 mb-2">
|
||||
<div className="flex items-center space-x-1">
|
||||
<MessageCircle size={14} />
|
||||
<span>{t('historyMessages', history.messageCount)}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Clock size={14} />
|
||||
<span>{formatDate(history.lastMessageAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1 text-xs text-gray-400">
|
||||
<Users size={12} />
|
||||
<span>{getGroupNames(history.selectedGroups)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => handleDelete(history.id, e)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-600 transition-all"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hasMore && (
|
||||
<button
|
||||
onClick={loadMore}
|
||||
disabled={loading}
|
||||
className="w-full py-3 text-center text-blue-600 hover:text-blue-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{loading ? t('loading') : t('loadMore')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { RagSearchResult } from '../services/ragService';
|
||||
import { FileText, Star } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface SearchResultsPanelProps {
|
||||
results: RagSearchResult[];
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const SearchResultsPanel: React.FC<SearchResultsPanelProps> = ({ results, isVisible, onClose }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!isVisible || results.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
|
||||
<div className="p-4 border-b border-slate-200 flex justify-between items-center">
|
||||
<h3 className="text-lg font-semibold text-slate-800">{t('searchResults')}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-slate-400 hover:text-slate-600 text-xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto max-h-[60vh] p-4 space-y-4">
|
||||
{results.map((result, index) => (
|
||||
<div key={index} className="border border-slate-200 rounded-lg p-4 hover:bg-slate-50">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<FileText className="w-4 h-4 text-blue-600" />
|
||||
<span className="font-medium text-slate-700">{result.fileName}</span>
|
||||
<div className="flex items-center gap-1 ml-auto">
|
||||
<Star className="w-3 h-3 text-yellow-500" />
|
||||
<span className="text-xs text-slate-500">{result.score.toFixed(3)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 line-clamp-4">{result.content}</p>
|
||||
<div className="mt-2 text-xs text-slate-400">
|
||||
{t('chunkNumber')} #{result.chunkIndex + 1}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchResultsPanel;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import ConfigPanel from './ConfigPanel';
|
||||
import { AppSettings, ModelConfig } from '../types';
|
||||
import { X } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface SettingsDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
settings: AppSettings;
|
||||
models: ModelConfig[];
|
||||
onSettingsChange: (newSettings: AppSettings) => void;
|
||||
onOpenSettings: () => void; // Keeps the "Full Settings" link working if needed, or we might redirect
|
||||
mode?: 'chat' | 'kb' | 'all';
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
settings,
|
||||
models,
|
||||
onSettingsChange,
|
||||
onOpenSettings,
|
||||
mode = 'all',
|
||||
isAdmin = false
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [localSettings, setLocalSettings] = React.useState<AppSettings>(settings);
|
||||
|
||||
// Initial sync
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
setLocalSettings(settings);
|
||||
}
|
||||
}, [isOpen, settings]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleLocalChange = (newSettings: AppSettings) => {
|
||||
setLocalSettings(newSettings);
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
onSettingsChange(localSettings);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-50 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
<div className="absolute inset-y-0 right-0 max-w-md w-full flex">
|
||||
<div className="flex-1 flex flex-col bg-white shadow-xl animate-in slide-in-from-right duration-300">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
|
||||
<h2 className="text-lg font-medium text-gray-900">{t('systemConfiguration')}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<ConfigPanel
|
||||
settings={localSettings}
|
||||
models={models}
|
||||
onSettingsChange={handleLocalChange}
|
||||
onOpenSettings={onOpenSettings}
|
||||
mode={mode}
|
||||
isAdmin={isAdmin}
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-200 bg-gray-50">
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="w-full py-2.5 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors shadow-sm"
|
||||
>
|
||||
{t('confirm')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,562 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ModelConfig, ModelType } from '../types';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { X, Plus, Trash2, Edit2, Save, Cpu, Box, Loader2, User, Shield, Key, LogOut, Globe, Settings as SettingsIcon, Star } from 'lucide-react';
|
||||
import { userService } from '../services/userService';
|
||||
import { settingsService } from '../services/settingsService';
|
||||
import { userSettingService } from '../services/userSettingService';
|
||||
import { knowledgeGroupService } from '../services/knowledgeGroupService';
|
||||
import { modelConfigService } from '../services/modelConfigService';
|
||||
import { useConfirm } from '../contexts/ConfirmContext';
|
||||
import { AppSettings, KnowledgeGroup } from '../types';
|
||||
|
||||
|
||||
interface SettingsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
// Model Props
|
||||
models: ModelConfig[];
|
||||
authToken: string | null;
|
||||
onUpdateModels: (action: 'create' | 'update' | 'delete', model: ModelConfig) => Promise<void>;
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
type TabType = 'general' | 'user' | 'model';
|
||||
|
||||
export const SettingsModal: React.FC<SettingsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
models,
|
||||
authToken,
|
||||
onUpdateModels,
|
||||
onLogout
|
||||
}) => {
|
||||
const { t, language, setLanguage } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
const [activeTab, setActiveTab] = useState<TabType>('general');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// --- Model Manager State ---
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [modelFormData, setModelFormData] = useState<Partial<ModelConfig>>({
|
||||
type: ModelType.LLM,
|
||||
baseUrl: 'http://localhost:11434/v1',
|
||||
modelId: 'llama3',
|
||||
name: '',
|
||||
dimensions: 1536,
|
||||
maxInputTokens: 8191,
|
||||
maxBatchSize: 2048
|
||||
});
|
||||
|
||||
// --- User Management State ---
|
||||
interface UserType {
|
||||
id: string;
|
||||
username: string;
|
||||
isAdmin: boolean;
|
||||
role?: string;
|
||||
createdAt: string;
|
||||
}
|
||||
const [users, setUsers] = useState<UserType[]>([]);
|
||||
const [isUserLoading, setIsUserLoading] = useState(false);
|
||||
const [showAddUser, setShowAddUser] = useState(false);
|
||||
const [newUser, setNewUser] = useState({ username: '', password: '' });
|
||||
const [userSuccess, setUserSuccess] = useState('');
|
||||
|
||||
// --- Change Password State ---
|
||||
const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
|
||||
const [passwordSuccess, setPasswordSuccess] = useState('');
|
||||
|
||||
// --- App Settings State ---
|
||||
const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
|
||||
const [knowledgeGroups, setKnowledgeGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isSettingsLoading, setIsSettingsLoading] = useState(false);
|
||||
const [currentUser, setCurrentUser] = useState<UserType | null>(null);
|
||||
|
||||
// Reset state on open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setActiveTab('general');
|
||||
setError(null);
|
||||
setEditingId(null);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Fetch Users when User tab is active
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (activeTab === 'user') {
|
||||
fetchUsers();
|
||||
} else if (activeTab === 'general') {
|
||||
fetchSettingsAndGroups();
|
||||
}
|
||||
}
|
||||
}, [isOpen, activeTab]);
|
||||
|
||||
const fetchSettingsAndGroups = async () => {
|
||||
if (!authToken) return;
|
||||
setIsSettingsLoading(true);
|
||||
try {
|
||||
const [settings, groups, users, personal] = await Promise.all([
|
||||
userSettingService.get(authToken),
|
||||
knowledgeGroupService.getGroups(),
|
||||
userService.getUsers().catch(() => []), // Regular users might fail this
|
||||
userSettingService.getPersonal(authToken).catch(() => null)
|
||||
]);
|
||||
setAppSettings(settings);
|
||||
setKnowledgeGroups(groups);
|
||||
|
||||
if (personal?.language && personal.language !== language) {
|
||||
setLanguage(personal.language as any);
|
||||
}
|
||||
|
||||
// Temporary way to get current user details since we lack a /me endpoint hook here
|
||||
const tokenPayload = JSON.parse(atob(authToken.split('.')[1]));
|
||||
const me = users.find(u => u.id === tokenPayload.sub) || { isAdmin: tokenPayload.role === 'SUPER_ADMIN' || tokenPayload.role === 'TENANT_ADMIN', role: tokenPayload.role };
|
||||
setCurrentUser(me as any);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings or groups:', error);
|
||||
} finally {
|
||||
setIsSettingsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
// --- General Tab Handlers ---
|
||||
const handleLanguageChange = async (newLanguage: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await settingsService.updateLanguage(newLanguage);
|
||||
setLanguage(newLanguage as any);
|
||||
} catch (error) {
|
||||
console.error('Failed to update language:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setPasswordSuccess('');
|
||||
|
||||
if (passwordForm.new !== passwordForm.confirm) {
|
||||
setError(t('passwordMismatch'));
|
||||
return;
|
||||
}
|
||||
if (passwordForm.new.length < 6) {
|
||||
setError(t('newPasswordMinLength'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await userService.changePassword(passwordForm.current, passwordForm.new);
|
||||
setPasswordSuccess(t('passwordChangeSuccess'));
|
||||
setPasswordForm({ current: '', new: '', confirm: '' });
|
||||
} catch (err: any) {
|
||||
setError(err.message || t('passwordChangeFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- User Tab Handlers ---
|
||||
const fetchUsers = async () => {
|
||||
setIsUserLoading(true);
|
||||
try {
|
||||
const userList = await userService.getUsers();
|
||||
setUsers(userList);
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('getUserListFailed'));
|
||||
} finally {
|
||||
setIsUserLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setUserSuccess('');
|
||||
|
||||
if (newUser.password.length < 6) {
|
||||
setError(t('passwordMinLength'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await userService.createUser(newUser.username, newUser.password);
|
||||
setUserSuccess(t('userCreatedSuccess'));
|
||||
setNewUser({ username: '', password: '' });
|
||||
setShowAddUser(false);
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('createUserFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
// --- Model Tab Handlers ---
|
||||
const handleSaveModel = async () => {
|
||||
if (!authToken) {
|
||||
setError(t('mmErrorNotAuthenticated'));
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
|
||||
if (!modelFormData.name?.trim()) { setError(t('mmErrorNameRequired')); return; }
|
||||
if (!modelFormData.modelId?.trim()) { setError(t('mmErrorModelIdRequired')); return; }
|
||||
if (!modelFormData.baseUrl?.trim()) { setError(t('mmErrorBaseUrlRequired')); return; }
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const saveData = { ...modelFormData } as ModelConfig;
|
||||
await onUpdateModels(editingId === 'new' ? 'create' : 'update', saveData);
|
||||
setEditingId(null);
|
||||
} catch (err: any) {
|
||||
setError(err.message || t('errorGeneric'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteModel = async (id: string) => {
|
||||
if (await confirm(t('confirmClear'))) {
|
||||
await onUpdateModels('delete', { id } as ModelConfig);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetDefault = async (id: string) => {
|
||||
if (!authToken) {
|
||||
setError(t('mmErrorNotAuthenticated'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await modelConfigService.setDefault(authToken, id);
|
||||
// Reload page to fetch model list again
|
||||
window.location.reload();
|
||||
} catch (err: any) {
|
||||
setError(err.message || t('defaultSettingFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeLabel = (type: ModelType) => {
|
||||
switch (type) {
|
||||
case ModelType.LLM: return t('typeLLM');
|
||||
case ModelType.EMBEDDING: return t('typeEmbedding');
|
||||
case ModelType.RERANK: return t('typeRerank');
|
||||
case ModelType.VISION: return t('typeVision');
|
||||
}
|
||||
};
|
||||
|
||||
// --- Render Functions ---
|
||||
|
||||
const renderGeneralTab = () => (
|
||||
<div className="space-y-8 animate-in slide-in-from-right duration-300">
|
||||
{/* Language section */}
|
||||
<section>
|
||||
<h3 className="text-sm font-medium text-slate-500 mb-3 flex items-center gap-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
{t('languageSettings')}
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{(['zh', 'en', 'ja'] as const).map((lang) => (
|
||||
<button
|
||||
key={lang}
|
||||
onClick={() => handleLanguageChange(lang)}
|
||||
disabled={isLoading}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors border ${language === lang
|
||||
? 'bg-blue-50 border-blue-200 text-blue-700'
|
||||
: 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{lang === 'zh' ? 'Chinese' : lang === 'en' ? 'English' : 'Japanese'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Change Password Section */}
|
||||
<section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
|
||||
<h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-blue-500" />
|
||||
{t('changePassword')}
|
||||
</h3>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4 max-w-sm">
|
||||
<input type="hidden" name="username" value="current-user" autoComplete="username" />
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
placeholder={t('currentPassword')}
|
||||
value={passwordForm.current}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, current: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
placeholder={t('newPassword')}
|
||||
value={passwordForm.new}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, new: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder={t('confirmPassword')}
|
||||
value={passwordForm.confirm}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
{passwordSuccess && <p className="text-xs text-green-600">{passwordSuccess}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-2 bg-slate-800 text-white rounded-md text-sm hover:bg-slate-900 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="w-4 h-4 animate-spin mx-auto" /> : t('confirmChange')}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{/* Logout Section */}
|
||||
<section className="pt-4 border-t border-slate-200">
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className="flex items-center gap-2 text-red-600 hover:bg-red-50 px-4 py-2 rounded-lg transition-colors text-sm font-medium"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
{t('logout')}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderUserTab = () => (
|
||||
<div className="space-y-4 animate-in slide-in-from-right duration-300">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-medium text-slate-700">{t('userList')}</h3>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => setShowAddUser(!showAddUser)}
|
||||
className="flex items-center gap-1 text-sm bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('addUser')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAddUser && (
|
||||
<form onSubmit={handleCreateUser} className="bg-slate-50 p-4 rounded-lg border border-slate-200 mb-4 space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('username')}
|
||||
value={newUser.username}
|
||||
onChange={e => setNewUser({ ...newUser, username: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md"
|
||||
required
|
||||
autoComplete="username"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder={t('password')}
|
||||
value={newUser.password}
|
||||
onChange={e => setNewUser({ ...newUser, password: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button type="button" onClick={() => setShowAddUser(false)} className="text-xs text-slate-500 hover:text-slate-700 px-2 py-1">{t('cancel')}</button>
|
||||
<button type="submit" className="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">{t('create')}</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
{userSuccess && <p className="text-xs text-green-600 mb-2">{userSuccess}</p>}
|
||||
|
||||
<div className="space-y-2 max-h-[60vh] overflow-y-auto">
|
||||
{users.map(user => (
|
||||
<div key={user.id} className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-full ${user.isAdmin ? 'bg-orange-100 text-orange-600' : 'bg-slate-100 text-slate-600'}`}>
|
||||
{user.isAdmin ? <Shield className="w-4 h-4" /> : <User className="w-4 h-4" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-800">{user.username}</p>
|
||||
<p className="text-xs text-slate-400">{new Date(user.createdAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 bg-slate-50 px-2 py-1 rounded">
|
||||
{user.isAdmin ? t('admin') : t('user')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderModelTab = () => (
|
||||
<div className="animate-in slide-in-from-right duration-300">
|
||||
{editingId ? (
|
||||
<div className="bg-white p-6 rounded-lg border border-blue-100 shadow-sm space-y-4">
|
||||
<h3 className="font-semibold text-slate-700 mb-4">{editingId === 'new' ? t('mmAddBtn') : t('mmEdit')}</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormName')} *</label>
|
||||
<input className="w-full text-sm border rounded-md px-3 py-2" value={modelFormData.name} onChange={e => setModelFormData({ ...modelFormData, name: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormModelId')} *</label>
|
||||
<input className="w-full text-sm border rounded-md px-3 py-2 font-mono" value={modelFormData.modelId} onChange={e => setModelFormData({ ...modelFormData, modelId: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormType')} *</label>
|
||||
<select className="w-full text-sm border rounded-md px-3 py-2" value={modelFormData.type} onChange={e => setModelFormData({ ...modelFormData, type: e.target.value as ModelType })} disabled={isLoading}>
|
||||
<option value={ModelType.LLM}>{t('typeLLM')}</option>
|
||||
<option value={ModelType.EMBEDDING}>{t('typeEmbedding')}</option>
|
||||
<option value={ModelType.RERANK}>{t('typeRerank')}</option>
|
||||
<option value={ModelType.VISION}>{t('typeVision')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">{t('mmFormBaseUrl')} *</label>
|
||||
<input className="w-full text-sm border rounded-md px-3 py-2 font-mono" value={modelFormData.baseUrl} onChange={e => setModelFormData({ ...modelFormData, baseUrl: e.target.value })} disabled={isLoading} autoComplete="off" />
|
||||
</div>
|
||||
|
||||
{modelFormData.type === ModelType.EMBEDDING && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">Max Input</label>
|
||||
<input type="number" className="w-full text-sm border rounded px-3 py-2" value={modelFormData.maxInputTokens || 8191} onChange={e => setModelFormData({ ...modelFormData, maxInputTokens: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">Dimensions</label>
|
||||
<input type="number" className="w-full text-sm border rounded px-3 py-2" value={modelFormData.dimensions || 1536} onChange={e => setModelFormData({ ...modelFormData, dimensions: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={() => { setEditingId(null); setError(null); }} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg">{t('mmCancel')}</button>
|
||||
<button onClick={handleSaveModel} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg flex items-center gap-2" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
{t('mmSave')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{models.map(model => (
|
||||
<div key={model.id} className="bg-white border border-slate-200 rounded-lg p-3 flex justify-between items-start">
|
||||
<div className="flex gap-3 flex-1">
|
||||
<div className="w-10 h-10 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center"><Cpu className="w-5 h-5" /></div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="font-semibold text-sm text-slate-800">{model.name}</h4>
|
||||
{model.isDefault && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-50 text-amber-700 text-xs font-medium rounded-full border border-amber-200">
|
||||
<Star className="w-3 h-3 fill-amber-500 text-amber-500" />
|
||||
{t('defaultBadge')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs text-slate-500">
|
||||
<span className="bg-slate-100 px-1 rounded">{getTypeLabel(model.type)}</span>
|
||||
<span className="font-mono">{model.modelId}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button onClick={() => { setEditingId(model.id); setModelFormData({ ...model }); }} className="p-2 text-slate-400 hover:text-blue-600"><Edit2 className="w-4 h-4" /></button>
|
||||
<button onClick={() => handleDeleteModel(model.id)} className="p-2 text-slate-400 hover:text-red-600"><Trash2 className="w-4 h-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={() => { setEditingId('new'); setModelFormData({ type: ModelType.LLM, baseUrl: 'http://localhost:11434/v1', modelId: 'llama3', name: '', dimensions: 1536 }); }} className="w-full py-3 border-2 border-dashed border-slate-200 rounded-lg text-slate-500 hover:border-blue-400 hover:text-blue-600 flex justify-center gap-2 items-center">
|
||||
<Plus className="w-5 h-5" /> {t('mmAddBtn')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-4xl h-[80vh] flex overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-slate-50 border-r border-slate-200 flex flex-col">
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
|
||||
<SettingsIcon className="w-6 h-6 text-blue-600" />
|
||||
{t('settings')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 space-y-1">
|
||||
<button onClick={() => setActiveTab('general')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'general' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
|
||||
<Globe className="w-5 h-5" /> {t('generalSettings')}
|
||||
</button>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button onClick={() => setActiveTab('user')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'user' ? 'bg-white text-purple-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
|
||||
<User className="w-5 h-5" /> {t('userManagement')}
|
||||
</button>
|
||||
)}
|
||||
{currentUser?.role !== 'USER' && (
|
||||
<button onClick={() => setActiveTab('model')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'model' ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-600 hover:bg-slate-100'}`}>
|
||||
<Cpu className="w-5 h-5" /> {t('modelManagement')}
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-100">
|
||||
<h3 className="text-lg font-semibold text-slate-800">
|
||||
{activeTab === 'general' ? t('generalSettings') : activeTab === 'user' ? t('userManagement') : t('modelManagement')}
|
||||
</h3>
|
||||
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-full transition-colors"><X className="w-5 h-5 text-slate-500" /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 bg-white">
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 text-red-700 rounded-lg flex gap-2 items-start text-sm">
|
||||
<span className="font-bold">Error:</span> {error}
|
||||
</div>
|
||||
)}
|
||||
{activeTab === 'general' && renderGeneralTab()}
|
||||
{activeTab === 'user' && currentUser?.role === 'SUPER_ADMIN' && renderUserTab()}
|
||||
{activeTab === 'model' && currentUser?.role !== 'USER' && renderModelTab()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { X, FileText, Copy, Check, Star, Hash } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
import { ChatSource } from '../services/chatService';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import { copyToClipboard } from '../utils/clipboard';
|
||||
|
||||
interface SourcePreviewDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
source: ChatSource | null;
|
||||
onOpenFile?: (source: ChatSource) => void;
|
||||
}
|
||||
|
||||
export const SourcePreviewDrawer: React.FC<SourcePreviewDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
source,
|
||||
onOpenFile
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const { showSuccess } = useToast();
|
||||
const [isCopied, setIsCopied] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOpen) {
|
||||
setIsCopied(false);
|
||||
}
|
||||
}, [isOpen, source]);
|
||||
|
||||
if (!isOpen || !source) return null;
|
||||
|
||||
const handleCopy = async () => {
|
||||
const success = await copyToClipboard(source.content);
|
||||
if (success) {
|
||||
setIsCopied(true);
|
||||
showSuccess(t('copySuccess'));
|
||||
setTimeout(() => setIsCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm transition-opacity"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="fixed right-0 top-0 h-full w-full max-w-lg bg-white shadow-2xl z-[101] transform transition-transform duration-300 ease-in-out animate-in slide-in-from-right flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-5 border-b border-slate-100 bg-slate-50 shrink-0 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
<FileText className="w-5 h-5 text-blue-600 shrink-0" />
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
{source.fileId ? (
|
||||
<button
|
||||
onClick={() => onOpenFile?.(source)}
|
||||
className="text-lg font-bold text-slate-800 truncate hover:text-blue-600 hover:underline text-left transition-colors"
|
||||
title={source.fileName}
|
||||
>
|
||||
{source.fileName}
|
||||
</button>
|
||||
) : (
|
||||
<h2 className="text-lg font-bold text-slate-800 truncate" title={source.fileName}>
|
||||
{source.fileName}
|
||||
</h2>
|
||||
)}
|
||||
<span className="text-xs text-slate-500">{t('sourcePreview')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-slate-200 rounded-full transition-colors active:scale-90"
|
||||
>
|
||||
<X className="w-5 h-5 text-slate-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-6">
|
||||
{/* Meta Info */}
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg border border-blue-100">
|
||||
<Star className="w-4 h-4" />
|
||||
<span className="font-medium">{(source.score * 100).toFixed(1)}% {t('matchScore')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-600 rounded-lg border border-slate-200">
|
||||
<Hash className="w-4 h-4" />
|
||||
<span className="font-medium">#{source.chunkIndex + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="bg-slate-50 rounded-xl border border-slate-200 p-1 relative group">
|
||||
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="p-2 bg-white/80 backdrop-blur hover:bg-white text-slate-500 hover:text-blue-600 rounded-lg border border-slate-200 shadow-sm transition-all"
|
||||
title={t('copyContent')}
|
||||
>
|
||||
{isCopied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 overflow-x-auto whitespace-pre-wrap text-slate-700 text-sm leading-relaxed font-mono">
|
||||
{source.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>,
|
||||
document.body
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,86 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { CheckCircle, AlertCircle, XCircle, Info, X } from 'lucide-react';
|
||||
|
||||
export type ToastType = 'success' | 'error' | 'warning' | 'info';
|
||||
|
||||
export interface ToastProps {
|
||||
type: ToastType;
|
||||
title?: string;
|
||||
message: string;
|
||||
duration?: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const Toast: React.FC<ToastProps> = ({ type, title, message, duration = 5000, onClose }) => {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(false);
|
||||
setTimeout(onClose, 300); // Wait for animation to complete
|
||||
}, duration);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [duration, onClose]);
|
||||
|
||||
const getIcon = () => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return <CheckCircle className="w-5 h-5 text-green-500" />;
|
||||
case 'error':
|
||||
return <XCircle className="w-5 h-5 text-red-500" />;
|
||||
case 'warning':
|
||||
return <AlertCircle className="w-5 h-5 text-yellow-500" />;
|
||||
case 'info':
|
||||
return <Info className="w-5 h-5 text-blue-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStyles = () => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return 'bg-green-50 border-green-200 text-green-800';
|
||||
case 'error':
|
||||
return 'bg-red-50 border-red-200 text-red-800';
|
||||
case 'warning':
|
||||
return 'bg-yellow-50 border-yellow-200 text-yellow-800';
|
||||
case 'info':
|
||||
return 'bg-blue-50 border-blue-200 text-blue-800';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative w-full transition-all duration-300 ease-in-out ${isVisible ? 'translate-x-0 opacity-100 max-h-40 mb-3' : 'translate-x-full opacity-0 max-h-0 mb-0 overflow-hidden'
|
||||
}`}
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className={`rounded-lg border shadow-lg p-4 ${getStyles()}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
{getIcon()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
{title && (
|
||||
<p className="text-sm font-semibold mb-1">{title}</p>
|
||||
)}
|
||||
<p className="text-sm break-words">{message}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsVisible(false);
|
||||
setTimeout(onClose, 300);
|
||||
}}
|
||||
className="flex-shrink-0 ml-2 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Toast;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { User, Shield, UserRound } from 'lucide-react';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface UserInfoDisplayProps {
|
||||
currentUser: any;
|
||||
}
|
||||
|
||||
export const UserInfoDisplay: React.FC<UserInfoDisplayProps> = ({ currentUser }) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
if (!currentUser) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-4 py-3 bg-slate-900 border-b border-slate-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white">
|
||||
<UserRound size={18} />
|
||||
</div>
|
||||
{currentUser.isAdmin && (
|
||||
<div className="absolute -bottom-1 -right-1 bg-orange-500 rounded-full p-1 border-2 border-slate-900">
|
||||
<Shield size={10} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-white truncate">{currentUser.displayName || currentUser.username}</p>
|
||||
{currentUser.isAdmin && (
|
||||
<span className="text-xs px-2 py-0.5 bg-orange-500/20 text-orange-300 rounded-full border border-orange-500/30">
|
||||
{t('admin')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 truncate">
|
||||
ID: {currentUser.id?.substring(0, 8)}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Eye } from 'lucide-react';
|
||||
import { settingsService } from '../services/settingsService';
|
||||
import { useLanguage } from '../contexts/LanguageContext';
|
||||
|
||||
interface VisionModel {
|
||||
id: string;
|
||||
name: string;
|
||||
modelId: string;
|
||||
}
|
||||
|
||||
interface VisionModelSelectorProps {
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
const VisionModelSelector: React.FC<VisionModelSelectorProps> = ({ isAdmin = false }) => {
|
||||
const { t } = useLanguage();
|
||||
const [visionModels, setVisionModels] = useState<VisionModel[]>([]);
|
||||
const [selectedModelId, setSelectedModelId] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
const [models, current] = await Promise.all([
|
||||
settingsService.getVisionModels(),
|
||||
settingsService.getVisionModel()
|
||||
]);
|
||||
console.log('Vision models loaded:', models);
|
||||
console.log('Current vision model:', current);
|
||||
setVisionModels(models || []);
|
||||
setSelectedModelId(current?.visionModelId || '');
|
||||
} catch (error) {
|
||||
console.error(t('loadVisionModelFailed'), error);
|
||||
setError(t('loadFailed'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = async (modelId: string) => {
|
||||
try {
|
||||
setSelectedModelId(modelId);
|
||||
await settingsService.updateVisionModel(modelId);
|
||||
} catch (error) {
|
||||
console.error(t('saveVisionModelFailed'), error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-4 text-slate-800 font-semibold border-b border-slate-100 pb-2">
|
||||
<Eye className="w-4 h-4 text-purple-600" />
|
||||
{t('visionModelSettings')}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1.5">
|
||||
{t('defaultVisionModel')}
|
||||
</label>
|
||||
{error ? (
|
||||
<div className="text-red-500 text-sm p-2 bg-red-50 rounded">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<select
|
||||
value={selectedModelId}
|
||||
onChange={(e) => handleChange(e.target.value)}
|
||||
disabled={loading || !isAdmin}
|
||||
className="w-full text-sm bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-slate-700 focus:outline-none focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<option value="">--- {t('selectVisionModel')} ---</option>
|
||||
{visionModels.map(model => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name} ({model.modelId})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<p className="text-[10px] text-slate-400 mt-1">
|
||||
{t('visionModelHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisionModelSelector;
|
||||
@@ -0,0 +1,174 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { X, Box, Loader2, Trash2 } from 'lucide-react';
|
||||
import { importService, ImportTask } from '../../services/importService';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { KnowledgeGroup } from '../../types';
|
||||
|
||||
interface ImportTasksDrawerProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
authToken: string;
|
||||
}
|
||||
|
||||
export const ImportTasksDrawer: React.FC<ImportTasksDrawerProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
authToken,
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
const [importTasks, setImportTasks] = useState<ImportTask[]>([]);
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!authToken) return;
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const [tasks, groupsData] = await Promise.all([
|
||||
importService.getAll(authToken),
|
||||
knowledgeGroupService.getGroups()
|
||||
]);
|
||||
setImportTasks(tasks);
|
||||
|
||||
// Flatten the groups tree so we can easily find names by ID
|
||||
const flat: KnowledgeGroup[] = [];
|
||||
const walk = (items: KnowledgeGroup[]) => {
|
||||
for (const g of items) {
|
||||
flat.push(g);
|
||||
if (g.children?.length) walk(g.children);
|
||||
}
|
||||
};
|
||||
if (groupsData) walk(groupsData);
|
||||
setGroups(flat);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch data:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (taskId: string) => {
|
||||
if (!window.confirm(t('confirmDeleteTask'))) return;
|
||||
try {
|
||||
await importService.delete(authToken, taskId);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete task:', error);
|
||||
alert(t('deleteTaskFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchData();
|
||||
}
|
||||
}, [isOpen, authToken]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex justify-end">
|
||||
<div className="absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity" onClick={onClose} />
|
||||
|
||||
<div className="relative w-full max-w-4xl bg-white shadow-2xl flex flex-col h-full animate-in slide-in-from-right duration-300">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between shrink-0 bg-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<Box size={16} />
|
||||
</div>
|
||||
<h2 className="text-lg font-bold text-slate-800">{t('importTasksTitle')}</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-slate-50 rounded-lg transition-all"
|
||||
title={t('refresh')}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-full transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6 bg-slate-50/30">
|
||||
{isLoading ? (
|
||||
<div className="p-12 flex justify-center">
|
||||
<Loader2 className="animate-spin text-slate-300 w-8 h-8" />
|
||||
</div>
|
||||
) : importTasks.length === 0 ? (
|
||||
<div className="p-12 text-center text-slate-400 flex flex-col items-center">
|
||||
<Box size={48} className="mb-4 opacity-20" />
|
||||
<span className="text-sm font-bold uppercase tracking-widest">{t('noTasksFound')}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200/60 bg-slate-50/50 text-[10px] font-black uppercase tracking-widest text-slate-500">
|
||||
<th className="px-6 py-4">{t('sourcePath')}</th>
|
||||
<th className="px-6 py-4">{t('targetGroup')}</th>
|
||||
<th className="px-6 py-4">{t('status')}</th>
|
||||
<th className="px-6 py-4">{t('scheduledAt')}</th>
|
||||
<th className="px-6 py-4">{t('createdAt')}</th>
|
||||
<th className="px-6 py-4 text-right">{t('actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100/80 text-sm">
|
||||
{importTasks.map(task => (
|
||||
<tr key={task.id} className="hover:bg-slate-50/50 transition-colors">
|
||||
<td className="px-6 py-4 text-slate-900 font-medium">
|
||||
{task.sourcePath}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-500">
|
||||
{groups.find((g: any) => g.id === task.targetGroupId)?.name || task.targetGroupName || task.targetGroupId || '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-2 py-1 rounded-md text-xs font-bold ${task.status === 'COMPLETED' ? 'bg-emerald-100 text-emerald-700' :
|
||||
task.status === 'FAILED' ? 'bg-red-100 text-red-700' :
|
||||
task.status === 'PROCESSING' ? 'bg-blue-100 text-blue-700' :
|
||||
'bg-amber-100 text-amber-700'
|
||||
}`}>
|
||||
{task.status}
|
||||
</span>
|
||||
{task.status === 'FAILED' && task.logs && (
|
||||
<div className="text-xs text-red-500 mt-1 max-w-xs truncate" title={task.logs}>
|
||||
{task.logs}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-500">
|
||||
{task.scheduledAt ? new Date(task.scheduledAt).toLocaleString() : '-'}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-400 text-xs">
|
||||
{new Date(task.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => handleDelete(task.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title={t('delete')}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { SidebarRail, NavItem } from './SidebarRail';
|
||||
import { Database } from 'lucide-react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
|
||||
interface AdminLayoutProps {
|
||||
children: React.ReactNode;
|
||||
currentView: string;
|
||||
onViewChange: (view: string) => void;
|
||||
onLogout: () => void;
|
||||
currentUser: any;
|
||||
appMode?: 'workspace' | 'admin';
|
||||
onSwitchMode?: () => void;
|
||||
}
|
||||
|
||||
export const AdminLayout: React.FC<AdminLayoutProps> = ({
|
||||
children, currentView, onViewChange, onLogout, currentUser, appMode, onSwitchMode
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: 'knowledge', icon: Database, label: t('navKnowledge') }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className='flex h-screen w-full bg-slate-50 overflow-hidden relative'>
|
||||
<SidebarRail
|
||||
currentView={currentView}
|
||||
onViewChange={onViewChange}
|
||||
onLogout={onLogout}
|
||||
currentUser={currentUser}
|
||||
navItems={navItems}
|
||||
appMode={appMode}
|
||||
onSwitchMode={onSwitchMode}
|
||||
/>
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,252 @@
|
||||
import React, { useState } from 'react'
|
||||
import { MessageSquare, Book, Mic, Settings, LogOut, Database, ChevronRight, ChevronLeft, Menu, Globe, DownloadCloud, User } from 'lucide-react'
|
||||
import { Logo } from '../Logo'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { UserInfoDisplay } from '../UserInfoDisplay'
|
||||
|
||||
export type ViewType = 'chat' | 'knowledge' | 'notebooks' | 'settings' | string;
|
||||
|
||||
export interface NavItem {
|
||||
id: ViewType;
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SidebarRailProps {
|
||||
currentView: ViewType;
|
||||
onViewChange: (view: ViewType) => void;
|
||||
onLogout?: () => void;
|
||||
onOpenSettings?: () => void;
|
||||
currentUser?: any;
|
||||
navItems: NavItem[];
|
||||
appMode?: 'workspace' | 'admin';
|
||||
onSwitchMode?: () => void;
|
||||
}
|
||||
|
||||
export const SidebarRail: React.FC<SidebarRailProps> = ({ currentView, onViewChange, onLogout, currentUser, navItems, appMode, onSwitchMode }) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const { language, setLanguage, t } = useLanguage()
|
||||
|
||||
const handleLanguageCycle = () => {
|
||||
const langs = ['zh', 'en', 'ja'] as const
|
||||
const currentIndex = langs.indexOf(language as any)
|
||||
const nextIndex = (currentIndex + 1) % langs.length
|
||||
setLanguage(langs[nextIndex])
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
${isExpanded ? 'w-64' : 'w-20'}
|
||||
bg-slate-950 flex flex-col py-6 shrink-0 z-50 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] border-r border-slate-800
|
||||
`}>
|
||||
{/* Header / Logo */}
|
||||
<div className={`mb-8 flex items-center ${isExpanded ? 'px-6 justify-between' : 'justify-center'}`}>
|
||||
<div className="flex items-center justify-center shrink-0 cursor-default">
|
||||
<Logo size={isExpanded ? 32 : 40} withText={isExpanded} />
|
||||
</div>
|
||||
{isExpanded && appMode && (
|
||||
<span className={`ml-2 px-2 py-0.5 text-xs font-semibold rounded-md ${appMode === 'admin' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'}`}>
|
||||
{appMode === 'admin' ? 'Admin' : 'Workspace'}
|
||||
</span>
|
||||
)}
|
||||
{isExpanded && (
|
||||
<button
|
||||
onClick={() => setIsExpanded(false)}
|
||||
className="text-slate-500 hover:text-slate-300 transition-colors p-1 rounded-full hover:bg-slate-800/50 ml-auto"
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current User Display - only when expanded */}
|
||||
{isExpanded && currentUser && (
|
||||
<div className="px-2 mb-4">
|
||||
<UserInfoDisplay currentUser={currentUser} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation items */}
|
||||
<div className="flex-1 flex flex-col space-y-2 w-full px-3">
|
||||
{navItems.map((item) => {
|
||||
// Determine active tab based on current route
|
||||
const isActive = currentView === item.id;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onViewChange(item.id)}
|
||||
draggable="false"
|
||||
className={`
|
||||
py-3 px-3 rounded-xl transition-all duration-300 group relative flex items-center outline-none
|
||||
${isExpanded ? 'justify-start' : 'justify-center'}
|
||||
${isActive
|
||||
? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/25'
|
||||
: 'text-slate-400 hover:bg-white/5 hover:text-slate-200'
|
||||
}
|
||||
`}
|
||||
title={!isExpanded ? item.label : undefined}
|
||||
>
|
||||
<item.icon size={20} strokeWidth={isActive ? 2.5 : 2} className={`shrink-0 transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-110'}`} />
|
||||
|
||||
<span className={`
|
||||
ml-3 font-medium whitespace-nowrap overflow-hidden transition-all duration-300
|
||||
${isExpanded ? 'opacity-100 w-auto translate-x-0' : 'opacity-0 w-0 -translate-x-4 absolute'}
|
||||
`}>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
{/* Tooltip (only when collapsed) */}
|
||||
{!isExpanded && (
|
||||
<span className="
|
||||
absolute left-full ml-4 bg-slate-900 text-slate-200 text-xs px-2.5 py-1.5 rounded-md
|
||||
opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50
|
||||
top-1/2 -translate-y-1/2 shadow-xl border border-slate-800 translate-x-[-8px] group-hover:translate-x-0
|
||||
">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer / Settings / Toggle */}
|
||||
<div className="flex flex-col space-y-2 w-full px-3 mt-auto">
|
||||
{/* Toggle Button (When collapsed, show here to expand) */}
|
||||
{!isExpanded && (
|
||||
<button
|
||||
onClick={() => setIsExpanded(true)}
|
||||
className="p-3 rounded-xl text-slate-500 hover:bg-white/5 hover:text-slate-300 transition-all flex justify-center mb-2"
|
||||
title={t('expandMenu')}
|
||||
>
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Settings Button */}
|
||||
<button
|
||||
onClick={() => onViewChange('settings')}
|
||||
className={`
|
||||
py-3 px-3 rounded-xl transition-all duration-300 flex items-center group relative outline-none
|
||||
${isExpanded ? 'justify-start' : 'justify-center'}
|
||||
${currentView === 'settings'
|
||||
? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-500/25'
|
||||
: 'text-slate-400 hover:bg-white/5 hover:text-slate-200'
|
||||
}
|
||||
`}
|
||||
title={!isExpanded ? t('settings') : undefined}
|
||||
>
|
||||
<Settings size={20} className={`shrink-0 transition-transform duration-300 ${currentView === 'settings' ? 'rotate-90' : 'group-hover:rotate-45'}`} />
|
||||
<span className={`
|
||||
ml-3 font-medium whitespace-nowrap overflow-hidden transition-all duration-300
|
||||
${isExpanded ? 'opacity-100 w-auto' : 'opacity-0 w-0 absolute'}
|
||||
`}>
|
||||
{t('settings')}
|
||||
</span>
|
||||
{!isExpanded && (
|
||||
<span className="
|
||||
absolute left-full ml-4 bg-slate-900 text-slate-200 text-xs px-2.5 py-1.5 rounded-md
|
||||
opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50
|
||||
top-1/2 -translate-y-1/2 shadow-xl border border-slate-800 translate-x-[-8px] group-hover:translate-x-0
|
||||
">
|
||||
{t('settings')}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* App Switcher for Admins */}
|
||||
{currentUser?.isAdmin && onSwitchMode && (
|
||||
<button
|
||||
onClick={onSwitchMode}
|
||||
className={`
|
||||
py-3 px-3 rounded-xl transition-all duration-300 flex items-center group relative outline-none
|
||||
${isExpanded ? 'justify-start' : 'justify-center'}
|
||||
text-slate-400 hover:bg-white/5 hover:text-slate-200
|
||||
`}
|
||||
title={!isExpanded ? (appMode === 'admin' ? t('backToWorkspace') || 'Workspace' : t('goToAdmin') || 'Admin Dashboard') : undefined}
|
||||
>
|
||||
{appMode === 'admin' ? (
|
||||
<User size={20} className="shrink-0 group-hover:scale-110 transition-transform duration-300" />
|
||||
) : (
|
||||
<Database size={20} className="shrink-0 group-hover:scale-110 transition-transform duration-300" />
|
||||
)}
|
||||
<span className={`
|
||||
ml-3 font-medium whitespace-nowrap overflow-hidden transition-all duration-300
|
||||
${isExpanded ? 'opacity-100 w-auto' : 'opacity-0 w-0 absolute'}
|
||||
`}>
|
||||
{appMode === 'admin' ? t('backToWorkspace') || 'Workspace' : t('goToAdmin') || 'Admin'}
|
||||
</span>
|
||||
{!isExpanded && (
|
||||
<span className="
|
||||
absolute left-full ml-4 bg-slate-900 text-slate-200 text-xs px-2.5 py-1.5 rounded-md
|
||||
opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50
|
||||
top-1/2 -translate-y-1/2 shadow-xl border border-slate-800 translate-x-[-8px] group-hover:translate-x-0
|
||||
">
|
||||
{appMode === 'admin' ? t('backToWorkspace') || 'Workspace' : t('goToAdmin') || 'Admin'}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Language Switcher */}
|
||||
<button
|
||||
onClick={handleLanguageCycle}
|
||||
className={`
|
||||
py-3 px-3 rounded-xl transition-all duration-300 flex items-center group relative outline-none
|
||||
${isExpanded ? 'justify-start' : 'justify-center'}
|
||||
text-slate-400 hover:bg-white/5 hover:text-slate-200
|
||||
`}
|
||||
title={!isExpanded ? t('switchLanguage') : undefined}
|
||||
>
|
||||
<Globe size={20} className="shrink-0 group-hover:scale-110 transition-transform duration-300" />
|
||||
<span className={`
|
||||
ml-3 font-medium whitespace-nowrap overflow-hidden transition-all duration-300
|
||||
${isExpanded ? 'opacity-100 w-auto' : 'opacity-0 w-0 absolute'}
|
||||
`}>
|
||||
{language === 'ja' ? t('langJa') : language === 'en' ? t('langEn') : t('langZh')}
|
||||
</span>
|
||||
{!isExpanded && (
|
||||
<span className="
|
||||
absolute left-full ml-4 bg-slate-900 text-slate-200 text-xs px-2.5 py-1.5 rounded-md
|
||||
opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50
|
||||
top-1/2 -translate-y-1/2 shadow-xl border border-slate-800 translate-x-[-8px] group-hover:translate-x-0
|
||||
">
|
||||
{t('switchLanguage')}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Logout Button */}
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className={`
|
||||
py-3 px-3 rounded-xl transition-all duration-300 flex items-center group relative outline-none
|
||||
${isExpanded ? 'justify-start' : 'justify-center'}
|
||||
text-slate-400 hover:bg-red-500/10 hover:text-red-400
|
||||
`}
|
||||
title={!isExpanded ? t('logout') : undefined}
|
||||
>
|
||||
<LogOut size={20} className="shrink-0 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
<span className={`
|
||||
ml-3 font-medium whitespace-nowrap overflow-hidden transition-all duration-300
|
||||
${isExpanded ? 'opacity-100 w-auto' : 'opacity-0 w-0 absolute'}
|
||||
`}>
|
||||
{t('logout')}
|
||||
</span>
|
||||
{!isExpanded && (
|
||||
<span className="
|
||||
absolute left-full ml-4 bg-slate-900 text-slate-200 text-xs px-2.5 py-1.5 rounded-md
|
||||
opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50
|
||||
top-1/2 -translate-y-1/2 shadow-xl border border-slate-800 translate-x-[-8px] group-hover:translate-x-0
|
||||
">
|
||||
{t('logout')}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { SidebarRail, NavItem } from './SidebarRail';
|
||||
import { MessageSquare, Book } from 'lucide-react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
|
||||
interface WorkspaceLayoutProps {
|
||||
children: React.ReactNode;
|
||||
currentView: string;
|
||||
onViewChange: (view: string) => void;
|
||||
onLogout: () => void;
|
||||
currentUser: any;
|
||||
appMode?: 'workspace' | 'admin';
|
||||
onSwitchMode?: () => void;
|
||||
}
|
||||
|
||||
export const WorkspaceLayout: React.FC<WorkspaceLayoutProps> = ({
|
||||
children, currentView, onViewChange, onLogout, currentUser, appMode, onSwitchMode
|
||||
}) => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: 'chat', icon: MessageSquare, label: t('navChat') },
|
||||
{ id: 'notebooks', icon: Book, label: t('navKnowledgeGroups') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className='flex h-screen w-full bg-slate-50 overflow-hidden relative'>
|
||||
<SidebarRail
|
||||
currentView={currentView}
|
||||
onViewChange={onViewChange}
|
||||
onLogout={onLogout}
|
||||
currentUser={currentUser}
|
||||
navItems={navItems}
|
||||
appMode={appMode}
|
||||
onSwitchMode={onSwitchMode}
|
||||
/>
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,328 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Users, FileText, Award, TrendingUp, Calendar, Filter, Download, ChevronDown } from 'lucide-react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useAuth } from '../../src/contexts/AuthContext';
|
||||
import { assessmentStatsService, AssessmentStats, StatsQueryParams } from '../../src/services/assessmentStatsService';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { AssessmentTemplate } from '../../types';
|
||||
import { KnowledgeGroup } from '../../types';
|
||||
import { cn } from '../../src/utils/cn';
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
subtitle?: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const StatCard: React.FC<StatCardProps> = ({ title, value, subtitle, icon: Icon, color }) => (
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-500">{title}</p>
|
||||
<p className="text-3xl font-bold mt-1" style={{ color }}>{value}</p>
|
||||
{subtitle && <p className="text-xs text-slate-400 mt-1">{subtitle}</p>}
|
||||
</div>
|
||||
<div className={cn("w-12 h-12 rounded-xl flex items-center justify-center", `bg-${color}/10`)}>
|
||||
<Icon className={cn("w-6 h-6", `text-${color}`)} style={{ color }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const AssessmentStatsView: React.FC = () => {
|
||||
const { language, t } = useLanguage();
|
||||
const { user } = useAuth();
|
||||
const [stats, setStats] = useState<AssessmentStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filters, setFilters] = useState<StatsQueryParams>({});
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const isAdmin = user?.role === 'admin' || user?.role === 'super_admin';
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [templatesData, groupsData] = await Promise.all([
|
||||
templateService.getAll(),
|
||||
knowledgeGroupService.getGroups(),
|
||||
]);
|
||||
setTemplates(templatesData);
|
||||
setGroups(groupsData);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch options:', err);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await assessmentStatsService.getStats(filters);
|
||||
setStats(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch stats:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, [filters]);
|
||||
|
||||
const handleFilterChange = (key: keyof StatsQueryParams, value: string) => {
|
||||
setFilters(prev => ({ ...prev, [key]: value || undefined }));
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
if (!stats?.recentRecords) return;
|
||||
const csv = [
|
||||
['ID', 'Knowledge Base/Group', 'Template', 'Score', 'Status', 'Created At'].join(','),
|
||||
...stats.recentRecords.map(r => [
|
||||
r.id,
|
||||
r.knowledgeBase,
|
||||
r.template,
|
||||
r.score ?? '',
|
||||
r.status,
|
||||
r.createdAt,
|
||||
].join(',')),
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `assessment-stats-${new Date().toISOString().split('T')[0]}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString(language === 'zh' ? 'zh-CN' : language === 'ja' ? 'ja-JP' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
const isZh = language === 'zh';
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center p-8">
|
||||
<p className="text-slate-500">{isZh ? '仅管理员可查看统计' : 'Statistics only available for admins'}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-6 space-y-6 overflow-hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">
|
||||
{isZh ? '评估统计' : 'Assessment Statistics'}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">
|
||||
{isZh ? '查看所有用户评估数据' : 'View assessment data for all users'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl border transition-colors",
|
||||
showFilters ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-slate-200 text-slate-600 hover:bg-slate-50"
|
||||
)}
|
||||
>
|
||||
<Filter size={16} />
|
||||
{isZh ? '筛选' : 'Filters'}
|
||||
</button>
|
||||
{stats && (
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Download size={16} />
|
||||
{isZh ? '导出' : 'Export'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showFilters && (
|
||||
<div className="bg-white rounded-2xl p-4 border border-slate-100 shadow-sm">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '开始日期' : 'Start Date'}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.startDate || ''}
|
||||
onChange={(e) => handleFilterChange('startDate', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '结束日期' : 'End Date'}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.endDate || ''}
|
||||
onChange={(e) => handleFilterChange('endDate', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '模板' : 'Template'}
|
||||
</label>
|
||||
<select
|
||||
value={filters.templateId || ''}
|
||||
onChange={(e) => handleFilterChange('templateId', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{isZh ? '全部' : 'All'}</option>
|
||||
{templates.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-500 mb-1">
|
||||
{isZh ? '知识库' : 'Knowledge Group'}
|
||||
</label>
|
||||
<select
|
||||
value={filters.knowledgeGroupId || ''}
|
||||
onChange={(e) => handleFilterChange('knowledgeGroupId', e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{isZh ? '全部' : 'All'}</option>
|
||||
{groups.map(g => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title={isZh ? '总评估次数' : 'Total Attempts'}
|
||||
value={stats?.totalAttempts ?? 0}
|
||||
icon={FileText}
|
||||
color="#6366f1"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '最高分' : 'Highest Score'}
|
||||
value={stats?.highestScore ?? 0}
|
||||
subtitle={isZh ? '分' : 'points'}
|
||||
icon={Award}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '平均分' : 'Average Score'}
|
||||
value={stats?.averageScore ?? 0}
|
||||
subtitle={isZh ? '分' : 'points'}
|
||||
icon={TrendingUp}
|
||||
color="#10b981"
|
||||
/>
|
||||
<StatCard
|
||||
title={isZh ? '完成率' : 'Completion Rate'}
|
||||
value={`${stats?.completionRate ?? 0}%`}
|
||||
icon={Users}
|
||||
color="#8b5cf6"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">
|
||||
{isZh ? '历史记录' : 'Recent Records'}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : stats?.recentRecords?.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-slate-400">
|
||||
{isZh ? '暂无记录' : 'No records found'}
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50 sticky top-0">
|
||||
<tr>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '知识库' : 'Knowledge Base'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '模板' : 'Template'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '分数' : 'Score'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '状态' : 'Status'}
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-slate-500 px-4 py-3">
|
||||
{isZh ? '时间' : 'Created At'}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{stats?.recentRecords?.map((record) => (
|
||||
<tr key={record.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3 text-sm text-slate-900">
|
||||
{record.knowledgeBase}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-600">
|
||||
{record.template}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm font-medium">
|
||||
{record.score !== null ? (
|
||||
<span className={record.score >= 90 ? 'text-green-600' : record.score >= 60 ? 'text-yellow-600' : 'text-red-600'}>
|
||||
{record.score}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn(
|
||||
"inline-flex px-2 py-0.5 text-xs font-medium rounded-full",
|
||||
record.status === 'COMPLETED'
|
||||
? "bg-green-50 text-green-700"
|
||||
: "bg-yellow-50 text-yellow-700"
|
||||
)}>
|
||||
{record.status === 'COMPLETED' ? (isZh ? '已完成' : 'Completed') : (isZh ? '进行中' : 'In Progress')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-500">
|
||||
{formatDate(record.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssessmentStatsView;
|
||||
@@ -0,0 +1,414 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Plus, Edit2, Trash2, FileText, Loader2, X, Sparkles, Sliders, Hash, Type, Brain, Copy, Check } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useToast } from '../../contexts/ToastContext';
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { AssessmentTemplate, CreateTemplateData, UpdateTemplateData, KnowledgeGroup } from '../../types';
|
||||
|
||||
export const AssessmentTemplateManager: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
const { showSuccess, showError } = useToast();
|
||||
const { confirm } = useConfirm();
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editingTemplate, setEditingTemplate] = useState<AssessmentTemplate | null>(null);
|
||||
|
||||
// UI state uses strings for easy input
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
keywords: '',
|
||||
questionCount: 5,
|
||||
difficultyDistribution: 'Basic: 30%, Intermediate: 40%, Advanced: 30%',
|
||||
style: 'Professional',
|
||||
knowledgeGroupId: '',
|
||||
});
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await templateService.getAll();
|
||||
setTemplates(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch templates:', error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const data = await knowledgeGroupService.getGroups();
|
||||
setGroups(data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplates();
|
||||
fetchGroups();
|
||||
}, []);
|
||||
|
||||
const handleOpenModal = (template?: AssessmentTemplate) => {
|
||||
if (template) {
|
||||
setEditingTemplate(template);
|
||||
setFormData({
|
||||
name: template.name,
|
||||
description: template.description || '',
|
||||
keywords: Array.isArray(template.keywords) ? template.keywords.join(', ') : '',
|
||||
questionCount: template.questionCount,
|
||||
difficultyDistribution: typeof template.difficultyDistribution === 'object'
|
||||
? JSON.stringify(template.difficultyDistribution)
|
||||
: (template.difficultyDistribution || ''),
|
||||
style: template.style || 'Professional',
|
||||
knowledgeGroupId: template.knowledgeGroupId || '',
|
||||
});
|
||||
} else {
|
||||
setEditingTemplate(null);
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
keywords: '',
|
||||
questionCount: 5,
|
||||
difficultyDistribution: '{"Basic": 3, "Intermediate": 4, "Advanced": 3}',
|
||||
style: 'Professional',
|
||||
knowledgeGroupId: '',
|
||||
});
|
||||
}
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
// Convert UI strings back to required types
|
||||
const keywordsArray = formData.keywords.split(',').map(k => k.trim()).filter(k => k !== '');
|
||||
let diffDist: any = formData.difficultyDistribution;
|
||||
try {
|
||||
if (formData.difficultyDistribution.startsWith('{')) {
|
||||
diffDist = JSON.parse(formData.difficultyDistribution);
|
||||
}
|
||||
} catch (e) {
|
||||
// Keep as string if parsing fails
|
||||
}
|
||||
|
||||
const payload: CreateTemplateData = {
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
keywords: keywordsArray,
|
||||
questionCount: formData.questionCount,
|
||||
difficultyDistribution: diffDist,
|
||||
style: formData.style,
|
||||
knowledgeGroupId: formData.knowledgeGroupId || undefined,
|
||||
};
|
||||
|
||||
if (editingTemplate) {
|
||||
await templateService.update(editingTemplate.id, payload as UpdateTemplateData);
|
||||
showSuccess(t('featureUpdated'));
|
||||
} else {
|
||||
await templateService.create(payload);
|
||||
showSuccess(t('confirm'));
|
||||
}
|
||||
setShowModal(false);
|
||||
fetchTemplates();
|
||||
} catch (error) {
|
||||
console.error('Save failed:', error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyId = async (id: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(id);
|
||||
setCopiedId(id);
|
||||
showSuccess(t('copySuccess') || 'ID copied to clipboard');
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (err) {
|
||||
showError(t('actionFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!(await confirm(t('confirmTitle')))) return;
|
||||
try {
|
||||
await templateService.delete(id);
|
||||
showSuccess(t('confirm'));
|
||||
fetchTemplates();
|
||||
} catch (error) {
|
||||
showError(t('actionFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const renderDifficulty = (dist: any) => {
|
||||
if (typeof dist === 'string') return dist;
|
||||
if (typeof dist === 'object' && dist !== null) {
|
||||
return Object.entries(dist).map(([k, v]) => `${k}: ${v}`).join(', ');
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
|
||||
<FileText size={22} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-slate-900">{t('assessmentTemplates')}</h3>
|
||||
<p className="text-xs text-slate-500">{t('assessmentTemplatesSubtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleOpenModal()}
|
||||
className="px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-black flex items-center gap-2 shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('createTemplate')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-indigo-600 opacity-20" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<div className="bg-slate-50 rounded-[2rem] border-2 border-dashed border-slate-200 p-16 text-center">
|
||||
<FileText className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-xs">{t('mmEmpty')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{templates.map((template) => (
|
||||
<motion.div
|
||||
key={template.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white border border-slate-200 rounded-3xl p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full blur-3xl -mr-12 -mt-12" />
|
||||
|
||||
<div className="flex justify-between items-start mb-4 relative z-10">
|
||||
<h4 className="text-base font-black text-slate-900 truncate pr-8">{template.name}</h4>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => handleOpenModal(template)}
|
||||
className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all"
|
||||
>
|
||||
<Edit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(template.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 mb-4 line-clamp-2 h-8">{template.description || t('noDescription')}</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mb-2">
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('questionCount')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{template.questionCount}</span>
|
||||
</div>
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100 overflow-hidden">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('difficultyDistribution')}</span>
|
||||
<span className="text-xs font-bold text-slate-700 truncate block">
|
||||
{renderDifficulty(template.difficultyDistribution)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-2 border border-slate-100 mb-2 flex items-center justify-between group/id">
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Template ID</span>
|
||||
<span className="text-[10px] font-mono font-medium text-slate-500 truncate">{template.id}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopyId(template.id)}
|
||||
className="p-1.5 text-slate-400 hover:text-indigo-600 hover:bg-white rounded-lg transition-all opacity-0 group-hover/id:opacity-100"
|
||||
title="Copy ID"
|
||||
>
|
||||
{copiedId === template.id ? <Check size={12} className="text-emerald-500" /> : <Copy size={12} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-indigo-50/30 rounded-xl p-2 border border-indigo-100/50 mb-4 flex items-center gap-2">
|
||||
<Brain size={12} className="text-indigo-500" />
|
||||
<span className="text-[10px] font-bold text-indigo-700 truncate">
|
||||
{template.knowledgeGroup?.name || t('selectKnowledgeGroup')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 pt-4 border-t border-slate-50">
|
||||
{Array.isArray(template.keywords) && template.keywords.map((kw, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[10px] font-bold rounded-full border border-indigo-100/50">
|
||||
{kw}
|
||||
</span>
|
||||
))}
|
||||
{(!template.keywords || template.keywords.length === 0) && <span className="text-[10px] text-slate-400 italic">No keywords</span>}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{showModal && (
|
||||
<div key="assessment-template-modal" className="fixed inset-0 z-[1000] flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setShowModal(false)}
|
||||
className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
className="w-full max-w-xl bg-white rounded-[2.5rem] shadow-2xl relative z-10 overflow-hidden"
|
||||
>
|
||||
<div className="p-8 pb-4 flex items-center justify-between border-b border-slate-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center">
|
||||
{editingTemplate ? <Edit2 size={24} /> : <Plus size={24} />}
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-slate-900">
|
||||
{editingTemplate ? t('editTemplate') : t('createTemplate')}
|
||||
</h3>
|
||||
</div>
|
||||
<button onClick={() => setShowModal(false)} className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-xl transition-all">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSave} className="p-8 space-y-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Type size={12} className="text-indigo-500" />
|
||||
{t('templateName')} *
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all placeholder:text-slate-300"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="e.g. Senior Frontend Engineer Technical Interview"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sparkles size={12} className="text-indigo-500" />
|
||||
{t('keywords')} ({t('keywordsHint')})
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all placeholder:text-slate-300"
|
||||
value={formData.keywords}
|
||||
onChange={e => setFormData({ ...formData, keywords: e.target.value })}
|
||||
placeholder={t('keywordsHint')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Hash size={12} className="text-indigo-500" />
|
||||
{t('questionCount')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.questionCount}
|
||||
onChange={e => setFormData({ ...formData, questionCount: parseInt(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('difficultyDistribution')}
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.difficultyDistribution}
|
||||
onChange={e => setFormData({ ...formData, difficultyDistribution: e.target.value })}
|
||||
placeholder='{"Basic": 3, "Inter": 4, "Adv": 3}'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('selectKnowledgeGroup')} *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all appearance-none cursor-pointer"
|
||||
value={formData.knowledgeGroupId}
|
||||
onChange={e => setFormData({ ...formData, knowledgeGroupId: e.target.value })}
|
||||
>
|
||||
<option value="" disabled>{t('selectKnowledgeGroup')}</option>
|
||||
{groups.map(group => (
|
||||
<option key={group.id} value={group.id}>{group.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 md:col-span-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1 ml-1 flex items-center gap-2">
|
||||
<Sliders size={12} className="text-indigo-500" />
|
||||
{t('style')}
|
||||
</label>
|
||||
<input
|
||||
className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-[1.25rem] text-sm font-bold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={formData.style}
|
||||
onChange={e => setFormData({ ...formData, style: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowModal(false)}
|
||||
className="px-6 py-4 text-sm font-black text-slate-500 hover:text-slate-700 transition-colors"
|
||||
>
|
||||
{t('mmCancel')}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="px-10 py-4 bg-indigo-600 text-white rounded-[1.25rem] font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
{isSaving && <Loader2 size={16} className="animate-spin" />}
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,791 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import {
|
||||
Brain,
|
||||
Send,
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
ChevronRight,
|
||||
History,
|
||||
ClipboardCheck,
|
||||
RefreshCcw,
|
||||
FileText,
|
||||
Star,
|
||||
Award,
|
||||
Trophy,
|
||||
Trash2
|
||||
} from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { assessmentService, AssessmentSession, AssessmentState } from '../../services/assessmentService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { templateService } from '../../services/templateService';
|
||||
import { KnowledgeGroup, AssessmentTemplate } from '../../types';
|
||||
import { cn } from '../../src/utils/cn';
|
||||
|
||||
interface AssessmentViewProps {
|
||||
onLogout: () => void;
|
||||
onNavigate: (path: string) => void;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
export const AssessmentView: React.FC<AssessmentViewProps> = ({
|
||||
onLogout,
|
||||
onNavigate,
|
||||
isAdmin
|
||||
}) => {
|
||||
const { language, t } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
|
||||
const [session, setSession] = useState<AssessmentSession | null>(null);
|
||||
const [state, setState] = useState<AssessmentState | null>(null);
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [processStep, setProcessStep] = useState<string>('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [history, setHistory] = useState<AssessmentSession[]>([]);
|
||||
const [loadingHistoryId, setLoadingHistoryId] = useState<string | null>(null);
|
||||
const [showBasis, setShowBasis] = useState(false);
|
||||
const [templates, setTemplates] = useState<AssessmentTemplate[]>([]);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const data = await knowledgeGroupService.getGroups();
|
||||
setGroups(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch groups:', err);
|
||||
}
|
||||
};
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
const data = await templateService.getAll();
|
||||
setTemplates(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch templates:', err);
|
||||
}
|
||||
};
|
||||
fetchGroups();
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [state?.messages, isLoading]);
|
||||
|
||||
const fetchHistory = async () => {
|
||||
try {
|
||||
const data = await assessmentService.getHistory();
|
||||
setHistory(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch history:', err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchHistory();
|
||||
}, []);
|
||||
|
||||
const isZh = language === 'zh';
|
||||
const isJa = language === 'ja';
|
||||
|
||||
const getStatusText = (node: string) => {
|
||||
const mapping: Record<string, any> = {
|
||||
generator: 'statusGeneratingQuestions',
|
||||
grader: 'statusEvaluatingAnswer',
|
||||
interviewer: 'statusPreparingQuestion',
|
||||
analyzer: 'statusGeneratingReport',
|
||||
};
|
||||
return t(mapping[node]) || t('statusProcessing');
|
||||
};
|
||||
|
||||
const handleSelectHistory = async (histSession: AssessmentSession) => {
|
||||
if (isLoading) return;
|
||||
|
||||
setLoadingHistoryId(histSession.id);
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const histState = await assessmentService.getSessionState(histSession.id);
|
||||
setState(histState);
|
||||
setSession(histSession);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to load historical assessment');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setLoadingHistoryId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteHistory = async (e: React.MouseEvent, histId: string) => {
|
||||
e.stopPropagation();
|
||||
const confirmed = await confirm(t('confirmDeleteAssessment'));
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
await assessmentService.deleteSession(histId);
|
||||
setHistory(prev => prev.filter(h => h.id !== histId));
|
||||
if (session?.id === histId) {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to delete history:', err);
|
||||
setError(t('deleteAssessmentFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartAssessment = async () => {
|
||||
if (!selectedTemplate) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在初始化...' : isJa ? '初期化中...' : 'Initializing...');
|
||||
|
||||
try {
|
||||
const newSession = await assessmentService.startSession(selectedGroup || undefined, language, selectedTemplate || undefined);
|
||||
setSession(newSession);
|
||||
|
||||
for await (const event of assessmentService.startSessionStream(newSession.id)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
if (event.data) {
|
||||
setState(prev => {
|
||||
if (!prev) return event.data;
|
||||
const prevMessages = prev.messages || [];
|
||||
return {
|
||||
...prev,
|
||||
...event.data,
|
||||
messages: event.data.messages
|
||||
? [...prevMessages, ...event.data.messages.filter((m: any) => !prevMessages.some((pm: any) => pm.content === m.content && pm.role === m.role))]
|
||||
: prevMessages,
|
||||
feedbackHistory: event.data.feedbackHistory
|
||||
? [...(prev.feedbackHistory || []), ...event.data.feedbackHistory.filter((fh: any) => !(prev.feedbackHistory || []).some((pfh: any) => pfh.content === fh.content))]
|
||||
: (prev.feedbackHistory || []),
|
||||
scores: { ...(prev.scores || {}), ...(event.data.scores || {}) }
|
||||
} as any;
|
||||
});
|
||||
}
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to start assessment');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetry = async () => {
|
||||
if (!session) return;
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在重新尝试生成...' : isJa ? '再生成中...' : 'Retrying generation...');
|
||||
try {
|
||||
for await (const event of assessmentService.startSessionStream(session.id)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Retry failed');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitAnswer = async () => {
|
||||
if (!session || !inputValue.trim() || isLoading) return;
|
||||
|
||||
const answer = inputValue.trim();
|
||||
setInputValue('');
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setProcessStep(isZh ? '正在准备发送...' : isJa ? '送信準備中...' : 'Preparing to send...');
|
||||
|
||||
try {
|
||||
setState(prev => ({
|
||||
...prev!,
|
||||
messages: [
|
||||
...(prev?.messages || []),
|
||||
{ role: 'user' as const, content: answer, timestamp: Date.now() }
|
||||
]
|
||||
}));
|
||||
|
||||
for await (const event of assessmentService.submitAnswerStream(session.id, answer, language)) {
|
||||
if (event.type === 'node') {
|
||||
setProcessStep(getStatusText(event.node));
|
||||
if (event.data) {
|
||||
setState(prev => {
|
||||
if (!prev) return event.data;
|
||||
const prevMessages = prev.messages || [];
|
||||
const mergedMessages = event.data.messages
|
||||
? [...prevMessages, ...event.data.messages.filter((m: any) => !prevMessages.some((pm: any) => pm.content === m.content && pm.role === m.role))]
|
||||
: prevMessages;
|
||||
|
||||
return {
|
||||
...prev,
|
||||
...event.data,
|
||||
messages: mergedMessages,
|
||||
feedbackHistory: event.data.feedbackHistory
|
||||
? [...(prev.feedbackHistory || []), ...event.data.feedbackHistory.filter((fh: any) => !(prev.feedbackHistory || []).some((pfh: any) => pfh.content === fh.content))]
|
||||
: (prev.feedbackHistory || []),
|
||||
scores: { ...(prev.scores || {}), ...(event.data.scores || {}) }
|
||||
} as any;
|
||||
});
|
||||
}
|
||||
} else if (event.type === 'final') {
|
||||
setState(event.data);
|
||||
if (event.data.status === 'COMPLETED') {
|
||||
setSession(prev => prev ? { ...prev, status: 'COMPLETED' } : null);
|
||||
fetchHistory();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to submit answer');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setProcessStep('');
|
||||
}
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<div className="flex-none h-16 px-6 border-b border-slate-200/60 flex items-center justify-between bg-white/80 backdrop-blur-md relative z-40">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
||||
<Brain size={22} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-slate-900 leading-tight">{t('assessmentTitle')}</h2>
|
||||
<p className="text-xs text-slate-500 font-medium">{t('assessmentDesc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{session && (
|
||||
<div className="px-3 py-1.5 bg-slate-100 rounded-full flex items-center gap-2">
|
||||
<div className={cn(
|
||||
"w-2 h-2 rounded-full animate-pulse",
|
||||
session.status === 'IN_PROGRESS' ? "bg-green-500" : "bg-blue-500"
|
||||
)} />
|
||||
<span className="text-xs font-bold text-slate-600 uppercase tracking-wider">
|
||||
{session.status === 'IN_PROGRESS' ? t('inProgress') : t('statusReadyFragment')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
setSelectedGroup(null);
|
||||
}}
|
||||
className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all"
|
||||
title={t('newChat')}
|
||||
>
|
||||
<RefreshCcw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSetup = () => (
|
||||
<div className="flex-1 flex bg-[#F8FAFC] overflow-hidden">
|
||||
{/* Main Setup Content */}
|
||||
<div className="flex-1 overflow-y-auto p-8 flex flex-col items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-xl w-full"
|
||||
>
|
||||
<div className="bg-white rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 p-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-inner">
|
||||
<Brain size={40} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-900 mb-2">{t('readyForAssessment')}</h3>
|
||||
<p className="text-slate-500 font-medium">{t('readyForAssessmentDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-slate-700 mb-2 ml-1">
|
||||
{t('assessmentTemplates')}
|
||||
</label>
|
||||
<div className="grid grid-cols-1 gap-2 max-h-48 overflow-y-auto pr-2 custom-scrollbar">
|
||||
{templates.map(template => (
|
||||
<button
|
||||
key={template.id}
|
||||
onClick={() => setSelectedTemplate(template.id)}
|
||||
className={cn(
|
||||
"w-full text-left px-4 py-3 rounded-xl border-2 transition-all flex items-center justify-between",
|
||||
selectedTemplate === template.id
|
||||
? "border-indigo-600 bg-indigo-50/50 text-indigo-700 shadow-sm"
|
||||
: "border-slate-100 hover:border-slate-200 text-slate-500 hover:bg-slate-50"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-bold truncate max-w-[240px]">{template.name}</span>
|
||||
<span className="text-[10px] opacity-40 font-mono mt-0.5 mb-1">{template.id}</span>
|
||||
<span className="text-[10px] opacity-60 font-medium">
|
||||
{template.questionCount} {t('questionsCountLabel')} • {
|
||||
template.difficultyDistribution
|
||||
? (typeof template.difficultyDistribution === 'object'
|
||||
? Object.entries(template.difficultyDistribution).map(([k, v]) => `${k}:${v}`).join(', ')
|
||||
: String(template.difficultyDistribution))
|
||||
: ''
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
{selectedTemplate === template.id && <div className="w-1.5 h-1.5 bg-indigo-600 rounded-full" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleStartAssessment}
|
||||
disabled={!selectedTemplate || isLoading}
|
||||
className={cn(
|
||||
"w-full py-4 rounded-2xl font-black text-white transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg flex items-center justify-center gap-3",
|
||||
!selectedTemplate || isLoading
|
||||
? "bg-slate-300 shadow-none cursor-not-allowed"
|
||||
: "bg-indigo-600 hover:bg-indigo-700 shadow-indigo-200"
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={20} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ClipboardCheck size={20} />
|
||||
<span>{t('startProfessionalEvaluation')}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-4 bg-rose-50 border border-rose-100 rounded-2xl flex items-start gap-3 animate-shake">
|
||||
<AlertCircle size={20} className="text-rose-500 shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-bold text-rose-700">{error}</p>
|
||||
<button
|
||||
onClick={handleRetry}
|
||||
className="mt-1 text-xs font-bold text-rose-600 hover:text-rose-800 underline flex items-center gap-1"
|
||||
>
|
||||
<RefreshCcw size={12} />
|
||||
{t('retry')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex gap-4 justify-center">
|
||||
<div className="flex items-center gap-2 text-[13px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<CheckCircle size={14} className="text-emerald-500" />
|
||||
{t('aiPoweredAnalysis')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[13px] font-bold text-slate-400 uppercase tracking-widest">
|
||||
<CheckCircle size={14} className="text-emerald-500" />
|
||||
{t('masteryScoring')}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Assessment History Sidebar */}
|
||||
{history.length > 0 && (
|
||||
<div className="w-80 flex-none bg-white p-6 overflow-y-auto hidden lg:flex flex-col border-l border-slate-200/60 shadow-[4px_0_24px_rgba(0,0,0,0.02)]">
|
||||
<h3 className="text-sm font-black text-slate-900 mb-6 flex items-center gap-2 uppercase tracking-widest">
|
||||
<History size={18} className="text-indigo-600" />
|
||||
{t('recentAssessments')}
|
||||
</h3>
|
||||
<div className="space-y-3 custom-scrollbar">
|
||||
{history.map(hist => (
|
||||
<div
|
||||
key={hist.id}
|
||||
className="w-full text-left p-4 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between group"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-bold text-slate-800 truncate max-w-[180px]">
|
||||
{hist.knowledgeBase?.name || hist.knowledgeGroup?.name || t('assessmentTitle')}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-black text-indigo-400 px-1.5 py-0.5 bg-indigo-50 rounded">
|
||||
{hist.finalScore !== null && hist.finalScore !== undefined ? `${Math.round(hist.finalScore * 10) / 10}/10` : t('inProgress')}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">
|
||||
{new Date(hist.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleDeleteHistory(e, hist.id)}
|
||||
className="w-8 h-8 rounded-full bg-white border border-slate-100 flex items-center justify-center text-slate-400 hover:text-rose-600 hover:border-rose-100 transition-all opacity-0 group-hover:opacity-100"
|
||||
title={t('delete')}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => !isLoading && handleSelectHistory(hist)}
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
"w-8 h-8 rounded-full bg-white border border-slate-100 flex items-center justify-center transition-all shrink-0",
|
||||
isLoading ? "opacity-50 cursor-not-allowed" : "hover:bg-indigo-600 hover:text-white"
|
||||
)}
|
||||
title={t('view')}
|
||||
>
|
||||
{loadingHistoryId === hist.id ? (
|
||||
<Loader2 size={14} className="animate-spin text-indigo-600 group-hover:text-white" />
|
||||
) : (
|
||||
<FileText size={14} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderAssessment = () => {
|
||||
const currentIndex = state?.currentQuestionIndex || 0;
|
||||
const totalQuestions = state?.questions?.length || 0;
|
||||
// 如果currentIndex已达到或超过题目数量，说明已完成
|
||||
const displayNo = currentIndex >= totalQuestions ? totalQuestions : currentIndex + 1;
|
||||
console.log('[AssessmentView] Counter:', { displayNo, totalQuestions, currentIndex });
|
||||
const progressLabel = totalQuestions > 0
|
||||
? t('questionProgress', displayNo, totalQuestions)
|
||||
: t('initializingQuestion', displayNo);
|
||||
|
||||
const messages = state?.messages || [];
|
||||
const filteredMessages = messages.filter(m =>
|
||||
m.role !== 'system' &&
|
||||
!(m.role === 'assistant' && (m.content?.toString().startsWith('Score:') || m.content?.toString().startsWith('得分:')))
|
||||
);
|
||||
|
||||
const feedbackHistory = state?.feedbackHistory || [];
|
||||
const lastFeedbackMessage = feedbackHistory[feedbackHistory.length - 1];
|
||||
|
||||
const feedbackMatch = lastFeedbackMessage?.content?.toString().match(/(?:Score|得分): (\d+)\/10\n\n(?:Feedback|反馈): ([\s\S]*)/i);
|
||||
const latestScore = feedbackMatch ? feedbackMatch[1] : null;
|
||||
const latestFeedback = feedbackMatch ? feedbackMatch[2] : (lastFeedbackMessage?.content || null);
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex bg-[#F8FAFC] overflow-hidden">
|
||||
{/* Left: Chat Area */}
|
||||
<div className="flex-1 flex flex-col border-r border-slate-200/60 transition-all duration-500">
|
||||
<div className="flex-none px-6 py-3 bg-white/50 border-b border-slate-100 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full uppercase tracking-wider">
|
||||
{progressLabel}
|
||||
</span>
|
||||
{isLoading && (
|
||||
<span className="text-[10px] font-bold text-slate-400 animate-pulse flex items-center gap-1.5 uppercase tracking-widest">
|
||||
<div className="w-1 h-1 bg-indigo-400 rounded-full animate-bounce" />
|
||||
{processStep || t('aiIsProcessing')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-8 custom-scrollbar">
|
||||
<div className="max-w-3xl mx-auto space-y-8">
|
||||
{filteredMessages.map((msg, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: msg.role === 'user' ? 20 : -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className={cn(
|
||||
"flex flex-col max-w-[85%]",
|
||||
msg.role === 'user' ? "ml-auto items-end" : "mr-auto items-start"
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
"px-5 py-4 rounded-2xl shadow-sm text-[15px] leading-relaxed",
|
||||
msg.role === 'user'
|
||||
? "bg-indigo-600 text-white rounded-tr-none"
|
||||
: "bg-white text-slate-800 border border-slate-100 rounded-tl-none"
|
||||
)}>
|
||||
{msg.content}
|
||||
</div>
|
||||
<span className="mt-1.5 text-[10px] items-center uppercase tracking-widest font-bold text-slate-400">
|
||||
{new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-start mr-auto max-w-[85%]">
|
||||
<div className="px-5 py-4 bg-white border border-slate-100 rounded-2xl rounded-tl-none shadow-sm">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.3s]" />
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:-0.15s]" />
|
||||
<div className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white border-t border-slate-200/60 shadow-[0_-4px_20px_-10px_rgba(0,0,0,0.05)]">
|
||||
<div className="max-w-3xl mx-auto flex items-end gap-3">
|
||||
<textarea
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmitAnswer();
|
||||
}
|
||||
}}
|
||||
placeholder={t('typeAnswerPlaceholder')}
|
||||
className="flex-1 max-h-32 p-4 bg-slate-50 border-none rounded-2xl focus:bg-white focus:ring-2 focus:ring-indigo-500/20 text-sm font-medium resize-none transition-all placeholder:text-slate-400 outline-none shadow-inner"
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSubmitAnswer}
|
||||
disabled={!inputValue.trim() || isLoading}
|
||||
className={cn(
|
||||
"w-14 h-14 flex items-center justify-center rounded-2xl transition-all shadow-lg",
|
||||
!inputValue.trim() || isLoading
|
||||
? "bg-slate-100 text-slate-400 shadow-none"
|
||||
: "bg-indigo-600 text-white hover:bg-indigo-700 shadow-indigo-200 active:scale-95"
|
||||
)}
|
||||
>
|
||||
<Send size={22} className={isLoading ? "animate-pulse" : ""} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Feedback Panel */}
|
||||
<div className="w-80 flex-none bg-white p-6 overflow-y-auto hidden lg:flex flex-col border-l border-slate-100">
|
||||
<h3 className="text-sm font-black text-slate-900 mb-6 flex items-center gap-2 uppercase tracking-widest">
|
||||
<ClipboardCheck size={18} className="text-indigo-600" />
|
||||
{t('liveFeedback')}
|
||||
</h3>
|
||||
|
||||
{latestScore ? (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-indigo-50/50 rounded-3xl p-6 text-center border border-indigo-100">
|
||||
<span className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em] mb-2 block">{t('currentScore')}</span>
|
||||
<div className="text-5xl font-black text-indigo-600">{latestScore}<span className="text-xl opacity-40">/10</span></div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
|
||||
<History size={14} />
|
||||
{t('aiExplanation')}
|
||||
</h4>
|
||||
<div className="text-sm text-slate-600 leading-relaxed font-medium bg-slate-50 rounded-2xl p-5 border border-slate-100">
|
||||
{latestFeedback}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-50 rounded-2xl p-4 border border-emerald-100 flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-emerald-500 text-white rounded-lg flex items-center justify-center shrink-0">
|
||||
<Star size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-black text-emerald-800">{t('masteryProgress')}</div>
|
||||
<div className="text-[10px] text-emerald-600 font-bold opacity-80">{t('trackedInRealTime')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-center opacity-40 space-y-4">
|
||||
<div className="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center">
|
||||
<History size={32} className="text-slate-400" />
|
||||
</div>
|
||||
<div className="text-xs font-bold text-slate-500">
|
||||
{t('submitAnswerToSeeFeedback')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state?.questions && state.questions[state.currentQuestionIndex] && (
|
||||
<div className="mt-6 pt-6 border-t border-slate-100">
|
||||
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck size={14} />
|
||||
{t('questionBasis')}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowBasis(!showBasis)}
|
||||
className="text-indigo-600 hover:text-indigo-800 lowercase tracking-normal font-bold"
|
||||
>
|
||||
{showBasis ? t('hideBasis') : t('viewBasis')}
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<AnimatePresence>
|
||||
{showBasis && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="text-sm text-slate-600 leading-relaxed font-medium bg-indigo-50/30 rounded-2xl p-4 border border-indigo-100/50">
|
||||
{state.questions[state.currentQuestionIndex].basis || "No basis provided."}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-auto pt-6 border-t border-slate-100">
|
||||
<div className="bg-amber-50 rounded-2xl p-4 border border-amber-100 flex items-start gap-3">
|
||||
<AlertCircle size={16} className="text-amber-500 mt-0.5 shrink-0" />
|
||||
<div className="text-[11px] text-amber-800 font-medium leading-relaxed">
|
||||
<strong>{t('assessmentGuide')}</strong> {t('assessmentGuideDesc')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCompletion = () => (
|
||||
<div className="flex-1 overflow-y-auto bg-[#F8FAFC] p-8 custom-scrollbar">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="max-w-4xl mx-auto space-y-8"
|
||||
>
|
||||
<div className="bg-white rounded-[40px] shadow-2xl shadow-indigo-100/50 border border-slate-100 overflow-hidden">
|
||||
<div className="bg-indigo-600 p-10 text-white relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 blur-3xl" />
|
||||
<div className="relative z-10 flex flex-col items-center text-center">
|
||||
<div className="w-20 h-20 bg-white/20 backdrop-blur-md rounded-3xl flex items-center justify-center mb-6 border border-white/30 shadow-2xl">
|
||||
<Trophy size={40} className="text-yellow-300" />
|
||||
</div>
|
||||
<h3 className="text-4xl font-black mb-2 tracking-tight">{t('level')} {state?.report?.match(/LEVEL:\s*(\w+)/i)?.[1] || 'Pending'}</h3>
|
||||
<p className="text-indigo-100 font-bold uppercase tracking-[0.2em] text-sm opacity-80">{t('assessmentResultsAvailable')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 -mt-20 relative z-20 mb-12">
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<Star size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('knowledgeCoverage')}</span>
|
||||
<span className="text-2xl font-black text-slate-900">
|
||||
{state?.questions && state.questions.length > 0
|
||||
? `${Math.round((Object.keys(state.scores || {}).length / state.questions.length) * 100)}%`
|
||||
: '0%'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<Award size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('precisionScore')}</span>
|
||||
<span className="text-2xl font-black text-slate-900">
|
||||
{state?.finalScore !== undefined ? (Math.round(state.finalScore * 10) / 10) : '0'}/10
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col items-center text-center group transition-all hover:-translate-y-1">
|
||||
<div className="w-12 h-12 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center mb-3">
|
||||
<CheckCircle size={24} />
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{t('status')}</span>
|
||||
<span className={cn(
|
||||
"text-2xl font-black uppercase tracking-tighter",
|
||||
(state?.finalScore || 0) >= 6 ? "text-emerald-600" : "text-rose-600"
|
||||
)}>
|
||||
{(state?.finalScore || 0) >= 6 ? t('verified') : t('fail')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2.5 text-lg font-black text-slate-900 mb-4">
|
||||
<FileText size={20} className="text-indigo-600" />
|
||||
{t('comprehensiveMasteryReport')}
|
||||
</h4>
|
||||
<div className="bg-slate-50 border border-slate-100 rounded-3xl p-8 text-slate-800 leading-relaxed font-medium assessment-report overflow-hidden whitespace-pre-wrap">
|
||||
{state?.report}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSession(null);
|
||||
setState(null);
|
||||
}}
|
||||
className="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-black shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all active:scale-[0.98]"
|
||||
>
|
||||
{t('newAssessmentSession')}
|
||||
</button>
|
||||
<button
|
||||
className="px-8 py-4 bg-white border-2 border-slate-100 text-slate-700 rounded-2xl font-bold hover:bg-slate-50 transition-all active:scale-[0.98]"
|
||||
>
|
||||
{t('downloadPdfReport')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white animate-in flex-1">
|
||||
{renderHeader()}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="absolute top-20 left-1/2 -translate-x-1/2 z-50 min-w-[320px] max-w-lg"
|
||||
>
|
||||
<div className="mx-6 p-4 bg-red-50 border border-red-100 rounded-2xl flex items-center gap-3 shadow-xl">
|
||||
<AlertCircle size={20} className="text-red-500 shrink-0" />
|
||||
<p className="text-sm font-bold text-red-800 pr-2">{error}</p>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto p-1.5 text-red-400 hover:text-red-500 rounded-lg transition-colors"
|
||||
>
|
||||
<AlertCircle size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{!session && renderSetup()}
|
||||
{session && session.status === 'IN_PROGRESS' && renderAssessment()}
|
||||
{session && session.status === 'COMPLETED' && renderCompletion()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,459 @@
|
||||
import React, { useCallback, useEffect, useState, useRef } from 'react'
|
||||
import ChatInterface from '../../components/ChatInterface'
|
||||
import IndexingModalWithMode from '../../components/IndexingModalWithMode'
|
||||
import { GroupManager } from '../../components/GroupManager'
|
||||
import { GroupSelector } from '../../components/GroupSelector'
|
||||
import { SearchHistoryList } from '../../components/SearchHistoryList'
|
||||
import { HistoryDrawer } from '../../components/HistoryDrawer'
|
||||
import { GroupSelectionDrawer } from '../../components/GroupSelectionDrawer'
|
||||
import { PDFPreview } from '../../components/PDFPreview'
|
||||
import { SourcePreviewDrawer } from '../../components/SourcePreviewDrawer'
|
||||
import { ChatSource } from '../../services/chatService'
|
||||
import {
|
||||
AppSettings,
|
||||
DEFAULT_MODELS,
|
||||
DEFAULT_SETTINGS,
|
||||
IndexingConfig,
|
||||
KnowledgeFile,
|
||||
ModelConfig,
|
||||
ModelType,
|
||||
RawFile,
|
||||
KnowledgeGroup,
|
||||
} from '../../types'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { Key, LogOut, Menu, Users, X, Folder, History, Plus, Sparkles, Settings } from 'lucide-react'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { modelConfigService } from '../../services/modelConfigService'
|
||||
import { userSettingService } from '../../services/userSettingService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { searchHistoryService } from '../../services/searchHistoryService'
|
||||
import { userService } from '../../services/userService'
|
||||
|
||||
interface ChatViewProps {
|
||||
authToken: string;
|
||||
onLogout: () => void;
|
||||
modelConfigs?: ModelConfig[]; // Optional to allow backward compat while refactoring
|
||||
onNavigate: (view: any) => void;
|
||||
initialChatContext?: { selectedGroups?: string[], selectedFiles?: string[] } | null;
|
||||
onClearContext?: () => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const ChatView: React.FC<ChatViewProps> = ({
|
||||
authToken,
|
||||
onLogout,
|
||||
modelConfigs = DEFAULT_MODELS,
|
||||
onNavigate,
|
||||
initialChatContext,
|
||||
onClearContext,
|
||||
isAdmin = false
|
||||
}) => {
|
||||
const { showError, showWarning } = useToast()
|
||||
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([])
|
||||
const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS)
|
||||
const [isLoadingSettings, setIsLoadingSettings] = useState(true)
|
||||
|
||||
const [isGroupManagerOpen, setIsGroupManagerOpen] = useState(false)
|
||||
const [isHistoryOpen, setIsHistoryOpen] = useState(false)
|
||||
const [isGroupSelectionOpen, setIsGroupSelectionOpen] = useState(false) // New state
|
||||
const [currentHistoryId, setCurrentHistoryId] = useState<string | undefined>()
|
||||
const [historyMessages, setHistoryMessages] = useState<any[] | null>(null)
|
||||
const [selectedGroups, setSelectedGroups] = useState<string[]>([])
|
||||
const [selectedFiles, setSelectedFiles] = useState<string[]>([])
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [previewSource, setPreviewSource] = useState<ChatSource | null>(null)
|
||||
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
|
||||
// Modals state removed as they are moved to Settings
|
||||
const [isLanguageLoading, setIsLanguageLoading] = useState(false)
|
||||
|
||||
const { t, language, setLanguage } = useLanguage()
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
|
||||
const handleNewChat = () => {
|
||||
const currentLanguage = language
|
||||
localStorage.removeItem('chatHistory')
|
||||
localStorage.removeItem('chatMessages')
|
||||
localStorage.removeItem('chatSources')
|
||||
localStorage.setItem('userLanguage', currentLanguage)
|
||||
setCurrentHistoryId(undefined)
|
||||
setHistoryMessages(null)
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
// Function to fetch user settings from backend
|
||||
const fetchAndSetSettings = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const [personalSettings, tenantSettings] = await Promise.all([
|
||||
userSettingService.getPersonal(authToken).catch(() => null),
|
||||
userSettingService.get(authToken).catch(() => ({} as Partial<AppSettings>))
|
||||
]);
|
||||
|
||||
const appSettings: AppSettings = {
|
||||
...DEFAULT_SETTINGS,
|
||||
...tenantSettings,
|
||||
language: personalSettings?.language || tenantSettings?.language || DEFAULT_SETTINGS.language,
|
||||
};
|
||||
setSettings(appSettings)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings:', error)
|
||||
setSettings(DEFAULT_SETTINGS)
|
||||
} finally {
|
||||
setIsLoadingSettings(false)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
const fetchAndSetFiles = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const data = await knowledgeBaseService.getAll(authToken)
|
||||
setFiles(data.items)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch files:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
// Function to fetch groups from backend
|
||||
const fetchAndSetGroups = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const remoteGroups = await knowledgeGroupService.getGroups()
|
||||
setGroups(remoteGroups)
|
||||
|
||||
// Filter out selected groups that no longer exist
|
||||
setSelectedGroups(prev => {
|
||||
const validGroupIds = new Set(remoteGroups.map(g => g.id))
|
||||
return prev.filter(id => validGroupIds.has(id))
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetSettings()
|
||||
fetchAndSetFiles()
|
||||
fetchAndSetGroups()
|
||||
}
|
||||
}, [authToken, fetchAndSetSettings, fetchAndSetFiles, fetchAndSetGroups])
|
||||
|
||||
// Handle Initial Context
|
||||
useEffect(() => {
|
||||
if (initialChatContext) {
|
||||
if (initialChatContext.selectedGroups) {
|
||||
setSelectedGroups(initialChatContext.selectedGroups)
|
||||
}
|
||||
if (initialChatContext.selectedFiles) {
|
||||
setSelectedFiles(initialChatContext.selectedFiles)
|
||||
}
|
||||
}
|
||||
}, [initialChatContext])
|
||||
|
||||
// Load chat history from localStorage on mount
|
||||
useEffect(() => {
|
||||
const savedHistory = localStorage.getItem('chatMessages');
|
||||
if (savedHistory) {
|
||||
try {
|
||||
const parsedHistory = JSON.parse(savedHistory);
|
||||
if (Array.isArray(parsedHistory) && parsedHistory.length > 0) {
|
||||
setHistoryMessages(parsedHistory);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse saved chat history:', error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleFileUpload = async (fileList: FileList) => {
|
||||
if (!authToken) {
|
||||
showWarning(t('loginToUpload'))
|
||||
return
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 104857600
|
||||
const MAX_SIZE_MB = 100
|
||||
const rawFiles: RawFile[] = []
|
||||
const errors: string[] = []
|
||||
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = fileList[i]
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
errors.push(t('fileSizeLimitExceeded').replace('$1', file.name).replace('$2', formatBytes(file.size)).replace('$3', MAX_SIZE_MB.toString()))
|
||||
continue
|
||||
}
|
||||
|
||||
const allowedTypes = [
|
||||
'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
|
||||
'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet',
|
||||
'application/vnd.oasis.opendocument.presentation', 'application/vnd.oasis.opendocument.graphics',
|
||||
'text/plain', 'text/markdown', 'text/html', 'text/csv', 'text/xml', 'application/xml', 'application/json',
|
||||
'text/x-python', 'text/x-java', 'text/x-c', 'text/x-c++', 'text/javascript', 'text/typescript',
|
||||
'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/tiff', 'image/bmp', 'image/svg+xml',
|
||||
'application/zip', 'application/x-tar', 'application/gzip', 'application/x-7z-compressed',
|
||||
'application/rtf', 'application/epub+zip', 'application/x-mobipocket-ebook',
|
||||
]
|
||||
|
||||
const ext = file.name.toLowerCase().split('.').pop()
|
||||
const allowedExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'html', 'csv', 'rtf', 'odt', 'ods', 'odp', 'json', 'xml']
|
||||
|
||||
const isAllowed = allowedTypes.includes(file.type) ||
|
||||
file.type.startsWith('text/') ||
|
||||
file.type.startsWith('application/vnd.') ||
|
||||
file.type.startsWith('application/x-') ||
|
||||
file.type === '' ||
|
||||
allowedExtensions.includes(ext || '')
|
||||
|
||||
if (!isAllowed) {
|
||||
errors.push(t('unsupportedFileType').replace('$1', file.name).replace('$2', file.type || 'unknown'))
|
||||
continue
|
||||
}
|
||||
|
||||
try {
|
||||
const rawFile = await readFile(file)
|
||||
rawFiles.push(rawFile)
|
||||
} catch (error) {
|
||||
console.error(`Error reading file ${file.name}:`, error)
|
||||
errors.push(t('readFailed').replace('$1', file.name))
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
showError(`${t('uploadErrors')}:\n${errors.join('\n')}`)
|
||||
}
|
||||
|
||||
if (rawFiles.length === 0) return
|
||||
|
||||
if (errors.length > 0 && rawFiles.length > 0) {
|
||||
showWarning(t('uploadWarning').replace('$1', rawFiles.length.toString()).replace('$2', errors.length.toString()))
|
||||
}
|
||||
|
||||
setPendingFiles(rawFiles);
|
||||
setIsIndexingModalOpen(true);
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
if (!authToken) return
|
||||
let hasSuccess = false
|
||||
for (const rawFile of pendingFiles) {
|
||||
try {
|
||||
await uploadService.uploadFileWithConfig(rawFile.file, config, authToken)
|
||||
hasSuccess = true
|
||||
} catch (error) {
|
||||
console.error(`Error uploading file ${rawFile.name}:`, error)
|
||||
showError(t('uploadFailed').replace('$1', rawFile.name).replace('$2', error.message))
|
||||
}
|
||||
}
|
||||
if (hasSuccess) {
|
||||
await fetchAndSetFiles()
|
||||
}
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleCancelIndexing = () => {
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleGroupsChange = (newGroups: KnowledgeGroup[]) => {
|
||||
setGroups(newGroups)
|
||||
}
|
||||
|
||||
const handleSelectHistory = async (historyId: string) => {
|
||||
try {
|
||||
const historyDetail = await searchHistoryService.getHistoryDetail(historyId)
|
||||
setCurrentHistoryId(historyId)
|
||||
setIsHistoryOpen(false)
|
||||
setHistoryMessages(historyDetail.messages)
|
||||
} catch (error) {
|
||||
console.error('Failed to load history detail:', error)
|
||||
showError(t('loadHistoryFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowHistory = () => {
|
||||
setIsHistoryOpen(true)
|
||||
}
|
||||
|
||||
const handleInputFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileUpload(e.target.files)
|
||||
}
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoadingSettings) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-screen bg-slate-50 w-full'>
|
||||
<div className='text-blue-600 animate-spin rounded-full h-12 w-12 border-4 border-t-4 border-blue-300'></div>
|
||||
<p className='ml-4 text-slate-700'>{t('loadingUserData')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex h-full w-full bg-transparent overflow-hidden relative'>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleInputFileChange}
|
||||
multiple
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md,.html,.csv,.rtf,.odt,.ods,.odp,.json,.js,.jsx,.ts,.tsx,.css,.xml,image/*"
|
||||
/>
|
||||
{/* Main Content */}
|
||||
<div className='flex-1 flex flex-col h-full w-full relative overflow-hidden'>
|
||||
{/* Header */}
|
||||
<div className="px-8 pt-8 pb-4 flex items-start justify-between shrink-0 z-20">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{t('chatTitle')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">{t('chatDesc')}</p>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-3 flex-shrink-0'>
|
||||
{/* History button */}
|
||||
<button
|
||||
onClick={handleShowHistory}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 hover:text-blue-600 hover:bg-slate-50 rounded-lg font-semibold text-sm transition-all shadow-sm"
|
||||
>
|
||||
<History size={18} />
|
||||
{t('viewHistory')}
|
||||
</button>
|
||||
|
||||
{/* New chat button */}
|
||||
<button
|
||||
onClick={handleNewChat}
|
||||
className="flex items-center gap-2 px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('newChat')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 overflow-hidden'>
|
||||
<ChatInterface
|
||||
files={files}
|
||||
settings={settings}
|
||||
models={modelConfigs}
|
||||
groups={groups}
|
||||
selectedGroups={selectedGroups}
|
||||
onGroupSelectionChange={setSelectedGroups}
|
||||
onOpenGroupSelection={() => setIsGroupSelectionOpen(true)} // Pass handler
|
||||
selectedFiles={selectedFiles}
|
||||
onClearFileSelection={() => setSelectedFiles([])}
|
||||
onMobileUploadClick={() => {
|
||||
fileInputRef.current?.click()
|
||||
}}
|
||||
currentHistoryId={currentHistoryId}
|
||||
historyMessages={historyMessages}
|
||||
onHistoryMessagesLoaded={() => setHistoryMessages(null)}
|
||||
onHistoryIdCreated={setCurrentHistoryId}
|
||||
onPreviewSource={setPreviewSource}
|
||||
authToken={authToken}
|
||||
onOpenFile={(source) => {
|
||||
if (source.fileId) {
|
||||
if (isFormatSupportedForPreview(source.fileName)) {
|
||||
setPdfPreview({ fileId: source.fileId, fileName: source.fileName });
|
||||
} else {
|
||||
showWarning(t('previewNotSupported'));
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={handleCancelIndexing}
|
||||
files={pendingFiles}
|
||||
embeddingModels={modelConfigs.filter(m => m.type === ModelType.EMBEDDING)}
|
||||
defaultEmbeddingId={settings.selectedEmbeddingId}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
/>
|
||||
|
||||
{/* Group Selection Drawer */}
|
||||
<GroupSelectionDrawer
|
||||
isOpen={isGroupSelectionOpen}
|
||||
onClose={() => setIsGroupSelectionOpen(false)}
|
||||
groups={groups}
|
||||
selectedGroups={selectedGroups}
|
||||
onSelectionChange={setSelectedGroups}
|
||||
/>
|
||||
|
||||
{/* Knowledge base enhancement features modal (Legacy) */}
|
||||
{isGroupManagerOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold">{t('notebooks')}</h2>
|
||||
<button
|
||||
onClick={() => setIsGroupManagerOpen(false)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<GroupManager
|
||||
groups={groups}
|
||||
onGroupsChange={handleGroupsChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<HistoryDrawer
|
||||
isOpen={isHistoryOpen}
|
||||
onClose={() => setIsHistoryOpen(false)}
|
||||
groups={groups}
|
||||
onSelectHistory={handleSelectHistory}
|
||||
/>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SourcePreviewDrawer
|
||||
isOpen={!!previewSource}
|
||||
onClose={() => setPreviewSource(null)}
|
||||
source={previewSource}
|
||||
onOpenFile={(source) => {
|
||||
if (source.fileId) {
|
||||
if (isFormatSupportedForPreview(source.fileName)) {
|
||||
setPdfPreview({ fileId: source.fileId, fileName: source.fileName });
|
||||
} else {
|
||||
showWarning(t('previewNotSupported'));
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,952 @@
|
||||
import React, { useCallback, useEffect, useState, useMemo } from 'react'
|
||||
import IndexingModalWithMode from '../../components/IndexingModalWithMode'
|
||||
import { PDFPreview } from '../../components/PDFPreview'
|
||||
import { DragDropUpload } from '../../components/DragDropUpload'
|
||||
import { GlobalDragDropOverlay } from '../../components/GlobalDragDropOverlay'
|
||||
import {
|
||||
AppSettings,
|
||||
DEFAULT_MODELS,
|
||||
DEFAULT_SETTINGS,
|
||||
IndexingConfig,
|
||||
KnowledgeFile,
|
||||
ModelConfig,
|
||||
ModelType,
|
||||
RawFile,
|
||||
KnowledgeGroup,
|
||||
} from '../../types'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { userSettingService } from '../../services/userSettingService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import { ChunkInfoDrawer } from '../../components/ChunkInfoDrawer'
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
FileType,
|
||||
CheckCircle2,
|
||||
CircleDashed,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
Trash2,
|
||||
Settings,
|
||||
Folder,
|
||||
Hash,
|
||||
Tag,
|
||||
Layers,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
FolderInput,
|
||||
Box,
|
||||
} from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { KB_ALLOWED_EXTENSIONS, IMAGE_MIME_TYPES, isExtensionAllowed, isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { ImportFolderDrawer } from '../../components/ImportFolderDrawer'
|
||||
import { ImportTasksDrawer } from '../../components/drawers/ImportTasksDrawer'
|
||||
|
||||
interface KnowledgeBaseViewProps {
|
||||
authToken: string;
|
||||
onLogout: () => void;
|
||||
modelConfigs?: ModelConfig[];
|
||||
onNavigate: (view: any) => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
/** Flatten a tree of groups into a flat list (for file counts, filtering, etc.) */
|
||||
function flattenGroups(groups: KnowledgeGroup[]): (KnowledgeGroup & { depth?: number })[] {
|
||||
const result: (KnowledgeGroup & { depth?: number })[] = [];
|
||||
function walk(items: KnowledgeGroup[], depth = 0) {
|
||||
for (const g of items) {
|
||||
result.push({ ...g, depth });
|
||||
if (g.children?.length) walk(g.children, depth + 1);
|
||||
}
|
||||
}
|
||||
walk(groups);
|
||||
return result;
|
||||
}
|
||||
|
||||
/** Recursively collect all descendant group IDs (including self) */
|
||||
function collectGroupIds(group: KnowledgeGroup): string[] {
|
||||
const ids = [group.id];
|
||||
if (group.children?.length) {
|
||||
for (const child of group.children) {
|
||||
ids.push(...collectGroupIds(child));
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
// ---- Tree node component ----
|
||||
interface GroupTreeNodeProps {
|
||||
group: KnowledgeGroup;
|
||||
selectedGroupId?: string;
|
||||
onSelect: (groupId: string) => void;
|
||||
isAdmin: boolean;
|
||||
onEdit: (group: KnowledgeGroup) => void;
|
||||
onDelete: (group: KnowledgeGroup) => void;
|
||||
depth?: number;
|
||||
}
|
||||
|
||||
const GroupTreeNode: React.FC<GroupTreeNodeProps> = ({
|
||||
group,
|
||||
selectedGroupId,
|
||||
onSelect,
|
||||
isAdmin,
|
||||
onEdit,
|
||||
onDelete,
|
||||
depth = 0,
|
||||
}) => {
|
||||
const hasChildren = group.children && group.children.length > 0;
|
||||
const isSelected = selectedGroupId === group.id ||
|
||||
(hasChildren && group.children!.some(c => collectGroupIds(c).includes(selectedGroupId || '')));
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
// Auto-expand if a child is selected
|
||||
useEffect(() => {
|
||||
if (selectedGroupId && hasChildren) {
|
||||
const allIds = collectGroupIds(group);
|
||||
if (allIds.includes(selectedGroupId)) setCollapsed(false);
|
||||
}
|
||||
}, [selectedGroupId]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={`group flex items-center justify-between rounded-lg transition-colors ${selectedGroupId === group.id ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
style={{ paddingLeft: `${depth * 12 + 12}px` }}
|
||||
>
|
||||
{/* Expand/collapse toggle */}
|
||||
<div className="flex items-center flex-1">
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setCollapsed(c => !c); }}
|
||||
className="p-0.5 mr-1 shrink-0 text-slate-400 hover:text-slate-700"
|
||||
>
|
||||
{collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-5 shrink-0" />
|
||||
)}
|
||||
<button
|
||||
onClick={() => onSelect(group.id)}
|
||||
className="flex-1 flex items-center gap-1.5 py-1.5 text-sm font-medium text-left whitespace-nowrap"
|
||||
>
|
||||
<Folder size={14} className={selectedGroupId === group.id ? 'text-blue-500 shrink-0' : 'text-slate-400 shrink-0'} />
|
||||
<span>{group.name}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 pr-2 shrink-0">
|
||||
<button
|
||||
onClick={() => onEdit(group)}
|
||||
className="p-1 text-slate-400 hover:text-blue-600 rounded"
|
||||
>
|
||||
<Settings size={11} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(group)}
|
||||
className="p-1 text-slate-400 hover:text-red-500 rounded"
|
||||
>
|
||||
<Trash2 size={11} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Children */}
|
||||
{hasChildren && !collapsed && (
|
||||
<div>
|
||||
{group.children!.map(child => (
|
||||
<GroupTreeNode
|
||||
key={child.id}
|
||||
group={child}
|
||||
selectedGroupId={selectedGroupId}
|
||||
onSelect={onSelect}
|
||||
isAdmin={isAdmin}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Pagination component ----
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalItems: number;
|
||||
pageSize: number;
|
||||
onPageChange: (page: number) => void;
|
||||
t: (key: string, ...args: any[]) => string;
|
||||
}
|
||||
|
||||
const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, totalItems, pageSize, onPageChange, t }) => {
|
||||
if (totalItems === 0) return null;
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, totalItems);
|
||||
return (
|
||||
<div className="px-8 py-4 border-t border-slate-200/60 bg-white/50 backdrop-blur-md flex items-center justify-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => onPageChange(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600 text-sm"
|
||||
>
|
||||
{t('previous')}
|
||||
</button>
|
||||
<div className="px-3 py-2 text-sm font-semibold text-slate-700">
|
||||
{t('showingRange', start, end, totalItems)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600 text-sm"
|
||||
>
|
||||
{t('next')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const KnowledgeBaseView: React.FC<KnowledgeBaseViewProps> = (props) => {
|
||||
const { authToken, modelConfigs = DEFAULT_MODELS, isAdmin = false } = props;
|
||||
const { showError, showWarning, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const { t } = useLanguage()
|
||||
|
||||
// Data State
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
// groups is now a tree; flatGroups is the flattened version for lookups
|
||||
const [groups, setGroups] = useState<KnowledgeGroup[]>([])
|
||||
const flatGroups = useMemo(() => flattenGroups(groups), [groups])
|
||||
const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS)
|
||||
const [globalStats, setGlobalStats] = useState<{ total: number, uncategorized: number }>({ total: 0, uncategorized: 0 })
|
||||
const [isLoadingSettings, setIsLoadingSettings] = useState(true)
|
||||
const [isLoadingFiles, setIsLoadingFiles] = useState(true)
|
||||
|
||||
// UI State
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
const [fileInputRef] = useState<React.RefObject<HTMLInputElement>>(React.createRef())
|
||||
const [shouldOpenModal, setShouldOpenModal] = useState(false)
|
||||
|
||||
// Filter & Pagination State
|
||||
const [filterName, setFilterName] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState<'all' | 'ready' | 'indexing' | 'failed'>('all')
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const pageSize = 12
|
||||
const [chunkDrawer, setChunkDrawer] = useState<{ isOpen: boolean; fileId: string; fileName: string } | null>(null)
|
||||
|
||||
const [isAutoRefreshEnabled] = useState(false)
|
||||
const [autoRefreshInterval] = useState<number>(5000)
|
||||
|
||||
// Sidebar State
|
||||
const [selectedSidebarFilter, setSelectedSidebarFilter] = useState<{ type: 'all' | 'uncategorized' | 'group'; groupId?: string }>({ type: 'all' })
|
||||
const [isGroupModalOpen, setIsGroupModalOpen] = useState(false)
|
||||
const [isImportDrawerOpen, setIsImportDrawerOpen] = useState(false);
|
||||
const [isImportTasksDrawerOpen, setIsImportTasksDrawerOpen] = useState(false);
|
||||
const [editingGroup, setEditingGroup] = useState<KnowledgeGroup | null>(null)
|
||||
const [newGroupName, setNewGroupName] = useState('')
|
||||
const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null)
|
||||
|
||||
const fetchAndSetSettings = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const settingsData = await userSettingService.get(authToken);
|
||||
setSettings({ ...DEFAULT_SETTINGS, ...settingsData })
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings:', error)
|
||||
} finally {
|
||||
setIsLoadingSettings(false)
|
||||
}
|
||||
}, [authToken, isAdmin])
|
||||
|
||||
const fetchAndSetFiles = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsLoadingFiles(true)
|
||||
const result = await knowledgeBaseService.getAll(authToken, {
|
||||
page: currentPage,
|
||||
limit: pageSize,
|
||||
name: filterName,
|
||||
status: filterStatus,
|
||||
groupId: selectedSidebarFilter.type === 'group' ? selectedSidebarFilter.groupId : undefined
|
||||
})
|
||||
setFiles(result.items)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch files:', error)
|
||||
} finally {
|
||||
setIsLoadingFiles(false)
|
||||
}
|
||||
}, [authToken, currentPage, filterName, filterStatus, selectedSidebarFilter])
|
||||
|
||||
const fetchAndSetGroups = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const remoteGroups = await knowledgeGroupService.getGroups()
|
||||
setGroups(remoteGroups)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch groups:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
const fetchAndSetStats = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
const stats = await knowledgeBaseService.getStats(authToken)
|
||||
setGlobalStats(stats)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats:', error)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetSettings()
|
||||
fetchAndSetGroups()
|
||||
fetchAndSetStats()
|
||||
}
|
||||
}, [authToken, fetchAndSetSettings, fetchAndSetGroups, fetchAndSetStats])
|
||||
|
||||
useEffect(() => {
|
||||
if (authToken) {
|
||||
fetchAndSetFiles()
|
||||
}
|
||||
}, [fetchAndSetFiles])
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldOpenModal && pendingFiles.length > 0) {
|
||||
setIsIndexingModalOpen(true);
|
||||
setShouldOpenModal(false);
|
||||
}
|
||||
}, [shouldOpenModal, pendingFiles.length]);
|
||||
|
||||
const handleFileUpload = async (fileList: FileList) => {
|
||||
if (!authToken) {
|
||||
showWarning(t('loginRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
const MAX_FILE_SIZE = 104857600;
|
||||
const rawFiles: RawFile[] = []
|
||||
const errors: string[] = []
|
||||
|
||||
const filesArray = Array.from(fileList);
|
||||
for (const file of filesArray) {
|
||||
const extension = file.name.split('.').pop() || ''
|
||||
if (!isExtensionAllowed(extension, 'kb')) {
|
||||
errors.push(t('unsupportedFileType', file.name, extension))
|
||||
continue
|
||||
}
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
errors.push(t('fileSizeLimitExceeded', file.name, formatBytes(file.size), 100))
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
const rawFile = await readFile(file)
|
||||
rawFiles.push(rawFile)
|
||||
} catch (error) {
|
||||
errors.push(`${file.name} - ${t('readingFailed')}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) showError(`${t('uploadErrors')}:\n${errors.join('\n')}`);
|
||||
if (rawFiles.length === 0) return;
|
||||
|
||||
setPendingFiles(rawFiles);
|
||||
setShouldOpenModal(true);
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
if (!authToken) return
|
||||
let hasSuccess = false
|
||||
|
||||
for (const rawFile of pendingFiles) {
|
||||
try {
|
||||
const indexingConfig = {
|
||||
...config,
|
||||
groupIds: selectedSidebarFilter.type === 'group' ? [selectedSidebarFilter.groupId!] : []
|
||||
};
|
||||
await uploadService.uploadFileWithConfig(rawFile.file, indexingConfig, authToken)
|
||||
hasSuccess = true
|
||||
} catch (error: any) {
|
||||
showError(`${t('uploadFailed')}: ${rawFile.name} - ${error.message}`)
|
||||
}
|
||||
}
|
||||
if (hasSuccess) await fetchAndSetFiles()
|
||||
setPendingFiles([])
|
||||
setIsIndexingModalOpen(false)
|
||||
}
|
||||
|
||||
const handleRemoveFile = async (id: string) => {
|
||||
if (!(await confirm(t('confirmDeleteFile')))) return
|
||||
if (!authToken) return
|
||||
try {
|
||||
await knowledgeBaseService.deleteFile(id, authToken)
|
||||
setFiles(prev => prev.filter(f => f.id !== id))
|
||||
showSuccess(t('fileDeleted'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('deleteFailed')}: ` + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleFileCategory = async (file: KnowledgeFile, groupId: string) => {
|
||||
try {
|
||||
const currentGroupIds = file.groups?.map(g => g.id) || [];
|
||||
const isAssigned = currentGroupIds.includes(groupId);
|
||||
|
||||
let newGroupIds: string[];
|
||||
if (isAssigned) {
|
||||
newGroupIds = currentGroupIds.filter(id => id !== groupId);
|
||||
} else {
|
||||
newGroupIds = [...currentGroupIds, groupId];
|
||||
}
|
||||
|
||||
await knowledgeGroupService.addFileToGroups(file.id, newGroupIds);
|
||||
await fetchAndSetFiles();
|
||||
} catch (error: any) {
|
||||
console.error('Failed to toggle category:', error);
|
||||
showError(t('actionFailed') + ': ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearAll = async () => {
|
||||
if (!(await confirm(t('confirmClearKB')))) return
|
||||
if (!authToken) return
|
||||
try {
|
||||
await knowledgeBaseService.clearAll(authToken)
|
||||
setFiles([])
|
||||
fetchAndSetStats()
|
||||
showSuccess(t('kbCleared'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('clearFailed')}: ` + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// Filtering: when a group is selected, include files in that group AND all descendant groups
|
||||
const filteredFiles = useMemo(() => {
|
||||
return files.filter(file => {
|
||||
const matchName = file.name.toLowerCase().includes(filterName.toLowerCase());
|
||||
|
||||
let matchGroup = true;
|
||||
if (selectedSidebarFilter.type === 'uncategorized') {
|
||||
matchGroup = !file.groups || file.groups.length === 0;
|
||||
} else if (selectedSidebarFilter.type === 'group' && selectedSidebarFilter.groupId) {
|
||||
// Find the selected group in the tree to collect all descendant IDs
|
||||
const selectedGroup = flatGroups.find(g => g.id === selectedSidebarFilter.groupId);
|
||||
const allIds = selectedGroup ? collectGroupIds(selectedGroup) : [selectedSidebarFilter.groupId];
|
||||
matchGroup = file.groups?.some(g => allIds.includes(g.id)) || false;
|
||||
}
|
||||
|
||||
const matchStatus = filterStatus === 'all' ||
|
||||
(filterStatus === 'ready' && (file.status === 'ready' || file.status === 'vectorized')) ||
|
||||
(filterStatus === 'indexing' && (file.status === 'indexing' || file.status === 'pending' || file.status === 'extracted')) ||
|
||||
(filterStatus === 'failed' && (file.status === 'failed' || file.status === 'error'));
|
||||
return matchName && matchGroup && matchStatus;
|
||||
});
|
||||
}, [files, filterName, selectedSidebarFilter, filterStatus, flatGroups]);
|
||||
|
||||
const totalPages = Math.ceil(filteredFiles.length / pageSize);
|
||||
const paginatedFiles = useMemo(() => {
|
||||
const start = (currentPage - 1) * pageSize;
|
||||
return filteredFiles.slice(start, start + pageSize);
|
||||
}, [filteredFiles, currentPage, pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [filterName, filterStatus, selectedSidebarFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId: NodeJS.Timeout | null = null;
|
||||
const hasIndexingFiles = files.some(file => ['pending', 'indexing', 'extracted', 'vectorized'].includes(file.status));
|
||||
|
||||
if (isAutoRefreshEnabled && hasIndexingFiles) {
|
||||
intervalId = setInterval(() => {
|
||||
fetchAndSetFiles();
|
||||
}, autoRefreshInterval);
|
||||
}
|
||||
|
||||
return () => { if (intervalId) clearInterval(intervalId); };
|
||||
}, [isAutoRefreshEnabled, files, autoRefreshInterval, fetchAndSetFiles]);
|
||||
|
||||
const getFileIcon = (file: KnowledgeFile) => {
|
||||
if (file.type.startsWith('image/')) return <ImageIcon size={20} className="text-slate-500" />;
|
||||
if (file.type === 'application/pdf') return <FileType size={20} className="text-blue-500" />;
|
||||
return <FileText size={20} className="text-blue-500" />;
|
||||
};
|
||||
|
||||
const handleCreateOrUpdateGroup = async () => {
|
||||
if (!newGroupName.trim()) return
|
||||
try {
|
||||
if (editingGroup) {
|
||||
await knowledgeGroupService.updateGroup(editingGroup.id, { name: newGroupName, parentId: newGroupParentId })
|
||||
showSuccess(t('groupUpdated'))
|
||||
} else {
|
||||
await knowledgeGroupService.createGroup({ name: newGroupName, parentId: newGroupParentId })
|
||||
showSuccess(t('groupCreated'))
|
||||
}
|
||||
fetchAndSetGroups()
|
||||
setIsGroupModalOpen(false)
|
||||
setEditingGroup(null)
|
||||
setNewGroupName('')
|
||||
setNewGroupParentId(null)
|
||||
} catch (error: any) {
|
||||
showError(t('actionFailed') + ': ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteGroup = async (group: KnowledgeGroup) => {
|
||||
if (!(await confirm(t('confirmDeleteGroup').replace('$1', group.name)))) return
|
||||
try {
|
||||
await knowledgeGroupService.deleteGroup(group.id)
|
||||
showSuccess(t('groupDeleted'))
|
||||
if (selectedSidebarFilter.groupId === group.id) {
|
||||
setSelectedSidebarFilter({ type: 'all' })
|
||||
}
|
||||
fetchAndSetGroups()
|
||||
} catch (error: any) {
|
||||
showError(t('deleteFailed') + ': ' + error.message)
|
||||
}
|
||||
}
|
||||
|
||||
const openCreateGroup = (parentId?: string | null) => {
|
||||
setEditingGroup(null);
|
||||
setNewGroupName('');
|
||||
setNewGroupParentId(parentId ?? null);
|
||||
setIsGroupModalOpen(true);
|
||||
}
|
||||
|
||||
const openEditGroup = (group: KnowledgeGroup) => {
|
||||
setEditingGroup(group);
|
||||
setNewGroupName(group.name);
|
||||
setNewGroupParentId(group.parentId ?? null);
|
||||
setIsGroupModalOpen(true);
|
||||
}
|
||||
|
||||
const selectedGroupObj = selectedSidebarFilter.type === 'group'
|
||||
? flatGroups.find(g => g.id === selectedSidebarFilter.groupId)
|
||||
: null;
|
||||
|
||||
if (isLoadingSettings) {
|
||||
return (
|
||||
<div className='flex items-center justify-center min-h-[400px] w-full'>
|
||||
<div className='text-blue-600 animate-spin rounded-full h-8 w-8 border-2 border-t-transparent border-blue-600'></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex flex-row h-full w-full bg-slate-50 overflow-hidden'>
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-white border-r border-slate-200 flex flex-col shrink-0">
|
||||
<div className="p-6 flex flex-col min-h-0">
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">{t('navCatalog')}</h2>
|
||||
<nav className="space-y-1">
|
||||
<button
|
||||
onClick={() => setSelectedSidebarFilter({ type: 'all' })}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'all' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers size={16} />
|
||||
<span>{t('allDocuments')}</span>
|
||||
</div>
|
||||
<span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">{files.length}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedSidebarFilter({ type: 'uncategorized' })}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'uncategorized' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText size={16} />
|
||||
<span>{t('uncategorized')}</span>
|
||||
</div>
|
||||
<span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">
|
||||
{files.filter(f => !f.groups || f.groups.length === 0).length}
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="mt-6 flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider">{t('categories')}</h2>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => openCreateGroup(null)}
|
||||
className="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-all"
|
||||
title={t('createCategory') as string}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5 overflow-y-auto overflow-x-auto flex-1 pr-1 pb-4">
|
||||
{groups.map(group => (
|
||||
<GroupTreeNode
|
||||
key={group.id}
|
||||
group={group}
|
||||
selectedGroupId={selectedSidebarFilter.type === 'group' ? selectedSidebarFilter.groupId : undefined}
|
||||
onSelect={(gId) => setSelectedSidebarFilter({ type: 'group', groupId: gId })}
|
||||
isAdmin={isAdmin}
|
||||
onEdit={openEditGroup}
|
||||
onDelete={handleDeleteGroup}
|
||||
depth={0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className='flex flex-col flex-1 h-full w-full bg-transparent overflow-hidden'>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) handleFileUpload(e.target.files)
|
||||
}}
|
||||
multiple
|
||||
className="hidden"
|
||||
accept={KB_ALLOWED_EXTENSIONS.map(ext => `.${ext}`).join(',') + ',' + IMAGE_MIME_TYPES.join(',')}
|
||||
/>
|
||||
|
||||
<GlobalDragDropOverlay onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{selectedSidebarFilter.type === 'all' ? t('kbManagement') :
|
||||
selectedSidebarFilter.type === 'uncategorized' ? t('uncategorizedFiles') :
|
||||
selectedGroupObj?.name || t('category')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">
|
||||
{selectedSidebarFilter.type === 'group'
|
||||
? selectedGroupObj?.description || t('kbManagementDesc')
|
||||
: t('kbManagementDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{isAdmin && (
|
||||
<>
|
||||
{selectedSidebarFilter.type === 'group' && (
|
||||
<button
|
||||
onClick={() => openCreateGroup(selectedSidebarFilter.groupId)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<Plus size={16} />
|
||||
{t('addSubcategory')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setIsImportTasksDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<Box size={18} className="text-indigo-600" />
|
||||
{t('importTasksTitle')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsImportDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg shadow-sm transition-all font-semibold text-sm active:scale-95 hover:bg-slate-50"
|
||||
>
|
||||
<FolderInput size={18} className="text-blue-600" />
|
||||
{t('importFolder')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('addFile')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="px-8 pb-6 flex items-center justify-between gap-4 shrink-0">
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('searchPlaceholder')}
|
||||
value={filterName}
|
||||
onChange={(e) => setFilterName(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => fetchAndSetFiles()}
|
||||
className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
<div className="flex-1 overflow-y-auto px-8 pb-4">
|
||||
{isLoadingFiles ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : paginatedFiles.length > 0 ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{paginatedFiles.map((file) => (
|
||||
<motion.div
|
||||
key={file.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-4 shadow-sm hover:shadow-md transition-all group relative flex items-center gap-4"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="p-2.5 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 shrink-0">
|
||||
{getFileIcon(file)}
|
||||
</div>
|
||||
|
||||
{/* Name & Desc */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3
|
||||
onClick={() => setChunkDrawer({ isOpen: true, fileId: file.id, fileName: file.name })}
|
||||
className="font-bold text-slate-900 text-[15px] cursor-pointer hover:text-blue-600 transition-colors truncate"
|
||||
>
|
||||
{file.name}
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold tracking-wider uppercase shrink-0">
|
||||
{file.name.split('.').pop()?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[13px] text-slate-500 truncate">
|
||||
{file.status === 'ready' || file.status === 'vectorized'
|
||||
? t('statusReadyDesc')
|
||||
: t('statusIndexingDesc', file.status)
|
||||
}
|
||||
</p>
|
||||
{file.groups && file.groups.length > 0 && (
|
||||
<div className="flex gap-1 ml-2">
|
||||
{file.groups.map(g => (
|
||||
<span key={g.id} className="text-[10px] px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded-full border border-blue-100">
|
||||
{g.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta & Actions */}
|
||||
<div className="flex items-center gap-6 shrink-0">
|
||||
<div className="text-[12px] font-medium text-slate-400 flex flex-col items-end">
|
||||
<span>{new Date(file.createdAt || Date.now()).toLocaleDateString()}</span>
|
||||
<span>{formatBytes(file.size)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{file.status !== 'ready' && file.status !== 'vectorized' ? (
|
||||
<CircleDashed size={16} className="text-blue-400 animate-spin mr-2" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isFormatSupportedForPreview(file.name) && (
|
||||
<button onClick={() => setPdfPreview({ fileId: file.id, fileName: file.name })} className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title={t('preview') as string || 'Preview'}>
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
)}
|
||||
<div className="relative group/tag">
|
||||
<button className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title={t('groups') as string || 'Groups'}>
|
||||
<Tag size={16} />
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-1 w-52 bg-white border border-slate-200 rounded-lg shadow-lg opacity-0 invisible group-hover/tag:opacity-100 group-hover/tag:visible transition-all z-20 overflow-hidden">
|
||||
<div className="p-2 border-b border-slate-100 bg-slate-50 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
{t('selectCategory')}
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => knowledgeGroupService.addFileToGroups(file.id, []).then(fetchAndSetFiles)}
|
||||
className="w-full text-left px-3 py-2 text-xs text-slate-600 hover:bg-slate-50 flex items-center gap-2"
|
||||
>
|
||||
<Layers size={12} />
|
||||
{t('noneUncategorized')}
|
||||
</button>
|
||||
{flatGroups.map(g => (
|
||||
<button
|
||||
key={g.id}
|
||||
onClick={() => handleToggleFileCategory(file, g.id)}
|
||||
style={{ paddingLeft: `${(g.depth || 0) * 12 + 12}px` }}
|
||||
className="w-full text-left pr-3 py-2 text-xs text-slate-600 hover:bg-slate-50 border-t border-slate-50 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<Hash size={12} className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-500 shrink-0' : 'text-slate-400 shrink-0'} />
|
||||
<span className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-600 font-medium truncate' : 'truncate'}>{g.name}</span>
|
||||
</div>
|
||||
{file.groups?.some(fg => fg.id === g.id) && <CheckCircle2 size={12} className="text-blue-600 shrink-0 ml-2" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<button onClick={() => handleRemoveFile(file.id)} className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50" title={t('delete') as string || 'Delete'}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-4xl mx-auto w-full pt-12">
|
||||
<DragDropUpload onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalItems={filteredFiles.length}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setCurrentPage}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={() => { setPendingFiles([]); setIsIndexingModalOpen(false); }}
|
||||
files={pendingFiles}
|
||||
embeddingModels={modelConfigs.filter(m => m.type === ModelType.EMBEDDING)}
|
||||
defaultEmbeddingId={settings.selectedEmbeddingId}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
authToken={authToken}
|
||||
/>
|
||||
|
||||
{/* Group Create/Edit Modal */}
|
||||
<AnimatePresence>
|
||||
{isGroupModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"
|
||||
>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-slate-900 mb-2">
|
||||
{editingGroup ? t('editCategory') : t('createCategory')}
|
||||
</h2>
|
||||
<p className="text-slate-500 text-sm mb-6">
|
||||
{t('categoryDesc')}
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{t('categoryName')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newGroupName}
|
||||
onChange={(e) => setNewGroupName(e.target.value)}
|
||||
placeholder={t('exampleResearch')}
|
||||
className="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
||||
autoFocus
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleCreateOrUpdateGroup()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Parent category selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">{t('parentCategory')}</label>
|
||||
<select
|
||||
value={newGroupParentId ?? ''}
|
||||
onChange={(e) => setNewGroupParentId(e.target.value || null)}
|
||||
className="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all text-sm"
|
||||
>
|
||||
<option value="">{t('noParentTopLevel')}</option>
|
||||
{flatGroups
|
||||
.filter(g => g.id !== editingGroup?.id) // don't allow self as parent
|
||||
.map(g => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{'\u00A0'.repeat((g.depth || 0) * 4)}{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => { setIsGroupModalOpen(false); setEditingGroup(null); setNewGroupParentId(null); }}
|
||||
className="px-4 py-2 text-slate-600 font-medium hover:bg-slate-200/50 rounded-lg transition-all"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreateOrUpdateGroup}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
{editingGroup ? t('saveChanges') : t('createCategoryBtn')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{chunkDrawer && (
|
||||
<ChunkInfoDrawer
|
||||
isOpen={chunkDrawer.isOpen}
|
||||
onClose={() => setChunkDrawer(null)}
|
||||
fileId={chunkDrawer.fileId}
|
||||
fileName={chunkDrawer.fileName}
|
||||
authToken={authToken}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ImportFolderDrawer
|
||||
isOpen={isImportDrawerOpen}
|
||||
onClose={() => setIsImportDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
onImportSuccess={() => fetchAndSetFiles()}
|
||||
/>
|
||||
|
||||
<ImportTasksDrawer
|
||||
isOpen={isImportTasksDrawerOpen}
|
||||
onClose={() => setIsImportTasksDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,550 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
import { Book, Plus, Search, Trash2, Edit2, Clock, Eye, EyeOff, X, ArrowLeft, Folder, FolderPlus, MoreVertical, Check, ChevronRight } from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { noteService } from '../../services/noteService'
|
||||
import { noteCategoryService } from '../../services/noteCategoryService'
|
||||
import { Note, NoteCategory } from '../../types'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
|
||||
interface MemosViewProps {
|
||||
authToken: string
|
||||
isAdmin?: boolean
|
||||
}
|
||||
|
||||
export const MemosView: React.FC<MemosViewProps> = ({ authToken, isAdmin = false }) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
|
||||
const [notes, setNotes] = useState<Note[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [filterText, setFilterText] = useState('')
|
||||
|
||||
// Editor state
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [currentNote, setCurrentNote] = useState<Partial<Note>>({})
|
||||
const [showPreview, setShowPreview] = useState(true)
|
||||
|
||||
// Category state
|
||||
const [categories, setCategories] = useState<NoteCategory[]>([])
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null) // null = All
|
||||
const [isCategoryLoading, setIsCategoryLoading] = useState(false)
|
||||
const [showAddCategory, setShowAddCategory] = useState(false)
|
||||
const [newCategoryName, setNewCategoryName] = useState('')
|
||||
const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null)
|
||||
const [editCategoryName, setEditCategoryName] = useState('')
|
||||
const [addingSubCategoryId, setAddingSubCategoryId] = useState<string | null>(null)
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
|
||||
|
||||
const fetchNotes = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const data = await noteService.getAll(authToken, undefined, selectedCategoryId || undefined)
|
||||
setNotes(data)
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
const errorMsg = error.message || ''
|
||||
if (!errorMsg.includes('401') && !errorMsg.includes('403')) {
|
||||
showError(`${t('errorLoadData')}: ${errorMsg}`)
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [authToken, selectedCategoryId, showError, t])
|
||||
|
||||
const fetchCategories = useCallback(async () => {
|
||||
if (!authToken) return
|
||||
try {
|
||||
setIsCategoryLoading(true)
|
||||
const data = await noteCategoryService.getAll(authToken)
|
||||
setCategories(data)
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsCategoryLoading(false)
|
||||
}
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotes()
|
||||
}, [fetchNotes])
|
||||
|
||||
useEffect(() => {
|
||||
fetchCategories()
|
||||
}, [fetchCategories])
|
||||
|
||||
const handleSaveNote = async () => {
|
||||
if (!currentNote.title || !currentNote.content) {
|
||||
showError(t('errorTitleContentRequired'))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (currentNote.id) {
|
||||
await noteService.update(authToken, currentNote.id, {
|
||||
title: currentNote.title,
|
||||
content: currentNote.content,
|
||||
categoryId: currentNote.categoryId
|
||||
})
|
||||
showSuccess(t('successNoteUpdated'))
|
||||
} else {
|
||||
await noteService.create(authToken, {
|
||||
title: currentNote.title,
|
||||
content: currentNote.content,
|
||||
groupId: '',
|
||||
categoryId: currentNote.categoryId || selectedCategoryId || undefined
|
||||
})
|
||||
showSuccess(t('successNoteCreated'))
|
||||
}
|
||||
setIsEditing(false)
|
||||
setCurrentNote({})
|
||||
fetchNotes()
|
||||
} catch (error: any) {
|
||||
showError(t('errorSaveFailed', error.message))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteNote = async (id: string) => {
|
||||
if (!(await confirm(t('confirmDeleteNote')))) return
|
||||
try {
|
||||
await noteService.delete(authToken, id)
|
||||
showSuccess(t('successNoteDeleted'))
|
||||
fetchNotes()
|
||||
} catch (error) {
|
||||
showError(t('deleteFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const filteredNotes = notes.filter(n =>
|
||||
n.title.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
n.content.toLowerCase().includes(filterText.toLowerCase())
|
||||
)
|
||||
|
||||
const handleCreateCategory = async (e: React.FormEvent, parentId?: string) => {
|
||||
e.preventDefault()
|
||||
if (!newCategoryName.trim()) return
|
||||
try {
|
||||
await noteCategoryService.create(authToken, newCategoryName.trim(), parentId)
|
||||
setNewCategoryName('')
|
||||
setShowAddCategory(false)
|
||||
setAddingSubCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('categoryCreated'))
|
||||
} catch (error: any) {
|
||||
showError(`${t('failedToCreateCategory')}: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateCategory = async (id: string) => {
|
||||
if (!editCategoryName.trim()) return
|
||||
try {
|
||||
await noteCategoryService.update(authToken, id, editCategoryName.trim())
|
||||
setEditingCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('groupUpdated'))
|
||||
} catch (error) {
|
||||
showError(t('actionFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteCategory = async (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation()
|
||||
if (!(await confirm(t('confirmDeleteCategory')))) return
|
||||
try {
|
||||
await noteCategoryService.delete(authToken, id)
|
||||
if (selectedCategoryId === id) setSelectedCategoryId(null)
|
||||
fetchCategories()
|
||||
showSuccess(t('groupDeleted'))
|
||||
} catch (error) {
|
||||
showError(t('failedToDeleteCategory'))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCategory = (id: string, e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
const newExpanded = new Set(expandedCategories)
|
||||
if (newExpanded.has(id)) newExpanded.delete(id)
|
||||
else newExpanded.add(id)
|
||||
setExpandedCategories(newExpanded)
|
||||
}
|
||||
|
||||
const renderCategoryTree = (parentId: string | null) => {
|
||||
const items = categories.filter(c => (c.parentId || null) === (parentId || null))
|
||||
|
||||
return items.map(cat => {
|
||||
const hasChildren = categories.some(c => c.parentId === cat.id)
|
||||
const isExpanded = expandedCategories.has(cat.id)
|
||||
|
||||
return (
|
||||
<div key={cat.id} className="flex flex-col">
|
||||
<div className="group relative">
|
||||
{editingCategoryId === cat.id ? (
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 mx-2">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
value={editCategoryName}
|
||||
onChange={e => setEditCategoryName(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleUpdateCategory(cat.id)}
|
||||
/>
|
||||
<button onClick={() => handleUpdateCategory(cat.id)} className="text-blue-600"><Check size={14} /></button>
|
||||
<button onClick={() => setEditingCategoryId(null)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setSelectedCategoryId(cat.id)}
|
||||
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm group cursor-pointer transition-all ${selectedCategoryId === cat.id ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-100/50'}`}
|
||||
style={{ paddingLeft: `${(cat.level - 1) * 12 + 12}px` }}
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
<div
|
||||
onClick={(e) => toggleCategory(cat.id, e)}
|
||||
className={`p-0.5 hover:bg-blue-100 rounded transition-colors ${!hasChildren ? 'invisible' : ''}`}
|
||||
>
|
||||
<ChevronRight size={14} className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} />
|
||||
</div>
|
||||
<Folder size={16} className={selectedCategoryId === cat.id ? 'text-blue-600' : 'text-slate-400 group-hover:text-blue-500'} />
|
||||
<span className="truncate">{cat.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
{cat.level < 3 && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setAddingSubCategoryId(cat.id)
|
||||
setShowAddCategory(true)
|
||||
if (!isExpanded) {
|
||||
const newExpanded = new Set(expandedCategories)
|
||||
newExpanded.add(cat.id)
|
||||
setExpandedCategories(newExpanded)
|
||||
}
|
||||
}}
|
||||
className="p-1 hover:text-blue-600"
|
||||
title={t('subFolderPlaceholder')}
|
||||
>
|
||||
<FolderPlus size={12} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingCategoryId(cat.id)
|
||||
setEditCategoryName(cat.name)
|
||||
}}
|
||||
className="p-1 hover:text-blue-600"
|
||||
>
|
||||
<Edit2 size={12} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteCategory(e, cat.id)}
|
||||
className="p-1 hover:text-red-500"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="flex flex-col">
|
||||
{renderCategoryTree(cat.id)}
|
||||
{addingSubCategoryId === cat.id && (
|
||||
<form
|
||||
onSubmit={(e) => handleCreateCategory(e, cat.id)}
|
||||
className="my-1 mx-2"
|
||||
style={{ paddingLeft: `${cat.level * 12 + 12}px` }}
|
||||
>
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
placeholder={t('subFolderPlaceholder')}
|
||||
value={newCategoryName}
|
||||
onChange={e => setNewCategoryName(e.target.value)}
|
||||
onBlur={() => !newCategoryName && setAddingSubCategoryId(null)}
|
||||
/>
|
||||
<button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
|
||||
<button type="button" onClick={() => setAddingSubCategoryId(null)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white overflow-hidden">
|
||||
<div className="px-8 pt-8 pb-6 flex items-center justify-between shrink-0 border-b border-slate-100">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="p-2 -ml-2 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-slate-600 transition-colors"
|
||||
title={t('back')}
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-xl font-bold text-slate-900 leading-tight">
|
||||
{currentNote.id ? t('editNote') : t('newNote')}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('directoryLabel')}:</span>
|
||||
<select
|
||||
className="text-[11px] font-bold text-blue-600 bg-blue-50/50 px-2 py-0.5 rounded border-none outline-none focus:ring-0 cursor-pointer max-w-[150px] truncate"
|
||||
value={currentNote.categoryId || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, categoryId: e.target.value || undefined })}
|
||||
>
|
||||
<option value="">{t('uncategorized')}</option>
|
||||
{categories.map(c => {
|
||||
const parent = categories.find(p => p.id === c.parentId)
|
||||
const grandparent = parent ? categories.find(gp => gp.id === parent.parentId) : null
|
||||
const path = [grandparent, parent, c].filter(Boolean).map(cat => cat?.name).join(' > ')
|
||||
return (
|
||||
<option key={c.id} value={c.id}>
|
||||
{'\u00A0'.repeat((c.level - 1) * 2)}{c.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-[13px] font-semibold text-slate-500 hover:bg-slate-50 rounded-lg transition-all"
|
||||
>
|
||||
{showPreview ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
{showPreview ? t('hidePreview') : t('showPreview')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveNote}
|
||||
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-sm shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<div className={`flex-1 flex flex-col p-8 gap-6 ${showPreview ? 'border-r border-slate-100' : ''}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('noteTitlePlaceholder')}
|
||||
value={currentNote.title || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, title: e.target.value })}
|
||||
className="text-2xl font-bold text-slate-900 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full"
|
||||
/>
|
||||
<textarea
|
||||
placeholder={t('startWritingPlaceholder')}
|
||||
value={currentNote.content || ''}
|
||||
onChange={(e) => setCurrentNote({ ...currentNote, content: e.target.value })}
|
||||
className="flex-1 text-[15px] text-slate-700 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full resize-none leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showPreview && (
|
||||
<div className="flex-1 p-8 overflow-y-auto bg-slate-50/20">
|
||||
<div className="prose prose-slate prose-sm max-w-none">
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">{currentNote.title || t('previewHeader')}</h1>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
>
|
||||
{currentNote.content || t('noContentToPreview')}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-white overflow-hidden">
|
||||
{/* Category Sidebar */}
|
||||
<aside className="w-64 border-r border-slate-100 flex flex-col bg-slate-50/30 shrink-0">
|
||||
<div className="p-6 pb-2">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-[11px] font-black text-slate-400 uppercase tracking-widest">{t('personalNotebook') || t('directoryLabel')}</h2>
|
||||
<button
|
||||
onClick={() => setShowAddCategory(true)}
|
||||
className="p-1 hover:bg-slate-100 rounded-md text-slate-400 transition-colors"
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5">
|
||||
<button
|
||||
onClick={() => setSelectedCategoryId(null)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all ${!selectedCategoryId ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-50'}`}
|
||||
>
|
||||
<Book size={16} className={!selectedCategoryId ? 'text-blue-600' : 'text-slate-400'} />
|
||||
{t('allNotes')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-2">
|
||||
{showAddCategory && !addingSubCategoryId && (
|
||||
<form onSubmit={(e) => handleCreateCategory(e)} className="mb-4 px-2">
|
||||
<div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
|
||||
<input
|
||||
autoFocus
|
||||
className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
|
||||
placeholder={t('enterNamePlaceholder')}
|
||||
value={newCategoryName}
|
||||
onChange={e => setNewCategoryName(e.target.value)}
|
||||
onBlur={() => !newCategoryName && setShowAddCategory(false)}
|
||||
/>
|
||||
<button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
|
||||
<button type="button" onClick={() => setShowAddCategory(false)} className="text-slate-400"><X size={14} /></button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="space-y-1">
|
||||
{renderCategoryTree(null)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden relative">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">{t('navNotebook')}</h1>
|
||||
{selectedCategoryId && (
|
||||
<>
|
||||
<ChevronRight size={16} className="text-slate-300" />
|
||||
<span className="text-2xl font-bold text-blue-600 truncate max-w-[200px]">
|
||||
{categories.find(c => c.id === selectedCategoryId)?.name || t('directoryLabel')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[15px] text-slate-500">{t('notebookDesc') || 'Capture your personal thoughts and research notes.'}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setCurrentNote({ categoryId: selectedCategoryId || undefined })
|
||||
setIsEditing(true)
|
||||
}}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('newNote')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-8 pb-6 flex items-center shrink-0">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('filterNotesPlaceholder')}
|
||||
value={filterText}
|
||||
onChange={(e) => setFilterText(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 pb-8 flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : filteredNotes.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/10 text-center">
|
||||
<Book className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noNotesFound') || 'No Notes Found'}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('startByCreatingNote') || 'Start by creating your first personal note.'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<AnimatePresence>
|
||||
{filteredNotes.map((note) => (
|
||||
<motion.div
|
||||
key={note.id}
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-64 cursor-pointer"
|
||||
onClick={() => {
|
||||
setCurrentNote(note)
|
||||
setIsEditing(true)
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setCurrentNote(note)
|
||||
setIsEditing(true)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDeleteNote(note.id)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="w-11 h-11 bg-slate-50 rounded-lg text-slate-400 flex items-center justify-center mb-4 transition-all group-hover:bg-blue-600 group-hover:text-white">
|
||||
<Book size={20} />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 text-[16px] mb-2 leading-tight group-hover:text-blue-600 transition-colors truncate pr-12">
|
||||
{note.title}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-4 overflow-hidden">
|
||||
{note.content}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={12} className="text-slate-300" />
|
||||
<span className="text-[11px] font-medium text-slate-400">
|
||||
{new Date(note.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
{note.categoryId && (
|
||||
<span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium">
|
||||
{categories.find(c => c.id === note.categoryId)?.name || t('directoryLabel')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import React, { useEffect, useState, useCallback, useMemo } from 'react'
|
||||
import { ArrowLeft, Plus, MessageSquare, BookOpen, Trash2, Eye, FileText, FileType, Image as ImageIcon, Search, RefreshCw } from 'lucide-react'
|
||||
import { KnowledgeGroup, KnowledgeFile } from '../../types'
|
||||
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
|
||||
import { modelConfigService } from '../../services/modelConfigService'
|
||||
import { uploadService } from '../../services/uploadService'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
import { RawFile, IndexingConfig, ModelConfig } from '../../types'
|
||||
import IndexingModalWithMode from '../IndexingModalWithMode'
|
||||
import { PDFPreview } from '../PDFPreview'
|
||||
import { NotebookGlobalDragDropOverlay } from '../NotebookGlobalDragDropOverlay'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { readFile, formatBytes } from '../../utils/fileUtils'
|
||||
import { isExtensionAllowed, isFormatSupportedForPreview } from '../../constants/fileSupport'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
interface NotebookDetailViewProps {
|
||||
authToken: string;
|
||||
notebook: KnowledgeGroup;
|
||||
onBack: () => void;
|
||||
onChatWithContext?: (context: { selectedGroups?: string[], selectedFiles?: string[] }) => void;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
export const NotebookDetailView: React.FC<NotebookDetailViewProps> = ({ authToken, notebook, onBack, onChatWithContext, isAdmin = false }) => {
|
||||
const [files, setFiles] = useState<KnowledgeFile[]>([])
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const { showError, showSuccess } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const { t } = useLanguage()
|
||||
|
||||
const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
|
||||
const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
|
||||
const [shouldOpenModal, setShouldOpenModal] = useState(false)
|
||||
const [models, setModels] = useState<ModelConfig[]>([])
|
||||
const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
|
||||
const [filterName, setFilterName] = useState('')
|
||||
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
const res = await modelConfigService.getAll(authToken)
|
||||
setModels(res)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch models', error)
|
||||
}
|
||||
}
|
||||
if (authToken) fetchModels()
|
||||
}, [authToken])
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldOpenModal && pendingFiles.length > 0) {
|
||||
setIsIndexingModalOpen(true);
|
||||
setShouldOpenModal(false);
|
||||
}
|
||||
}, [shouldOpenModal, pendingFiles.length]);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const allFiles = await knowledgeBaseService.getAll(authToken)
|
||||
const notebookFiles = allFiles.filter(f => f.groups?.some(g => g.id === notebook.id))
|
||||
setFiles(notebookFiles)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('errorLoadData'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [authToken, notebook.id, t, showError])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
|
||||
const handleFileUpload = async (fileList: FileList | File[]) => {
|
||||
if (!fileList || fileList.length === 0) return
|
||||
const errors: string[] = []
|
||||
const newPendingFiles: RawFile[] = []
|
||||
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
const file = fileList[i]
|
||||
try {
|
||||
if (file.size > 104857600) {
|
||||
errors.push(`${file.name} - ${t('fileSizeLimitExceeded', file.name, formatBytes(file.size), 100)}`)
|
||||
continue
|
||||
}
|
||||
const extension = file.name.split('.').pop() || ''
|
||||
if (!isExtensionAllowed(extension, 'group')) {
|
||||
if (!(await confirm(t('confirmUnsupportedFile', extension || t('unknown'))))) continue
|
||||
}
|
||||
const rawFile = await readFile(file)
|
||||
newPendingFiles.push(rawFile)
|
||||
} catch (error: any) {
|
||||
errors.push(`${file.name} - ${t('readingFailed')}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) showError(`${t('uploadErrors')}:\n${errors.join('\n')}`)
|
||||
if (newPendingFiles.length > 0) {
|
||||
setPendingFiles(prev => [...prev, ...newPendingFiles])
|
||||
setShouldOpenModal(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmIndexing = async (config: IndexingConfig) => {
|
||||
setIsIndexingModalOpen(false)
|
||||
try {
|
||||
for (const rawFile of pendingFiles) {
|
||||
const uploadRes = await uploadService.uploadFileWithConfig(rawFile.file, config, authToken)
|
||||
if (uploadRes && uploadRes.id) {
|
||||
await knowledgeGroupService.addFileToGroups(uploadRes.id, [notebook.id])
|
||||
}
|
||||
}
|
||||
showSuccess(t('successUploadFile'))
|
||||
loadData()
|
||||
} catch (error: any) {
|
||||
showError(t('errorUploadFile', error.message || t('unknownError')))
|
||||
} finally {
|
||||
setPendingFiles([])
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveFile = async (fileId: string, fileName: string) => {
|
||||
if (!(await confirm(t('confirmRemoveFileFromGroup', fileName)))) return;
|
||||
try {
|
||||
await knowledgeGroupService.removeFileFromGroup(fileId, notebook.id);
|
||||
setFiles(prev => prev.filter(f => f.id !== fileId));
|
||||
showSuccess(t('fileDeleted'));
|
||||
} catch (error) {
|
||||
showError(t('deleteFailed'));
|
||||
}
|
||||
}
|
||||
|
||||
const filteredFiles = useMemo(() => {
|
||||
return files.filter(file => file.name.toLowerCase().includes(filterName.toLowerCase()));
|
||||
}, [files, filterName]);
|
||||
|
||||
const getFileIcon = (file: KnowledgeFile) => {
|
||||
if (file.type.startsWith('image/')) return <ImageIcon size={20} className="text-slate-500" />;
|
||||
if (file.type === 'application/pdf') return <FileType size={20} className="text-blue-500" />;
|
||||
return <FileText size={20} className="text-blue-500" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent overflow-hidden">
|
||||
<NotebookGlobalDragDropOverlay onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
|
||||
multiple
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div className="flex items-start gap-4 min-w-0">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="mt-1 p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-colors active:scale-90"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 bg-blue-50 rounded-lg text-blue-600 border border-blue-100/30">
|
||||
<BookOpen size={18} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 truncate leading-tight">
|
||||
{notebook.name}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-[15px] text-slate-500 mt-1 truncate max-w-2xl">
|
||||
{notebook.description || t('browseManageFiles')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => onChatWithContext?.({ selectedGroups: [notebook.id] })}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg font-semibold text-sm hover:bg-slate-50 transition-all shadow-sm"
|
||||
>
|
||||
<MessageSquare size={18} className="text-blue-600" />
|
||||
{t('chatWithGroup')}
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
{t('addFile')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter Bar */}
|
||||
<div className="px-8 pb-6 flex items-center justify-between gap-4 shrink-0">
|
||||
<div className="relative max-w-xs w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('filterGroupFiles')}
|
||||
value={filterName}
|
||||
onChange={(e) => setFilterName(e.target.value)}
|
||||
className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => loadData()}
|
||||
className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto px-8 pb-8">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : filteredFiles.length > 0 ? (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredFiles.map((file) => (
|
||||
<motion.div
|
||||
key={file.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-4 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex items-center gap-4"
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="p-2.5 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 shrink-0">
|
||||
{getFileIcon(file)}
|
||||
</div>
|
||||
|
||||
{/* Main info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h3 className="font-bold text-slate-900 text-[15px] truncate">
|
||||
{file.name}
|
||||
</h3>
|
||||
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold tracking-wider uppercase shrink-0">
|
||||
{file.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta info & Actions */}
|
||||
<div className="flex items-center gap-6 shrink-0">
|
||||
<div className="text-[12px] font-medium text-slate-400 flex flex-col items-end">
|
||||
<span>{formatBytes(file.size)}</span>
|
||||
<span className="text-[10px] font-bold text-slate-300 uppercase tracking-widest mt-0.5">
|
||||
{file.name.split('.').pop()?.toUpperCase() || 'FILE'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isFormatSupportedForPreview(file.name) && (
|
||||
<button onClick={() => setPdfPreview({ fileId: file.id, fileName: file.name })} className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50">
|
||||
<Eye size={16} />
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button onClick={() => handleRemoveFile(file.id, file.name)} className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50">
|
||||
<Plus size={16} className="rotate-45" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-white/50 text-center">
|
||||
<BookOpen className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noFiles')}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('noFilesDesc')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<IndexingModalWithMode
|
||||
isOpen={isIndexingModalOpen}
|
||||
onClose={() => { setPendingFiles([]); setIsIndexingModalOpen(false); }}
|
||||
files={pendingFiles}
|
||||
embeddingModels={models.filter(m => m.type === 'embedding')}
|
||||
defaultEmbeddingId={models.find(m => m.isDefault)?.id || ''}
|
||||
onConfirm={handleConfirmIndexing}
|
||||
authToken={authToken}
|
||||
/>
|
||||
|
||||
{pdfPreview && (
|
||||
<PDFPreview
|
||||
fileId={pdfPreview.fileId}
|
||||
fileName={pdfPreview.fileName}
|
||||
authToken={authToken}
|
||||
onClose={() => setPdfPreview(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
|
||||
import { KnowledgeGroup, UpdateGroupData, CreateGroupData } from '../../types'
|
||||
import { Plus, Book, Library, MessageSquare, Trash2, Edit2, FolderInput, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { NotebookDetailView } from './NotebookDetailView'
|
||||
import { CreateNotebookDrawer } from '../CreateNotebookDrawer'
|
||||
import { EditNotebookDrawer } from '../EditNotebookDrawer'
|
||||
import { ImportFolderDrawer } from '../ImportFolderDrawer'
|
||||
import { useLanguage } from '../../contexts/LanguageContext'
|
||||
import { useToast } from '../../contexts/ToastContext'
|
||||
import { useConfirm } from '../../contexts/ConfirmContext'
|
||||
|
||||
interface NotebooksViewProps {
|
||||
authToken: string
|
||||
onChatWithContext: (context: { selectedGroups?: string[], selectedFiles?: string[] }) => void
|
||||
isAdmin?: boolean
|
||||
}
|
||||
|
||||
/** Flatten a tree of groups into a flat list */
|
||||
function flattenGroups(groups: KnowledgeGroup[]): KnowledgeGroup[] {
|
||||
const result: KnowledgeGroup[] = [];
|
||||
function walk(items: KnowledgeGroup[]) {
|
||||
for (const g of items) {
|
||||
result.push(g);
|
||||
if (g.children?.length) walk(g.children);
|
||||
}
|
||||
}
|
||||
walk(groups);
|
||||
return result;
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
export const NotebooksView: React.FC<NotebooksViewProps> = ({ authToken, onChatWithContext, isAdmin = false }) => {
|
||||
const { t } = useLanguage()
|
||||
const { showError } = useToast()
|
||||
const { confirm } = useConfirm()
|
||||
const [notebooks, setNotebooks] = React.useState<KnowledgeGroup[]>([])
|
||||
const [isLoading, setIsLoading] = React.useState(true)
|
||||
const [selectedNotebook, setSelectedNotebook] = React.useState<KnowledgeGroup | null>(null)
|
||||
const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState(false)
|
||||
const [isImportDrawerOpen, setIsImportDrawerOpen] = React.useState(false)
|
||||
const [editingNotebook, setEditingNotebook] = React.useState<KnowledgeGroup | null>(null)
|
||||
const [currentPage, setCurrentPage] = React.useState(1)
|
||||
|
||||
// Flatten tree for display in the grid
|
||||
const flatNotebooks = useMemo(() => flattenGroups(notebooks), [notebooks])
|
||||
const totalPages = Math.ceil(flatNotebooks.length / PAGE_SIZE)
|
||||
const paginatedNotebooks = useMemo(() => {
|
||||
const start = (currentPage - 1) * PAGE_SIZE;
|
||||
return flatNotebooks.slice(start, start + PAGE_SIZE);
|
||||
}, [flatNotebooks, currentPage])
|
||||
|
||||
const fetchNotebooks = async () => {
|
||||
try {
|
||||
const result = await knowledgeGroupService.getGroups()
|
||||
// result can be an array (tree/list) or an object (paginated flat list)
|
||||
if (Array.isArray(result)) {
|
||||
setNotebooks(result)
|
||||
} else if (result && result.items) {
|
||||
setNotebooks(result.items)
|
||||
} else {
|
||||
setNotebooks([])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchNotebooks()
|
||||
}, [authToken, selectedNotebook])
|
||||
|
||||
const handleCreateNotebook = async (data: CreateGroupData) => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
await knowledgeGroupService.createGroup(data)
|
||||
await fetchNotebooks()
|
||||
setIsCreateDrawerOpen(false)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('createFailed'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateNotebook = async (id: string, data: UpdateGroupData) => {
|
||||
await knowledgeGroupService.updateGroup(id, data)
|
||||
await fetchNotebooks()
|
||||
}
|
||||
|
||||
const handleDeleteNotebook = async (e: React.MouseEvent, id: string, name: string) => {
|
||||
e.stopPropagation()
|
||||
if (!(await confirm(t('confirmDeleteNotebook').replace('$1', name)))) return
|
||||
try {
|
||||
setIsLoading(true)
|
||||
await knowledgeGroupService.deleteGroup(id)
|
||||
setNotebooks(prev => flattenGroups(prev).filter(n => n.id !== id) as any)
|
||||
await fetchNotebooks()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
showError(t('deleteFailed'))
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (selectedNotebook) {
|
||||
return (
|
||||
<NotebookDetailView
|
||||
authToken={authToken}
|
||||
notebook={selectedNotebook}
|
||||
onBack={() => setSelectedNotebook(null)}
|
||||
onChatWithContext={onChatWithContext}
|
||||
isAdmin={!!isAdmin}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-transparent overflow-hidden">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">{t('navKnowledgeGroups')}</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">{t('notebooksDesc')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsImportDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 text-sm font-semibold rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95 shadow-sm"
|
||||
>
|
||||
<FolderInput size={18} className="text-blue-600" />
|
||||
<span>{t('importFolder')}</span>
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsCreateDrawerOpen(true)}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<span>{t('newGroup')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-8 flex-1 overflow-y-auto pb-4">
|
||||
{isLoading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : flatNotebooks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-white/50 text-center">
|
||||
<Library className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<h3 className="text-slate-900 font-bold">{t('noKnowledgeGroups')}</h3>
|
||||
<p className="text-slate-500 text-sm mt-1">{t('createGroupDesc')}</p>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setIsCreateDrawerOpen(true)}
|
||||
className="mt-6 px-5 py-2 bg-blue-600 text-white rounded-lg font-semibold text-sm hover:bg-blue-700 transition-all shadow-sm"
|
||||
>
|
||||
{t('createNotebook')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-7xl mx-auto">
|
||||
<AnimatePresence>
|
||||
{paginatedNotebooks.map((notebook) => (
|
||||
<motion.div
|
||||
key={notebook.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={() => setSelectedNotebook(notebook)}
|
||||
className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-64 cursor-pointer"
|
||||
>
|
||||
<div className="absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onChatWithContext({ selectedGroups: [notebook.id] })
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
|
||||
>
|
||||
<MessageSquare size={16} />
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingNotebook(notebook)
|
||||
}}
|
||||
className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
|
||||
>
|
||||
<Edit2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={(e) => handleDeleteNotebook(e, notebook.id, notebook.name)}
|
||||
className="p-1.5 text-slate-400 hover:text-red-500 rounded-md"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="w-11 h-11 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 flex items-center justify-center mb-4 transition-transform group-hover:scale-105">
|
||||
<Book size={20} />
|
||||
</div>
|
||||
<h3 className="font-bold text-slate-900 text-[16px] mb-1 leading-tight group-hover:text-blue-600 transition-colors truncate">
|
||||
{notebook.parentId && <span className="text-slate-300 text-xs mr-1">↳</span>}
|
||||
{notebook.name}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-3 italic opacity-85">
|
||||
{notebook.description || t('noDescriptionProvided')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 px-2.5 py-1 bg-slate-50 border border-slate-100 rounded-md">
|
||||
<span className="text-[11px] font-bold text-slate-700">{notebook.fileCount || 0}</span>
|
||||
<span className="text-[11px] font-semibold text-slate-400 uppercase tracking-tight">{t('files')}</span>
|
||||
</div>
|
||||
<span className="text-[11px] font-medium text-slate-300">
|
||||
{notebook.updatedAt ? new Date(notebook.updatedAt).toLocaleDateString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination: always show when there are notebooks */}
|
||||
{flatNotebooks.length > 0 && (
|
||||
<div className="px-8 py-4 border-t border-slate-200/60 bg-white/50 backdrop-blur-md flex items-center justify-center gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all text-slate-600 flex items-center gap-1 text-sm font-medium"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
{t('previous')}
|
||||
</button>
|
||||
<div className="px-3 py-2 text-sm font-semibold text-slate-700">
|
||||
{t('showingRange', (currentPage - 1) * PAGE_SIZE + 1, Math.min(currentPage * PAGE_SIZE, flatNotebooks.length), flatNotebooks.length)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all text-slate-600 flex items-center gap-1 text-sm font-medium"
|
||||
>
|
||||
{t('next')}
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isCreateDrawerOpen && (
|
||||
<CreateNotebookDrawer
|
||||
isOpen={isCreateDrawerOpen}
|
||||
onClose={() => setIsCreateDrawerOpen(false)}
|
||||
onCreate={handleCreateNotebook}
|
||||
/>
|
||||
)}
|
||||
|
||||
{editingNotebook && (
|
||||
<EditNotebookDrawer
|
||||
isOpen={!!editingNotebook}
|
||||
onClose={() => setEditingNotebook(null)}
|
||||
notebook={editingNotebook}
|
||||
onUpdate={handleUpdateNotebook}
|
||||
/>
|
||||
)}
|
||||
<ImportFolderDrawer
|
||||
isOpen={isImportDrawerOpen}
|
||||
onClose={() => setIsImportDrawerOpen(false)}
|
||||
authToken={authToken}
|
||||
onImportSuccess={fetchNotebooks}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import React from 'react';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { Search, Plus, MoreHorizontal, Puzzle } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
// Mock data for plugins
|
||||
interface PluginMock {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: 'installed' | 'not-installed' | 'update-available';
|
||||
developer: string;
|
||||
iconEmoji: string;
|
||||
iconBgClass: string;
|
||||
}
|
||||
|
||||
const mockPlugins: PluginMock[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'plugin1Name',
|
||||
description: 'plugin1Desc',
|
||||
status: 'installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '🛠️',
|
||||
iconBgClass: 'bg-blue-50'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'plugin2Name',
|
||||
description: 'plugin2Desc',
|
||||
status: 'update-available',
|
||||
developer: 'Official',
|
||||
iconEmoji: '📄',
|
||||
iconBgClass: 'bg-indigo-50'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'plugin3Name',
|
||||
description: 'plugin3Desc',
|
||||
status: 'installed',
|
||||
developer: 'Community',
|
||||
iconEmoji: '🦊',
|
||||
iconBgClass: 'bg-orange-50'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'plugin4Name',
|
||||
description: 'plugin4Desc',
|
||||
status: 'not-installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '🌐',
|
||||
iconBgClass: 'bg-emerald-50'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'plugin5Name',
|
||||
description: 'plugin5Desc',
|
||||
status: 'not-installed',
|
||||
developer: 'Community',
|
||||
iconEmoji: '🗄️',
|
||||
iconBgClass: 'bg-slate-100'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'plugin6Name',
|
||||
description: 'plugin6Desc',
|
||||
status: 'installed',
|
||||
developer: 'Official',
|
||||
iconEmoji: '💬',
|
||||
iconBgClass: 'bg-sky-50'
|
||||
}
|
||||
];
|
||||
|
||||
export const PluginsView: React.FC = () => {
|
||||
const { t } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-[#f4f7fb] overflow-hidden">
|
||||
{/* Header Area */}
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-[22px] font-bold text-slate-900 leading-tight flex items-center gap-2">
|
||||
<Puzzle className="text-blue-600" size={24} />
|
||||
{t('pluginTitle')}
|
||||
</h1>
|
||||
<p className="text-[14px] text-slate-500 mt-1">{t('pluginDesc')}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute text-slate-400 left-3 top-1/2 -translate-y-1/2" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('searchPlugin')}
|
||||
className="w-full h-10 pl-10 pr-4 bg-white border border-slate-200 rounded-lg focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="px-8 pb-8 flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-[1600px] mx-auto">
|
||||
<AnimatePresence>
|
||||
{mockPlugins.map((plugin) => (
|
||||
<motion.div
|
||||
key={plugin.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-all group flex flex-col h-[220px]"
|
||||
>
|
||||
{/* Top layer */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`w-12 h-12 flex items-center justify-center rounded-xl ${plugin.iconBgClass} text-2xl shadow-sm border border-black/5`}>
|
||||
{plugin.iconEmoji}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Status Badge */}
|
||||
{plugin.status === 'installed' && (
|
||||
<div className="px-2.5 py-1 text-[12px] font-semibold text-emerald-600 bg-emerald-50 rounded-full border border-emerald-100 flex flex-row items-center justify-center">
|
||||
{t('installedPlugin')}
|
||||
</div>
|
||||
)}
|
||||
{plugin.status === 'update-available' && (
|
||||
<div className="px-2.5 py-1 text-[12px] font-semibold text-orange-600 bg-orange-50 rounded-full border border-orange-100 flex flex-row items-center justify-center">
|
||||
{t('updatePlugin')}
|
||||
</div>
|
||||
)}
|
||||
{/* Options button */}
|
||||
<button className="text-slate-400 hover:text-slate-600 transition-colors">
|
||||
<MoreHorizontal size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle layer */}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-slate-800 text-[17px] mb-2 leading-tight flex items-center gap-2">
|
||||
{t(plugin.name as any)}
|
||||
{plugin.developer === 'Official' && (
|
||||
<span className="bg-blue-100 text-blue-700 text-[10px] uppercase font-bold px-1.5 py-0.5 rounded-sm">{t('pluginOfficial')}</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-[13px] text-slate-500 leading-relaxed line-clamp-2">
|
||||
{t(plugin.description as any)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom layer */}
|
||||
<div className="mt-4 pt-4 border-t border-slate-50 flex items-center justify-between">
|
||||
<span className="text-[12px] font-medium text-slate-400">
|
||||
{t('pluginBy')}{plugin.developer === 'Official' ? t('pluginOfficial') : t('pluginCommunity')}
|
||||
</span>
|
||||
{plugin.status === 'not-installed' ? (
|
||||
<button className="flex items-center justify-center gap-1.5 px-4 py-1.5 text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm">
|
||||
<Plus size={14} className="text-white" />
|
||||
<span className="text-[13px] font-bold">{t('installPlugin')}</span>
|
||||
</button>
|
||||
) : plugin.status === 'update-available' ? (
|
||||
<button className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-orange-600 bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors border border-orange-200">
|
||||
<span className="text-[13px] font-bold">{t('updatePlugin')}</span>
|
||||
</button>
|
||||
) : (
|
||||
<button className="flex items-center justify-center gap-1.5 px-3 py-1.5 text-slate-600 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200">
|
||||
<span className="text-[13px] font-bold">{t('pluginConfig')}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,2193 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { ModelConfig, ModelType, AppSettings, KnowledgeGroup, Tenant, TenantMember, DEFAULT_SETTINGS } from '../../types';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Plus,
|
||||
Search,
|
||||
KeyRound,
|
||||
Trash2,
|
||||
Edit,
|
||||
UserPlus,
|
||||
Globe,
|
||||
PlusCircle,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Download,
|
||||
Upload,
|
||||
Building,
|
||||
Settings as SettingsIcon,
|
||||
Shield,
|
||||
User,
|
||||
MoreVertical,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Filter,
|
||||
RefreshCcw,
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Database,
|
||||
UserCircle,
|
||||
HardDrive,
|
||||
LayoutGrid,
|
||||
X,
|
||||
Key,
|
||||
Loader2,
|
||||
Edit2,
|
||||
Save,
|
||||
Cpu,
|
||||
BookOpen,
|
||||
Sparkles,
|
||||
ToggleRight,
|
||||
ToggleLeft,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { userService } from '../../services/userService';
|
||||
import { settingsService } from '../../services/settingsService';
|
||||
import { userSettingService } from '../../services/userSettingService';
|
||||
import { knowledgeGroupService } from '../../services/knowledgeGroupService';
|
||||
import { apiClient } from '../../services/apiClient';
|
||||
import { AssessmentTemplateManager } from './AssessmentTemplateManager';
|
||||
|
||||
import { useConfirm } from '../../contexts/ConfirmContext';
|
||||
import { useToast } from '../../contexts/ToastContext';
|
||||
|
||||
interface SettingsViewProps {
|
||||
// Model Props
|
||||
models: ModelConfig[];
|
||||
authToken: string | null;
|
||||
onUpdateModels: (action: 'create' | 'update' | 'delete', model: ModelConfig) => Promise<void>;
|
||||
isAdmin?: boolean; // Added isAdmin prop
|
||||
currentUser?: any; // Added current user prop
|
||||
initialTab?: TabType;
|
||||
}
|
||||
|
||||
type TabType = 'general' | 'user' | 'model' | 'tenants' | 'knowledge_base' | 'import_tasks' | 'assessment_templates';
|
||||
|
||||
const buildTenantTree = (tenants: Tenant[]): Tenant[] => {
|
||||
const map = new Map<string, Tenant>();
|
||||
const roots: Tenant[] = [];
|
||||
|
||||
tenants.forEach(t => {
|
||||
map.set(t.id, { ...t, children: [] });
|
||||
});
|
||||
|
||||
tenants.forEach(t => {
|
||||
const node = map.get(t.id)!;
|
||||
if (t.parentId && map.has(t.parentId)) {
|
||||
const parent = map.get(t.parentId)!;
|
||||
parent.children = parent.children || [];
|
||||
parent.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
});
|
||||
|
||||
return roots;
|
||||
};
|
||||
|
||||
// Moved outside to prevent re-mounting
|
||||
const Pagination: React.FC<{
|
||||
current: number;
|
||||
total: number;
|
||||
pageSize: number;
|
||||
onChange: (page: number) => void;
|
||||
}> = ({ current, total, pageSize, onChange }) => {
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-2 mt-6">
|
||||
<button
|
||||
disabled={current === 1}
|
||||
onClick={() => onChange(current - 1)}
|
||||
className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 rotate-90" />
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(totalPages)].map((_, i) => {
|
||||
const p = i + 1;
|
||||
if (totalPages > 7) {
|
||||
if (p !== 1 && p !== totalPages && Math.abs(p - current) > 1) {
|
||||
if (p === 2 || p === totalPages - 1) return <span key={p} className="px-1 font-bold text-slate-300">...</span>;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onChange(p)}
|
||||
className={`w-9 h-9 flex items-center justify-center rounded-xl text-xs font-black transition-all ${current === p ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'bg-white border border-slate-200 text-slate-500 hover:border-indigo-500 hover:text-indigo-600'}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
disabled={current === totalPages}
|
||||
onClick={() => onChange(current + 1)}
|
||||
className="p-2 rounded-xl bg-white border border-slate-200 text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 -rotate-90" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SettingsView: React.FC<SettingsViewProps> = ({
|
||||
models,
|
||||
authToken,
|
||||
onUpdateModels,
|
||||
isAdmin = false,
|
||||
currentUser,
|
||||
initialTab = 'general',
|
||||
}) => {
|
||||
const { t, language, setLanguage } = useLanguage();
|
||||
const { confirm } = useConfirm();
|
||||
const { showError, showSuccess } = useToast();
|
||||
const [activeTab, setActiveTab] = useState<TabType>('general');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// --- Model Manager State ---
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [modelFormData, setModelFormData] = useState<Partial<ModelConfig>>({
|
||||
type: ModelType.LLM,
|
||||
baseUrl: 'http://localhost:11434/v1',
|
||||
modelId: 'llama3',
|
||||
name: '',
|
||||
dimensions: 1536,
|
||||
apiKey: '',
|
||||
maxInputTokens: 8191,
|
||||
maxBatchSize: 2048
|
||||
});
|
||||
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [isUserLoading, setIsUserLoading] = useState(false);
|
||||
const [userPage, setUserPage] = useState(1);
|
||||
const USER_PAGE_SIZE = 20;
|
||||
const [showAddUser, setShowAddUser] = useState(false);
|
||||
const [newUser, setNewUser] = useState({ username: '', password: '', displayName: '' });
|
||||
const [userSuccess, setUserSuccess] = useState('');
|
||||
|
||||
// --- Change Password State ---
|
||||
const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' });
|
||||
const [passwordSuccess, setPasswordSuccess] = useState('');
|
||||
|
||||
// --- App Settings State ---
|
||||
const [appSettings, setAppSettings] = useState<AppSettings | null>(null);
|
||||
const [knowledgeGroups, setKnowledgeGroups] = useState<KnowledgeGroup[]>([]);
|
||||
const [isSettingsLoading, setIsSettingsLoading] = useState(false);
|
||||
const [enabledModelIds, setEnabledModelIds] = useState<string[]>([]);
|
||||
|
||||
// --- Tenant Admin Binding Search State ---
|
||||
const [bindingTenantId, setBindingTenantId] = useState<string | null>(null);
|
||||
const [userSearchQuery, setUserSearchQuery] = useState('');
|
||||
|
||||
// --- Manage Members Modal State ---
|
||||
const [managingMembersTenantId, setManagingMembersTenantId] = useState<string | null>(null);
|
||||
const [tenantMembers, setTenantMembers] = useState<any[]>([]);
|
||||
const [allMemberIds, setAllMemberIds] = useState<Set<string>>(new Set());
|
||||
const [memberUserSearch, setMemberUserSearch] = useState('');
|
||||
const [bindingRole, setBindingRole] = useState('USER');
|
||||
const [currentMemberSearch, setCurrentMemberSearch] = useState('');
|
||||
const [isMembersLoading, setIsMembersLoading] = useState(false);
|
||||
const [activeTenantManagementId, setActiveTenantManagementId] = useState<string | null>(null);
|
||||
const [memberPage, setMemberPage] = useState(1);
|
||||
const [memberTotal, setMemberTotal] = useState(0);
|
||||
const MEMBER_PAGE_SIZE = 20;
|
||||
|
||||
const [userTotal, setUserTotal] = useState(0);
|
||||
|
||||
// --- Tenant Tree & Global Management State ---
|
||||
const [tenants, setTenants] = useState<Tenant[]>([]);
|
||||
const [selectedTenantId, setSelectedTenantId] = useState<string | null>(null);
|
||||
const [stats, setStats] = useState({ users: 0, tenants: 0 });
|
||||
const [showCreateTenant, setShowCreateTenant] = useState(false);
|
||||
const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
|
||||
const [newTenant, setNewTenant] = useState<{ name: string; domain: string; parentId: string | null }>({
|
||||
name: '',
|
||||
domain: '',
|
||||
parentId: null
|
||||
});
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (initialTab) {
|
||||
setActiveTab(initialTab);
|
||||
}
|
||||
}, [initialTab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'user' || activeTab === 'tenants') {
|
||||
fetchUsers(userPage);
|
||||
}
|
||||
}, [userPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTenantId) {
|
||||
fetchTenantMembers(selectedTenantId, memberPage);
|
||||
fetchAllMemberIds(selectedTenantId);
|
||||
} else {
|
||||
setAllMemberIds(new Set());
|
||||
}
|
||||
}, [selectedTenantId, memberPage]);
|
||||
|
||||
// Data fetching on tab change
|
||||
useEffect(() => {
|
||||
// Reset pages when switching tabs to avoid bleed-over
|
||||
if (activeTab === 'user' || activeTab === 'tenants') {
|
||||
setUserPage(1);
|
||||
}
|
||||
|
||||
if (activeTab === 'user') {
|
||||
fetchUsers(1);
|
||||
} else if (activeTab === 'general') {
|
||||
fetchSettingsAndGroups();
|
||||
} else if (activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN') {
|
||||
fetchTenantsData();
|
||||
fetchUsers(1); // Ensure users are loaded for admin binding
|
||||
}
|
||||
|
||||
// Independent check for KB/Model settings to avoid being blocked by the branches above
|
||||
if ((activeTab === 'knowledge_base' || activeTab === 'model') &&
|
||||
(currentUser?.role === 'TENANT_ADMIN' || currentUser?.role === 'SUPER_ADMIN' || isAdmin)) {
|
||||
fetchKnowledgeBaseSettings();
|
||||
}
|
||||
}, [activeTab, currentUser, authToken, isAdmin]);
|
||||
|
||||
const [kbSettings, setKbSettings] = useState<any>(null);
|
||||
const [localKbSettings, setLocalKbSettings] = useState<any>(null);
|
||||
const [isSavingKbSettings, setIsSavingKbSettings] = useState(false);
|
||||
const fetchKnowledgeBaseSettings = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await userSettingService.get(authToken);
|
||||
// If data is null, undefined, or empty object, use DEFAULT_SETTINGS
|
||||
const finalSettings = (data && Object.keys(data).length > 0) ? { ...DEFAULT_SETTINGS, ...data } : DEFAULT_SETTINGS;
|
||||
|
||||
setKbSettings(finalSettings);
|
||||
setLocalKbSettings(finalSettings);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
// Fallback to defaults on error to prevent blank page
|
||||
setKbSettings(DEFAULT_SETTINGS);
|
||||
setLocalKbSettings(DEFAULT_SETTINGS);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateKbSettings = (key: string, value: any) => {
|
||||
setLocalKbSettings((prev: any) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleSaveKbSettings = async () => {
|
||||
if (!authToken || !localKbSettings) return;
|
||||
setIsSavingKbSettings(true);
|
||||
try {
|
||||
await userSettingService.update(authToken, localKbSettings);
|
||||
setKbSettings(localKbSettings);
|
||||
showSuccess(t('kbSettingsSaved'));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('actionFailed'));
|
||||
} finally {
|
||||
setIsSavingKbSettings(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelKbSettings = () => {
|
||||
setLocalKbSettings(kbSettings);
|
||||
};
|
||||
|
||||
const fetchSettingsAndGroups = async () => {
|
||||
if (!authToken) return;
|
||||
setIsSettingsLoading(true);
|
||||
try {
|
||||
const [settings, groups, personal] = await Promise.all([
|
||||
userSettingService.get(authToken),
|
||||
knowledgeGroupService.getGroups(),
|
||||
userSettingService.getPersonal(authToken)
|
||||
]);
|
||||
setAppSettings(settings);
|
||||
setKnowledgeGroups(groups);
|
||||
|
||||
// Sync local language with user settings if they differ
|
||||
if (personal?.language && personal.language !== language) {
|
||||
setLanguage(personal.language as any);
|
||||
}
|
||||
|
||||
// Also update KB settings with the same data if not already set
|
||||
if (settings && Object.keys(settings).length > 0) {
|
||||
setKbSettings(settings);
|
||||
setLocalKbSettings(settings);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch settings or groups:', error);
|
||||
} finally {
|
||||
setIsSettingsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- General tab handlers ---
|
||||
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setPasswordSuccess('');
|
||||
|
||||
if (passwordForm.new !== passwordForm.confirm) {
|
||||
setError(t('passwordMismatch'));
|
||||
return;
|
||||
}
|
||||
if (passwordForm.new.length < 6) {
|
||||
setError(t('newPasswordMinLength'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await userService.changePassword(passwordForm.current, passwordForm.new);
|
||||
setPasswordSuccess(t('passwordChangeSuccess'));
|
||||
setPasswordForm({ current: '', new: '', confirm: '' });
|
||||
} catch (err: any) {
|
||||
setError(err.message || t('passwordChangeFailed'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- ユーザータブのハンドラー ---
|
||||
const fetchUsers = async (page?: number) => {
|
||||
setIsUserLoading(true);
|
||||
const p = page || userPage;
|
||||
try {
|
||||
const result = await userService.getUsers(p, USER_PAGE_SIZE);
|
||||
if (result && result.data) {
|
||||
setUsers(result.data);
|
||||
setUserTotal(result.total);
|
||||
} else if (Array.isArray(result)) {
|
||||
setUsers(result);
|
||||
setUserTotal(result.length);
|
||||
}
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('getUserListFailed'));
|
||||
} finally {
|
||||
setIsUserLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setUserSuccess('');
|
||||
|
||||
if (newUser.username && newUser.password && newUser.displayName) {
|
||||
setIsUserLoading(true);
|
||||
try {
|
||||
await userService.createUser(
|
||||
newUser.username,
|
||||
newUser.password,
|
||||
false,
|
||||
undefined,
|
||||
newUser.displayName
|
||||
);
|
||||
showSuccess(t('userCreatedSuccess'));
|
||||
setNewUser({ username: '', password: '', displayName: '' });
|
||||
setShowAddUser(false);
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('createUserFailed'));
|
||||
} finally {
|
||||
setIsUserLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const [passwordChangeUserData, setPasswordChangeUserData] = useState<{ userId: string, newPassword: string } | null>(null);
|
||||
|
||||
// --- Edit User State ---
|
||||
const [editUserData, setEditUserData] = useState<{ userId: string, username: string, displayName: string } | null>(null);
|
||||
|
||||
const handleToggleUserAdmin = async (userId: string, newAdminStatus: boolean) => {
|
||||
try {
|
||||
await userService.updateUser(userId, newAdminStatus);
|
||||
// Re-fetch user list
|
||||
fetchUsers();
|
||||
setUserSuccess(newAdminStatus ? t('userPromotedToAdmin') : t('userDemotedFromAdmin'));
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('updateUserFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUserPasswordChange = async () => {
|
||||
if (!passwordChangeUserData || !passwordChangeUserData.newPassword) return;
|
||||
|
||||
try {
|
||||
// Update user password
|
||||
await userService.updateUserInfo(passwordChangeUserData.userId, { password: passwordChangeUserData.newPassword });
|
||||
setUserSuccess(t('passwordChangeSuccess'));
|
||||
setPasswordChangeUserData(null);
|
||||
fetchUsers(); // Refresh the user list
|
||||
} catch (error: any) {
|
||||
setError(error.message || t('passwordChangeFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAllMemberIds = async (tenantId: string) => {
|
||||
try {
|
||||
const { data } = await apiClient.get<string[]>(`/v1/tenants/${tenantId}/members/ids`);
|
||||
if (Array.isArray(data)) {
|
||||
setAllMemberIds(new Set(data));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch all member IDs:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTenantMembers = async (tenantId: string, page?: number) => {
|
||||
setIsMembersLoading(true);
|
||||
const p = page || memberPage;
|
||||
try {
|
||||
const { data } = await apiClient.get(`/v1/tenants/${tenantId}/members?page=${p}&limit=${MEMBER_PAGE_SIZE}`);
|
||||
if (data && data.data) {
|
||||
setTenantMembers(data.data);
|
||||
setMemberTotal(data.total);
|
||||
} else if (Array.isArray(data)) {
|
||||
setTenantMembers(data);
|
||||
setMemberTotal(data.length);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsMembersLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddMember = async (tenantId: string, userId: string, role: string = 'USER') => {
|
||||
try {
|
||||
await apiClient.post(`/v1/tenants/${tenantId}/members`, { userId, role });
|
||||
setAllMemberIds(prev => {
|
||||
const next = new Set(prev);
|
||||
next.add(userId);
|
||||
return next;
|
||||
});
|
||||
showSuccess(t('confirm'));
|
||||
fetchTenantMembers(tenantId);
|
||||
fetchTenantsData();
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error adding member');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (tenantId: string, userId: string) => {
|
||||
try {
|
||||
await apiClient.delete(`/v1/tenants/${tenantId}/members/${userId}`);
|
||||
setAllMemberIds(prev => {
|
||||
const next = new Set(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
showSuccess('User removed from organization');
|
||||
fetchTenantMembers(tenantId);
|
||||
fetchTenantsData();
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error removing member');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateMemberRole = async (tenantId: string, userId: string, role: string) => {
|
||||
try {
|
||||
await apiClient.patch(`/v1/tenants/${tenantId}/members/${userId}`, { role });
|
||||
showSuccess(t('featureUpdated'));
|
||||
fetchTenantMembers(tenantId);
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Error updating role');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTenantsData = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [tenRes, admRes] = await Promise.all([
|
||||
apiClient.get('/v1/tenants'),
|
||||
apiClient.get('/users?page=1&limit=1')
|
||||
]);
|
||||
|
||||
const data: Tenant[] = tenRes.data;
|
||||
const filteredData = data.filter(t => t.name !== 'Default');
|
||||
setTenants(filteredData);
|
||||
setStats(s => ({ ...s, tenants: filteredData.length }));
|
||||
|
||||
const result = admRes.data;
|
||||
setStats(s => ({ ...s, users: result.total ?? result.length ?? 0 }));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateTenant = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const path = editingTenant ? `/v1/tenants/${editingTenant.id}` : '/v1/tenants';
|
||||
const body = {
|
||||
name: newTenant.name,
|
||||
domain: newTenant.domain,
|
||||
parentId: newTenant.parentId
|
||||
};
|
||||
|
||||
if (editingTenant) {
|
||||
await apiClient.put(path, body);
|
||||
} else {
|
||||
await apiClient.post(path, body);
|
||||
}
|
||||
|
||||
setShowCreateTenant(false);
|
||||
setEditingTenant(null);
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
fetchTenantsData();
|
||||
showSuccess(editingTenant ? 'Tenant updated' : 'Tenant created');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Action failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTenant = async (tenantId: string) => {
|
||||
if (!(await confirm(t('confirmDeleteTenant')))) return;
|
||||
try {
|
||||
await apiClient.delete(`/v1/tenants/${tenantId}`);
|
||||
setSelectedTenantId(null);
|
||||
fetchTenantsData();
|
||||
showSuccess('Tenant deleted');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Delete failed');
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateUser = async () => {
|
||||
if (!editUserData) return;
|
||||
try {
|
||||
await userService.updateUserInfo(editUserData.userId, {
|
||||
username: editUserData.username,
|
||||
displayName: editUserData.displayName
|
||||
});
|
||||
showSuccess(t('featureUpdated'));
|
||||
setEditUserData(null);
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
showError('Failed to update user');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (userId: string) => {
|
||||
if (!confirm(t('confirmDeleteUser') || "Are you sure?")) return;
|
||||
try {
|
||||
await userService.deleteUser(userId);
|
||||
showSuccess(t('userDeletedSuccessfully'));
|
||||
fetchUsers();
|
||||
} catch (error: any) {
|
||||
showError(error.message || t('deleteUserFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportUsers = async () => {
|
||||
try {
|
||||
const blob = await userService.exportUsers();
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `users_${new Date().toISOString().split('T')[0]}.xlsx`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
} catch (error) {
|
||||
console.error('Export users failed', error);
|
||||
showError(t('exportFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportUsers = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const result = await userService.importUsers(file);
|
||||
showSuccess(t('importSuccess').replace('$1', (result.success || 0).toString()).replace('$2', (result.failed || 0).toString()));
|
||||
fetchUsers();
|
||||
if (result.errors.length > 0) {
|
||||
console.warn('Import had errors:', result.errors);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Import users failed', error);
|
||||
showError(t('importFailed') + (error.response?.data?.message ? `: ${error.response.data.message}` : ''));
|
||||
} finally {
|
||||
// Reset input
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveModel = async () => {
|
||||
if (!authToken) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await onUpdateModels(editingId === 'new' ? 'create' : 'update', modelFormData as ModelConfig);
|
||||
setEditingId(null);
|
||||
} catch (err) {
|
||||
setError('Update failed');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleModel = async (model: ModelConfig) => {
|
||||
if (currentUser?.role === 'TENANT_ADMIN') {
|
||||
const newEnabledIds = enabledModelIds.includes(model.id)
|
||||
? enabledModelIds.filter(id => id !== model.id)
|
||||
: [...enabledModelIds, model.id];
|
||||
try {
|
||||
await apiClient.put('/v1/admin/settings', { enabledModelIds: newEnabledIds });
|
||||
setEnabledModelIds(newEnabledIds);
|
||||
setLocalKbSettings((prev: any) => ({ ...prev, enabledModelIds: newEnabledIds }));
|
||||
showSuccess('Updated');
|
||||
} catch (e: any) {
|
||||
showError(e.message || 'Update failed');
|
||||
}
|
||||
return;
|
||||
}
|
||||
await onUpdateModels('update', { ...model, isEnabled: !model.isEnabled });
|
||||
};
|
||||
|
||||
const handleDeleteModel = async (id: string) => {
|
||||
if (await confirm(t('confirmDeleteModel'))) {
|
||||
await onUpdateModels('delete', { id } as ModelConfig);
|
||||
}
|
||||
};
|
||||
|
||||
const TenantTreeNode: React.FC<{
|
||||
tenant: Tenant;
|
||||
selectedTenantId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onCreateSubtenant: (parentId: string) => void;
|
||||
depth?: number;
|
||||
}> = ({ tenant, selectedTenantId, onSelect, onCreateSubtenant, depth = 0 }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const hasChildren = tenant.children && tenant.children.length > 0;
|
||||
const isSelected = selectedTenantId === tenant.id;
|
||||
|
||||
return (
|
||||
<div className="select-none">
|
||||
<div
|
||||
className={`group flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-all ${isSelected ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100' : 'hover:bg-slate-50 text-slate-600 hover:text-slate-900'}`}
|
||||
style={{ paddingLeft: `${depth * 1.5 + 0.75}rem` }}
|
||||
onClick={() => onSelect(tenant.id)}
|
||||
>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setCollapsed(!collapsed); }}
|
||||
className={`p-0.5 rounded-md hover:bg-black/10 transition-colors ${isSelected ? 'text-white/70' : 'text-slate-400'}`}
|
||||
>
|
||||
{collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" />
|
||||
)}
|
||||
<Building size={16} className={isSelected ? 'text-white' : 'text-slate-400'} />
|
||||
<span className="text-sm font-bold truncate">{tenant.name}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCreateSubtenant(tenant.id);
|
||||
}}
|
||||
className={`p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all ${isSelected ? 'hover:bg-white/20 text-white' : 'hover:bg-slate-200 text-slate-400 hover:text-indigo-600'}`}
|
||||
title={t('createSubOrg')}
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
{hasChildren && !collapsed && (
|
||||
<div className="mt-1">
|
||||
{tenant.children?.map(child => (
|
||||
<TenantTreeNode
|
||||
key={child.id}
|
||||
tenant={child}
|
||||
selectedTenantId={selectedTenantId}
|
||||
onSelect={onSelect}
|
||||
onCreateSubtenant={onCreateSubtenant}
|
||||
depth={depth + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeLabel = (type: ModelType) => {
|
||||
switch (type) {
|
||||
case ModelType.LLM: return t('typeLLM');
|
||||
case ModelType.EMBEDDING: return t('typeEmbedding');
|
||||
case ModelType.RERANK: return t('typeRerank');
|
||||
case ModelType.VISION: return t('typeVision');
|
||||
default: return type;
|
||||
}
|
||||
};
|
||||
|
||||
// --- Rendering functions ---
|
||||
|
||||
const renderGeneralTab = () => (
|
||||
<div className="space-y-8 animate-in slide-in-from-right duration-300 max-w-2xl">
|
||||
|
||||
{/* Change password section */}
|
||||
<section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
|
||||
<h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Key className="w-4 h-4 text-blue-500" />
|
||||
{t('changePassword')}
|
||||
</h3>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4 max-w-sm">
|
||||
<input type="hidden" name="username" value="current-user" autoComplete="username" />
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
placeholder={t('currentPassword')}
|
||||
value={passwordForm.current}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, current: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
placeholder={t('newPassword')}
|
||||
value={passwordForm.new}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, new: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder={t('confirmPassword')}
|
||||
value={passwordForm.confirm}
|
||||
onChange={e => setPasswordForm({ ...passwordForm, confirm: e.target.value })}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
{passwordSuccess && <p className="text-xs text-green-600">{passwordSuccess}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-2 bg-slate-800 text-white rounded-md text-sm hover:bg-slate-900 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? <Loader2 className="w-4 h-4 animate-spin mx-auto" /> : t('confirmChange')}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* 语言设置セクション */}
|
||||
<section className="bg-white p-6 rounded-lg border border-slate-200 shadow-sm">
|
||||
<h3 className="text-sm font-medium text-slate-800 mb-4 flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-blue-500" />
|
||||
{t('languageSettings')}
|
||||
</h3>
|
||||
<div className="space-y-4 max-w-sm">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">
|
||||
{t('switchLanguage')}
|
||||
</label>
|
||||
<select
|
||||
value={language}
|
||||
onChange={async (e) => {
|
||||
const newLang = e.target.value as any;
|
||||
setLanguage(newLang);
|
||||
try {
|
||||
await settingsService.updateLanguage(newLang);
|
||||
showSuccess(t('confirm'));
|
||||
} catch (err) {
|
||||
console.error('Failed to update backend language preference:', err);
|
||||
}
|
||||
}}
|
||||
className="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none bg-white"
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="zh">中文 (Chinese)</option>
|
||||
<option value="ja">日本語 (Japanese)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div >
|
||||
);
|
||||
|
||||
const renderUserTab = () => (
|
||||
<div className="space-y-6 w-full">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 font-medium">{''}</p>
|
||||
</div>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleExportUsers}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-600 text-sm font-bold rounded-2xl hover:bg-slate-50 shadow-sm transition-all active:scale-95"
|
||||
title={t('exportUsers')}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{t('exportUsers')}</span>
|
||||
</button>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
onChange={handleImportUsers}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
title={t('importUsers')}
|
||||
/>
|
||||
<button
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-600 text-sm font-bold rounded-2xl hover:bg-slate-50 shadow-sm transition-all active:scale-95"
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{t('importUsers')}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowAddUser(!showAddUser)}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('addUser')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAddUser && (
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onSubmit={handleCreateUser}
|
||||
className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-xl mb-8 space-y-5"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('usernamePlaceholder')}
|
||||
value={newUser.username}
|
||||
onChange={e => setNewUser({ ...newUser, username: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="username"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('displayNamePlaceholder') || t('name')}
|
||||
value={newUser.displayName}
|
||||
onChange={e => setNewUser({ ...newUser, displayName: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="name"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder={t('passwordPlaceholder')}
|
||||
value={newUser.password}
|
||||
onChange={e => setNewUser({ ...newUser, password: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div></div>
|
||||
<div className="flex gap-3">
|
||||
<button type="button" onClick={() => setShowAddUser(false)} className="px-5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700">{t('cancel')}</button>
|
||||
<button type="submit" className="px-8 py-2 bg-slate-900 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-lg shadow-slate-100">{t('create')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.form>
|
||||
)}
|
||||
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{passwordChangeUserData && (
|
||||
<div key="password-change-modal" className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center z-[1000] p-6">
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{t('changeUserPassword')}</h3>
|
||||
<button onClick={() => setPasswordChangeUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
|
||||
<X size={20} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleUserPasswordChange(); }} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('newPassword')}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordChangeUserData.newPassword}
|
||||
onChange={(e) => setPasswordChangeUserData({ ...passwordChangeUserData, newPassword: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('enterNewPassword')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button type="button" onClick={() => setPasswordChangeUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('confirmChange')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{/* Edit User Modal */}
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{editUserData && (
|
||||
<div key="edit-user-modal" className="fixed inset-0 z-[1000] flex items-center justify-center bg-slate-900/40 backdrop-blur-sm p-4">
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-white rounded-3xl p-10 w-full max-w-md shadow-2xl border border-white/20"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{t('editUser')}</h3>
|
||||
<button onClick={() => setEditUserData(null)} className="p-2 hover:bg-slate-100 rounded-xl transition-all">
|
||||
<X size={20} className="text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleUpdateUser(); }} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('username')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editUserData.username}
|
||||
onChange={(e) => setEditUserData({ ...editUserData, username: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('usernamePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('displayName') || t('name')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editUserData.displayName}
|
||||
onChange={(e) => setEditUserData({ ...editUserData, displayName: e.target.value })}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-[14px] font-medium transition-all focus:outline-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50"
|
||||
placeholder={t('displayNamePlaceholder') || t('namePlaceholder')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="py-2.5 px-4 bg-indigo-50 rounded-2xl border border-indigo-100/50">
|
||||
<p className="text-[10px] font-black text-indigo-500 uppercase tracking-widest mb-1">{t('globalUserNote') || "Note"}</p>
|
||||
<p className="text-[11px] text-indigo-700/70 leading-relaxed font-medium">
|
||||
{t('roleManagedInOrg') || "Roles are managed within organizations."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4">
|
||||
<button type="button" onClick={() => setEditUserData(null)} className="flex-1 py-3.5 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3.5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600 shadow-xl shadow-slate-100 transition-all">{t('saveChanges')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
<div className="w-full bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-2xl overflow-hidden shadow-sm">
|
||||
<table className="w-full border-collapse text-left">
|
||||
<thead>
|
||||
<tr className="bg-slate-50/50 border-b border-slate-200/50">
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('username')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('displayName') || t('name')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('organizations')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('createdAt')}</th>
|
||||
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">{t('actions')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
<AnimatePresence>
|
||||
{users.filter((u: any) => u.username !== 'admin').map((user: any, index: number) => {
|
||||
let IconComponent = User;
|
||||
let iconColors = 'bg-slate-50 text-slate-400';
|
||||
if (user.isAdmin) {
|
||||
IconComponent = Shield;
|
||||
iconColors = 'bg-red-50 text-red-600';
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.tr
|
||||
key={user.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.03 }}
|
||||
className="group hover:bg-slate-50/50 transition-all"
|
||||
>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${iconColors}`}>
|
||||
<IconComponent size={18} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-bold text-slate-900 truncate">{user.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-sm text-slate-600 truncate">{user.displayName || '-'}</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
{user.tenantMembers && user.tenantMembers.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.tenantMembers
|
||||
.filter((m: any) => m.tenant?.name !== 'Default')
|
||||
.map((m: any) => (
|
||||
<span
|
||||
key={m.tenantId}
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[9px] font-black rounded-md uppercase tracking-wider border border-emerald-100"
|
||||
>
|
||||
<Building size={8} />
|
||||
{m.tenant?.name || m.tenantId}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-[10px] text-slate-400 italic">{t('noOrganization')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-[11px] font-medium text-slate-600">
|
||||
{new Date(user.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all">
|
||||
{user.username !== 'admin' && (
|
||||
<>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setEditUserData({
|
||||
userId: user.id,
|
||||
username: user.username,
|
||||
displayName: user.displayName || ''
|
||||
});
|
||||
}}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
|
||||
title={t('edit')}
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPasswordChangeUserData({ userId: user.id, newPassword: '' })}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-indigo-600 hover:bg-white shadow-sm transition-all"
|
||||
title={t('changeUserPassword')}
|
||||
>
|
||||
<Key className="w-4 h-4" />
|
||||
</button>
|
||||
{user.id !== currentUser?.id && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
className="p-2 rounded-lg text-slate-400 hover:text-red-500 hover:bg-white shadow-sm transition-all"
|
||||
title={t('deleteUser')}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</motion.tr>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
current={userPage}
|
||||
total={userTotal}
|
||||
pageSize={USER_PAGE_SIZE}
|
||||
onChange={setUserPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderTenantsTab = () => {
|
||||
const tenantTree = buildTenantTree(tenants);
|
||||
const activeTenant = selectedTenantId ? tenants.find(t => t.id === selectedTenantId) : null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-12rem)] animate-in fade-in duration-500">
|
||||
{/* Left: Organization Tree */}
|
||||
<div className="w-full lg:w-80 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-sm overflow-hidden min-h-[400px] lg:min-h-0">
|
||||
<div className="p-6 border-b border-slate-100 flex items-center justify-between shrink-0">
|
||||
<div>
|
||||
<h3 className="font-black text-slate-900 text-lg tracking-tight">{t('orgManagement')}</h3>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{t('globalTenantControl')}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
setEditingTenant(null);
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
className="p-2 bg-slate-900 text-white rounded-xl hover:bg-slate-700 transition-all"
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-1 custom-scrollbar">
|
||||
{tenantTree.length > 0 ? (
|
||||
tenantTree.map(t => (
|
||||
<TenantTreeNode
|
||||
key={t.id}
|
||||
tenant={t}
|
||||
selectedTenantId={selectedTenantId}
|
||||
onSelect={(id) => {
|
||||
if (id !== selectedTenantId) {
|
||||
setSelectedTenantId(id);
|
||||
setMemberPage(1);
|
||||
setUserPage(1);
|
||||
}
|
||||
}}
|
||||
onCreateSubtenant={(parentId) => {
|
||||
setNewTenant({ name: '', domain: '', parentId });
|
||||
setEditingTenant(null);
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="py-20 text-center">
|
||||
<Building size={32} className="mx-auto text-slate-200 mb-3" />
|
||||
<p className="text-xs font-black text-slate-300 uppercase tracking-widest">{t('noOrganizations')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-slate-50 border-t border-slate-100 shrink-0">
|
||||
<div className="flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-2xl shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<Building size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('totalTenants')}</p>
|
||||
<p className="text-xl font-black text-slate-900">{stats.tenants}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: User List & Management */}
|
||||
<div className="flex-1 flex flex-col bg-white border border-slate-200 rounded-3xl shadow-xl overflow-hidden min-h-[600px] lg:min-h-0">
|
||||
{activeTenant ? (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Organization Header */}
|
||||
<div className="p-8 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white border border-slate-200 shadow-sm flex items-center justify-center text-indigo-600">
|
||||
<Building size={28} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-2xl font-black text-slate-900 tracking-tight">{activeTenant.name}</h2>
|
||||
<span className="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[9px] font-black uppercase tracking-widest border border-indigo-100">{t('activeOrg')}</span>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-slate-400">{activeTenant.domain || t('noCustomDomain')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingTenant(activeTenant);
|
||||
setNewTenant({
|
||||
name: activeTenant.name,
|
||||
domain: activeTenant.domain || '',
|
||||
parentId: activeTenant.parentId || null
|
||||
});
|
||||
setShowCreateTenant(true);
|
||||
}}
|
||||
className="p-2.5 bg-white border border-slate-200 text-slate-600 rounded-xl hover:border-indigo-500 hover:text-indigo-600 transition-all shadow-sm"
|
||||
title={t('orgSettings')}
|
||||
>
|
||||
<SettingsIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRemoveTenant(activeTenant.id)}
|
||||
className="p-2.5 bg-white border border-slate-200 text-slate-400 hover:text-red-500 hover:border-red-500 transition-all shadow-sm"
|
||||
title={t('deleteOrg')}
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Split: Members vs All Users */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Current Members */}
|
||||
<div className="flex-1 flex flex-col border-r border-slate-100 overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-50 flex items-center justify-between shrink-0">
|
||||
<h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">{t('orgMembers')}</h4>
|
||||
<span className="text-[10px] font-black px-2 py-0.5 bg-slate-100 text-slate-500 rounded-full">
|
||||
{t('membersCount').replace('$1', (memberTotal || 0).toString())}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-6 scrollbar-hide">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{tenantMembers?.map((m: any) => (
|
||||
<div key={m.id} className="p-4 bg-slate-50/50 border border-slate-100 rounded-2xl flex items-center justify-between group hover:bg-white hover:shadow-sm transition-all hover:border-slate-200">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-slate-400 shadow-sm">
|
||||
<User size={18} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-black text-slate-900 truncate">
|
||||
{m.user?.displayName || m.user?.username || m.userId}
|
||||
</p>
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={(e) => handleUpdateMemberRole(activeTenant.id, m.userId, e.target.value)}
|
||||
className={`text-[9px] font-black uppercase tracking-widest bg-transparent border-none outline-none cursor-pointer hover:bg-slate-100 rounded px-1 transition-colors ${m.role === 'TENANT_ADMIN' ? 'text-indigo-500' : 'text-slate-400'}`}
|
||||
>
|
||||
<option value="USER">{t('roleRegularUser')}</option>
|
||||
<option value="TENANT_ADMIN">{t('roleTenantAdmin')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRemoveMember(activeTenant.id, m.userId)}
|
||||
className="p-2 text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{(!tenantMembers || tenantMembers.length === 0) && (
|
||||
<div className="py-20 text-center">
|
||||
<Users size={24} className="mx-auto text-slate-200 mb-2" />
|
||||
<p className="text-[10px] font-bold text-slate-300 uppercase tracking-wider">{t('noMembersAssigned')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Pagination
|
||||
current={memberPage}
|
||||
total={memberTotal}
|
||||
pageSize={MEMBER_PAGE_SIZE}
|
||||
onChange={setMemberPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add New Users (Right side of specific tenant view) */}
|
||||
<div className="w-72 flex flex-col bg-slate-50/30 overflow-hidden shrink-0">
|
||||
<div className="p-6 border-b border-slate-100 shrink-0">
|
||||
<h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3">{t('addMembers')}</h4>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
|
||||
<input
|
||||
className="w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
placeholder={t('searchSystemUsers')}
|
||||
value={userSearchQuery}
|
||||
onChange={e => setUserSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-1 p-1 bg-white border border-slate-200 rounded-xl">
|
||||
<button
|
||||
onClick={() => setBindingRole('USER')}
|
||||
className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'USER' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
{t('roleRegularUser')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBindingRole('TENANT_ADMIN')}
|
||||
className={`flex-1 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all ${bindingRole === 'TENANT_ADMIN' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
>
|
||||
{t('roleTenantAdmin')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-2">
|
||||
{users
|
||||
.filter(u =>
|
||||
u.username !== 'admin' &&
|
||||
u.username.toLowerCase().includes(userSearchQuery.toLowerCase())
|
||||
)
|
||||
.map(u => {
|
||||
const isAlreadyMember = allMemberIds.has(u.id);
|
||||
return (
|
||||
<button
|
||||
key={u.id}
|
||||
onClick={() => !isAlreadyMember && handleAddMember(activeTenant.id, u.id, bindingRole)}
|
||||
disabled={isAlreadyMember}
|
||||
className={`w-full p-3 border rounded-xl flex items-center justify-between group transition-all ${isAlreadyMember
|
||||
? 'bg-slate-50 border-slate-100 cursor-not-allowed opacity-60'
|
||||
: 'bg-white border-slate-100 hover:border-indigo-500 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors ${isAlreadyMember
|
||||
? 'bg-slate-100 text-slate-300'
|
||||
: 'bg-slate-50 text-slate-400 group-hover:bg-indigo-50 group-hover:text-indigo-600'
|
||||
}`}>
|
||||
<User size={14} />
|
||||
</div>
|
||||
<span className={`text-[13px] font-bold truncate ${isAlreadyMember ? 'text-slate-400' : 'text-slate-700'}`}>
|
||||
{u.displayName || u.username}
|
||||
</span>
|
||||
</div>
|
||||
{isAlreadyMember ? (
|
||||
<Check size={14} className="text-emerald-500" />
|
||||
) : (
|
||||
<Plus size={14} className="text-slate-300 group-hover:text-indigo-600" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})
|
||||
}
|
||||
<Pagination
|
||||
current={userPage}
|
||||
total={userTotal}
|
||||
pageSize={USER_PAGE_SIZE}
|
||||
onChange={setUserPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Tenant Modal (Nested in Tab Content for scope) */}
|
||||
{showCreateTenant && (
|
||||
<div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
|
||||
<h3 className="text-xl font-black text-slate-900 mb-6">{editingTenant ? t('editOrg') : t('newTenant')}</h3>
|
||||
<form onSubmit={handleCreateTenant} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
|
||||
{!editingTenant ? (
|
||||
<div className="w-full mt-1 px-4 py-3 bg-slate-100 border border-slate-200 rounded-2xl text-sm text-slate-500 font-bold">
|
||||
{newTenant.parentId ? tenants.find(t => t.id === newTenant.parentId)?.name : t('noneRoot')}
|
||||
</div>
|
||||
) : (
|
||||
<select
|
||||
className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
|
||||
value={newTenant.parentId || ''}
|
||||
onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
|
||||
>
|
||||
<option value="">{t('noneRoot')}</option>
|
||||
{tenants.filter(t => t.id !== editingTenant?.id).map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-2">
|
||||
<button type="button" onClick={() => { setShowCreateTenant(false); setEditingTenant(null); }} className="flex-1 py-3 text-slate-500 font-bold text-sm">{t('cancel')}</button>
|
||||
<button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{editingTenant ? t('update') : t('create')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-slate-50/30">
|
||||
<div className="w-24 h-24 rounded-[2rem] bg-indigo-50 flex items-center justify-center text-indigo-400 mb-6 shadow-xl shadow-indigo-100/50">
|
||||
<Building size={48} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-black text-slate-900 tracking-tight mb-2">{t('selectOrg')}</h2>
|
||||
<p className="text-sm text-slate-400 max-w-xs font-medium leading-relaxed">{t('selectOrgDesc')}</p>
|
||||
|
||||
<div className="mt-12 grid grid-cols-2 gap-4 w-full max-w-lg">
|
||||
<div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600 mb-4">
|
||||
<Users size={20} />
|
||||
</div>
|
||||
<p className="text-xl font-black text-slate-900">{stats.users}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('totalSystemUsers')}</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white border border-slate-200 rounded-3xl text-left shadow-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600 mb-4">
|
||||
<Shield size={20} />
|
||||
</div>
|
||||
<p className="text-xl font-black text-slate-900">{tenants.filter(t => t.parentId === null).length}</p>
|
||||
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('rootOrgs')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scope Modal for Create even when no selection */}
|
||||
{showCreateTenant && (
|
||||
<div className="fixed inset-0 z-[120] bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4 text-left">
|
||||
<motion.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white rounded-3xl p-8 w-full max-w-md shadow-2xl">
|
||||
<h3 className="text-xl font-black text-slate-900 mb-6">{t('newTenant')}</h3>
|
||||
<form onSubmit={handleCreateTenant} className="space-y-5">
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('tenantName')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('tenantName')} value={newTenant.name} onChange={e => setNewTenant({ ...newTenant, name: e.target.value })} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('domainOptional')}</label>
|
||||
<input className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm" placeholder={t('domainOptional')} value={newTenant.domain} onChange={e => setNewTenant({ ...newTenant, domain: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('parentOrg')}</label>
|
||||
<select
|
||||
className="w-full mt-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-indigo-500/20"
|
||||
value={newTenant.parentId || ''}
|
||||
onChange={e => setNewTenant({ ...newTenant, parentId: e.target.value || null })}
|
||||
>
|
||||
<option value="">{t('noneRoot')}</option>
|
||||
{tenants.map(t => (
|
||||
<option key={t.id} value={t.id}>{t.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateTenant(false);
|
||||
setNewTenant({ name: '', domain: '', parentId: null });
|
||||
}}
|
||||
className="flex-1 py-3 text-slate-500 font-bold text-sm"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button type="submit" className="flex-1 py-3 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-indigo-600">{t('create')}</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderKnowledgeBaseTab = () => (
|
||||
<div className="space-y-8 animate-in slide-in-from-right duration-300 w-full max-w-5xl pb-10">
|
||||
{localKbSettings ? (
|
||||
<>
|
||||
{/* Save/Cancel Bar */}
|
||||
<div className="flex justify-end gap-3 sticky top-0 z-20 py-4 bg-white/50 backdrop-blur-sm border-b border-slate-100 mb-6">
|
||||
<button
|
||||
onClick={handleCancelKbSettings}
|
||||
disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
|
||||
className="px-6 py-2 text-sm font-bold text-slate-500 hover:text-slate-700 disabled:opacity-30"
|
||||
>
|
||||
{t('cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveKbSettings}
|
||||
disabled={isSavingKbSettings || JSON.stringify(localKbSettings) === JSON.stringify(kbSettings)}
|
||||
className="flex items-center gap-2 px-8 py-2 bg-indigo-600 text-white text-sm font-black uppercase tracking-widest rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
{isSavingKbSettings ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
|
||||
{t('saveChanges')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Model Configuration */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<Cpu size={16} />
|
||||
</div>
|
||||
{t('modelConfiguration')}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('defaultLLMModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedLLMId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedLLMId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all cursor-pointer appearance-none"
|
||||
>
|
||||
<option value="">--- {t('selectLLMModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.LLM).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name} ({m.modelId})</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('embeddingModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedEmbeddingId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedEmbeddingId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectEmbeddingModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.EMBEDDING).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('rerankModel')}</label>
|
||||
<select
|
||||
value={localKbSettings.selectedRerankId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedRerankId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectRerankModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.RERANK).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">
|
||||
{t('defaultVisionModel')}
|
||||
<span className="ml-1 text-[8px] opacity-60">({t('typeVision')})</span>
|
||||
</label>
|
||||
<select
|
||||
value={localKbSettings.selectedVisionId || ''}
|
||||
onChange={(e) => handleUpdateKbSettings('selectedVisionId', e.target.value)}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
>
|
||||
<option value="">--- {t('selectVisionModel')} ---</option>
|
||||
{models.filter(m => m.type === ModelType.VISION || m.supportsVision).map(m => (
|
||||
<option key={m.id} value={m.id}>{m.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Indexing & Chunking Configuration */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600">
|
||||
<BookOpen size={16} />
|
||||
</div>
|
||||
{t('indexingChunkingConfig')}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkSize')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkSize || 1000}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="100"
|
||||
max="8192"
|
||||
step="100"
|
||||
value={localKbSettings.chunkSize || 1000}
|
||||
onChange={(e) => handleUpdateKbSettings('chunkSize', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('chunkOverlap')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.chunkOverlap || 100}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="2048"
|
||||
step="10"
|
||||
value={localKbSettings.chunkOverlap || 100}
|
||||
onChange={(e) => handleUpdateKbSettings('chunkOverlap', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Chat Hyperparameters */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-pink-50 flex items-center justify-center text-pink-600">
|
||||
<Sparkles size={16} />
|
||||
</div>
|
||||
{t('chatHyperparameters')}
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('temperature')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.temperature}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={localKbSettings.temperature || 0.7}
|
||||
onChange={(e) => handleUpdateKbSettings('temperature', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-2 px-1 text-[9px] font-bold text-slate-300 uppercase tracking-tighter">
|
||||
<span>{t('precise')}</span>
|
||||
<span>{t('creative')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 px-1">{t('maxResponseTokens')}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={localKbSettings.maxTokens || 2000}
|
||||
onChange={(e) => handleUpdateKbSettings('maxTokens', parseInt(e.target.value))}
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium outline-none focus:ring-4 focus:ring-indigo-500/10 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Retrieval & Search Settings */}
|
||||
<section className="bg-white/80 backdrop-blur-md p-8 rounded-3xl border border-slate-200/50 shadow-sm space-y-6">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-black uppercase tracking-widest text-[11px] border-b border-slate-100 pb-4">
|
||||
<div className="w-8 h-8 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
|
||||
<Database size={16} />
|
||||
</div>
|
||||
{t('retrievalSearchSettings')}
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('topK')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.topK}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
value={localKbSettings.topK || 10}
|
||||
onChange={(e) => handleUpdateKbSettings('topK', parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between mb-3 px-1">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('similarityThreshold')}</label>
|
||||
<span className="text-sm font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-lg">{localKbSettings.similarityThreshold}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.similarityThreshold || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('similarityThreshold', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 pt-4 border-t border-slate-100">
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableHybridSearch')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('hybridSearchDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableFullTextSearch', !localKbSettings.enableFullTextSearch)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableFullTextSearch ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableFullTextSearch ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{localKbSettings.enableFullTextSearch && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
|
||||
>
|
||||
<div className="flex justify-between mb-2 px-1">
|
||||
<label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('hybridWeight')}</label>
|
||||
<span className="text-sm font-black text-indigo-600">{localKbSettings.hybridVectorWeight || 0.5}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.hybridVectorWeight || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('hybridVectorWeight', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
|
||||
<span>{t('pureText')}</span>
|
||||
<span>{t('pureVector')}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableQueryExpansion')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('queryExpansionDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableQueryExpansion', !localKbSettings.enableQueryExpansion)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableQueryExpansion ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableQueryExpansion ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableHyDE')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('hydeDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableHyDE', !localKbSettings.enableHyDE)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableHyDE ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableHyDE ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-5 bg-slate-50/50 rounded-2xl border border-slate-200/30 transition-all hover:bg-white hover:border-indigo-100">
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-800">{t('enableReranking')}</div>
|
||||
<div className="text-[10px] text-slate-400 font-medium">{t('rerankingDesc')}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleUpdateKbSettings('enableRerank', !localKbSettings.enableRerank)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-all duration-300 ${localKbSettings.enableRerank ? 'bg-indigo-600 shadow-md shadow-indigo-100' : 'bg-slate-300'}`}
|
||||
>
|
||||
<span className={`${localKbSettings.enableRerank ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{localKbSettings.enableRerank && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-5 bg-indigo-50/30 rounded-2xl border border-indigo-100/50 space-y-4"
|
||||
>
|
||||
<div className="flex justify-between mb-2 px-1">
|
||||
<label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">{t('rerankSimilarityThreshold')}</label>
|
||||
<span className="text-sm font-black text-indigo-600">{localKbSettings.rerankSimilarityThreshold || 0.5}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={localKbSettings.rerankSimilarityThreshold || 0.5}
|
||||
onChange={(e) => handleUpdateKbSettings('rerankSimilarityThreshold', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
||||
/>
|
||||
<div className="flex justify-between mt-1 px-1 text-[9px] font-bold text-indigo-300 uppercase">
|
||||
<span>{t('broad')}</span>
|
||||
<span>{t('strict')}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-20 space-y-4">
|
||||
<Loader2 size={40} className="animate-spin text-indigo-600 opacity-20" />
|
||||
<p className="text-sm font-medium text-slate-400 animate-pulse">{t('loading')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderModelTab = () => (
|
||||
<div className="w-full space-y-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
</div>
|
||||
{!editingId && currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => { setEditingId('new'); setModelFormData({ type: ModelType.LLM, baseUrl: 'http://localhost:11434/v1', modelId: 'llama3', name: '', dimensions: 1536 }); }}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-bold rounded-2xl hover:bg-indigo-700 shadow-lg shadow-indigo-100 transition-all active:scale-95"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('mmAddBtn')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editingId ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white/90 backdrop-blur-md p-10 rounded-3xl border border-slate-200/50 shadow-xl space-y-8"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
||||
<Cpu className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-slate-900 tracking-tight">{editingId === 'new' ? t('mmAddBtn') : t('mmEdit')}</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormName')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.name || ''} onChange={e => setModelFormData({ ...modelFormData, name: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormModelId')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.modelId || ''} onChange={e => setModelFormData({ ...modelFormData, modelId: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormType')} *</label>
|
||||
<select className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-medium focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all appearance-none" value={modelFormData.type} onChange={e => setModelFormData({ ...modelFormData, type: e.target.value as ModelType })} disabled={isLoading}>
|
||||
<option value={ModelType.LLM}>{t('typeLLM')}</option>
|
||||
<option value={ModelType.EMBEDDING}>{t('typeEmbedding')}</option>
|
||||
<option value={ModelType.RERANK}>{t('typeRerank')}</option>
|
||||
<option value={ModelType.VISION}>{t('typeVision')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormBaseUrl')} *</label>
|
||||
<input className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all" value={modelFormData.baseUrl || ''} onChange={e => setModelFormData({ ...modelFormData, baseUrl: e.target.value })} disabled={isLoading} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('mmFormApiKey')}</label>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-mono focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/50 outline-none transition-all"
|
||||
value={modelFormData.apiKey || ''}
|
||||
onChange={e => setModelFormData({ ...modelFormData, apiKey: e.target.value })}
|
||||
disabled={isLoading}
|
||||
placeholder={t('mmFormApiKeyPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{modelFormData.type === ModelType.EMBEDDING && (
|
||||
<div className="grid grid-cols-2 gap-6 p-6 bg-slate-50 rounded-3xl border border-slate-200/50">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('maxInput')}</label>
|
||||
<input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.maxInputTokens || 8191} onChange={e => setModelFormData({ ...modelFormData, maxInputTokens: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">{t('dimensions')}</label>
|
||||
<input type="number" className="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold" value={modelFormData.dimensions || 1536} onChange={e => setModelFormData({ ...modelFormData, dimensions: parseInt(e.target.value) })} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<button onClick={() => { setEditingId(null); setError(null); }} className="px-6 py-3 text-sm font-bold text-slate-500 hover:text-slate-700">{t('mmCancel')}</button>
|
||||
<button onClick={handleSaveModel} className="px-10 py-3 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-xs shadow-xl shadow-indigo-100 transition-all active:scale-95 flex items-center gap-2" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
|
||||
{t('mmSave')}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 overflow-y-auto pr-2 pb-6 scrollbar-hide">
|
||||
<AnimatePresence>
|
||||
{models.map((model, index) => (
|
||||
<motion.div
|
||||
key={model.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="bg-white/70 backdrop-blur-md border border-slate-200/50 rounded-[2rem] p-6 flex flex-col justify-between group hover:shadow-xl hover:shadow-indigo-500/5 hover:border-indigo-500/30 transition-all duration-300 relative overflow-hidden"
|
||||
>
|
||||
{/* Subtle background pattern/glow */}
|
||||
<div className="absolute -top-12 -right-12 w-32 h-32 bg-indigo-500/5 rounded-full blur-3xl group-hover:bg-indigo-500/10 transition-all duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start justify-between mb-5">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500 ${model.isEnabled !== false ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-100 rotate-0 group-hover:rotate-6' : 'bg-slate-100 text-slate-400 opacity-60'}`}>
|
||||
<Cpu size={26} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="flex gap-1 items-center bg-slate-50 p-1 rounded-xl border border-slate-100/50">
|
||||
<button
|
||||
onClick={() => handleToggleModel(model)}
|
||||
className={`p-1.5 rounded-lg transition-all ${((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? 'text-indigo-600 bg-white shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
|
||||
title={((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? t('modelEnabled') : t('modelDisabled')}
|
||||
>
|
||||
{((currentUser?.role === 'SUPER_ADMIN' ? !!model.isEnabled : enabledModelIds.includes(model.id))) ? <ToggleRight size={24} /> : <ToggleLeft size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 mb-6">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h4 className="font-black text-slate-900 text-lg tracking-tight truncate">{model.name}</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[9px] font-black bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-indigo-100/50">
|
||||
{getTypeLabel(model.type)}
|
||||
</span>
|
||||
{model.isDefault && (
|
||||
<span className="text-[9px] font-black bg-amber-50 text-amber-600 px-2 py-0.5 rounded-lg uppercase tracking-wider border border-amber-100/50 flex items-center gap-1">
|
||||
<Sparkles size={8} /> {t('defaultBadge')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[11px] font-mono text-slate-400 mt-2 truncate bg-slate-50 px-2 py-1 rounded-lg border border-slate-100/50 inline-block max-w-full">
|
||||
{model.modelId}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Additional info grid */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||
{model.type === ModelType.EMBEDDING && (
|
||||
<>
|
||||
<div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('dims')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{model.dimensions || '-'}</span>
|
||||
</div>
|
||||
<div className="bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50">
|
||||
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-0.5">{t('ctx')}</span>
|
||||
<span className="text-xs font-bold text-slate-700">{model.maxInputTokens || '-'}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{model.type === ModelType.LLM && (
|
||||
<div className="col-span-2 bg-slate-50/50 p-2.5 rounded-2xl border border-slate-100/50 flex items-center justify-between">
|
||||
<span className="text-[8px] font-black text-slate-400 uppercase tracking-widest">{t('baseApi')}</span>
|
||||
<span className="text-[9px] font-mono font-medium text-slate-600 max-w-[140px] truncate">{model.baseUrl}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-100/50 relative z-10">
|
||||
<div className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
|
||||
<SettingsIcon size={12} />
|
||||
{t('configured')}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => { setEditingId(model.id); setModelFormData({ ...model }); }}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-sm transition-all"
|
||||
>
|
||||
<Edit2 size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteModel(model.id)}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:text-red-500 hover:bg-red-50 hover:shadow-sm transition-all"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{models.length === 0 && (
|
||||
<div className="bg-white/50 border-2 border-dashed border-slate-200 rounded-3xl p-16 text-center">
|
||||
<Cpu className="w-12 h-12 text-slate-200 mx-auto mb-4" />
|
||||
<p className="text-slate-400 font-bold uppercase tracking-widest text-xs">{t('mmEmpty')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full bg-[#FCFDFF] overflow-hidden relative">
|
||||
{/* Settings Sidebar */}
|
||||
<div className="w-64 bg-slate-50/50 border-r border-slate-200/60 flex flex-col shrink-0 z-20">
|
||||
<div className="p-6 pb-2">
|
||||
<h2 className="text-lg font-bold text-slate-900 tracking-tight">{t('tabSettings')}</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
<button
|
||||
onClick={() => setActiveTab('general')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'general' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<SettingsIcon size={18} />
|
||||
{t('generalSettings')}
|
||||
</button>
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => setActiveTab('user')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'user' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<UserCircle size={18} />
|
||||
{t('userManagement')}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setActiveTab('model')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'model' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<HardDrive size={18} />
|
||||
{t('modelManagement')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('knowledge_base')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'knowledge_base' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<Database size={18} />
|
||||
{t('sidebarTitle')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{currentUser?.role === 'SUPER_ADMIN' && (
|
||||
<button
|
||||
onClick={() => setActiveTab('tenants')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'tenants' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<LayoutGrid size={18} />
|
||||
{t('navTenants')}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setActiveTab('assessment_templates')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${activeTab === 'assessment_templates' ? 'bg-white text-indigo-600 shadow-sm border border-slate-200/60' : 'text-slate-600 hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<FileText size={18} />
|
||||
{t('assessmentTemplates')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden relative bg-white z-10">
|
||||
<div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 leading-tight">
|
||||
{activeTab === 'general' ? t('generalSettings') : activeTab === 'user' ? t('userManagement') : activeTab === 'model' ? t('modelManagement') : activeTab === 'knowledge_base' ? t('sidebarTitle') : activeTab === 'tenants' ? t('navTenants') : t('assessmentTemplates')}
|
||||
</h1>
|
||||
<p className="text-[15px] text-slate-500 mt-1">
|
||||
{activeTab === 'general' ? t('generalSettingsSubtitle') : activeTab === 'user' ? t('userManagementSubtitle') : activeTab === 'model' ? t('modelManagementSubtitle') : activeTab === 'knowledge_base' ? t('kbSettingsSubtitle') : activeTab === 'tenants' ? t('tenantsSubtitle') : t('assessmentTemplatesSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-10 pb-10 scrollbar-hide">
|
||||
<div className="w-full">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-8 p-4 bg-red-50/80 backdrop-blur-md border border-red-200/50 text-red-700 rounded-2xl flex gap-3 items-center text-sm shadow-sm"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center shrink-0">
|
||||
<X className="w-4 h-4 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-black uppercase tracking-widest text-[10px] block mb-0.5">{t('errorLabel')}</span>
|
||||
{error}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{activeTab === 'general' && renderGeneralTab()}
|
||||
{activeTab === 'user' && currentUser?.role === 'SUPER_ADMIN' && renderUserTab()}
|
||||
{activeTab === 'model' && isAdmin && renderModelTab()}
|
||||
{activeTab === 'knowledge_base' && isAdmin && renderKnowledgeBaseTab()}
|
||||
{activeTab === 'tenants' && currentUser?.role === 'SUPER_ADMIN' && renderTenantsTab()}
|
||||
{activeTab === 'assessment_templates' && isAdmin && (
|
||||
<div className="bg-white rounded-3xl border border-slate-200/60 p-8 shadow-sm">
|
||||
<AssessmentTemplateManager />
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user