flowquery 1.0.7 → 1.0.9

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

@@ -0,0 +1,172 @@
+.adaptive-card-container {
+    margin: 8px 0;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.adaptive-card-container .ac-adaptiveCard {
+    padding: 12px;
+    background: var(--colorNeutralBackground1, #ffffff);
+    border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Table styling */
+.adaptive-card-container .ac-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 8px 0;
+}
+
+.adaptive-card-container .ac-tableRow {
+    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+}
+
+.adaptive-card-container .ac-tableRow:first-child {
+    background: var(--colorNeutralBackground3, #f5f5f5);
+    font-weight: 600;
+}
+
+.adaptive-card-container .ac-tableCell {
+    padding: 8px 12px;
+    text-align: left;
+    vertical-align: top;
+}
+
+/* Text styling */
+.adaptive-card-container .ac-textBlock {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.adaptive-card-container .ac-textBlock.ac-text-large {
+    font-size: 18px;
+    line-height: 1.3;
+}
+
+.adaptive-card-container .ac-textBlock.ac-text-medium {
+    font-size: 14px;
+}
+
+.adaptive-card-container .ac-textBlock.ac-text-small {
+    font-size: 12px;
+}
+
+/* FactSet styling */
+.adaptive-card-container .ac-factSet {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 16px;
+    margin: 8px 0;
+}
+
+.adaptive-card-container .ac-fact-title {
+    font-weight: 600;
+    color: var(--colorNeutralForeground1, #242424);
+}
+
+.adaptive-card-container .ac-fact-value {
+    color: var(--colorNeutralForeground2, #616161);
+}
+
+/* Button/Action styling */
+.adaptive-card-container .ac-pushButton {
+    font-family: inherit;
+    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--colorBrandBackground, #0078d4);
+    background: var(--colorBrandBackground, #0078d4);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+}
+
+.adaptive-card-container .ac-pushButton:hover {
+    background: var(--colorBrandBackgroundHover, #106ebe);
+}
+
+.adaptive-card-container .ac-pushButton:active {
+    background: var(--colorBrandBackgroundPressed, #005a9e);
+}
+
+/* Input styling */
+.adaptive-card-container .ac-input {
+    font-family: inherit;
+    font-size: 14px;
+    padding: 6px 10px;
+    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+    border-radius: 4px;
+    background: var(--colorNeutralBackground1, #ffffff);
+    color: var(--colorNeutralForeground1, #242424);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.adaptive-card-container .ac-input:focus {
+    outline: none;
+    border-color: var(--colorBrandStroke1, #0078d4);
+    box-shadow: 0 0 0 1px var(--colorBrandStroke1, #0078d4);
+}
+
+/* Error styling */
+.adaptive-card-error {
+    padding: 12px;
+    background: var(--colorStatusDangerBackground1, #fde7e9);
+    color: var(--colorStatusDangerForeground1, #a80000);
+    border: 1px solid var(--colorStatusDangerBorder1, #f1bbbc);
+    border-radius: 4px;
+    font-size: 13px;
+}
+
+/* Image styling */
+.adaptive-card-container .ac-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+/* Container styling */
+.adaptive-card-container .ac-container {
+    padding: 8px;
+}
+
+/* Separator */
+.adaptive-card-container .ac-separator {
+    height: 1px;
+    background: var(--colorNeutralStroke2, #e0e0e0);
+    margin: 8px 0;
+}
+
+/* Column set */
+.adaptive-card-container .ac-columnSet {
+    display: flex;
+    gap: 8px;
+}
+
+.adaptive-card-container .ac-column {
+    flex: 1;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .adaptive-card-container .ac-adaptiveCard {
+        background: var(--colorNeutralBackground1, #292929);
+        border-color: var(--colorNeutralStroke1, #404040);
+    }
+    
+    .adaptive-card-container .ac-tableRow:first-child {
+        background: var(--colorNeutralBackground3, #1f1f1f);
+    }
+    
+    .adaptive-card-container .ac-tableRow {
+        border-color: var(--colorNeutralStroke2, #404040);
+    }
+    
+    .adaptive-card-error {
+        background: var(--colorStatusDangerBackground1, #3b1f1f);
+        color: var(--colorStatusDangerForeground1, #ff8c8c);
+        border-color: var(--colorStatusDangerBorder1, #6b3030);
+    }
+}

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

@@ -0,0 +1,312 @@
+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 {
+            // Apply data binding if data is provided
+            let cardPayload = card;
+            if (data) {
+                const template = new ACData.Template(card);
+                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
+ */
+export function isAdaptiveCard(obj: unknown): obj is Record<string, unknown> {
+    return (
+        typeof obj === 'object' &&
+        obj !== null &&
+        (obj as Record<string, unknown>).type === 'AdaptiveCard'
+    );
+}
+
+export default AdaptiveCardRenderer;