Issue 1572/ update deployment view to show endpoint for fetching the configuration

agenta-web/src/code_snippets/endpoints/fetch_config/curl.ts

@@ -0,0 +1,8 @@
+export default function cURLCode(baseId: string, env_name: string): string {
+    return `
+    curl -X GET "https://cloud.agenta.ai/api/configs?base_id=${baseId}&environment_name=${env_name}" \
+    -H "Authorization: Bearer YOUR_API_KEY" \
+    -H "Content-Type: application/json" \
+    --connect-timeout 60
+    `
+}

agenta-web/src/code_snippets/endpoints/fetch_config/python.ts

@@ -0,0 +1,10 @@
+export default function pythonCode(baseId: string, env_name: string): string {
+    return `
+    # os.environ["AGENTA_API_KEY"] = "your_api_key" # Only when using cloud
+    # os.environ["HOST"] = "https://cloud.agenta.ai"
+
+    from agenta import Agenta
+    ag = Agenta()
+    ag.get_config(base_id="${baseId}", environment="${env_name}", cache_timeout=600) # timeout 300 per default
+    `
+}

agenta-web/src/code_snippets/endpoints/fetch_config/typescript.ts

@@ -0,0 +1,46 @@
+import {js as beautify} from "js-beautify"
+
+export default function tsCode(baseId: string, env_name: string): string {
+    const codeString = `
+    import axios from 'axios';
+
+    const getConfig = async (baseId: string, environmentName = null) => {
+       try {
+           const baseUrl = 'https://cloud.agenta.ai/api';
+           const params = {
+               base_id: baseId,
+               environment_name: environmentName
+           };
+
+           const response = await axios.get(baseUrl + "/configs", {
+               params: params,
+               headers: {
+                   'Authorization': "Bearer YOUR_API_KEY",
+                   'Content-Type': 'application/json'
+               },
+               timeout: 60000
+           });
+
+           if (response.status >= 200 && response.status < 300) {
+               return response.data;
+           } else if (response.status === 422) {
+               throw new Error(JSON.stringify(response.data));
+           }
+       } catch (error) {
+           if (error.response) {
+               console.error("API Error: " + error.response.status, error.response.data);
+           } else if (error.request) {
+               console.error('API Error: No response received', error.request);
+           } else {
+               console.error('Error', error.message);
+           }
+           throw error;
+       }
+    };
+
+    getConfig('${baseId}', '${env_name}').then(console.log).catch(console.error);
+    `
+
+    const formattedCodeString = beautify(codeString)
+    return formattedCodeString
+}

agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx

@@ -1,15 +1,18 @@
-import cURLCode from "@/code_snippets/endpoints/curl"
-import pythonCode from "@/code_snippets/endpoints/python"
-import tsCode from "@/code_snippets/endpoints/typescript"
+import invokeLlmAppcURLCode from "@/code_snippets/endpoints/invoke_llm_app/curl"
+import invokeLlmApppythonCode from "@/code_snippets/endpoints/invoke_llm_app/python"
+import invokeLlmApptsCode from "@/code_snippets/endpoints/invoke_llm_app/typescript"
+import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
+import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
+import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
 import DynamicCodeBlock from "@/components/DynamicCodeBlock/DynamicCodeBlock"
 import ResultComponent from "@/components/ResultComponent/ResultComponent"
 import {Environment, GenericObject, Parameter, Variant} from "@/lib/Types"
 import {isDemo} from "@/lib/helpers/utils"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {fetchEnvironments, fetchVariants, getAppContainerURL} from "@/lib/services/api"
