flowquery 1.0.46 → 1.0.47

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

@@ -1,380 +0,0 @@
-import React from 'react';
-import * as AdaptiveCards from 'adaptivecards';
-import * as ACData from 'adaptivecards-templating';
-import './AdaptiveCardRenderer.css';
-
-/**
- * Data passed when an Action.Submit is triggered
- */
-export interface SubmitActionData {
-    /**
-     * The data property from the Action.Submit (if any)
-     */
-    actionData: unknown;
-    
-    /**
-     * All input values collected from the card
-     */
-    inputValues: Record<string, string>;
-    
-    /**
-     * The original action object
-     */
-    action: AdaptiveCards.SubmitAction;
-}
-
-export interface AdaptiveCardRendererProps {
-    /**
-     * The Adaptive Card payload (JSON object conforming to Adaptive Cards schema).
-     * Can be a template with ${expression} bindings if `data` prop is provided.
-     */
-    card: Record<string, unknown>;
-    
-    /**
-     * Optional data context for template binding.
-     * When provided, the card is treated as a template and expressions like
-     * ${property} or ${$root.property} will be evaluated against this data.
-     */
-    data?: Record<string, unknown>;
-    
-    /**
-     * Optional host config for styling the card
-     */
-    hostConfig?: Record<string, unknown>;
-    
-    /**
-     * Callback when an Action.Submit is executed.
-     * Receives the action data and all input values from the card.
-     */
-    onSubmit?: (submitData: SubmitActionData) => void;
-    
-    /**
-     * Callback when any action is executed (e.g., Action.Submit, Action.OpenUrl).
-     * For Action.Submit, prefer using onSubmit which provides collected input values.
-     */
-    onExecuteAction?: (action: AdaptiveCards.Action) => void;
-    
-    /**
-     * Optional CSS class name for the container
-     */
-    className?: string;
-}
-
-/**
- * Default host config styled to match Fluent UI aesthetics
- */
-const defaultHostConfig: AdaptiveCards.HostConfig = new AdaptiveCards.HostConfig({
-    fontFamily: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
-    containerStyles: {
-        default: {
-            backgroundColor: "#ffffff",
-            foregroundColors: {
-                default: {
-                    default: "#242424",
-                    subtle: "#616161"
-                },
-                accent: {
-                    default: "#0078D4",
-                    subtle: "#0063B1"
-                },
-                good: {
-                    default: "#107C10",
-                    subtle: "#0B5C0B"
-                },
-                warning: {
-                    default: "#D83B01",
-                    subtle: "#C43501"
-                },
-                attention: {
-                    default: "#A80000",
-                    subtle: "#8B0000"
-                }
-            }
-        },
-        emphasis: {
-            backgroundColor: "#F5F5F5",
-            foregroundColors: {
-                default: {
-                    default: "#242424",
-                    subtle: "#616161"
-                }
-            }
-        },
-        accent: {
-            backgroundColor: "#E6F2FB",
-            foregroundColors: {
-                default: {
-                    default: "#242424",
-                    subtle: "#616161"
-                }
-            }
-        }
-    },
-    spacing: {
-        small: 4,
-        default: 8,
-        medium: 12,
-        large: 16,
-        extraLarge: 24,
-        padding: 12
-    },
-    separator: {
-        lineThickness: 1,
-        lineColor: "#E0E0E0"
-    },
-    actions: {
-        maxActions: 5,
-        spacing: AdaptiveCards.Spacing.Default,
-        buttonSpacing: 8,
-        showCard: {
-            actionMode: AdaptiveCards.ShowCardActionMode.Inline,
-            inlineTopMargin: 8
-        },
-        actionsOrientation: AdaptiveCards.Orientation.Horizontal,
-        actionAlignment: AdaptiveCards.ActionAlignment.Left
-    },
-    adaptiveCard: {
-        allowCustomStyle: true
-    },
-    textBlock: {
-        headingLevel: 2
-    },
-    factSet: {
-        title: {
-            color: AdaptiveCards.TextColor.Default,
-            size: AdaptiveCards.TextSize.Default,
-            isSubtle: false,
-            weight: AdaptiveCards.TextWeight.Bolder,
-            wrap: true
-        },
-        value: {
-            color: AdaptiveCards.TextColor.Default,
-            size: AdaptiveCards.TextSize.Default,
-            isSubtle: false,
-            weight: AdaptiveCards.TextWeight.Default,
-            wrap: true
-        },
-        spacing: 8
-    }
-});
-
-/**
- * Renders an Adaptive Card using the adaptivecards library.
- * Adaptive Cards are platform-agnostic UI snippets authored in JSON.
- */
-export class AdaptiveCardRenderer extends React.Component<AdaptiveCardRendererProps> {
-    private containerRef = React.createRef<HTMLDivElement>();
-    private adaptiveCard: AdaptiveCards.AdaptiveCard | null = null;
-
-    componentDidMount(): void {
-        this.createAdaptiveCard();
-        this.renderCard();
-    }
-
-    componentDidUpdate(prevProps: AdaptiveCardRendererProps): void {
-        // Recreate adaptive card instance if host config changes
-        if (prevProps.hostConfig !== this.props.hostConfig) {
-            this.createAdaptiveCard();
-        }
-        
-        // Re-render if card, data, hostConfig, or action handler changes
-        if (
-            prevProps.card !== this.props.card ||
-            prevProps.data !== this.props.data ||
-            prevProps.hostConfig !== this.props.hostConfig ||
-            prevProps.onExecuteAction !== this.props.onExecuteAction ||
-            prevProps.onSubmit !== this.props.onSubmit
-        ) {
-            this.renderCard();
-        }
-    }
-
-    /**
-     * Collects all input values from the rendered card
-     */
-    private collectInputValues(): Record<string, string> {
-        const inputs: Record<string, string> = {};
-        
-        if (!this.adaptiveCard) {
-            return inputs;
-        }
-        
-        // Get all input elements from the card
-        const allInputs = this.adaptiveCard.getAllInputs();
-        
-        for (const input of allInputs) {
-            if (input.id) {
-                inputs[input.id] = input.value ?? '';
-            }
-        }
-        
-        return inputs;
-    }
-
-    private createAdaptiveCard(): void {
-        const { hostConfig } = this.props;
-        
-        this.adaptiveCard = new AdaptiveCards.AdaptiveCard();
-        
-        // Apply host config
-        if (hostConfig) {
-            this.adaptiveCard.hostConfig = new AdaptiveCards.HostConfig(hostConfig);
-        } else {
-            this.adaptiveCard.hostConfig = defaultHostConfig;
-        }
-    }
-
-    private renderCard(): void {
-        const { card, data, onExecuteAction, onSubmit } = this.props;
-        
-        if (!this.containerRef.current || !card || !this.adaptiveCard) {
-            return;
-        }
-        
-        // Clear previous content
-        this.containerRef.current.innerHTML = '';
-        
-        try {
-            // Normalize the card to standard Adaptive Card format
-            let cardPayload = normalizeAdaptiveCard(card);
-            
-            if (!cardPayload) {
-                throw new Error('Invalid Adaptive Card format');
-            }
-            
-            // Apply data binding if data is provided
-            if (data) {
-                const template = new ACData.Template(cardPayload);
-                cardPayload = template.expand({
-                    $root: data
-                });
-            }
-            
-            // Set up action handler
-            this.adaptiveCard.onExecuteAction = (action: AdaptiveCards.Action) => {
-                // Handle Action.Submit specially to collect input values
-                if (action instanceof AdaptiveCards.SubmitAction) {
-                    const inputValues = this.collectInputValues();
-                    
-                    if (onSubmit) {
-                        onSubmit({
-                            actionData: action.data,
-                            inputValues,
-                            action
-                        });
-                    }
-                }
-                
-                // Call general action handler if provided
-                if (onExecuteAction) {
-                    onExecuteAction(action);
-                } else if (action instanceof AdaptiveCards.OpenUrlAction && action.url) {
-                    // Default: open URLs in new tab
-                    window.open(action.url, '_blank', 'noopener,noreferrer');
-                }
-            };
-            
-            // Parse and render the card
-            this.adaptiveCard.parse(cardPayload);
-            const renderedCard = this.adaptiveCard.render();
-            
-            if (renderedCard) {
-                this.containerRef.current.appendChild(renderedCard);
-            }
-        } catch (error) {
-            console.error('Failed to render Adaptive Card:', error);
-            
-            // Show error message in the container
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'adaptive-card-error';
-            errorDiv.textContent = `Failed to render card: ${error instanceof Error ? error.message : 'Unknown error'}`;
-            this.containerRef.current.appendChild(errorDiv);
-        }
-    }
-
-    render(): React.ReactNode {
-        const { className } = this.props;
-        
-        return (
-            <div 
-                ref={this.containerRef} 
-                className={`adaptive-card-container ${className || ''}`}
-            />
-        );
-    }
-}
-
-/**
- * Helper function to check if an object looks like an Adaptive Card.
- * Supports both standard format (type: 'AdaptiveCard') and alternative format (cardType: 'AdaptiveCard').
- */
-export function isAdaptiveCard(obj: unknown): obj is Record<string, unknown> {
-    if (typeof obj !== 'object' || obj === null) {
-        return false;
-    }
-    
-    const card = obj as Record<string, unknown>;
-    
-    // Standard Adaptive Card format
-    if (card.type === 'AdaptiveCard') {
-        return true;
-    }
-    
-    // Alternative format with cardType/cardBody
-    if (card.cardType === 'AdaptiveCard') {
-        return true;
-    }
-    
-    // Check if it's an array containing Adaptive Cards
-    if (Array.isArray(obj) && obj.length > 0) {
-        return obj.some(item => isAdaptiveCard(item));
-    }
-    
-    return false;
-}
-
-/**
- * Normalizes a card payload to the standard Adaptive Card format.
- * Handles:
- * - Arrays of cards (returns the first card)
- * - Alternative format with cardType/cardBody properties
- * - Standard format (passed through unchanged)
- */
-export function normalizeAdaptiveCard(obj: unknown): Record<string, unknown> | null {
-    if (typeof obj !== 'object' || obj === null) {
-        return null;
-    }
-    
-    // Handle arrays - extract the first valid card
-    if (Array.isArray(obj)) {
-        for (const item of obj) {
-            const normalized = normalizeAdaptiveCard(item);
-            if (normalized) {
-                return normalized;
-            }
-        }
-        return null;
-    }
-    
-    const card = obj as Record<string, unknown>;
-    
-    // Standard format - return as-is
-    if (card.type === 'AdaptiveCard') {
-        return card;
-    }
-    
-    // Alternative format - convert to standard format
-    if (card.cardType === 'AdaptiveCard') {
-        return {
-            type: 'AdaptiveCard',
-            $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
-            version: (card.version as string) || '1.5',
-            body: card.cardBody || card.body || [],
-            actions: card.actions || []
-        };
-    }
-    
-    return null;
-}
-
-export default AdaptiveCardRenderer;

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

