feat: UX improvements in tooling (#413)

* feat: show/hide config tools * feat: update enabled when config changes * clean up * fix * fix * fix: required fields
dcSpark · Aug 22, 2024 · 9826c14 · 9826c14
1 parent efe1927
commit 9826c14
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/apps/shinkai-desktop/src/components/tools/js-tool.tsx b/apps/shinkai-desktop/src/components/tools/js-tool.tsx
@@ -26,6 +26,7 @@ const jsToolSchema = z.object({
     z.object({
       key_name: z.string(),
       key_value: z.string().optional(),
+      required: z.boolean(),
     }),
   ),
 });
@@ -58,11 +59,22 @@ export default function JsTool({
       config: tool.config.map((conf) => ({
         key_name: conf.BasicConfig.key_name,
         key_value: conf.BasicConfig.key_value ?? '',
+        required: conf.BasicConfig.required,
       })),
     },
   });
 
   const onSubmit = async (data: JsToolFormSchema) => {
+    let enabled = isEnabled;
+
+    if (
+      data.config.every(
+        (conf) => !conf.required || (conf.required && conf.key_value !== ''),
+      )
+    ) {
+      enabled = true;
+    }
+
     await updateTool({
       toolKey: toolKey ?? '',
       toolType: 'JS',
@@ -74,7 +86,7 @@ export default function JsTool({
           },
         })),
       } as ShinkaiTool,
-      isToolEnabled: isEnabled,
+      isToolEnabled: enabled,
       nodeAddress: auth?.node_address ?? '',
       shinkaiIdentity: auth?.shinkai_identity ?? '',
       profile: auth?.profile ?? '',
@@ -150,8 +162,9 @@ export default function JsTool({
                       name={`config.${index}.key_value`}
                       render={({ field }) => (
                         <TextField
-                          field={{ ...field }}
+                          field={field}
                           label={formatText(conf.BasicConfig.key_name)}
+                          type="password"
                         />
                       )}
                     />

diff --git a/libs/shinkai-ui/src/assets/icons/general.tsx b/libs/shinkai-ui/src/assets/icons/general.tsx
@@ -16,6 +16,7 @@ export const ShinkaiLogoIcon = ({ className }: { className?: string }) => (
     />
   </svg>
 );
+
 export const ExportIcon = ({ className }: { className?: string }) => (
   <svg
     className={className}

diff --git a/libs/shinkai-ui/src/components/input.tsx b/libs/shinkai-ui/src/components/input.tsx
@@ -1,7 +1,9 @@
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
 import * as React from 'react';
 import { useEffect, useImperativeHandle, useRef } from 'react';
 
 import { cn } from '../utils';
+import { Button } from '.';
 import { Badge } from './badge';
 
 export interface InputProps
@@ -15,6 +17,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputRef = useRef<HTMLInputElement>(null);
     const startAdornmentRef = useRef<HTMLDivElement>(null);
     const endAdornmentRef = useRef<HTMLDivElement>(null);
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    const togglePasswordVisibility = () => {
+      setShowPassword(!showPassword);
+    };
 
     const style: React.CSSProperties = {};
     if (startAdornment) {
@@ -38,19 +45,23 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         }, 0);
       }
     }, [props.autoFocus]);
+
+    const inputType = type === 'password' && showPassword ? 'text' : type;
+
     return (
       <>
         <input
           className={cn(
             'h-input disabled:text-gray-80 peer w-full rounded-lg border border-gray-200 bg-gray-400 px-4 py-3 pt-8 text-sm font-medium text-white placeholder-transparent outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-gray-200 focus:border focus:border-gray-100 focus:outline-0 disabled:border-0 disabled:bg-gray-400',
             startAdornment && 'pl-[var(--custom-padding-left-input)]',
             endAdornment && 'pr-[var(--custom-padding-right-input)]',
+            type === 'password' && 'pr-[60px]',
             className,
           )}
           placeholder=" "
           ref={inputRef}
           style={style}
-          type={type}
+          type={inputType}
           {...props}
         />
         {startAdornment ? (
@@ -78,6 +89,22 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               ref: endAdornmentRef,
             })
           : null}
+        {type === 'password' && (
+          <Button
+            aria-label={showPassword ? 'Hide password' : 'Show password'}
+            className="peer/adornment adornment text-gray-80 hover:bg-gray-350 absolute right-3 top-3"
+            onClick={togglePasswordVisibility}
+            size={'icon'}
+            type="button"
+            variant={'ghost'}
+          >
+            {showPassword ? (
+              <EyeOffIcon aria-hidden="true" className="h-4 w-4" />
+            ) : (
+              <EyeIcon aria-hidden="true" className="h-4 w-4" />
+            )}
+          </Button>
+        )}
       </>
     );
   },
-Original file line number
+Diff line change
@@ Expand Up @@
         />
       </svg>
     );
     export const ExportIcon = ({ className }: { className?: string }) => (
       <svg
         className={className}
@@ Expand Down @@