flowquery 1.0.46 → 1.0.48

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

@@ -1,242 +0,0 @@
-import React, { Component, createRef, RefObject } from 'react';
-import { Spinner } from '@fluentui/react-components';
-import { ChatMessage, Message } from './ChatMessage';
-import { ChatInput } from './ChatInput';
-import { FlowQueryAgent } from './FlowQueryAgent';
-import './ChatContainer.css';
-
-interface ChatContainerProps {
-    systemPrompt?: string;
-    /** Whether to show intermediate steps (query generation, execution) */
-    showIntermediateSteps?: boolean;
-}
-
-interface ChatContainerState {
-    messages: Message[];
-    isLoading: boolean;
-    error: string | null;
-}
-
-export class ChatContainer extends Component<ChatContainerProps, ChatContainerState> {
-    static defaultProps: Partial<ChatContainerProps> = {
-        systemPrompt: 'You are a helpful assistant. Be concise and informative in your responses.',
-        showIntermediateSteps: true
-    };
-
-    private readonly agent = new FlowQueryAgent();
-
-    private messagesEndRef: RefObject<HTMLDivElement | null>;
-
-    constructor(props: ChatContainerProps) {
-        super(props);
-        this.state = {
-            messages: [],
-            isLoading: false,
-            error: null
-        };
-        this.messagesEndRef = createRef<HTMLDivElement>();
-    }
-
-    componentDidUpdate(_prevProps: ChatContainerProps, prevState: ChatContainerState): void {
-        if (prevState.messages !== this.state.messages) {
-            this.scrollToBottom();
-        }
-    }
-
-    private scrollToBottom = (): void => {
-        this.messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-
-    private generateMessageId = (): string => {
-        return `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    };
-
-    private buildConversationHistory = (currentMessages: Message[]): Array<{ role: 'user' | 'assistant'; content: string }> => {
-        return currentMessages.map(msg => ({
-            role: msg.role as 'user' | 'assistant',
-            content: msg.content
-        }));
-    };
-
-    private handleSendMessage = async (content: string): Promise<void> => {
-        const { systemPrompt, showIntermediateSteps } = this.props;
-        const { messages } = this.state;
-
-        const userMessage: Message = {
-            id: this.generateMessageId(),
-            role: 'user',
-            content,
-            timestamp: new Date()
-        };
-
-        this.setState(prev => ({
-            messages: [...prev.messages, userMessage],
-            isLoading: true,
-            error: null
-        }));
-
-        const assistantMessageId = this.generateMessageId();
-        // Track the current message ID - may change if newMessage flag is received during streaming
-        // Needs to be in outer scope so catch block can access it
-        let currentMessageId = assistantMessageId;
-        
-        try {
-            const conversationHistory = this.buildConversationHistory([...messages, userMessage]);
-
-            const assistantMessage: Message = {
-                id: assistantMessageId,
-                role: 'assistant',
-                content: '',
-                timestamp: new Date(),
-                isStreaming: true
-            };
-            this.setState(prev => ({
-                messages: [...prev.messages, assistantMessage]
-            }));
-
-            let fullContent = '';
-            let adaptiveCardFromStream: Record<string, unknown> | undefined;
-            
-            for await (const { chunk, done, adaptiveCard, newMessage } of this.agent.processQueryStream(content, {
-                systemPrompt: systemPrompt ?? 'You are a helpful assistant. Be concise and informative in your responses.',
-                conversationHistory: conversationHistory.slice(0, -1),
-                showIntermediateSteps
-            })) {
-                // If newMessage flag is set, finalize current message and start a new one
-                if (newMessage) {
-                    const previousMessageId = currentMessageId;
-                    currentMessageId = this.generateMessageId();
-                    fullContent = '';
-                    const newAssistantMessage: Message = {
-                        id: currentMessageId,
-                        role: 'assistant',
-                        content: '',
-                        timestamp: new Date(),
-                        isStreaming: true
-                    };
-                    this.setState(prev => ({
-                        messages: [...prev.messages.map(msg => 
-                            msg.id === previousMessageId 
-                                ? { ...msg, isStreaming: false }
-                                : msg
-                        ), newAssistantMessage]
-                    }));
-                }
-                
-                if (chunk) {
-                    fullContent += chunk;
-                    this.setState(prev => ({
-                        messages: prev.messages.map(msg => 
-                            msg.id === currentMessageId 
-                                ? { ...msg, content: fullContent }
-                                : msg
-                        )
-                    }));
-                }
-                
-                if (adaptiveCard) {
-                    adaptiveCardFromStream = adaptiveCard;
-                }
-                
-                if (done) {
-                    this.setState(prev => ({
-                        messages: prev.messages.map(msg => 
-                            msg.id === currentMessageId 
-                                ? { ...msg, isStreaming: false, adaptiveCard: adaptiveCardFromStream }
-                                : msg
-                        )
-                    }));
-                }
-            }
-        } catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An error occurred while processing your request.';
-            
-            // Add or update error message as assistant response
-            // Use currentMessageId which may differ from assistantMessageId if a retry created a new message
-            const errorContent = `⚠️ Error: ${errorMessage}`;
-            this.setState(prev => {
-                // Check if we already added a streaming message with this ID
-                const existingMessageIndex = prev.messages.findIndex(msg => msg.id === currentMessageId);
-                if (existingMessageIndex !== -1) {
-                    // Update existing message
-                    return {
-                        messages: prev.messages.map(msg => 
-                            msg.id === currentMessageId 
-                                ? { ...msg, content: errorContent, isStreaming: false }
-                                : msg
-                        ),
-                        error: errorMessage
-                    };
-                } else {
-                    // Add new error message
-                    return {
-                        messages: [...prev.messages, {
-                            id: currentMessageId,
-                            role: 'assistant' as const,
-                            content: errorContent,
-                            timestamp: new Date()
-                        }],
-                        error: errorMessage
-                    };
-                }
-            });
-        } finally {
-            this.setState({ isLoading: false });
-        }
-    };
-
-    private handleClearChat = (): void => {
-        this.setState({
-            messages: [],
-            error: null
-        });
-    };
-
-    render(): React.ReactNode {
-        const { messages, isLoading, error } = this.state;
-
-        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={this.messagesEndRef} />
-                </div>
-                
-                {error && !messages.some(m => m.content.includes(error)) && (
-                    <div className="chat-error">
-                        {error}
-                    </div>
-                )}
-                
-                <ChatInput 
-                    onSendMessage={this.handleSendMessage} 
-                    isLoading={isLoading}
-                    placeholder="Ask me anything..."
-                />
-                
-                {messages.length > 0 && (
-                    <button 
-                        className="chat-clear-button"
-                        onClick={this.handleClearChat}
-                        disabled={isLoading}
-                    >
-                        Clear conversation
-                    </button>
-                )}
-            </div>
-        );
-    }
-}

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

@@ -1,23 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-import React, { Component, 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;
-}
-
-interface ChatInputState {
-    inputValue: string;
-}
-
-export class ChatInput extends Component<ChatInputProps, ChatInputState> {
-    static defaultProps = {
-        placeholder: 'Ask me anything...'
-    };
-
-    constructor(props: ChatInputProps) {
-        super(props);
-        this.state = {
-            inputValue: ''
-        };
-    }
-
-    handleSend = (): void => {
-        const trimmedValue = this.state.inputValue.trim();
-        if (trimmedValue && !this.props.isLoading) {
-            this.props.onSendMessage(trimmedValue);
-            this.setState({ inputValue: '' });
-        }
-    };
-
-    handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            this.handleSend();
-        }
-    };
-
-    handleChange = (
-        _e: React.ChangeEvent<HTMLTextAreaElement>,
-        data: { value: string }
-    ): void => {
-        this.setState({ inputValue: data.value });
-    };
-
-    render() {
-        const { isLoading, placeholder } = this.props;
-        const { inputValue } = this.state;
-
-        return (
-            <div className="chat-input-container">
-                <Textarea
-                    className="chat-input-textarea"
-                    value={inputValue}
-                    onChange={this.handleChange}
-                    onKeyDown={this.handleKeyDown}
-                    placeholder={placeholder}
-                    resize="none"
-                    disabled={isLoading}
-                />
-                <Button
-                    className="chat-input-send-button"
-                    appearance="primary"
-                    icon={<SendFilled />}
-                    onClick={this.handleSend}
-                    disabled={isLoading || !inputValue.trim()}
-                    title="Send message (Enter)"
-                />
-            </div>
-        );
-    }
-}

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

@@ -1,160 +0,0 @@
-.chat-message {
-    display: flex;
-    gap: 12px;
-    padding: 16px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-}
-
-.chat-message-user {
-    background-color: #e8f4fd;
-}
-
-.chat-message-assistant {
-    background-color: #f5f5f5;
-}
-
-.chat-message-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 18px;
-}
-
-.chat-message-user .chat-message-avatar {
-    background-color: #0078d4;
-    color: white;
-}
-
-.chat-message-assistant .chat-message-avatar {
-    background-color: #6b6b6b;
-    color: white;
-}
-
-.chat-message-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.chat-message-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 4px;
-}
-
-.chat-message-role {
-    font-weight: 600;
-}
-
-.chat-message-time {
-    font-size: 12px;
-    color: #666;
-}
-
-.flowquery-toggle-link {
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-    font-size: 12px;
-    font-weight: 600;
-    color: #666;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 2px 6px;
-    border-radius: 4px;
-    transition: background-color 0.15s ease, color 0.15s ease;
-    margin-left: 4px;
-}
-
-.flowquery-toggle-link:hover {
-    background-color: rgba(0, 120, 212, 0.1);
-    color: #0078d4;
-}
-
-.flowquery-toggle-link.active {
-    color: #0078d4;
-    background-color: rgba(0, 120, 212, 0.1);
-}
-
-.chat-message-text {
-    white-space: pre-wrap;
-    word-break: break-word;
-    line-height: 1.5;
-}
-
-.streaming-indicator {
-    margin-left: 8px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* FlowQuery code block styling */
-.flowquery-code-block {
-    margin: 12px 0;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    overflow: hidden;
-    background-color: #f8f8f8;
-}
-
-.flowquery-code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 12px;
-    background-color: #e8e8e8;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.flowquery-code-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.flowquery-code-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.flowquery-run-link {
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-    font-size: 13px;
-    font-weight: 600;
-    color: #0078d4;
-    text-decoration: none;
-    cursor: pointer;
-    padding: 2px 6px;
-    border-radius: 4px;
-    transition: background-color 0.15s ease;
-}
-
-.flowquery-run-link:hover {
-    background-color: rgba(0, 120, 212, 0.1);
-    text-decoration: none;
-}
-
-.flowquery-run-button {
-    font-size: 11px;
-}
-
-.flowquery-code-content {
-    margin: 0;
-    padding: 12px;
-    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-    font-size: 13px;
-    line-height: 1.4;
-    overflow-x: auto;
-    white-space: pre-wrap;
-}
-
-.flowquery-code-content code {
-    font-family: inherit;
-}