@@ -1,245 +0,0 @@
-/**
- * API Key Settings Component
- * 
- * Allows users to input and store their OpenAI API key in localStorage.
- * The key is never sent to any server - it's only used client-side.
- */
-
-import React, { Component } from 'react';
-import {
-    Dialog,
-    DialogTrigger,
-    DialogSurface,
-    DialogTitle,
-    DialogBody,
-    DialogActions,
-    DialogContent,
-    Button,
-    Input,
-    Label,
-    Field,
-    MessageBar,
-    MessageBarBody,
-    tokens,
-} from '@fluentui/react-components';
-import { Settings24Regular, Key24Regular, Checkmark24Regular } from '@fluentui/react-icons';
-
-const STORAGE_KEY = 'flowquery_openai_api_key';
-const ORG_STORAGE_KEY = 'flowquery_openai_org_id';
-const MODEL_STORAGE_KEY = 'flowquery_openai_model';
-
-export interface ApiKeyConfig {
-    apiKey: string;
-    organizationId?: string;
-    model?: string;
-}
-
-/**
- * Get the stored API configuration from localStorage.
- */
-export function getStoredApiConfig(): ApiKeyConfig | null {
-    const apiKey = localStorage.getItem(STORAGE_KEY);
-    if (!apiKey) return null;
-    
-    return {
-        apiKey,
-        organizationId: localStorage.getItem(ORG_STORAGE_KEY) || undefined,
-        model: localStorage.getItem(MODEL_STORAGE_KEY) || undefined,
-    };
-}
-
-/**
- * Check if an API key is configured in localStorage.
- */
-export function hasApiKey(): boolean {
-    return !!localStorage.getItem(STORAGE_KEY);
-}
-
-/**
- * Get just the API key from storage.
- */
-export function getApiKey(): string | null {
-    return localStorage.getItem(STORAGE_KEY);
-}
-
-interface ApiKeySettingsProps {
-    onSave?: (config: ApiKeyConfig) => void;
-}
-
-interface ApiKeySettingsState {
-    open: boolean;
-    apiKey: string;
-    organizationId: string;
-    model: string;
-    saved: boolean;
-}
-
-export class ApiKeySettings extends Component<ApiKeySettingsProps, ApiKeySettingsState> {
-    constructor(props: ApiKeySettingsProps) {
-        super(props);
-        this.state = {
-            open: false,
-            apiKey: '',
-            organizationId: '',
-            model: '',
-            saved: false,
-        };
-    }
-
-    componentDidUpdate(_prevProps: ApiKeySettingsProps, prevState: ApiKeySettingsState): void {
-        // Load existing values when dialog opens
-        if (this.state.open && !prevState.open) {
-            const config = getStoredApiConfig();
-            this.setState({
-                apiKey: config?.apiKey || '',
-                organizationId: config?.organizationId || '',
-                model: config?.model || '',
-                saved: false,
-            });
-        }
-    }
-
-    handleOpenChange = (_: unknown, data: { open: boolean }): void => {
-        this.setState({ open: data.open });
-    };
-
-    handleSave = (): void => {
-        const { apiKey, organizationId, model } = this.state;
-        const { onSave } = this.props;
-
-        // Save to localStorage
-        if (apiKey) {
-            localStorage.setItem(STORAGE_KEY, apiKey);
-        } else {
-            localStorage.removeItem(STORAGE_KEY);
-        }
-
-        if (organizationId) {
-            localStorage.setItem(ORG_STORAGE_KEY, organizationId);
-        } else {
-            localStorage.removeItem(ORG_STORAGE_KEY);
-        }
-
-        if (model) {
-            localStorage.setItem(MODEL_STORAGE_KEY, model);
-        } else {
-            localStorage.removeItem(MODEL_STORAGE_KEY);
-        }
-
-        const config: ApiKeyConfig = {
-            apiKey,
-            organizationId: organizationId || undefined,
-            model: model || undefined,
-        };
-
-        this.setState({ saved: true });
-        onSave?.(config);
-
-        // Close dialog after a brief delay to show success
-        setTimeout(() => this.setState({ open: false }), 500);
-    };
-
-    handleClear = (): void => {
-        localStorage.removeItem(STORAGE_KEY);
-        localStorage.removeItem(ORG_STORAGE_KEY);
-        localStorage.removeItem(MODEL_STORAGE_KEY);
-        this.setState({
-            apiKey: '',
-            organizationId: '',
-            model: '',
-            saved: false,
-        });
-    };
-
-    handleCancel = (): void => {
-        this.setState({ open: false });
-    };
-
-    handleApiKeyChange = (_: unknown, data: { value: string }): void => {
-        this.setState({ apiKey: data.value });
-    };
-
-    handleOrganizationIdChange = (_: unknown, data: { value: string }): void => {
-        this.setState({ organizationId: data.value });
-    };
-
-    handleModelChange = (_: unknown, data: { value: string }): void => {
-        this.setState({ model: data.value });
-    };
-
-    render(): React.ReactNode {
-        const { open, apiKey, organizationId, model, saved } = this.state;
-        const isConfigured = hasApiKey();
-
-        return (
-            <Dialog open={open} onOpenChange={this.handleOpenChange}>
-                <DialogTrigger disableButtonEnhancement>
-                    <Button
-                        appearance={isConfigured ? 'subtle' : 'primary'}
-                        icon={isConfigured ? <Checkmark24Regular /> : <Settings24Regular />}
-                        title="API Settings"
-                    >
-                        {isConfigured ? 'API Configured' : 'Configure API Key'}
-                    </Button>
-                </DialogTrigger>
-                <DialogSurface>
-                    <DialogBody>
-                        <DialogTitle>OpenAI API Settings</DialogTitle>
-                        <DialogContent style={{ display: 'flex', flexDirection: 'column', gap: '16px', paddingTop: '16px' }}>
-                            <MessageBar intent="info">
-                                <MessageBarBody>
-                                    Your API key is stored locally in your browser and never sent to any server.
-                                </MessageBarBody>
-                            </MessageBar>
-
-                            <Field label="API Key" required>
-                                <Input
-                                    type="password"
-                                    value={apiKey}
-                                    onChange={this.handleApiKeyChange}
-                                    placeholder="sk-..."
-                                    contentBefore={<Key24Regular />}
-                                />
-                            </Field>
-
-                            <Field label="Organization ID" hint="Optional - only needed for organization accounts">
-                                <Input
-                                    value={organizationId}
-                                    onChange={this.handleOrganizationIdChange}
-                                    placeholder="org-..."
-                                />
-                            </Field>
-
-                            <Field label="Default Model" hint="Optional - defaults to gpt-4o-mini">
-                                <Input
-                                    value={model}
-                                    onChange={this.handleModelChange}
-                                    placeholder="gpt-4o-mini"
-                                />
-                            </Field>
-
-                            {saved && (
-                                <MessageBar intent="success">
-                                    <MessageBarBody>Settings saved successfully!</MessageBarBody>
-                                </MessageBar>
-                            )}
-                        </DialogContent>
-                        <DialogActions>
-                            <Button appearance="secondary" onClick={this.handleClear}>
-                                Clear
-                            </Button>
-                            <Button appearance="secondary" onClick={this.handleCancel}>
-                                Cancel
-                            </Button>
-                            <Button appearance="primary" onClick={this.handleSave} disabled={!apiKey}>
-                                Save
-                            </Button>
-                        </DialogActions>
-                    </DialogBody>
-                </DialogSurface>
-            </Dialog>
-        );
-    }
-}
-
-export default ApiKeySettings;

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

@@ -1,67 +0,0 @@
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: #ffffff;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-    background-color: #fafafa;
-}
-
-.chat-empty-state {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: #666;
-    text-align: center;
-    padding: 24px;
-}
-
-.chat-empty-state p {
-    margin: 0;
-    font-size: 16px;
-}
-
-.chat-loading {
-    display: flex;
-    justify-content: center;
-    padding: 16px;
-}
-
-.chat-error {
-    padding: 12px 16px;
-    background-color: #fde7e9;
-    color: #c50f1f;
-    border-top: 1px solid #c50f1f;
-    font-size: 14px;
-}
-
-.chat-clear-button {
-    padding: 8px 16px;
-    margin: 8px 16px 16px;
-    background-color: transparent;
-    border: 1px solid #d1d1d1;
-    border-radius: 4px;
-    color: #666;
-    cursor: pointer;
-    font-size: 14px;
-    transition: all 0.2s ease;
-}
-
-.chat-clear-button:hover:not(:disabled) {
-    background-color: #f5f5f5;
-    border-color: #b3b3b3;
-}
-
-.chat-clear-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}