flowquery 1.0.3 → 1.0.6

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

@@ -0,0 +1,104 @@
+.flowquery-runner-surface {
+    max-width: 800px;
+    width: 90vw;
+}
+
+.flowquery-runner-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 16px;
+}
+
+.flowquery-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.flowquery-textarea {
+    width: 100%;
+    min-height: 120px;
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-size: 13px;
+    resize: vertical;
+}
+
+.flowquery-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.flowquery-execution-time {
+    margin-left: auto;
+    font-size: 12px;
+    color: #666;
+}
+
+.flowquery-results-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.flowquery-results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flowquery-results-count {
+    font-size: 12px;
+    color: #666;
+}
+
+.flowquery-results {
+    max-height: 300px;
+    overflow: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+}
+
+.flowquery-results-content {
+    padding: 12px;
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+}
+
+.flowquery-error {
+    color: #c50f1f;
+    padding: 12px;
+    margin: 0;
+}
+
+.flowquery-no-results {
+    color: #666;
+    font-style: italic;
+    padding: 12px;
+}
+
+.flowquery-loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    color: #666;
+}
+
+.flowquery-examples-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.flowquery-example-button {
+    text-align: left;
+    justify-content: flex-start;
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    font-size: 12px;
+}

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

@@ -0,0 +1,332 @@
+/**
+ * FlowQuery Runner Component
+ * 
+ * A popup dialog that allows users to run FlowQuery statements directly
+ * and see the results in the dialog.
+ */
+
+import React, { Component } from 'react';
+import {
+    Dialog,
+    DialogTrigger,
+    DialogSurface,
+    DialogTitle,
+    DialogBody,
+    DialogActions,
+    DialogContent,
+    Button,
+    Textarea,
+    Label,
+    Field,
+    Spinner,
+    Tooltip,
+} from '@fluentui/react-components';
+import { 
+    Play24Regular, 
+    Code24Regular, 
+    Dismiss24Regular,
+    Copy24Regular,
+    ArrowClockwise24Regular,
+    Checkmark24Regular,
+} from '@fluentui/react-icons';
+import { FlowQueryExecutor, FlowQueryExecutionResult } from '../utils/FlowQueryExecutor';
+import './FlowQueryRunner.css';
+
+const flowQueryExecutor = new FlowQueryExecutor();
+
+interface FlowQueryRunnerProps {
+    /** Initial query to pre-populate the input */
+    initialQuery?: string;
+    /** Controlled open state - if provided, the component becomes controlled */
+    open?: boolean;
+    /** Callback when open state changes (for controlled mode) */
+    onOpenChange?: (open: boolean) => void;
+    /** Callback when the dialog is closed (deprecated, use onOpenChange) */
+    onClose?: () => void;
+    /** Custom trigger element. If not provided, a default button is shown. Not used in controlled mode. */
+    trigger?: React.ReactElement;
+}
+
+interface FlowQueryRunnerState {
+    open: boolean;
+    query: string;
+    isExecuting: boolean;
+    result: FlowQueryExecutionResult | null;
+    copied: boolean;
+}
+
+export class FlowQueryRunner extends Component<FlowQueryRunnerProps, FlowQueryRunnerState> {
+    constructor(props: FlowQueryRunnerProps) {
+        super(props);
+        this.state = {
+            open: props.open ?? false,
+            query: props.initialQuery || '',
+            isExecuting: false,
+            result: null,
+            copied: false,
+        };
+    }
+
+    componentDidUpdate(prevProps: FlowQueryRunnerProps): void {
+        // Handle controlled mode: sync open state from props
+        if (this.props.open !== undefined && this.props.open !== prevProps.open) {
+            this.setState({ open: this.props.open });
+            // If opening with a new initial query, update the query
+            if (this.props.open && this.props.initialQuery !== prevProps.initialQuery) {
+                this.setState({ query: this.props.initialQuery || '', result: null });
+            }
+        }
+        // Handle initialQuery changes when opening
+        if (this.props.initialQuery !== prevProps.initialQuery && this.props.open) {
+            this.setState({ query: this.props.initialQuery || '', result: null });
+        }
+    }
+
+    /**
+     * Check if the component is in controlled mode
+     */
+    isControlled = (): boolean => {
+        return this.props.open !== undefined;
+    };
+
+    handleOpenChange = (_: unknown, data: { open: boolean }): void => {
+        if (this.isControlled()) {
+            // In controlled mode, notify parent
+            this.props.onOpenChange?.(data.open);
+        } else {
+            // In uncontrolled mode, manage state internally
+            this.setState({ open: data.open });
+        }
+        
+        if (!data.open && this.props.onClose) {
+            this.props.onClose();
+        }
+    };
+
+    handleClose = (): void => {
+        if (this.isControlled()) {
+            this.props.onOpenChange?.(false);
+        } else {
+            this.setState({ open: false });
+        }
+        this.props.onClose?.();
+    };
+
+    handleQueryChange = (_: unknown, data: { value: string }): void => {
+        this.setState({ query: data.value });
+    };
+
+    handleExecute = async (): Promise<void> => {
+        const { query } = this.state;
+        
+        if (!query.trim()) {
+            return;
+        }
+
+        this.setState({ isExecuting: true, result: null });
+
+        try {
+            const result = await flowQueryExecutor.execute(query);
+            this.setState({ result, isExecuting: false });
+        } catch (error) {
+            this.setState({
+                result: {
+                    success: false,
+                    query,
+                    error: error instanceof Error ? error.message : String(error),
+                    executionTime: 0,
+                },
+                isExecuting: false,
+            });
+        }
+    };
+
+    handleClear = (): void => {
+        this.setState({ query: '', result: null });
+    };
+
+    handleCopyResults = (): void => {
+        const { result } = this.state;
+        if (result?.success && result.results) {
+            navigator.clipboard.writeText(JSON.stringify(result.results, null, 2));
+            this.setState({ copied: true });
+            setTimeout(() => this.setState({ copied: false }), 2000);
+        }
+    };
+
+    handleKeyDown = (event: React.KeyboardEvent): void => {
+        // Execute on Ctrl+Enter or Cmd+Enter
+        if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+            event.preventDefault();
+            this.handleExecute();
+        }
+    };
+
+    renderResults(): React.ReactNode {
+        const { result, isExecuting, copied } = this.state;
+
+        if (isExecuting) {
+            return (
+                <div className="flowquery-loading">
+                    <Spinner size="tiny" />
+                    <span>Executing query...</span>
+                </div>
+            );
+        }
+
+        if (!result) {
+            return (
+                <div className="flowquery-no-results">
+                    Enter a FlowQuery statement and click Run to see results.
+                </div>
+            );
+        }
+
+        if (!result.success) {
+            return (
+                <pre className="flowquery-error">
+                    Error: {result.error}
+                </pre>
+            );
+        }
+
+        const resultCount = result.results?.length || 0;
+        const resultsJson = JSON.stringify(result.results, null, 2);
+
+        return (
+            <div className="flowquery-results-container">
+                <div className="flowquery-results-header">
+                    <span className="flowquery-results-count">
+                        {resultCount} result{resultCount !== 1 ? 's' : ''} 
+                        {' • '}
+                        {result.executionTime.toFixed(2)}ms
+                    </span>
+                    <Tooltip 
+                        content={copied ? "Copied!" : "Copy results"} 
+                        relationship="label"
+                    >
+                        <Button
+                            appearance="subtle"
+                            icon={copied ? <Checkmark24Regular /> : <Copy24Regular />}
+                            size="small"
+                            onClick={this.handleCopyResults}
+                            disabled={!result.results?.length}
+                        />
+                    </Tooltip>
+                </div>
+                <div className="flowquery-results">
+                    <pre className="flowquery-results-content">
+                        {resultsJson}
+                    </pre>
+                </div>
+            </div>
+        );
+    }
+
+    renderDialogSurface(): React.JSX.Element {
+        const { query, isExecuting } = this.state;
+
+        return (
+            <DialogSurface className="flowquery-runner-surface">
+                <DialogBody>
+                    <DialogTitle
+                        action={
+                            <Button
+                                appearance="subtle"
+                                icon={<Dismiss24Regular />}
+                                onClick={this.handleClose}
+                            />
+                        }
+                    >
+                        FlowQuery Runner
+                    </DialogTitle>
+                    <DialogContent className="flowquery-runner-content">
+                        <div className="flowquery-input-container">
+                            <Field label="FlowQuery Statement">
+                                <Textarea
+                                    value={query}
+                                    onChange={this.handleQueryChange}
+                                    onKeyDown={this.handleKeyDown}
+                                    placeholder="Enter your FlowQuery statement here..."
+                                    className="flowquery-textarea"
+                                    resize="vertical"
+                                />
+                            </Field>
+                            <div className="flowquery-actions">
+                                <Tooltip content="Run query (Ctrl+Enter)" relationship="label">
+                                    <Button
+                                        appearance="primary"
+                                        icon={<Play24Regular />}
+                                        onClick={this.handleExecute}
+                                        disabled={isExecuting || !query.trim()}
+                                    >
+                                        Run
+                                    </Button>
+                                </Tooltip>
+                                <Tooltip content="Clear query and results" relationship="label">
+                                    <Button
+                                        appearance="subtle"
+                                        icon={<ArrowClockwise24Regular />}
+                                        onClick={this.handleClear}
+                                        disabled={isExecuting}
+                                    >
+                                        Clear
+                                    </Button>
+                                </Tooltip>
+                            </div>
+                        </div>
+
+                        <Field label="Results">
+                            <div className="flowquery-results">
+                                {this.renderResults()}
+                            </div>
+                        </Field>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button 
+                            appearance="secondary" 
+                            onClick={this.handleClose}
+                        >
+                            Close
+                        </Button>
+                    </DialogActions>
+                </DialogBody>
+            </DialogSurface>
+        );
+    }
+
+    render(): React.ReactNode {
+        const { open } = this.state;
+        const { trigger } = this.props;
+        const isControlled = this.isControlled();
+
+        // In controlled mode, render dialog without trigger
+        if (isControlled) {
+            return (
+                <Dialog open={open} onOpenChange={this.handleOpenChange}>
+                    {this.renderDialogSurface()}
+                </Dialog>
+            );
+        }
+
+        // In uncontrolled mode, render with trigger
+        return (
+            <Dialog open={open} onOpenChange={this.handleOpenChange}>
+                <DialogTrigger disableButtonEnhancement>
+                    {trigger || (
+                        <Button
+                            appearance="subtle"
+                            icon={<Code24Regular />}
+                            title="FlowQuery Runner"
+                        >
+                            FlowQuery
+                        </Button>
+                    )}
+                </DialogTrigger>
+                {this.renderDialogSurface()}
+            </Dialog>
+        );
+    }
+}
+
+export default FlowQueryRunner;

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

