Merge pull request #48 from microsoft/jamesqa1

Citation styling and code cleanup

Author: andrewldesousa

frontend/src/api/models.ts

@@ -3,11 +3,9 @@ import Plotly from 'react-plotly.js'
 export type AskResponse = {
   answer: string
   citations: Citation[]
-  plotly_data: AzureSqlServerCodeExecResult | null
   error?: string
   message_id?: string
   feedback?: Feedback
-  exec_results?: ExecResults[]
 }
 
 export type Citation = {
@@ -27,23 +25,6 @@ export type ToolMessageContent = {
   intent: string
 }
 
-export type AzureSqlServerCodeExecResult = {
-  data: Plotly.Data[]
-  layout: Partial<Plotly.Layout>
-}
-
-export type AzureSqlServerExecResult = {
-  intent: string
-  search_query: string | null
-  search_result: string | null
-  code_generated: string | null
-  code_exec_result?: AzureSqlServerCodeExecResult | undefined
-}
-
-export type AzureSqlServerExecResults = {
-  all_exec_results: AzureSqlServerExecResult[]
-}
-
 export type ChatMessage = {
   id: string
   role: string
@@ -54,13 +35,6 @@ export type ChatMessage = {
   context?: string
 }
 
-export type ExecResults = {
-  intent: string
-  search_query: string | null
-  search_result: string | null
-  code_generated: string | null
-}
-
 export type Conversation = {
   id: string
   title: string
@@ -107,7 +81,7 @@ export type DraftedDocument = {
 }
 
 export type SectionGenerateRequest = {
-  sectionTitle: string,
+  sectionTitle: string
   sectionDescription: string
 }
 
@@ -181,4 +155,4 @@ export enum Feedback {
 export enum ChatType {
   Browse = 'browse',
   Template = 'template'
-}
+}

frontend/src/components/Answer/Answer.tsx

@@ -8,7 +8,6 @@ import { ThumbDislike20Filled, ThumbLike20Filled } from '@fluentui/react-icons'
 import DOMPurify from 'dompurify'
 import remarkGfm from 'remark-gfm'
 import supersub from 'remark-supersub'
-import Plot from 'react-plotly.js'
 import { AskResponse, Citation, Feedback, historyMessageFeedback } from '../../api'
 import { XSSAllowTags } from '../../constants/xssAllowTags'
 import { AppStateContext } from '../../state/AppProvider'
@@ -20,10 +19,9 @@ import styles from './Answer.module.css'
 interface Props {
   answer: AskResponse
   onCitationClicked: (citedDocument: Citation) => void
-  onExectResultClicked: () => void
 }
 
-export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Props) => {
+export const Answer = ({ answer, onCitationClicked }: Props) => {
   const initializeAnswerFeedback = (answer: AskResponse) => {
     if (answer.message_id == undefined) return undefined
     if (answer.feedback == undefined) return undefined
@@ -228,7 +226,7 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
   }
 
   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+)/)
@@ -269,7 +267,7 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
                     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' }
                     }
@@ -280,8 +278,8 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
                     onClick={() => onDislikeResponseClicked()}
                     style={
                       feedbackState !== Feedback.Positive &&
-                        feedbackState !== Feedback.Neutral &&
-                        feedbackState !== undefined
+                      feedbackState !== Feedback.Neutral &&
+                      feedbackState !== undefined
                         ? { color: 'darkred', cursor: 'pointer' }
                         : { color: 'slategray', cursor: 'pointer' }
                     }
@@ -291,13 +289,6 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
             </Stack.Item>
           </Stack>
         </Stack.Item>
-        {parsedAnswer.plotly_data !== null && (
-          <Stack className={styles.answerContainer}>
-            <Stack.Item grow>
-              <Plot data={parsedAnswer.plotly_data.data} layout={parsedAnswer.plotly_data.layout} />
-            </Stack.Item>
-          </Stack>
-        )}
         <Stack horizontal className={styles.answerFooter}>
           {!!parsedAnswer.citations.length && (
             <Stack.Item onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
@@ -327,29 +318,6 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
           <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 Intents"
-                    tabIndex={0}
-                    role="button">
-                    <span>
-                      Show Intents
-                    </span>
-                  </Text>
-                  <FontIcon
-                    className={styles.accordionIcon}
-                    onClick={handleChevronClick}
-                    iconName={'ChevronRight'}
-                  />
-                </Stack>
-              </Stack>
-            </Stack.Item>
-          )}
         </Stack>
         {chevronIsExpanded && (
           <div className={styles.citationWrapper}>

frontend/src/components/Answer/AnswerParser.test.ts

@@ -42,8 +42,7 @@ const sampleCitations: Citation[] = [
 
 const sampleAnswer: AskResponse = {
   answer: 'This is an example answer with citations [doc1] and [doc2].',
-  citations: cloneDeep(sampleCitations),
-  plotly_data: null
+  citations: cloneDeep(sampleCitations)
 }
 
 describe('enumerateCitations', () => {

frontend/src/components/Answer/AnswerParser.tsx

@@ -1,11 +1,10 @@
 import { cloneDeep } from 'lodash'
 
-import { AskResponse, Citation, AzureSqlServerCodeExecResult } from '../../api'
+import { AskResponse, Citation } from '../../api'
 
 export type ParsedAnswer = {
   citations: Citation[]
-  markdownFormatText: string,
-  plotly_data: AzureSqlServerCodeExecResult | null
+  markdownFormatText: string
 }
 
 export const enumerateCitations = (citations: Citation[]) => {
@@ -46,7 +45,6 @@ export function parseAnswer(answer: AskResponse): ParsedAnswer {
 
   return {
     citations: filteredCitations,
-    markdownFormatText: answerText,
-    plotly_data: answer.plotly_data
+    markdownFormatText: answerText
   }
 }