[Query Copilot] Sample Prompt implementation and other (#1489)

* Sample Prompts and ComboBox implementation

* Adding DeletePopup and SamplePrompts

* Implementation of Delete/Copy code buttons

* Adjusted changes based on the comments for Modal

* Reverded implementation of inline prompt

* Updated function

* Replacing const to function

* Unused icons deleted

* Comments removed

* Additional styling based on designs

* Test snapshots

* Implementation of popup for copying code

* Tests updated/added

* Background color changed

* Resolving lint issue

* CopyPopup snapshot updated

* Merged with master

* Implementations fixed based on comments

* Test Snapshots updated

* Query copilot updated

* Resolving minor bug with Delete popup

---------

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

src/Explorer/QueryCopilot/Popup/CopyPopup.test.tsx

@@ -0,0 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { any } from "underscore";
+import { CopyPopup } from "./CopyPopup";
+
+describe("Copy Popup snapshot test", () => {
+  it("should render when showCopyPopup is true", () => {
+    const wrapper = shallow(<CopyPopup showCopyPopup={true} setShowCopyPopup={() => any} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Popup/CopyPopup.tsx

@@ -0,0 +1,63 @@
+import { IconButton, Image, Stack, Text } from "@fluentui/react";
+import React, { Dispatch, SetStateAction } from "react";
+import Success from "../../../../images/successfulPopup.svg";
+
+export const CopyPopup = ({
+  showCopyPopup,
+  setShowCopyPopup,
+}: {
+  showCopyPopup: boolean;
+  setShowCopyPopup: Dispatch<SetStateAction<boolean>>;
+}): JSX.Element => {
+  const closePopup = () => {
+    setShowCopyPopup(false);
+  };
+
+  return showCopyPopup ? (
+    <Stack
+      style={{
+        position: "fixed",
+        width: 345,
+        height: 66,
+        padding: 10,
+        gap: 5,
+        top: 75,
+        right: 20,
+        background: "#FFFFFF",
+        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+      }}
+    >
+      <Stack
+        horizontal
+        verticalAlign="center"
+        style={{ display: "flex", justifyContent: "space-between", padding: "5px, 2px, 0px, 0px" }}
+      >
+        <Stack horizontal verticalAlign="center" style={{ display: "flex", gap: 10 }}>
+          <Image style={{ width: 15, height: 15 }} src={Success} />
+          <Text>
+            <b>Code copied successfully</b>
+          </Text>
+        </Stack>
+        <IconButton
+          styles={{
+            root: {
+              border: "none",
+              backgroundColor: "transparent",
+              padding: 0,
+              selectors: {
+                "&:focus": {
+                  outline: "none",
+                },
+              },
+            },
+          }}
+          iconProps={{ iconName: "Cancel" }}
+          onClick={closePopup}
+        />
+      </Stack>
+      <Text style={{ marginTop: -10 }}>The query has been copied to the clipboard</Text>
+    </Stack>
+  ) : (
+    <></>
+  );
+};

src/Explorer/QueryCopilot/Popup/DeletePopup.test.tsx

@@ -0,0 +1,11 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { any } from "underscore";
+import { DeletePopup } from "./DeletePopup";
+
+describe("Delete Popup snapshot test", () => {
+  it("should render when showDeletePopup is true", () => {
+    const wrapper = shallow(<DeletePopup showDeletePopup={true} setShowDeletePopup={() => any} setQuery={() => any} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Popup/DeletePopup.tsx

@@ -0,0 +1,38 @@
+import { DefaultButton, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
+import React, { Dispatch, SetStateAction } from "react";
+
+export const DeletePopup = ({
+  showDeletePopup,
+  setShowDeletePopup,
+  setQuery,
+}: {
+  showDeletePopup: boolean;
+  setShowDeletePopup: Dispatch<SetStateAction<boolean>>;
+  setQuery: Dispatch<SetStateAction<string>>;
+}): JSX.Element => {
+  const deleteCode = () => {
+    setQuery("");
+    setShowDeletePopup(false);
+  };
+
+  return (
+    <Modal isOpen={showDeletePopup} styles={{ main: { minHeight: "122px", minWidth: "880px" } }}>
+      <Stack style={{ padding: "16px 24px", height: "auto" }}>
+        <Text style={{ height: 24, fontSize: "18px" }}>
+          <b>Delete code?</b>
+        </Text>
+        <Text style={{ marginTop: 10, marginBottom: 20 }}>
+          This will clear the query from the query builder pane along with all comments and also reset the prompt pane
+        </Text>
+        <Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
+          <PrimaryButton style={{ padding: "0px 20px", height: 24 }} onClick={deleteCode}>
+            Delete
+          </PrimaryButton>
+          <DefaultButton style={{ padding: "0px 20px", height: 24 }} onClick={() => setShowDeletePopup(false)}>
+            Close
+          </DefaultButton>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};

src/Explorer/QueryCopilot/Popup/__snapshots__/CopyPopup.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] = `
+<Stack
+  style={
+    Object {
+      "background": "#FFFFFF",
+      "boxShadow": "0 2px 6px rgba(0, 0, 0, 0.16)",
+      "gap": 5,
+      "height": 66,
+      "padding": 10,
+      "position": "fixed",
+      "right": 20,
+      "top": 75,
+      "width": 345,
+    }
+  }
+>
+  <Stack
+    horizontal={true}
+    style={
+      Object {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "padding": "5px, 2px, 0px, 0px",
+      }
+    }
+    verticalAlign="center"
+  >
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "display": "flex",
+          "gap": 10,
+        }
+      }
+      verticalAlign="center"
+    >
+      <Image
+        src=""
+        style={
+          Object {
+            "height": 15,
+            "width": 15,
+          }
+        }
+      />
+      <Text>
+        <b>
+          Code copied successfully
+        </b>
+      </Text>
+    </Stack>
+    <CustomizedIconButton
+      iconProps={
+        Object {
+          "iconName": "Cancel",
+        }
+      }
+      onClick={[Function]}
+      styles={
+        Object {
+          "root": Object {
+            "backgroundColor": "transparent",
+            "border": "none",
+            "padding": 0,
+            "selectors": Object {
+              "&:focus": Object {
+                "outline": "none",
+              },
+            },
+          },
+        }
+      }
+    />
+  </Stack>
+  <Text
+    style={
+      Object {
+        "marginTop": -10,
+      }
+    }
+  >
+    The query has been copied to the clipboard
+  </Text>
+</Stack>
+`;

src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Popup snapshot test should render when showDeletePopup is true 1`] = `
+<Modal
+  isOpen={true}
+  styles={
+    Object {
+      "main": Object {
+        "minHeight": "122px",
+        "minWidth": "880px",
+      },
+    }
+  }
+>
+  <Stack
+    style={
+      Object {
+        "height": "auto",
+        "padding": "16px 24px",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "fontSize": "18px",
+          "height": 24,
+        }
+      }
+    >
+      <b>
+        Delete code?
+      </b>
+    </Text>
+    <Text
+      style={
+        Object {
+          "marginBottom": 20,
+          "marginTop": 10,
+        }
+      }
+    >
+      This will clear the query from the query builder pane along with all comments and also reset the prompt pane
+    </Text>
+    <Stack
+      horizontal={true}
+      horizontalAlign="start"
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
+    >
+      <CustomizedPrimaryButton
+        onClick={[Function]}
+        style={
+          Object {
+            "height": 24,
+            "padding": "0px 20px",
+          }
+        }
+      >
+        Delete
+      </CustomizedPrimaryButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "height": 24,
+            "padding": "0px 20px",
+          }
+        }
+      >
+        Close
+      </CustomizedDefaultButton>
+    </Stack>
+  </Stack>
+</Modal>
+`;

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -31,7 +31,10 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { SaveQueryPane } from "Explorer/Panes/SaveQueryPane/SaveQueryPane";
+import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
+import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
 import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/SamplePrompts/SamplePrompts";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
 import { userContext } from "UserContext";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
@@ -39,10 +42,11 @@ import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { useState } from "react";
 import SplitterLayout from "react-splitter-layout";
-import CopilotIcon from "../../../images/Copilot.svg";
 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 SamplePromptsIcon from "../../../images/SamplePromptsIcon.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import { useTabs } from "../../hooks/useTabs";
 
@@ -81,6 +85,33 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
   const [queryResults, setQueryResults] = useState<QueryResults>();
   const [errorMessage, setErrorMessage] = useState<string>("");
+  const [isSamplePromptsOpen, setIsSamplePromptsOpen] = useState<boolean>(false);
+  const [showDeletePopup, setShowDeletePopup] = useState<boolean>(false);
+  const [showFeedbackBar, setShowFeedbackBar] = useState<boolean>(false);
+  const [showCopyPopup, setshowCopyPopup] = useState<boolean>(false);
+
+  const sampleProps: SamplePromptsProps = {
+    isSamplePromptsOpen: isSamplePromptsOpen,
+    setIsSamplePromptsOpen: setIsSamplePromptsOpen,
+    setTextBox: setUserPrompt,
+  };
+
+  const copyGeneratedCode = () => {
+    if (!query) {
+      return;
+    }
+    const queryElement = document.createElement("textarea");
+    queryElement.value = query;
+    document.body.appendChild(queryElement);
+    queryElement.select();
+    document.execCommand("copy");
+    document.body.removeChild(queryElement);
+
+    setshowCopyPopup(true);
+    setTimeout(() => {
+      setshowCopyPopup(false);
+    }, 6000);
+  };
 
   const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
   const cachedHistories = cachedHistoriesString?.split(",");
@@ -91,7 +122,6 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
     setHistories(newHistories);
     localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join(","));
   };
-
   const generateSQLQuery = async (): Promise<void> => {
     try {
       setIsGeneratingQuery(true);
@@ -100,6 +130,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
         containerSchema: QueryCopilotSampleContainerSchema,
         userPrompt: userPrompt,
       };
+      setShowDeletePopup(false);
       const response = await fetch("https://copilotorchestrater.azurewebsites.net/generateSQLQuery", {
         method: "POST",
         headers: {
@@ -124,6 +155,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
     } finally {
       setIsGeneratingQuery(false);
       useTabs.getState().setIsTabExecuting(false);
+      setShowFeedbackBar(true);
     }
   };
 
@@ -182,7 +214,16 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       hasPopup: false,
     };
 
-    return [executeQueryBtn, saveQueryBtn];
+    const samplePromptsBtn = {
+      iconSrc: SamplePromptsIcon,
+      iconAlt: "Sample Prompts",
+      onCommandClick: () => setIsSamplePromptsOpen(true),
+      commandButtonLabel: "Sample Prompts",
+      ariaLabel: "Sample Prompts",
+      hasPopup: false,
+    };
+
+    return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
   };
 
   React.useEffect(() => {
@@ -321,57 +362,70 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
         </Link>
       </Text>
 
-      <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
-        <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
-        {showCallout && !hideFeedbackModalForLikedQueries && (
-          <Callout
-            style={{ padding: 8 }}
-            target="#likeBtn"
-            onDismiss={() => {
-              setShowCallout(false);
-              submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
+      {showFeedbackBar ? (
+        <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
+          <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
+          {showCallout && !hideFeedbackModalForLikedQueries && (
+            <Callout
+              style={{ padding: 8 }}
+              target="#likeBtn"
+              onDismiss={() => {
+                setShowCallout(false);
+                submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
+              }}
+              directionalHint={DirectionalHint.topCenter}
+            >
+              <Text>
+                Thank you. Need to give{" "}
+                <Link
+                  onClick={() => {
+                    setShowCallout(false);
+                    useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
+                  }}
+                >
+                  more feedback?
+                </Link>
+              </Text>
+            </Callout>
+          )}
+          <IconButton
+            id="likeBtn"
+            style={{ marginLeft: 20 }}
+            iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
+            onClick={() => {
+              setLikeQuery(true);
+              setShowCallout(true);
             }}
-            directionalHint={DirectionalHint.topCenter}
+          />
+          <IconButton
+            style={{ margin: "0 10px" }}
+            iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
+            onClick={() => {
+              setLikeQuery(false);
+              setShowCallout(false);
+              useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
+            }}
+          />
+          <Separator vertical style={{ color: "#EDEBE9" }} />
+          <CommandBarButton
+            onClick={copyGeneratedCode}
+            iconProps={{ iconName: "Copy" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
           >
-            <Text>
-              Thank you. Need to give{" "}
-              <Link
-                onClick={() => {
-                  setShowCallout(false);
-                  useQueryCopilot.getState().openFeedbackModal(generatedQuery, true, userPrompt);
-                }}
-              >
-                more feedback?
-              </Link>
-            </Text>
-          </Callout>
-        )}
-        <IconButton
-          id="likeBtn"
-          style={{ marginLeft: 20 }}
-          iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
-          onClick={() => {
-            setLikeQuery(true);
-            setShowCallout(true);
-          }}
-        />
-        <IconButton
-          style={{ margin: "0 10px" }}
-          iconProps={{ iconName: likeQuery === false ? "DislikeSolid" : "Dislike" }}
-          onClick={() => {
-            setLikeQuery(false);
-            setShowCallout(false);
-            useQueryCopilot.getState().openFeedbackModal(generatedQuery, false, userPrompt);
-          }}
-        />
-        <Separator vertical styles={{ root: { selectors: { "::before": { background: "#E1DFDD" } } } }} />
-        <CommandBarButton iconProps={{ iconName: "Copy" }} style={{ margin: "0 10px", backgroundColor: "#FFF8F0" }}>
-          Copy code
-        </CommandBarButton>
-        <CommandBarButton iconProps={{ iconName: "Delete" }} style={{ backgroundColor: "#FFF8F0" }}>
-          Delete code
-        </CommandBarButton>
-      </Stack>
+            Copy code
+          </CommandBarButton>
+          <CommandBarButton
+            onClick={() => setShowDeletePopup(true)}
+            iconProps={{ iconName: "Delete" }}
+            style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
+          >
+            Delete code
+          </CommandBarButton>
+        </Stack>
+      ) : (
+        <></>
+      )}
+
       <Stack className="tabPaneContentContainer">
         <SplitterLayout vertical={true} primaryIndex={0} primaryMinSize={100} secondaryMinSize={200}>
           <EditorReact
@@ -393,6 +447,13 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
           />
         </SplitterLayout>
       </Stack>
+      {isSamplePromptsOpen ? <SamplePrompts sampleProps={sampleProps} /> : <></>}
+      {query !== "" && query.trim().length !== 0 ? (
+        <DeletePopup showDeletePopup={showDeletePopup} setShowDeletePopup={setShowDeletePopup} setQuery={setQuery} />
+      ) : (
+        <></>
+      )}
+      <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
     </Stack>
   );
 };

src/Explorer/QueryCopilot/SamplePrompts/SamplePrompts.test.tsx

@@ -0,0 +1,26 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { SamplePrompts, SamplePromptsProps } from "./SamplePrompts";
+
+describe("Sample Prompts snapshot test", () => {
+  it("should render properly if isSamplePromptsOpen is true", () => {
+    const sampleProps: SamplePromptsProps = {
+      isSamplePromptsOpen: true,
+      setIsSamplePromptsOpen: () => undefined,
+      setTextBox: () => undefined,
+    };
+
+    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render properly if isSamplePromptsOpen is false", () => {
+    const sampleProps: SamplePromptsProps = {
+      isSamplePromptsOpen: false,
+      setIsSamplePromptsOpen: () => undefined,
+      setTextBox: () => undefined,
+    };
+    const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/SamplePrompts/SamplePrompts.tsx

@@ -0,0 +1,138 @@
+import { DefaultButton, FontIcon, IconButton, Image, Modal, Stack, Text } from "@fluentui/react";
+import React, { Dispatch, SetStateAction } from "react";
+import ComplexPrompts from "../../../../images/ComplexPrompts.svg";
+import IntermediatePrompts from "../../../../images/IntermediatePrompts.svg";
+import SimplePrompts from "../../../../images/SimplePrompts.svg";
+
+export interface SamplePromptsProps {
+  isSamplePromptsOpen: boolean;
+  setIsSamplePromptsOpen: Dispatch<SetStateAction<boolean>>;
+  setTextBox: Dispatch<SetStateAction<string>>;
+}
+
+const SampleUserInputs: string[] = [
+  "Show me products less than 100 dolars",
+  "Show schema",
+  "Show items with a description that contains a number between 0 and 99 inclusive.",
+  "Write a query to return all records in this table created in the last thirty days",
+  "Show all the products that customer Bob has reviewed.",
+  "Which computers are more than 300 dollars and less than 400 dollars?",
+];
+
+export const SamplePrompts = ({ sampleProps }: { sampleProps: SamplePromptsProps }): JSX.Element => {
+  const updateTextBox = (userInput: string) => {
+    sampleProps.setTextBox(userInput);
+    sampleProps.setIsSamplePromptsOpen(false);
+  };
+
+  return (
+    <Modal isOpen={sampleProps.isSamplePromptsOpen}>
+      <Stack
+        style={{ padding: "16px 24px", overflowY: "auto", maxHeight: "calc(100vh - 120px)" }}
+        role="dialog"
+        aria-modal="true"
+      >
+        <Stack>
+          <Stack horizontal style={{ display: "flex", justifyContent: "space-between" }}>
+            <Text style={{ fontSize: 24, fontWeight: 600 }}>Sample Prompts</Text>
+            <IconButton
+              styles={{
+                root: {
+                  border: "none",
+                  backgroundColor: "transparent",
+                  padding: 0,
+                  selectors: {
+                    "&:hover": {
+                      backgroundColor: "transparent",
+                      color: "#000", // Set the desired color for the X button on hover
+                    },
+                    "&:focus": {
+                      outline: "none",
+                    },
+                  },
+                },
+              }}
+              iconProps={{ iconName: "Cancel" }}
+              onClick={() => sampleProps.setIsSamplePromptsOpen(false)}
+            />
+          </Stack>
+          <Text style={{ fontWeight: 400, fontSize: 13, marginTop: 10 }}>
+            Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
+          </Text>
+        </Stack>
+
+        <Stack style={{ marginTop: 30, display: "flex" }}>
+          <Stack horizontal verticalAlign="center">
+            <Image style={{ width: 25, height: 25 }} src={SimplePrompts} />
+            <Text style={{ fontSize: 14, fontWeight: 600 }}>Simple Prompts</Text>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal style={{ gap: 35 }}>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[0])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[0]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[1])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[1]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+        </Stack>
+
+        <Stack style={{ marginTop: 30, display: "flex" }}>
+          <Stack horizontal verticalAlign="center">
+            <Image style={{ width: 25, height: 25 }} src={IntermediatePrompts} />
+            <Text style={{ fontSize: 14, fontWeight: 600 }}>Intermediate Prompts</Text>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal style={{ gap: 35 }}>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[2])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[2]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[3])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[3]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+        </Stack>
+
+        <Stack style={{ marginTop: 30, display: "flex" }}>
+          <Stack horizontal verticalAlign="center">
+            <Image style={{ width: 25, height: 25 }} src={ComplexPrompts} />
+            <Text style={{ fontSize: 14, fontWeight: 600 }}>Complex Prompts</Text>
+          </Stack>
+        </Stack>
+
+        <Stack horizontal style={{ gap: 35 }}>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[4])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[4]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+          <DefaultButton
+            style={{ width: 352, height: 135, background: "#F6F6F7" }}
+            onClick={() => updateTextBox(SampleUserInputs[5])}
+          >
+            <Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[5]}</Text>
+            <FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
+          </DefaultButton>
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};

src/Explorer/QueryCopilot/SamplePrompts/__snapshots__/SamplePrompts.test.tsx.snap

@@ -0,0 +1,781 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is false 1`] = `
+<Modal
+  isOpen={false}
+>
+  <Stack
+    aria-modal="true"
+    role="dialog"
+    style={
+      Object {
+        "maxHeight": "calc(100vh - 120px)",
+        "overflowY": "auto",
+        "padding": "16px 24px",
+      }
+    }
+  >
+    <Stack>
+      <Stack
+        horizontal={true}
+        style={
+          Object {
+            "display": "flex",
+            "justifyContent": "space-between",
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 24,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Sample Prompts
+        </Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Cancel",
+            }
+          }
+          onClick={[Function]}
+          styles={
+            Object {
+              "root": Object {
+                "backgroundColor": "transparent",
+                "border": "none",
+                "padding": 0,
+                "selectors": Object {
+                  "&:focus": Object {
+                    "outline": "none",
+                  },
+                  "&:hover": Object {
+                    "backgroundColor": "transparent",
+                    "color": "#000",
+                  },
+                },
+              },
+            }
+          }
+        />
+      </Stack>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "fontWeight": 400,
+            "marginTop": 10,
+          }
+        }
+      >
+        Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
+      </Text>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Simple Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show me products less than 100 dolars
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show schema
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Intermediate Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show items with a description that contains a number between 0 and 99 inclusive.
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Write a query to return all records in this table created in the last thirty days
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Complex Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show all the products that customer Bob has reviewed.
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Which computers are more than 300 dollars and less than 400 dollars?
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+  </Stack>
+</Modal>
+`;
+
+exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is true 1`] = `
+<Modal
+  isOpen={true}
+>
+  <Stack
+    aria-modal="true"
+    role="dialog"
+    style={
+      Object {
+        "maxHeight": "calc(100vh - 120px)",
+        "overflowY": "auto",
+        "padding": "16px 24px",
+      }
+    }
+  >
+    <Stack>
+      <Stack
+        horizontal={true}
+        style={
+          Object {
+            "display": "flex",
+            "justifyContent": "space-between",
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 24,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Sample Prompts
+        </Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Cancel",
+            }
+          }
+          onClick={[Function]}
+          styles={
+            Object {
+              "root": Object {
+                "backgroundColor": "transparent",
+                "border": "none",
+                "padding": 0,
+                "selectors": Object {
+                  "&:focus": Object {
+                    "outline": "none",
+                  },
+                  "&:hover": Object {
+                    "backgroundColor": "transparent",
+                    "color": "#000",
+                  },
+                },
+              },
+            }
+          }
+        />
+      </Stack>
+      <Text
+        style={
+          Object {
+            "fontSize": 13,
+            "fontWeight": 400,
+            "marginTop": 10,
+          }
+        }
+      >
+        Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
+      </Text>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Simple Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show me products less than 100 dolars
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show schema
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Intermediate Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show items with a description that contains a number between 0 and 99 inclusive.
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Write a query to return all records in this table created in the last thirty days
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+    <Stack
+      style={
+        Object {
+          "display": "flex",
+          "marginTop": 30,
+        }
+      }
+    >
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <Image
+          src=""
+          style={
+            Object {
+              "height": 25,
+              "width": 25,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 14,
+              "fontWeight": 600,
+            }
+          }
+        >
+          Complex Prompts
+        </Text>
+      </Stack>
+    </Stack>
+    <Stack
+      horizontal={true}
+      style={
+        Object {
+          "gap": 35,
+        }
+      }
+    >
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Show all the products that customer Bob has reviewed.
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+      <CustomizedDefaultButton
+        onClick={[Function]}
+        style={
+          Object {
+            "background": "#F6F6F7",
+            "height": 135,
+            "width": 352,
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 13,
+              "height": 80,
+            }
+          }
+        >
+          Which computers are more than 300 dollars and less than 400 dollars?
+        </Text>
+        <FontIcon
+          aria-label="Forward"
+          iconName="Forward"
+          style={
+            Object {
+              "left": "92.61%",
+              "position": "absolute",
+            }
+          }
+        />
+      </CustomizedDefaultButton>
+    </Stack>
+  </Stack>
+</Modal>
+`;

src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap

@@ -92,97 +92,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       Read preview terms
     </StyledLinkBase>
   </Text>
-  <Stack
-    horizontal={true}
-    style={
-      Object {
-        "backgroundColor": "#FFF8F0",
-        "padding": "2px 8px",
-      }
-    }
-    verticalAlign="center"
-  >
-    <Text
-      style={
-        Object {
-          "fontSize": 12,
-          "fontWeight": 600,
-        }
-      }
-    >
-      Provide feedback on the query generated
-    </Text>
-    <CustomizedIconButton
-      iconProps={
-        Object {
-          "iconName": "Like",
-        }
-      }
-      id="likeBtn"
-      onClick={[Function]}
-      style={
-        Object {
-          "marginLeft": 20,
-        }
-      }
-    />
-    <CustomizedIconButton
-      iconProps={
-        Object {
-          "iconName": "Dislike",
-        }
-      }
-      onClick={[Function]}
-      style={
-        Object {
-          "margin": "0 10px",
-        }
-      }
-    />
-    <Separator
-      styles={
-        Object {
-          "root": Object {
-            "selectors": Object {
-              "::before": Object {
-                "background": "#E1DFDD",
-              },
-            },
-          },
-        }
-      }
-      vertical={true}
-    />
-    <CustomizedCommandBarButton
-      iconProps={
-        Object {
-          "iconName": "Copy",
-        }
-      }
-      style={
-        Object {
-          "backgroundColor": "#FFF8F0",
-          "margin": "0 10px",
-        }
-      }
-    >
-      Copy code
-    </CustomizedCommandBarButton>
-    <CustomizedCommandBarButton
-      iconProps={
-        Object {
-          "iconName": "Delete",
-        }
-      }
-      style={
-        Object {
-          "backgroundColor": "#FFF8F0",
-        }
-      }
-    >
-      Delete code
-    </CustomizedCommandBarButton>
-  </Stack>
   <Stack
     className="tabPaneContentContainer"
   >
@@ -215,5 +124,9 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       />
     </t>
   </Stack>
+  <CopyPopup
+    setShowCopyPopup={[Function]}
+    showCopyPopup={false}
+  />
 </Stack>
 `;

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -23,10 +23,10 @@ import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
-import CopilotIcon from "../../../images/Copilot.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
 import NotebookColorIcon from "../../../images/Notebooks.svg";
 import PowerShellIcon from "../../../images/PowerShell.svg";
+import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";