refactor(construct): 重构自动计划页面组件

- 调整资源内容和卡片组件的样式
- 优化代理选择组件布局
- 在 ConfigurableForm 组件中添加参数日志输出
- 修改 ChatContentContainer 组件中的滚动逻辑

web/components/common/configurable-form.tsx

@@ -16,6 +16,7 @@ const isComplexValidValues = (values: any[]): boolean => {
 function ConfigurableForm({ params, form }: { params: Array<ConfigurableParams> | null; form: FormInstance<any> }) {
   // Initialize the default value of the form
   useEffect(() => {
+    console.log('ConfigurableForm params:', params);
     if (params) {
       const initialValues: ParamValues = {};
       params.forEach(param => {

web/new-components/chat/ChatContentContainer.tsx

@@ -32,6 +32,10 @@ const ChatContentContainer = ({}, ref: React.ForwardedRef<any>) => {
     // Check if we're at the bottom
     setIsAtBottom(scrollTop + clientHeight >= scrollHeight - buffer);
 
+    // if(!(scrollTop + clientHeight >= scrollHeight - buffer)){
+    //   scrollToBottom();
+    // }
+
     // Header visibility
     if (scrollTop >= 42 + 32) {
       setIsScrollToTop(true);

web/pages/construct/app/extra/components/auto-plan/ResourceContentV2.tsx

@@ -95,7 +95,6 @@ const ResourceContentV2: React.FC<ResourceContentV2Props> = ({
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [configParams, setConfigParams] = useState<ConfigurableParams[] | null>(null);
-
   // Use ref to prevent multiple unnecessary updates
   const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastUpdateValueRef = useRef<string>('');
@@ -336,12 +335,12 @@ const ResourceContentV2: React.FC<ResourceContentV2Props> = ({
   };
 
   return (
-    <div className={cls('flex flex-1', classNames)}>
-      <Spin spinning={loading}>
+    <div className={cls('flex flex-1 w-20', classNames)}>
+      {/* <Spin style={{ height: '100%' }} spinning={loading}> */}
         <Form
           style={{ width: '100%' }}
+          labelCol={{ span: 9 }}
           form={form}
-          labelCol={{ span: 7 }}
           initialValues={{
             resource_type: resourceType,
             is_dynamic: initValue?.is_dynamic || false,
@@ -354,7 +353,14 @@ const ResourceContentV2: React.FC<ResourceContentV2Props> = ({
             name='resource_type'
             rules={[{ required: true, message: t('please_select_resource_type') }]}
           >
-            <Select options={filteredResourceOptions} placeholder={t('please_select_resource_type')} />
+            {/* <Select options={filteredResourceOptions} placeholder={t('please_select_resource_type')} /> */}
+            <Select placeholder={t('please_select_resource_type')}>
+              {filteredResourceOptions.map((item: any) => (
+                <Select.Option key={item.value.val} value={item.value.val}>
+                  {item.value.name}
+                </Select.Option>
+              ))}
+            </Select>
           </Form.Item>
 
           {/* Data Dynamic Toggle */}
@@ -365,7 +371,7 @@ const ResourceContentV2: React.FC<ResourceContentV2Props> = ({
           {/* Only show the configuration form if it's not dynamic and the parameters are loaded */}
           {!isDynamic && configParams && <ConfigurableForm params={configParams} form={form} />}
         </Form>
-      </Spin>
+      {/* </Spin> */}
     </div>
   );
 };

web/pages/construct/app/extra/components/auto-plan/ResourcesCardV2.tsx

@@ -47,7 +47,6 @@ const ResourcesCardV2: React.FC<{
   const [filterResourcesTabs, setFilterResourcesTabs] = useState<ResourceTabProps[]>([...resourcesTabs]);
   const [activeKey, setActiveKey] = useState<string>(resourcesTabs?.[0]?.uid || '');
   const [hoverKey, setHoverKey] = useState<string>('');
-
   // Delete resource
   const remove = (e: React.MouseEvent, item: ResourceTabProps) => {
     e?.stopPropagation();
@@ -146,7 +145,6 @@ const ResourcesCardV2: React.FC<{
       <div className='flex flex-col w-40 h-full'>
         {/* Resource type filter */}
         <Select
-          options={resourceTypeOptions}
           className='w-full h-8'
           variant='borderless'
           defaultValue='all'
@@ -159,8 +157,13 @@ const ResourcesCardV2: React.FC<{
               setActiveKey(newSourcesTabs?.[0]?.uid || '');
               setFilterResourcesTabs(newSourcesTabs);
             }
-          }}
-        />
+          }}>
+          {resourceTypeOptions.map((item: any) => (
+            <Select.Option key={item.value=='all'?'all':item.value.val} value={item.value=='all'?'all':item.value.val}>
+              {item.value=='all'?'全部':item.value.name}
+            </Select.Option>
+          ))}
+        </Select>
 
         {/* Resource tab list */}
         <div className='flex flex-1 flex-col gap-1 overflow-y-auto'>
@@ -261,7 +264,7 @@ const ResourcesCardV2: React.FC<{
 
       {/* Resource configuration on the right */}
 
-      <div className='flex flex-1 ml-6' style={{ minHeight: '430px', overflowY: 'auto' }}>
+      <div className='flex flex-none ml-6 w-60' style={{ minHeight: '430px', overflowY: 'auto' }}>
         {filterResourcesTabs && filterResourcesTabs?.length > 0 ? (
           <div className='flex flex-1'>
             {filterResourcesTabs?.map(item => (

web/pages/construct/app/extra/components/auto-plan/index.tsx

@@ -21,7 +21,7 @@ interface AgentSelectProps {
 const AgentSelect: React.FC<AgentSelectProps> = ({ value, onChange, agents, selectedTab, setSelectedTab }) => {
   return (
     <Checkbox.Group
-      className='grid grid-cols-4 gap-4'
+      className='grid grid-cols-3 gap-4'
       onChange={(value: string[]) => {
         onChange?.(value);
       }}
@@ -30,9 +30,8 @@ const AgentSelect: React.FC<AgentSelectProps> = ({ value, onChange, agents, sele
       {agents.map(item => {
         return (
           <div
-            className={`flex grow h-8 items-center px-3 border ${
-              item.name === selectedTab ? 'border-[#0c75fc]' : 'border-[#d6d8da]'
-            } rounded-md hover:border-[#0c75fc] cursor-pointer`}
+            className={`flex grow h-8 items-center px-3 border ${item.name === selectedTab ? 'border-[#0c75fc]' : 'border-[#d6d8da]'
+              } rounded-md hover:border-[#0c75fc] cursor-pointer`}
             key={item.name}
             onClick={() => {
               setSelectedTab(item.name || '');
@@ -41,13 +40,14 @@ const AgentSelect: React.FC<AgentSelectProps> = ({ value, onChange, agents, sele
             <Checkbox value={item.name} />
             <div className='flex items-center flex-1 justify-between'>
               <div>
-                <span className='ml-2 mr-1'>{agentIcon[item.name || '']}</span>
-                <span className='text-sm text-[rgba(0,10,26,0.68)] dark:text-[rgba(255,255,255,0.85)]'>
+                <span className='text-sm text-[rgba(0,10,26,0.68)] dark:text-[rgba(255,255,255,0.85)] truncate w-28 block ml-2'>
+                  <span className='mr-2'>{agentIcon[item.name || '']}</span>
+
                   {item.label}
                 </span>
               </div>
               <Tooltip title={item.desc}>
-                <QuestionCircleOutlined className='text-sm' />
+                <QuestionCircleOutlined className='text-sm ml-1' />
               </Tooltip>
             </div>
           </div>