@@ -0,0 +1,15 @@
+// Chat components exports
+export { ChatContainer } from './ChatContainer';
+export { ChatMessage } from './ChatMessage';
+export { ChatInput } from './ChatInput';
+export { ApiKeySettings } from './ApiKeySettings';
+
+// FlowQuery Runner
+export { FlowQueryRunner } from './FlowQueryRunner';
+
+// FlowQuery Agent
+export { processQuery, processQueryStream } from './FlowQueryAgent';
+export type { AgentStep, AgentResult, FlowQueryAgentOptions, AgentStreamCallback } from './FlowQueryAgent';
+
+// Types
+export type { Message } from './ChatMessage';

package/misc/apps/RAG/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import { initializePlugins } from './plugins';
+
+// Initialize FlowQuery plugins before rendering
+initializePlugins();
+
+const container = document.getElementById('root');
+if (container) {
+    const root = createRoot(container);
+    root.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>
+    );
+}

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

@@ -0,0 +1,136 @@
+/**
+ * Plugin registry for loading and managing FlowQuery async data loader plugins.
+ * 
+ * This registry uses FlowQuery's built-in function introspection via the functions()
+ * function as the single source of truth for available loaders and their metadata.
+ */
+
+import FlowQuery from 'flowquery';
+import { AsyncLoaderPlugin, PluginMetadata, PluginModule } from './types';
+
+/**
+ * Registry for managing FlowQuery plugins.
+ * 
+ * Uses FlowQuery's `functions()` introspection as the source of truth,
+ * eliminating duplicate tracking of registered plugins.
+ */
+class PluginRegistry {
+    /**
+     * Register a single plugin with FlowQuery.
+     * 
+     * @param plugin - The plugin to register
+     */
+    public register(plugin: AsyncLoaderPlugin): void {
+        // Register with FlowQuery - it becomes the source of truth
+        if (plugin.metadata) {
+            FlowQuery.registerAsyncProvider(plugin.name, {
+                provider: plugin.provider,
+                metadata: {
+                    name: plugin.name,
+                    ...plugin.metadata
+                }
+            });
+        } else {
+            FlowQuery.registerAsyncProvider(plugin.name, plugin.provider);
+        }
+
+        console.log(`Registered plugin: ${plugin.name}`);
+    }
+
+    /**
+     * Register multiple plugins at once.
+     * 
+     * @param plugins - Array of plugins to register
+     */
+    public registerAll(plugins: AsyncLoaderPlugin[]): void {
+        for (const plugin of plugins) {
+            this.register(plugin);
+        }
+    }
+
+    /**
+     * Load plugins from a plugin module.
+     * 
+     * @param module - The plugin module to load
+     */
+    public loadModule(module: PluginModule): void {
+        this.registerAll(module.plugins);
+    }
+
+    /**
+     * Unregister a plugin by name.
+     * 
+     * @param name - The plugin name to unregister
+     */
+    public unregister(name: string): void {
+        FlowQuery.unregisterAsyncProvider(name);
+        console.log(`Unregistered plugin: ${name}`);
+    }
+
+    /**
+     * Get all loaded async provider names by querying FlowQuery directly.
+     * 
+     * @returns Array of registered async provider names
+     */
+    public getLoadedPlugins(): string[] {
+        // Use FlowQuery's FunctionFactory to get async provider names
+        const allFunctions = FlowQuery.listFunctions({ asyncOnly: true });
+        return allFunctions.map(f => f.name);
+    }
+
+    /**
+     * Check if a plugin is registered by querying FlowQuery.
+     * 
+     * @param name - The plugin name to check
+     * @returns True if the plugin is registered
+     */
+    public isRegistered(name: string): boolean {
+        const plugins = this.getLoadedPlugins();
+        return plugins.some(p => p.toLowerCase() === name.toLowerCase());
+    }
+
+    /**
+     * Get all plugin metadata for registered async providers.
+     * Uses FlowQuery's functions() introspection as the single source of truth.
+     * 
+     * @returns Array of plugin metadata objects
+     */
+    public getAllPluginMetadata(): PluginMetadata[] {
+        // Query FlowQuery directly for all async providers with their metadata
+        const asyncFunctions = FlowQuery.listFunctions({ asyncOnly: true });
+        
+        return asyncFunctions.map(f => ({
+            name: f.name,
+            description: f.description,
+            category: f.category,
+            parameters: f.parameters || [],
+            output: f.output || { description: 'Data items', type: 'object' },
+            examples: f.examples,
+            notes: f.notes
+        }));
+    }
+
+    /**
+     * Get all plugin metadata asynchronously using a FlowQuery statement.
+     * This demonstrates the functions() approach for dynamic discovery.
+     * 
+     * @returns Promise resolving to array of plugin metadata
+     */
+    public async getAvailableLoadersAsync(): Promise<PluginMetadata[]> {
+        const runner = new FlowQuery(`
+            WITH functions() AS funcs 
+            UNWIND funcs AS f 
+            WHERE f.isAsyncProvider = true
+            RETURN f
+        `);
+        await runner.run();
+        return runner.results.map((r: any) => r.expr0 as PluginMetadata);
+    }
+}
+
+/**
+ * Global plugin registry instance.
+ */
+export const pluginRegistry = new PluginRegistry();
+
+export default pluginRegistry;