@superatomai/sdk-node 0.0.43 → 0.0.44

package/dist/index.mjs

@@ -1174,65 +1174,47 @@ You MUST respond with ONLY a valid JSON object (no markdown, no code blocks):
 
 ## Your Task
 
-1. **Create a filter component** based on the user's request (DatePicker, Dropdown, SearchBox, etc.)
-2. **Update all existing components** to use the filter values in their queries/params
+1. **Create a filter component** based on the user's request
+2. **Update existing components** with dynamic title/description interpolation if needed
+3. **Preserve all existing props** - the filter system handles param merging at runtime
 
-## Filter Types
+## How The Filter System Works
 
-Choose the appropriate filter component based on user intent:
-- **DateRangePicker**: For date range filtering (start date, end date)
-- **DatePicker**: For single date filtering
-- **Dropdown**: For categorical filtering (status, category, type, etc.)
-- **MultiSelect**: For multiple value selection
-- **SearchBox**: For text search filtering
-- **NumberRange**: For numeric range filtering
+1. Filter component has a \`filters\` array with preset options, each containing \`label\`, \`value\`, and \`params\`
+2. When user selects a filter option, those \`params\` are broadcast to all listening components
+3. Components automatically merge filter params with their existing params (filter values override defaults)
+4. Component titles/descriptions can use \`{%filterKeyLabel%}\` syntax for dynamic text
 
 ## Filter Component Structure
 
-Generate a filter component with these props:
-\`\`\`json
-{
-  "componentId": "unique_filter_id",
-  "componentType": "DateRangePicker | Dropdown | SearchBox | etc.",
-  "componentName": "Display Name",
-  "props": {
-    "filterId": "unique_filter_id",
-    "label": "Filter Label",
-    "defaultValue": "optional default value",
-    "options": []
-  }
-}
-\`\`\`
+The filter uses DynamicFilterDropdown with:
+- **filterKey**: Identifier for label interpolation (e.g., "period", "name", "category")
+- **filters**: Array of options with label, value, params, and optionally isDefault
+- **defaultValue**: The value of the initially selected option
 
-## Updating Existing Components
-
-For each existing component, update its query/externalTool to use the filter:
-
-### For Database Queries:
-- Add filter conditions to WHERE clause using \`$paramName\` placeholders
-- Add the filter param to the \`params\` object with binding reference
+## Dynamic Title/Description Interpolation
 
-### For External Tools:
-- Add filter params to the tool's params object with binding reference
+Use \`{%filterKeyLabel%}\` syntax for dynamic text:
+- filterKey "period" \u2192 use \`{%periodLabel%}\` in titles/descriptions
+- filterKey "name" \u2192 use \`{%nameLabel%}\` in titles/descriptions
+- Example: \`"{%periodLabel%} Revenue"\` becomes "Q3 2025 Revenue" when user selects "Q3 2025"
 
-## Filter Bindings
+**CRITICAL Template Syntax:**
+- Use \`{%keyLabel%}\` format (percent signs, key + "Label" suffix)
+- Do NOT use \`{{...}}\` or \`$...\` syntax - these don't work
 
-Use this binding format to connect filter values to component params:
-\`\`\`json
-{
-  "paramName": "$filter.filterId.value"
-}
-\`\`\`
-
-For DateRangePicker:
-- \`$filter.filterId.startDate\`
-- \`$filter.filterId.endDate\`
+## Updating Existing Components
 
-For Dropdown/MultiSelect:
-- \`$filter.filterId.value\`
+**IMPORTANT - Parameter Handling:**
+- Do NOT change existing parameter values to placeholders
+- Keep all existing/default parameter values as they are
+- The filter system MERGES params at runtime: filter params override component defaults
 
-For SearchBox:
-- \`$filter.filterId.searchText\`
+**What to modify in existing components:**
+- Modify \`title\` for \`{%filterKeyLabel%}\` interpolation (only if title exists)
+- Modify \`description\` for interpolation (only if description exists)
+- Modify other props only if specifically needed for the filter to function
+- Copy ALL other props exactly as provided
 
 ### Database Query Rules
 {{DATABASE_RULES}}
@@ -1243,53 +1225,48 @@ You MUST respond with ONLY a valid JSON object (no markdown, no code blocks):
 
 {
   "filterComponent": {
-    "componentId": "filter_unique_id",
-    "componentType": "DateRangePicker | Dropdown | etc.",
-    "componentName": "Filter Display Name",
+    "id": "filter-<descriptive-id>",
+    "name": "DynamicFilterDropdown",
+    "type": "FilterDropdown",
     "props": {
-      "filterId": "filter_unique_id",
-      "label": "Filter Label",
-      "defaultValue": null,
-      "options": []
+      "title": "<Filter display title>",
+      "filterKey": "<key_for_interpolation>",
+      "defaultValue": "<default_option_value>",
+      "filters": [
+        {
+          "label": "<Display label for option>",
+          "value": "<unique_option_value>",
+          "params": { "<param_key>": "<actual_value>", "...": "..." },
+          "isDefault": true
+        }
+      ]
     }
   },
   "updatedComponents": [
     {
-      "componentId": "existing_component_id",
-      "componentType": "existing_type",
-      "componentName": "existing_name",
+      "id": "<existing_component_id>",
+      "name": "<existing_component_name>",
+      "type": "<existing_type>",
       "props": {
-        // RETURN THE COMPLETE PROPS OBJECT
-        // Copy ALL existing props and only modify the necessary fields
-        "title": "Existing Title",
-        "description": "Existing Description",
-        "config": {},
-        "query": {
-          "sql": "SELECT ... WHERE column BETWEEN $startDate AND $endDate",
-          "params": {
-            "existingParam": "existing_value",
-            "startDate": "$filter.filterId.startDate",
-            "endDate": "$filter.filterId.endDate"
-          }
-        }
+        "...all existing props preserved...",
+        "title": "{%<filterKey>Label%} <rest of title>",
+        "description": "<updated if needed>"
       }
     }
   ],
   "filterBindings": {
-    "startDate": "$filter.filterId.startDate",
-    "endDate": "$filter.filterId.endDate"
+    "<param_key>": "Describes which filter param this binds to"
   },
-  "reasoning": "Explanation of filter choice and how components were updated"
+  "reasoning": "Explanation of filter choice and what params it provides"
 }
 
-**CRITICAL:**
-- Return ONLY valid JSON (no markdown code blocks, no text before/after)
-- **RETURN COMPLETE PROPS**: Copy ALL existing props from each component, only modify what's needed for the filter
-- Do NOT omit existing props like title, description, config - include them unchanged
-- Only modify query.sql (add WHERE conditions) and query.params (add filter bindings)
-- For externalTool, only add filter params to the params object
-- Use consistent param naming across all components
-- Ensure SQL syntax is valid with the new filter conditions
+**CRITICAL RULES:**
+1. Return ONLY valid JSON (no markdown code blocks)
+2. **COPY ALL existing props** - modify title/description for interpolation only if they exist
+3. **DO NOT change parameter values** - keep existing defaults, filter merges at runtime
+4. Use \`{%filterKeyLabel%}\` for dynamic text (NOT \`{{...}}\` or \`$...\`)
+5. Filter \`params\` must have ACTUAL values (real dates, strings), not placeholders
+6. Each filter option needs: label, value, params (and optionally isDefault)
 
 ## Database Schema
 {{SCHEMA_DOC}}
@@ -10485,13 +10462,13 @@ async function pickComponentWithLLM(prompt, components, anthropicApiKey, groqApi
       });
       return { success: false, errors };
     }
-    const originalComponent = components.find((c) => c.id === result.componentId);
+    const originalComponent = components.find((c) => c.name === result.componentName);
     if (!originalComponent) {
-      errors.push(`Component ${result.componentId} not found in available components`);
+      errors.push(`Component ${result.componentName} not found in available components`);
       userPromptErrorLogger.logError("DASH_COMP_REQ", "Component not found", {
         prompt,
-        componentId: result.componentId,
-        availableComponentIds: components.map((c) => c.id)
+        componentName: result.componentName,
+        availableComponentNames: components.map((c) => c.name)
       });
       return { success: false, errors };
     }