Model component enhancements

agenta-backend/agenta_backend/models/api/evaluation_model.py

@@ -242,6 +242,12 @@ class LMProvidersEnum(str, Enum):
     azure_key = "AZURE_API_KEY"
     togetherai = "TOGETHERAI_API_KEY"
     mistralai = "MISTRAL_API_KEY"
+    perplexityai = "PERPLEXITYAI_API_KEY"
+    anyscale = "ANYSCALE_API_KEY"
+    fireworksai = "FIREWORKS_AI_API_KEY"
+    deepinfra = "DEEPINFRA_API_KEY"
+    alephalpha = "ALEPHALPHA_API_KEY"
+    openrouter = "OPENROUTER_API_KEY"
 
 
 class NewEvaluation(BaseModel):

agenta-backend/agenta_backend/routers/app_router.py

@@ -569,6 +569,13 @@ async def create_app_and_variant_from_template(
                 "OPENAI_API_KEY",
                 "MISTRAL_API_KEY",
                 "COHERE_API_KEY",
+                "ANTHROPIC_API_KEY",
+                "ANYSCALE_API_KEY",
+                "PERPLEXITYAI_API_KEY",
+                "DEEPINFRA_API_KEY",
+                "TOGETHERAI_API_KEY",
+                "ALEPHALPHA_API_KEY",
+                "OPENROUTER_API_KEY",
             ]
             missing_keys = [
                 key for key in supported_llm_prodviders_keys if not os.environ.get(key)

agenta-web/next.config.js

@@ -12,6 +12,7 @@ const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
     productionBrowserSourceMaps: true,
+    transpilePackages: ["@lobehub/icons"],
     swcMinify: true,
 
     async redirects() {

agenta-web/package.json

@@ -26,6 +26,7 @@
         "@headlessui/react": "^1.7.18",
         "@headlessui/tailwindcss": "^0.2.0",
         "@heroicons/react": "^2.0.17",
+        "@lobehub/icons": "^1.18.0",
         "@mdx-js/loader": "^2.3.0",
         "@mdx-js/react": "^2.3.0",
         "@monaco-editor/react": "^4.5.2",
@@ -91,6 +92,6 @@
         "@types/node": "^20.8.10",
         "cypress": "^13.4.0",
         "node-mocks-http": "^1.12.2",
-        "prettier": "^3.0.0"
+        "prettier": "^3.2.5"
     }
 }

agenta-web/src/components/Playground/Views/GroupedSelect.tsx

@@ -0,0 +1,97 @@
+import React from "react"
+import {createUseStyles} from "react-jss"
+import {Select} from "antd"
+
+import {
+    IconType,
+    OpenAI,
+    Mistral,
+    Cohere,
+    Anthropic,
+    Perplexity,
+    Together,
+    OpenRouter,
+    Fireworks,
+} from "@lobehub/icons"
+
+const useStyles = createUseStyles({
+    select: {
+        width: "100%",
+    },
+    option: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+    },
+})
+
+interface IconMap {
+    [key: string]: IconType
+}
+
+interface GroupedSelectProps {
+    choices: {[group: string]: string[]}
+    defaultValue: string
+    handleChange: (value: string) => void
+}
+
+const iconMap: {[key: string]: React.ComponentType<any>} = {
+    "Open AI": OpenAI,
+    "Mistral AI": Mistral.Color,
+    Cohere: Cohere.Color,
+    Anthropic: Anthropic,
+    "Perplexity AI": Perplexity.Color,
+    "Together AI": Together.Color,
+    OpenRouter: OpenRouter,
+}
+
+const getTextContent = (element: React.ReactNode): string => {
+    if (typeof element === "string") {
+        return element
+    } else if (React.isValidElement(element) && element.props.children) {
+        return React.Children.toArray(element.props.children).reduce<string>(
+            (acc, child) => acc + getTextContent(child),
+            "",
+        )
+    }
+    return ""
+}
+
+const filterOption = (input: string, option?: {label: React.ReactNode; value: string}) =>
+    getTextContent(option?.label).toLowerCase().includes(input.toLowerCase())
+
+export const GroupedSelect: React.FC<GroupedSelectProps> = ({
+    choices,
+    defaultValue,
+    handleChange,
+}) => {
+    const classes = useStyles()
+
+    const options = Object.entries(choices).map(([groupLabel, groupChoices]) => ({
+        label: (
+            <div className={classes.option}>
+                {iconMap[groupLabel] ? React.createElement(iconMap[groupLabel]) : null}
+                {groupLabel}
+            </div>
+        ),
+        options: groupChoices.map((choice) => ({
+            label: (
+                <div className={classes.option}>
+                    {iconMap[groupLabel] ? React.createElement(iconMap[groupLabel]) : null}
+                    {choice}
+                </div>
+            ),
+            value: choice,
+        })),
+    }))
+    return (
+        <Select
+            showSearch
+            defaultValue={defaultValue}
+            className={classes.select}
+            onChange={handleChange}
+            filterOption={filterOption}
+            options={options as any}
+        />
+    )
+}

agenta-web/src/components/Playground/Views/ParametersCards.tsx

