flowquery 1.0.8 → 1.0.9

package/misc/apps/RAG/src/components/ChatMessage.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useMemo } from 'react';
+import React, { Component } from 'react';
 import { Body1, Spinner, Button, Tooltip } from '@fluentui/react-components';
 import { PersonFilled, BotFilled, Play16Regular } from '@fluentui/react-icons';
 import { FlowQueryRunner } from './FlowQueryRunner';
+import { AdaptiveCardRenderer, isAdaptiveCard } from './AdaptiveCardRenderer';
 import './ChatMessage.css';
 
 export interface Message {
@@ -10,6 +11,10 @@ export interface Message {
     content: string;
     timestamp: Date;
     isStreaming?: boolean;
+    /**
+     * Optional Adaptive Card payload to render instead of or alongside text content
+     */
+    adaptiveCard?: Record<string, unknown>;
 }
 
 interface ChatMessageProps {
@@ -35,118 +40,198 @@ function extractFlowQueryBlocks(content: string): string[] {
 }
 
 /**
- * Renders message content with FlowQuery code blocks enhanced with run buttons.
+ * Extract JSON blocks from content and check if any are Adaptive Cards
  */
-const MessageContent: React.FC<{ content: string; isStreaming?: boolean }> = ({ content, isStreaming }) => {
-    const [runnerQuery, setRunnerQuery] = useState<string | null>(null);
+function extractAdaptiveCards(content: string): Record<string, unknown>[] {
+    const cards: Record<string, unknown>[] = [];
     
-    const flowQueryBlocks = useMemo(() => extractFlowQueryBlocks(content), [content]);
+    // Look for ```json blocks that might contain Adaptive Cards
+    const jsonRegex = /```json\n([\s\S]*?)```/gi;
+    let match;
     
-    // If there are no FlowQuery blocks, render plain content
-    if (flowQueryBlocks.length === 0) {
-        return (
-            <>
-                {content}
-                {isStreaming && <Spinner size="tiny" className="streaming-indicator" />}
-            </>
-        );
+    while ((match = jsonRegex.exec(content)) !== null) {
+        try {
+            const parsed = JSON.parse(match[1]);
+            if (isAdaptiveCard(parsed)) {
+                cards.push(parsed);
+            }
+        } catch {
+            // Not valid JSON, skip
+        }
     }
     
-    // Split content by FlowQuery code blocks and render with buttons
-    const parts: React.ReactNode[] = [];
-    let lastIndex = 0;
-    const regex = /```flowquery\n([\s\S]*?)```/gi;
-    let match;
-    let partIndex = 0;
-    
-    while ((match = regex.exec(content)) !== null) {
-        // Add text before the code block
-        if (match.index > lastIndex) {
+    return cards;
+}
+
+interface MessageContentProps {
+    content: string;
+    isStreaming?: boolean;
+    adaptiveCard?: Record<string, unknown>;
+}
+
+interface MessageContentState {
+    runnerQuery: string | null;
+}
+
+/**
+ * Renders message content with FlowQuery code blocks enhanced with run buttons,
+ * and optionally renders Adaptive Cards.
+ */
+class MessageContent extends Component<MessageContentProps, MessageContentState> {
+    constructor(props: MessageContentProps) {
+        super(props);
+        this.state = {
+            runnerQuery: null
+        };
+    }
+
+    private setRunnerQuery = (query: string | null) => {
+        this.setState({ runnerQuery: query });
+    };
+
+    private getFlowQueryBlocks(): string[] {
+        return extractFlowQueryBlocks(this.props.content);
+    }
+
+    private getEmbeddedAdaptiveCards(): Record<string, unknown>[] {
+        return extractAdaptiveCards(this.props.content);
+    }
+
+    private getAllAdaptiveCards(): Record<string, unknown>[] {
+        const cards: Record<string, unknown>[] = [];
+        if (this.props.adaptiveCard) {
+            cards.push(this.props.adaptiveCard);
+        }
+        cards.push(...this.getEmbeddedAdaptiveCards());
+        return cards;
+    }
+
+    render() {
+        const { content, isStreaming } = this.props;
+        const { runnerQuery } = this.state;
+        
+        const flowQueryBlocks = this.getFlowQueryBlocks();
+        const allAdaptiveCards = this.getAllAdaptiveCards();
+
+        // If there are no FlowQuery blocks, render plain content (possibly with Adaptive Cards)
+        if (flowQueryBlocks.length === 0) {
+            return (
+                <>
+                    {content}
+                    {allAdaptiveCards.map((card, index) => (
+                        <AdaptiveCardRenderer key={`card-${index}`} card={card} />
+                    ))}
+                    {isStreaming && <Spinner size="tiny" className="streaming-indicator" />}
+                </>
+            );
+        }
+
+        // Split content by FlowQuery code blocks and render with buttons
+        const parts: React.ReactNode[] = [];
+        let lastIndex = 0;
+        const regex = /```flowquery\n([\s\S]*?)```/gi;
+        let match;
+        let partIndex = 0;
+
+        while ((match = regex.exec(content)) !== null) {
+            // Add text before the code block
+            if (match.index > lastIndex) {
+                parts.push(
+                    <span key={`text-${partIndex}`}>
+                        {content.slice(lastIndex, match.index)}
+                    </span>
+                );
+            }
+
+            const query = match[1]?.trim() || '';
+
+            // Add the code block with a run button and </> link
+            parts.push(
+                <div key={`code-${partIndex}`} className="flowquery-code-block">
+                    <div className="flowquery-code-header">
+                        <span className="flowquery-code-label">flowquery</span>
+                        <div className="flowquery-code-actions">
+                            <Tooltip content="Run in FlowQuery Runner" relationship="label">
+                                <Button
+                                    appearance="subtle"
+                                    size="small"
+                                    icon={<Play16Regular />}
+                                    className="flowquery-run-button"
+                                    onClick={() => this.setRunnerQuery(query)}
+                                >
+                                    Run
+                                </Button>
+                            </Tooltip>
+                        </div>
+                    </div>
+                    <pre className="flowquery-code-content">
+                        <code>{query}</code>
+                    </pre>
+                </div>
+            );
+
+            lastIndex = match.index + match[0].length;
+            partIndex++;
+        }
+
+        // Add remaining text after the last code block
+        if (lastIndex < content.length) {
             parts.push(
                 <span key={`text-${partIndex}`}>
-                    {content.slice(lastIndex, match.index)}
+                    {content.slice(lastIndex)}
                 </span>
             );
         }
-        
-        const query = match[1]?.trim() || '';
-        
-        // Add the code block with a run button and </> link
-        parts.push(
-            <div key={`code-${partIndex}`} className="flowquery-code-block">
-                <div className="flowquery-code-header">
-                    <span className="flowquery-code-label">flowquery</span>
-                    <div className="flowquery-code-actions">
-                        <Tooltip content="Run in FlowQuery Runner" relationship="label">
-                            <Button
-                                appearance="subtle"
-                                size="small"
-                                icon={<Play16Regular />}
-                                className="flowquery-run-button"
-                                onClick={() => setRunnerQuery(query)}
-                            >
-                                Run
-                            </Button>
-                        </Tooltip>
-                    </div>
-                </div>
-                <pre className="flowquery-code-content">
-                    <code>{query}</code>
-                </pre>
-            </div>
-        );
-        
-        lastIndex = match.index + match[0].length;
-        partIndex++;
-    }
-    
-    // Add remaining text after the last code block
-    if (lastIndex < content.length) {
-        parts.push(
-            <span key={`text-${partIndex}`}>
-                {content.slice(lastIndex)}
-            </span>
+
+        return (
+            <>
+                {parts}
+                {allAdaptiveCards.map((card, index) => (
+                    <AdaptiveCardRenderer key={`card-${index}`} card={card} />
+                ))}
+                {isStreaming && <Spinner size="tiny" className="streaming-indicator" />}
+                {runnerQuery !== null && (
+                    <FlowQueryRunner
+                        initialQuery={runnerQuery}
+                        open={true}
+                        onOpenChange={(open) => {
+                            if (!open) this.setRunnerQuery(null);
+                        }}
+                    />
+                )}
+            </>
         );
     }
-    
-    return (
-        <>
-            {parts}
-            {isStreaming && <Spinner size="tiny" className="streaming-indicator" />}
-            {runnerQuery !== null && (
-                <FlowQueryRunner
-                    initialQuery={runnerQuery}
-                    open={true}
-                    onOpenChange={(open) => {
-                        if (!open) setRunnerQuery(null);
-                    }}
-                />
-            )}
-        </>
-    );
-};
-
-export const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
-    const isUser = message.role === 'user';
-
-    return (
-        <div className={`chat-message ${isUser ? 'chat-message-user' : 'chat-message-assistant'}`}>
-            <div className="chat-message-avatar">
-                {isUser ? <PersonFilled /> : <BotFilled />}
-            </div>
-            <div className="chat-message-content">
-                <div className="chat-message-header">
-                    <Body1 className="chat-message-role">
-                        {isUser ? 'You' : 'Assistant'}
-                    </Body1>
-                    <span className="chat-message-time">
-                        {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                    </span>
+}
+
+export class ChatMessage extends Component<ChatMessageProps> {
+    render() {
+        const { message } = this.props;
+        const isUser = message.role === 'user';
+
+        return (
+            <div className={`chat-message ${isUser ? 'chat-message-user' : 'chat-message-assistant'}`}>
+                <div className="chat-message-avatar">
+                    {isUser ? <PersonFilled /> : <BotFilled />}
                 </div>
-                <div className="chat-message-text">
-                    <MessageContent content={message.content} isStreaming={message.isStreaming} />
+                <div className="chat-message-content">
+                    <div className="chat-message-header">
+                        <Body1 className="chat-message-role">
+                            {isUser ? 'You' : 'Assistant'}
+                        </Body1>
+                        <span className="chat-message-time">
+                            {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                        </span>
+                    </div>
+                    <div className="chat-message-text">
+                        <MessageContent 
+                            content={message.content} 
+                            isStreaming={message.isStreaming}
+                            adaptiveCard={message.adaptiveCard}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
-    );
-};
+        );
+    }
+}

package/misc/apps/RAG/src/components/FlowQueryAgent.ts

@@ -11,6 +11,7 @@
 import { llm, llmStream, LlmOptions, LlmResponse } from '../plugins/loaders/Llm';
 import { FlowQueryExecutor, FlowQueryExecutionResult } from '../utils/FlowQueryExecutor';
 import { extractFlowQuery, FlowQueryExtraction } from '../utils/FlowQueryExtractor';
+import { isAdaptiveCard } from './AdaptiveCardRenderer';
 
 // Shared executor instance
 const flowQueryExecutor = new FlowQueryExecutor();
@@ -222,7 +223,7 @@ export async function processQuery(
 export async function* processQueryStream(
     userQuery: string,
     options: FlowQueryAgentOptions
-): AsyncGenerator<{ chunk: string; step: AgentStep['type']; done: boolean; steps?: AgentStep[] }, void, unknown> {
+): AsyncGenerator<{ chunk: string; step: AgentStep['type']; done: boolean; steps?: AgentStep[]; adaptiveCard?: Record<string, unknown> }, void, unknown> {
     const steps: AgentStep[] = [];
     const { systemPrompt, llmOptions = {}, conversationHistory = [], showIntermediateSteps = true } = options;
 
@@ -290,11 +291,15 @@ export async function* processQueryStream(
             return;
         }
 
+        // Check if the result contains an Adaptive Card
+        const adaptiveCard = extractAdaptiveCardFromResults(executionResult.results);
+
         // Step 4: Stream the interpretation
         const interpretationPrompt = buildInterpretationPrompt(
             userQuery,
             extraction.query!,
-            executionResult
+            executionResult,
+            !!adaptiveCard
         );
 
         let interpretationContent = '';
@@ -317,7 +322,7 @@ export async function* processQueryStream(
             timestamp: new Date(),
         });
 
-        yield { chunk: '', step: 'interpretation', done: true, steps };
+        yield { chunk: '', step: 'interpretation', done: true, steps, adaptiveCard };
     } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
         yield { 
@@ -329,18 +334,49 @@ export async function* processQueryStream(
     }
 }
 
+/**
+ * Extract an Adaptive Card from the execution results.
+ * Checks if any result is an Adaptive Card (type: "AdaptiveCard") and returns it.
+ * Searches for Adaptive Cards at the top level or within any property of result objects.
+ */
+function extractAdaptiveCardFromResults(results: unknown[] | undefined): Record<string, unknown> | undefined {
+    if (!results || !Array.isArray(results)) {
+        return undefined;
+    }
+
+    for (const result of results) {
+        // Check if the result itself is an Adaptive Card
+        if (isAdaptiveCard(result)) {
+            return result;
+        }
+        
+        // Check if any property of the result object is an Adaptive Card
+        if (typeof result === 'object' && result !== null) {
+            const obj = result as Record<string, unknown>;
+            for (const value of Object.values(obj)) {
+                if (isAdaptiveCard(value)) {
+                    return value as Record<string, unknown>;
+                }
+            }
+        }
+    }
+
+    return undefined;
+}
+
 /**
  * Build the prompt for the interpretation phase.
  */
 function buildInterpretationPrompt(
     originalQuery: string,
     flowQuery: string,
-    executionResult: FlowQueryExecutionResult
+    executionResult: FlowQueryExecutionResult,
+    hasAdaptiveCard: boolean = false
 ): string {
     const resultsJson = JSON.stringify(executionResult.results, null, 2);
     const resultCount = executionResult.results?.length || 0;
     
-    return `The user asked: "${originalQuery}"
+    let prompt = `The user asked: "${originalQuery}"
 
 This was translated to the following FlowQuery:
 \`\`\`flowquery
@@ -353,7 +389,15 @@ The query executed successfully in ${executionResult.executionTime.toFixed(2)}ms
 ${resultsJson}
 \`\`\`
 
-Please interpret these results and provide a helpful response to the user's original question.`;
+`;
+
+    if (hasAdaptiveCard) {
+        prompt += `The result is an Adaptive Card that will be rendered automatically in the UI. Please provide a brief introduction or context for the data shown in the card, but do NOT recreate the table or list the data in your response since the card will display it visually.`;
+    } else {
+        prompt += `Please interpret these results and provide a helpful response to the user's original question.`;
+    }
+
+    return prompt;
 }
 
 /**

package/misc/apps/RAG/src/components/FlowQueryRunner.css

@@ -102,3 +102,12 @@
     font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
     font-size: 12px;
 }
+
+.flowquery-adaptive-card-results {
+    max-height: 400px;
+    overflow: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 8px;
+    background-color: #ffffff;
+}

package/misc/apps/RAG/src/components/FlowQueryRunner.tsx

@@ -30,10 +30,40 @@ import {
     Checkmark24Regular,
 } from '@fluentui/react-icons';
 import { FlowQueryExecutor, FlowQueryExecutionResult } from '../utils/FlowQueryExecutor';
+import { AdaptiveCardRenderer, isAdaptiveCard } from './AdaptiveCardRenderer';
 import './FlowQueryRunner.css';
 
 const flowQueryExecutor = new FlowQueryExecutor();
 
+/**
+ * Extract an Adaptive Card from the execution results.
+ * Searches for Adaptive Cards at the top level or within any property of result objects.
+ */
+function extractAdaptiveCardFromResults(results: unknown[] | undefined): Record<string, unknown> | undefined {
+    if (!results || !Array.isArray(results)) {
+        return undefined;
+    }
+
+    for (const result of results) {
+        // Check if the result itself is an Adaptive Card
+        if (isAdaptiveCard(result)) {
+            return result;
+        }
+        
+        // Check if any property of the result object is an Adaptive Card
+        if (typeof result === 'object' && result !== null) {
+            const obj = result as Record<string, unknown>;
+            for (const value of Object.values(obj)) {
+                if (isAdaptiveCard(value)) {
+                    return value as Record<string, unknown>;
+                }
+            }
+        }
+    }
+
+    return undefined;
+}
+
 interface FlowQueryRunnerProps {
     /** Initial query to pre-populate the input */
     initialQuery?: string;
@@ -192,6 +222,9 @@ export class FlowQueryRunner extends Component<FlowQueryRunnerProps, FlowQueryRu
 
         const resultCount = result.results?.length || 0;
         const resultsJson = JSON.stringify(result.results, null, 2);
+        
+        // Check if the result contains an Adaptive Card
+        const adaptiveCard = extractAdaptiveCardFromResults(result.results);
 
         return (
             <div className="flowquery-results-container">
@@ -214,11 +247,17 @@ export class FlowQueryRunner extends Component<FlowQueryRunnerProps, FlowQueryRu
                         />
                     </Tooltip>
                 </div>
-                <div className="flowquery-results">
-                    <pre className="flowquery-results-content">
-                        {resultsJson}
-                    </pre>
-                </div>
+                {adaptiveCard ? (
+                    <div className="flowquery-adaptive-card-results">
+                        <AdaptiveCardRenderer card={adaptiveCard} />
+                    </div>
+                ) : (
+                    <div className="flowquery-results">
+                        <pre className="flowquery-results-content">
+                            {resultsJson}
+                        </pre>
+                    </div>
+                )}
             </div>
         );
     }

package/misc/apps/RAG/src/components/index.ts

@@ -7,9 +7,13 @@ export { ApiKeySettings } from './ApiKeySettings';
 // FlowQuery Runner
 export { FlowQueryRunner } from './FlowQueryRunner';
 
+// Adaptive Card Renderer
+export { AdaptiveCardRenderer, isAdaptiveCard } from './AdaptiveCardRenderer';
+
 // FlowQuery Agent
 export { processQuery, processQueryStream } from './FlowQueryAgent';
 export type { AgentStep, AgentResult, FlowQueryAgentOptions, AgentStreamCallback } from './FlowQueryAgent';
 
 // Types
 export type { Message } from './ChatMessage';
+export type { AdaptiveCardRendererProps } from './AdaptiveCardRenderer';

package/misc/apps/RAG/src/plugins/index.ts

@@ -3,22 +3,24 @@
  * 
  * To add a new plugin:
  * 1. Create a new file in the `loaders/` directory
- * 2. Add the @AsyncProviderDef decorator to your loader class
+ * 2. Add the @FunctionDef decorator with category: 'async' to your loader class
  * 3. Import the class in this file (the decorator auto-registers with FlowQuery)
  */
 
 import FlowQuery from 'flowquery';
 import { FunctionMetadata } from 'flowquery/extensibility';
 
-// Import loader classes - the @AsyncProviderDef decorator auto-registers them with FlowQuery
+// Import loader classes - the @FunctionDef decorator auto-registers them with FlowQuery
 import './loaders/FetchJson';
 import './loaders/CatFacts';
 import './loaders/MockData';
 import './loaders/Llm';
+import './loaders/Table';
+import './loaders/Form';
 
 /**
  * Initialize plugins.
- * Plugins are auto-registered via @AsyncProviderDef decorators when imported.
+ * Plugins are auto-registered via @FunctionDef decorators when imported.
  * This function just logs the registered plugins for debugging.
  */
 export function initializePlugins(): void {
@@ -60,7 +62,7 @@ export async function getAvailableLoaders(): Promise<FunctionMetadata[]> {
 }
 
 // Re-export types for external use
-export type { FunctionMetadata, FunctionDefOptions, ParameterSchema, OutputSchema, AsyncDataProvider } from 'flowquery/extensibility';
+export type { FunctionMetadata, FunctionDefOptions, ParameterSchema, OutputSchema } from 'flowquery/extensibility';
 export { FunctionDef } from 'flowquery/extensibility';
 
 // Re-export standalone loader functions for use outside of FlowQuery

package/misc/apps/RAG/src/plugins/loaders/CatFacts.ts

@@ -14,9 +14,8 @@ const CAT_FACTS_API = 'https://catfact.ninja/facts';
  * CatFacts loader class - fetches random cat facts from the Cat Facts API.
  */
 @FunctionDef({
-    isAsyncProvider: true,
     description: 'Fetches random cat facts from the Cat Facts API (catfact.ninja)',
-    category: 'examples',
+    category: 'async',
     parameters: [
         {
             name: 'count',

package/misc/apps/RAG/src/plugins/loaders/FetchJson.ts

@@ -12,9 +12,8 @@ import { FunctionDef } from 'flowquery/extensibility';
  * FetchJson loader class - fetches JSON data from a URL and yields items.
  */
 @FunctionDef({
-    isAsyncProvider: true,
     description: 'Fetches JSON data from a URL. If the response is an array, yields each item individually.',
-    category: 'data',
+    category: 'async',
     parameters: [
         {
             name: 'url',