change event filter input to a MultiSelect

Significant-Gravitas · Nov 5, 2024 · dd446a7 · dd446a7
1 parent 5c82edc
commit dd446a7
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 24 deletions.
diff --git a/autogpt_platform/backend/backend/blocks/github/triggers.py b/autogpt_platform/backend/backend/blocks/github/triggers.py
@@ -73,7 +73,9 @@ class EventsFilter(BaseModel):
             auto_merge_enabled: bool = False
             auto_merge_disabled: bool = False
 
-        events: EventsFilter = SchemaField(description="The events to subscribe to")
+        events: EventsFilter = SchemaField(
+            title="Events", description="The events to subscribe to"
+        )
 
     class Output(GitHubTriggerBase.Output):
         event: str = SchemaField(

diff --git a/autogpt_platform/frontend/src/app/globals.css b/autogpt_platform/frontend/src/app/globals.css
@@ -74,7 +74,7 @@
   }
 
   .agpt-border-input {
-    @apply border-input focus-visible:border-gray-400 focus-visible:outline-none;
+    @apply border border-input focus-visible:border-gray-400 focus-visible:outline-none;
   }
 
   .agpt-shadow-input {

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -207,7 +207,10 @@ export function CustomNode({
                     side="left"
                   />
                 ) : (
-                  <span className="text-m green mb-0 text-gray-900">
+                  <span
+                    className="text-m green mb-0 text-gray-900"
+                    title={propSchema.description}
+                  >
                     {propKey == "credentials"
                       ? "Credentials"
                       : propSchema.title || beautifyString(propKey)}

diff --git a/autogpt_platform/frontend/src/components/flow.css b/autogpt_platform/frontend/src/components/flow.css
@@ -11,22 +11,6 @@ code {
     monospace;
 }
 
-input,
-textarea {
-  background-color: #ffffff;
-  color: #000000;
-  border: 1px solid #555;
-  padding: 8px;
-  border-radius: 4px;
-  width: calc(100% - 18px);
-  box-sizing: border-box;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: #aaa;
-}
-
 .modal {
   position: absolute;
   top: 50%;

diff --git a/autogpt_platform/frontend/src/components/node-input-components.tsx b/autogpt_platform/frontend/src/components/node-input-components.tsx
@@ -21,6 +21,14 @@ import {
   SelectValue,
 } from "./ui/select";
 import { Input } from "./ui/input";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "./ui/multiselect";
 import NodeHandle from "./NodeHandle";
 import { ConnectionData } from "./CustomNode";
 import { CredentialsInput } from "./integrations/credentials-input";
@@ -134,6 +142,37 @@ export const NodeGenericInputField: FC<{
   }
 
   if ("properties" in propSchema) {
+    // Render a multi-select for all-boolean sub-schemas with more than 3 properties
+    if (
+      Object.values(propSchema.properties).every(
+        (subSchema) => "type" in subSchema && subSchema.type == "boolean",
+      ) &&
+      Object.keys(propSchema.properties).length >= 3
+    ) {
+      const options = Object.keys(propSchema.properties);
+      const selectedKeys = Object.entries(currentValue || {})
+        .filter(([_, v]) => v)
+        .map(([k, _]) => k);
+      return (
+        <NodeMultiSelectInput
+          selfKey={propKey}
+          schema={propSchema}
+          selection={selectedKeys}
+          error={errors[propKey]}
+          className={className}
+          displayName={displayName}
+          handleInputChange={(key, selection) => {
+            handleInputChange(
+              key,
+              Object.fromEntries(
+                options.map((option) => [option, selection.includes(option)]),
+              ),
+            );
+          }}
+        />
+      )
+    }
+
     return (
       <NodeObjectInputTree
         nodeId={nodeId}
@@ -579,6 +618,59 @@ const NodeArrayInput: FC<{
   );
 };
 
+const NodeMultiSelectInput: FC<{
+  selfKey: string;
+  schema: BlockIOObjectSubSchema;  // TODO: Support BlockIOArraySubSchema
+  selection?: string[];
+  error?: string;
+  className?: string;
+  displayName?: string;
+  handleInputChange: NodeObjectInputTreeProps["handleInputChange"];
+}> = ({
+  selfKey,
+  schema,
+  selection = [],
+  error,
+  className,
+  displayName,
+  handleInputChange,
+}) => {
+  const options = Object.keys(schema.properties);
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <MultiSelector
+        values={selection}
+        onValuesChange={(v) => handleInputChange(selfKey, v)}
+      >
+        <MultiSelectorTrigger>
+          <MultiSelectorInput
+            placeholder={
+              schema.placeholder ?? `Select ${displayName || schema.title}...`
+            }
+          />
+        </MultiSelectorTrigger>
+        <MultiSelectorContent>
+          <MultiSelectorList>
+            {options
+              .map(key => ({ ...schema.properties[key], key }))
+              .map(({ key, title, description }) => (
+                <MultiSelectorItem
+                  key={key}
+                  value={key}
+                  title={description}
+                >
+                  {title ?? key}
+                </MultiSelectorItem>
+              ))}
+          </MultiSelectorList>
+        </MultiSelectorContent>
+      </MultiSelector>
+      {error && <span className="error-message">{error}</span>}
+    </div>
+  );
+}
+
 const NodeStringInput: FC<{
   selfKey: string;
   schema: BlockIOStringSubSchema;
@@ -759,7 +851,7 @@ const NodeBooleanInput: FC<{
           checked={value}
           onCheckedChange={(v) => handleInputChange(selfKey, v)}
         />
-        <span className="ml-3">{displayName}</span>
+        {displayName && <span className="ml-3">{displayName}</span>}
       </div>
       {error && <span className="error-message">{error}</span>}
     </div>

diff --git a/autogpt_platform/frontend/src/components/ui/multiselect.tsx b/autogpt_platform/frontend/src/components/ui/multiselect.tsx
@@ -144,7 +144,7 @@ const MultiSelector = forwardRef<HTMLDivElement, MultiSelectorProps>(
           ref={ref}
           onKeyDown={handleKeyDown}
           className={cn(
-            "flex flex-col space-y-2 overflow-visible bg-transparent",
+            "flex flex-col overflow-visible bg-transparent",
             className,
           )}
           dir={dir}
@@ -174,7 +174,7 @@ const MultiSelectorTrigger = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "flex flex-wrap gap-1 rounded-lg border border-muted bg-background p-1 py-2",
+        "agpt-border-input agpt-shadow-input flex flex-wrap gap-1 rounded-lg text-sm bg-background py-2 px-3 pl-1",
         className,
       )}
       {...props}
@@ -183,7 +183,7 @@ const MultiSelectorTrigger = forwardRef<
         <Badge
           key={item}
           className={cn(
-            "flex items-center gap-1 rounded-xl px-1",
+            "flex items-center gap-1 rounded-xl px-1 pl-2",
             activeIndex === index && "ring-2 ring-muted-foreground",
           )}
           variant={"secondary"}
@@ -240,7 +240,7 @@ const MultiSelectorContent = forwardRef<
 >(({ children }, ref) => {
   const { open } = useMultiSelect();
   return (
-    <div ref={ref} className="relative">
+    <div ref={ref} className="relative mt-2">
       {open && children}
     </div>
   );