feat: tools frontend and endpoints refactor

2025-11-30 00:53:14 +00:00 · 2024-12-18 22:48:40 +05:30
parent f87ae429f4
commit f9a7db11eb
23 changed files with 1069 additions and 168 deletions
--- a/frontend/src/modals/ConfigToolModal.tsx
+++ b/frontend/src/modals/ConfigToolModal.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import Exit from '../assets/exit.svg';
+import Input from '../components/Input';
+import { ActiveState } from '../models/misc';
+import { AvailableTool } from './types';
+import userService from '../api/services/userService';
+
+export default function ConfigToolModal({
+  modalState,
+  setModalState,
+  tool,
+  getUserTools,
+}: {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  tool: AvailableTool | null;
+  getUserTools: () => void;
+}) {
+  const [authKey, setAuthKey] = React.useState<string>('');
+
+  const handleAddTool = (tool: AvailableTool) => {
+    userService
+      .createTool({
+        name: tool.name,
+        displayName: tool.displayName,
+        description: tool.description,
+        config: { token: authKey },
+        actions: tool.actions,
+        status: true,
+      })
+      .then(() => {
+        setModalState('INACTIVE');
+        getUserTools();
+      });
+  };
+  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">
+              Tool Config
+            </h2>
+            <p className="mt-5 text-sm text-gray-600 dark:text-gray-400 px-3">
+              Type: <span className="font-semibold">{tool?.name} </span>
+            </p>
+            <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">
+                API Key / Oauth
+              </span>
+              <Input
+                type="text"
+                value={authKey}
+                onChange={(e) => setAuthKey(e.target.value)}
+                borderVariant="thin"
+                placeholder="Enter API Key / Oauth"
+              ></Input>
+            </div>
+            <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+              <button
+                onClick={() => {
+                  handleAddTool(tool as AvailableTool);
+                }}
+                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+              >
+                Add Tool
+              </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"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}