flowquery 1.0.12 → 1.0.14

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

@@ -56,6 +56,30 @@
     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;

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

@@ -67,6 +67,7 @@ interface MessageContentProps {
     content: string;
     isStreaming?: boolean;
     adaptiveCard?: Record<string, unknown>;
+    showFlowQuery?: boolean;
 }
 
 interface MessageContentState {
@@ -107,7 +108,7 @@ class MessageContent extends Component<MessageContentProps, MessageContentState>
     }
 
     render() {
-        const { content, isStreaming } = this.props;
+        const { content, isStreaming, showFlowQuery } = this.props;
         const { runnerQuery } = this.state;
         
         const flowQueryBlocks = this.getFlowQueryBlocks();
@@ -126,6 +127,21 @@ class MessageContent extends Component<MessageContentProps, MessageContentState>
             );
         }
 
+        // If FlowQuery blocks are hidden, render content without code blocks
+        if (!showFlowQuery) {
+            // Remove FlowQuery code blocks from content for display
+            const contentWithoutFlowQuery = content.replace(/```flowquery\n[\s\S]*?```/gi, '').trim();
+            return (
+                <>
+                    {contentWithoutFlowQuery}
+                    {allAdaptiveCards.map((card, index) => (
+                        <AdaptiveCardRenderer key={`card-${index}`} card={card} />
+                    ))}
+                    {isStreaming && <Spinner size="tiny" className="streaming-indicator" />}
+                </>
+            );
+        }
+
         // Split content by FlowQuery code blocks and render with buttons
         const parts: React.ReactNode[] = [];
         let lastIndex = 0;
@@ -204,10 +220,31 @@ class MessageContent extends Component<MessageContentProps, MessageContentState>
     }
 }
 
-export class ChatMessage extends Component<ChatMessageProps> {
+interface ChatMessageState {
+    showFlowQuery: boolean;
+}
+
+export class ChatMessage extends Component<ChatMessageProps, ChatMessageState> {
+    constructor(props: ChatMessageProps) {
+        super(props);
+        this.state = {
+            showFlowQuery: false
+        };
+    }
+
+    private hasFlowQueryBlocks(): boolean {
+        return /```flowquery\n[\s\S]*?```/gi.test(this.props.message.content);
+    }
+
+    private toggleFlowQuery = (): void => {
+        this.setState(prev => ({ showFlowQuery: !prev.showFlowQuery }));
+    };
+
     render() {
         const { message } = this.props;
+        const { showFlowQuery } = this.state;
         const isUser = message.role === 'user';
+        const hasFlowQuery = !isUser && this.hasFlowQueryBlocks();
 
         return (
             <div className={`chat-message ${isUser ? 'chat-message-user' : 'chat-message-assistant'}`}>
@@ -222,12 +259,24 @@ export class ChatMessage extends Component<ChatMessageProps> {
                         <span className="chat-message-time">
                             {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                         </span>
+                        {hasFlowQuery && (
+                            <Tooltip content={showFlowQuery ? 'Hide FlowQuery' : 'Show FlowQuery'} relationship="label">
+                                <button
+                                    className={`flowquery-toggle-link ${showFlowQuery ? 'active' : ''}`}
+                                    onClick={this.toggleFlowQuery}
+                                    aria-label={showFlowQuery ? 'Hide FlowQuery code' : 'Show FlowQuery code'}
+                                >
+                                    &lt;/&gt;
+                                </button>
+                            </Tooltip>
+                        )}
                     </div>
                     <div className="chat-message-text">
                         <MessageContent 
                             content={message.content} 
                             isStreaming={message.isStreaming}
                             adaptiveCard={message.adaptiveCard}
+                            showFlowQuery={showFlowQuery}
                         />
                     </div>
                 </div>