feat: api tool config section + agent refactor for more llm fields

application/tools/agent.py

@@ -26,6 +26,21 @@ class Agent:
         tools_by_id = {str(tool["_id"]): tool for tool in user_tools}
         return tools_by_id
 
+    def _build_tool_parameters(self, action):
+        params = {"type": "object", "properties": {}, "required": []}
+        for param_type in ["query_params", "headers", "body", "parameters"]:
+            if param_type in action and action[param_type].get("properties"):
+                for k, v in action[param_type]["properties"].items():
+                    if v.get("filled_by_llm", True):
+                        params["properties"][k] = {
+                            key: value
+                            for key, value in v.items()
+                            if key != "filled_by_llm" and key != "value"
+                        }
+
+                        params["required"].append(k)
+        return params
+
     def _prepare_tools(self, tools_dict):
         self.tools = [
             {
@@ -33,26 +48,7 @@ class Agent:
                 "function": {
                     "name": f"{action['name']}_{tool_id}",
                     "description": action["description"],
-                    "parameters": {
-                        **action["parameters"],
-                        "properties": {
-                            k: {
-                                key: value
-                                for key, value in v.items()
-                                if key != "filled_by_llm" and key != "value"
-                            }
-                            for k, v in action["parameters"]["properties"].items()
-                            if v.get("filled_by_llm", True)
-                        },
-                        "required": [
-                            key
-                            for key in action["parameters"]["required"]
-                            if key in action["parameters"]["properties"]
-                            and action["parameters"]["properties"][key].get(
-                                "filled_by_llm", True
-                            )
-                        ],
-                    },
+                    "parameters": self._build_tool_parameters(action),
                 },
             }
             for tool_id, tool in tools_dict.items()
@@ -79,21 +75,49 @@ class Agent:
             )
         )
 
-        for param, details in action_data["parameters"]["properties"].items():
-            if param not in call_args and "value" in details:
-                call_args[param] = details["value"]
+        query_params, headers, body, parameters = {}, {}, {}, {}
+        param_types = {
+            "query_params": query_params,
+            "headers": headers,
+            "body": body,
+            "parameters": parameters,
+        }
+
+        for param_type, target_dict in param_types.items():
+            if param_type in action_data and action_data[param_type].get("properties"):
+                for param, details in action_data[param_type]["properties"].items():
+                    if param not in call_args and "value" in details:
+                        target_dict[param] = details["value"]
+
+        for param, value in call_args.items():
+            for param_type, target_dict in param_types.items():
+                if param_type in action_data and param in action_data[param_type].get(
+                    "properties", {}
+                ):
+                    target_dict[param] = value
 
         tm = ToolManager(config={})
         tool = tm.load_tool(
             tool_data["name"],
             tool_config=(
-                tool_data["config"]["actions"][action_name]
+                {
+                    "url": tool_data["config"]["actions"][action_name]["url"],
+                    "method": tool_data["config"]["actions"][action_name]["method"],
+                    "headers": headers,
+                    "query_params": query_params,
+                }
                 if tool_data["name"] == "api_tool"
                 else tool_data["config"]
             ),
         )
-        print(f"Executing tool: {action_name} with args: {call_args}")
-        result = tool.execute_action(action_name, **call_args)
+        if tool_data["name"] == "api_tool":
+            print(
+                f"Executing api: {action_name} with query_params: {query_params}, headers: {headers}, body: {body}"
+            )
+            result = tool.execute_action(action_name, **body)
+        else:
+            print(f"Executing tool: {action_name} with args: {call_args}")
+            result = tool.execute_action(action_name, **parameters)
         call_id = getattr(call, "id", None)
         return result, call_id
 

application/tools/implementations/api_tool.py

@@ -15,11 +15,16 @@ class APITool(Tool):
         self.url = config.get("url", "")
         self.method = config.get("method", "GET")
         self.headers = config.get("headers", {"Content-Type": "application/json"})
+        self.query_params = config.get("query_params", {})
 
     def execute_action(self, action_name, **kwargs):
-        return self._make_api_call(self.url, self.method, self.headers, kwargs)
+        return self._make_api_call(
+            self.url, self.method, self.headers, self.query_params, kwargs
+        )
 