@@ -3,6 +3,7 @@ import {createUseStyles} from "react-jss"
 import {renameVariables} from "@/lib/helpers/utils"
 import {Parameter, InputParameter} from "@/lib/Types"
 import {DownOutlined} from "@ant-design/icons"
+
 import {
     Row,
     Card,
@@ -17,6 +18,7 @@ import {
     Menu,
     Space,
 } from "antd"
+import {GroupedSelect} from "./GroupedSelect"
 
 const useStyles = createUseStyles({
     row1: {
@@ -66,38 +68,14 @@ const useStyles = createUseStyles({
         marginBottom: 8,
     },
     inputNumber: {
-        margin: "0 16px",
-        width: "100%",
+        margin: "0 0 0 16px",
+        width: "calc(100% - 16px)",
     },
     select: {
         width: "100%",
     },
 })
 
-interface GroupedSelectProps {
-    choices: {[group: string]: string[]}
-    defaultValue: string
-    handleChange: (value: string) => void
-}
-
-const GroupedSelect: React.FC<GroupedSelectProps> = ({choices, defaultValue, handleChange}) => {
-    const classes = useStyles()
-    return (
-        <Select
-            defaultValue={defaultValue}
-            className={classes.select}
-            onChange={handleChange}
-            options={Object.entries(choices).map(([groupLabel, groupChoices]) => ({
-                label: groupLabel,
-                options: groupChoices.map((choice) => ({
-                    label: choice,
-                    value: choice,
-                })),
-            }))}
-        />
-    )
-}
-
 interface ModelParametersProps {
     optParams: Parameter[] | null
     onChange: (param: Parameter, value: number | string) => void
@@ -135,7 +113,7 @@ export const ModelParameters: React.FC<ModelParametersProps> = ({
                                             {renameVariables(param.name)}
                                         </h4>
                                     </Col>
-                                    <Col span={8}>
+                                    <Col span={param.type === "grouped_choice" ? 10 : 8}>
                                         {param.type === "number" && (
                                             <Slider
                                                 min={param.minimum}
@@ -197,26 +175,28 @@ export const ModelParameters: React.FC<ModelParametersProps> = ({
                                             />
                                         )}
                                     </Col>
-                                    <Col>
-                                        {param.type === "number" && (
-                                            <InputNumber
-                                                min={0}
-                                                max={10000}
-                                                className={classes.inputNumber}
-                                                value={param.default}
-                                                onChange={(value) => onChange(param, value)}
-                                            />
-                                        )}
-                                        {param.type === "integer" && (
-                                            <InputNumber
-                                                min={param.minimum}
-                                                max={param.maximum}
-                                                className={classes.inputNumber}
-                                                value={param.default}
-                                                onChange={(value) => onChange(param, value)}
-                                            />
-                                        )}
-                                    </Col>
+                                    {param.type !== "grouped_choice" && (
+                                        <Col span={2}>
+                                            {param.type === "number" && (
+                                                <InputNumber
+                                                    min={0}
+                                                    max={10000}
+                                                    className={classes.inputNumber}
+                                                    value={param.default}
+                                                    onChange={(value) => onChange(param, value)}
+                                                />
+                                            )}
+                                            {param.type === "integer" && (
+                                                <InputNumber
+                                                    min={param.minimum}
+                                                    max={param.maximum}
+                                                    className={classes.inputNumber}
+                                                    value={param.default}
+                                                    onChange={(value) => onChange(param, value)}
+                                                />
+                                            )}
+                                        </Col>
+                                    )}
                                     <Row />
                                 </Row>
                             ))}

agenta-web/src/lib/helpers/llmProviders.ts

@@ -11,13 +11,18 @@ export type LlmProvider = {
 
 export const llmAvailableProviders: LlmProvider[] = [
     {title: "OpenAI", key: "", name: "OPENAI_API_KEY"},
-    {title: "Replicate", key: "", name: "REPLICATE_API_KEY"},
-    {title: "Hugging Face", key: "", name: "HUGGING_FACE_API_KEY"},
+    {title: "Mistral AI", key: "", name: "MISTRAL_API_KEY"},
     {title: "Cohere", key: "", name: "COHERE_API_KEY"},
     {title: "Anthropic", key: "", name: "ANTHROPIC_API_KEY"},
-    {title: "Azure", key: "", name: "AZURE_API_KEY"},
+    {title: "Anyscale", key: "", name: "ANYSCALE_API_KEY"},
+    {title: "Perplexity AI", key: "", name: "PERPLEXITYAI_API_KEY"},
+    {title: "DeepInfra", key: "", name: "DEEPINFRA_API_KEY"},
     {title: "TogetherAI", key: "", name: "TOGETHERAI_API_KEY"},
-    {title: "Mistral AI", key: "", name: "MISTRAL_API_KEY"},
+    {title: "Aleph Alpha", key: "", name: "ALEPHALPHA_API_KEY"},
+    {title: "OpenRouter", key: "", name: "OPENROUTER_API_KEY"},
+    {title: "Replicate", key: "", name: "REPLICATE_API_KEY"},
+    {title: "Hugging Face", key: "", name: "HUGGING_FACE_API_KEY"},
+    {title: "Azure", key: "", name: "AZURE_API_KEY"},
 ]
 
 export const getApikeys = () => {