feat: enhance aggregate parameter input with multi-select presets (#7168)

## [Dashboard] Feature: Enhance Aggregate Parameter Input with Multi-Select Functionality

## Notes for the reviewer
This PR replaces the simple dropdown select with a more robust multi-select component for aggregate parameter inputs. The new implementation allows users to select multiple presets and displays them as badges.

## How to test
Test the new aggregate parameter input by:
1. Opening the insight blueprint page
2. Selecting multiple presets from the dropdown
3. Verifying that selected values appear as badges
4. Testing the search functionality within the preset selector
5. Confirming that manual input still works alongside preset selection

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Enhanced aggregate parameter input with combined manual entry and multi-select for presets.
  - Added search functionality within the multi-select component for easier preset selection.
  - Updated parameter descriptions and examples for "aggregate" to clarify multi-selection usage.
- **Refactor**
  - Made input options optional and improved synchronization between manual input and multi-select.
  - Adjusted tooltip positioning for better UI alignment on aggregate parameters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `ParameterSection` and `AggregateParameterInput` components to provide dynamic descriptions and examples based on the parameter type. It also refines the handling of selected values and manual input for aggregations, replacing the `Select` component with a `MultiSelect`.

### Detailed summary
- Updated `description` and `exampleToShow` in `ParameterSection` based on `param.name`.
- Introduced `MultiSelect` in `AggregateParameterInput` for selecting aggregation presets.
- Added state management for manual input and selected values.
- Removed the `Select` component in favor of a more flexible input system.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: catalyst17

apps/playground-web/src/app/insight/[blueprint_slug]/aggregate-parameter-input.client.tsx

@@ -1,14 +1,9 @@
 "use client";
 
+import { MultiSelect } from "@/components/blocks/multi-select";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
 interface Preset {
@@ -145,53 +140,137 @@ interface AggregateParameterInputProps {
     },
     string
   >;
-  showTip: boolean;
-  hasError: boolean;
-  placeholder: string;
-  endpointPath: string; // New prop
+  showTip?: boolean;
+  hasError?: boolean;
+  placeholder?: string;
+  endpointPath: string;
 }
 
 export function AggregateParameterInput(props: AggregateParameterInputProps) {
-  const { field, showTip, hasError, placeholder, endpointPath } = props;
+  const { field, placeholder, endpointPath, showTip } = props;
   const { value, onChange } = field;
 
-  const presets = getAggregatePresets(endpointPath);
+  const presets = useMemo(
+    () => getAggregatePresets(endpointPath),
+    [endpointPath],
+  );
+
+  const selectedValues = useMemo(() => {
+    if (!value) return [];
+    return Array.from(
+      new Set(
+        String(value)
+          .split(",")
+          .map((v) => v.trim()) // remove leading / trailing spaces
+          .filter(Boolean),
+      ),
+    );
+  }, [value]);
+
+  const handlePresetChange = useCallback(
+    (values: string[]) => {
+      onChange({ target: { value: values.join(",") } });
+    },
+    [onChange],
+  );
+
+  // Custom search function for the MultiSelect
+  const searchFunction = useCallback(
+    (option: { value: string; label: string }, searchTerm: string) => {
+      if (!searchTerm) return true;
+      const query = searchTerm.toLowerCase();
+      return (
+        option.label.toLowerCase().includes(query) ||
+        option.value.toLowerCase().includes(query)
+      );
+    },
+    [],
+  );
+
+  // Get display values for the selected items
+  useCallback(
+    (value: string) => {
+      const preset = presets.find((p) => p.value === value);
+      return preset ? preset.label : value;
+    },
+    [presets],
+  );
+
+  // Format selected values for display in the MultiSelect
+  useMemo(() => {
+    return selectedValues.map((value) => {
+      const preset = presets.find((p) => p.value === value);
+      return {
+        label: preset?.label || value,
+        value,
+      };
+    });
+  }, [selectedValues, presets]);
+
+  // State for the manual input text
+  const [manualInput, setManualInput] = useState("");
+
+  // Update manual input when selected values change
+  useEffect(() => {
+    if (selectedValues.length === 0) {
+      setManualInput("");
+    } else {
+      setManualInput(selectedValues.join(", "));
+    }
+  }, [selectedValues]);
+
+  // Handle manual input changes
+  const handleManualInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setManualInput(value);
+
+    // Update selected values by splitting on commas and trimming whitespace
+    const newValues = value
+      .split(",")
+      .map((v) => v.trim())
+      .filter(Boolean);
+
+    onChange({ target: { value: newValues.join(",") } });
+  };
 
   return (
-    <div className="flex flex-col space-y-1">
-      <Input
-        {...field}
+    <div className="w-full">
+      {/* Editable formula text field */}
+      <div className="relative">
+        <Input
+          value={manualInput}
+          onChange={handleManualInputChange}
+          placeholder={placeholder}
+          className={cn(
+            "h-auto truncate rounded-none border-0 bg-transparent py-3 font-mono text-sm focus-visible:ring-0 focus-visible:ring-offset-0",
+            showTip && "lg:pr-10",
+          )}
+        />
+      </div>
+
+      {/* MultiSelect for choosing aggregations */}
+      <MultiSelect
+        options={presets}
+        selectedValues={selectedValues}
+        onSelectedValuesChange={handlePresetChange}
+        placeholder="Select presets (optional)"
+        searchPlaceholder="Search aggregation presets"
         className={cn(
-          "h-auto truncate rounded-none border-0 bg-transparent py-5 font-mono text-sm focus-visible:ring-0 focus-visible:ring-offset-0",
-          showTip && "lg:pr-10",
-          hasError && "text-destructive-text",
+          "rounded-none border-0 border-border border-t-2 border-dashed",
+          "hover:bg-inherit",
+        )}
+        popoverContentClassName="min-w-[calc(100vw-20px)] lg:min-w-[500px]"
+        selectedBadgeClassName="font-normal"
+        overrideSearchFn={searchFunction}
+        renderOption={(option) => (
+          <div className="flex w-full items-center justify-between">
+            <span className="truncate">{option.label}</span>
+            <span className="ml-2 truncate font-mono text-muted-foreground text-xs">
+              {option.value}
+            </span>
+          </div>
         )}
-        placeholder={placeholder}
       />
-      <Select
-        value={presets.find((p) => p.value === value)?.value || ""}
-        onValueChange={(selectedValue) => {
-          if (selectedValue) {
-            onChange({ target: { value: selectedValue } });
-          }
-        }}
-      >
-        <SelectTrigger
-          className={cn(
-            "h-8 border-dashed bg-transparent text-xs focus:ring-0 focus:ring-offset-0",
-            !presets.find((p) => p.value === value) && "text-muted-foreground",
-          )}
-        >
-          <SelectValue placeholder="Select a preset (optional)" />
-        </SelectTrigger>
-        <SelectContent className="font-mono">
-          {presets.map((preset) => (
-            <SelectItem key={preset.value} value={preset.value}>
-              {preset.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
     </div>
   );
 }

apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx

@@ -527,7 +527,9 @@ function ParameterSection(props: {
                                 <div className="flex flex-col gap-2">
                                   {description && (
                                     <p className="text-foreground">
-                                      {description}
+                                      {param.name === "aggregate"
+                                        ? "Aggregation(s). You can type in multiple, separated by a comma, or select from the presets"
+                                        : description}
                                     </p>
                                   )}
 
@@ -536,7 +538,9 @@ function ParameterSection(props: {
                                       <p className="mb-1 text-muted-foreground">
                                         Example:{" "}
                                         <span className="font-mono">
-                                          {exampleToShow}
+                                          {param.name === "aggregate"
+                                            ? "count() AS count_all, countDistinct(address) AS unique_addresses"
+                                            : exampleToShow}
                                         </span>
                                       </p>
                                     </div>
@@ -547,7 +551,10 @@ function ParameterSection(props: {
                               <Button
                                 asChild
                                 variant="ghost"
-                                className="-translate-y-1/2 absolute top-1/2 right-2 hidden h-auto w-auto p-1.5 text-muted-foreground opacity-50 hover:opacity-100 lg:flex"
+                                className={cn(
+                                  "-translate-y-1/2 absolute top-1/2 right-2 hidden h-auto w-auto p-1.5 text-muted-foreground opacity-50 hover:opacity-100 lg:flex",
+                                  param.name === "aggregate" && "top-[21px]",
+                                )}
                               >
                                 <div>
                                   <InfoIcon className="size-4" />