[Query Copilot V2] Restructure code for V2 of copilot (#1577)

* Initial folder and code restructure

* Add snapshots

* Remove flag for local testing

* Remove unnecessary code

* Fix snapshot

* Update tests

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

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { QueryCopilotSidebar } from "./QueryCopilotSidebar";
+
+describe("Footer snapshot test", () => {
+  it("should render ", () => {
+    const wrapper = shallow(<QueryCopilotSidebar />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { Stack } from "@fluentui/react";
+import { SampleBubble } from "Explorer/QueryCopilot/V2/Bubbles/Sample/SampleBubble";
+import { WelcomeBubble } from "Explorer/QueryCopilot/V2/Bubbles/Welcome/WelcomeBubble";
+import { Footer } from "Explorer/QueryCopilot/V2/Footer/Footer";
+import { Header } from "Explorer/QueryCopilot/V2/Header/Header";
+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, showWelcomeSidebar } = useQueryCopilot();
+
+  React.useEffect(() => {
+    if (showCopilotSidebar) {
+      setWasCopilotUsed(true);
+    }
+  }, []);
+
+  return (
+    <Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA", overflow: "auto" }}>
+      <Header />
+      {showWelcomeSidebar ? (
+        <WelcomeSidebarModal />
+      ) : (
+        <>
+          <Stack
+            style={{
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflowY: "auto",
+            }}
+          >
+            <WelcomeBubble />
+            {chatMessages.map((message, index) => (
+              <Stack
+                key={index}
+                horizontalAlign="center"
+                tokens={{ padding: 8, childrenGap: 8 }}
+                style={{
+                  backgroundColor: "#E0E7FF",
+                  borderRadius: "8px",
+                  margin: "5px 10px",
+                  textAlign: "start",
+                }}
+              >
+                {message}
+              </Stack>
+            ))}
+            {chatMessages.length === 0 && <SampleBubble />}
+          </Stack>
+          <Footer />
+        </>
+      )}
+    </Stack>
+  );
+};

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer snapshot test should render  1`] = `
+<Stack
+  style={
+    Object {
+      "backgroundColor": "#FAFAFA",
+      "height": "100%",
+      "overflow": "auto",
+      "width": "100%",
+    }
+  }
+>
+  <Header />
+  <WelcomeSidebarModal />
+</Stack>
+`;