Merge pull request #1458 from Agenta-AI/main

Merge main into levenshtein

.all-contributorsrc

@@ -381,6 +381,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Drewski2222",
+      "name": "Drew Reisner",
+      "avatar_url": "https://avatars.githubusercontent.com/u/39228951?v=4",
+      "profile": "https://github.com/Drewski2222",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/check-web-code-lint-and-build.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 

.github/workflows/check-web-code-prettier.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 20
 

.github/workflows/publish-to-pypi.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Check out the repo
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
 

.github/workflows/run-backend-tests.yml

@@ -17,7 +17,7 @@ jobs:
   pytest:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set Environment Variables
         run: |

.github/workflows/run-frontend-tests.yml

@@ -47,7 +47,7 @@ jobs:
           curl http://localhost/api/containers/templates/
 
       - name: Set Node.js 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

README.md

@@ -159,7 +159,7 @@ Check out our [Contributing Guide](https://docs.agenta.ai/contributing/getting-s
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-40-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-41-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -220,6 +220,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://denniszelada.wordpress.com/"><img src="https://avatars.githubusercontent.com/u/219311?v=4?s=100" width="100px;" alt="Dennis Zelada"/><br /><sub><b>Dennis Zelada</b></sub></a><br /><a href="https://github.com/Agenta-AI/agenta/commits?author=denniszelada" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/romainrbr"><img src="https://avatars.githubusercontent.com/u/10381609?v=4?s=100" width="100px;" alt="Romain Brucker"/><br /><sub><b>Romain Brucker</b></sub></a><br /><a href="https://github.com/Agenta-AI/agenta/commits?author=romainrbr" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://heonheo.com"><img src="https://avatars.githubusercontent.com/u/76820291?v=4?s=100" width="100px;" alt="Heon Heo"/><br /><sub><b>Heon Heo</b></sub></a><br /><a href="https://github.com/Agenta-AI/agenta/commits?author=HeonHeo23" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Drewski2222"><img src="https://avatars.githubusercontent.com/u/39228951?v=4?s=100" width="100px;" alt="Drew Reisner"/><br /><sub><b>Drew Reisner</b></sub></a><br /><a href="https://github.com/Agenta-AI/agenta/commits?author=Drewski2222" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

agenta-cli/agenta/cli/main.py

@@ -83,6 +83,9 @@ def cli():
 def init(app_name: str, backend_host: str):
     init_option = "Blank App" if backend_host != "" and app_name != "" else ""
     """Initialize a new Agenta app with the template files."""
+
+    api_key = os.getenv("AGENTA_API_KEY")
+
     if not app_name:
         while True:
             app_name = questionary.text("Please enter the app name").ask()
@@ -125,7 +128,8 @@ def init(app_name: str, backend_host: str):
                 else:
                     backend_host = "https://cloud.agenta.ai"
 
-                api_key = helper.get_api_key(backend_host)
+                if not api_key:
+                    api_key = helper.get_api_key(backend_host)
 
             elif where_question is None:  # User pressed Ctrl+C
                 sys.exit(0)

agenta-web/cypress/support/commands/evaluations.ts

@@ -1,4 +1,5 @@
-import {randString, removeLlmProviderKey} from "../../../src/lib/helpers/utils"
+import {randString} from "../../../src/lib/helpers/utils"
+import {removeLlmProviderKey} from "../../../src/lib/helpers/llmProviders"
 
 let app_id
 

agenta-web/src/components/AlertPopup/AlertPopup.tsx

@@ -2,6 +2,8 @@ import React, {ReactNode} from "react"
 import {Modal, ModalFuncProps} from "antd"
 import {ExclamationCircleOutlined} from "@ant-design/icons"
 import {globalErrorHandler} from "@/lib/helpers/errorHandler"
+import {getAppValues, useAppsData} from "@/contexts/app.context"
+import {HookAPI} from "antd/es/modal/useModal"
 
 function handleCb(cb: AlertPopupProps["onOk"]) {
     if (typeof cb !== "function") return cb
@@ -19,6 +21,7 @@ function handleCb(cb: AlertPopupProps["onOk"]) {
 export type AlertPopupProps = ModalFuncProps & {
     message: ReactNode
     cancellable?: boolean
+    type?: keyof HookAPI
 }
 
 export default function AlertPopup({
@@ -32,7 +35,10 @@ export default function AlertPopup({
     type,
     ...ModalProps
 }: AlertPopupProps) {
-    return Modal[type || "confirm"]({
+    const {modalInstance} = getAppValues()
+    const modal = modalInstance || Modal
+
+    return modal[type || "confirm"]({
         title,
         content: message,
         okText,

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -6,13 +6,7 @@ import {Template, GenericObject} from "@/lib/Types"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import TipsAndFeatures from "./TipsAndFeatures"
 import Welcome from "./Welcome"
-import {
-    getAllProviderLlmKeys,
-    getApikeys,
-    isAppNameInputValid,
-    isDemo,
-    redirectIfNoLLMKeys,
-} from "@/lib/helpers/utils"
+import {isAppNameInputValid, isDemo, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
 import {
     createAndStartTemplate,
     getTemplates,
@@ -28,6 +22,7 @@ import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import CreateAppStatusModal from "./modals/CreateAppStatusModal"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
+import {LlmProvider, getAllProviderLlmKeys, getApikeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
@@ -136,10 +131,6 @@ const AppSelector: React.FC = () => {
         })
     }, [])
 
-    useEffect(() => {
-        getAllProviderLlmKeys()
-    }, [])
-
     const showCreateAppModal = async () => {
         setIsCreateAppModalOpen(true)
     }
@@ -208,14 +199,11 @@ const AppSelector: React.FC = () => {
         setStatusModalOpen(true)
 
         // attempt to create and start the template, notify user of the progress
-        const apiKey = getApikeys()
+        const apiKeys = getAllProviderLlmKeys()
         await createAndStartTemplate({
             appName: newApp,
             templateId: template_id,
-            providerKey:
-                isDemo() && apiKey?.length === 0
-                    ? []
-                    : (apiKey as {title: string; key: string; name: string}[]),
+            providerKey: isDemo() && apiKeys?.length === 0 ? [] : (apiKeys as LlmProvider[]),
             timeout,
             onStatusChange: async (status, details, appId) => {
                 setStatusData((prev) => ({status, details, appId: appId || prev.appId}))

agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx

@@ -361,33 +361,38 @@ const EvaluationCardView: React.FC<Props> = ({
                             </Button>
                         </div>
 
-                        <ParamsForm
-                            isChatVariant={isChat}
-                            onParamChange={(name, value) =>
-                                isChat
-                                    ? onChatChange(value)
-                                    : onInputChange(
-                                          {target: {value}} as any,
-                                          scenarioId,
-                                          scenario.inputs.findIndex((ip) => ip.input_name === name),
-                                      )
-                            }
-                            inputParams={
-                                isChat
-                                    ? [{name: "chat", value: chat} as any]
-                                    : variantData[0].inputParams?.map((item) => ({
-                                          ...item,
-                                          value: scenario.inputs.find(
-                                              (ip) => ip.input_name === item.name,
-                                          )?.input_value,
-                                      })) || []
-                            }
-                            key={scenarioId}
-                            useChatDefaultValue
-                            form={form}
-                            onFinish={() => onRun(scenarioId)}
-                            imageSize="large"
-                        />
+                        <div>
+                            <Typography.Text style={{fontSize: 20}}>Inputs</Typography.Text>
+                            <ParamsForm
+                                isChatVariant={isChat}
+                                onParamChange={(name, value) =>
+                                    isChat
+                                        ? onChatChange(value)
+                                        : onInputChange(
+                                              {target: {value}} as any,
+                                              scenarioId,
+                                              scenario.inputs.findIndex(
+                                                  (ip) => ip.input_name === name,
+                                              ),
+                                          )
+                                }
+                                inputParams={
+                                    isChat
+                                        ? [{name: "chat", value: chat} as any]
+                                        : variantData[0].inputParams?.map((item) => ({
+                                              ...item,
+                                              value: scenario.inputs.find(
+                                                  (ip) => ip.input_name === item.name,
+                                              )?.input_value,
+                                          })) || []
+                                }
+                                key={scenarioId}
+                                useChatDefaultValue
+                                form={form}
+                                onFinish={() => onRun(scenarioId)}
+                                imageSize="large"
+                            />
+                        </div>
 
                         <div className={classes.toolBar}>
                             <Tooltip title="Instructions">
@@ -405,11 +410,17 @@ const EvaluationCardView: React.FC<Props> = ({
                         </div>
 
                         <div>
-                            {!isAbTesting && (
-                                <Typography.Text style={{fontSize: 20}}>
-                                    Model Response
-                                </Typography.Text>
-                            )}
+                            <div style={{marginBottom: "1rem"}}>
+                                {!isAbTesting ? (
+                                    <Typography.Text style={{fontSize: 20}}>
+                                        Model Response
+                                    </Typography.Text>
+                                ) : (
+                                    <Typography.Text style={{fontSize: 20}}>
+                                        Outputs
+                                    </Typography.Text>
+                                )}
+                            </div>
 
                             <EvaluationCard
                                 isChat={isChat}

agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx

@@ -1,18 +1,19 @@
 import React, {useEffect, useState} from "react"
 import {GenericObject, JSSTheme, Parameter, Variant} from "@/lib/Types"
 import {createNewEvaluation, fetchVariants, useLoadTestsetsList} from "@/lib/services/api"
+import {isDemo} from "@/lib/helpers/utils"
 import {Button, Col, Dropdown, MenuProps, Modal, ModalProps, Row, Spin, message} from "antd"
 import {getErrorMessage} from "@/lib/helpers/errorHandler"
-import {isDemo} from "@/lib/helpers/utils"
 import {DownOutlined} from "@ant-design/icons"
 import {EvaluationType} from "@/lib/enums"
 import {PERMISSION_ERR_MSG} from "@/lib/helpers/axiosConfig"
 import {getAllVariantParameters} from "@/lib/helpers/variantHelper"
-import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {useRouter} from "next/router"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {createUseStyles} from "react-jss"
+import {getApikeys} from "@/lib/helpers/llmProviders"
 import EvaluationErrorModal from "../Evaluations/EvaluationErrorModal"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
 
 type StyleProps = {
     themeMode: "dark" | "light"

agenta-web/src/components/Layout/ErrorFallback.tsx

@@ -1,14 +1,20 @@
-import {getErrorMessage, globalErrorHandler} from "@/lib/helpers/errorHandler"
+import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {Button, Result} from "antd"
+import {useRouter} from "next/router"
 import {useEffect} from "react"
+import {FallbackProps} from "react-error-boundary"
 
-interface Props {
-    error: any
-}
+const ErrorFallback: React.FC<FallbackProps> = ({error, resetErrorBoundary}) => {
+    const router = useRouter()
 
-const ErrorFallback: React.FC<Props> = ({error}) => {
     useEffect(() => {
-        globalErrorHandler(error)
+        const handleRouteChange = () => {
+            resetErrorBoundary()
+        }
+        router.events.on("routeChangeComplete", handleRouteChange)
+        return () => {
+            router.events.off("routeChangeComplete", handleRouteChange)
+        }
     }, [])
 
     return (

agenta-web/src/components/Layout/Layout.tsx

@@ -1,5 +1,15 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, Button, ConfigProvider, Dropdown, Layout, Space, Tooltip, theme} from "antd"
+import {
+    Breadcrumb,
+    Button,
+    ConfigProvider,
+    Dropdown,
+    Layout,
+    Modal,
+    Space,
+    Tooltip,
+    theme,
+} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
@@ -117,7 +127,7 @@ type LayoutProps = {
 const App: React.FC<LayoutProps> = ({children}) => {
     const {user} = useProfileData()
     const {appTheme, themeMode, toggleAppTheme} = useAppTheme()
-    const {currentApp} = useAppsData()
+    const {currentApp, setModalInstance} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const [footerRef, {height: footerHeight}] = useElementSize()
     const classes = useStyles({themeMode: appTheme, footerHeight} as StyleProps)
@@ -126,6 +136,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
     const appId = router.query.app_id as string
     const isDarkTheme = appTheme === "dark"
     const {token} = theme.useToken()
+    const [modal, contextHolder] = Modal.useModal()
 
     useEffect(() => {
         if (user && isDemo()) {
@@ -192,6 +203,8 @@ const App: React.FC<LayoutProps> = ({children}) => {
             }
         }
         githubRepo()
+
+        setModalInstance(modal)
     }, [])
 
     useEffect(() => {
@@ -284,6 +297,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                 </Space>
                                 <ErrorBoundary FallbackComponent={ErrorFallback}>
                                     {children}
+                                    {contextHolder}
                                 </ErrorBoundary>
                             </Content>
                             <Footer ref={footerRef} className={classes.footer}>