-    def _make_api_call(self, url, method, headers, body):
+    def _make_api_call(self, url, method, headers, query_params, body):
+        if query_params:
+            url = f"{url}?{requests.compat.urlencode(query_params)}"
         if isinstance(body, dict):
             body = json.dumps(body)
         try:

frontend/src/assets/circle-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(34 197 94)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

frontend/src/assets/circle-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(239 68 68)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>

frontend/src/index.css

@@ -50,11 +50,11 @@ body.dark {
 
 @layer components {
   .table-default {
-    @apply block w-full table-auto content-start justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
+    @apply block w-full table-auto justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray overflow-auto;
   }
 
   .table-default th {
-    @apply p-4  font-normal text-gray-400 text-nowrap; /* Remove border-r */
+    @apply p-4  font-normal text-gray-400 text-nowrap;
   }
 
   .table-default th {
@@ -62,15 +62,15 @@ body.dark {
   }
 
   .table-default th:last-child {
-    flex: 0; /* Ensure the last column does not stretch unnecessarily */
+    flex: 0;
   }
 
   .table-default td {
-    @apply border-t w-full border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
+    @apply border-t w-full border-silver dark:border-silver/40 px-4 py-2;
   }
 
   .table-default td:last-child {
-    @apply border-r-0; /* Ensure no right border on the last column */
+    @apply border-r-0;
   }
 
   .table-default th,

frontend/src/modals/AddActionModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Exit from '../assets/exit.svg';
+import Input from '../components/Input';
+import { ActiveState } from '../models/misc';
+
+export default function AddActionModal({
+  modalState,
+  setModalState,
+  handleSubmit,
+}: {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  handleSubmit: (actionName: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [actionName, setActionName] = React.useState('');
+  return (
+    <div
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha flex items-center justify-center`}
+    >
+      <article className="flex w-11/12 sm:w-[512px] flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E]">
+        <div className="relative">
+          <button
+            className="absolute top-3 right-4 m-2 w-3"
+            onClick={() => {
+              setModalState('INACTIVE');
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+          <div className="p-6">
+            <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
+              New Action
+            </h2>
+            <div className="mt-6 relative px-3">
+              <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+                Action Name
+              </span>
+              <Input
+                type="text"
+                value={actionName}
+                onChange={(e) => setActionName(e.target.value)}
+                borderVariant="thin"
+                placeholder={'Enter name'}
+              ></Input>
+            </div>
+            <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+              <button
+                onClick={() => {
+                  handleSubmit(actionName);
+                  setModalState('INACTIVE');
+                }}
+                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+              >
+                Add
+              </button>
+              <button
+                onClick={() => {
+                  setModalState('INACTIVE');
+                }}
+                className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+              >
+                {t('modals.configTool.closeButton')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}

frontend/src/modals/AddToolModal.tsx

@@ -1,11 +1,12 @@
 import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import userService from '../api/services/userService';
 import Exit from '../assets/exit.svg';
-import { ActiveState } from '../models/misc';
-import { AvailableTool } from './types';
-import ConfigToolModal from './ConfigToolModal';
 import { useOutsideAlerter } from '../hooks';
-import { useTranslation } from 'react-i18next';
+import { ActiveState } from '../models/misc';
+import ConfigToolModal from './ConfigToolModal';
+import { AvailableToolType } from './types';
 
 export default function AddToolModal({
   message,
@@ -18,12 +19,11 @@ export default function AddToolModal({
   setModalState: (state: ActiveState) => void;
   getUserTools: () => void;
 }) {
-  const [availableTools, setAvailableTools] = React.useState<AvailableTool[]>(
-    [],
-  );
-  const [selectedTool, setSelectedTool] = React.useState<AvailableTool | null>(
-    null,
-  );
+  const [availableTools, setAvailableTools] = React.useState<
+    AvailableToolType[]
+  >([]);
+  const [selectedTool, setSelectedTool] =
+    React.useState<AvailableToolType | null>(null);
   const [configModalState, setConfigModalState] =
     React.useState<ActiveState>('INACTIVE');
   const modalRef = useRef<HTMLDivElement>(null);
@@ -46,7 +46,7 @@ export default function AddToolModal({
       });
   };
 
-  const handleAddTool = (tool: AvailableTool) => {
+  const handleAddTool = (tool: AvailableToolType) => {
     if (Object.keys(tool.configRequirements).length === 0) {
       userService
         .createTool({

frontend/src/modals/ConfigToolModal.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Exit from '../assets/exit.svg';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
-import { AvailableTool } from './types';
+import { AvailableToolType } from './types';
 import userService from '../api/services/userService';
 
 export default function ConfigToolModal({
@@ -15,13 +15,13 @@ export default function ConfigToolModal({
 }: {
   modalState: ActiveState;
   setModalState: (state: ActiveState) => void;
-  tool: AvailableTool | null;
+  tool: AvailableToolType | null;
   getUserTools: () => void;
 }) {
   const { t } = useTranslation();
   const [authKey, setAuthKey] = React.useState<string>('');
 
-  const handleAddTool = (tool: AvailableTool) => {
+  const handleAddTool = (tool: AvailableToolType) => {
     userService
       .createTool({
         name: tool.name,
@@ -75,7 +75,7 @@ export default function ConfigToolModal({
             <div className="mt-8 flex flex-row-reverse gap-1 px-3">
               <button
                 onClick={() => {
-                  handleAddTool(tool as AvailableTool);
+                  handleAddTool(tool as AvailableToolType);
                 }}
                 className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
               >

frontend/src/modals/WrapperModal.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 
 import Exit from '../assets/exit.svg';
-import { WrapperModalProps } from './types';
+import { WrapperModalPropsType } from './types';
 
 export default function WrapperModal({
   children,
   close,
   isPerformingTask,
-}: WrapperModalProps) {
+}: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

frontend/src/modals/types/index.ts

@@ -1,4 +1,4 @@
-export type AvailableTool = {
+export type AvailableToolType = {
   name: string;
   displayName: string;
   description: string;
@@ -10,7 +10,7 @@ export type AvailableTool = {
   }[];
 };
 
-export type WrapperModalProps = {
+export type WrapperModalPropsType = {
   children?: React.ReactNode;
   isPerformingTask?: boolean;
   close: () => void;

frontend/src/settings/Tools.tsx

@@ -10,7 +10,7 @@ import { useDarkTheme } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import { ActiveState } from '../models/misc';
 import ToolConfig from './ToolConfig';
-import { UserTool } from './types';
+import { APIToolType, UserToolType } from './types';
 
 export default function Tools() {
   const { t } = useTranslation();
@@ -18,8 +18,10 @@ export default function Tools() {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [addToolModalState, setAddToolModalState] =
     React.useState<ActiveState>('INACTIVE');
-  const [userTools, setUserTools] = React.useState<UserTool[]>([]);
-  const [selectedTool, setSelectedTool] = React.useState<UserTool | null>(null);
+  const [userTools, setUserTools] = React.useState<UserToolType[]>([]);
+  const [selectedTool, setSelectedTool] = React.useState<
+    UserToolType | APIToolType | null
+  >(null);
 
   const getUserTools = () => {
     userService
@@ -47,7 +49,7 @@ export default function Tools() {
       });
   };
 
-  const handleSettingsClick = (tool: UserTool) => {
+  const handleSettingsClick = (tool: UserToolType) => {
     setSelectedTool(tool);
   };
 

frontend/src/settings/types/index.ts

@@ -19,7 +19,19 @@ export type LogData = {
   timestamp: string;
 };
 
-export type UserTool = {
+export type ParameterGroupType = {
+  type: 'object';
+  properties: {
+    [key: string]: {
+      type: 'string' | 'integer';
+      description: string;
+      value: string | number;
+      filled_by_llm: boolean;
+    };
+  };
+};
+
+export type UserToolType = {
   id: string;
   name: string;
   displayName: string;
@@ -47,3 +59,23 @@ export type UserTool = {
     active: boolean;
   }[];
 };
+
+export type APIActionType = {
+  name: string;
+  url: string;
+  description: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+  query_params: ParameterGroupType;
+  headers: ParameterGroupType;
+  body: ParameterGroupType;
+  active: boolean;
+};
+
+export type APIToolType = {
+  id: string;
+  name: string;
+  displayName: string;
+  description: string;
+  status: boolean;
+  config: { actions: { [key: string]: APIActionType } };
+};