🎨 remove guide to give user bigger interface

Author: Phinease

frontend/app/[locale]/chat/components/chatHeader.tsx

@@ -143,24 +143,6 @@ export function ChatHeader({
               <Button variant="ghost" className="h-8 w-12 rounded-full" onClick={() => setMemoryModalVisible(true)}>
                 <BrainCircuit className="size-5" stroke="url(#brainCogGradient)" />
               </Button>
-              {/* Dropdown Menu */}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="h-8 w-12 rounded-full">
-                    <MoreHorizontal className="size-5" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem className="cursor-pointer">
-                    <Bookmark className="mr-2 h-4 w-4" />
-                    <span>{t("chatHeader.bookmark")}</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem className="cursor-pointer" onClick={onShare}>
-                    <Share className="mr-2 h-4 w-4" />
-                    <span>{t("chatHeader.share")}</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
             </div>
           </div>
         </div>

frontend/app/[locale]/setup/agentSetup/components/AgentManagementConfig.tsx

@@ -31,7 +31,6 @@ export interface BusinessLogicConfigProps {
   setBusinessLogic: (value: string) => void;
   selectedTools: Tool[];
   setSelectedTools: (tools: Tool[]) => void;
-  setSystemPrompt: (value: string) => void;
   isCreatingNewAgent: boolean;
   setIsCreatingNewAgent: (value: boolean) => void;
   mainAgentModel: OpenAIModel;
@@ -54,14 +53,12 @@ export interface BusinessLogicConfigProps {
   setConstraintContent: (value: string) => void;
   fewShotsContent: string;
   setFewShotsContent: (value: string) => void;
-  // Add new props for agent name and description
   agentName?: string;
   setAgentName?: (value: string) => void;
   agentDescription?: string;
   setAgentDescription?: (value: string) => void;
   agentDisplayName?: string;
   setAgentDisplayName?: (value: string) => void;
-  // Add new prop for generating agent state
   isGeneratingAgent?: boolean;
   // SystemPromptDisplay related props
   onDebug?: () => void;
@@ -82,7 +79,6 @@ export default function BusinessLogicConfig({
   setBusinessLogic,
   selectedTools,
   setSelectedTools,
-  setSystemPrompt,
   isCreatingNewAgent,
   setIsCreatingNewAgent,
   mainAgentModel,
@@ -105,14 +101,12 @@ export default function BusinessLogicConfig({
   setConstraintContent,
   fewShotsContent,
   setFewShotsContent,
-  // Add new props for agent name and description
   agentName,
   setAgentName,
   agentDescription,
   setAgentDescription,
   agentDisplayName,
   setAgentDisplayName,
-  // Add new prop for generating agent state
   isGeneratingAgent = false,
   // SystemPromptDisplay related props
   onDebug,
@@ -234,7 +228,6 @@ export default function BusinessLogicConfig({
       if (!isEditingAgent) {
         // Only clear and get new Agent configuration in creating mode
         setBusinessLogic('');
-        setSystemPrompt(''); // Also clear the system prompt
         fetchSubAgentIdAndEnableToolList(t);
       } else {
         // In edit mode, data is loaded in handleEditAgent, here validate the form
@@ -245,7 +238,6 @@ export default function BusinessLogicConfig({
       // Only refresh list when exiting creation mode in non-editing mode to avoid flicker when exiting editing mode
       if (!isEditingAgent && hasInitialized.current) {
         setBusinessLogic('');
-        setSystemPrompt(''); // Also clear the system prompt
         setMainAgentModel(OpenAIModel.MainModel);
         setMainAgentMaxStep(5);
         // Delay refreshing agent list to avoid jumping
@@ -406,7 +398,6 @@ export default function BusinessLogicConfig({
           setBusinessLogic('');
           setSelectedTools([]);
           setEnabledToolIds([]);
-          setSystemPrompt('');
           // Clear right-side name description box
           setAgentName?.('');
           setAgentDescription?.('');
@@ -518,8 +509,6 @@ export default function BusinessLogicConfig({
         setSelectedTools([]);
         setEnabledToolIds([]);
       }
-      
-      message.success(t('businessLogic.config.message.agentInfoLoaded'));
     } catch (error) {
       console.error(t('debug.console.loadAgentDetailsFailed'), error);
       message.error(t('businessLogic.config.error.agentDetailFailed'));
@@ -684,11 +673,11 @@ export default function BusinessLogicConfig({
 
   return (
     <TooltipProvider>
-      <div className="flex flex-col h-full w-full gap-0 justify-between relative">
+      <div className="flex flex-col h-full gap-0 justify-between relative ml-2 mr-2">
         {/* Lower part: Agent pool + Agent capability configuration + System Prompt */}
-        <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 pb-4 pr-4 pl-4">
-          {/* Left column: Always show SubAgentPool - 30% width */}
-          <div className="w-full lg:w-[30%] h-full lg:flex-shrink-0">
+        <div className="flex flex-col lg:flex-row gap-4 flex-1 min-h-0 max-w-full">
+          {/* Left column: Always show SubAgentPool - Equal flex width */}
+          <div className="w-full lg:w-auto lg:flex-1 h-full overflow-hidden">
             <SubAgentPool
               onEditAgent={(agent) => handleEditAgent(agent, t)}
               onCreateNewAgent={handleCreateNewAgent}
@@ -703,8 +692,8 @@ export default function BusinessLogicConfig({
             />
           </div>
 
-          {/* Middle column: Agent capability configuration - 40% width */}
-          <div className="w-full lg:w-[40%] min-h-0 flex flex-col h-full">
+          {/* Middle column: Agent capability configuration - Equal flex width */}
+          <div className="w-full lg:w-auto lg:flex-1 h-full flex flex-col overflow-hidden">
               {/* Header: Configure Agent Capabilities */}
             <div className="flex justify-between items-center mb-2">
                 <div className="flex items-center">
@@ -716,7 +705,7 @@ export default function BusinessLogicConfig({
               </div>
 
               {/* Content: ScrollArea with two sections */}
-            <div className="flex-1 min-h-0 overflow-hidden border-t pt-2">
+            <div className="flex-1 overflow-hidden border-t pt-2">
                 <div className="flex flex-col h-full" style={{ gap: '16px' }}>
                   {/* Upper section: Collaborative Agent Display - fixed area */}
                   <CollaborativeAgentDisplay
@@ -731,7 +720,7 @@ export default function BusinessLogicConfig({
                   />
 
                   {/* Lower section: Tool Pool - flexible area */}
-                  <div className="flex-1 min-h-0 overflow-hidden">
+                  <div className="flex-1 overflow-hidden">
                     <MemoizedToolPool
                       selectedTools={isLoadingTools ? [] : selectedTools}
                       onSelectTool={(tool, isSelected) => {
@@ -755,8 +744,8 @@ export default function BusinessLogicConfig({
             </div>
           </div>
 
-          {/* Right column: System Prompt Display - 30% width */}
-          <div className="w-full lg:w-[30%] h-full lg:flex-shrink-0">
+          {/* Right column: System Prompt Display - Equal flex width */}
+          <div className="w-full lg:w-auto lg:flex-1 h-full overflow-hidden">
             <PromptManager
               onDebug={onDebug || (() => {})}
               agentId={getCurrentAgentId ? getCurrentAgentId() : (isEditingAgent && editingAgent ? Number(editingAgent.id) : (isCreatingNewAgent && mainAgentId ? Number(mainAgentId) : undefined))}

frontend/app/[locale]/setup/agentSetup/config.tsx

@@ -4,15 +4,14 @@ import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import BusinessLogicConfig from './components/AgentManagementConfig'
 import DebugConfig from './components/DebugConfig'
-import GuideSteps from './components/GuideSteps'
-import { Row, Col, Drawer, App } from 'antd'
+
+import { Drawer, App } from 'antd'
 import { fetchTools, fetchAgentList, exportAgent, deleteAgent } from '@/services/agentConfigService'
 import { generatePromptStream } from '@/services/promptService'
 import { OpenAIModel } from '@/types/agent'
 import { updateToolList } from '@/services/mcpService'
 import { 
   SETUP_PAGE_CONTAINER, 
-  THREE_COLUMN_LAYOUT,
   STANDARD_CARD,
 } from '@/lib/layoutConstants'
 import '../../i18n'
@@ -26,12 +25,13 @@ const LAYOUT_CONFIG = {
 
 /**
  * Agent configuration main component
+ * Provides a full-width interface for agent business logic configuration
+ * Follows SETUP_PAGE_CONTAINER layout standards for consistent height and spacing
  */
 export default function AgentConfig() {
   const { t } = useTranslation('common')
   const { message } = App.useApp()
   const [businessLogic, setBusinessLogic] = useState("")
-  const [systemPrompt, setSystemPrompt] = useState("")
   const [selectedTools, setSelectedTools] = useState<any[]>([])
   const [isDebugDrawerOpen, setIsDebugDrawerOpen] = useState(false)
   const [isCreatingNewAgent, setIsCreatingNewAgent] = useState(false)
@@ -43,7 +43,7 @@ export default function AgentConfig() {
   const [loadingAgents, setLoadingAgents] = useState(false)
 
   const [enabledAgentIds, setEnabledAgentIds] = useState<number[]>([])
-  const [currentGuideStep, setCurrentGuideStep] = useState<number | undefined>(undefined)
+
   const [isEditingAgent, setIsEditingAgent] = useState(false)
   const [editingAgent, setEditingAgent] = useState<any>(null)
 
@@ -335,9 +335,7 @@ export default function AgentConfig() {
     } 
 
     // Always reset these states regardless of creation mode
-    setSystemPrompt('');
     setSelectedTools([]);
-    setCurrentGuideStep(undefined);
 
     // Reset the main agent configuration related status
     if (!isCreatingNewAgent) {
@@ -441,47 +439,16 @@ export default function AgentConfig() {
 
   return (
     <App>
-      <div className="w-full h-full mx-auto" style={{ 
+      <div className="w-full mx-auto" style={{ 
         maxWidth: SETUP_PAGE_CONTAINER.MAX_WIDTH,
-        padding: `0 ${SETUP_PAGE_CONTAINER.HORIZONTAL_PADDING}`
+        height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT
       }}>
-        <div className="w-full h-full">
-          <Row gutter={THREE_COLUMN_LAYOUT.GUTTER} className="h-full">
-            {/* Left Timeline Guide */}
-            <Col xs={24} md={24} lg={4} xl={4} className="h-full">
-              <div className="bg-white border border-gray-200 rounded-md flex flex-col overflow-hidden h-[300px] lg:h-[82vh]" style={{
-                padding: STANDARD_CARD.PADDING,
-                overflowY: "auto",
-                overflowX: "hidden"
-              }}>
-                  <GuideSteps
-                    isCreatingNewAgent={isCreatingNewAgent}
-                    systemPrompt={systemPrompt}
-                    businessLogic={businessLogic}
-                    selectedTools={selectedTools}
-                    currentStep={currentGuideStep}
-                    isEditingAgent={isEditingAgent}
-                    dutyContent={dutyContent}
-                    constraintContent={constraintContent}
-                    fewShotsContent={fewShotsContent}
-                    enabledAgentIds={enabledAgentIds}
-                  />
-              </div>
-            </Col>
-
-            {/* Middle and Right Panel Container */}
-            <Col xs={24} md={24} lg={20} xl={20}>
-              <div className="bg-white border border-gray-200 rounded-md flex flex-col overflow-hidden h-[calc(100vh-200px)] lg:h-[82vh]" style={{
-                overflowY: "auto",
-                overflowX: "hidden"
-              }}>
-                  {/* Middle Panel - Business Logic Configuration */}
-                  <div className="flex-1 min-h-0" style={{
-                    padding: STANDARD_CARD.PADDING,
-                    overflowY: "auto",
-                    overflowX: "hidden"
-                  }}>
-                    <BusinessLogicConfig 
+        <div className={STANDARD_CARD.BASE_CLASSES} style={{
+          height: "100%",
+          ...STANDARD_CARD.CONTENT_SCROLL
+        }}>
+          <div style={{ padding: STANDARD_CARD.PADDING, height: "100%" }}>
+            <BusinessLogicConfig 
                       businessLogic={businessLogic}
                       setBusinessLogic={(value) => {
                         setBusinessLogic(value);
@@ -491,7 +458,6 @@ export default function AgentConfig() {
                       }}
                       selectedTools={selectedTools}
                       setSelectedTools={setSelectedTools}
-                      setSystemPrompt={setSystemPrompt}
                       isCreatingNewAgent={isCreatingNewAgent}
                       setIsCreatingNewAgent={setIsCreatingNewAgent}
                       mainAgentModel={mainAgentModel}
@@ -554,7 +520,6 @@ export default function AgentConfig() {
                     // SystemPromptDisplay related props
                       onDebug={() => {
                         setIsDebugDrawerOpen(true);
-                        setCurrentGuideStep(isCreatingNewAgent ? 5 : 5);
                       }}
                     getCurrentAgentId={getCurrentAgentId}
                       onGenerateAgent={handleGenerateAgent}
@@ -563,34 +528,31 @@ export default function AgentConfig() {
                       editingAgent={editingAgent}
                       onExitCreation={handleExitCreation}
                     />
-                </div>
-              </div>
-            </Col>
-          </Row>
-        </div>
-
-        {/* Commissioning drawer */}
-        <Drawer
-          title={t('agent.debug.title')}
-          placement="right"
-          onClose={() => setIsDebugDrawerOpen(false)}
-          open={isDebugDrawerOpen}
-          width={LAYOUT_CONFIG.DRAWER_WIDTH}
-          styles={{
-            body: {
-              padding: 0,
-              height: '100%',
-              overflow: 'hidden'
-            }
-          }}
-        >
-          <div className="h-full">
-            <DebugConfig 
-              agentId={getCurrentAgentId()}
-            />
           </div>
-        </Drawer>
+        </div>
       </div>
+
+      {/* Commissioning drawer */}
+      <Drawer
+        title={t('agent.debug.title')}
+        placement="right"
+        onClose={() => setIsDebugDrawerOpen(false)}
+        open={isDebugDrawerOpen}
+        width={LAYOUT_CONFIG.DRAWER_WIDTH}
+        styles={{
+          body: {
+            padding: 0,
+            height: '100%',
+            overflow: 'hidden'
+          }
+        }}
+      >
+        <div className="h-full">
+          <DebugConfig 
+            agentId={getCurrentAgentId()}
+          />
+        </div>
+      </Drawer>
     </App>
   )
 }