add button to import sample-workflows in studio-fe and fix UI_FEATURES disabling in app-fe

Signed-off-by: wwanarif <[email protected]>

Author: wwanarif

app-frontend/react/.env.production

@@ -1,3 +1 @@
-VITE_CHAT_SERVICE_URL=APP_BACKEND_SERVICE_URL
-VITE_DATA_PREP_SERVICE_URL=APP_DATA_PREP_SERVICE_URL
 VITE_APP_UUID=APP_UUID

app-frontend/react/src/config.ts

@@ -3,19 +3,19 @@
 
 // console.log("Environment variables:", import.meta.env);
 
-export const DATA_PREP_URL = import.meta.env.VITE_DATA_PREP_SERVICE_URL;
-export const CHAT_QNA_URL = import.meta.env.VITE_CHAT_SERVICE_URL;
 export const APP_UUID = import.meta.env.VITE_APP_UUID;
-
-console.log("data prep", DATA_PREP_URL);
-console.log("chat qna", CHAT_QNA_URL);
+export const CHAT_QNA_URL = "VITE_APP_BACKEND_SERVICE_URL";
+export const DATA_PREP_URL = "VITE_APP_DATA_PREP_SERVICE_URL";
 
 type UiFeatures = {
   dataprep: boolean;
   chat: boolean;
 };
 
 export const UI_FEATURES: UiFeatures = {
-  dataprep: !!DATA_PREP_URL,
-  chat: !!CHAT_QNA_URL
+  chat: CHAT_QNA_URL.startsWith('VITE_') ? false : true,
+  dataprep: DATA_PREP_URL.startsWith('VITE_') ? false : true
 };
+
+console.log("chat qna", CHAT_QNA_URL, UI_FEATURES.chat);
+console.log("data prep", DATA_PREP_URL, UI_FEATURES.dataprep);

studio-backend/app/templates/app/app.compose.yaml

@@ -25,7 +25,7 @@ app-frontend:
     - no_proxy=${no_proxy}
     - https_proxy=${https_proxy}
     - http_proxy=${http_proxy}
-    - APP_BACKEND_SERVICE_URL=/v1/app-backend
+    - VITE_APP_BACKEND_SERVICE_URL=/v1/app-backend
     __UI_CONFIG_INFO_ENV_PLACEHOLDER__
   ipc: host
   restart: always

studio-backend/app/templates/app/app.manifest.aws.ecr.yaml

@@ -118,7 +118,7 @@ spec:
       containers:
       - name: app-frontend
         env:
-        - name: APP_BACKEND_SERVICE_URL
+        - name: VITE_APP_BACKEND_SERVICE_URL
           value: /v1/app-backend
         __UI_CONFIG_INFO_ENV_PLACEHOLDER__
         securityContext: {}

studio-backend/app/templates/app/app.manifest.yaml

@@ -107,7 +107,7 @@ spec:
       containers:
       - name: app-frontend
         env:
-        - name: APP_BACKEND_SERVICE_URL
+        - name: VITE_APP_BACKEND_SERVICE_URL
           value: /v1/app-backend
         __UI_CONFIG_INFO_ENV_PLACEHOLDER__
         securityContext: {}

studio-backend/app/utils/placeholders_utils.py

@@ -72,7 +72,7 @@ def replace_dynamic_manifest_placeholder(value_str, service_info, proj_info_json
             # For __UI_CONFIG_INFO_ENV_PLACEHOLDER__
             url_name = value['url_name']
             endpoint_path = value['endpoint_path']
-            env_block = f"{indent_str}- name: {url_name}\n{indent_str}  value: {endpoint_path}\n"
+            env_block = f"{indent_str}- name: VITE_{url_name}\n{indent_str}  value: {endpoint_path}\n"
             ui_env_config_info_str += env_block
 
             # For __UI_CONFIG_INFO_ENV_PLACEHOLDER__
@@ -144,7 +144,7 @@ def replace_dynamic_compose_placeholder(value_str, service_info):
         for _, value in service_info['ui_config_info'].items():
             url_name = value['url_name']
             endpoint_path = value['endpoint_path']
-            endpoint_block = f"{indent_str}  - {url_name}={endpoint_path}\n"
+            endpoint_block = f"{indent_str}  - VITE_{url_name}={endpoint_path}\n"
             ui_env_config_info_str += endpoint_block
 
         # Get app images from environment variables

studio-frontend/packages/server/src/controllers/chatflows/index.ts

@@ -67,6 +67,15 @@ const getAllChatflowsbyUserId = async (req: Request, res: Response, next: NextFu
     }
 }
 
