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

Feat/shadcn sidebar and page views (#2084)

Browse Source 
* feat(web): migrate sidebar to shadcn and convert entity editors to page views

* feat(web): enhance sidebar with sections, collapsible persistence, sub-item sorting/limiting, and UI polish

- Reorganize sidebar into Home and Extensions sections with collapsible groups
- Split plugins page into plugins, market, and mcp as separate routes
- Add sidebar sub-items sorted by updatedAt with max 5 visible and expand/collapse toggle
- Persist collapsible section state and sidebar open state in localStorage
- Fix page refresh stripping query params by splitting handleChildClick/selectChild
- Swap plugin detail layout (config left, readme right)
- Add fixed headers with internal scroll for all detail and list pages
- Remove entity form borders and sidebar rail
- Improve dark mode sidebar/content contrast
- Rename monitoring to Dashboard, move to first position
- Update breadcrumb to show Home or Extensions based on current route
- Add i18n translations for more/less toggle in all 4 locales

* fix(web): fix scroll behavior - constrain layout to viewport, fix fixed headers and independent scroll areas

- Change SidebarProvider wrapper from min-h-svh to h-svh overflow-hidden to constrain layout to viewport height (root cause of all scroll issues)
- Fix create mode pages (bot, pipeline, knowledge): extract title bar out of scroll container so only form content scrolls
- Fix plugin detail: add overflow-x-hidden on both config and readme panels to prevent horizontal overflow
- Add min-h-0 to all TabsContent in edit mode for cross-browser flex shrink safety
- Change nested <main> to <div> in layout to avoid invalid nested <main> tags (SidebarInset already renders as <main>)

* style(web): polish UI - dashboard i18n, sidebar create text, cursor-pointer tabs, remove cancel buttons

* feat(web): add plugin context menu to sidebar sub-items

- Add hover-reveal dropdown menu (Ellipsis icon) on plugin sidebar items
- Menu items: Update (marketplace only), View Source (marketplace/github), Delete
- Add confirmation dialog with async task polling for delete/update operations
- Extend SidebarEntityItem with installSource and installInfo fields
- Fix PipelineFormComponent optional onCancel invocation

* fix(web): prevent plugin sidebar text from overlapping menu button

Add right padding on plugin sub-items and explicit truncate on text
span so long plugin names never overlap the hover menu button.

* feat(web): show update indicator on sidebar plugin menu

- Fetch marketplace plugin versions in SidebarDataContext.refreshPlugins
- Compare with installed version using isNewerVersion to set hasUpdate
- Show red dot on menu trigger when update available (always visible)
- Show 'New' badge on Update menu item when update available
- Marketplace fetch failure is silently caught to avoid blocking sidebar

* refactor(web): remove entity list pages, back buttons, and make sidebar toggle collapse

- Remove card grid list views from bots, pipelines, knowledge pages
- Show empty state placeholder when no entity is selected
- Preserve KB migration dialog at page level
- Remove back (ArrowLeft) buttons from all detail pages (bots, pipelines, knowledge, plugins)
- Sidebar parent click for bots/pipelines/knowledge now toggles collapse instead of navigating
- Breadcrumb second level is now non-clickable (always BreadcrumbPage)
- Add selectFromSidebar i18n keys in all 4 locales

* feat(web): enhance bot session monitor with refresh functionality and improve log card UI

* refactor(web): optimize pipeline detail page with vertical config nav and debug chat polish

- Convert pipeline config tab's horizontal sub-tabs to vertical left-side navigation with icons
- Replace hardcoded colors in PipelineFormComponent and DebugDialog with theme-aware Tailwind classes
- Replace custom SVG icons with lucide-react (User, Users, ImageIcon, Send, Reply, etc.)
- Replace hardcoded Chinese strings with i18n keys (allMembers, file, voice, uploadImage, uploading)
- Modernize chat bubbles to use bg-primary/10 and bg-muted instead of hardcoded blue/gray
- Translate all Chinese comments to English in both components
- Delete unused pipelineFormStyle.module.css
- Remove max-w-2xl constraint from config tab container

* fix(web): improve dark mode contrast and relocate WebSocket status indicator

Bump dark mode --muted, --accent, --secondary from oklch(0.18) to oklch(0.24)
to fix invisible TabsList, message bubbles, and selected items against the
oklch(0.17) background. Move WebSocket connection dot from pipeline title
into the Debug Chat tab trigger so it is always visible. Replace hardcoded
Quote border colors with theme-aware border-muted-foreground/50.

* fix(web): increase dark mode contrast for muted/accent/secondary to oklch(0.27)

Previous value of oklch(0.24) was still not distinguishable enough against
the oklch(0.17) background. Bump to oklch(0.27) for a 0.10 lightness gap,
matching the contrast ratio of the default shadcn zinc dark theme.

* style(web): replace hardcoded colors with theme tokens in monitoring dashboard

Convert all monitoring page components from hardcoded gray/white colors
to theme-aware CSS variable tokens (bg-card, text-foreground,
text-muted-foreground, bg-muted, bg-background, bg-accent, border).
Semantic colors (red/green/blue/purple for status badges and error
styling) are intentionally preserved.

* feat(web): show debug indicator for debugging plugins in sidebar

Add orange Bug icon next to plugin name in sidebar sub-items when the
plugin is connected via WebSocket debug mode. Hide context menu for
debug plugins since delete/update operations are not supported.

* feat(web): show install source and debug badge on plugin detail page

Display a badge next to the plugin title indicating the install source
(GitHub blue, Local green, Marketplace purple) or debugging status
(orange with Bug icon), matching the existing plugin card convention.

* fix(web): resolve eslint errors for CI - remove unused imports and variables

* fix(web): remove stale setSubtitle call and fix prettier formatting

* Refactor code formatting and improve readability

- Updated HomeSidebar.tsx to enhance clarity in conditional assignment.
- Adjusted CSS formatting in github-markdown.css for better alignment.
- Cleaned up tsconfig.json by consolidating array formatting for consistency.

* fix(ci): use local prettier instead of mirrors-prettier to avoid version mismatch (3.1.0 vs 3.8.1)
This commit is contained in:
Junyan Chin
2026-03-27 01:51:13 +08:00
committed by GitHub
parent 3c0495fc51
commit 4a97895dea
59 changed files with 6785 additions and 4331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/pipelines/PipelineDetailContent.tsx
+201
View File
@@ -0,0 +1,201 @@
'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import PipelineFormComponent from '@/app/home/pipelines/components/pipeline-form/PipelineFormComponent';
import DebugDialog from '@/app/home/pipelines/components/debug-dialog/DebugDialog';
import PipelineExtension from '@/app/home/pipelines/components/pipeline-extensions/PipelineExtension';
import PipelineMonitoringTab from '@/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab';
import { httpClient } from '@/app/infra/http/HttpClient';
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
import { useTranslation } from 'react-i18next';
import { Settings, Puzzle, Bug, BarChart3 } from 'lucide-react';
export default function PipelineDetailContent({ id }: { id: string }) {
const isCreateMode = id === 'new';
const router = useRouter();
const { t } = useTranslation();
const { refreshPipelines, pipelines, setDetailEntityName } = useSidebarData();
// Set breadcrumb entity name
useEffect(() => {
if (isCreateMode) {
setDetailEntityName(t('pipelines.createPipeline'));
} else {
const pipeline = pipelines.find((p) => p.id === id);
setDetailEntityName(pipeline?.name ?? id);
}
return () => setDetailEntityName(null);
}, [id, isCreateMode, pipelines, setDetailEntityName, t]);
const [activeTab, setActiveTab] = useState('config');
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
function handleFinish() {
refreshPipelines();
}
function handleDeletePipeline() {
httpClient.deletePipeline(id).then(() => {
refreshPipelines();
setShowDeleteConfirm(false);
router.push('/home/pipelines');
});
}
function handleNewPipelineCreated(newPipelineId: string) {
refreshPipelines();
// Navigate to the newly created pipeline's detail view via query param
router.push(`/home/pipelines?id=${encodeURIComponent(newPipelineId)}`);
}
// Create mode: simple form layout
if (isCreateMode) {
return (
<div className="flex h-full flex-col">
<div className="flex items-center gap-3 pb-4 shrink-0">
<h1 className="text-xl font-semibold">
{t('pipelines.createPipeline')}
</h1>
</div>
<div className="flex-1 overflow-y-auto min-h-0">
<div className="mx-auto max-w-2xl space-y-6">
<PipelineFormComponent
pipelineId={undefined}
isEditMode={false}
disableForm={false}
showButtons={true}
onFinish={handleFinish}
onNewPipelineCreated={handleNewPipelineCreated}
onDeletePipeline={() => {}}
/>
</div>
</div>
</div>
);
}
// Edit mode: tabbed layout with config, extensions, debug, monitoring
return (
<>
<div className="flex h-full flex-col">
<div className="flex items-center gap-3 pb-4 shrink-0">
<h1 className="text-xl font-semibold">
{t('pipelines.editPipeline')}
</h1>
</div>
<Tabs
key={id}
value={activeTab}
onValueChange={setActiveTab}
className="flex flex-1 flex-col min-h-0"
>
<TabsList className="shrink-0">
<TabsTrigger value="config" className="gap-1.5">
<Settings className="size-3.5" />
{t('pipelines.configuration')}
</TabsTrigger>
<TabsTrigger value="extensions" className="gap-1.5">
<Puzzle className="size-3.5" />
{t('pipelines.extensions.title')}
</TabsTrigger>
<TabsTrigger value="debug" className="gap-1.5">
<Bug className="size-3.5" />
{t('pipelines.debugChat')}
<span
className={`inline-block size-2 rounded-full ${
isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
}`}
/>
</TabsTrigger>
<TabsTrigger value="monitoring" className="gap-1.5">
<BarChart3 className="size-3.5" />
{t('pipelines.monitoring.title')}
</TabsTrigger>
</TabsList>
<TabsContent
value="config"
className="flex-1 min-h-0 overflow-y-auto mt-4"
>
<PipelineFormComponent
pipelineId={id}
isEditMode={true}
disableForm={false}
showButtons={true}
onFinish={handleFinish}
onNewPipelineCreated={handleNewPipelineCreated}
onDeletePipeline={() => setShowDeleteConfirm(true)}
onCancel={() => router.push('/home/pipelines')}
/>
</TabsContent>
<TabsContent
value="extensions"
className="flex-1 min-h-0 overflow-y-auto mt-4"
>
<PipelineExtension pipelineId={id} />
</TabsContent>
<TabsContent value="debug" className="flex-1 min-h-0 mt-4">
<DebugDialog
open={activeTab === 'debug'}
pipelineId={id}
isEmbedded={true}
onConnectionStatusChange={setIsWebSocketConnected}
/>
</TabsContent>
<TabsContent
value="monitoring"
className="flex-1 min-h-0 overflow-y-auto mt-4"
>
<PipelineMonitoringTab
pipelineId={id}
onNavigateToMonitoring={() => {
router.push('/home/monitoring');
}}
/>
</TabsContent>
</Tabs>
</div>
{/* Delete confirmation dialog */}
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('common.confirmDelete')}</DialogTitle>
<DialogDescription className="sr-only">
{t('pipelines.deleteConfirmation')}
</DialogDescription>
</DialogHeader>
<div className="py-4">{t('pipelines.deleteConfirmation')}</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setShowDeleteConfirm(false)}
>
{t('common.cancel')}
</Button>
<Button variant="destructive" onClick={handleDeletePipeline}>
{t('common.confirmDelete')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}
web/src/app/home/pipelines/PipelineDetailDialog.tsx
-278
View File
@@ -1,278 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/navigation';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from '@/components/ui/sidebar';
import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
import DebugDialog from './components/debug-dialog/DebugDialog';
import PipelineExtension from './components/pipeline-extensions/PipelineExtension';
import PipelineMonitoringTab from './components/monitoring-tab/PipelineMonitoringTab';
interface PipelineDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
pipelineId?: string;
isEditMode?: boolean;
isDefaultPipeline?: boolean;
onFinish: () => void;
onNewPipelineCreated?: (pipelineId: string) => void;
onDeletePipeline: () => void;
onCancel: () => void;
}
type DialogMode = 'config' | 'debug' | 'extensions' | 'monitoring';
export default function PipelineDialog({
open,
onOpenChange,
pipelineId: propPipelineId,
isEditMode = false,
onFinish,
onNewPipelineCreated,
onDeletePipeline,
onCancel,
}: PipelineDialogProps) {
const { t } = useTranslation();
const router = useRouter();
const [pipelineId, setPipelineId] = useState<string | undefined>(
propPipelineId,
);
const [currentMode, setCurrentMode] = useState<DialogMode>('config');
const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
useEffect(() => {
setPipelineId(propPipelineId);
setCurrentMode('config');
}, [propPipelineId, open]);
const handleFinish = () => {
onFinish();
};
const handleNewPipelineCreated = (newPipelineId: string) => {
setPipelineId(newPipelineId);
setCurrentMode('config');
if (onNewPipelineCreated) {
onNewPipelineCreated(newPipelineId);
}
};
const menu = [
{
key: 'config',
label: t('pipelines.configuration'),
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
</svg>
),
},
{
key: 'extensions',
label: t('pipelines.extensions.title'),
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path>
</svg>
),
},
{
key: 'debug',
label: t('pipelines.debugChat'),
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M13 19.9C15.2822 19.4367 17 17.419 17 15V12C17 11.299 16.8564 10.6219 16.5846 10H7.41538C7.14358 10.6219 7 11.299 7 12V15C7 17.419 8.71776 19.4367 11 19.9V14H13V19.9ZM5.5358 17.6907C5.19061 16.8623 5 15.9534 5 15H2V13H5V12C5 11.3573 5.08661 10.7348 5.2488 10.1436L3.0359 8.86602L4.0359 7.13397L6.05636 8.30049C6.11995 8.19854 6.18609 8.09835 6.25469 8H17.7453C17.8139 8.09835 17.88 8.19854 17.9436 8.30049L19.9641 7.13397L20.9641 8.86602L18.7512 10.1436C18.9134 10.7348 19 11.3573 19 12V13H22V15H19C19 15.9534 18.8094 16.8623 18.4642 17.6907L20.9641 19.134L19.9641 20.866L17.4383 19.4077C16.1549 20.9893 14.1955 22 12 22C9.80453 22 7.84512 20.9893 6.56171 19.4077L4.0359 20.866L3.0359 19.134L5.5358 17.6907ZM8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6H8Z"></path>
</svg>
),
},
{
key: 'monitoring',
label: t('pipelines.monitoring.title'),
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
</svg>
),
},
];
const getDialogTitle = () => {
if (currentMode === 'config') {
return isEditMode
? t('pipelines.editPipeline')
: t('pipelines.createPipeline');
}
if (currentMode === 'extensions') {
return t('pipelines.extensions.title');
}
if (currentMode === 'monitoring') {
return t('pipelines.monitoring.title');
}
return t('pipelines.debugDialog.title');
};
// 创建新流水线时的对话框
if (!isEditMode) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="overflow-hidden p-0 !max-w-[40vw] max-h-[70vh] flex">
<main className="flex flex-1 flex-col h-[70vh]">
<DialogHeader className="px-6 pt-6 pb-4 shrink-0">
<DialogTitle>{t('pipelines.createPipeline')}</DialogTitle>
</DialogHeader>
<div className="flex-1 overflow-y-auto px-6 pb-6">
<PipelineFormComponent
onFinish={handleFinish}
onNewPipelineCreated={handleNewPipelineCreated}
isEditMode={isEditMode}
pipelineId={pipelineId}
disableForm={false}
showButtons={true}
onDeletePipeline={onDeletePipeline}
onCancel={() => {
onCancel();
}}
/>
</div>
</main>
</DialogContent>
</Dialog>
);
}
// 编辑流水线时的对话框
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="overflow-hidden p-0 !max-w-[80vw] h-[75vh] flex">
<SidebarProvider className="items-start w-full flex h-full min-h-0">
<Sidebar
collapsible="none"
className="hidden md:flex h-full min-h-0 w-40 border-r bg-white dark:bg-black"
>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{menu.map((item) => (
<SidebarMenuItem key={item.key}>
<SidebarMenuButton
asChild
isActive={currentMode === item.key}
onClick={() => setCurrentMode(item.key as DialogMode)}
>
<a href="#">
{item.icon}
<span>{item.label}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<main className="flex flex-1 flex-col h-full min-h-0">
<DialogHeader
className="px-6 pt-6 pb-4 shrink-0 flex flex-row items-center justify-start"
style={{ height: '4rem' }}
>
<DialogTitle>{getDialogTitle()}</DialogTitle>
{currentMode === 'debug' && (
<div className="flex items-center gap-2 ml-2">
<div
className={`w-2.5 h-2.5 rounded-full ${
isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
}`}
title={
isWebSocketConnected
? t('pipelines.debugDialog.connected')
: t('pipelines.debugDialog.disconnected')
}
/>
<span className="text-sm text-gray-600 dark:text-gray-400">
{isWebSocketConnected
? t('pipelines.debugDialog.connected')
: t('pipelines.debugDialog.disconnected')}
</span>
</div>
)}
</DialogHeader>
<div
className="flex-1 overflow-y-auto px-6 pb-4 w-full"
style={{ height: 'calc(100% - 4rem)' }}
>
{currentMode === 'config' && (
<PipelineFormComponent
onFinish={handleFinish}
onNewPipelineCreated={handleNewPipelineCreated}
isEditMode={isEditMode}
pipelineId={pipelineId}
disableForm={false}
showButtons={true}
onDeletePipeline={onDeletePipeline}
onCancel={() => {
onCancel();
}}
/>
)}
{currentMode === 'extensions' && pipelineId && (
<PipelineExtension pipelineId={pipelineId} />
)}
{currentMode === 'debug' && pipelineId && (
<DebugDialog
open={true}
pipelineId={pipelineId}
isEmbedded={true}
onConnectionStatusChange={setIsWebSocketConnected}
/>
)}
{currentMode === 'monitoring' && pipelineId && (
<PipelineMonitoringTab
pipelineId={pipelineId}
onNavigateToMonitoring={() => {
router.push(`/home/monitoring?pipelineId=${pipelineId}`);
onOpenChange(false);
}}
/>
)}
</div>
</main>
</SidebarProvider>
</DialogContent>
</Dialog>
);
}
web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx
+117 -157
View File
@@ -29,6 +29,17 @@ import rehypeSanitize from 'rehype-sanitize';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import '@/styles/github-markdown.css';
import {
User,
Users,
ImageIcon,
Paperclip,
Send,
Reply,
Music,
Code,
AlignLeft,
} from 'lucide-react';
interface DebugDialogProps {
open: boolean;
@@ -71,7 +82,7 @@ export default function DebugDialog({
const isInitializingRef = useRef<boolean>(false);
const scrollToBottom = useCallback(() => {
// 使用setTimeout确保在DOM更新后执行滚动
// Use setTimeout to ensure scroll happens after DOM update
setTimeout(() => {
const scrollArea = document.querySelector('.scroll-area') as HTMLElement;
if (scrollArea) {
@@ -80,7 +91,7 @@ export default function DebugDialog({
behavior: 'smooth',
});
}
// 同时确保messagesEndRef也滚动到视图
// Also ensure messagesEndRef scrolls into view
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, 0);
}, []);
@@ -100,10 +111,10 @@ export default function DebugDialog({
[sessionType],
);
// 初始化WebSocket连接
// Initialize WebSocket connection
const initWebSocket = useCallback(
async (pipelineId: string) => {
// 防止重复初始化
// Prevent duplicate initialization
if (isInitializingRef.current) {
return;
}
@@ -111,13 +122,13 @@ export default function DebugDialog({
try {
isInitializingRef.current = true;
// 断开旧连接
// Disconnect old connection
if (wsClientRef.current) {
wsClientRef.current.disconnect();
wsClientRef.current = null;
}
// 创建新连接
// Create new connection
const wsClient = new WebSocketClient(pipelineId, sessionType);
wsClient
@@ -126,31 +137,31 @@ export default function DebugDialog({
isInitializingRef.current = false;
})
.onMessage((wsMessage) => {
// 将 WebSocketMessage 转换为 Message 类型
// Convert WebSocketMessage to Message type
const message: Message = {
...wsMessage,
message_chain: wsMessage.message_chain as MessageChainComponent[],
};
setMessages((prevMessages) => {
// 查找是否已存在相同ID的消息
// Check if message with same ID already exists
const existingIndex = prevMessages.findIndex(
(m) => m.id === message.id,
);
if (existingIndex >= 0) {
// 更新已存在的消息（流式输出）
// Update existing message (streaming output)
const newMessages = [...prevMessages];
newMessages[existingIndex] = message;
return newMessages;
} else {
// 添加新消息
// Add new message
return [...prevMessages, message];
}
});
})
.onError((error) => {
console.error('WebSocket错误:', error);
console.error('WebSocket error:', error);
setIsConnected(false);
isInitializingRef.current = false;
toast.error(t('pipelines.debugDialog.connectionError'));
@@ -166,7 +177,7 @@ export default function DebugDialog({
await wsClient.connect();
wsClientRef.current = wsClient;
} catch (error) {
console.error('WebSocket连接失败:', error);
console.error('WebSocket connection failed:', error);
setIsConnected(false);
isInitializingRef.current = false;
toast.error(t('pipelines.debugDialog.connectionFailed'));
@@ -175,17 +186,17 @@ export default function DebugDialog({
[sessionType, t],
);
// 在useEffect中监听messages变化时滚动
// Scroll when messages change
useEffect(() => {
scrollToBottom();
}, [messages, scrollToBottom]);
// 监听 open 和 pipelineId 变化，进入时连接，离开时断开
// Watch open and pipelineId changes: connect on open, disconnect on close
useEffect(() => {
if (open) {
setSelectedPipelineId(pipelineId);
} else {
// 关闭对话框时立即断开WebSocket
// Disconnect WebSocket immediately when dialog closes
if (wsClientRef.current) {
wsClientRef.current.disconnect();
wsClientRef.current = null;
@@ -195,7 +206,7 @@ export default function DebugDialog({
}
return () => {
// 组件卸载时断开WebSocket
// Disconnect WebSocket on component unmount
if (wsClientRef.current) {
wsClientRef.current.disconnect();
wsClientRef.current = null;
@@ -204,17 +215,17 @@ export default function DebugDialog({
};
}, [open, pipelineId]);
// 监听 sessionType 和 selectedPipelineId 变化，重新加载消息和连接
// Reload messages and reconnect when sessionType or selectedPipelineId changes
useEffect(() => {
if (open) {
// 清空当前消息，避免显示旧的消息
// Clear current messages to avoid showing stale messages
setMessages([]);
loadMessages(selectedPipelineId);
initWebSocket(selectedPipelineId);
}
}, [sessionType, selectedPipelineId, open, loadMessages, initWebSocket]);
// 通知父组件连接状态变化
// Notify parent of connection status changes
useEffect(() => {
onConnectionStatusChange?.(isConnected);
}, [isConnected, onConnectionStatusChange]);
@@ -321,9 +332,9 @@ export default function DebugDialog({
const messageChain = [];
// 添加引用消息(如果有)
// Add quoted message if present
if (quotedMessage) {
// 获取被引用消息的Source组件以获取message_id
// Get message_id from the quoted message Source component
const sourceComponent = quotedMessage.message_chain.find(
(c) => c.type === 'Source',
) as Source | undefined;
@@ -353,7 +364,7 @@ export default function DebugDialog({
});
}
// 添加文本
// Add text content
if (text_content) {
messageChain.push({
type: 'Plain',
@@ -361,7 +372,7 @@ export default function DebugDialog({
});
}
// 上传图片并添加到消息链
// Upload images and add to message chain
for (const image of selectedImages) {
try {
const result = await httpClient.uploadWebSocketImage(
@@ -373,20 +384,20 @@ export default function DebugDialog({
path: result.file_key,
});
} catch (error) {
console.error('图片上传失败:', error);
console.error('Image upload failed:', error);
toast.error(t('pipelines.debugDialog.imageUploadFailed'));
}
}
// 清空输入框、图片和引用消息
// Clear input, images, and quoted message
setInputValue('');
setHasAt(false);
setQuotedMessage(null);
selectedImages.forEach((img) => URL.revokeObjectURL(img.preview));
setSelectedImages([]);
// 通过WebSocket发送消息
// 不在本地添加消息，等待后端广播回来（带有正确的ID）
// Send message via WebSocket
// Do not add locally; wait for backend broadcast with correct ID
wsClientRef.current.sendMessage(messageChain, streamOutput);
} catch (error) {
console.error('Failed to send message:', error);
@@ -407,7 +418,7 @@ export default function DebugDialog({
case 'At': {
const atComponent = component as At;
// 优先使用 display，如果没有则使用 target
// Prefer display name, fall back to target
const displayName =
atComponent.display || atComponent.target?.toString() || '';
return (
@@ -420,7 +431,10 @@ export default function DebugDialog({
case 'AtAll':
return (
<span key={index} className="inline-flex align-middle mx-1">
<AtBadge targetName="全体成员" readonly={true} />
<AtBadge
targetName={t('pipelines.debugDialog.allMembers')}
readonly={true}
/>
</span>
);
@@ -449,10 +463,10 @@ export default function DebugDialog({
const file = component as MessageChainComponent & { name?: string };
return (
<div key={index} className="my-2 flex items-center gap-2 text-sm">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" />
</svg>
<span>[文件] {file.name || 'Unknown'}</span>
<Paperclip className="size-4" />
<span>
[{t('pipelines.debugDialog.file')}] {file.name || 'Unknown'}
</span>
</div>
);
}
@@ -462,15 +476,13 @@ export default function DebugDialog({
const voiceUrl = voice.url || (voice.base64 ? voice.base64 : '');
if (!voiceUrl) {
return <span key={index}>[语音]</span>;
return <span key={index}>[{t('pipelines.debugDialog.voice')}]</span>;
}
return (
<div key={index} className="my-2 flex items-center gap-2">
<div className="flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
</svg>
<div className="flex items-center gap-2 px-3 py-2 bg-muted rounded-lg">
<Music className="size-5" />
<audio
controls
src={voiceUrl}
@@ -480,7 +492,7 @@ export default function DebugDialog({
Your browser does not support the audio element.
</audio>
{voice.length && voice.length > 0 && (
<span className="text-xs text-gray-500 dark:text-gray-400">
<span className="text-xs text-muted-foreground">
{voice.length}s
</span>
)}
@@ -494,7 +506,7 @@ export default function DebugDialog({
return (
<div
key={index}
className="mb-2 pl-3 border-l-2 border-gray-400 dark:border-gray-500"
className="mb-2 pl-3 border-l-2 border-muted-foreground/50"
>
<div className="text-sm opacity-75">
{quote.origin?.map((comp, idx) =>
@@ -506,7 +518,7 @@ export default function DebugDialog({
}
case 'Source':
// Source 不显示
// Source is not rendered
return null;
default:
@@ -515,7 +527,7 @@ export default function DebugDialog({
};
const getMessageTimestamp = (message: Message): number => {
// 首先尝试从message_chain中的Source组件获取时间戳
// Try to get timestamp from Source component in message_chain
const sourceComponent = message.message_chain.find(
(c) => c.type === 'Source',
) as Source | undefined;
@@ -524,8 +536,8 @@ export default function DebugDialog({
return sourceComponent.timestamp;
}
// 如果没有Source组件，使用message.timestamp
// 假设timestamp是ISO字符串，转换为Unix时间戳（秒）
// Fall back to message.timestamp if no Source component
// Assume ISO string, convert to Unix timestamp (seconds)
if (message.timestamp) {
return Math.floor(new Date(message.timestamp).getTime() / 1000);
}
@@ -542,13 +554,13 @@ export default function DebugDialog({
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
// 判断是否是今天
// Check if today
const isToday = now.toDateString() === date.toDateString();
if (isToday) {
return `${hours}:${minutes}`;
}
// 判断是否是昨天
// Check if yesterday
const yesterday = new Date(now);
yesterday.setDate(yesterday.getDate() - 1);
const isYesterday = yesterday.toDateString() === date.toDateString();
@@ -556,7 +568,7 @@ export default function DebugDialog({
return `${t('bots.yesterday')} ${hours}:${minutes}`;
}
// 判断是否是今年
// Check if this year
const isThisYear = now.getFullYear() === date.getFullYear();
if (isThisYear) {
const month = date.getMonth() + 1;
@@ -564,7 +576,7 @@ export default function DebugDialog({
return t('bots.dateFormat', { month, day });
}
// 更早的日期
// Earlier dates
return t('bots.earlier');
};
@@ -685,49 +697,37 @@ export default function DebugDialog({
const renderContent = () => (
<div className="flex flex-1 h-full min-h-0">
<div className="w-14 bg-white dark:bg-black p-2 pl-0 flex-shrink-0 flex flex-col justify-start gap-2">
<div className="w-14 p-2 pl-0 shrink-0 flex flex-col justify-start gap-2">
<Button
variant="ghost"
size="icon"
className={`w-10 h-10 justify-center rounded-md transition-none ${
className={cn(
'w-10 h-10 justify-center rounded-md transition-none border-0 shadow-none',
sessionType === 'person'
? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
: 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
} border-0 shadow-none`}
? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
)}
onClick={() => setSessionType('person')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path>
</svg>
<User className="size-5" />
</Button>
<Button
variant="ghost"
size="icon"
className={`w-10 h-10 justify-center rounded-md transition-none ${
className={cn(
'w-10 h-10 justify-center rounded-md transition-none border-0 shadow-none',
sessionType === 'group'
? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
: 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
} border-0 shadow-none`}
? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
)}
onClick={() => setSessionType('group')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z"></path>
</svg>
<Users className="size-5" />
</Button>
</div>
<div className="flex-1 flex flex-col w-[10rem] h-full min-h-0">
<ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white dark:bg-black scroll-area">
<ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 scroll-area">
<div className="space-y-6">
{messages.length === 0 ? (
<div className="text-center text-muted-foreground py-12 text-lg">
@@ -746,17 +746,15 @@ export default function DebugDialog({
className={cn(
'max-w-3xl px-5 py-3 rounded-2xl',
message.role === 'user'
? 'user-message-bubble bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 rounded-br-none'
: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-none',
? 'user-message-bubble bg-primary/10 text-foreground rounded-br-none'
: 'bg-muted text-foreground rounded-bl-none',
)}
>
{renderMessageContent(message)}
<div
className={cn(
'text-xs mt-2 flex items-center justify-between gap-2',
message.role === 'user'
? 'text-gray-600 dark:text-gray-300'
: 'text-gray-500 dark:text-gray-400',
'text-muted-foreground',
)}
>
<div className="flex items-center gap-2">
@@ -767,12 +765,11 @@ export default function DebugDialog({
</span>
{hasPlainText(message) && (
<button
type="button"
onClick={() => toggleRawMode(message)}
className={cn(
'px-1.5 py-0.5 rounded text-[10px] transition-colors',
message.role === 'user'
? 'hover:bg-blue-200 dark:hover:bg-blue-800'
: 'hover:bg-gray-200 dark:hover:bg-gray-700',
'hover:bg-accent',
)}
title={
rawModeMessages.has(getMessageKey(message))
@@ -782,58 +779,27 @@ export default function DebugDialog({
>
{rawModeMessages.has(getMessageKey(message)) ? (
<span className="flex items-center gap-0.5">
<svg
className="w-3 h-3"
viewBox="0 0 16 16"
fill="currentColor"
>
<path d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z" />
</svg>
<Code className="size-3" />
MD
</span>
) : (
<span className="flex items-center gap-0.5">
<svg
className="w-3 h-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h7"
/>
</svg>
<AlignLeft className="size-3" />
{t('pipelines.debugDialog.showRaw')}
</span>
)}
</button>
)}
<button
type="button"
onClick={() => setQuotedMessage(message)}
className={cn(
'px-1.5 py-0.5 rounded text-[10px] transition-colors flex items-center gap-0.5',
message.role === 'user'
? 'hover:bg-blue-200 dark:hover:bg-blue-800'
: 'hover:bg-gray-200 dark:hover:bg-gray-700',
'hover:bg-accent',
)}
title={t('pipelines.debugDialog.reply')}
>
<svg
className="w-3 h-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
/>
</svg>
<Reply className="size-3" />
{t('pipelines.debugDialog.reply')}
</button>
</div>
@@ -849,18 +815,18 @@ export default function DebugDialog({
</div>
</ScrollArea>
{/* 引用消息预览区域 */}
{/* Quoted message preview */}
{quotedMessage && (
<div className="px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
<div className="px-4 py-2 bg-muted/50 border-t">
<div className="flex items-start gap-2">
<div className="flex-1 pl-3 border-l-2 border-[#2288ee]">
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
<div className="flex-1 pl-3 border-l-2 border-primary">
<div className="text-xs text-muted-foreground mb-1">
{t('pipelines.debugDialog.replyTo')}{' '}
{quotedMessage.role === 'user'
? t('pipelines.debugDialog.userMessage')
: t('pipelines.debugDialog.botMessage')}
</div>
<div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
<div className="text-sm text-foreground/70 line-clamp-2">
{quotedMessage.message_chain
.filter((c) => c.type === 'Plain')
.map((c) => (c as Plain).text)
@@ -868,8 +834,9 @@ export default function DebugDialog({
</div>
</div>
<button
type="button"
onClick={() => setQuotedMessage(null)}
className="w-5 h-5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
className="w-5 h-5 text-muted-foreground hover:text-foreground"
>
×
</button>
@@ -877,20 +844,21 @@ export default function DebugDialog({
</div>
)}
{/* 图片预览区域 */}
{/* Image preview area */}
{selectedImages.length > 0 && (
<div className="px-4 pb-2 bg-white dark:bg-black">
<div className="px-4 pb-2">
<div className="flex gap-2 flex-wrap">
{selectedImages.map((image, index) => (
<div key={index} className="relative group">
<img
src={image.preview}
alt={`preview-${index}`}
className="w-20 h-20 object-cover rounded-lg border border-gray-300 dark:border-gray-600"
className="w-20 h-20 object-cover rounded-lg border"
/>
<button
type="button"
onClick={() => handleRemoveImage(index)}
className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
className="absolute -top-2 -right-2 w-5 h-5 bg-destructive text-destructive-foreground rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
>
×
</button>
@@ -900,17 +868,16 @@ export default function DebugDialog({
</div>
)}
<div className="p-4 pb-0 bg-white dark:bg-black flex gap-2">
<div className="p-4 pb-0 flex gap-2">
<div className="flex gap-2 items-center">
<div className="flex items-center gap-1">
<span className="text-xs text-gray-500 dark:text-gray-400">
<span className="text-xs text-muted-foreground">
{t('pipelines.debugDialog.streamOutput')}
</span>
<Switch
checked={streamOutput}
onCheckedChange={setStreamOutput}
disabled={!isConnected}
className="data-[state=checked]:bg-[#2288ee]"
/>
</div>
<input
@@ -926,22 +893,10 @@ export default function DebugDialog({
size="icon"
onClick={() => fileInputRef.current?.click()}
disabled={!isConnected || isUploading}
className="w-10 h-10 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
title="上传图片"
className="w-10 h-10 rounded-md hover:bg-accent"
title={t('pipelines.debugDialog.uploadImage')}
>
<svg
className="w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<ImageIcon className="size-5" />
</Button>
</div>
<div className="flex-1 flex items-center gap-2">
@@ -961,25 +916,23 @@ export default function DebugDialog({
: t('pipelines.debugDialog.groupChat'),
})}
disabled={!isConnected || isUploading}
className="flex-1 rounded-md px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 focus:border-[#2288ee] transition-none text-base disabled:opacity-50"
className="flex-1 rounded-md px-3 py-2 transition-none text-base disabled:opacity-50"
/>
{showAtPopover && (
<div
ref={popoverRef}
className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white dark:bg-gray-800 dark:border-gray-600 shadow-lg"
className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-popover text-popover-foreground shadow-lg"
>
<div
className={cn(
'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
isHovering
? 'bg-gray-100 dark:bg-gray-700'
: 'bg-white dark:bg-gray-800',
isHovering ? 'bg-accent' : '',
)}
onClick={handleAtSelect}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<span className="text-gray-800 dark:text-gray-200">
<span>
@websocketbot - {t('pipelines.debugDialog.atTips')}
</span>
</div>
@@ -997,16 +950,23 @@ export default function DebugDialog({
!isConnected ||
isUploading
}
className="rounded-md bg-[#2288ee] hover:bg-[#2288ee] w-20 text-white px-6 py-2 text-base font-medium transition-none flex items-center gap-2 shadow-none disabled:opacity-50"
className="rounded-md w-20 px-6 py-2 text-base font-medium transition-none flex items-center gap-2 shadow-none disabled:opacity-50"
>
{isUploading ? '上传中...' : t('pipelines.debugDialog.send')}
{isUploading ? (
t('pipelines.debugDialog.uploading')
) : (
<>
<Send className="size-4" />
{t('pipelines.debugDialog.send')}
</>
)}
</Button>
</div>
</div>
</div>
);
// 如果是嵌入模式，直接返回内容
// Embedded mode: return content directly
if (isEmbedded) {
return (
<>
@@ -1022,10 +982,10 @@ export default function DebugDialog({
);
}
// 原有的Dialog包装
// Dialog wrapper mode
return (
<>
<DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white dark:bg-black">
<DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl">
{renderContent()}
</DialogContent>
<ImagePreviewDialog
web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css
+4 -4
View File
@@ -3,7 +3,7 @@
height: 10rem;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
border: 1px solid #e4e4e7;
padding: 1rem;
cursor: pointer;
display: flex;
@@ -15,15 +15,15 @@
:global(.dark) .cardContainer {
background-color: #1f1f22;
box-shadow: 0;
border-color: #27272a;
}
.cardContainer:hover {
box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
border-color: #a1a1aa;
}
:global(.dark) .cardContainer:hover {
box-shadow: 0;
border-color: #3f3f46;
}
.basicInfoContainer {
web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+184 -145
View File
@@ -5,7 +5,6 @@ import {
PipelineConfigTab,
PipelineConfigStage,
} from '@/app/infra/entities/pipeline';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
import N8nAuthFormComponent from '@/app/home/components/dynamic-form/N8nAuthFormComponent';
import { Button } from '@/components/ui/button';
@@ -32,6 +31,8 @@ import {
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import { extractI18nObject } from '@/i18n/I18nProvider';
import { cn } from '@/lib/utils';
import { Info, Brain, Zap, Shield, FileOutput } from 'lucide-react';
export default function PipelineFormComponent({
onFinish,
@@ -49,7 +50,7 @@ export default function PipelineFormComponent({
onFinish: () => void;
onNewPipelineCreated: (pipelineId: string) => void;
onDeletePipeline: () => void;
onCancel: () => void;
onCancel?: () => void;
}) {
const { t } = useTranslation();
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -85,16 +86,52 @@ export default function PipelineFormComponent({
});
type FormValues = z.infer<typeof formSchema>;
// 这里不好，可以改成enum等
const formLabelList: FormLabel[] = isEditMode
// Section navigation items with icons
const SECTION_ICONS: Record<string, React.ElementType> = {
basic: Info,
ai: Brain,
trigger: Zap,
safety: Shield,
output: FileOutput,
};
const formLabelList: SectionItem[] = isEditMode
? [
{ label: t('pipelines.basicInfo'), name: 'basic' },
{ label: t('pipelines.aiCapabilities'), name: 'ai' },
{ label: t('pipelines.triggerConditions'), name: 'trigger' },
{ label: t('pipelines.safetyControls'), name: 'safety' },
{ label: t('pipelines.outputProcessing'), name: 'output' },
{
label: t('pipelines.basicInfo'),
name: 'basic',
icon: SECTION_ICONS.basic,
},
{
label: t('pipelines.aiCapabilities'),
name: 'ai',
icon: SECTION_ICONS.ai,
},
{
label: t('pipelines.triggerConditions'),
name: 'trigger',
icon: SECTION_ICONS.trigger,
},
{
label: t('pipelines.safetyControls'),
name: 'safety',
icon: SECTION_ICONS.safety,
},
{
label: t('pipelines.outputProcessing'),
name: 'output',
icon: SECTION_ICONS.output,
},
]
: [{ label: t('pipelines.basicInfo'), name: 'basic' }];
: [
{
label: t('pipelines.basicInfo'),
name: 'basic',
icon: SECTION_ICONS.basic,
},
];
const [activeSection, setActiveSection] = useState(formLabelList[0].name);
const [aiConfigTabSchema, setAIConfigTabSchema] =
useState<PipelineConfigTab>();
@@ -269,12 +306,12 @@ export default function PipelineFormComponent({
stage: PipelineConfigStage,
formName: keyof FormValues,
) {
// 如果是 AI 配置，需要特殊处理
// Special handling for AI config section
if (formName === 'ai') {
// 获取当前选择的 runner
// Get the currently selected runner
const currentRunner = form.watch('ai.runner.runner');
// 如果是 runner 配置项，直接渲染
// If this is the runner selector stage, render it directly
if (stage.name === 'runner') {
return (
<div key={stage.name} className="space-y-4 mb-6">
@@ -282,7 +319,7 @@ export default function PipelineFormComponent({
{extractI18nObject(stage.label)}
</div>
{stage.description && (
<div className="text-sm text-gray-500">
<div className="text-sm text-muted-foreground">
{extractI18nObject(stage.description)}
</div>
)}
@@ -301,12 +338,12 @@ export default function PipelineFormComponent({
);
}
// 如果不是当前选择的 runner 对应的配置项，则不渲染
// Do not render if not the currently selected runner
if (stage.name !== currentRunner) {
return null;
}
// 对于n8n-service-api配置，使用N8nAuthFormComponent处理表单联动
// For n8n-service-api config, use N8nAuthFormComponent for form linkage
if (stage.name === 'n8n-service-api') {
return (
<div key={stage.name} className="space-y-4 mb-6">
@@ -314,7 +351,7 @@ export default function PipelineFormComponent({
{extractI18nObject(stage.label)}
</div>
{stage.description && (
<div className="text-sm text-gray-500">
<div className="text-sm text-muted-foreground">
{extractI18nObject(stage.description)}
</div>
)}
@@ -340,7 +377,7 @@ export default function PipelineFormComponent({
{extractI18nObject(stage.label)}
</div>
{stage.description && (
<div className="text-sm text-gray-500">
<div className="text-sm text-muted-foreground">
{extractI18nObject(stage.description)}
</div>
)}
@@ -389,7 +426,7 @@ export default function PipelineFormComponent({
onFinish();
toast.success(t('common.copySuccess'));
setShowCopyConfirm(false);
onCancel();
onCancel?.();
})
.catch((err) => {
toast.error(t('pipelines.createError') + err.msg);
@@ -399,140 +436,144 @@ export default function PipelineFormComponent({
return (
<>
<div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white dark:bg-black">
<div className="h-full p-0 flex flex-col">
<Form {...form}>
<form
id="pipeline-form"
onSubmit={form.handleSubmit(handleFormSubmit)}
className="h-full flex flex-col flex-1 min-h-0 mb-2"
>
<div className="flex-1 flex flex-col min-h-0">
<Tabs
defaultValue={formLabelList[0].name}
className="h-full flex flex-col flex-1 min-h-0"
>
<TabsList>
{formLabelList.map((formLabel) => (
<TabsTrigger key={formLabel.name} value={formLabel.name}>
{formLabel.label}
</TabsTrigger>
))}
</TabsList>
<div
id="pipeline-form-content"
className="flex-1 overflow-y-auto min-h-0"
>
{formLabelList.map((formLabel) => (
<TabsContent
key={formLabel.name}
value={formLabel.name}
className="overflow-y-auto max-h-full"
>
{formLabel.name === 'basic' && (
<div className="space-y-6">
{/* Name and Emoji in same row */}
<div className="flex gap-4 items-start">
<FormField
control={form.control}
name="basic.name"
render={({ field }) => (
<FormItem className="flex-1">
<FormLabel>
{t('common.name')}
<span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="basic.emoji"
render={({ field }) => (
<FormItem>
<FormLabel>{t('common.icon')}</FormLabel>
<FormControl>
<EmojiPicker
value={field.value}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="basic.description"
render={({ field }) => (
<FormItem>
<FormLabel>
{t('common.description')}
<span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
<div className="flex-1 flex min-h-0">
{/* Vertical section navigation (only show when multiple sections) */}
{formLabelList.length > 1 && (
<nav className="w-44 shrink-0 pr-4 mr-4 border-r overflow-y-auto">
<ul className="space-y-1">
{formLabelList.map((section) => {
const Icon = section.icon;
return (
<li key={section.name}>
<button
type="button"
onClick={() => setActiveSection(section.name)}
className={cn(
'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left',
activeSection === section.name
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-muted hover:text-foreground',
)}
/>
</div>
>
<Icon className="size-4 shrink-0" />
{section.label}
</button>
</li>
);
})}
</ul>
</nav>
)}
{/* Content panel */}
<div className="flex-1 overflow-y-auto min-h-0">
{/* Basic info section */}
{activeSection === 'basic' && (
<div className="space-y-6">
{/* Name and Emoji in same row */}
<div className="flex gap-4 items-start">
<FormField
control={form.control}
name="basic.name"
render={({ field }) => (
<FormItem className="flex-1">
<FormLabel>
{t('common.name')}
<span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="basic.emoji"
render={({ field }) => (
<FormItem>
<FormLabel>{t('common.icon')}</FormLabel>
<FormControl>
<EmojiPicker
value={field.value}
onChange={field.onChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="basic.description"
render={({ field }) => (
<FormItem>
<FormLabel>
{t('common.description')}
<span className="text-red-500">*</span>
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
)}
{isEditMode && (
<>
{formLabel.name === 'ai' && aiConfigTabSchema && (
<div className="space-y-6">
{aiConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'ai'),
)}
</div>
)}
{/* Dynamic config sections (edit mode only) */}
{isEditMode && (
<>
{activeSection === 'ai' && aiConfigTabSchema && (
<div className="space-y-6">
{aiConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'ai'),
)}
</div>
)}
{formLabel.name === 'trigger' &&
triggerConfigTabSchema && (
<div className="space-y-6">
{triggerConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'trigger'),
)}
</div>
)}
{activeSection === 'trigger' && triggerConfigTabSchema && (
<div className="space-y-6">
{triggerConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'trigger'),
)}
</div>
)}
{formLabel.name === 'safety' &&
safetyConfigTabSchema && (
<div className="space-y-6">
{safetyConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'safety'),
)}
</div>
)}
{activeSection === 'safety' && safetyConfigTabSchema && (
<div className="space-y-6">
{safetyConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'safety'),
)}
</div>
)}
{formLabel.name === 'output' &&
outputConfigTabSchema && (
<div className="space-y-6">
{outputConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'output'),
)}
</div>
)}
</>
)}
</TabsContent>
))}
</div>
</Tabs>
{activeSection === 'output' && outputConfigTabSchema && (
<div className="space-y-6">
{outputConfigTabSchema.stages.map((stage) =>
renderDynamicForms(stage, 'output'),
)}
</div>
)}
</>
)}
</div>
</div>
</form>
{/* 按钮栏移到 Tabs 外部，始终固定底部 */}
{/* Button bar pinned to bottom */}
{showButtons && (
<div className="flex justify-end items-center gap-2 pt-4 border-t mb-0 bg-white dark:bg-black sticky bottom-0 z-10">
<div className="flex justify-end items-center gap-2 pt-4 border-t mb-0 sticky bottom-0 z-10">
{isEditMode && hasUnsavedChanges && (
<div className="text-amber-600 dark:text-amber-400 text-sm flex items-center gap-1.5 mr-auto">
<span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-500" />
@@ -551,7 +592,7 @@ export default function PipelineFormComponent({
)}
{isEditMode && isDefaultPipeline && (
<div className="text-gray-500 text-sm h-full flex items-center mr-2">
<div className="text-muted-foreground text-sm h-full flex items-center mr-2">
{t('pipelines.defaultPipelineCannotDelete')}
</div>
)}
@@ -570,15 +611,12 @@ export default function PipelineFormComponent({
<Button type="submit" form="pipeline-form">
{isEditMode ? t('common.save') : t('common.submit')}
</Button>
<Button type="button" variant="outline" onClick={onCancel}>
{t('common.cancel')}
</Button>
</div>
)}
</Form>
</div>
{/* 删除确认对话框 */}
{/* Delete confirmation dialog */}
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
<DialogContent>
<DialogHeader>
@@ -599,7 +637,7 @@ export default function PipelineFormComponent({
</DialogContent>
</Dialog>
{/* 复制确认对话框 */}
{/* Copy confirmation dialog */}
<Dialog open={showCopyConfirm} onOpenChange={setShowCopyConfirm}>
<DialogContent>
<DialogHeader>
@@ -617,7 +655,8 @@ export default function PipelineFormComponent({
</>
);
}
interface FormLabel {
interface SectionItem {
label: string;
name: string;
icon: React.ElementType;
}
web/src/app/home/pipelines/components/pipeline-form/pipelineFormStyle.module.css
-12
View File
@@ -1,12 +0,0 @@
.formItemSubtitle {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.changeFormButtonGroupContainer {
width: 320px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
web/src/app/home/pipelines/page.tsx
+10 -184
View File
@@ -1,195 +1,21 @@
'use client';
import { useState, useEffect } from 'react';
import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
import { httpClient } from '@/app/infra/http/HttpClient';
import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
import styles from './pipelineConfig.module.css';
import { toast } from 'sonner';
import { useSearchParams } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import PipelineDialog from './PipelineDetailDialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { systemInfo } from '@/app/infra/http';
import PipelineDetailContent from './PipelineDetailContent';
export default function PluginConfigPage() {
export default function PipelineConfigPage() {
const { t } = useTranslation();
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
const [isEditForm, setIsEditForm] = useState(false);
const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
const [selectedPipelineId, setSelectedPipelineId] = useState('');
const [sortByValue, setSortByValue] = useState<string>('created_at');
const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
const searchParams = useSearchParams();
const detailId = searchParams.get('id');
useEffect(() => {
// Load sort preference from localStorage
const savedSortBy = localStorage.getItem('pipeline_sort_by');
const savedSortOrder = localStorage.getItem('pipeline_sort_order');
if (savedSortBy && savedSortOrder) {
setSortByValue(savedSortBy);
setSortOrderValue(savedSortOrder);
getPipelines(savedSortBy, savedSortOrder);
} else {
getPipelines();
}
}, []);
function getPipelines(
sortBy: string = sortByValue,
sortOrder: string = sortOrderValue,
) {
httpClient
.getPipelines(sortBy, sortOrder)
.then((value) => {
const currentTime = new Date();
const pipelineList = value.pipelines.map((pipeline) => {
const lastUpdatedTimeAgo = Math.floor(
(currentTime.getTime() -
new Date(
pipeline.updated_at ?? currentTime.getTime(),
).getTime()) /
1000 /
60 /
60 /
24,
);
const lastUpdatedTimeAgoText =
lastUpdatedTimeAgo > 0
? ` ${lastUpdatedTimeAgo} ${t('pipelines.daysAgo')}`
: t('pipelines.today');
return new PipelineCardVO({
lastUpdatedTimeAgo: lastUpdatedTimeAgoText,
description: pipeline.description,
id: pipeline.uuid ?? '',
name: pipeline.name,
emoji: pipeline.emoji,
isDefault: pipeline.is_default ?? false,
});
});
setPipelineList(pipelineList);
})
.catch((error) => {
toast.error(t('pipelines.getPipelineListError') + error.message);
});
}
const handlePipelineClick = (pipelineId: string) => {
setSelectedPipelineId(pipelineId);
setIsEditForm(true);
setDialogOpen(true);
};
const handleCreateNew = () => {
const maxPipelines = systemInfo.limitation?.max_pipelines ?? -1;
if (maxPipelines >= 0 && pipelineList.length >= maxPipelines) {
toast.error(t('limitation.maxPipelinesReached', { max: maxPipelines }));
return;
}
setIsEditForm(false);
setSelectedPipelineId('');
setDialogOpen(true);
};
function handleSortChange(value: string) {
const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
setSortByValue(newSortBy);
setSortOrderValue(newSortOrder);
// Save sort preference to localStorage
localStorage.setItem('pipeline_sort_by', newSortBy);
localStorage.setItem('pipeline_sort_order', newSortOrder);
getPipelines(newSortBy, newSortOrder);
if (detailId) {
return <PipelineDetailContent id={detailId} />;
}
return (
<div className={styles.configPageContainer}>
<PipelineDialog
open={dialogOpen}
onOpenChange={setDialogOpen}
pipelineId={selectedPipelineId || undefined}
isEditMode={isEditForm}
onFinish={() => {
getPipelines();
}}
onNewPipelineCreated={(pipelineId) => {
getPipelines();
setSelectedPipelineId(pipelineId);
setIsEditForm(true);
setDialogOpen(true);
}}
onDeletePipeline={() => {
getPipelines();
setDialogOpen(false);
}}
onCancel={() => {
setDialogOpen(false);
}}
/>
<div className="flex flex-row justify-between items-center mb-4 px-[0.8rem]">
<Select
value={`${sortByValue},${sortOrderValue}`}
onValueChange={handleSortChange}
>
<SelectTrigger className="w-[180px] cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('pipelines.sortBy')} />
</SelectTrigger>
<SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem
value="created_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.newestCreated')}
</SelectItem>
<SelectItem
value="created_at,ASC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.earliestCreated')}
</SelectItem>
<SelectItem
value="updated_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.recentlyEdited')}
</SelectItem>
<SelectItem
value="updated_at,ASC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.earliestEdited')}
</SelectItem>
</SelectContent>
</Select>
</div>
<div className={styles.pipelineListContainer}>
<CreateCardComponent
width={'100%'}
height={'10rem'}
plusSize={'90px'}
onClick={handleCreateNew}
/>
{pipelineList.map((pipeline) => {
return (
<div
key={pipeline.id}
onClick={() => handlePipelineClick(pipeline.id)}
>
<PipelineCard cardVO={pipeline} />
</div>
);
})}
</div>
<div className="flex h-full items-center justify-center text-muted-foreground">
<p>{t('pipelines.selectFromSidebar')}</p>
</div>
);
}