From 76408e2f983cb4947025dded309c3eae0e9f351e Mon Sep 17 00:00:00 2001 From: Predrag Klepic <60631598+Klepic95@users.noreply.github.com> Date: Wed, 6 Sep 2023 19:49:27 +0200 Subject: [PATCH] [Query Copilot V2] Wire and adjust Output bubble with backend communication (#1599) * Initial wiring of copilot backend and bubble * Additional changes in explanation bubbles * Changes based on checks * test snapshots updated --------- Co-authored-by: Predrag Klepic --- .../QueryCopilot/Shared/QueryCopilotClient.ts | 28 ++++++++-------- .../Shared/QueryCopilotInterfaces.ts | 2 ++ .../Explanation/ExplanationBubble.test.tsx | 12 +++---- .../Bubbles/Explanation/ExplanationBubble.tsx | 32 ++++++------------- .../ExplanationBubble.test.tsx.snap | 31 +++++++++++------- .../Output/Buttons/Copy/CopyButton.test.tsx | 2 +- .../Output/Buttons/Copy/CopyButton.tsx | 5 ++- .../Buttons/Feedback/FeedbackButtons.test.tsx | 28 ++++++++-------- .../Buttons/Feedback/FeedbackButtons.tsx | 8 ++--- .../Buttons/Insert/InsertButton.test.tsx | 11 +------ .../Output/Buttons/Insert/InsertButton.tsx | 4 +-- .../Buttons/OutputBubbleButtons.test.tsx | 2 +- .../Output/Buttons/OutputBubbleButtons.tsx | 8 ++--- .../OutputBubbleButtons.test.tsx.snap | 12 +++++-- .../V2/Bubbles/Output/OutputBubble.test.tsx | 9 +++--- .../V2/Bubbles/Output/OutputBubble.tsx | 12 +++---- .../__snapshots__/OutputBubble.test.tsx.snap | 8 +++-- .../V2/Sidebar/QueryCopilotSidebar.tsx | 20 ++---------- src/hooks/useQueryCopilot.ts | 5 --- 19 files changed, 107 insertions(+), 132 deletions(-) diff --git a/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts b/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts index 8f5276c0e..418d9e5df 100644 --- a/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts +++ b/src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts @@ -20,15 +20,13 @@ export const SendQueryRequest = async ({ explorer: Explorer; }): Promise => { if (userPrompt.trim() !== "") { - useQueryCopilot.getState().setIsGeneratingQuery(true); - useQueryCopilot.getState().setShouldIncludeInMessages(true); - useQueryCopilot.getState().setShowQueryExplanation(false); - useQueryCopilot.getState().setShowExplanationBubble(false); - useTabs.getState().setIsTabExecuting(true); - useTabs.getState().setIsQueryErrorThrown(false); useQueryCopilot .getState() .setChatMessages([...useQueryCopilot.getState().chatMessages, { source: 0, message: userPrompt }]); + useQueryCopilot.getState().setIsGeneratingQuery(true); + useQueryCopilot.getState().setShouldIncludeInMessages(true); + useTabs.getState().setIsTabExecuting(true); + useTabs.getState().setIsQueryErrorThrown(false); try { if ( useQueryCopilot.getState().containerStatus.status !== ContainerStatusType.Active && @@ -62,15 +60,17 @@ export const SendQueryRequest = async ({ const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json(); if (response.ok) { if (generateSQLQueryResponse?.sql) { - let query = `Here is a query which will help you with provided prompt.\r\n **Prompt:** ${userPrompt}`; - query += `\r\n${generateSQLQueryResponse.sql}`; + const bubbleMessage = `Here is a query which will help you with provided prompt.\r\n **Prompt:** "${userPrompt}"`; if (useQueryCopilot.getState().shouldIncludeInMessages) { - useQueryCopilot - .getState() - .setChatMessages([ - ...useQueryCopilot.getState().chatMessages, - { source: 1, message: query, explanation: generateSQLQueryResponse.explanation }, - ]); + useQueryCopilot.getState().setChatMessages([ + ...useQueryCopilot.getState().chatMessages, + { + source: 1, + message: bubbleMessage, + sqlQuery: generateSQLQueryResponse.sql, + explanation: generateSQLQueryResponse.explanation, + }, + ]); useQueryCopilot.getState().setShowExplanationBubble(true); useQueryCopilot.getState().setGeneratedQuery(generateSQLQueryResponse.sql); useQueryCopilot.getState().setGeneratedQueryComments(generateSQLQueryResponse.explanation); diff --git a/src/Explorer/QueryCopilot/Shared/QueryCopilotInterfaces.ts b/src/Explorer/QueryCopilot/Shared/QueryCopilotInterfaces.ts index 6593c302c..fd22a7432 100644 --- a/src/Explorer/QueryCopilot/Shared/QueryCopilotInterfaces.ts +++ b/src/Explorer/QueryCopilot/Shared/QueryCopilotInterfaces.ts @@ -11,11 +11,13 @@ export interface GenerateSQLQueryResponse { enum MessageSource { User, AI, + AIExplanation, } export interface CopilotMessage { source: MessageSource; message: string; + sqlQuery?: string; explanation?: string; } diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.test.tsx index 1a0620001..77b457425 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.test.tsx @@ -19,25 +19,25 @@ describe("Explanation Bubble", () => { }); it("should render explanation bubble with generated comments", () => { - useQueryCopilot.getState().showQueryExplanation = true; useQueryCopilot.getState().shouldIncludeInMessages = true; const wrapper = shallow(); expect(wrapper.find("Stack")).toHaveLength(1); - expect(wrapper.find("Text")).toHaveLength(0); + expect(wrapper.find("Text")).toHaveLength(1); expect(wrapper).toMatchSnapshot(); }); it("should render 'Explain this query' link", () => { + useQueryCopilot.getState().shouldIncludeInMessages = true; const mockSetChatMessages = jest.fn(); const mockSetIsGeneratingExplanation = jest.fn(); const mockSetShouldIncludeInMessages = jest.fn(); - const mockSetShowQueryExplanation = jest.fn(); + const mockSetShowExplanationBubble = jest.fn(); useQueryCopilot.getState().setChatMessages = mockSetChatMessages; useQueryCopilot.getState().setIsGeneratingExplanation = mockSetIsGeneratingExplanation; useQueryCopilot.getState().setShouldIncludeInMessages = mockSetShouldIncludeInMessages; - useQueryCopilot.getState().setShowQueryExplanation = mockSetShowQueryExplanation; + useQueryCopilot.getState().setShowExplanationBubble = mockSetShowExplanationBubble; const wrapper = shallow(); @@ -50,12 +50,12 @@ describe("Explanation Bubble", () => { ]); expect(mockSetIsGeneratingExplanation).toHaveBeenCalledWith(true); expect(mockSetShouldIncludeInMessages).toHaveBeenCalledWith(true); - expect(mockSetShowQueryExplanation).not.toHaveBeenCalled(); + expect(mockSetShowExplanationBubble).toHaveBeenCalledWith(false); jest.advanceTimersByTime(3000); expect(mockSetIsGeneratingExplanation).toHaveBeenCalledWith(false); - expect(mockSetShowQueryExplanation).toHaveBeenCalledWith(true); + expect(mockSetChatMessages).toHaveBeenCalled(); }); it("should render nothing when conditions are not met", () => { diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.tsx index 301249637..1227556fa 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/ExplanationBubble.tsx @@ -6,53 +6,39 @@ export const ExplanationBubble: React.FC = (): JSX.Element => { const { showExplanationBubble, isGeneratingQuery, - showQueryExplanation, - setShowQueryExplanation, chatMessages, setChatMessages, generatedQueryComments, isGeneratingExplanation, setIsGeneratingExplanation, - shouldIncludeInMessages, setShouldIncludeInMessages, + setShowExplanationBubble, } = useQueryCopilot(); const showExplanation = () => { setChatMessages([...chatMessages, { source: 0, message: "Explain this query to me" }]); setIsGeneratingExplanation(true); setShouldIncludeInMessages(true); + setShowExplanationBubble(false); setTimeout(() => { - setIsGeneratingExplanation(false); - setShowQueryExplanation(true); + if (useQueryCopilot.getState().shouldIncludeInMessages) { + setIsGeneratingExplanation(false); + setChatMessages([...chatMessages, { source: 2, message: generatedQueryComments }]); + } }, 3000); }; return ( showExplanationBubble && !isGeneratingQuery && - !isGeneratingExplanation && - (showQueryExplanation && shouldIncludeInMessages ? ( - - {generatedQueryComments} - - ) : ( + !isGeneratingExplanation && ( { Explain this query to me - )) + ) ); }; diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/__snapshots__/ExplanationBubble.test.tsx.snap b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/__snapshots__/ExplanationBubble.test.tsx.snap index 59da7aa64..ff0f3e711 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/__snapshots__/ExplanationBubble.test.tsx.snap +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Explanation/__snapshots__/ExplanationBubble.test.tsx.snap @@ -2,22 +2,31 @@ exports[`Explanation Bubble should render explanation bubble with generated comments 1`] = ` + + > + Explain this query to me + + `; exports[`Explanation Bubble should render nothing when conditions are not met 1`] = `""`; diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.test.tsx index b64eee10e..2f4bdab83 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.test.tsx @@ -10,7 +10,7 @@ describe("Copy button snapshot tests", () => { it("should render and click copy", async () => { const testInput = "test input query"; useQueryCopilot.getState().setGeneratedQuery(testInput); - const wrapper = shallow(); + const wrapper = shallow(); const button = wrapper.find(IconButton).first(); button.simulate("click", {}); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.tsx index 3d77c3acb..e55ad25ec 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/CopyButton.tsx @@ -1,12 +1,11 @@ import { IconButton } from "@fluentui/react"; -import { useQueryCopilot } from "hooks/useQueryCopilot"; import React from "react"; import CopilotCopy from "../../../../../../../../images/CopilotCopy.svg"; -export const CopyButton: React.FC = (): JSX.Element => { +export const CopyButton = ({ sqlQuery }: { sqlQuery: string }): JSX.Element => { const copyGeneratedCode = (): void => { const queryElement = document.createElement("textarea"); - queryElement.value = useQueryCopilot.getState().generatedQuery; + queryElement.value = sqlQuery; document.body.appendChild(queryElement); queryElement.select(); document.execCommand("copy"); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.test.tsx index 1cb96c0a7..15ae90ec9 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.test.tsx @@ -20,7 +20,7 @@ beforeEach(() => { describe("Feedback buttons snapshot tests", () => { it("should click like and show callout", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); const dislikeButton = wrapper.find(IconButton).last(); @@ -35,7 +35,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should click like and dismiss callout", () => { - const wrapper = shallow(); + const wrapper = shallow(); const likeButton = wrapper.find(IconButton).first(); likeButton.simulate("click"); @@ -49,7 +49,7 @@ describe("Feedback buttons snapshot tests", () => { it("should click like and submit feedback", () => { const spy = jest.spyOn(useQueryCopilot.getState(), "openFeedbackModal"); - const wrapper = shallow(); + const wrapper = shallow(); const likeButton = wrapper.find(IconButton).first(); likeButton.simulate("click"); @@ -61,7 +61,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over like", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); likeButton.simulate("mouseover"); @@ -72,7 +72,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over rest like and leave", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); likeButton.simulate("mouseover"); @@ -84,7 +84,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over pressed like and leave", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); likeButton.simulate("click"); @@ -97,7 +97,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over like and click", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); likeButton.simulate("mouseover"); @@ -109,7 +109,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should dobule click on like", () => { - const wrapper = shallow(); + const wrapper = shallow(); let likeButton = wrapper.find(IconButton).first(); likeButton.simulate("click"); @@ -124,7 +124,7 @@ describe("Feedback buttons snapshot tests", () => { it("should click dislike and show popup", () => { const spy = jest.spyOn(useQueryCopilot.getState(), "openFeedbackModal"); - const wrapper = shallow(); + const wrapper = shallow(); const likeButton = wrapper.find(IconButton).first(); let dislikeButton = wrapper.find(IconButton).last(); @@ -140,7 +140,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over dislike", () => { - const wrapper = shallow(); + const wrapper = shallow(); let dislikeButton = wrapper.find(IconButton).last(); dislikeButton.simulate("mouseover"); @@ -151,7 +151,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over rest dislike and leave", () => { - const wrapper = shallow(); + const wrapper = shallow(); let dislikeButton = wrapper.find(IconButton).last(); dislikeButton.simulate("mouseover"); @@ -163,7 +163,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over pressed dislike and leave", () => { - const wrapper = shallow(); + const wrapper = shallow(); let dislikeButton = wrapper.find(IconButton).last(); dislikeButton.simulate("click"); @@ -178,7 +178,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should hover over dislike and click", () => { - const wrapper = shallow(); + const wrapper = shallow(); let dislikeButton = wrapper.find(IconButton).last(); dislikeButton.simulate("mouseover"); @@ -190,7 +190,7 @@ describe("Feedback buttons snapshot tests", () => { }); it("should dobule click on dislike", () => { - const wrapper = shallow(); + const wrapper = shallow(); let dislikeButton = wrapper.find(IconButton).last(); dislikeButton.simulate("click"); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.tsx index 64c892b5d..18cfa1db9 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/FeedbackButtons.tsx @@ -6,8 +6,8 @@ import LikeHover from "../../../../../../../../images/CopilotLikeHover.svg"; import LikePressed from "../../../../../../../../images/CopilotLikePressed.svg"; import LikeRest from "../../../../../../../../images/CopilotLikeRest.svg"; -export const FeedbackButtons: React.FC = (): JSX.Element => { - const { generatedQuery, userPrompt } = useQueryCopilot(); +export const FeedbackButtons = ({ sqlQuery }: { sqlQuery: string }): JSX.Element => { + const { userPrompt } = useQueryCopilot(); const [likeQuery, setLikeQuery] = useState(false); const [dislikeQuery, setDislikeQuery] = useState(false); @@ -35,7 +35,7 @@ export const FeedbackButtons: React.FC = (): JSX.Element => { { setCalloutVisible(false); - useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt); + useQueryCopilot.getState().openFeedbackModal(sqlQuery, true, userPrompt); }} > more feedback? @@ -82,7 +82,7 @@ export const FeedbackButtons: React.FC = (): JSX.Element => { setLikeQuery(false); setDislikeImageLink(LikePressed); setLikeImageLink(LikeRest); - useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt); + useQueryCopilot.getState().openFeedbackModal(sqlQuery, false, userPrompt); } }} onMouseOver={() => setDislikeImageLink(LikeHover)} diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.test.tsx index 3f178f072..8b56dfec2 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.test.tsx @@ -1,19 +1,10 @@ -import { ActionButton } from "@fluentui/react"; import { InsertButton } from "Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton"; import { shallow } from "enzyme"; -import { useQueryCopilot } from "hooks/useQueryCopilot"; import React from "react"; describe("Insert button snapshot tests", () => { it("should click and update state", () => { - const testQuery = "test query"; - useQueryCopilot.getState().setGeneratedQuery(testQuery); - const wrapper = shallow(); - - const button = wrapper.find(ActionButton).first(); - button.simulate("click"); - - expect(useQueryCopilot.getState().query).toEqual(testQuery); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.tsx index 2641ea6fa..1a88500bf 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/InsertButton.tsx @@ -3,12 +3,12 @@ import { useQueryCopilot } from "hooks/useQueryCopilot"; import React from "react"; import CopilotInsert from "../../../../../../../../images/CopilotInsert.svg"; -export const InsertButton: React.FC = (): JSX.Element => { +export const InsertButton = ({ sqlQuery }: { sqlQuery: string }): JSX.Element => { return ( useQueryCopilot.getState().setQuery(useQueryCopilot.getState().generatedQuery)} + onClick={() => useQueryCopilot.getState().setQuery(sqlQuery)} > Insert diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.test.tsx index 61f38d5e7..0d081e2b6 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.test.tsx @@ -4,7 +4,7 @@ import React from "react"; describe("Output Bubble Buttons snapshot tests", () => { it("should render", () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.tsx index 6625837f2..581f55897 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons.tsx @@ -5,17 +5,17 @@ import { InsertButton } from "Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/In import { MoreButton } from "Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/More/MoreButton"; import React from "react"; -export const OutputBubbleButtons: React.FC = (): JSX.Element => { +export const OutputBubbleButtons = ({ sqlQuery }: { sqlQuery: string }): JSX.Element => { return ( - + - + - + diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/__snapshots__/OutputBubbleButtons.test.tsx.snap b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/__snapshots__/OutputBubbleButtons.test.tsx.snap index 1b0f6551c..5f4f0ce92 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/__snapshots__/OutputBubbleButtons.test.tsx.snap +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/__snapshots__/OutputBubbleButtons.test.tsx.snap @@ -11,13 +11,19 @@ exports[`Output Bubble Buttons snapshot tests should render 1`] = ` } } > - + - + - + diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.test.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.test.tsx index e24466c53..d5b8d3272 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.test.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.test.tsx @@ -1,16 +1,17 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; import { OutputBubble } from "Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble"; import { shallow } from "enzyme"; -import { useQueryCopilot } from "hooks/useQueryCopilot"; import { withHooks } from "jest-react-hooks-shallow"; import React from "react"; describe("Output Bubble snapshot tests", () => { it("should render and update height", () => { withHooks(() => { - useQueryCopilot.getState().setGeneratedQuery("test query"); - useQueryCopilot.getState().setGeneratedQueryComments("test comments"); - const wrapper = shallow(); + const wrapper = shallow( + + ); const editor = wrapper.find(EditorReact).first(); diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.tsx b/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.tsx index 52e8f3551..d4ca08310 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.tsx +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/OutputBubble.tsx @@ -1,10 +1,10 @@ import { Stack, Text } from "@fluentui/react"; import { EditorReact } from "Explorer/Controls/Editor/EditorReact"; +import { CopilotMessage } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces"; import { OutputBubbleButtons } from "Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/OutputBubbleButtons"; -import { useQueryCopilot } from "hooks/useQueryCopilot"; import React, { useState } from "react"; -export const OutputBubble: React.FC = (): JSX.Element => { +export const OutputBubble = ({ copilotMessage }: { copilotMessage: CopilotMessage }): JSX.Element => { const [windowHeight, setWindowHeight] = useState(); const calculateQueryWindowHeight = (): string => { @@ -29,13 +29,11 @@ export const OutputBubble: React.FC = (): JSX.Element => { }} tokens={{ padding: 8, childrenGap: 8 }} > - - {useQueryCopilot.getState()?.generatedQueryComments} - + {copilotMessage.message} { /> - + diff --git a/src/Explorer/QueryCopilot/V2/Bubbles/Output/__snapshots__/OutputBubble.test.tsx.snap b/src/Explorer/QueryCopilot/V2/Bubbles/Output/__snapshots__/OutputBubble.test.tsx.snap index f147867ef..2d38f5621 100644 --- a/src/Explorer/QueryCopilot/V2/Bubbles/Output/__snapshots__/OutputBubble.test.tsx.snap +++ b/src/Explorer/QueryCopilot/V2/Bubbles/Output/__snapshots__/OutputBubble.test.tsx.snap @@ -28,7 +28,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = ` } } > - test comments + testMessage - + = ({ explorer }: Q > {chatMessages.map((message, index) => - message.source === 0 ? ( + message.source === 0 || message.source === 2 ? ( = ({ explorer }: Q {message.message} ) : ( - // This part should be wired with OutputBubble - - {message.message} - + ) )} - diff --git a/src/hooks/useQueryCopilot.ts b/src/hooks/useQueryCopilot.ts index 826dff8f1..efecc35e3 100644 --- a/src/hooks/useQueryCopilot.ts +++ b/src/hooks/useQueryCopilot.ts @@ -37,7 +37,6 @@ export interface QueryCopilotState { chatMessages: CopilotMessage[]; shouldIncludeInMessages: boolean; showExplanationBubble: boolean; - showQueryExplanation: boolean; notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo; containerStatus: ContainerInfo; isAllocatingContainer: boolean; @@ -72,7 +71,6 @@ export interface QueryCopilotState { setChatMessages: (chatMessages: CopilotMessage[]) => void; setShouldIncludeInMessages: (shouldIncludeInMessages: boolean) => void; setShowExplanationBubble: (showExplanationBubble: boolean) => void; - setShowQueryExplanation: (showQueryExplanation: boolean) => void; setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void; setContainerStatus: (containerStatus: ContainerInfo) => void; setIsAllocatingContainer: (isAllocatingContainer: boolean) => void; @@ -113,7 +111,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ chatMessages: [], shouldIncludeInMessages: true, showExplanationBubble: false, - showQueryExplanation: false, notebookServerInfo: { notebookServerEndpoint: undefined, authToken: undefined, @@ -158,7 +155,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ setChatMessages: (chatMessages: CopilotMessage[]) => set({ chatMessages }), setShouldIncludeInMessages: (shouldIncludeInMessages: boolean) => set({ shouldIncludeInMessages }), setShowExplanationBubble: (showExplanationBubble: boolean) => set({ showExplanationBubble }), - setShowQueryExplanation: (showQueryExplanation: boolean) => set({ showQueryExplanation }), setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => set({ notebookServerInfo }), setContainerStatus: (containerStatus: ContainerInfo) => set({ containerStatus }), @@ -206,7 +202,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({ chatMessages: [], shouldIncludeInMessages: true, showExplanationBubble: false, - showQueryExplanation: false, notebookServerInfo: { notebookServerEndpoint: undefined, authToken: undefined,