@superatomai/sdk-node 0.0.8 → 0.0.9

package/dist/index.mjs

@@ -2674,6 +2674,7 @@ When the user asks about data
 
 After analyzing the query results, you MUST suggest appropriate dashboard components for displaying the data. Use this format:
 
+<DashboardComponents>
 **Dashboard Components:**
 Format: \`{number}.{component_type} : {clear reasoning}\`
 
@@ -2682,9 +2683,9 @@ Format: \`{number}.{component_type} : {clear reasoning}\`
 1. Analyze the query results structure and data type
 2. Suggest components that would best visualize the data
 3. Each component suggestion must be on a new line
+</DashboardComponents>
 
-
-IMPORTANT: Always include the **Dashboard Components:** section with at least one component suggestion when data is returned.
+IMPORTANT: Always wrap component suggestions with <DashboardComponents> tags and include at least one component suggestion when data is returned.
 
 ## Output Format
 
@@ -2692,7 +2693,7 @@ Respond with plain text that includes:
 
 1. **Query Analysis** (if applicable): Brief explanation of what data was fetched
 2. **Results Summary**: Present the data in a clear, readable format
-3. **Dashboard Components**: List suggested components in the c1:type format
+3. **Dashboard Components**: List suggested components wrapped in <DashboardComponents> tags
 
 
 **CRITICAL:**
@@ -2769,39 +2770,22 @@ You will receive a text response containing:
 3. **Dashboard Components:** suggestions (1:component_type : reasoning format)
 
 Your job is to:
-1. **DISCOVER and SELECT the best dashboard layout component** from the available components list
-2. Parse the component suggestions from the text response
-3. Match each suggestion with an actual component from the available list
-4. Generate the RIGHT NUMBER of components to fit the selected layout perfectly (based on the layout component's description)
-5. Generate proper props to **visualize the analysis results** that were already fetched
-6. **Generate intelligent follow-up questions (actions)** that the user might naturally ask next based on the data analysis
+1. **Parse the component suggestions** from the text response (format: 1:component_type : reasoning)
+2. **Match each suggestion with an actual component** from the available list
+3. **Generate proper props** for each matched component to **visualize the analysis results** that were already fetched
+4. **SELECT the best dashboard layout component** that can accommodate all the matched components
+5. **Generate intelligent follow-up questions (actions)** that the user might naturally ask next based on the data analysis
 
 **CRITICAL GOAL**: Create dashboard components that display the **same data that was already analyzed** - NOT new data. The queries already ran and got results. You're just creating different visualizations of those results.
 
-
-
-## Layout Component Discovery
-**Find layout components** by looking for components with \`type: "DashboardLayout"\`
-
-## Layout Selection Logic
-1. **Read each layout's description** to understand:
-   - What structure it provides
-   - When it's best used (e.g., comprehensive analysis vs focused analysis)
-   - The exact number and types of components it requires
-2. **Select the best layout** based on:
-   - Which layout structure best fits the analysis needs
-   - The component suggestions from the text response
-   - The user question and data complexity
-3. **Generate EXACTLY the components specified** in the selected layout's description
-
-**IMPORTANT:** Always prefer structured dashboard layouts when available. The layout component's description will tell you exactly what components to generate.
+**APPROACH**: First match all the components suggested in the text response, THEN find the layout that best fits those components.
 
 ## Available Components
 
 {{AVAILABLE_COMPONENTS}}
 
-## Component Matching Rules
-For each component suggestion (c1, c2, c3, etc.):
+## Component Matching Rules (STEP 1)
+For each component suggestion (c1, c2, c3, etc.) from the text response:
 
 1. **Match by type**: Find components whose \`type\` matches the suggested component type
 2. **Refine by relevance**: If multiple components match, choose based on:
@@ -2809,6 +2793,24 @@ For each component suggestion (c1, c2, c3, etc.):
    - Best fit for the data being visualized
 3. **Fallback**: If no exact type match, find the closest alternative
 
+## Layout Selection Logic (STEP 2 - After Matching Components)
+
+**After you have matched all components**, select the best dashboard layout:
+
+1. **Find layout components** by looking for components with \`type: "DashboardLayout"\` in the available components list
+2. **Read each layout's description** to understand:
+   - What structure it provides
+   - When it's best used (e.g., comprehensive analysis vs focused analysis)
+   - The number and types of components it can accommodate
+3. **Select the best layout** based on:
+   - Which layout can best display ALL the matched components
+   - The layout's capacity (how many components it supports)
+   - The types of matched components (KPI, charts, tables, etc.)
+   - The user question and data complexity
+4. **If no specific layout fits**, fall back to "MultiComponentContainer" as the default layout
+
+**IMPORTANT:** The layout should be chosen to FIT the matched components, not the other way around. Don't force components to fit a layout - find a layout that accommodates your components.
+
 ## Props Generation Rules
 
 For each matched component, generate complete props:
@@ -2921,7 +2923,6 @@ You MUST respond with ONLY a valid JSON object (no markdown, no code blocks):
 
 \`\`\`json
 {
-  "selectedLayout": "Name of the selected layout component from available components",
   "selectedLayoutId": "id_of_the_selected_layout_component",
   "layoutReasoning": "Why this layout was selected based on its description and the analysis needs",
   "matchedComponents": [
@@ -2953,13 +2954,14 @@ You MUST respond with ONLY a valid JSON object (no markdown, no code blocks):
 \`\`\`
 
 **CRITICAL:**
-- \`selectedLayout\` MUST be the NAME of a layout component from the available components list (must have type "DashboardLayout")
-- \`selectedLayoutId\` MUST be the ID of the selected layout component
+- \`matchedComponents\` MUST include ALL components suggested in the text response (match them first!)
+- \`selectedLayoutId\` MUST be the ID of the selected layout component (must have type "DashboardLayout")
 - \`layoutReasoning\` MUST explain:
   - Why you chose this specific layout component
-  - How its structure (from its description) matches the analysis needs
-  - What components it requires based on its description
-- \`matchedComponents\` array length and types MUST match what the selected layout's description specifies
+  - How many components you matched (e.g., "Matched 3 components: 1 KPI, 1 chart, 1 table")
+  - Why this layout is the best fit for displaying these specific matched components
+  - What makes this layout appropriate for the component types and count
+- The layout selection happens AFTER component matching - don't force components to fit a pre-selected layout
 - \`actions\` MUST be an array of 4-5 intelligent follow-up questions based on the analysis
 - Return ONLY valid JSON (no markdown code blocks, no text before/after)
 - Generate complete props for each component
@@ -3155,6 +3157,7 @@ var promptLoader = new PromptLoader({
 // src/llm.ts
 import Anthropic from "@anthropic-ai/sdk";
 import Groq from "groq-sdk";
+import { jsonrepair } from "jsonrepair";
 var LLM = class {
   /* Get a complete text response from an LLM (Anthropic or Groq) */
   static async text(messages, options = {}) {
@@ -3276,65 +3279,110 @@ var LLM = class {
     let finalText = "";
     while (iterations < maxIterations) {
       iterations++;
-      const response = await client.messages.create({
+      const stream = await client.messages.create({
         model: modelName,
         max_tokens: options.maxTokens || 4e3,
         temperature: options.temperature,
         system: messages.sys,
         messages: conversationMessages,
-        tools
+        tools,
+        stream: true
+        // Enable streaming
       });
-      if (response.stop_reason === "end_turn") {
-        const textBlock = response.content.find((block) => block.type === "text");
-        if (textBlock && textBlock.type === "text") {
-          finalText = textBlock.text;
-          if (options.partial) {
-            options.partial(finalText);
+      let stopReason = null;
+      const contentBlocks = [];
+      let currentTextBlock = "";
+      let currentToolUse = null;
+      for await (const chunk of stream) {
+        if (chunk.type === "message_start") {
+          contentBlocks.length = 0;
+          currentTextBlock = "";
+          currentToolUse = null;
+        }
+        if (chunk.type === "content_block_start") {
+          if (chunk.content_block.type === "text") {
+            currentTextBlock = "";
+          } else if (chunk.content_block.type === "tool_use") {
+            currentToolUse = {
+              type: "tool_use",
+              id: chunk.content_block.id,
+              name: chunk.content_block.name,
+              input: {}
+            };
+          }
+        }
+        if (chunk.type === "content_block_delta") {
+          if (chunk.delta.type === "text_delta") {
+            const text = chunk.delta.text;
+            currentTextBlock += text;
+            if (options.partial) {
+              options.partial(text);
+            }
+          } else if (chunk.delta.type === "input_json_delta" && currentToolUse) {
+            currentToolUse.inputJson = (currentToolUse.inputJson || "") + chunk.delta.partial_json;
+          }
+        }
+        if (chunk.type === "content_block_stop") {
+          if (currentTextBlock) {
+            contentBlocks.push({
+              type: "text",
+              text: currentTextBlock
+            });
+            finalText = currentTextBlock;
+            currentTextBlock = "";
+          } else if (currentToolUse) {
+            try {
+              currentToolUse.input = currentToolUse.inputJson ? JSON.parse(currentToolUse.inputJson) : {};
+            } catch (error) {
+              currentToolUse.input = {};
+            }
+            delete currentToolUse.inputJson;
+            contentBlocks.push(currentToolUse);
+            currentToolUse = null;
           }
         }
+        if (chunk.type === "message_delta") {
+          stopReason = chunk.delta.stop_reason || stopReason;
+        }
+        if (chunk.type === "message_stop") {
+          break;
+        }
+      }
+      if (stopReason === "end_turn") {
         break;
       }
-      if (response.stop_reason === "tool_use") {
-        const toolUses = response.content.filter((block) => block.type === "tool_use");
+      if (stopReason === "tool_use") {
+        const toolUses = contentBlocks.filter((block) => block.type === "tool_use");
         if (toolUses.length === 0) {
           break;
         }
         conversationMessages.push({
           role: "assistant",
-          content: response.content
+          content: contentBlocks
         });
         const toolResults = {
           role: "user",
           content: []
         };
         for (const toolUse of toolUses) {
-          if (toolUse.type === "tool_use") {
-            try {
-              const result = await toolHandler(toolUse.name, toolUse.input);
-              toolResults.content.push({
-                type: "tool_result",
-                tool_use_id: toolUse.id,
-                content: typeof result === "string" ? result : JSON.stringify(result)
-              });
-            } catch (error) {
-              toolResults.content.push({
-                type: "tool_result",
-                tool_use_id: toolUse.id,
-                content: error instanceof Error ? error.message : String(error),
-                is_error: true
-              });
-            }
+          try {
+            const result = await toolHandler(toolUse.name, toolUse.input);
+            toolResults.content.push({
+              type: "tool_result",
+              tool_use_id: toolUse.id,
+              content: typeof result === "string" ? result : JSON.stringify(result)
+            });
+          } catch (error) {
+            toolResults.content.push({
+              type: "tool_result",
+              tool_use_id: toolUse.id,
+              content: error instanceof Error ? error.message : String(error),
+              is_error: true
+            });
           }
         }
         conversationMessages.push(toolResults);
       } else {
-        const textBlock = response.content.find((block) => block.type === "text");
-        if (textBlock && textBlock.type === "text") {
-          finalText = textBlock.text;
-          if (options.partial) {
-            options.partial(finalText);
-          }
-        }
         break;
       }
     }
@@ -3397,9 +3445,9 @@ var LLM = class {
   // ============================================================
   /**
    * Parse JSON string, handling markdown code blocks and surrounding text
-   * Enhanced version from anthropic.ts implementation
+   * Enhanced version with jsonrepair to handle malformed JSON from LLMs
    * @param text - Text that may contain JSON wrapped in ```json...``` or with surrounding text
-   * @returns Parsed JSON object
+   * @returns Parsed JSON object or array
    */
   static _parseJSON(text) {
     let jsonText = text.trim();
@@ -3409,11 +3457,29 @@ var LLM = class {
       jsonText = jsonText.replace(/^```\s*\n?/, "").replace(/\n?```\s*$/, "");
     }
     const firstBrace = jsonText.indexOf("{");
+    const firstBracket = jsonText.indexOf("[");
     const lastBrace = jsonText.lastIndexOf("}");
-    if (firstBrace !== -1 && lastBrace !== -1 && firstBrace < lastBrace) {
-      jsonText = jsonText.substring(firstBrace, lastBrace + 1);
+    const lastBracket = jsonText.lastIndexOf("]");
+    let startIdx = -1;
+    let endIdx = -1;
+    if (firstBrace !== -1 && (firstBracket === -1 || firstBrace < firstBracket)) {
+      startIdx = firstBrace;
+      endIdx = lastBrace;
+    } else if (firstBracket !== -1) {
+      startIdx = firstBracket;
+      endIdx = lastBracket;
+    }
+    if (startIdx !== -1 && endIdx !== -1 && startIdx < endIdx) {
+      jsonText = jsonText.substring(startIdx, endIdx + 1);
+    }
+    try {
+      const repairedJson = jsonrepair(jsonText);
+      return JSON.parse(repairedJson);
+    } catch (error) {
+      throw new Error(`Failed to parse JSON: ${error instanceof Error ? error.message : String(error)}
+
+Original text: ${jsonText.substring(0, 200)}...`);
     }
-    return JSON.parse(jsonText);
   }
 };
 
@@ -4026,7 +4092,7 @@ var BaseLLM = class {
       logger.debug(`[${this.getProviderName()}] Loaded match-text-components prompts`);
       logger.file("\n=============================\nmatch text components system prompt:", prompts.system);
       logCollector?.info("Matching components from text response...");
-      const rawResponse = await LLM.stream(
+      const result = await LLM.stream(
         {
           sys: prompts.system,
           user: prompts.user
@@ -4037,60 +4103,12 @@ var BaseLLM = class {
           temperature: 0.2,
           apiKey: this.getApiKey(apiKey)
         },
-        false
-        // Don't parse as JSON yet, get raw response
+        true
+        // Parse as JSON
       );
-      logger.debug(`[${this.getProviderName()}] Raw component matching response length: ${rawResponse?.length || 0}`);
-      let result;
-      try {
-        let cleanedResponse = rawResponse || "";
-        cleanedResponse = cleanedResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
-        const jsonMatch = cleanedResponse.match(/\{[\s\S]*\}/);
-        if (jsonMatch) {
-          cleanedResponse = jsonMatch[0];
-        }
-        result = JSON.parse(cleanedResponse);
-      } catch (parseError) {
-        logger.error(`[${this.getProviderName()}] Failed to parse component matching JSON response`);
-        const errorMsg = parseError instanceof Error ? parseError.message : String(parseError);
-        const posMatch = errorMsg.match(/position (\d+)/);
-        const errorPos = posMatch ? parseInt(posMatch[1]) : -1;
-        if (errorPos > 0 && rawResponse) {
-          const start = Math.max(0, errorPos - 200);
-          const end = Math.min(rawResponse.length, errorPos + 200);
-          logger.debug(`[${this.getProviderName()}] Error context (position ${errorPos}):`);
-          logger.debug(rawResponse.substring(start, end));
-          logger.debug(" ".repeat(Math.min(200, errorPos - start)) + "^--- Error here");
-        }
-        logger.debug(`[${this.getProviderName()}] Raw response (first 2000 chars):`, rawResponse?.substring(0, 2e3));
-        logger.debug(`[${this.getProviderName()}] Parse error:`, parseError);
-        logCollector?.error(`Failed to parse component matching response: ${errorMsg}`);
-        try {
-          logger.info(`[${this.getProviderName()}] Attempting aggressive JSON cleanup...`);
-          let aggressive = rawResponse || "";
-          aggressive = aggressive.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
-          const match = aggressive.match(/\{[\s\S]*\}/);
-          if (match) {
-            aggressive = match[0];
-          }
-          aggressive = aggressive.replace(/,(\s*[}\]])/g, "$1");
-          result = JSON.parse(aggressive);
-          logger.info(`[${this.getProviderName()}] Aggressive cleanup succeeded!`);
-        } catch (secondError) {
-          logger.error(`[${this.getProviderName()}] Aggressive cleanup also failed`);
-          return {
-            components: [],
-            selectedLayout: "MultiComponentContainer",
-            selectedLayoutId: "",
-            selectedLayoutComponent: null,
-            layoutReasoning: "No layout selected",
-            actions: []
-          };
-        }
-      }
+      logger.debug(`[${this.getProviderName()}] Component matching response parsed successfully`);
       const matchedComponents = result.matchedComponents || [];
-      const selectedLayout = result.selectedLayout || "MultiComponentContainer";
-      const selectedLayoutId = result.selectedLayoutId || "";
+      const selectedLayoutId = result.selectedLayoutId || "multi-component-container";
       const layoutReasoning = result.layoutReasoning || "No layout reasoning provided";
       const rawActions = result.actions || [];
       const actions = convertQuestionsToActions(rawActions);
@@ -4102,11 +4120,11 @@ var BaseLLM = class {
         }
       }
       logger.info(`[${this.getProviderName()}] Matched ${matchedComponents.length} components from text response`);
-      logger.info(`[${this.getProviderName()}] Selected layout: ${selectedLayout} (ID: ${selectedLayoutId})`);
+      logger.info(`[${this.getProviderName()}] Selected layout: (ID: ${selectedLayoutId})`);
       logger.info(`[${this.getProviderName()}] Layout reasoning: ${layoutReasoning}`);
       logger.info(`[${this.getProviderName()}] Generated ${actions.length} follow-up actions`);
       if (matchedComponents.length > 0) {
-        logCollector?.info(`Matched ${matchedComponents.length} components for visualization using ${selectedLayout}`);
+        logCollector?.info(`Matched ${matchedComponents.length} components for visualization `);
         logCollector?.info(`Layout reasoning: ${layoutReasoning}`);
         matchedComponents.forEach((comp, idx) => {
           logCollector?.info(`  ${idx + 1}. ${comp.componentName} (${comp.componentType}): ${comp.reasoning}`);
@@ -4141,7 +4159,6 @@ var BaseLLM = class {
       }).filter(Boolean);
       return {
         components: finalComponents,
-        selectedLayout,
         selectedLayoutId,
         selectedLayoutComponent,
         layoutReasoning,
@@ -4149,15 +4166,13 @@ var BaseLLM = class {
       };
     } catch (error) {
       const errorMsg = error instanceof Error ? error.message : String(error);
-      logger.error(`[${this.getProviderName()}] Error matching components from text response: ${errorMsg}`);
-      logger.debug(`[${this.getProviderName()}] Component matching error details:`, error);
-      logCollector?.error(`Error matching components: ${errorMsg}`);
+      logger.error(`[${this.getProviderName()}] Error matching components: ${errorMsg}`);
+      logCollector?.error(`Failed to match components: ${errorMsg}`);
       return {
         components: [],
-        selectedLayout: "MultiComponentContainer",
         selectedLayoutId: "",
         selectedLayoutComponent: null,
-        layoutReasoning: "Error occurred during component matching",
+        layoutReasoning: "Failed to match components due to parsing error",
         actions: []
       };
     }
@@ -4424,7 +4439,7 @@ ${errorMsg}
           container_componet = {
             ...selectedLayoutComponent,
             id: `${selectedLayoutComponent.id}_${Date.now()}`,
-            description: layoutReasoning,
+            // Make ID unique for each instance
             props: {
               ...selectedLayoutComponent.props,
               config: {
@@ -7271,7 +7286,7 @@ var SuperatomSDK = class {
         url.searchParams.set("projectId", this.projectId);
         url.searchParams.set("userId", this.userId);
         url.searchParams.set("type", this.type);
-        logger.info(`Connecting to WebSocket: ${url.host}`);
+        logger.info(`Connecting to WebSocket: ${url.toString()}`);
         this.ws = createWebSocket(url.toString());
         this.ws.addEventListener("open", () => {
           this.connected = true;