diff --git a/images/CopilotDatabase.svg b/images/CopilotDatabase.svg
new file mode 100644
index 000000000..b92632dc1
--- /dev/null
+++ b/images/CopilotDatabase.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/CopilotFlash.svg b/images/CopilotFlash.svg
new file mode 100644
index 000000000..25e0b31b7
--- /dev/null
+++ b/images/CopilotFlash.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/CopilotThumb.svg b/images/CopilotThumb.svg
new file mode 100644
index 000000000..bbf5c25e9
--- /dev/null
+++ b/images/CopilotThumb.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/CopliotWelcomeIllustration.svg b/images/CopliotWelcomeIllustration.svg
new file mode 100644
index 000000000..e08270ff0
--- /dev/null
+++ b/images/CopliotWelcomeIllustration.svg
@@ -0,0 +1,29 @@
+
diff --git a/src/Explorer/QueryCopilot/Modal/WelcomeModal.css b/src/Explorer/QueryCopilot/Modal/WelcomeModal.css
new file mode 100644
index 000000000..c332a40d0
--- /dev/null
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.css
@@ -0,0 +1,47 @@
+.modalContentPadding {
+ padding-top: 15px;
+ width: 513px;
+ height: 638px;
+}
+
+.exitPadding {
+ padding: 0px 7px 0px 0px;
+}
+
+.previewMargin {
+ margin: 8px 10px 0px 0;
+}
+
+.preview {
+ padding: 0px 4px;
+ background: #f0f0f0;
+ border-radius: 8px;
+ font-size: 10px;
+}
+
+.exitIcon {
+ margin: 3px 7px 0px 0px;
+ color: #424242;
+}
+
+.text {
+ width: 348px;
+ padding: 8px 16px 8px 16px;
+ margin-left: 25px;
+}
+
+.bold {
+ font-weight: 600;
+}
+
+.imageTextPadding {
+ padding: 0px 5px 0px 0px;
+}
+
+.buttonPadding {
+ padding: 15px 0px 0px 0px;
+}
+
+.tryButton {
+ border-radius: 4px;
+}
diff --git a/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
new file mode 100644
index 000000000..84df9e887
--- /dev/null
+++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx
@@ -0,0 +1,116 @@
+import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
+import React from "react";
+import Database from "../../../../images/CopilotDatabase.svg";
+import Flash from "../../../../images/CopilotFlash.svg";
+import Thumb from "../../../../images/CopilotThumb.svg";
+import CoplilotWelcomeIllustration from "../../../../images/CopliotWelcomeIllustration.svg";
+import "./WelcomeModal.css";
+
+export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element => {
+ const [isModalVisible, { setFalse: hideModal }] = useBoolean(visible);
+
+ React.useEffect(() => {
+ if (visible) {
+ window.localStorage.setItem("hideWelcomeModal", "true");
+ }
+ });
+
+ return (
+ <>
+ (
+
+
+
+
+
+
+
+
+
+
+ Preview
+
+
+
+
+
+
+
+
+ Welcome to Copilot in CosmosDB
+
+
+
+
+
+
+
+
+ Let copilot do the work for you
+
+
+
+
+
+ Ask Copilot to generate a query by describing the query in your words.
+
+ Learn more
+
+
+
+
+
+
+
+
+
+ Use your judgement
+
+
+
+
+
+ AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
+
+ Read preview terms
+
+
+
+
+
+
+
+
+
+ Copilot currently works only a sample database
+
+
+
+
+
+ Copilot is setup on a sample database we have configured for you at no cost
+
+ Learn more
+
+
+
+
+
+
+ Try Copilot
+
+
+
+
+
+ )
+
+ );
+};
diff --git a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
index 002e485de..ef6ed0be2 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx
@@ -31,6 +31,7 @@ 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 { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
@@ -487,6 +488,7 @@ export const QueryCopilotTab: React.FC = ({
/>
+
{isSamplePromptsOpen ? : <>}
{query !== "" && query.trim().length !== 0 ? (
diff --git a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
index 95b93c41f..59d6034ba 100644
--- a/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
@@ -126,6 +126,9 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
/>
+