feat(web): app share

web/src/views/ApplicationConfig/index.tsx

@@ -1,22 +1,24 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:29:37 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:29:37 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-12 10:23:18
  */
 import React, { useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 
 import ConfigHeader from './components/ConfigHeader'
-import type { AgentRef, ClusterRef, WorkflowRef } from './types'
+import type { AgentRef, ClusterRef, WorkflowRef, Config } from './types'
 import type { Application } from '@/views/ApplicationManagement/types'
 import Agent from './Agent'
 import Api from './Api'
 import ReleasePage from './ReleasePage'
 import Cluster from './Cluster'
-import { getApplication } from '@/api/application'
+import { getApplication, getApplicationConfig, getMultiAgentConfig, getWorkflowConfig } from '@/api/application'
 import Workflow from '@/views/Workflow';
 import Statistics from './Statistics'
+import TestChat from './TestChat'
+import type { WorkflowConfig } from '@/views/Workflow/types';
 
 /**
  * Application configuration page component
@@ -25,7 +27,7 @@ import Statistics from './Statistics'
  */
 const ApplicationConfig: React.FC = () => {
   // Hooks
-  const { id } = useParams();
+  const { id, source } = useParams();
   
   // Refs for different application types
   const agentRef = useRef<AgentRef>(null)
@@ -36,6 +38,31 @@ const ApplicationConfig: React.FC = () => {
   const [application, setApplication] = useState<Application | null>(null);
   const [activeTab, setActiveTab] = useState('arrangement');
 
+  useEffect(() => {
+    setActiveTab(source === 'sharing' ? 'test' : 'arrangement')
+  }, [source])
+
+  const [config, setConfig] = useState<Config | WorkflowConfig | null>(null)
+  useEffect(() => {
+    if (source === 'sharing' && application?.type) {
+      getAppConfig()
+    }
+  }, [source, application?.type])
+
+  const getAppConfig = () => {
+    if (!id || !source || !application?.type) {
+      return
+    }
+    const request = application?.type === 'agent'
+      ? getApplicationConfig
+      : application?.type === 'multi_agent'
+        ? getMultiAgentConfig
+        : getWorkflowConfig
+    request(id as string).then(res => {
+      setConfig(res as Config | WorkflowConfig | null)
+    })
+  }
+
   /**
    * Handle tab change with auto-save for arrangement tab
    * @param key - New tab key
@@ -94,6 +121,7 @@ const ApplicationConfig: React.FC = () => {
       {activeTab === 'api' && <Api application={application} />}
       {activeTab === 'release' && <ReleasePage data={application as Application} refresh={getApplicationInfo} />}
       {activeTab === 'statistics' && <Statistics application={application} />}
+      {activeTab === 'test' && <TestChat application={application} config={config} />}
     </>
   );
 };