[feature] Update structured data response

microsoft · Jul 2, 2024 · 80bc2ed · 80bc2ed
1 parent 38b7862
commit 80bc2ed
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 3,648 deletions.
diff --git a/frontend/src/api/models.ts b/frontend/src/api/models.ts
@@ -3,7 +3,7 @@ import Plotly from 'react-plotly.js'
 export type AskResponse = {
   answer: string
   citations: Citation[]
-  plotly_data: AzureSqlServerCodeExecResult | null
+  generated_chart: string | null
   error?: string
   message_id?: string
   feedback?: Feedback

diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -291,10 +291,10 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
             </Stack.Item>
           </Stack>
         </Stack.Item>
-        {parsedAnswer.plotly_data !== null && (
+        {parsedAnswer.generated_chart !== null && (
           <Stack className={styles.answerContainer}>
             <Stack.Item grow>
-              <Plot data={parsedAnswer.plotly_data.data} layout={parsedAnswer.plotly_data.layout} />
+              <img src={`data:image/png;base64, ${parsedAnswer.generated_chart}`} />
             </Stack.Item>
           </Stack>
         )}

diff --git a/frontend/src/components/Answer/AnswerParser.tsx b/frontend/src/components/Answer/AnswerParser.tsx
@@ -5,7 +5,7 @@ import { AskResponse, Citation, AzureSqlServerCodeExecResult } from '../../api'
 export type ParsedAnswer = {
   citations: Citation[]
   markdownFormatText: string,
-  plotly_data: AzureSqlServerCodeExecResult | null
+  generated_chart: string | null
 }
 
 export const enumerateCitations = (citations: Citation[]) => {
@@ -47,6 +47,6 @@ export function parseAnswer(answer: AskResponse): ParsedAnswer {
   return {
     citations: filteredCitations,
     markdownFormatText: answerText,
-    plotly_data: answer.plotly_data
+    generated_chart: answer.generated_chart
   }
 }
diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -709,10 +709,13 @@ const Chat = () => {
       try {
         const execResults = JSON.parse(message.content) as AzureSqlServerExecResults;
         const codeExecResult = execResults.all_exec_results.at(-1)?.code_exec_result;
+        console.log('execResults :', execResults);
+        console.log("codeExecResult: ", codeExecResult && atob(codeExecResult.toString()))
+        // codeExecResult && setChart(atob(codeExecResult.toString()))
         if (codeExecResult === undefined) {
           return null;
         }
-        return codeExecResult;
+        return codeExecResult.toString();
       }
       catch {
         return null;
@@ -784,7 +787,7 @@ const Chat = () => {
                           answer={{
                             answer: answer.content,
                             citations: parseCitationFromMessage(messages[index - 1]),
-                            plotly_data: parsePlotFromMessage(messages[index - 1]),
+                            generated_chart: parsePlotFromMessage(messages[index - 1]),
                             message_id: answer.id,
                             feedback: answer.feedback,
                             exec_results: execResults
@@ -811,7 +814,7 @@ const Chat = () => {
                         answer={{
                           answer: "Generating answer...",
                           citations: [],
-                          plotly_data: null
+                          generated_chart: null
                         }}
                         onCitationClicked={() => null}
                         onExectResultClicked={() => null}

diff --git a/static/assets/index-2e11eaf6.js b/static/assets/index-2e11eaf6.js
diff --git a/static/assets/index-2e11eaf6.js.map b/static/assets/index-2e11eaf6.js.map
diff --git a/static/assets/index-90158a7d.js b/static/assets/index-90158a7d.js
diff --git a/static/assets/index-90158a7d.js.map b/static/assets/index-90158a7d.js.map
diff --git a/static/index.html b/static/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/x-icon" href="{{ favicon }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="/assets/index-2e11eaf6.js"></script>
+    <script type="module" crossorigin src="/assets/index-90158a7d.js"></script>
     <link rel="stylesheet" href="/assets/index-61492790.css">
   </head>
   <body>