refactor intents panel

microsoft · Aug 7, 2024 · dd93591 · dd93591
1 parent a12c4c9
commit dd93591
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 251 deletions.
diff --git a/app.py b/app.py
@@ -240,8 +240,6 @@ def prepare_model_args(request_body, request_headers):
             ]
         }
 
-    model_args["extra_headers"] = {"is_external": "false", "chatgpt_key": app_settings.azure_openai.chatgpt_key, "chatgpt_url": "https://wed-aiq-aoai-ncus.openai.azure.com/openai/deployments/gpt-4o/chat/completions?api-version=2024-05-01-preview"}
-
     model_args_clean = copy.deepcopy(model_args)
     if model_args_clean.get("extra_body"):
         secret_params = [

diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -19,7 +19,7 @@ import styles from './Answer.module.css'
 interface Props {
   answer: AskResponse
   onCitationClicked: (citedDocument: Citation) => void
-  onExectResultClicked: () => void
+  onExectResultClicked: (answerId: string) => void
 }
 
 export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Props) => {
@@ -332,7 +332,7 @@ export const Answer = ({ answer, onCitationClicked, onExectResultClicked }: Prop
                 <Stack horizontal horizontalAlign="start" verticalAlign="center">
                   <Text
                     className={styles.accordionTitle}
-                    onClick={() => onExectResultClicked()}
+                    onClick={() => onExectResultClicked(answer.message_id ?? '')}
                     aria-label="Open Intents"
                     tabIndex={0}
                     role="button">

diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -63,6 +63,7 @@ const Chat = () => {
   const [clearingChat, setClearingChat] = useState<boolean>(false)
   const [hideErrorDialog, { toggle: toggleErrorDialog }] = useBoolean(true)
   const [errorMsg, setErrorMsg] = useState<ErrorMessage | null>()
+  const [answerId, setAnswerId] = useState<string>('')
 
   const errorDialogContentProps = {
     type: DialogType.close,
@@ -125,6 +126,16 @@ const Chat = () => {
   let toolMessage = {} as ChatMessage
   let assistantContent = ''
 
+  useEffect(() => parseExecResults(execResults), [execResults])
+
+  const parseExecResults = (exec_results_: any): void => {
+    if (exec_results_ == undefined) return
+    const exec_results = exec_results_.length === 2 ? exec_results_ : exec_results_.splice(2)
+    appStateContext?.dispatch({ type: 'SET_ANSWER_EXEC_RESULT', payload: { answerId: answerId, exec_result: exec_results } })
+  }
+
+  // console.log("appStateContext?.state", appStateContext?.state)
+
   const processResultMessage = (resultMessage: ChatMessage, userMessage: ChatMessage, conversationId?: string) => {
     if (resultMessage.content.includes('all_exec_results')) {
       const parsedExecResults = JSON.parse(resultMessage.content) as AzureSqlServerExecResults
@@ -135,10 +146,11 @@ const Chat = () => {
     }
 
     if (resultMessage.role === ASSISTANT) {
+      setAnswerId(resultMessage.id)
       assistantContent += resultMessage.content
-      assistantMessage = {...assistantMessage, ...resultMessage}
+      assistantMessage = { ...assistantMessage, ...resultMessage }
       assistantMessage.content = assistantContent
-      
+
       if (resultMessage.context) {
         toolMessage = {
           id: uuid(),
@@ -685,7 +697,7 @@ const Chat = () => {
     setIsCitationPanelOpen(true)
   }
 
-  const onShowExecResult = () => {
+  const onShowExecResult = (answerId: string) => {
     setIsIntentsPanelOpen(true)
   }
 
@@ -794,7 +806,7 @@ const Chat = () => {
                             exec_results: execResults
                           }}
                           onCitationClicked={c => onShowCitation(c)}
-                          onExectResultClicked={() => onShowExecResult()}
+                          onExectResultClicked={() => onShowExecResult(answerId)}
                         />
                       </div>
                     ) : answer.role === ERROR ? (
@@ -981,33 +993,31 @@ const Chat = () => {
                 />
               </Stack>
               <Stack horizontalAlign="space-between">
-                {execResults.map((execResult) => {
-                  return (
-                    <Stack className={styles.exectResultList} verticalAlign="space-between">
-                      <><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>
-                  )
-                })}
+                {appStateContext?.state?.answerExecResult[answerId]?.map((execResult: ExecResults, index) => (
+                  <Stack className={styles.exectResultList} verticalAlign="space-between">
+                    <><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>
+                ))}
               </Stack>
             </Stack.Item>
           )}

diff --git a/frontend/src/state/AppProvider.tsx b/frontend/src/state/AppProvider.tsx
@@ -1,5 +1,7 @@
-import React, { createContext, ReactNode, useEffect, 
-  useReducer } from 'react'
+import React, {
+  createContext, ReactNode, useEffect,
+  useReducer
+} from 'react'
 
 import {
   ChatHistoryLoadingState,
@@ -24,6 +26,7 @@ export interface AppState {
   currentChat: Conversation | null
   frontendSettings: FrontendSettings | null
   feedbackState: { [answerId: string]: Feedback.Neutral | Feedback.Positive | Feedback.Negative }
+  answerExecResult: { [answerId: string]: [] }
 }
 
 export type Action =
@@ -40,10 +43,11 @@ export type Action =
   | { type: 'FETCH_CHAT_HISTORY'; payload: Conversation[] | null }
   | { type: 'FETCH_FRONTEND_SETTINGS'; payload: FrontendSettings | null }
   | {
-      type: 'SET_FEEDBACK_STATE'
-      payload: { answerId: string; feedback: Feedback.Positive | Feedback.Negative | Feedback.Neutral }
-    }
+    type: 'SET_FEEDBACK_STATE'
+    payload: { answerId: string; feedback: Feedback.Positive | Feedback.Negative | Feedback.Neutral }
+  }
   | { type: 'GET_FEEDBACK_STATE'; payload: string }
+  | { type: 'SET_ANSWER_EXEC_RESULT'; payload: { answerId: string, exec_result: [] } }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
@@ -56,14 +60,15 @@ const initialState: AppState = {
     status: CosmosDBStatus.NotConfigured
   },
   frontendSettings: null,
-  feedbackState: {}
+  feedbackState: {},
+  answerExecResult: {}
 }
 
 export const AppStateContext = createContext<
   | {
-      state: AppState
-      dispatch: React.Dispatch<Action>
-    }
+    state: AppState
+    dispatch: React.Dispatch<Action>
+  }
   | undefined
 >(undefined)
 

diff --git a/frontend/src/state/AppReducer.tsx b/frontend/src/state/AppReducer.tsx
@@ -74,6 +74,14 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
           [action.payload.answerId]: action.payload.feedback
         }
       }
+    case 'SET_ANSWER_EXEC_RESULT':
+      return {
+        ...state,
+        answerExecResult: {
+          ...state.answerExecResult,
+          [action.payload.answerId]: action.payload.exec_result
+        }
+      }
     default:
       return state
   }

diff --git a/static/assets/Contoso-ff70ad88.svg b/static/assets/Contoso-ff70ad88.svg
diff --git a/static/assets/Send-d0601aaa.svg b/static/assets/Send-d0601aaa.svg