xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-08-26 04:07:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): use shadcn processor navigation

Browse Source
This commit is contained in:
RockChinQ
2026-08-25 12:36:57 +08:00
parent ac31f1f006
commit e3150e66a4
5 changed files with 78 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/agents/components/AgentFormComponent.tsx
+21 -34
View File
@@ -14,6 +14,7 @@ import {
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
import { extractI18nObject } from '@/i18n/I18nProvider';
import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -430,40 +431,26 @@ export default function AgentFormComponent({
className="mb-2 flex h-full min-h-0 min-w-0 flex-1 flex-col"
>
<nav className="mb-4 shrink-0 space-y-2 border-b pb-4">
<div className="overflow-x-auto">
<ol className="grid min-w-[44rem] grid-cols-4 gap-2">
{primarySections.map((section, index) => {
const Icon = section.icon;
return (
<li key={section.name} className="min-w-0">
<button
type="button"
onClick={() => setActiveSection(section.name)}
className={`flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors ${
activeSection === section.name
? 'border-primary/50 bg-primary/5 text-foreground shadow-sm'
: 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground'
}`}
>
<span
className={`flex size-7 shrink-0 items-center justify-center rounded-full text-xs ${
activeSection === section.name
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground'
}`}
>
{index + 1}
</span>
<Icon className="hidden size-4 shrink-0 xl:block" />
<span className="min-w-0 leading-tight">
{section.label}
</span>
</button>
</li>
);
})}
</ol>
</div>
<Tabs
value={activeSection}
onValueChange={(value) =>
setActiveSection(value as AgentConfigSection)
}
>
<div className="overflow-x-auto">
<TabsList className="grid min-w-[44rem] w-full grid-cols-4">
{primarySections.map((section) => {
const Icon = section.icon;
return (
<TabsTrigger key={section.name} value={section.name}>
<Icon />
{section.label}
</TabsTrigger>
);
})}
</TabsList>
</div>
</Tabs>
</nav>
<div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
web/src/app/home/components/processor-detail/ProcessorDetailWorkbench.tsx
+5 -3
View File
@@ -1,5 +1,6 @@
import { ReactNode, useState } from 'react';
import { BarChart3, Bug, Settings } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Tooltip,
@@ -69,12 +70,13 @@ export default function ProcessorDetailWorkbench({
{status && (
<Tooltip>
<TooltipTrigger asChild>
<span
<Badge
variant="outline"
role="status"
aria-label={status.label}
tabIndex={0}
className={cn(
'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2 py-1 text-xs font-medium',
'rounded-full',
status.tone === 'success' &&
'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
status.tone === 'warning' &&
@@ -96,7 +98,7 @@ export default function ProcessorDetailWorkbench({
)}
/>
{status.label}
</span>
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-72">
<p className="font-medium">{status.label}</p>
web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+36 -55
View File
@@ -8,6 +8,7 @@ import {
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
import { getDefaultValues } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
@@ -31,7 +32,6 @@ import {
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { extractI18nObject } from '@/i18n/I18nProvider';
import { cn } from '@/lib/utils';
import {
Card,
CardContent,
@@ -580,64 +580,45 @@ export default function PipelineFormComponent({
{/* Keep the primary pipeline flow visible while editing. */}
{formLabelList.length > 1 && (
<nav className="mb-4 shrink-0 space-y-2 border-b pb-4">
<div className="overflow-x-auto">
<ol className="grid min-w-[34rem] grid-cols-3 gap-2">
{primarySections.map((section, index) => {
<Tabs value={activeSection} onValueChange={setActiveSection}>
<div className="overflow-x-auto">
<TabsList className="grid min-w-[34rem] w-full grid-cols-3">
{primarySections.map((section) => {
const Icon = section.icon;
return (
<TabsTrigger
key={section.name}
value={section.name}
>
<Icon />
{section.label}
</TabsTrigger>
);
})}
</TabsList>
</div>
<div className="flex flex-wrap gap-1">
{secondarySections.map((section) => {
const Icon = section.icon;
return (
<li key={section.name} className="relative min-w-0">
<button
type="button"
onClick={() => setActiveSection(section.name)}
className={cn(
'flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors',
activeSection === section.name
? 'border-primary/50 bg-primary/5 text-foreground shadow-sm'
: 'border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
)}
>
<span
className={cn(
'flex size-7 shrink-0 items-center justify-center rounded-full text-xs',
activeSection === section.name
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground',
)}
>
{index + 1}
</span>
<Icon className="hidden size-4 shrink-0 xl:block" />
<span className="min-w-0 leading-tight">
{section.label}
</span>
</button>
</li>
<Button
key={section.name}
type="button"
variant={
activeSection === section.name
? 'secondary'
: 'ghost'
}
size="sm"
onClick={() => setActiveSection(section.name)}
>
<Icon />
{section.label}
</Button>
);
})}
</ol>
</div>
<ul className="flex flex-wrap gap-1">
{secondarySections.map((section) => {
const Icon = section.icon;
return (
<li key={section.name}>
<button
type="button"
onClick={() => setActiveSection(section.name)}
className={cn(
'flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
activeSection === section.name
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground',
)}
>
<Icon className="size-3.5" />
{section.label}
</button>
</li>
);
})}
</ul>
</div>
</Tabs>
</nav>
)}
web/tests/e2e/processor-detail-workbench.spec.ts
+12 -14
View File
@@ -33,15 +33,15 @@ test.describe('processor detail workbench', () => {
.toBe(0);
expect(debugBox!.y).toBeGreaterThanOrEqual(0);
const flow = configPanel.locator('ol');
await expect(flow.getByRole('button').nth(0)).toContainText(
const flow = configPanel.getByRole('tablist');
await expect(flow.getByRole('tab').nth(0)).toContainText(
'Basic Information',
);
await expect(flow.getByRole('button').nth(1)).toContainText(
await expect(flow.getByRole('tab').nth(1)).toContainText(
'Bindable Event Range',
);
await expect(flow.getByRole('button').nth(2)).toContainText('Runner');
await expect(flow.getByRole('button').nth(3)).toContainText('Local Agent');
await expect(flow.getByRole('tab').nth(2)).toContainText('Runner');
await expect(flow.getByRole('tab').nth(3)).toContainText('Local Agent');
await expect(configPanel.getByLabel('Name')).toBeVisible();
await expect(configPanel.getByLabel('Icon')).toBeVisible();
@@ -56,11 +56,11 @@ test.describe('processor detail workbench', () => {
),
).toBeVisible();
await flow.getByRole('button').nth(1).click();
await flow.getByRole('tab').nth(1).click();
await expect(
configPanel.getByText('Bindable Event Range', { exact: true }).last(),
).toBeVisible();
await flow.getByRole('button').nth(3).click();
await flow.getByRole('tab').nth(3).click();
await expect(
configPanel.getByText('Local Agent', { exact: true }).last(),
).toBeVisible();
@@ -91,18 +91,16 @@ test.describe('processor detail workbench', () => {
.toBe(0);
expect(debugBox!.y).toBeGreaterThanOrEqual(0);
const flow = configPanel.locator('ol');
await expect(flow.getByRole('button').nth(0)).toContainText(
const flow = configPanel.getByRole('tablist');
await expect(flow.getByRole('tab').nth(0)).toContainText(
'Trigger Conditions',
);
await expect(flow.getByRole('button').nth(1)).toContainText(
'AI Capabilities',
);
await expect(flow.getByRole('button').nth(2)).toContainText(
await expect(flow.getByRole('tab').nth(1)).toContainText('AI Capabilities');
await expect(flow.getByRole('tab').nth(2)).toContainText(
'Output Processing',
);
await flow.getByRole('button').nth(1).click();
await flow.getByRole('tab').nth(1).click();
await expect(
configPanel.getByText('Runtime', { exact: true }).last(),
).toBeVisible();
web/tests/unit/processor-detail-workbench.test.mjs
+4 -2
View File
@@ -65,6 +65,8 @@ test('processor forms expose their primary orchestration flow horizontally', ()
pipelineForm,
/const primarySectionNames = \['trigger', 'ai', 'output'\]/,
);
assert.match(agentForm, /grid min-w-\[44rem\] grid-cols-4/);
assert.match(pipelineForm, /grid min-w-\[34rem\] grid-cols-3/);
assert.match(agentForm, /<TabsList[^>]*grid-cols-4/);
assert.match(pipelineForm, /<TabsList[^>]*grid-cols-3/);
assert.doesNotMatch(agentForm, /<ol className=/);
assert.doesNotMatch(pipelineForm, /<ol className=/);
});