244 lines
9.9 KiB
TypeScript
244 lines
9.9 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Plus, Trash2, MessageSquare, Workflow as WorkflowIcon, Pencil, Check, Box } from 'lucide-react';
|
|
import apiClient from '../../api/client';
|
|
import type { Workflow } from '../../types';
|
|
import { useChatStore } from '../../store/useChatStore';
|
|
import { useAppStore } from '../../store/useAppStore';
|
|
|
|
interface LeftPanelProps {
|
|
activeTab: string;
|
|
}
|
|
|
|
export function LeftPanel({ activeTab }: LeftPanelProps) {
|
|
const { t } = useTranslation();
|
|
const [workflows, setWorkflows] = useState<Workflow[]>([]);
|
|
const [loadingWorkflows, setLoadingWorkflows] = useState(false);
|
|
const [renamingId, setRenamingId] = useState<string | null>(null);
|
|
const [renameValue, setRenameValue] = useState('');
|
|
|
|
const {
|
|
sessions,
|
|
activeSessionId,
|
|
setActiveSessionId,
|
|
removeSession,
|
|
selectedWorkflow,
|
|
setSelectedWorkflow,
|
|
updateSessionTitle,
|
|
} = useChatStore();
|
|
|
|
const installedHeavyPlugins = useAppStore((s) => s.installedHeavyPlugins);
|
|
const activeHeavyPlugin = useAppStore((s) => s.activeHeavyPlugin);
|
|
const setActiveHeavyPlugin = useAppStore((s) => s.setActiveHeavyPlugin);
|
|
const heavyPluginsWithUi = installedHeavyPlugins.filter((p) => p.has_ui);
|
|
|
|
|
|
useEffect(() => {
|
|
let intervalId: ReturnType<typeof setInterval>;
|
|
|
|
const fetchWorkflows = async (isInitial = false) => {
|
|
if (isInitial) setLoadingWorkflows(true);
|
|
try {
|
|
const response = await apiClient.get('/api/v1/workflow/list');
|
|
const data = response.data;
|
|
let parsedWorkflows: Workflow[] = [];
|
|
if (Array.isArray(data)) {
|
|
parsedWorkflows = data;
|
|
} else if (data && typeof data === 'object') {
|
|
parsedWorkflows = data.workflows || Object.values(data);
|
|
}
|
|
setWorkflows(parsedWorkflows);
|
|
} catch (error) {
|
|
console.error('Failed to fetch workflows', error);
|
|
setWorkflows([]);
|
|
} finally {
|
|
if (isInitial) setLoadingWorkflows(false);
|
|
}
|
|
};
|
|
|
|
if (activeTab === 'workflows') {
|
|
fetchWorkflows(true);
|
|
intervalId = setInterval(() => fetchWorkflows(false), 2000);
|
|
}
|
|
|
|
return () => {
|
|
if (intervalId) clearInterval(intervalId);
|
|
};
|
|
}, [activeTab]);
|
|
|
|
const handleNewChat = () => {
|
|
setActiveSessionId(null);
|
|
setActiveHeavyPlugin(null);
|
|
};
|
|
|
|
const handleDeleteChat = (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation();
|
|
removeSession(id);
|
|
};
|
|
|
|
const handleStartRename = (e: React.MouseEvent, id: string, title: string) => {
|
|
e.stopPropagation();
|
|
setRenamingId(id);
|
|
setRenameValue(title);
|
|
};
|
|
|
|
const handleConfirmRename = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (renamingId && renameValue.trim()) {
|
|
updateSessionTitle(renamingId, renameValue.trim());
|
|
}
|
|
setRenamingId(null);
|
|
};
|
|
|
|
const isChats = activeTab === 'chats';
|
|
|
|
return (
|
|
<div className="w-[260px] bg-bg-sidebar border-r border-border-primary flex flex-col shrink-0">
|
|
<div className="flex items-center justify-between px-4 py-4">
|
|
<span className="text-[11px] font-semibold text-text-muted uppercase tracking-[1.5px]">
|
|
{isChats ? t('chat.chatHistory') : t('nav.workflow')}
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
if (isChats) handleNewChat();
|
|
else setSelectedWorkflow('new');
|
|
}}
|
|
className="w-[26px] h-[26px] rounded-md bg-bg-card text-text-secondary hover:bg-accent hover:text-white transition-all flex items-center justify-center shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
|
|
title={isChats ? t('chat.newChat') : t('workflow.createWorkflow')}
|
|
>
|
|
<Plus size={12} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto px-2 pb-2">
|
|
{isChats ? (
|
|
sessions.length === 0 ? (
|
|
<div className="px-3 py-8 text-center text-text-muted text-xs">
|
|
{t('chat.noHistory')}
|
|
</div>
|
|
) : (
|
|
sessions.map((session) => {
|
|
const isActive = activeSessionId === session.id;
|
|
const isRenaming = renamingId === session.id;
|
|
return (
|
|
<div
|
|
key={session.id}
|
|
onClick={() => {
|
|
setActiveSessionId(session.id);
|
|
setActiveHeavyPlugin(null);
|
|
}}
|
|
className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
|
|
isActive
|
|
? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
|
|
: 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
|
|
}`}
|
|
>
|
|
<div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
|
|
<MessageSquare size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
{isRenaming ? (
|
|
<input
|
|
autoFocus
|
|
value={renameValue}
|
|
onChange={(e) => setRenameValue(e.target.value)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmRename(e as any); if (e.key === 'Escape') setRenamingId(null); }}
|
|
className="w-full text-xs bg-bg-input border border-border-primary rounded px-1.5 py-0.5 text-text-primary focus:outline-none focus:border-accent"
|
|
/>
|
|
) : (
|
|
<h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
|
|
{session.title}
|
|
</h3>
|
|
)}
|
|
</div>
|
|
{isRenaming ? (
|
|
<button onClick={handleConfirmRename} className="p-1 rounded text-accent hover:bg-accent-light transition-all">
|
|
<Check size={11} />
|
|
</button>
|
|
) : (
|
|
<div className="flex items-center opacity-0 group-hover:opacity-100 transition-all">
|
|
<button onClick={(e) => handleStartRename(e, session.id, session.title)} className="p-1 rounded text-text-muted hover:text-accent transition-all">
|
|
<Pencil size={11} />
|
|
</button>
|
|
<button onClick={(e) => handleDeleteChat(e, session.id)} className="p-1 rounded text-text-muted hover:text-danger transition-all">
|
|
<Trash2 size={11} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)
|
|
) : (
|
|
<>
|
|
{loadingWorkflows ? (
|
|
<div className="px-3 py-8 text-center text-text-muted text-xs">{t('workflow.loading')}</div>
|
|
) : workflows.length === 0 ? (
|
|
<div className="px-3 py-8 text-center text-text-muted text-xs">
|
|
{t('workflow.noWorkflows')}
|
|
</div>
|
|
) : (
|
|
workflows.map((wf) => {
|
|
const isActive = selectedWorkflow === wf.trace_id;
|
|
return (
|
|
<div
|
|
key={wf.trace_id}
|
|
onClick={() => setSelectedWorkflow(wf.trace_id)}
|
|
className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
|
|
isActive
|
|
? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
|
|
: 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
|
|
}`}
|
|
>
|
|
<div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
|
|
<WorkflowIcon size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
|
|
{wf.title || t('common.unnamed')}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{isChats && heavyPluginsWithUi.length > 0 && (
|
|
<div className="border-t border-border-primary px-2 py-3 shrink-0">
|
|
<div className="px-2.5 text-[10px] font-semibold text-text-muted uppercase tracking-[1.2px] mb-1.5">
|
|
{t('chat.plugins.title')}
|
|
</div>
|
|
{heavyPluginsWithUi.map((p) => {
|
|
const isActive = activeHeavyPlugin === p.name;
|
|
return (
|
|
<button
|
|
key={p.name}
|
|
onClick={() => {
|
|
setActiveHeavyPlugin(p.name);
|
|
setActiveSessionId(null);
|
|
}}
|
|
className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg transition-all mb-px ${
|
|
isActive
|
|
? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
|
|
: 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
|
|
}`}
|
|
>
|
|
<div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
|
|
<Box size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
|
|
</div>
|
|
<span className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
|
|
{p.display_name}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|