Merge branch 'main' of https://github.com/manishmadan2882/docsgpt

frontend/src/modals/AddActionModal.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import WrapperModal from './WrapperModal';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
+import WrapperModal from './WrapperModal';
+
+type AddActionModalProps = {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  handleSubmit: (actionName: string) => void;
+};
 
 const isValidFunctionName = (name: string): boolean => {
   const pattern = /^[a-zA-Z0-9_-]+$/;
   return pattern.test(name);
 };
 
-interface AddActionModalProps {
-  modalState: ActiveState;
-  setModalState: (state: ActiveState) => void;
-  handleSubmit: (actionName: string) => void;
-}
-
 export default function AddActionModal({
   modalState,
   setModalState,
@@ -23,21 +23,20 @@ export default function AddActionModal({
 }: AddActionModalProps) {
   const { t } = useTranslation();
   const [actionName, setActionName] = React.useState('');
-  const [functionNameError, setFunctionNameError] = useState<boolean>(false); // New error state
+  const [functionNameError, setFunctionNameError] = useState<boolean>(false);
 
   const handleAddAction = () => {
     if (!isValidFunctionName(actionName)) {
-      setFunctionNameError(true); // Set error state if invalid
+      setFunctionNameError(true);
       return;
     }
-    setFunctionNameError(false); // Clear error state if valid
+    setFunctionNameError(false);
     handleSubmit(actionName);
+    setActionName('');
     setModalState('INACTIVE');
   };
 
-  // Only render when modal is active
   if (modalState !== 'ACTIVE') return null;
-
   return (
     <WrapperModal
       close={() => setModalState('INACTIVE')}
@@ -47,27 +46,32 @@ export default function AddActionModal({
         <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
           New Action
         </h2>
-        <div className="mt-6 px-3">
+        <div className="mt-6 relative px-3">
+          <span className="z-10 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)}
+            onChange={(e) => {
+              const value = e.target.value;
+              setActionName(value);
+              setFunctionNameError(!isValidFunctionName(value));
+            }}
             borderVariant="thin"
-            placeholder="Enter name"
-            label="Action Name"
+            placeholder={'Enter name'}
           />
-          <p className="mt-1 text-gray-500 text-xs">
-            Use only letters, numbers, underscores, and hyphens (e.g.,
-            `get_user_data`, `send-report`).
+          <p
+            className={`mt-2 ml-1 text-xs italic ${
+              functionNameError ? 'text-red-500' : 'text-gray-500'
+            }`}
+          >
+            {functionNameError
+              ? 'Invalid function name format. Use only letters, numbers, underscores, and hyphens.'
+              : 'Use only letters, numbers, underscores, and hyphens (e.g., `get_data`, `send_report`, etc.)'}
           </p>
-          {functionNameError && (
-            <p className="mt-1 text-red-500 text-xs">
-              Invalid function name format. Use only letters, numbers,
-              underscores, and hyphens.
-            </p>
-          )}
         </div>
-        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+        <div className="mt-3 flex flex-row-reverse gap-1 px-3">
           <button
             onClick={handleAddAction}
             className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
@@ -75,7 +79,11 @@ export default function AddActionModal({
             Add
           </button>
           <button
-            onClick={() => setModalState('INACTIVE')}
+            onClick={() => {
+              setFunctionNameError(false);
+              setModalState('INACTIVE');
+              setActionName('');
+            }}
             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')}

frontend/src/modals/AddToolModal.tsx

@@ -6,6 +6,7 @@ import { useOutsideAlerter } from '../hooks';
 import { ActiveState } from '../models/misc';
 import ConfigToolModal from './ConfigToolModal';
 import { AvailableToolType } from './types';
+import Spinner from '../components/Spinner';
 import WrapperComponent from './WrapperModal';
 
 export default function AddToolModal({
@@ -21,6 +22,8 @@ export default function AddToolModal({
   getUserTools: () => void;
   onToolAdded: (toolId: string) => void;
 }) {
+  const { t } = useTranslation();
+  const modalRef = useRef<HTMLDivElement>(null);
   const [availableTools, setAvailableTools] = React.useState<
     AvailableToolType[]
   >([]);
@@ -28,8 +31,7 @@ export default function AddToolModal({
     React.useState<AvailableToolType | null>(null);
   const [configModalState, setConfigModalState] =
     React.useState<ActiveState>('INACTIVE');
-  const modalRef = useRef<HTMLDivElement>(null);
-  const { t } = useTranslation();
+  const [loading, setLoading] = React.useState(false);
 
   useOutsideAlerter(modalRef, () => {
     if (modalState === 'ACTIVE') {
@@ -38,6 +40,7 @@ export default function AddToolModal({
   }, [modalState]);
 
   const getAvailableTools = () => {
+    setLoading(true);
     userService
       .getAvailableTools()
       .then((res) => {
@@ -45,6 +48,7 @@ export default function AddToolModal({
       })
       .then((data) => {
         setAvailableTools(data.data);
+        setLoading(false);
       });
   };
 
@@ -85,7 +89,6 @@ export default function AddToolModal({
   React.useEffect(() => {
     if (modalState === 'ACTIVE') getAvailableTools();
   }, [modalState]);
-
   return (
     <>
       {modalState === 'ACTIVE' && (
@@ -94,46 +97,55 @@ export default function AddToolModal({
           className="h-[85vh] w-[90vw] md:w-[75vw]"
         >
           <div className="flex flex-col gap-4 h-full">
-            <div className="p-6">
+            <div>
               <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
                 {t('settings.tools.selectToolSetup')}
               </h2>
               <div className="mt-5 flex flex-col sm:grid sm:grid-cols-3 gap-4 h-[73vh] overflow-auto px-3 py-px">
-                {availableTools.map((tool, index) => (
-                  <div
-                    role="button"
-                    tabIndex={0}
-                    key={index}
-                    className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer"
-                    onClick={() => {
-                      setSelectedTool(tool);
-                      handleAddTool(tool);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                {loading ? (
+                  <div className="h-full col-span-3 flex items-center justify-center">
+                    <Spinner />
+                  </div>
+                ) : (
+                  availableTools.map((tool, index) => (
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      key={index}
+                      className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
+                      onClick={() => {
                         setSelectedTool(tool);
                         handleAddTool(tool);
-                      }
-                    }}
-                  >
-                    <div className="w-full">
-                      <div className="px-1 w-full flex items-center justify-between">
-                        <img
-                          src={`/toolIcons/tool_${tool.name}.svg`}
-                          className="h-8 w-8"
-                        />
-                      </div>
-                      <div className="mt-[9px]">
-                        <p className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize">
-                          {tool.displayName}
-                        </p>
-                        <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">
-                          {tool.description}
-                        </p>
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          setSelectedTool(tool);
+                          handleAddTool(tool);
+                        }
+                      }}
+                    >
+                      <div className="w-full">
+                        <div className="px-1 w-full flex items-center justify-between">
+                          <img
+                            src={`/toolIcons/tool_${tool.name}.svg`}
+                            className="h-8 w-8"
+                          />
+                        </div>
+                        <div className="mt-[9px]">
+                          <p
+                            title={tool.displayName}
+                            className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize truncate"
+                          >
+                            {tool.displayName}
+                          </p>
+                          <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">
+                            {tool.description}
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
+                  ))
+                )}
               </div>
             </div>
           </div>