mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-09-16 14:57:15 +00:00
feat(processors): refine plugin processor configuration and presentation
This commit is contained in:
@@ -37,7 +37,17 @@ interface ProcessorDetailWorkbenchProps {
|
||||
isSaving: boolean;
|
||||
configTitle: string;
|
||||
configIcon?: ReactNode;
|
||||
configContent: ReactNode;
|
||||
configContent?: ReactNode;
|
||||
configTabs?: {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
items: {
|
||||
value: string;
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
content: ReactNode;
|
||||
}[];
|
||||
};
|
||||
debugTitle?: string;
|
||||
debugDescription?: string;
|
||||
debugContent?: ReactNode;
|
||||
@@ -63,6 +73,7 @@ export default function ProcessorDetailWorkbench({
|
||||
configTitle,
|
||||
configIcon,
|
||||
configContent,
|
||||
configTabs,
|
||||
debugTitle,
|
||||
debugDescription,
|
||||
debugContent,
|
||||
@@ -77,6 +88,52 @@ export default function ProcessorDetailWorkbench({
|
||||
);
|
||||
const hasDebug = Boolean(debugTitle && debugContent);
|
||||
|
||||
const configPanel = (
|
||||
<Card
|
||||
role="region"
|
||||
aria-label={configTitle}
|
||||
className="h-full min-h-[36rem] min-w-0 gap-0 overflow-hidden py-0 lg:min-h-0"
|
||||
>
|
||||
<CardHeader className="flex h-12 shrink-0 flex-row items-center gap-2 border-b px-4 font-medium [.border-b]:pb-0">
|
||||
{configTabs ? (
|
||||
<TabsList aria-label={configTitle}>
|
||||
{configTabs.items.map((tab) => (
|
||||
<TabsTrigger key={tab.value} value={tab.value}>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
) : (
|
||||
<>
|
||||
{configIcon ?? <Settings className="size-4" />}
|
||||
<span className="truncate">{configTitle}</span>
|
||||
</>
|
||||
)}
|
||||
{isDirty && (
|
||||
<span className="ml-auto flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
|
||||
<span className="size-1.5 rounded-full bg-amber-500" />
|
||||
{unsavedLabel}
|
||||
</span>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="min-h-0 min-w-0 flex-1 overflow-hidden p-4">
|
||||
{configTabs
|
||||
? configTabs.items.map((tab) => (
|
||||
<TabsContent
|
||||
key={tab.value}
|
||||
value={tab.value}
|
||||
forceMount
|
||||
className="m-0 h-full min-h-0 data-[state=inactive]:hidden"
|
||||
>
|
||||
{tab.content}
|
||||
</TabsContent>
|
||||
))
|
||||
: configContent}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
value={activeView}
|
||||
@@ -246,25 +303,17 @@ export default function ProcessorDetailWorkbench({
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card
|
||||
role="region"
|
||||
aria-label={configTitle}
|
||||
className="min-h-[36rem] min-w-0 gap-0 overflow-hidden py-0 lg:min-h-0"
|
||||
>
|
||||
<CardHeader className="flex h-12 shrink-0 flex-row items-center gap-2 border-b px-4 font-medium [.border-b]:pb-0">
|
||||
{configIcon ?? <Settings className="size-4" />}
|
||||
<span className="truncate">{configTitle}</span>
|
||||
{isDirty && (
|
||||
<span className="ml-auto flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
|
||||
<span className="size-1.5 rounded-full bg-amber-500" />
|
||||
{unsavedLabel}
|
||||
</span>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="min-h-0 min-w-0 flex-1 overflow-hidden p-4">
|
||||
{configContent}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{configTabs ? (
|
||||
<Tabs
|
||||
value={configTabs.value}
|
||||
onValueChange={configTabs.onValueChange}
|
||||
className="min-h-0 min-w-0"
|
||||
>
|
||||
{configPanel}
|
||||
</Tabs>
|
||||
) : (
|
||||
configPanel
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
Reference in New Issue
Block a user