-import {ApiOutlined, AppstoreOutlined, DownOutlined, HistoryOutlined} from "@ant-design/icons"
-import {Alert, Button, Dropdown, Empty, Space, Tabs, Typography} from "antd"
+import {ApiOutlined, AppstoreOutlined, HistoryOutlined} from "@ant-design/icons"
+import {Alert, Collapse, CollapseProps, Empty, Radio, Tabs, Tooltip, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -32,6 +35,7 @@ export default function VariantEndpoint() {
     const router = useRouter()
     const appId = router.query.app_id as string
     const [tab, setTab] = useQueryParam("tab", "overview")
+    const isOss = !isDemo()
 
     // Load URL for the given environment
     const [uri, setURI] = useState<string | null>(null)
@@ -48,9 +52,14 @@ export default function VariantEndpoint() {
     const loadEnvironments = async () => {
         const response: Environment[] = await fetchEnvironments(appId)
         setEnvironments(response)
-        setSelectedEnvironment(response[0])
-
-        await loadURL(response[0])
+        const loadProductionEnv = response.find((env) => env.name === "production")
+        if (loadProductionEnv) {
+            setSelectedEnvironment(loadProductionEnv)
+            await loadURL(loadProductionEnv)
+        } else {
+            setSelectedEnvironment(response[0])
+            await loadURL(response[0])
+        }
     }
     useEffect(() => {
         if (!appId) return
@@ -154,11 +163,31 @@ export default function VariantEndpoint() {
     }
 
     const params = createParams(inputParams, selectedEnvironment?.name || "none", "add_a_value")
-    const codeSnippets: Record<string, string> = {
-        Python: pythonCode(uri!, params),
-        cURL: cURLCode(uri!, params),
-        TypeScript: tsCode(uri!, params),
+    const invokeLlmAppCodeSnippet: Record<string, string> = {
+        Python: invokeLlmApppythonCode(uri!, params),
+        cURL: invokeLlmAppcURLCode(uri!, params),
+        TypeScript: invokeLlmApptsCode(uri!, params),
+    }
+
+    const fetchConfigCodeSnippet: Record<string, string> = {
+        Python: fetchConfigpythonCode(variant.baseId, selectedEnvironment?.name!),
+        cURL: fetchConfigcURLCode(variant.baseId, selectedEnvironment?.name!),
+        TypeScript: fetchConfigtsCode(variant.baseId, selectedEnvironment?.name!),
     }
+
+    const items: CollapseProps["items"] = [
+        {
+            key: "1",
+            label: "Invoke LLM App",
+            children: <DynamicCodeBlock codeSnippets={invokeLlmAppCodeSnippet} />,
+        },
+        {
+            key: "2",
+            label: "Fetch Prompt/Config",
+            children: <DynamicCodeBlock codeSnippets={fetchConfigCodeSnippet} />,
+        },
+    ]
+
     return (
         <div className={classes.container} data-cy="endpoints">
             <Title level={3}>
@@ -171,51 +200,56 @@ export default function VariantEndpoint() {
 
             <div>
                 <Text>Environment: </Text>
-                <Dropdown
-                    menu={{
-                        items: environments.map((env) => ({label: env.name, key: env.name})),
-                        onClick: handleEnvironmentClick,
-                    }}
+                <Radio.Group
+                    value={selectedEnvironment?.name}
+                    onChange={(e) => handleEnvironmentClick({key: e.target.value})}
                 >
-                    <Button size="small">
-                        <Space>
-                            {selectedEnvironment?.name || "Select a variant"}
-                            <DownOutlined />
-                        </Space>
-                    </Button>
-                </Dropdown>
+                    {environments.map((env) => (
+                        <Radio.Button
+                            disabled={!env.deployed_app_variant_id}
+                            key={env.name}
+                            value={env.name}
+                        >
+                            {env.name}
+                        </Radio.Button>
+                    ))}
+                </Radio.Group>
             </div>
 
             {selectedEnvironment?.deployed_app_variant_id ? (
-                isDemo() ? (
-                    <>
-                        <Tabs
-                            destroyInactiveTabPane
-                            defaultActiveKey={tab}
-                            items={[
-                                {
-                                    key: "overview",
-                                    label: "Overview",
-                                    icon: <AppstoreOutlined />,
-                                    children: <DynamicCodeBlock codeSnippets={codeSnippets} />,
-                                },
-                                {
-                                    key: "history",
-                                    label: "History",
-                                    icon: <HistoryOutlined />,
-                                    children: (
-                                        <DeploymentHistory
-                                            selectedEnvironment={selectedEnvironment}
-                                        />
-                                    ),
-                                },
-                            ]}
-                            onChange={setTab}
-                        />
-                    </>
-                ) : (
-                    <DynamicCodeBlock codeSnippets={codeSnippets} />
-                )
+                <>
+                    <Tabs
+                        destroyInactiveTabPane
+                        defaultActiveKey={tab}
+                        items={[
+                            {
+                                key: "overview",
+                                label: "Overview",
+                                icon: <AppstoreOutlined />,
+                                children: <Collapse defaultActiveKey={["1"]} items={items} />,
+                            },
+                            {
+                                key: "history",
+                                label: !isOss ? (
+                                    "History"
+                                ) : (
+                                    <Tooltip
+                                        placement="right"
+                                        title="Deployment History available in Cloud/Enterprise editions only"
+                                    >
+                                        History
+                                    </Tooltip>
+                                ),
+                                icon: <HistoryOutlined />,
+                                children: (
+                                    <DeploymentHistory selectedEnvironment={selectedEnvironment} />
+                                ),
+                                disabled: isOss,
+                            },
+                        ]}
+                        onChange={setTab}
+                    />
+                </>
             ) : (
                 <Alert
                     message="Publish Required"