+const importSampleChatflowsbyUserId = async (req: Request, res: Response, next: NextFunction) => {
+    try {
+        const apiResponse = await chatflowsService.importSampleChatflowsbyUserId(req.query.userid as string, req.query.type as ChatflowType)
+        return res.json(apiResponse)
+    } catch (error) {
+        next(error)
+    }
+}
+
 // Get specific chatflow via api key
 const getChatflowByApiKey = async (req: Request, res: Response, next: NextFunction) => {
     try {
@@ -268,6 +277,7 @@ export default {
     deleteChatflow,
     getAllChatflows,
     getAllChatflowsbyUserId,
+    importSampleChatflowsbyUserId,
     getChatflowByApiKey,
     getChatflowById,
     saveChatflow,

studio-frontend/packages/server/src/routes/chatflows/index.ts

@@ -4,6 +4,7 @@ const router = express.Router()
 
 // CREATE
 router.post('/', chatflowsController.saveChatflow)
+router.post('/importsamples', chatflowsController.importSampleChatflowsbyUserId)
 router.post('/importchatflows', chatflowsController.importChatflows)
 
 // READ

studio-frontend/packages/server/src/services/chatflows/index.ts

@@ -139,45 +139,11 @@ const getAllChatflowsbyUserId = async (userid: string, type?: ChatflowType): Pro
         const appServer = getRunningExpressApp()
 
         // Use find with a where condition to filter by userid
-        let dbResponse = await appServer.AppDataSource.getRepository(ChatFlow).find({
+        const dbResponse = await appServer.AppDataSource.getRepository(ChatFlow).find({
             where: {
                 userid: userid,  // Filter by the specific userid
             },
         })
-
-        // If no chatflows are found for the user, create a new one based from sample workflow
-        if (dbResponse.length === 0) {
-            // URL to fetch the sample workflow
-            const url = 'https://raw.githubusercontent.com/opea-project/GenAIStudio/refs/heads/main/sample-workflows/sample_workflow_chatqna.json';
-            
-            try {
-                // Fetch and parse the JSON data from the URL
-                const response = await axios.get(url);
-                const parsedFlowData = response.data;
-
-                // Create a new chatflow with the flowData from the URL
-                const newChatflow: Partial<ChatFlow> = {
-                    userid: userid,
-                    name: 'sample-chatqna',
-                    flowData: JSON.stringify(parsedFlowData),
-                    type: 'OPEA',
-                    deployed: false,
-                    isPublic: false
-                };
-
-                // Call the importChatflows function to insert the new chatflow
-                await importChatflows([newChatflow]);
-            } catch (error) {
-                throw new Error('Failed to import sample chatflow');
-            }
-
-            // Rerun the find query to fetch the latest state of chatflows after insertion
-            dbResponse = await appServer.AppDataSource.getRepository(ChatFlow).find({
-                where: {
-                    userid: userid,
-                },
-            });
-        }
 
         // Filter further by type if needed
         if (type) {
@@ -193,6 +159,39 @@ const getAllChatflowsbyUserId = async (userid: string, type?: ChatflowType): Pro
     }
 }
 
+const importSampleChatflowsbyUserId = async (userid: string, type?: ChatflowType): Promise<ChatFlow[]> => {
+    try {
+        const response = await axios.get('https://api.github.com/repos/opea-project/GenAIStudio/contents/sample-workflows');
+        const files = response.data.filter((item: any) => item.type === 'file');
+        console.log(`Number of files: ${files.length}`);
+
+        const chatflows: Partial<ChatFlow>[] = [];
+
+        for (const file of files) {
+            console.log(`Download URL: ${file.download_url}`);
+            const fileResponse = await axios.get(file.download_url);
+            const parsedFlowData = fileResponse.data;
+
+            const newChatflow: Partial<ChatFlow> = {
+                userid: userid,
+                name: file.name.replace('.json', ''),
+                flowData: JSON.stringify(parsedFlowData),
+                type: 'OPEA',
+                deployed: false,
+                isPublic: false
+            };
+
+            chatflows.push(newChatflow);
+        }
+        const insertResponse = await importChatflows(chatflows);
+        return insertResponse;
+    } catch (error) {
+        throw new InternalFlowiseError(
+            StatusCodes.INTERNAL_SERVER_ERROR,
+            `Error: chatflowsService.importSampleChatflowsbyUserId - ${getErrorMessage(error)}`
+        );
+    }
+}
 
 const getChatflowByApiKey = async (apiKeyId: string, keyonly?: unknown): Promise<any> => {
     try {
@@ -516,6 +515,7 @@ export default {
     deleteChatflow,
     getAllChatflows,
     getAllChatflowsbyUserId,
+    importSampleChatflowsbyUserId,
     getChatflowByApiKey,
     getChatflowById,
     saveChatflow,

studio-frontend/packages/ui/src/api/chatflows.js

@@ -31,6 +31,8 @@ const stopSandbox = (id) => client.post(`/chatflows-sandbox/stop/${id}`)
 
 const buildDeploymentPackage = (id, body) => client.post(`chatflows-sandbox/build-deployment-package/${id}`, body, {responseType: "arraybuffer"})
 
+const importSampleChatflowsbyUserId = (userid) => client.post(`/chatflows/importsamples?userid=${userid}&type=OPEA`)
+
 export default {
     getAllChatflows,
     getAllAgentflows,
@@ -39,6 +41,7 @@ export default {
     getSpecificChatflow,
     getSpecificChatflowFromPublicEndpoint,
     createNewChatflow,
+    importSampleChatflowsbyUserId,
     importChatflows,
     updateChatflow,
     deleteChatflow,