microsoft · abhahn · May 31, 2024 · May 30, 2024 · May 30, 2024 · May 30, 2024
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build",
     "watch": "tsc && vite build --watch",
     "test": "jest",
     "lint": "npx eslint src",
@@ -70,4 +70,4 @@
     "typescript": "^4.9.5",
     "vite": "^4.1.5"
   }
-}
+}
diff --git a/frontend/src/api/models.ts b/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

diff --git a/frontend/src/components/Answer/Answer.tsx b/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' }
                     }
@@ -323,9 +324,29 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
               </Stack>
             </Stack.Item>
           )}
-          <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}>

diff --git a/frontend/src/pages/chat/Chat.module.css b/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;

diff --git a/frontend/src/pages/chat/Chat.tsx b/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
@@ -204,12 +212,17 @@ const Chat = () => {
           if (done) break
 
           var text = new TextDecoder('utf-8').decode(value)
+          console.log('text :', text);
           const objects = text.split('\n')
           objects.forEach(obj => {
             try {
               if (obj !== '' && obj !== '{}') {
+                // console.log('obj :', obj);
+
                 runningText += obj
+                console.log('runningText :', runningText);
                 result = JSON.parse(runningText)
+                console.log('result :', result);
                 if (result.choices?.length > 0) {
                   result.choices[0].messages.forEach(msg => {
                     msg.id = result.id
@@ -224,6 +237,8 @@ const Chat = () => {
                 } else if (result.error) {
                   throw Error(result.error)
                 }
+                // if (result.all_exec_results?.length > 0) {
+                // }
                 runningText = ''
               }
             } catch (e) {
@@ -519,6 +534,7 @@ const Chat = () => {
         appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY', payload: appStateContext?.state.currentChat })
         setActiveCitation(undefined)
         setIsCitationPanelOpen(false)
+        setIsIntentsPanelOpen(false)
         setMessages([])
       }
     }
@@ -584,6 +600,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 +688,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 +792,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 +820,7 @@ const Chat = () => {
                           plotly_data: null
                         }}
                         onCitationClicked={() => null}
+                        onExectResultClicked={() => null}
                       />
                     </div>
                   </>
@@ -941,6 +965,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>