flowquery 1.0.3 → 1.0.6

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

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import {
+    FluentProvider,
+    webLightTheme,
+    Title3,
+} from '@fluentui/react-components';
+import { ApiKeySettings } from './components/ApiKeySettings';
+import { FlowQueryRunner } from './components/FlowQueryRunner';
+import { ChatContainer } from './components/ChatContainer';
+import { generateFlowQuerySystemPrompt } from './prompts';
+import './App.css';
+
+const App: React.FC = () => {
+    const [systemPrompt, setSystemPrompt] = useState<string>('');
+
+    useEffect(() => {
+        // Generate the system prompt after plugins are initialized
+        const prompt = generateFlowQuerySystemPrompt();
+        setSystemPrompt(prompt);
+    }, []);
+
+    return (
+        <FluentProvider theme={webLightTheme}>
+            <div className="app-root">
+                <div className="app-container">
+                    <div className="app-header">
+                        <Title3 as="h1">
+                            FlowQuery Assistant
+                        </Title3>
+                        <div className="app-header-actions">
+                            <FlowQueryRunner />
+                            <ApiKeySettings />
+                        </div>
+                    </div>
+
+                    <div className="chat-wrapper">
+                        <ChatContainer
+                            systemPrompt={systemPrompt}
+                            useStreaming={true}
+                            useFlowQueryAgent={true}
+                            showIntermediateSteps={true}
+                        />
+                    </div>
+                </div>
+            </div>
+        </FluentProvider>
+    );
+};
+
+export default App;

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

