Add Exec Results pane for SQL support (#890)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <v-ianseabock@microsoft.com>

frontend/package.json

@@ -70,4 +70,4 @@
     "typescript": "^4.9.5",
     "vite": "^4.1.5"
   }
-}
+}

frontend/src/api/models.ts

@@ -7,6 +7,7 @@ export type AskResponse = {
   error?: string
   message_id?: string
   feedback?: Feedback
+  exec_results?: ExecResults[]
 }
 
 export type Citation = {
@@ -53,6 +54,12 @@ export type ChatMessage = {
   context?: string
 }
 
+export type ExecResults = {
+  intent: string
+  search_query: string | null
+  search_result: string | null
+}
+
 export type Conversation = {
   id: string
   title: string

frontend/src/components/Answer/Answer.tsx

@@ -20,9 +20,10 @@ import styles from './Answer.module.css'
 interface Props {
   answer: AskResponse
   onCitationClicked: (citedDocument: Citation) => void
+  onExectResultClicked: () => void
 }
 
-export const Answer = ({ answer, onCitationClicked }: Props) => {
+export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Props) => {
   const initializeAnswerFeedback = (answer: AskResponse) => {
     if (answer.message_id == undefined) return undefined
     if (answer.feedback == undefined) return undefined
@@ -227,7 +228,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
   }
 
   const components = {
-    code({ node, ...props }: { node: any; [key: string]: any }) {
+    code({ node, ...props }: { node: any;[key: string]: any }) {
       let language
       if (props.className) {
         const match = props.className.match(/language-(\w+)/)
@@ -268,7 +269,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
                     onClick={() => onLikeResponseClicked()}
                     style={
                       feedbackState === Feedback.Positive ||
-                      appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
+                        appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
                         ? { color: 'darkgreen', cursor: 'pointer' }
                         : { color: 'slategray', cursor: 'pointer' }
                     }
@@ -279,8 +280,8 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
                     onClick={() => onDislikeResponseClicked()}
                     style={
                       feedbackState !== Feedback.Positive &&
-                      feedbackState !== Feedback.Neutral &&
-                      feedbackState !== undefined
+                        feedbackState !== Feedback.Neutral &&
+                        feedbackState !== undefined
                         ? { color: 'darkred', cursor: 'pointer' }
                         : { color: 'slategray', cursor: 'pointer' }
                     }
@@ -326,6 +327,29 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
           <Stack.Item className={styles.answerDisclaimerContainer}>
             <span className={styles.answerDisclaimer}>AI-generated content may be incorrect</span>
           </Stack.Item>
+          {!!answer.exec_results?.length && (
+            <Stack.Item onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
+              <Stack style={{ width: '100%' }}>
+                <Stack horizontal horizontalAlign="start" verticalAlign="center">
+                  <Text
+                    className={styles.accordionTitle}
+                    onClick={() => onExectResultClicked()}
+                    aria-label="Open exec results"
+                    tabIndex={0}
+                    role="button">
+                    <span>
+                      Show Exec Results
+                    </span>
+                  </Text>
+                  <FontIcon
+                    className={styles.accordionIcon}
+                    onClick={handleChevronClick}
+                    iconName={'ChevronRight'}
+                  />
+                </Stack>
+              </Stack>
+            </Stack.Item>
+          )}
         </Stack>
         {chevronIsExpanded && (
           <div className={styles.citationWrapper}>

frontend/src/pages/chat/Chat.module.css

@@ -308,6 +308,33 @@
   flex-grow: 0;
 }
 
+.exectResultList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid #323130;
+  margin-top: 12px;
+}
+
+.exectResultList:first-child {
+  margin-top: 0;
+}
+
+.exectResultList:last-child {
+  border-bottom: none;
+}
+
+.exectResultList > p {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  margin: 3px 0;
+}
+
+.exectResultList > p > span {
+  font-weight: 600;
+}
+
 a {
   padding-left: 5px;
   padding-right: 5px;

frontend/src/pages/chat/Chat.tsx

@@ -29,6 +29,7 @@ import {
   ChatHistoryLoadingState,
   CosmosDBStatus,
   ErrorMessage,
+  ExecResults,
   AzureSqlServerCodeExecResult
 } from "../../api";
 import { Answer } from "../../components/Answer";
@@ -52,9 +53,11 @@ const Chat = () => {
   const [showLoadingMessage, setShowLoadingMessage] = useState<boolean>(false)
   const [activeCitation, setActiveCitation] = useState<Citation>()
   const [isCitationPanelOpen, setIsCitationPanelOpen] = useState<boolean>(false)
+  const [isIntentsPanelOpen, setIsIntentsPanelOpen] = useState<boolean>(false)
   const abortFuncs = useRef([] as AbortController[])
   const [showAuthMessage, setShowAuthMessage] = useState<boolean | undefined>()
   const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [execResults, setExecResults] = useState<ExecResults[]>([])
   const [processMessages, setProcessMessages] = useState<messageStatus>(messageStatus.NotRunning)
   const [clearingChat, setClearingChat] = useState<boolean>(false)
   const [hideErrorDialog, { toggle: toggleErrorDialog }] = useBoolean(true)
@@ -122,6 +125,11 @@ const Chat = () => {
   let assistantContent = ''
 
   const processResultMessage = (resultMessage: ChatMessage, userMessage: ChatMessage, conversationId?: string) => {
+    if (resultMessage.content.includes('all_exec_results')) {
+      const parsedExecResults = JSON.parse(resultMessage.content) as AzureSqlServerExecResults
+      setExecResults(parsedExecResults.all_exec_results)
+    }
+
     if (resultMessage.role === ASSISTANT) {
       assistantContent += resultMessage.content
       assistantMessage = resultMessage
@@ -519,6 +527,7 @@ const Chat = () => {
         appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY', payload: appStateContext?.state.currentChat })
         setActiveCitation(undefined)
         setIsCitationPanelOpen(false)
+        setIsIntentsPanelOpen(false)
         setMessages([])
       }
     }
@@ -584,6 +593,7 @@ const Chat = () => {
     setProcessMessages(messageStatus.Processing)
     setMessages([])
     setIsCitationPanelOpen(false)
+    setIsIntentsPanelOpen(false)
     setActiveCitation(undefined)
     appStateContext?.dispatch({ type: 'UPDATE_CURRENT_CHAT', payload: null })
     setProcessMessages(messageStatus.Done)
@@ -671,6 +681,10 @@ const Chat = () => {
     setIsCitationPanelOpen(true)
   }
 
+  const onShowExecResult = () => {
+    setIsIntentsPanelOpen(true)
+  }
+
   const onViewSource = (citation: Citation) => {
     if (citation.url && !citation.url.includes('blob.core')) {
       window.open(citation.url, '_blank')
@@ -771,9 +785,11 @@ const Chat = () => {
                             citations: parseCitationFromMessage(messages[index - 1]),
                             plotly_data: parsePlotFromMessage(messages[index - 1]),
                             message_id: answer.id,
-                            feedback: answer.feedback
+                            feedback: answer.feedback,
+                            exec_results: execResults
                           }}
                           onCitationClicked={c => onShowCitation(c)}
+                          onExectResultClicked={() => onShowExecResult()}
                         />
                       </div>
                     ) : answer.role === ERROR ? (
@@ -797,6 +813,7 @@ const Chat = () => {
                           plotly_data: null
                         }}
                         onCitationClicked={() => null}
+                        onExectResultClicked={() => null}
                       />
                     </div>
                   </>
@@ -941,6 +958,36 @@ const Chat = () => {
               </div>
             </Stack.Item>
           )}
+          {messages && messages.length > 0 && isIntentsPanelOpen && (
+            <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Exec Results Panel">
+              <Stack
+                aria-label="Intents Panel Header Container"
+                horizontal
+                className={styles.citationPanelHeaderContainer}
+                horizontalAlign="space-between"
+                verticalAlign="center">
+                <span aria-label="Intents" className={styles.citationPanelHeader}>
+                  Exec Results
+                </span>
+                <IconButton
+                  iconProps={{ iconName: 'Cancel' }}
+                  aria-label="Close intents panel"
+                  onClick={() => setIsIntentsPanelOpen(false)}
+                />
+              </Stack>
+              <Stack horizontalAlign="space-between">
+                {execResults.map((execResult) => {
+                  return (
+                    <Stack className={styles.exectResultList} verticalAlign="space-between">
+                      <p><span>Intent:</span> {execResult.intent}</p>
+                      {execResult.search_query && <p><span>Search Query:</span> {execResult.search_query}</p>}
+                      {execResult.search_result && <p><span>Search Result:</span> {execResult.search_result}</p>}
+                    </Stack>
+                  )
+                })}
+              </Stack>
+            </Stack.Item>
+          )}
           {appStateContext?.state.isChatHistoryOpen &&
             appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
         </Stack>