Add Intents panel for SQL support (#901)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

frontend/src/api/models.ts

@@ -58,6 +58,7 @@ export type ExecResults = {
   intent: string
   search_query: string | null
   search_result: string | null
+  code_generated: string | null
 }
 
 export type Conversation = {

frontend/src/components/Answer/Answer.tsx

@@ -334,11 +334,11 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
                   <Text
                     className={styles.accordionTitle}
                     onClick={() => onExectResultClicked()}
-                    aria-label="Open exec results"
+                    aria-label="Open Intents"
                     tabIndex={0}
                     role="button">
                     <span>
-                      Show Exec Results
+                      Show Intents
                     </span>
                   </Text>
                   <FontIcon

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

@@ -311,8 +311,8 @@
 .exectResultList {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  border-bottom: 1px solid #323130;
+  gap: 2px;
+  border-bottom: 1px solid #ccc;
   margin-top: 12px;
 }
 
@@ -328,10 +328,11 @@
   display: flex;
   flex-direction: row;
   gap: 4px;
-  margin: 3px 0;
+  margin: 0;
+  margin-bottom: 16px;
 }
 
-.exectResultList > p > span {
+.exectResultList > span {
   font-weight: 600;
 }
 

frontend/src/pages/chat/Chat.tsx

@@ -8,6 +8,8 @@ import rehypeRaw from 'rehype-raw'
 import uuid from 'react-uuid'
 import { isEmpty } from 'lodash'
 import DOMPurify from 'dompurify'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 import styles from './Chat.module.css'
 import Contoso from '../../assets/Contoso.svg'
@@ -959,15 +961,15 @@ const Chat = () => {
             </Stack.Item>
           )}
           {messages && messages.length > 0 && isIntentsPanelOpen && (
-            <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Exec Results Panel">
+            <Stack.Item className={styles.citationPanel} tabIndex={0} role="tabpanel" aria-label="Intents 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
+                  Intents
                 </span>
                 <IconButton
                   iconProps={{ iconName: 'Cancel' }}
@@ -979,9 +981,27 @@ const Chat = () => {
                 {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>}
+                      <><span>Intent:</span> <p>{execResult.intent}</p></>
+                      {execResult.search_query && <><span>Search Query:</span>
+                        <SyntaxHighlighter
+                          style={nord}
+                          wrapLines={true}
+                          lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
+                          language="sql"
+                          PreTag="p">
+                          {execResult.search_query}
+                        </SyntaxHighlighter></>}
+                      {execResult.search_result && <><span>Search Result:</span> <p>{execResult.search_result}</p></>}
+                      {execResult.code_generated && <><span>Code Generated:</span>
+                        <SyntaxHighlighter
+                          style={nord}
+                          wrapLines={true}
+                          lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
+                          language="python"
+                          PreTag="p">
+                          {execResult.code_generated}
+                        </SyntaxHighlighter>
+                      </>}
                     </Stack>
                   )
                 })}