@@ -0,0 +1,245 @@
+/**
+ * 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

@@ -0,0 +1,67 @@
+.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;
+}

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

@@ -0,0 +1,239 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Spinner } from '@fluentui/react-components';
+import { ChatMessage, Message } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { LlmOptions } from '../plugins/loaders/Llm';
+import { processQueryStream } from './FlowQueryAgent';
+import './ChatContainer.css';
+
+interface ChatContainerProps {
+    systemPrompt?: string;
+    llmOptions?: LlmOptions;
+    useStreaming?: boolean;
+    /** Whether to use the FlowQuery agent for processing queries */
+    useFlowQueryAgent?: boolean;
+    /** Whether to show intermediate steps (query generation, execution) */
+    showIntermediateSteps?: boolean;
+}
+
+export const ChatContainer: React.FC<ChatContainerProps> = ({
+    systemPrompt = 'You are a helpful assistant. Be concise and informative in your responses.',
+    llmOptions = {},
+    useStreaming = true,
+    useFlowQueryAgent = true,
+    showIntermediateSteps = true
+}) => {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = useCallback(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages, scrollToBottom]);
+
+    const generateMessageId = () => `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    const buildConversationHistory = useCallback((currentMessages: Message[]) => {
+        return currentMessages.map(msg => ({
+            role: msg.role as 'user' | 'assistant',
+            content: msg.content
+        }));
+    }, []);
+
+    const handleSendMessage = useCallback(async (content: string) => {
+        const userMessage: Message = {
+            id: generateMessageId(),
+            role: 'user',
+            content,
+            timestamp: new Date()
+        };
+
+        setMessages(prev => [...prev, userMessage]);
+        setIsLoading(true);
+        setError(null);
+
+        const assistantMessageId = generateMessageId();
+        
+        try {
+            const conversationHistory = buildConversationHistory([...messages, userMessage]);
+            
+            if (useFlowQueryAgent) {
+                // Use the FlowQuery agent for processing
+                const assistantMessage: Message = {
+                    id: assistantMessageId,
+                    role: 'assistant',
+                    content: '',
+                    timestamp: new Date(),
+                    isStreaming: true
+                };
+                setMessages(prev => [...prev, assistantMessage]);
+
+                let fullContent = '';
+                
+                for await (const { chunk, done } of processQueryStream(content, {
+                    systemPrompt,
+                    llmOptions,
+                    conversationHistory: conversationHistory.slice(0, -1),
+                    showIntermediateSteps
+                })) {
+                    if (chunk) {
+                        fullContent += chunk;
+                        setMessages(prev => 
+                            prev.map(msg => 
+                                msg.id === assistantMessageId 
+                                    ? { ...msg, content: fullContent }
+                                    : msg
+                            )
+                        );
+                    }
+                    
+                    if (done) {
+                        setMessages(prev => 
+                            prev.map(msg => 
+                                msg.id === assistantMessageId 
+                                    ? { ...msg, isStreaming: false }
+                                    : msg
+                            )
+                        );
+                    }
+                }
+            } else {
+                // Original LLM-only behavior (kept for backward compatibility)
+                const { llm, llmStream } = await import('../plugins/loaders/Llm');
+                
+                const options: LlmOptions = {
+                    ...llmOptions,
+                    systemPrompt,
+                    messages: conversationHistory.slice(0, -1),
+                };
+
+                if (useStreaming) {
+                    const assistantMessage: Message = {
+                        id: assistantMessageId,
+                        role: 'assistant',
+                        content: '',
+                        timestamp: new Date(),
+                        isStreaming: true
+                    };
+                    setMessages(prev => [...prev, assistantMessage]);
+
+                    let fullContent = '';
+                    for await (const chunk of llmStream(content, options)) {
+                        const deltaContent = chunk.choices?.[0]?.delta?.content || '';
+                        if (deltaContent) {
+                            fullContent += deltaContent;
+                            setMessages(prev => 
+                                prev.map(msg => 
+                                    msg.id === assistantMessageId 
+                                        ? { ...msg, content: fullContent }
+                                        : msg
+                                )
+                            );
+                        }
+                    }
+
+                    setMessages(prev => 
+                        prev.map(msg => 
+                            msg.id === assistantMessageId 
+                                ? { ...msg, isStreaming: false }
+                                : msg
+                        )
+                    );
+                } else {
+                    const response = await llm(content, options);
+                    const assistantContent = response.choices[0]?.message?.content || 'No response received.';
+                    
+                    const assistantMessage: Message = {
+                        id: assistantMessageId,
+                        role: 'assistant',
+                        content: assistantContent,
+                        timestamp: new Date()
+                    };
+                    setMessages(prev => [...prev, assistantMessage]);
+                }
+            }
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'An error occurred while processing your request.';
+            setError(errorMessage);
+            
+            // Add or update error message as assistant response
+            const errorContent = `⚠️ Error: ${errorMessage}`;
+            setMessages(prev => {
+                // Check if we already added a streaming message with this ID
+                const existingMessageIndex = prev.findIndex(msg => msg.id === assistantMessageId);
+                if (existingMessageIndex !== -1) {
+                    // Update existing message
+                    return prev.map(msg => 
+                        msg.id === assistantMessageId 
+                            ? { ...msg, content: errorContent, isStreaming: false }
+                            : msg
+                    );
+                } else {
+                    // Add new error message
+                    return [...prev, {
+                        id: assistantMessageId,
+                        role: 'assistant' as const,
+                        content: errorContent,
+                        timestamp: new Date()
+                    }];
+                }
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    }, [messages, systemPrompt, llmOptions, useStreaming, useFlowQueryAgent, showIntermediateSteps, buildConversationHistory]);
+
+    const handleClearChat = useCallback(() => {
+        setMessages([]);
+        setError(null);
+    }, []);
+
+    return (
+        <div className="chat-container">
+            <div className="chat-messages">
+                {messages.length === 0 ? (
+                    <div className="chat-empty-state">
+                        <p>Start a conversation by typing a message below.</p>
+                    </div>
+                ) : (
+                    messages.map(message => (
+                        <ChatMessage key={message.id} message={message} />
+                    ))
+                )}
+                {isLoading && messages[messages.length - 1]?.role === 'user' && (
+                    <div className="chat-loading">
+                        <Spinner size="small" label="Thinking..." />
+                    </div>
+                )}
+                <div ref={messagesEndRef} />
+            </div>
+            
+            {error && !messages.some(m => m.content.includes(error)) && (
+                <div className="chat-error">
+                    {error}
+                </div>
+            )}
+            
+            <ChatInput 
+                onSendMessage={handleSendMessage} 
+                isLoading={isLoading}
+                placeholder="Ask me anything..."
+            />
+            
+            {messages.length > 0 && (
+                <button 
+                    className="chat-clear-button"
+                    onClick={handleClearChat}
+                    disabled={isLoading}
+                >
+                    Clear conversation
+                </button>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,23 @@
+.chat-input-container {
+    display: flex;
+    gap: 8px;
+    padding: 16px;
+    background-color: #ffffff;
+    border-top: 1px solid #e0e0e0;
+    align-items: flex-end;
+}
+
+.chat-input-textarea {
+    flex: 1;
+    min-height: 44px;
+    max-height: 150px;
+}
+
+.chat-input-textarea textarea {
+    min-height: 44px;
+}
+
+.chat-input-send-button {
+    height: 44px;
+    min-width: 44px;
+}

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

@@ -0,0 +1,62 @@
+import React, { useState, useCallback, KeyboardEvent } from 'react';
+import { Textarea, Button } from '@fluentui/react-components';
+import { SendFilled } from '@fluentui/react-icons';
+import './ChatInput.css';
+
+interface ChatInputProps {
+    onSendMessage: (message: string) => void;
+    isLoading: boolean;
+    placeholder?: string;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({
+    onSendMessage,
+    isLoading,
+    placeholder = 'Ask me anything...'
+}) => {
+    const [inputValue, setInputValue] = useState('');
+
+    const handleSend = useCallback(() => {
+        const trimmedValue = inputValue.trim();
+        if (trimmedValue && !isLoading) {
+            onSendMessage(trimmedValue);
+            setInputValue('');
+        }
+    }, [inputValue, isLoading, onSendMessage]);
+
+    const handleKeyDown = useCallback((e: KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+
+    const handleChange = useCallback((
+        _e: React.ChangeEvent<HTMLTextAreaElement>,
+        data: { value: string }
+    ) => {
+        setInputValue(data.value);
+    }, []);
+
+    return (
+        <div className="chat-input-container">
+            <Textarea
+                className="chat-input-textarea"
+                value={inputValue}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                resize="none"
+                disabled={isLoading}
+            />
+            <Button
+                className="chat-input-send-button"
+                appearance="primary"
+                icon={<SendFilled />}
+                onClick={handleSend}
+                disabled={isLoading || !inputValue.trim()}
+                title="Send message (Enter)"
+            />
+        </div>
+    );
+};