存档
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Plus, Trash2, MessageSquare, Workflow as WorkflowIcon, Pencil, Check } from 'lucide-react';
|
||||
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;
|
||||
@@ -26,6 +27,12 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
|
||||
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>;
|
||||
|
||||
@@ -61,6 +68,7 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
|
||||
|
||||
const handleNewChat = () => {
|
||||
setActiveSessionId(null);
|
||||
setActiveHeavyPlugin(null);
|
||||
};
|
||||
|
||||
const handleDeleteChat = (e: React.MouseEvent, id: string) => {
|
||||
@@ -115,7 +123,10 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
|
||||
return (
|
||||
<div
|
||||
key={session.id}
|
||||
onClick={() => setActiveSessionId(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)]'
|
||||
@@ -160,39 +171,73 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
|
||||
})
|
||||
)
|
||||
) : (
|
||||
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'} />
|
||||
<>
|
||||
{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 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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user