diff --git a/images/QueryCopilotNewLogo.svg b/images/QueryCopilotNewLogo.svg index cce36fc9a..c59f7c3b2 100644 --- a/images/QueryCopilotNewLogo.svg +++ b/images/QueryCopilotNewLogo.svg @@ -1,34 +1,40 @@ - - - - - - - + - - - + + + + - - - + + + + + + + + + - - - - - - - + + + - - - + + + + - - - + + + + + + + + + + + diff --git a/images/X-errorMessage.svg b/images/X-errorMessage.svg deleted file mode 100644 index 17dd393c6..000000000 --- a/images/X-errorMessage.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx index 2e6ebd908..f5b76b9ef 100644 --- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx +++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx @@ -8,6 +8,8 @@ import { IconButton, Image, Link, + MessageBar, + MessageBarType, Separator, Spinner, Stack, @@ -44,7 +46,6 @@ import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg"; import HintIcon from "../../../images/Hint.svg"; import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg"; import RecentIcon from "../../../images/Recent.svg"; -import XErrorMessage from "../../../images/X-errorMessage.svg"; import SaveQueryIcon from "../../../images/save-cosmos.svg"; import { useTabs } from "../../hooks/useTabs"; @@ -90,8 +91,12 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query showCopyPopup, setshowCopyPopup, showErrorMessageBar, + showInvalidQueryMessageBar, + setShowInvalidQueryMessageBar, setShowErrorMessageBar, setGeneratedQueryComments, + setQueryResults, + setErrorMessage, } = useQueryCopilot(); const sampleProps: SamplePromptsProps = { @@ -157,8 +162,20 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|")); }; + const resetMessageStates = (): void => { + setShowErrorMessageBar(false); + setShowInvalidQueryMessageBar(false); + setShowFeedbackBar(false); + }; + + const resetQueryResults = (): void => { + setQueryResults(null); + setErrorMessage(""); + }; + const generateSQLQuery = async (): Promise => { try { + resetMessageStates(); setIsGeneratingQuery(true); setShowDeletePopup(false); useTabs.getState().setIsTabExecuting(true); @@ -191,7 +208,7 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json(); if (response.ok) { - if (generateSQLQueryResponse?.sql) { + if (generateSQLQueryResponse?.sql !== "N/A") { let query = `-- **Prompt:** ${userPrompt}\r\n`; if (generateSQLQueryResponse.explanation) { query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`; @@ -200,7 +217,10 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query setQuery(query); setGeneratedQuery(generateSQLQueryResponse.sql); setGeneratedQueryComments(generateSQLQueryResponse.explanation); - setShowErrorMessageBar(false); + setShowFeedbackBar(true); + resetQueryResults(); + } else { + setShowInvalidQueryMessageBar(true); } } else { handleError(JSON.stringify(generateSQLQueryResponse), "copilotInternalServerError"); @@ -215,7 +235,6 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query } finally { setIsGeneratingQuery(false); useTabs.getState().setIsTabExecuting(false); - setShowFeedbackBar(true); } }; @@ -265,6 +284,11 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query } }; + const clearFeedback = () => { + resetButtonState(); + resetQueryResults(); + }; + const resetButtonState = () => { setDislikeQuery(false); setLikeQuery(false); @@ -290,7 +314,7 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query
- + Copilot @@ -452,12 +476,25 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query Read preview terms {showErrorMessageBar && ( - - - - We ran into an error and were not able to execute query. Please try again after sometime - - + + We ran into an error and were not able to execute query. + + )} + {showInvalidQueryMessageBar && ( + + We were unable to generate a query based upon the prompt provided. Please modify the prompt and try + again. For examples of how to write a good prompt, please read + + this article. + {" "} + Our content guidelines can be found + + here. + + )} @@ -562,7 +599,7 @@ export const QueryCopilotTab: React.FC = ({ explorer }: Query showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} - clearFeedback={resetButtonState} + clearFeedback={clearFeedback} showFeedbackBar={setShowFeedbackBar} /> )} diff --git a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap index 7a5ab31b1..3ef6c1eab 100644 --- a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap +++ b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap @@ -24,6 +24,12 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] = > void; setshowCopyPopup: (showCopyPopup: boolean) => void; setShowErrorMessageBar: (showErrorMessageBar: boolean) => void; + setShowInvalidQueryMessageBar: (showInvalidQueryMessageBar: boolean) => void; setGeneratedQueryComments: (generatedQueryComments: string) => void; setWasCopilotUsed: (wasCopilotUsed: boolean) => void; setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => void; @@ -104,6 +106,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ showFeedbackBar: false, showCopyPopup: false, showErrorMessageBar: false, + showInvalidQueryMessageBar: false, generatedQueryComments: "", wasCopilotUsed: false, showWelcomeSidebar: true, @@ -148,6 +151,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }), setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }), setShowErrorMessageBar: (showErrorMessageBar: boolean) => set({ showErrorMessageBar }), + setShowInvalidQueryMessageBar: (showInvalidQueryMessageBar: boolean) => set({ showInvalidQueryMessageBar }), setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }), setWasCopilotUsed: (wasCopilotUsed: boolean) => set({ wasCopilotUsed }), setShowWelcomeSidebar: (showWelcomeSidebar: boolean) => set({ showWelcomeSidebar }), @@ -196,6 +200,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ showFeedbackBar: false, showCopyPopup: false, showErrorMessageBar: false, + showInvalidQueryMessageBar: false, generatedQueryComments: "", wasCopilotUsed: false, showCopilotSidebar: false,