[Query Copilot] V2 Backend integration (#1584)

* Initial implementetation of backend integration

* Added parameters and interfaces moved

* Initial client implementation

* Additional changes for React FC's

* Updated snapshot of Footer

* Additional Copilot implementation

* Test adjustments and client implementation

* Additional test implementations

* Naming convetion for functions

* Changing {} to any

* Additional changes to the type

* Additional test changes

* Removal of prevention

* adding comment

* Additional changes to tests

* Moving logic based on comments

* client implementation along with corrected tests

---------

Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>

src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.test.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "@fluentui/react";
+import Explorer from "Explorer/Explorer";
 import { SampleBubble } from "Explorer/QueryCopilot/V2/Bubbles/Sample/SampleBubble";
 import { shallow } from "enzyme";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -16,7 +17,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
   it("should render and set copilot used flag ", () => {
     withHooks(() => {
       useQueryCopilot.getState().setShowCopilotSidebar(true);
-      const wrapper = shallow(<QueryCopilotSidebar />);
+      const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
 
       expect(useQueryCopilot.getState().wasCopilotUsed).toBeTruthy();
       expect(wrapper).toMatchSnapshot();
@@ -25,7 +26,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
 
   it("should render and not set copilot used flag ", () => {
     withHooks(() => {
-      const wrapper = shallow(<QueryCopilotSidebar />);
+      const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
 
       expect(useQueryCopilot.getState().wasCopilotUsed).toBeFalsy();
       expect(wrapper).toMatchSnapshot();
@@ -34,8 +35,8 @@ describe("Query Copilot Sidebar snapshot test", () => {
 
   it("should render with chat messages", () => {
     const message = "some test message";
-    useQueryCopilot.getState().setChatMessages([message]);
-    const wrapper = shallow(<QueryCopilotSidebar />);
+    useQueryCopilot.getState().setChatMessages([{ source: 0, message: message }]);
+    const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
 
     const messageContainer = wrapper.find(Stack).findWhere((x) => x.text() === message);
 
@@ -44,7 +45,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
   });
 
   it("should render samples without messages", () => {
-    const wrapper = shallow(<QueryCopilotSidebar />);
+    const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
 
     const sampleBubble = wrapper.find(SampleBubble);
 

src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "@fluentui/react";
+import { QueryCopilotProps } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { RetrievingBubble } from "Explorer/QueryCopilot/V2/Bubbles/Retriveing/RetrievingBubble";
 import { SampleBubble } from "Explorer/QueryCopilot/V2/Bubbles/Sample/SampleBubble";
 import { WelcomeBubble } from "Explorer/QueryCopilot/V2/Bubbles/Welcome/WelcomeBubble";
@@ -8,8 +9,14 @@ import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
 import { WelcomeSidebarModal } from "../Modal/WelcomeSidebarModal";
 
-export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
-  const { setWasCopilotUsed, showCopilotSidebar, chatMessages } = useQueryCopilot();
+export const QueryCopilotSidebar: React.FC<QueryCopilotProps> = ({ explorer }: QueryCopilotProps): JSX.Element => {
+  const {
+    setWasCopilotUsed,
+    showCopilotSidebar,
+    chatMessages,
+    showWelcomeSidebar,
+    isGeneratingQuery,
+  } = useQueryCopilot();
 
   React.useEffect(() => {
     if (showCopilotSidebar) {
@@ -20,37 +27,58 @@ export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
   return (
     <Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA" }}>
       <Header />
-      <WelcomeSidebarModal />
-      <Stack
-        style={{
-          flexGrow: 1,
-          display: "flex",
-          flexDirection: "column",
-          overflowY: "auto",
-        }}
-      >
-        <WelcomeBubble />
-        {chatMessages.map((message, index) => (
+      {showWelcomeSidebar ? (
+        <WelcomeSidebarModal />
+      ) : (
+        <>
           <Stack
-            key={index}
-            horizontalAlign="center"
-            tokens={{ padding: 8, childrenGap: 8 }}
             style={{
-              backgroundColor: "#E0E7FF",
-              borderRadius: "8px",
-              margin: "5px 10px",
-              textAlign: "start",
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflowY: "auto",
             }}
           >
-            {message}
+            <WelcomeBubble />
+            {chatMessages.map((message, index) =>
+              message.source === 0 ? (
+                <Stack
+                  key={index}
+                  horizontalAlign="center"
+                  tokens={{ padding: 8, childrenGap: 8 }}
+                  style={{
+                    backgroundColor: "#E0E7FF",
+                    borderRadius: "8px",
+                    margin: "5px 10px",
+                    textAlign: "start",
+                  }}
+                >
+                  {message.message}
+                </Stack>
+              ) : (
+                <Stack
+                  key={index}
+                  horizontalAlign="center"
+                  tokens={{ padding: 8, childrenGap: 8 }}
+                  style={{
+                    backgroundColor: "white",
+                    borderRadius: "8px",
+                    margin: "5px 10px",
+                    textAlign: "start",
+                  }}
+                >
+                  {message.message}
+                </Stack>
+              )
+            )}
+
+            <RetrievingBubble />
+
+            {chatMessages.length === 0 && !isGeneratingQuery && <SampleBubble />}
           </Stack>
-        ))}
-
-        <RetrievingBubble />
-
-        {chatMessages.length === 0 && <SampleBubble />}
-      </Stack>
-      <Footer />
+          <Footer explorer={explorer} />
+        </>
+      )}
     </Stack>
   );
 };

src/Explorer/QueryCopilot/V2/Sidebar/__snapshots__/QueryCopilotSidebar.test.tsx.snap

@@ -12,21 +12,6 @@ exports[`Query Copilot Sidebar snapshot test should render and not set copilot u
 >
   <Header />
   <WelcomeSidebarModal />
-  <Stack
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "overflowY": "auto",
-      }
-    }
-  >
-    <WelcomeBubble />
-    <RetrievingBubble />
-    <SampleBubble />
-  </Stack>
-  <Footer />
 </Stack>
 `;
 
@@ -42,21 +27,6 @@ exports[`Query Copilot Sidebar snapshot test should render and set copilot used
 >
   <Header />
   <WelcomeSidebarModal />
-  <Stack
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "overflowY": "auto",
-      }
-    }
-  >
-    <WelcomeBubble />
-    <RetrievingBubble />
-    <SampleBubble />
-  </Stack>
-  <Footer />
 </Stack>
 `;
 
@@ -72,21 +42,6 @@ exports[`Query Copilot Sidebar snapshot test should render samples without messa
 >
   <Header />
   <WelcomeSidebarModal />
-  <Stack
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "overflowY": "auto",
-      }
-    }
-  >
-    <WelcomeBubble />
-    <RetrievingBubble />
-    <SampleBubble />
-  </Stack>
-  <Footer />
 </Stack>
 `;
 
@@ -102,39 +57,5 @@ exports[`Query Copilot Sidebar snapshot test should render with chat messages 1`
 >
   <Header />
   <WelcomeSidebarModal />
-  <Stack
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "column",
-        "flexGrow": 1,
-        "overflowY": "auto",
-      }
-    }
-  >
-    <WelcomeBubble />
-    <Stack
-      horizontalAlign="center"
-      key="0"
-      style={
-        Object {
-          "backgroundColor": "#E0E7FF",
-          "borderRadius": "8px",
-          "margin": "5px 10px",
-          "textAlign": "start",
-        }
-      }
-      tokens={
-        Object {
-          "childrenGap": 8,
-          "padding": 8,
-        }
-      }
-    >
-      some test message
-    </Stack>
-    <RetrievingBubble />
-  </Stack>
-  <Footer />
 </Stack>
 `;