Perf/combine entity dialogs (#1555)

* feat: combine bot settings and bot log dialogs

* perf: dialog style when creating bot

* perf: bot creation dialog

* feat: combine pipeline dialogs

* perf: ui

* perf: move buttons

* perf: ui layout in pipeline detail dialog

* perf: remove debug button from pipeline card

* perf: open pipeline dialog after creating

* perf: placeholder in send input

* perf: no close dialog when save done

* fix: linter errors

web/src/app/home/bots/BotDetailDialog.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from '@/components/ui/sidebar';
+import { Button } from '@/components/ui/button';
+import BotForm from '@/app/home/bots/components/bot-form/BotForm';
+import { BotLogListComponent } from '@/app/home/bots/components/bot-log/view/BotLogListComponent';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+interface BotDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  botId?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onFormSubmit: (value: z.infer<any>) => void;
+  onFormCancel: () => void;
+  onBotDeleted: () => void;
+  onNewBotCreated: (botId: string) => void;
+}
+
+export default function BotDetailDialog({
+  open,
+  onOpenChange,
+  botId: propBotId,
+  onFormSubmit,
+  onFormCancel,
+  onBotDeleted,
+  onNewBotCreated,
+}: BotDetailDialogProps) {
+  const { t } = useTranslation();
+  const [botId, setBotId] = useState<string | undefined>(propBotId);
+  const [activeMenu, setActiveMenu] = useState('config');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  useEffect(() => {
+    setBotId(propBotId);
+    setActiveMenu('config');
+  }, [propBotId, open]);
+
+  const menu = [
+    {
+      key: 'config',
+      label: t('bots.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: 'logs',
+      label: t('bots.logs'),
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
+        </svg>
+      ),
+    },
+  ];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFormSubmit = (value: any) => {
+    onFormSubmit(value);
+  };
+
+  const handleFormCancel = () => {
+    onFormCancel();
+  };
+
+  const handleBotDeleted = () => {
+    httpClient.deleteBot(botId ?? '').then(() => {
+      onBotDeleted();
+    });
+  };
+
+  const handleNewBotCreated = (newBotId: string) => {
+    setBotId(newBotId);
+    setActiveMenu('config');
+    onNewBotCreated(newBotId);
+  };
+
+  const handleDelete = () => {
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDelete = () => {
+    handleBotDeleted();
+    setShowDeleteConfirm(false);
+  };
+
+  if (!botId) {
+    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('bots.createBot')}</DialogTitle>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto px-6 pb-6">
+                <BotForm
+                  initBotId={undefined}
+                  onFormSubmit={handleFormSubmit}
+                  onFormCancel={handleFormCancel}
+                  onBotDeleted={handleBotDeleted}
+                  onNewBotCreated={handleNewBotCreated}
+                  hideButtons={true}
+                />
+              </div>
+              <DialogFooter className="px-6 py-4 border-t shrink-0">
+                <div className="flex justify-end gap-2">
+                  <Button type="submit" form="bot-form">
+                    {t('common.submit')}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleFormCancel}
+                  >
+                    {t('common.cancel')}
+                  </Button>
+                </div>
+              </DialogFooter>
+            </main>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="overflow-hidden p-0 !max-w-[50rem] max-h-[75vh] flex">
+          <SidebarProvider className="items-start w-full flex">
+            <Sidebar
+              collapsible="none"
+              className="hidden md:flex h-[80vh] w-40 min-w-[120px] border-r bg-white"
+            >
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      {menu.map((item) => (
+                        <SidebarMenuItem key={item.key}>
+                          <SidebarMenuButton
+                            asChild
+                            isActive={activeMenu === item.key}
+                            onClick={() => setActiveMenu(item.key)}
+                          >
+                            <a href="#">
+                              {item.icon}
+                              <span>{item.label}</span>
+                            </a>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+            </Sidebar>
+            <main className="flex flex-1 flex-col h-[75vh]">
+              <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
+                <DialogTitle>
+                  {activeMenu === 'config'
+                    ? t('bots.editBot')
+                    : t('bots.botLogTitle')}
+                </DialogTitle>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto px-6 pb-6">
+                {activeMenu === 'config' && (
+                  <BotForm
+                    initBotId={botId}
+                    onFormSubmit={handleFormSubmit}
+                    onFormCancel={handleFormCancel}
+                    onBotDeleted={handleBotDeleted}
+                    onNewBotCreated={handleNewBotCreated}
+                    hideButtons={true}
+                  />
+                )}
+                {activeMenu === 'logs' && botId && (
+                  <BotLogListComponent botId={botId} />
+                )}
+              </div>
+              {activeMenu === 'config' && (
+                <DialogFooter className="px-6 py-4 border-t shrink-0">
+                  <div className="flex justify-end gap-2">
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      onClick={handleDelete}
+                    >
+                      {t('common.delete')}
+                    </Button>
+                    <Button type="submit" form="bot-form">
+                      {t('common.save')}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={handleFormCancel}
+                    >
+                      {t('common.cancel')}
+                    </Button>
+                  </div>
+                </DialogFooter>
+              )}
+            </main>
+          </SidebarProvider>
+        </DialogContent>
+      </Dialog>
+
+      {/* 删除确认对话框 */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">{t('bots.deleteConfirmation')}</div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/bots/components/bot-card/BotCard.tsx

@@ -4,21 +4,15 @@ import { httpClient } from '@/app/infra/http/HttpClient';
 import { Switch } from '@/components/ui/switch';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
 
 export default function BotCard({
   botCardVO,
-  clickLogIconCallback,
   setBotEnableCallback,
 }: {
   botCardVO: BotCardVO;
-  clickLogIconCallback: (id: string) => void;
   setBotEnableCallback: (id: string, enable: boolean) => void;
 }) {
   const { t } = useTranslation();
-  function onClickLogIcon() {
-    clickLogIconCallback(botCardVO.id);
-  }
 
   function setBotEnable(enable: boolean) {
     return httpClient.updateBot(botCardVO.id, {
@@ -93,25 +87,6 @@ export default function BotCard({
               e.stopPropagation();
             }}
           />
-          <Button
-            variant="outline"
-            className="w-auto h-[40px]"
-            onClick={(e) => {
-              onClickLogIcon();
-              e.stopPropagation();
-            }}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              width="48"
-              height="48"
-              fill="currentColor"
-            >
-              <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
-            </svg>
-            {t('bots.log')}
-          </Button>
         </div>
       </div>
     </div>

web/src/app/home/bots/components/bot-form/BotForm.tsx

@@ -67,12 +67,14 @@ export default function BotForm({
   onFormCancel,
   onBotDeleted,
   onNewBotCreated,
+  hideButtons = false,
 }: {
   initBotId?: string;
   onFormSubmit: (value: z.infer<ReturnType<typeof getFormSchema>>) => void;
   onFormCancel: () => void;
   onBotDeleted: () => void;
   onNewBotCreated: (botId: string) => void;
+  hideButtons?: boolean;
 }) {
   const { t } = useTranslation();
   const formSchema = getFormSchema(t);
@@ -282,7 +284,7 @@ export default function BotForm({
         })
         .finally(() => {
           setIsLoading(false);
-          form.reset();
+          // form.reset();
           // dynamicForm.resetFields();
         });
     } else {
@@ -314,8 +316,6 @@ export default function BotForm({
           // dynamicForm.resetFields();
         });
     }
-    setShowDynamicForm(false);
-    console.log('set loading', false);
   }
 
   function deleteBot() {
@@ -365,6 +365,7 @@ export default function BotForm({
 
       <Form {...form}>
         <form
+          id="bot-form"
           onSubmit={form.handleSubmit(onDynamicFormSubmit)}
           className="space-y-8"
         >
@@ -527,42 +528,44 @@ export default function BotForm({
             )}
           </div>
 
-          <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
-            <div className="flex justify-end gap-2">
-              {!initBotId && (
-                <Button
-                  type="submit"
-                  onClick={form.handleSubmit(onDynamicFormSubmit)}
-                >
-                  {t('common.submit')}
-                </Button>
-              )}
-              {initBotId && (
-                <>
+          {!hideButtons && (
+            <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
+              <div className="flex justify-end gap-2">
+                {!initBotId && (
                   <Button
-                    type="button"
-                    variant="destructive"
-                    onClick={() => setShowDeleteConfirmModal(true)}
-                  >
-                    {t('common.delete')}
-                  </Button>
-                  <Button
-                    type="button"
+                    type="submit"
                     onClick={form.handleSubmit(onDynamicFormSubmit)}
                   >
-                    {t('common.save')}
+                    {t('common.submit')}
                   </Button>
-                </>
-              )}
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onFormCancel()}
-              >
-                {t('common.cancel')}
-              </Button>
+                )}
+                {initBotId && (
+                  <>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      onClick={() => setShowDeleteConfirmModal(true)}
+                    >
+                      {t('common.delete')}
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={form.handleSubmit(onDynamicFormSubmit)}
+                    >
+                      {t('common.save')}
+                    </Button>
+                  </>
+                )}
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => onFormCancel()}
+                >
+                  {t('common.cancel')}
+                </Button>
+              </div>
             </div>
-          </div>
+          )}
         </form>
       </Form>
     </div>

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { BotLogManager } from '@/app/home/bots/bot-log/BotLogManager';
+import { BotLogManager } from '@/app/home/bots/components/bot-log/BotLogManager';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
-import { BotLogCard } from '@/app/home/bots/bot-log/view/BotLogCard';
+import { BotLogCard } from '@/app/home/bots/components/bot-log/view/BotLogCard';
 import styles from './botLog.module.css';
 import { Switch } from '@/components/ui/switch';
 import { debounce } from 'lodash';
@@ -112,10 +112,7 @@ export function BotLogListComponent({ botId }: { botId: string }) {
   );
 
   return (
-    <div
-      className={`${styles.botLogListContainer} px-6`}
-      ref={listContainerRef}
-    >
+    <div className={`${styles.botLogListContainer}`} ref={listContainerRef}>
       <div className={`${styles.listHeader}`}>
         <div className={'mr-2'}>{t('bots.enableAutoRefresh')}</div>
         <Switch checked={autoFlush} onCheckedChange={(e) => setAutoFlush(e)} />

web/src/app/home/bots/page.tsx

@@ -3,32 +3,21 @@
 import { useEffect, useState } from 'react';
 import styles from './botConfig.module.css';
 import { BotCardVO } from '@/app/home/bots/components/bot-card/BotCardVO';
-import BotForm from '@/app/home/bots/components/bot-form/BotForm';
 import BotCard from '@/app/home/bots/components/bot-card/BotCard';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { Bot, Adapter } from '@/app/infra/entities/api';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { i18nObj } from '@/i18n/I18nProvider';
-import { BotLogListComponent } from '@/app/home/bots/bot-log/view/BotLogListComponent';
+import BotDetailDialog from '@/app/home/bots/BotDetailDialog';
 
 export default function BotConfigPage() {
   const { t } = useTranslation();
-  // 编辑机器人的modal
-  const [modalOpen, setModalOpen] = useState<boolean>(false);
-  // 机器人日志的modal
-  const [logModalOpen, setLogModalOpen] = useState<boolean>(false);
+  // 机器人详情dialog
+  const [detailDialogOpen, setDetailDialogOpen] = useState<boolean>(false);
   const [botList, setBotList] = useState<BotCardVO[]>([]);
-  const [isEditForm, setIsEditForm] = useState(false);
-  const [nowSelectedBotUUID, setNowSelectedBotUUID] = useState<string>();
-  const [nowSelectedBotLog, setNowSelectedBotLog] = useState<string>();
+  const [selectedBotId, setSelectedBotId] = useState<string>('');
 
   useEffect(() => {
     getBotList();
@@ -73,61 +62,46 @@ export default function BotConfigPage() {
   }
 
   function handleCreateBotClick() {
-    setIsEditForm(false);
-    setNowSelectedBotUUID('');
-    setModalOpen(true);
+    setSelectedBotId('');
+    setDetailDialogOpen(true);
   }
 
   function selectBot(botUUID: string) {
-    setNowSelectedBotUUID(botUUID);
-    setIsEditForm(true);
-    setModalOpen(true);
+    setSelectedBotId(botUUID);
+    setDetailDialogOpen(true);
   }
 
-  function onClickLogIcon(botId: string) {
-    setNowSelectedBotLog(botId);
-    setLogModalOpen(true);
+  function handleFormSubmit() {
+    getBotList();
+    // setDetailDialogOpen(false);
+  }
+
+  function handleFormCancel() {
+    setDetailDialogOpen(false);
+  }
+
+  function handleBotDeleted() {
+    getBotList();
+    setDetailDialogOpen(false);
+  }
+
+  function handleNewBotCreated(botId: string) {
+    console.log('new bot created', botId);
+    getBotList();
+    setSelectedBotId(botId);
   }
 
   return (
     <div className={styles.configPageContainer}>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
-          <DialogHeader className="px-6 pt-6 pb-4">
-            <DialogTitle>
-              {isEditForm ? t('bots.editBot') : t('bots.createBot')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="flex-1 overflow-y-auto px-6">
-            <BotForm
-              initBotId={nowSelectedBotUUID}
-              onFormSubmit={() => {
-                getBotList();
-                setModalOpen(false);
-              }}
-              onFormCancel={() => setModalOpen(false)}
-              onBotDeleted={() => {
-                getBotList();
-                setModalOpen(false);
-              }}
-              onNewBotCreated={(botId) => {
-                console.log('new bot created', botId);
-                getBotList();
-                selectBot(botId);
-              }}
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={logModalOpen} onOpenChange={setLogModalOpen}>
-        <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
-          <DialogHeader className="px-6 pt-6 pb-0">
-            <DialogTitle>{t('bots.botLogTitle')}</DialogTitle>
-          </DialogHeader>
-          <BotLogListComponent botId={nowSelectedBotLog || ''} />
-        </DialogContent>
-      </Dialog>
+      <BotDetailDialog
+        open={detailDialogOpen}
+        onOpenChange={setDetailDialogOpen}
+        botId={selectedBotId || undefined}
+        onFormSubmit={handleFormSubmit}
+        onFormCancel={handleFormCancel}
+        onBotDeleted={handleBotDeleted}
+        onNewBotCreated={handleNewBotCreated}
+      />
 
       {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
       <div className={`${styles.botListContainer}`}>
@@ -147,9 +121,6 @@ export default function BotConfigPage() {
             >
               <BotCard
                 botCardVO={cardVO}
-                clickLogIconCallback={(id) => {
-                  onClickLogIcon(id);
-                }}
                 setBotEnableCallback={(id, enable) => {
                   setBotList(
                     botList.map((bot) => {

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+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 { PipelineFormEntity } from '@/app/infra/entities/pipeline';
+
+interface PipelineDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pipelineId?: string;
+  isEditMode?: boolean;
+  isDefaultPipeline?: boolean;
+  initValues?: PipelineFormEntity;
+  onFinish: () => void;
+  onNewPipelineCreated?: (pipelineId: string) => void;
+  onDeletePipeline: () => void;
+  onCancel: () => void;
+}
+
+type DialogMode = 'config' | 'debug';
+
+export default function PipelineDialog({
+  open,
+  onOpenChange,
+  pipelineId: propPipelineId,
+  isEditMode = false,
+  isDefaultPipeline = false,
+  initValues,
+  onFinish,
+  onNewPipelineCreated,
+  onDeletePipeline,
+  onCancel,
+}: PipelineDialogProps) {
+  const { t } = useTranslation();
+  const [pipelineId, setPipelineId] = useState<string | undefined>(
+    propPipelineId,
+  );
+  const [currentMode, setCurrentMode] = useState<DialogMode>('config');
+
+  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: '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>
+      ),
+    },
+  ];
+
+  const getDialogTitle = () => {
+    if (currentMode === 'config') {
+      return isEditMode
+        ? t('pipelines.editPipeline')
+        : t('pipelines.createPipeline');
+    }
+    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
+                initValues={initValues}
+                isDefaultPipeline={isDefaultPipeline}
+                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-[50rem] 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"
+          >
+            <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"
+              style={{ height: '4rem' }}
+            >
+              <DialogTitle>{getDialogTitle()}</DialogTitle>
+            </DialogHeader>
+            <div
+              className="flex-1 auto px-6 pb-4 w-full"
+              style={{ height: 'calc(100% - 4rem)' }}
+            >
+              {currentMode === 'config' && (
+                <PipelineFormComponent
+                  initValues={initValues}
+                  isDefaultPipeline={isDefaultPipeline}
+                  onFinish={handleFinish}
+                  onNewPipelineCreated={handleNewPipelineCreated}
+                  isEditMode={isEditMode}
+                  pipelineId={pipelineId}
+                  disableForm={false}
+                  showButtons={true}
+                  onDeletePipeline={onDeletePipeline}
+                  onCancel={() => {
+                    onCancel();
+                  }}
+                />
+              )}
+              {currentMode === 'debug' && pipelineId && (
+                <DebugDialog
+                  open={true}
+                  pipelineId={pipelineId}
+                  isEmbedded={true}
+                />
+              )}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx

@@ -0,0 +1,376 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { Message } from '@/app/infra/entities/message';
+import { toast } from 'sonner';
+import AtBadge from './AtBadge';
+
+interface MessageComponent {
+  type: 'At' | 'Plain';
+  target?: string;
+  text?: string;
+}
+
+interface DebugDialogProps {
+  open: boolean;
+  pipelineId: string;
+  isEmbedded?: boolean;
+}
+
+export default function DebugDialog({
+  open,
+  pipelineId,
+  isEmbedded = false,
+}: DebugDialogProps) {
+  const { t } = useTranslation();
+  const [selectedPipelineId, setSelectedPipelineId] = useState(pipelineId);
+  const [sessionType, setSessionType] = useState<'person' | 'group'>('person');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [showAtPopover, setShowAtPopover] = useState(false);
+  const [hasAt, setHasAt] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    if (open) {
+      setSelectedPipelineId(pipelineId);
+      loadMessages(pipelineId);
+    }
+  }, [open, pipelineId]);
+
+  useEffect(() => {
+    if (open) {
+      loadMessages(selectedPipelineId);
+    }
+  }, [sessionType, selectedPipelineId]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        !inputRef.current?.contains(event.target as Node)
+      ) {
+        setShowAtPopover(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (showAtPopover) {
+      setIsHovering(true);
+    }
+  }, [showAtPopover]);
+
+  const loadMessages = async (pipelineId: string) => {
+    try {
+      const response = await httpClient.getWebChatHistoryMessages(
+        pipelineId,
+        sessionType,
+      );
+      setMessages(response.messages);
+    } catch (error) {
+      console.error('Failed to load messages:', error);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (sessionType === 'group') {
+      if (value.endsWith('@')) {
+        setShowAtPopover(true);
+      } else if (showAtPopover && (!value.includes('@') || value.length > 1)) {
+        setShowAtPopover(false);
+      }
+    }
+    setInputValue(value);
+  };
+
+  const handleAtSelect = () => {
+    setHasAt(true);
+    setShowAtPopover(false);
+    setInputValue(inputValue.slice(0, -1));
+  };
+
+  const handleAtRemove = () => {
+    setHasAt(false);
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (showAtPopover) {
+        handleAtSelect();
+      } else {
+        sendMessage();
+      }
+    } else if (e.key === 'Backspace' && hasAt && inputValue === '') {
+      handleAtRemove();
+    }
+  };
+
+  const sendMessage = async () => {
+    if (!inputValue.trim() && !hasAt) return;
+
+    try {
+      const messageChain = [];
+
+      let text_content = inputValue.trim();
+      if (hasAt) {
+        text_content = ' ' + text_content;
+      }
+
+      if (hasAt) {
+        messageChain.push({
+          type: 'At',
+          target: 'webchatbot',
+        });
+      }
+      messageChain.push({
+        type: 'Plain',
+        text: text_content,
+      });
+
+      if (hasAt) {
+        // for showing
+        text_content = '@webchatbot' + text_content;
+      }
+
+      const userMessage: Message = {
+        id: -1,
+        role: 'user',
+        content: text_content,
+        timestamp: new Date().toISOString(),
+        message_chain: messageChain,
+      };
+
+      setMessages((prevMessages) => [...prevMessages, userMessage]);
+      setInputValue('');
+      setHasAt(false);
+
+      const response = await httpClient.sendWebChatMessage(
+        sessionType,
+        messageChain,
+        selectedPipelineId,
+        120000,
+      );
+
+      setMessages((prevMessages) => [...prevMessages, response.message]);
+    } catch (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      error: any
+    ) {
+      console.log(error, 'type of error', typeof error);
+      console.error('Failed to send message:', error);
+
+      if (!error.message.includes('timeout') && sessionType === 'person') {
+        toast.error(t('pipelines.debugDialog.sendFailed'));
+      }
+    } finally {
+      inputRef.current?.focus();
+    }
+  };
+
+  const renderMessageContent = (message: Message) => {
+    return (
+      <span className="text-base leading-relaxed align-middle whitespace-pre-wrap">
+        {(message.message_chain as MessageComponent[]).map(
+          (component, index) => {
+            if (component.type === 'At') {
+              return (
+                <AtBadge
+                  key={index}
+                  targetName={component.target || ''}
+                  readonly={true}
+                />
+              );
+            } else if (component.type === 'Plain') {
+              return <span key={index}>{component.text}</span>;
+            }
+            return null;
+          },
+        )}
+      </span>
+    );
+  };
+
+  const renderContent = () => (
+    <div className="flex flex-1 h-full min-h-0">
+      <div className="w-14 bg-white p-2 pl-0  flex-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 ${
+            sessionType === 'person'
+              ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
+              : 'bg-white text-gray-800 hover:bg-gray-100'
+          } border-0 shadow-none`}
+          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>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`w-10 h-10 justify-center rounded-md transition-none ${
+            sessionType === 'group'
+              ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
+              : 'bg-white text-gray-800 hover:bg-gray-100'
+          } border-0 shadow-none`}
+          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>
+        </Button>
+        <div className="flex-1" />
+      </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">
+          <div className="space-y-6">
+            {messages.length === 0 ? (
+              <div className="text-center text-muted-foreground py-12 text-lg">
+                {t('pipelines.debugDialog.noMessages')}
+              </div>
+            ) : (
+              messages.map((message) => (
+                <div
+                  key={message.id + message.timestamp}
+                  className={cn(
+                    'flex',
+                    message.role === 'user' ? 'justify-end' : 'justify-start',
+                  )}
+                >
+                  <div
+                    className={cn(
+                      'max-w-md px-5 py-3 rounded-2xl',
+                      message.role === 'user'
+                        ? 'bg-[#2288ee] text-white rounded-br-none'
+                        : 'bg-gray-100 text-gray-900 rounded-bl-none',
+                    )}
+                  >
+                    {renderMessageContent(message)}
+                    <div
+                      className={cn(
+                        'text-xs mt-2',
+                        message.role === 'user'
+                          ? 'text-white/70'
+                          : 'text-gray-500',
+                      )}
+                    >
+                      {message.role === 'user'
+                        ? t('pipelines.debugDialog.userMessage')
+                        : t('pipelines.debugDialog.botMessage')}
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+        </ScrollArea>
+
+        <div className="p-4 pb-0 bg-white flex gap-2">
+          <div className="flex-1 flex items-center gap-2">
+            {hasAt && (
+              <AtBadge targetName="webchatbot" onRemove={handleAtRemove} />
+            )}
+            <div className="relative flex-1">
+              <Input
+                ref={inputRef}
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyPress={handleKeyPress}
+                placeholder={t('pipelines.debugDialog.inputPlaceholder', {
+                  type:
+                    sessionType === 'person'
+                      ? t('pipelines.debugDialog.privateChat')
+                      : t('pipelines.debugDialog.groupChat'),
+                })}
+                className="flex-1 rounded-md px-3 py-2 border border-gray-300 focus:border-[#2288ee] transition-none text-base"
+              />
+              {showAtPopover && (
+                <div
+                  ref={popoverRef}
+                  className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white shadow-lg"
+                >
+                  <div
+                    className={cn(
+                      'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
+                      isHovering ? 'bg-gray-100' : 'bg-white',
+                    )}
+                    onClick={handleAtSelect}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                  >
+                    <span>
+                      @webchatbot - {t('pipelines.debugDialog.atTips')}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <Button
+            onClick={sendMessage}
+            disabled={!inputValue.trim() && !hasAt}
+            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"
+          >
+            <>{t('pipelines.debugDialog.send')}</>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  // 如果是嵌入模式，直接返回内容
+  if (isEmbedded) {
+    return (
+      <div className="flex flex-col h-full min-h-0">
+        <div className="flex-1 min-h-0 flex flex-col">{renderContent()}</div>
+      </div>
+    );
+  }
+
+  // 原有的Dialog包装
+  return (
+    <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white">
+      {renderContent()}
+    </DialogContent>
+  );
+}

web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx

@@ -1,22 +1,10 @@
 import styles from './pipelineCard.module.css';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/components/ui/button';
 
-export default function PipelineCard({
-  cardVO,
-  onDebug,
-}: {
-  cardVO: PipelineCardVO;
-  onDebug: (pipelineId: string) => void;
-}) {
+export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
   const { t } = useTranslation();
 
-  const handleDebugClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDebug(cardVO.id);
-  };
-
   return (
     <div className={`${styles.cardContainer}`}>
       <div className={`${styles.basicInfoContainer}`}>
@@ -61,22 +49,6 @@ export default function PipelineCard({
             </div>
           </div>
         )}
-        <Button
-          variant="outline"
-          onClick={handleDebugClick}
-          title={t('pipelines.chat')}
-          className="mt-auto"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className={styles.debugButtonIcon}
-          >
-            <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>
-          {t('pipelines.chat')}
-        </Button>
       </div>
     </div>
   );

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -22,15 +22,14 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { toast } from 'sonner';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog';
+import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { i18nObj } from '@/i18n/I18nProvider';
 
@@ -41,17 +40,25 @@ export default function PipelineFormComponent({
   onNewPipelineCreated,
   isEditMode,
   pipelineId,
+  showButtons = true,
+  onDeletePipeline,
+  onCancel,
 }: {
   pipelineId?: string;
   isDefaultPipeline: boolean;
   isEditMode: boolean;
   disableForm: boolean;
+  showButtons?: boolean;
   // 这里的写法很不安全不规范，未来流水线需要重新整理
   initValues?: PipelineFormEntity;
   onFinish: () => void;
   onNewPipelineCreated: (pipelineId: string) => void;
+  onDeletePipeline: () => void;
+  onCancel: () => void;
 }) {
   const { t } = useTranslation();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
   const formSchema = isEditMode
     ? z.object({
         basic: z.object({
@@ -98,7 +105,6 @@ export default function PipelineFormComponent({
     useState<PipelineConfigTab>();
   const [outputConfigTabSchema, setOutputConfigTabSchema] =
     useState<PipelineConfigTab>();
-  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
@@ -306,187 +312,191 @@ export default function PipelineFormComponent({
     );
   }
 
-  function deletePipeline() {
-    httpClient
-      .deletePipeline(pipelineId || '')
-      .then(() => {
-        onFinish();
-        toast.success(t('common.deleteSuccess'));
-      })
-      .catch((err) => {
-        toast.error(t('common.deleteError') + err.message);
-      });
-  }
+  const handleDelete = () => {
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDelete = () => {
+    if (pipelineId) {
+      httpClient
+        .deletePipeline(pipelineId)
+        .then(() => {
+          onDeletePipeline();
+          setShowDeleteConfirm(false);
+          toast.success(t('pipelines.deleteSuccess'));
+        })
+        .catch((err) => {
+          toast.error(t('pipelines.deleteError') + err.message);
+        });
+    }
+  };
 
   return (
-    <div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
-      <Dialog
-        open={showDeleteConfirmModal}
-        onOpenChange={setShowDeleteConfirmModal}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
-          </DialogHeader>
-          <DialogDescription>
-            {t('pipelines.deleteConfirmation')}
-          </DialogDescription>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowDeleteConfirmModal(false)}
-            >
-              {t('common.cancel')}
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                deletePipeline();
-                setShowDeleteConfirmModal(false);
-              }}
-            >
-              {t('common.confirmDelete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleFormSubmit)}>
-          <Tabs defaultValue={formLabelList[0].name}>
-            <TabsList>
-              {formLabelList.map((formLabel) => (
-                <TabsTrigger key={formLabel.name} value={formLabel.name}>
-                  {formLabel.label}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-
-            {formLabelList.map((formLabel) => (
-              <TabsContent
-                key={formLabel.name}
-                value={formLabel.name}
-                className="pr-6"
+    <>
+      <div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white">
+        <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"
               >
-                <h1 className="text-xl font-bold mb-4">{formLabel.label}</h1>
+                <TabsList>
+                  {formLabelList.map((formLabel) => (
+                    <TabsTrigger key={formLabel.name} value={formLabel.name}>
+                      {formLabel.label}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
 
-                {formLabel.name === 'basic' && (
-                  <div className="space-y-6">
-                    <FormField
-                      control={form.control}
-                      name="basic.name"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('common.name')}
-                            <span className="text-red-500">*</span>
-                          </FormLabel>
-                          <FormControl>
-                            <Input {...field} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
+                <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">
+                          <FormField
+                            control={form.control}
+                            name="basic.name"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t('common.name')}
+                                  <span className="text-red-500">*</span>
+                                </FormLabel>
+                                <FormControl>
+                                  <Input {...field} />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          <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>
                       )}
-                    />
 
-                    <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>
+                      {isEditMode && (
+                        <>
+                          {formLabel.name === '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>
+                            )}
+
+                          {formLabel.name === '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>
+                            )}
+                        </>
                       )}
-                    />
-                  </div>
-                )}
-
-                {isEditMode && (
-                  <>
-                    {formLabel.name === '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>
-                    )}
-
-                    {formLabel.name === '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>
-            ))}
-          </Tabs>
-
-          <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
-            <div className="flex justify-end items-center gap-2">
-              {isEditMode && isDefaultPipeline && (
-                <span className="text-gray-500 text-[0.7rem]">
-                  {t('pipelines.defaultPipelineCannotDelete')}
-                </span>
-              )}
-
+                    </TabsContent>
+                  ))}
+                </div>
+              </Tabs>
+            </div>
+          </form>
+          {/* 按钮栏移到 Tabs 外部，始终固定底部 */}
+          {showButtons && (
+            <div className="flex justify-end gap-2 pt-4 border-t mb-0 bg-white sticky bottom-0 z-10">
               {isEditMode && !isDefaultPipeline && (
                 <Button
                   type="button"
                   variant="destructive"
-                  onClick={() => {
-                    setShowDeleteConfirmModal(true);
-                  }}
-                  className="cursor-pointer"
+                  onClick={handleDelete}
                 >
                   {t('common.delete')}
                 </Button>
               )}
 
-              <Button type="submit" className="cursor-pointer">
+              {isEditMode && isDefaultPipeline && (
+                <div className="text-gray-500 text-sm h-full flex items-center mr-2">
+                  {t('pipelines.defaultPipelineCannotDelete')}
+                </div>
+              )}
+              <Button type="submit" form="pipeline-form">
                 {isEditMode ? t('common.save') : t('common.submit')}
               </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onFinish}
-                className="cursor-pointer"
-              >
+              <Button type="button" variant="outline" onClick={onCancel}>
                 {t('common.cancel')}
               </Button>
             </div>
-          </div>
-        </form>
-      </Form>
-    </div>
+          )}
+        </Form>
+      </div>
+
+      {/* 删除确认对话框 */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">{t('pipelines.deleteConfirmation')}</div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
-
 interface FormLabel {
   label: string;
   name: string;

web/src/app/home/pipelines/debug-dialog/DebugDialog.tsx

@@ -1,422 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-import { Pipeline } from '@/app/infra/entities/api';
-import { Message } from '@/app/infra/entities/message';
-import { toast } from 'sonner';
-import AtBadge from './AtBadge';
-
-interface MessageComponent {
-  type: 'At' | 'Plain';
-  target?: string;
-  text?: string;
-}
-
-interface DebugDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  pipelineId: string;
-}
-
-export default function DebugDialog({
-  open,
-  onOpenChange,
-  pipelineId,
-}: DebugDialogProps) {
-  const { t } = useTranslation();
-  const [selectedPipelineId, setSelectedPipelineId] = useState(pipelineId);
-  const [sessionType, setSessionType] = useState<'person' | 'group'>('person');
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [inputValue, setInputValue] = useState('');
-  const [pipelines, setPipelines] = useState<Pipeline[]>([]);
-  const [showAtPopover, setShowAtPopover] = useState(false);
-  const [hasAt, setHasAt] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  useEffect(() => {
-    if (open) {
-      setSelectedPipelineId(pipelineId);
-      loadPipelines();
-      loadMessages(pipelineId);
-    }
-  }, [open, pipelineId]);
-
-  useEffect(() => {
-    if (open) {
-      loadMessages(selectedPipelineId);
-    }
-  }, [sessionType, selectedPipelineId]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node) &&
-        !inputRef.current?.contains(event.target as Node)
-      ) {
-        setShowAtPopover(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (showAtPopover) {
-      setIsHovering(true);
-    }
-  }, [showAtPopover]);
-
-  const loadPipelines = async () => {
-    try {
-      const response = await httpClient.getPipelines();
-      setPipelines(response.pipelines);
-    } catch (error) {
-      console.error('Failed to load pipelines:', error);
-    }
-  };
-
-  const loadMessages = async (pipelineId: string) => {
-    try {
-      const response = await httpClient.getWebChatHistoryMessages(
-        pipelineId,
-        sessionType,
-      );
-      setMessages(response.messages);
-    } catch (error) {
-      console.error('Failed to load messages:', error);
-    }
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (sessionType === 'group') {
-      if (value.endsWith('@')) {
-        setShowAtPopover(true);
-      } else if (showAtPopover && (!value.includes('@') || value.length > 1)) {
-        setShowAtPopover(false);
-      }
-    }
-    setInputValue(value);
-  };
-
-  const handleAtSelect = () => {
-    setHasAt(true);
-    setShowAtPopover(false);
-    setInputValue(inputValue.slice(0, -1));
-  };
-
-  const handleAtRemove = () => {
-    setHasAt(false);
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      if (showAtPopover) {
-        handleAtSelect();
-      } else {
-        sendMessage();
-      }
-    } else if (e.key === 'Backspace' && hasAt && inputValue === '') {
-      handleAtRemove();
-    }
-  };
-
-  const sendMessage = async () => {
-    if (!inputValue.trim() && !hasAt) return;
-
-    try {
-      const messageChain = [];
-
-      let text_content = inputValue.trim();
-      if (hasAt) {
-        text_content = ' ' + text_content;
-      }
-
-      if (hasAt) {
-        messageChain.push({
-          type: 'At',
-          target: 'webchatbot',
-        });
-      }
-      messageChain.push({
-        type: 'Plain',
-        text: text_content,
-      });
-
-      if (hasAt) {
-        // for showing
-        text_content = '@webchatbot' + text_content;
-      }
-
-      const userMessage: Message = {
-        id: -1,
-        role: 'user',
-        content: text_content,
-        timestamp: new Date().toISOString(),
-        message_chain: messageChain,
-      };
-
-      setMessages((prevMessages) => [...prevMessages, userMessage]);
-      setInputValue('');
-      setHasAt(false);
-
-      const response = await httpClient.sendWebChatMessage(
-        sessionType,
-        messageChain,
-        selectedPipelineId,
-        120000,
-      );
-
-      setMessages((prevMessages) => [...prevMessages, response.message]);
-    } catch (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      error: any
-    ) {
-      console.log(error, 'type of error', typeof error);
-      console.error('Failed to send message:', error);
-
-      if (!error.message.includes('timeout') && sessionType === 'person') {
-        toast.error(t('pipelines.debugDialog.sendFailed'));
-      }
-    } finally {
-      inputRef.current?.focus();
-    }
-  };
-
-  // const resetSession = async () => {
-  //   try {
-  //     await httpClient.resetWebChatSession(selectedPipelineId, sessionType);
-  //     setMessages([]);
-  //   } catch (error) {
-  //     console.error('Failed to reset session:', error);
-  //   }
-  // };
-
-  const renderMessageContent = (message: Message) => {
-    return (
-      <span className="text-base leading-relaxed align-middle whitespace-pre-wrap">
-        {(message.message_chain as MessageComponent[]).map(
-          (component, index) => {
-            if (component.type === 'At') {
-              return (
-                <AtBadge
-                  key={index}
-                  targetName={component.target || ''}
-                  readonly={true}
-                />
-              );
-            } else if (component.type === 'Plain') {
-              return <span key={index}>{component.text}</span>;
-            }
-            return null;
-          },
-        )}
-      </span>
-    );
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white">
-        <DialogHeader className="pl-2">
-          <div className="flex items-center justify-between">
-            <DialogTitle className="flex items-center gap-4 font-bold">
-              {t('pipelines.debugDialog.title')}
-              <Select
-                value={selectedPipelineId}
-                onValueChange={(value) => {
-                  setSelectedPipelineId(value);
-                  loadMessages(value);
-                }}
-              >
-                <SelectTrigger className="bg-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="rounded-xl shadow-lg">
-                  {pipelines.map((pipeline) => (
-                    <SelectItem
-                      key={pipeline.uuid}
-                      value={pipeline.uuid || ''}
-                      className="rounded-lg"
-                    >
-                      {pipeline.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </DialogTitle>
-          </div>
-        </DialogHeader>
-        <div className="flex flex-1 h-full min-h-0 border-t">
-          <div className="w-50 bg-white border-r p-6 pl-0 rounded-l-2xl flex-shrink-0 flex flex-col justify-start gap-4">
-            <div className="flex flex-col gap-2">
-              <Button
-                variant="ghost"
-                className={`w-full justify-center rounded-md px-4 py-6 text-base font-medium transition-none ${
-                  sessionType === 'person'
-                    ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-                    : 'bg-white text-gray-800 hover:bg-gray-100'
-                } border-0 shadow-none`}
-                onClick={() => setSessionType('person')}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <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>
-                {t('pipelines.debugDialog.privateChat')}
-              </Button>
-              <Button
-                variant="ghost"
-                className={`w-full justify-center rounded-md px-4 py-6 text-base font-medium transition-none ${
-                  sessionType === 'group'
-                    ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-                    : 'bg-white text-gray-800 hover:bg-gray-100'
-                } border-0 shadow-none`}
-                onClick={() => setSessionType('group')}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <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>
-                {t('pipelines.debugDialog.groupChat')}
-              </Button>
-            </div>
-            <div className="flex-1" />
-          </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">
-              <div className="space-y-6">
-                {messages.length === 0 ? (
-                  <div className="text-center text-muted-foreground py-12 text-lg">
-                    {t('pipelines.debugDialog.noMessages')}
-                  </div>
-                ) : (
-                  messages.map((message) => (
-                    <div
-                      key={message.id + message.timestamp}
-                      className={cn(
-                        'flex',
-                        message.role === 'user'
-                          ? 'justify-end'
-                          : 'justify-start',
-                      )}
-                    >
-                      <div
-                        className={cn(
-                          'max-w-md px-5 py-3 rounded-2xl',
-                          message.role === 'user'
-                            ? 'bg-[#2288ee] text-white rounded-br-none'
-                            : 'bg-gray-100 text-gray-900 rounded-bl-none',
-                        )}
-                      >
-                        {renderMessageContent(message)}
-                        <div
-                          className={cn(
-                            'text-xs mt-2',
-                            message.role === 'user'
-                              ? 'text-white/70'
-                              : 'text-gray-500',
-                          )}
-                        >
-                          {message.role === 'user'
-                            ? t('pipelines.debugDialog.userMessage')
-                            : t('pipelines.debugDialog.botMessage')}
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                )}
-                <div ref={messagesEndRef} />
-              </div>
-            </ScrollArea>
-
-            <div className="border-t p-4 pb-0 bg-white flex gap-2">
-              <div className="flex-1 flex items-center gap-2">
-                {hasAt && (
-                  <AtBadge targetName="webchatbot" onRemove={handleAtRemove} />
-                )}
-                <div className="relative flex-1">
-                  <Input
-                    ref={inputRef}
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    onKeyPress={handleKeyPress}
-                    placeholder={t('pipelines.debugDialog.inputPlaceholder')}
-                    className="flex-1 rounded-md px-3 py-2 border border-gray-300 focus:border-[#2288ee] transition-none text-base"
-                  />
-                  {showAtPopover && (
-                    <div
-                      ref={popoverRef}
-                      className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white shadow-lg"
-                    >
-                      <div
-                        className={cn(
-                          'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
-                          isHovering ? 'bg-gray-100' : 'bg-white',
-                        )}
-                        onClick={handleAtSelect}
-                        onMouseEnter={() => setIsHovering(true)}
-                        onMouseLeave={() => setIsHovering(false)}
-                      >
-                        <span>
-                          @webchatbot - {t('pipelines.debugDialog.atTips')}
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-              <Button
-                onClick={sendMessage}
-                disabled={!inputValue.trim() && !hasAt}
-                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"
-              >
-                <>{t('pipelines.debugDialog.send')}</>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

web/src/app/home/pipelines/page.tsx

@@ -1,25 +1,18 @@
 'use client';
 import { useState, useEffect } from 'react';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
-import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 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 { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 import styles from './pipelineConfig.module.css';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
-import DebugDialog from './debug-dialog/DebugDialog';
+import PipelineDialog from './PipelineDetailDialog';
 
 export default function PluginConfigPage() {
   const { t } = useTranslation();
-  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   const [isEditForm, setIsEditForm] = useState(false);
   const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
   const [selectedPipelineId, setSelectedPipelineId] = useState('');
@@ -31,11 +24,8 @@ export default function PluginConfigPage() {
       safety: {},
       output: {},
     });
-  const [disableForm, setDisableForm] = useState(false);
   const [selectedPipelineIsDefault, setSelectedPipelineIsDefault] =
     useState(false);
-  const [debugDialogOpen, setDebugDialogOpen] = useState(false);
-  const [debugPipelineId, setDebugPipelineId] = useState('');
 
   useEffect(() => {
     getPipelines();
@@ -92,83 +82,77 @@ export default function PluginConfigPage() {
         trigger: value.pipeline.config.trigger,
       });
       setSelectedPipelineIsDefault(value.pipeline.is_default ?? false);
-      setDisableForm(false);
     });
   }
 
-  const handleDebug = (pipelineId: string) => {
-    setDebugPipelineId(pipelineId);
-    setDebugDialogOpen(true);
+  const handlePipelineClick = (pipelineId: string) => {
+    setSelectedPipelineId(pipelineId);
+    setIsEditForm(true);
+    setDialogOpen(true);
+    getSelectedPipelineForm(pipelineId);
+  };
+
+  const handleCreateNew = () => {
+    setIsEditForm(false);
+    setSelectedPipelineId('');
+    setSelectedPipelineFormValue({
+      basic: {},
+      ai: {},
+      trigger: {},
+      safety: {},
+      output: {},
+    });
+    setSelectedPipelineIsDefault(false);
+    setDialogOpen(true);
   };
 
   return (
     <div className={styles.configPageContainer}>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
-          <DialogHeader className="px-6 pt-6 pb-4">
-            <DialogTitle>
-              {isEditForm
-                ? t('pipelines.editPipeline')
-                : t('pipelines.createPipeline')}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="flex-1 overflow-y-auto px-6">
-            <PipelineFormComponent
-              onNewPipelineCreated={(pipelineId) => {
-                setDisableForm(true);
-                setIsEditForm(true);
-                setModalOpen(true);
-                setSelectedPipelineId(pipelineId);
-                getSelectedPipelineForm(pipelineId);
-              }}
-              onFinish={() => {
-                getPipelines();
-                setModalOpen(false);
-              }}
-              isEditMode={isEditForm}
-              pipelineId={selectedPipelineId}
-              disableForm={disableForm}
-              initValues={selectedPipelineFormValue}
-              isDefaultPipeline={selectedPipelineIsDefault}
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
+      <PipelineDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        pipelineId={selectedPipelineId || undefined}
+        isEditMode={isEditForm}
+        isDefaultPipeline={selectedPipelineIsDefault}
+        initValues={selectedPipelineFormValue}
+        onFinish={() => {
+          getPipelines();
+        }}
+        onNewPipelineCreated={(pipelineId) => {
+          getPipelines();
+          setSelectedPipelineId(pipelineId);
+          setIsEditForm(true);
+          setDialogOpen(true);
+          getSelectedPipelineForm(pipelineId);
+        }}
+        onDeletePipeline={() => {
+          getPipelines();
+          setDialogOpen(false);
+        }}
+        onCancel={() => {
+          setDialogOpen(false);
+        }}
+      />
 
       <div className={styles.pipelineListContainer}>
         <CreateCardComponent
           width={'100%'}
           height={'10rem'}
           plusSize={'90px'}
-          onClick={() => {
-            setIsEditForm(false);
-            setModalOpen(true);
-          }}
+          onClick={handleCreateNew}
         />
 
         {pipelineList.map((pipeline) => {
           return (
             <div
               key={pipeline.id}
-              onClick={() => {
-                setDisableForm(true);
-                setIsEditForm(true);
-                setModalOpen(true);
-                setSelectedPipelineId(pipeline.id);
-                getSelectedPipelineForm(pipeline.id);
-              }}
+              onClick={() => handlePipelineClick(pipeline.id)}
             >
-              <PipelineCard cardVO={pipeline} onDebug={handleDebug} />
+              <PipelineCard cardVO={pipeline} />
             </div>
           );
         })}
       </div>
-
-      <DebugDialog
-        open={debugDialogOpen}
-        onOpenChange={setDebugDialogOpen}
-        pipelineId={debugPipelineId}
-      />
     </div>
   );
 }