[Query Copilot] Revise Copilot UI texts (#1569)

* Revise Copilot UI texts

* Test snapshots updated

---------

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

less/TableStyles/queryBuilder.less

@@ -230,7 +230,7 @@ input::-webkit-inner-spin-button {
 .advanced-options-panel .advanced-options .select .select-options-link {
   margin-left: 4px;
   cursor: pointer;
-  outline: none;
+  padding: 2px;
 }
 
 .query-panel .row .column-headers .Field {

src/Common/TableEntity.tsx

@@ -137,7 +137,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <div tabIndex={0}>
+            <div>
               <Image
                 {...imageProps}
                 src={EditIcon}

src/ConfigContext.ts

@@ -1,14 +1,14 @@
 import {
   allowedAadEndpoints,
   allowedArcadiaEndpoints,
-  allowedArmEndpoints,
-  allowedBackendEndpoints,
   allowedEmulatorEndpoints,
   allowedGraphEndpoints,
   allowedHostedExplorerEndpoints,
   allowedJunoOrigins,
   allowedMongoBackendEndpoints,
   allowedMsalRedirectEndpoints,
+  defaultAllowedArmEndpoints,
+  defaultAllowedBackendEndpoints,
   validateEndpoint,
 } from "Utils/EndpointValidation";
 
@@ -20,6 +20,8 @@ export enum Platform {
 
 export interface ConfigContext {
   platform: Platform;
+  allowedArmEndpoints: ReadonlyArray<string>;
+  allowedBackendEndpoints: ReadonlyArray<string>;
   allowedParentFrameOrigins: ReadonlyArray<string>;
   gitSha?: string;
   proxyPath?: string;
@@ -49,6 +51,8 @@ export interface ConfigContext {
 // Default configuration
 let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
+  allowedArmEndpoints: defaultAllowedArmEndpoints,
+  allowedBackendEndpoints: defaultAllowedBackendEndpoints,
   allowedParentFrameOrigins: [
     `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
     `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
@@ -77,7 +81,7 @@ let configContext: Readonly<ConfigContext> = {
 
 export function resetConfigContext(): void {
   if (process.env.NODE_ENV !== "test") {
-    throw new Error("resetConfigContext can only becalled in a test environment");
+    throw new Error("resetConfigContext can only be called in a test environment");
   }
   configContext = {} as ConfigContext;
 }
@@ -87,7 +91,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     return;
   }
 
-  if (!validateEndpoint(newContext.ARM_ENDPOINT, allowedArmEndpoints)) {
+  if (!validateEndpoint(newContext.ARM_ENDPOINT, configContext.allowedArmEndpoints || defaultAllowedArmEndpoints)) {
     delete newContext.ARM_ENDPOINT;
   }
 
@@ -107,7 +111,12 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
     delete newContext.ARCADIA_ENDPOINT;
   }
 
-  if (!validateEndpoint(newContext.BACKEND_ENDPOINT, allowedBackendEndpoints)) {
+  if (
+    !validateEndpoint(
+      newContext.BACKEND_ENDPOINT,
+      configContext.allowedBackendEndpoints || defaultAllowedBackendEndpoints
+    )
+  ) {
     delete newContext.BACKEND_ENDPOINT;
   }
 
@@ -130,7 +139,7 @@ export function updateConfigContext(newContext: Partial<ConfigContext>): void {
   Object.assign(configContext, newContext);
 }
 
-// Injected for local develpment. These will be removed in the production bundle by webpack
+// Injected for local development. These will be removed in the production bundle by webpack
 if (process.env.NODE_ENV === "development") {
   const port: string = process.env.PORT || "1234";
   updateConfigContext({

src/Explorer/ContextMenuButtonFactory.tsx

@@ -1,3 +1,5 @@
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
@@ -146,7 +148,10 @@ export const createSampleCollectionContextMenuButton = (): TreeNodeMenuItem[] =>
   if (userContext.apiType === "SQL") {
     items.push({
       iconSrc: AddSqlQueryIcon,
-      onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot),
+      onClick: () => {
+        useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+        traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
+      },
       label: "New SQL Query",
     });
   }

src/Explorer/Explorer.tsx

@@ -1,5 +1,8 @@
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
+import { sendMessage } from "Common/MessageHandler";
+import { Platform } from "ConfigContext";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { IGalleryItem } from "Juno/JunoClient";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import * as ko from "knockout";
@@ -23,7 +26,7 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
@@ -258,6 +261,45 @@ export default class Explorer {
     // TODO: return result
   }
 
+  private getRandomInt(max: number) {
+    return Math.floor(Math.random() * max);
+  }
+
+  public openNPSSurveyDialog(): void {
+    if (!Platform.Portal) {
+      return;
+    }
+
+    const NINETY_DAYS_IN_MS = 7776000000;
+    const ONE_DAY_IN_MS = 86400000;
+    const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
+      userContext.databaseAccount?.systemData?.createdAt || "",
+      NINETY_DAYS_IN_MS
+    );
+
+    // Try Cosmos DB subscription - survey shown to random 25% of users at day 1 in Data Explorer.
+    if (userContext.isTryCosmosDBSubscription) {
+      if (
+        isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS) &&
+        this.getRandomInt(100) < 25
+      ) {
+        sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+      }
+    } else {
+      // An existing account is lesser than 90 days old. For existing account show to random 10 % of users in Data Explorer.
+      if (isAccountNewerThanNinetyDays) {
+        if (this.getRandomInt(100) < 10) {
+          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+        }
+      } else {
+        // An existing account is greater than 90 days. For existing account show to random 25 % of users in Data Explorer.
+        if (this.getRandomInt(100) < 25) {
+          sendMessage({ type: MessageTypes.DisplayNPSSurvey });
+        }
+      }
+    }
+  }
+
   public async refreshDatabaseForResourceToken(): Promise<void> {
     const databaseId = userContext.parsedResourceToken?.databaseId;
     const collectionId = userContext.parsedResourceToken?.collectionId;

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,3 +1,5 @@
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
@@ -326,6 +328,7 @@ function createNewSQLQueryButton(selectedNodeState: SelectedNodeState): CommandB
       onCommandClick: () => {
         if (useSelectedNode.getState().isQueryCopilotCollectionSelected()) {
           useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+          traceOpen(Action.OpenQueryCopilotFromNewQuery, { apiType: userContext.apiType });
         } else {
           const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
           selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -1425,6 +1425,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       this.setState({ isExecuting: false });
       TelemetryProcessor.traceSuccess(Action.CreateCollection, telemetryData, startKey);
       useSidePanel.getState().closeSidePanel();
+      // open NPS Survey Dialog once the collection is created
+      if (userContext.features.enableNPSSurvey) {
+        this.props.explorer.openNPSSurveyDialog();
+      }
     } catch (error) {
       const errorMessage: string = getErrorMessage(error);
       this.setState({ isExecuting: false, errorMessage, showErrorDetails: true });

src/Explorer/Panes/PanelComponent.less

@@ -112,6 +112,9 @@
   margin-top: 28px;
   margin-left: 4px !important;
 }
+.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
+  border:1px dashed #605E5C
+}
 .addNewParamStyle {
   margin-top: 5px;
   margin-left: 5px !important;

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -78,11 +78,13 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
           }}
         ></ChoiceGroup>
         <Text style={{ fontSize: 12, marginBottom: 14 }}>
-          By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your
+          By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the{" "}
-          organization will be able to view and manage your feedback data.{" "}
+          {
-          <Link href="" target="_blank">
+            <Link href="https://privacy.microsoft.com/privacystatement" target="_blank">
-            Privacy statement
+              Privacy statement
-          </Link>
+            </Link>
+          }{" "}
+          for more information.
         </Text>
         {likeQuery && (
           <Checkbox

src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx

@@ -42,8 +42,8 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
             </Stack>
           </Stack>
           <Stack horizontalAlign="center">
-            <Stack.Item align="center">
+            <Stack.Item align="center" style={{ textAlign: "center" }}>
-              <Text className="title bold">Welcome to Copilot in CosmosDB</Text>
+              <Text className="title bold">Welcome to Query Copilot for Azure Cosmos DB (Private Preview)</Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
               <Stack horizontal>
@@ -52,7 +52,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                 </StackItem>
                 <StackItem align="start">
                   <Text className="bold">
-                    Let copilot do the work for you
+                    Let Query Copilot do the work for you
                     <br />
                   </Text>
                 </StackItem>
@@ -60,7 +60,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               <Text>
                 Ask Copilot to generate a query by describing the query in your words.
                 <br />
-                <Link href="">Learn more</Link>
+                <Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
               </Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
@@ -78,7 +78,7 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
               <Text>
                 AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
                 <br />
-                <Link href="">Read preview terms</Link>
+                <Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
               </Text>
             </Stack.Item>
             <Stack.Item align="center" className="text">
@@ -88,15 +88,16 @@ export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element =>
                 </StackItem>
                 <StackItem align="start">
                   <Text className="bold">
-                    Copilot currently works only a sample database
+                    Query Copilot works on a sample database.
                     <br />
                   </Text>
                 </StackItem>
               </Stack>
               <Text>
-                Copilot is setup on a sample database we have configured for you at no cost
+                While in Private Preview, Query Copilot is setup to work on sample database we have configured for you
+                at no cost.
                 <br />
-                <Link href="">Learn more</Link>
+                <Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
               </Text>
             </Stack.Item>
           </Stack>

src/Explorer/QueryCopilot/Modal/__snapshots__/QueryCopilotFeedbackModal.test.tsx.snap

@@ -118,14 +118,16 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -271,14 +273,16 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -424,14 +428,16 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -577,14 +583,16 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -730,14 +738,16 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -883,14 +893,16 @@ exports[`Query Copilot Feedback Modal snapshot test should record user contact c
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -1036,14 +1048,16 @@ exports[`Query Copilot Feedback Modal snapshot test should record user contact c
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}
@@ -1189,14 +1203,16 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <StyledCheckboxBase
       checked={true}
@@ -1357,14 +1373,16 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
         }
       }
     >
-      By pressing submit, your feedback will be used to improve Microsoft products and services. IT admins for your organization will be able to view and manage your feedback data.
+      By pressing submit, your feedback will be used to improve Microsoft products and services. Please see the
        
       <StyledLinkBase
-        href=""
+        href="https://privacy.microsoft.com/privacystatement"
         target="_blank"
       >
         Privacy statement
       </StyledLinkBase>
+       
+      for more information.
     </Text>
     <Stack
       horizontal={true}

src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap

@@ -60,11 +60,16 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
       >
         <StackItem
           align="center"
+          style={
+            Object {
+              "textAlign": "center",
+            }
+          }
         >
           <Text
             className="title bold"
           >
-            Welcome to Copilot in CosmosDB
+            Welcome to Query Copilot for Azure Cosmos DB (Private Preview)
           </Text>
         </StackItem>
         <StackItem
@@ -88,7 +93,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
               <Text
                 className="bold"
               >
-                Let copilot do the work for you
+                Let Query Copilot do the work for you
                 <br />
               </Text>
             </StackItem>
@@ -97,7 +102,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
             Ask Copilot to generate a query by describing the query in your words.
             <br />
             <StyledLinkBase
-              href=""
+              href="http://aka.ms/cdb-copilot-learn-more"
             >
               Learn more
             </StyledLinkBase>
@@ -133,7 +138,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
             AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
             <br />
             <StyledLinkBase
-              href=""
+              href="http://aka.ms/cdb-copilot-preview-terms"
             >
               Read preview terms
             </StyledLinkBase>
@@ -160,16 +165,16 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
               <Text
                 className="bold"
               >
-                Copilot currently works only a sample database
+                Query Copilot works on a sample database.
                 <br />
               </Text>
             </StackItem>
           </Stack>
           <Text>
-            Copilot is setup on a sample database we have configured for you at no cost
+            While in Private Preview, Query Copilot is setup to work on sample database we have configured for you at no cost.
             <br />
             <StyledLinkBase
-              href=""
+              href="http://aka.ms/cdb-copilot-learn-more"
             >
               Learn more
             </StyledLinkBase>

src/Explorer/QueryCopilot/QueryCopilotTab.test.tsx

@@ -5,9 +5,7 @@ import { QueryCopilotTab } from "./QueryCopilotTab";
 
 describe("Query copilot tab snapshot test", () => {
   it("should render with initial input", () => {
-    const wrapper = shallow(
+    const wrapper = shallow(<QueryCopilotTab explorer={new Explorer()} />);
-      <QueryCopilotTab initialInput="Write a query to return all records in this table" explorer={new Explorer()} />
-    );
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -34,6 +34,8 @@ import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
 import { querySampleDocuments, submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/SamplePrompts/SamplePrompts";
 import { QueryResultSection } from "Explorer/Tabs/QueryTab/QueryResultSection";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -54,7 +56,6 @@ interface SuggestedPrompt {
 }
 
 interface QueryCopilotTabProps {
-  initialInput: string;
   explorer: Explorer;
 }
 
@@ -71,31 +72,50 @@ const promptStyles: IButtonStyles = {
   label: { fontWeight: 400, textAlign: "left", paddingLeft: 8 },
 };
 
-export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
+export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({ explorer }: QueryCopilotTabProps): JSX.Element => {
-  initialInput,
-  explorer,
-}: QueryCopilotTabProps): JSX.Element => {
-  const hideFeedbackModalForLikedQueries = useQueryCopilot((state) => state.hideFeedbackModalForLikedQueries);
-  const [userPrompt, setUserPrompt] = useState<string>(initialInput || "");
-  const [generatedQuery, setGeneratedQuery] = useState<string>("");
-  const [query, setQuery] = useState<string>("");
-  const [selectedQuery, setSelectedQuery] = useState<string>("");
-  const [isGeneratingQuery, setIsGeneratingQuery] = useState<boolean>(false);
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  const [likeQuery, setLikeQuery] = useState<boolean>();
-  const [dislikeQuery, setDislikeQuery] = useState<boolean>();
-  const [showCallout, setShowCallout] = useState<boolean>(false);
-  const [showSamplePrompts, setShowSamplePrompts] = useState<boolean>(false);
-  const [queryIterator, setQueryIterator] = useState<MinimalQueryIterator>();
-  const [queryResults, setQueryResults] = useState<QueryResults>();
-  const [errorMessage, setErrorMessage] = useState<string>("");
   const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
   const inputEdited = useRef(false);
-  const [isSamplePromptsOpen, setIsSamplePromptsOpen] = useState<boolean>(false);
+  const {
-  const [showDeletePopup, setShowDeletePopup] = useState<boolean>(false);
+    hideFeedbackModalForLikedQueries,
-  const [showFeedbackBar, setShowFeedbackBar] = useState<boolean>(false);
+    userPrompt,
-  const [showCopyPopup, setshowCopyPopup] = useState<boolean>(false);
+    setUserPrompt,
-  const [showErrorMessageBar, setShowErrorMessageBar] = useState<boolean>(false);
+    generatedQuery,
+    setGeneratedQuery,
+    query,
+    setQuery,
+    selectedQuery,
+    setSelectedQuery,
+    isGeneratingQuery,
+    setIsGeneratingQuery,
+    isExecuting,
+    setIsExecuting,
+    likeQuery,
+    setLikeQuery,
+    dislikeQuery,
+    setDislikeQuery,
+    showCallout,
+    setShowCallout,
+    showSamplePrompts,
+    setShowSamplePrompts,
+    queryIterator,
+    setQueryIterator,
+    queryResults,
+    setQueryResults,
+    errorMessage,
+    setErrorMessage,
+    isSamplePromptsOpen,
+    setIsSamplePromptsOpen,
+    showDeletePopup,
+    setShowDeletePopup,
+    showFeedbackBar,
+    setShowFeedbackBar,
+    showCopyPopup,
+    setshowCopyPopup,
+    showErrorMessageBar,
+    setShowErrorMessageBar,
+    generatedQueryComments,
+    setGeneratedQueryComments,
+  } = useQueryCopilot();
 
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
@@ -170,10 +190,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
         userPrompt: userPrompt,
       };
       setShowDeletePopup(false);
+      useQueryCopilot.getState().refreshCorrelationId();
       const response = await fetch("https://copilotorchestrater.azurewebsites.net/generateSQLQuery", {
         method: "POST",
         headers: {
           "content-type": "application/json",
+          "x-ms-correlationid": useQueryCopilot.getState().correlationId,
         },
         body: JSON.stringify(payload),
       });
@@ -188,6 +210,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
           query += generateSQLQueryResponse.sql;
           setQuery(query);
           setGeneratedQuery(generateSQLQueryResponse.sql);
+          setGeneratedQueryComments(generateSQLQueryResponse.explanation);
           setShowErrorMessageBar(false);
         }
       } else {
@@ -208,6 +231,13 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   };
 
   const onExecuteQueryClick = async (): Promise<void> => {
+    traceStart(Action.ExecuteQueryGeneratedFromQueryCopilot, {
+      correlationId: useQueryCopilot.getState().correlationId,
+      userPrompt: userPrompt,
+      generatedQuery: generatedQuery,
+      generatedQueryComments: generatedQueryComments,
+      executedQuery: selectedQuery || query,
+    });
     const queryToExecute = selectedQuery || query;
     const queryIterator = querySampleDocuments(queryToExecute, {
       enableCrossPartitionQuery: shouldEnableCrossPartitionKey(),
@@ -233,8 +263,15 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       setQueryResults(queryResults);
       setErrorMessage("");
       setShowErrorMessageBar(false);
+      traceSuccess(Action.ExecuteQueryGeneratedFromQueryCopilot, {
+        correlationId: useQueryCopilot.getState().correlationId,
+      });
     } catch (error) {
       const errorMessage = getErrorMessage(error);
+      traceFailure(Action.ExecuteQueryGeneratedFromQueryCopilot, {
+        correlationId: useQueryCopilot.getState().correlationId,
+        errorMessage: errorMessage,
+      });
       setErrorMessage(errorMessage);
       handleError(errorMessage, "executeQueryCopilotTab");
       useTabs.getState().setIsQueryErrorThrown(true);
@@ -281,9 +318,10 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
     return [executeQueryBtn, saveQueryBtn];
   };
   const showTeachingBubble = (): void => {
-    if (!inputEdited.current) {
+    const shouldShowTeachingBubble = !inputEdited.current && userPrompt.trim() === "";
+    if (shouldShowTeachingBubble) {
       setTimeout(() => {
-        if (!inputEdited.current) {
+        if (shouldShowTeachingBubble) {
           toggleCopilotTeachingBubbleVisible();
           inputEdited.current = true;
         }
@@ -297,21 +335,24 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
     setShowCallout(false);
   };
 
+  const startGenerateQueryProcess = () => {
+    updateHistories();
+    generateSQLQuery();
+    resetButtonState();
+  };
+
   React.useEffect(() => {
     useCommandBar.getState().setContextButtons(getCommandbarButtons());
   }, [query, selectedQuery]);
 
   React.useEffect(() => {
-    if (initialInput) {
-      generateSQLQuery();
-    }
     showTeachingBubble();
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
   return (
     <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
-      <div style={{ overflowY: "auto", height: "100%" }}>
+      <div style={isGeneratingQuery ? { height: "100%" } : { overflowY: "auto", height: "100%" }}>
         <Stack horizontal verticalAlign="center">
           <Image src={CopilotIcon} />
           <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
@@ -325,6 +366,11 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
               inputEdited.current = true;
               setShowSamplePrompts(true);
             }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                startGenerateQueryProcess();
+              }
+            }}
             style={{ lineHeight: 30 }}
             styles={{ root: { width: "95%" } }}
             disabled={isGeneratingQuery}
@@ -357,11 +403,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
             iconProps={{ iconName: "Send" }}
             disabled={isGeneratingQuery || !userPrompt.trim()}
             style={{ marginLeft: 8 }}
-            onClick={() => {
+            onClick={() => startGenerateQueryProcess()}
-              updateHistories();
-              generateSQLQuery();
-              resetButtonState();
-            }}
           />
           {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
           {showSamplePrompts && (
@@ -453,7 +495,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
                       }}
                     >
                       Learn about{" "}
-                      <Link target="_blank" href="">
+                      <Link target="_blank" href="http://aka.ms/cdb-copilot-writing">
                         writing effective prompts
                       </Link>
                     </Text>
@@ -467,7 +509,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
         <Stack style={{ marginTop: 8, marginBottom: 24 }}>
           <Text style={{ fontSize: 12 }}>
             AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-            <Link href="" target="_blank">
+            <Link href="http://aka.ms/cdb-copilot-preview-terms" target="_blank">
               Read preview terms
             </Link>
             {showErrorMessageBar && (
@@ -490,7 +532,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
                 target="#likeBtn"
                 onDismiss={() => {
                   setShowCallout(false);
-                  submitFeedback({ generatedQuery, likeQuery, description: "", userPrompt: userPrompt });
+                  submitFeedback({
+                    generatedQuery: generatedQuery,
+                    likeQuery: likeQuery,
+                    description: "",
+                    userPrompt: userPrompt,
+                  });
                 }}
                 directionalHint={DirectionalHint.topCenter}
               >

src/Explorer/QueryCopilot/QueryCopilotUtilities.test.tsx

@@ -0,0 +1,225 @@
+import { FeedOptions } from "@azure/cosmos";
+import { QueryCopilotSampleContainerSchema } from "Common/Constants";
+import { handleError } from "Common/ErrorHandlingUtils";
+import { sampleDataClient } from "Common/SampleDataClient";
+import * as commonUtils from "Common/dataAccess/queryDocuments";
+import DocumentId from "Explorer/Tree/DocumentId";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import { querySampleDocuments, readSampleDocument, submitFeedback } from "./QueryCopilotUtilities";
+jest.mock("Explorer/Tree/DocumentId", () => {
+  return jest.fn().mockImplementation(() => {
+    return {
+      id: jest.fn(),
+      loadDocument: jest.fn(),
+    };
+  });
+});
+
+jest.mock("Utils/NotificationConsoleUtils", () => ({
+  logConsoleProgress: jest.fn(),
+  logConsoleError: jest.fn(),
+}));
+
+jest.mock("@azure/cosmos", () => ({
+  FeedOptions: jest.fn(),
+  QueryIterator: jest.fn(),
+}));
+
+jest.mock("Common/ErrorHandlingUtils", () => ({
+  handleError: jest.fn(),
+}));
+
+jest.mock("Utils/NotificationConsoleUtils", () => ({
+  logConsoleProgress: jest.fn().mockReturnValue((): void => undefined),
+}));
+
+jest.mock("Common/dataAccess/queryDocuments", () => ({
+  getCommonQueryOptions: jest.fn((options) => options),
+}));
+
+jest.mock("Common/SampleDataClient");
+
+jest.mock("node-fetch");
+
+describe("QueryCopilotUtilities", () => {
+  beforeEach(() => jest.clearAllMocks());
+  describe("submitFeedback", () => {
+    const payload = {
+      like: "like",
+      generatedSql: "GeneratedQuery",
+      userPrompt: "UserPrompt",
+      description: "Description",
+      contact: "Contact",
+      containerSchema: QueryCopilotSampleContainerSchema,
+    };
+
+    it("should call fetch with the payload with like", async () => {
+      const mockFetch = jest.fn().mockResolvedValueOnce({});
+
+      globalThis.fetch = mockFetch;
+      useQueryCopilot.getState().refreshCorrelationId();
+
+      await submitFeedback({
+        likeQuery: true,
+        generatedQuery: "GeneratedQuery",
+        userPrompt: "UserPrompt",
+        description: "Description",
+        contact: "Contact",
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://copilotorchestrater.azurewebsites.net/feedback",
+        expect.objectContaining({
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            "x-ms-correlationid": useQueryCopilot.getState().correlationId,
+          },
+        })
+      );
+
+      const actualBody = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(actualBody).toEqual(payload);
+    });
+
+    it("should call fetch with the payload with unlike and empty parameters", async () => {
+      payload.like = "dislike";
+      payload.description = "";
+      payload.contact = "";
+      const mockFetch = jest.fn().mockResolvedValueOnce({});
+
+      globalThis.fetch = mockFetch;
+      useQueryCopilot.getState().refreshCorrelationId();
+
+      await submitFeedback({
+        likeQuery: false,
+        generatedQuery: "GeneratedQuery",
+        userPrompt: "UserPrompt",
+        description: undefined,
+        contact: undefined,
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://copilotorchestrater.azurewebsites.net/feedback",
+        expect.objectContaining({
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            "x-ms-correlationid": useQueryCopilot.getState().correlationId,
+          },
+        })
+      );
+
+      const actualBody = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(actualBody).toEqual(payload);
+    });
+
+    it("should handle errors and call handleError", async () => {
+      globalThis.fetch = jest.fn().mockRejectedValueOnce(new Error("Mock error"));
+
+      await submitFeedback({
+        likeQuery: true,
+        generatedQuery: "GeneratedQuery",
+        userPrompt: "UserPrompt",
+        description: "Description",
+        contact: "Contact",
+      }).catch((error) => {
+        expect(error.message).toEqual("Mock error");
+      });
+
+      expect(handleError).toHaveBeenCalledWith(new Error("Mock error"), expect.any(String));
+    });
+  });
+
+  describe("querySampleDocuments", () => {
+    (sampleDataClient as jest.Mock).mockReturnValue({
+      database: jest.fn().mockReturnValue({
+        container: jest.fn().mockReturnValue({
+          items: {
+            query: jest.fn().mockReturnValue([]),
+          },
+        }),
+      }),
+    });
+
+    it("calls getCommonQueryOptions with the provided options", () => {
+      const query = "sample query";
+      const options: FeedOptions = { maxItemCount: 10 };
+
+      querySampleDocuments(query, options);
+
+      expect(commonUtils.getCommonQueryOptions).toHaveBeenCalledWith(options);
+    });
+
+    it("returns the result of items.query method", () => {
+      const query = "sample query";
+      const options: FeedOptions = { maxItemCount: 10 };
+      const mockResult = [
+        { id: 1, name: "Document 1" },
+        { id: 2, name: "Document 2" },
+      ];
+
+      // Mock the items.query method to return the mockResult
+      (sampleDataClient().database("CopilotSampleDb").container("SampleContainer").items
+        .query as jest.Mock).mockReturnValue(mockResult);
+
+      const result = querySampleDocuments(query, options);
+
+      expect(result).toEqual(mockResult);
+    });
+  });
+
+  describe("readSampleDocument", () => {
+    it("should call the read method with the correct parameters", async () => {
+      (sampleDataClient as jest.Mock).mockReturnValue({
+        database: jest.fn().mockReturnValue({
+          container: jest.fn().mockReturnValue({
+            item: jest.fn().mockReturnValue({
+              read: jest.fn().mockResolvedValue({
+                resource: {},
+              }),
+            }),
+          }),
+        }),
+      });
+
+      const documentId = new DocumentId(null, "DocumentId", []);
+      const expectedResponse = {};
+
+      const result = await readSampleDocument(documentId);
+
+      expect(sampleDataClient).toHaveBeenCalled();
+      expect(sampleDataClient().database).toHaveBeenCalledWith("CopilotSampleDb");
+      expect(sampleDataClient().database("CopilotSampleDb").container).toHaveBeenCalledWith("SampleContainer");
+      expect(
+        sampleDataClient().database("CopilotSampleDb").container("SampleContainer").item("DocumentId", undefined).read
+      ).toHaveBeenCalled();
+      expect(result).toEqual(expectedResponse);
+    });
+
+    it("should handle an error and re-throw it", async () => {
+      (sampleDataClient as jest.Mock).mockReturnValue({
+        database: jest.fn().mockReturnValue({
+          container: jest.fn().mockReturnValue({
+            item: jest.fn().mockReturnValue({
+              read: jest.fn().mockRejectedValue(new Error("Mock error")),
+            }),
+          }),
+        }),
+      });
+
+      const errorMock = new Error("Mock error");
+      const documentId = new DocumentId(null, "DocumentId", []);
+
+      await expect(readSampleDocument(documentId)).rejects.toStrictEqual(errorMock);
+
+      expect(sampleDataClient).toHaveBeenCalled();
+      expect(sampleDataClient().database).toHaveBeenCalledWith("CopilotSampleDb");
+      expect(sampleDataClient().database("CopilotSampleDb").container).toHaveBeenCalledWith("SampleContainer");
+      expect(
+        sampleDataClient().database("CopilotSampleDb").container("SampleContainer").item("DocumentId", undefined).read
+      ).toHaveBeenCalled();
+      expect(handleError).toHaveBeenCalledWith(errorMock, "ReadDocument", expect.any(String));
+    });
+  });
+});

src/Explorer/QueryCopilot/QueryCopilotUtilities.ts

@@ -10,6 +10,7 @@ import { getPartitionKeyValue } from "Common/dataAccess/getPartitionKeyValue";
 import { getCommonQueryOptions } from "Common/dataAccess/queryDocuments";
 import DocumentId from "Explorer/Tree/DocumentId";
 import { logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 
 interface FeedbackParams {
   likeQuery: boolean;
@@ -35,6 +36,7 @@ export const submitFeedback = async (params: FeedbackParams): Promise<void> => {
       method: "POST",
       headers: {
         "content-type": "application/json",
+        "x-ms-correlationid": useQueryCopilot.getState().correlationId,
       },
       body: JSON.stringify(payload),
     });

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

@@ -54,6 +54,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
         id="naturalLanguageInput"
         onChange={[Function]}
         onClick={[Function]}
+        onKeyDown={[Function]}
         style={
           Object {
             "lineHeight": 30,
@@ -66,10 +67,10 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
             },
           }
         }
-        value="Write a query to return all records in this table"
+        value=""
       />
       <CustomizedIconButton
-        disabled={false}
+        disabled={true}
         iconProps={
           Object {
             "iconName": "Send",
@@ -101,7 +102,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
         AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.
          
         <StyledLinkBase
-          href=""
+          href="http://aka.ms/cdb-copilot-preview-terms"
           target="_blank"
         >
           Read preview terms

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -97,6 +97,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           () => this.setState({}),
           (state) => state.showResetPasswordBubble
         ),
+      },
+      {
+        dispose: useDatabases.subscribe(
+          () => this.setState({}),
+          (state) => state.sampleDataResourceTokenCollection
+        ),
       }
     );
   }
@@ -107,7 +113,11 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   };
 
   private getSplashScreenButtons = (): JSX.Element => {
-    if (userContext.features.enableCopilot && userContext.apiType === "SQL") {
+    if (
+      useDatabases.getState().sampleDataResourceTokenCollection &&
+      userContext.features.enableCopilot &&
+      userContext.apiType === "SQL"
+    ) {
       return (
         <Stack style={{ width: "66%", cursor: "pointer", margin: "40px auto" }} tokens={{ childrenGap: 16 }}>
           <Stack horizontal tokens={{ childrenGap: 16 }}>
@@ -137,7 +147,10 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               description={
                 "Copilot is your AI buddy that helps you write Azure Cosmos DB queries like a pro. Try it using our sample data set now!"
               }
-              onClick={() => useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot)}
+              onClick={() => {
+                useTabs.getState().openAndActivateReactTab(ReactTabKind.QueryCopilot);
+                traceOpen(Action.OpenQueryCopilotFromSplashScreen, { apiType: userContext.apiType });
+              }}
             />
             <SplashScreenButton
               imgSrc={ConnectIcon}
@@ -246,8 +259,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <div className="splashScreen">
-              <div
+              <h1
                 className="title"
+                role="heading"
                 aria-label={
                   userContext.apiType === "Postgres"
                     ? "Welcome to Azure Cosmos DB for PostgreSQL"
@@ -258,7 +272,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                   ? "Welcome to Azure Cosmos DB for PostgreSQL"
                   : "Welcome to Azure Cosmos DB"}
                 <FeaturePanelLauncher />
-              </div>
+              </h1>
               <div className="subtitle">
                 {userContext.apiType === "Postgres"
                   ? "Get started with our sample datasets, documentation, and additional tools."

src/Explorer/Tabs/Tabs.tsx

@@ -9,6 +9,7 @@ import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
 import { userContext } from "UserContext";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -158,6 +159,7 @@ const CloseButton = ({
     onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       event.stopPropagation();
       tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind);
+      tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates();
     }}
     tabIndex={active ? 0 : undefined}
     onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
@@ -251,7 +253,7 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
     case ReactTabKind.Quickstart:
       return <QuickstartTab explorer={explorer} />;
     case ReactTabKind.QueryCopilot:
-      return <QueryCopilotTab initialInput={useTabs.getState().queryCopilotTabInitialInput} explorer={explorer} />;
+      return <QueryCopilotTab explorer={explorer} />;
     default:
       throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
   }

src/Explorer/Tree/SampleDataTree.tsx

@@ -17,7 +17,7 @@ export const SampleDataTree = ({
   const buildSampleDataTree = (): TreeNode => {
     const updatedSampleTree: TreeNode = {
       label: sampleDataResourceTokenCollection.databaseId,
-      isExpanded: true,
+      isExpanded: false,
       iconSrc: CosmosDBIcon,
       className: "databaseHeader",
       children: [
@@ -47,6 +47,7 @@ export const SampleDataTree = ({
             {
               label: "Items",
               onClick: () => sampleDataResourceTokenCollection.onDocumentDBDocumentsClick(),
+              contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
               isSelected: () =>
                 useSelectedNode
                   .getState()

src/Platform/Hosted/extractFeatures.ts

@@ -36,6 +36,7 @@ export type Features = {
   readonly enableLegacyMongoShellV2Debug: boolean;
   readonly loadLegacyMongoShellFromBE: boolean;
   readonly enableCopilot: boolean;
+  readonly enableNPSSurvey: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -104,6 +105,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
     loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
     enableCopilot: "true" === get("enablecopilot"),
+    enableNPSSurvey: "true" === get("enablenpssurvey"),
   };
 }
 

src/Shared/Telemetry/TelemetryConstants.ts

@@ -131,6 +131,9 @@ export enum Action {
   LaunchUITour,
   CancelUITour,
   CompleteUITour,
+  OpenQueryCopilotFromSplashScreen,
+  OpenQueryCopilotFromNewQuery,
+  ExecuteQueryGeneratedFromQueryCopilot,
 }
 
 export const ActionModifiers = {

src/UserContext.ts

@@ -91,7 +91,7 @@ const userContext: UserContext = {
   collectionCreationDefaults: CollectionCreationDefaults,
 };
 
-function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
+export function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
   let createdAtMs: number = Date.parse(createdAt);
   if (isNaN(createdAtMs)) {
     createdAtMs = 0;

src/Utils/EndpointValidation.ts

@@ -38,7 +38,7 @@ function validateEndpointInternal(
   return valid;
 }
 
-export const allowedArmEndpoints: ReadonlyArray<string> = [
+export const defaultAllowedArmEndpoints: ReadonlyArray<string> = [
   "https://​management.azure.com",
   "https://​management.usgovcloudapi.net",
   "https://management.chinacloudapi.cn",
@@ -46,7 +46,7 @@ export const allowedArmEndpoints: ReadonlyArray<string> = [
 
 export const allowedAadEndpoints: ReadonlyArray<string> = ["https://login.microsoftonline.com/"];
 
-export const allowedBackendEndpoints: ReadonlyArray<string> = [
+export const defaultAllowedBackendEndpoints: ReadonlyArray<string> = [
   "https://main.documentdb.ext.azure.com",
   "https://main.documentdb.ext.azure.cn",
   "https://main.documentdb.ext.azure.us",

src/hooks/useQueryCopilot.ts

@@ -1,3 +1,6 @@
+import { MinimalQueryIterator } from "Common/IteratorUtilities";
+import { QueryResults } from "Contracts/ViewModels";
+import { guid } from "Explorer/Tables/Utilities";
 import create, { UseStore } from "zustand";
 
 interface QueryCopilotState {
@@ -6,20 +9,127 @@ interface QueryCopilotState {
   userPrompt: string;
   showFeedbackModal: boolean;
   hideFeedbackModalForLikedQueries: boolean;
+  correlationId: string;
+  query: string;
+  selectedQuery: string;
+  isGeneratingQuery: boolean;
+  isExecuting: boolean;
+  dislikeQuery: boolean | undefined;
+  showCallout: boolean;
+  showSamplePrompts: boolean;
+  queryIterator: MinimalQueryIterator | undefined;
+  queryResults: QueryResults | undefined;
+  errorMessage: string;
+  isSamplePromptsOpen: boolean;
+  showDeletePopup: boolean;
+  showFeedbackBar: boolean;
+  showCopyPopup: boolean;
+  showErrorMessageBar: boolean;
+  generatedQueryComments: string;
+
   openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) => void;
   closeFeedbackModal: () => void;
   setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) => void;
+  refreshCorrelationId: () => void;
+  setUserPrompt: (userPrompt: string) => void;
+  setQuery: (query: string) => void;
+  setGeneratedQuery: (generatedQuery: string) => void;
+  setSelectedQuery: (selectedQuery: string) => void;
+  setIsGeneratingQuery: (isGeneratingQuery: boolean) => void;
+  setIsExecuting: (isExecuting: boolean) => void;
+  setLikeQuery: (likeQuery: boolean) => void;
+  setDislikeQuery: (dislikeQuery: boolean | undefined) => void;
+  setShowCallout: (showCallout: boolean) => void;
+  setShowSamplePrompts: (showSamplePrompts: boolean) => void;
+  setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => void;
+  setQueryResults: (queryResults: QueryResults | undefined) => void;
+  setErrorMessage: (errorMessage: string) => void;
+  setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => void;
+  setShowDeletePopup: (showDeletePopup: boolean) => void;
+  setShowFeedbackBar: (showFeedbackBar: boolean) => void;
+  setshowCopyPopup: (showCopyPopup: boolean) => void;
+  setShowErrorMessageBar: (showErrorMessageBar: boolean) => void;
+  setGeneratedQueryComments: (generatedQueryComments: string) => void;
+  resetQueryCopilotStates: () => void;
 }
 
-export const useQueryCopilot: UseStore<QueryCopilotState> = create((set) => ({
+type QueryCopilotStore = UseStore<QueryCopilotState>;
+
+export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   generatedQuery: "",
   likeQuery: false,
   userPrompt: "",
   showFeedbackModal: false,
   hideFeedbackModalForLikedQueries: false,
+  correlationId: "",
+  query: "",
+  selectedQuery: "",
+  isGeneratingQuery: false,
+  isExecuting: false,
+  dislikeQuery: undefined,
+  showCallout: false,
+  showSamplePrompts: false,
+  queryIterator: undefined,
+  queryResults: undefined,
+  errorMessage: "",
+  isSamplePromptsOpen: false,
+  showDeletePopup: false,
+  showFeedbackBar: false,
+  showCopyPopup: false,
+  showErrorMessageBar: false,
+  generatedQueryComments: "",
+
   openFeedbackModal: (generatedQuery: string, likeQuery: boolean, userPrompt: string) =>
     set({ generatedQuery, likeQuery, userPrompt, showFeedbackModal: true }),
   closeFeedbackModal: () => set({ generatedQuery: "", likeQuery: false, userPrompt: "", showFeedbackModal: false }),
   setHideFeedbackModalForLikedQueries: (hideFeedbackModalForLikedQueries: boolean) =>
     set({ hideFeedbackModalForLikedQueries }),
+  refreshCorrelationId: () => set({ correlationId: guid() }),
+  setUserPrompt: (userPrompt: string) => set({ userPrompt }),
+  setQuery: (query: string) => set({ query }),
+  setGeneratedQuery: (generatedQuery: string) => set({ generatedQuery }),
+  setSelectedQuery: (selectedQuery: string) => set({ selectedQuery }),
+  setIsGeneratingQuery: (isGeneratingQuery: boolean) => set({ isGeneratingQuery }),
+  setIsExecuting: (isExecuting: boolean) => set({ isExecuting }),
+  setLikeQuery: (likeQuery: boolean) => set({ likeQuery }),
+  setDislikeQuery: (dislikeQuery: boolean | undefined) => set({ dislikeQuery }),
+  setShowCallout: (showCallout: boolean) => set({ showCallout }),
+  setShowSamplePrompts: (showSamplePrompts: boolean) => set({ showSamplePrompts }),
+  setQueryIterator: (queryIterator: MinimalQueryIterator | undefined) => set({ queryIterator }),
+  setQueryResults: (queryResults: QueryResults | undefined) => set({ queryResults }),
+  setErrorMessage: (errorMessage: string) => set({ errorMessage }),
+  setIsSamplePromptsOpen: (isSamplePromptsOpen: boolean) => set({ isSamplePromptsOpen }),
+  setShowDeletePopup: (showDeletePopup: boolean) => set({ showDeletePopup }),
+  setShowFeedbackBar: (showFeedbackBar: boolean) => set({ showFeedbackBar }),
+  setshowCopyPopup: (showCopyPopup: boolean) => set({ showCopyPopup }),
+  setShowErrorMessageBar: (showErrorMessageBar: boolean) => set({ showErrorMessageBar }),
+  setGeneratedQueryComments: (generatedQueryComments: string) => set({ generatedQueryComments }),
+
+  resetQueryCopilotStates: () => {
+    set((state) => ({
+      ...state,
+      generatedQuery: "",
+      likeQuery: false,
+      userPrompt: "",
+      showFeedbackModal: false,
+      hideFeedbackModalForLikedQueries: false,
+      correlationId: "",
+      query: "",
+      selectedQuery: "",
+      isGeneratingQuery: false,
+      isExecuting: false,
+      dislikeQuery: undefined,
+      showCallout: false,
+      showSamplePrompts: false,
+      queryIterator: undefined,
+      queryResults: undefined,
+      errorMessage: "",
+      isSamplePromptsOpen: false,
+      showDeletePopup: false,
+      showFeedbackBar: false,
+      showCopyPopup: false,
+      showErrorMessageBar: false,
+      generatedQueryComments: "",
+    }));
+  },
 }));