(feat:tools) ask for custom names

frontend/src/modals/ConfigToolModal.tsx

@@ -25,6 +25,7 @@ export default function ConfigToolModal({
   const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [authKey, setAuthKey] = React.useState<string>('');
+  const [customName, setCustomName] = React.useState<string>('');
 
   const handleAddTool = (tool: AvailableToolType) => {
     userService
@@ -34,6 +35,7 @@ export default function ConfigToolModal({
           displayName: tool.displayName,
           description: tool.description,
           config: { token: authKey },
+          customName: customName,
           actions: tool.actions,
           status: true,
         },
@@ -58,6 +60,16 @@ export default function ConfigToolModal({
           {t('modals.configTool.type')}:{' '}
           <span className="font-semibold">{tool?.name}</span>
         </p>
+        <div className="mt-6 px-3">
+          <Input
+            type="text"
+            value={customName}
+            onChange={(e) => setCustomName(e.target.value)}
+            borderVariant="thin"
+            placeholder="Enter custom name (optional)"
+            labelBgClassName="bg-white dark:bg-charleston-green-2"
+          />
+        </div>
         <div className="mt-6 px-3">
           <Input
             type="text"

frontend/src/settings/Tools.tsx

@@ -80,8 +80,8 @@ export default function Tools() {
       label: t('settings.tools.delete'),
       onClick: () => handleDeleteTool(tool),
       variant: 'danger',
-      iconWidth: 18,
-      iconHeight: 18,
+      iconWidth: 12,
+      iconHeight: 12,
     },
   ];
 
@@ -205,7 +205,7 @@ export default function Tools() {
                 ) : (
                   userTools
                     .filter((tool) =>
-                      tool.displayName
+                      (tool.customName || tool.displayName)
                         .toLowerCase()
                         .includes(searchTerm.toLowerCase()),
                     )
@@ -250,10 +250,10 @@ export default function Tools() {
                           </div>
                           <div className="mt-[9px]">
                             <p
-                              title={tool.displayName}
+                              title={tool.customName || tool.displayName}
                               className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
                             >
-                              {tool.displayName}
+                              {tool.customName || tool.displayName}
                             </p>
                             <p className="mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
                               {tool.description}
@@ -269,7 +269,7 @@ export default function Tools() {
                             size="small"
                             id={`toolToggle-${index}`}
                             ariaLabel={t('settings.tools.toggleToolAria', {
-                              toolName: tool.displayName,
+                              toolName: tool.customName || tool.displayName,
                             })}
                           />
                         </div>