[Query Copilot] Scrollable Copilot tab, improved history and minor fixes (#1536)

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

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -44,7 +44,6 @@ 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 XErrorMessage from "../../../images/X-errorMessage.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import { useTabs } from "../../hooks/useTabs";
@@ -122,12 +121,12 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   };
 
   const cachedHistoriesString = localStorage.getItem(`${userContext.databaseAccount?.id}-queryCopilotHistories`);
-  const cachedHistories = cachedHistoriesString?.split(",");
+  const cachedHistories = cachedHistoriesString?.split("|");
   const [histories, setHistories] = useState<string[]>(cachedHistories || []);
   const suggestedPrompts: SuggestedPrompt[] = [
-    { id: 1, text: "Give me all customers whose names start with C" },
-    { id: 2, text: "Show me all customers" },
-    { id: 3, text: "Show me all customers who bought a bike in 2019" },
+    { id: 1, text: 'Show all products that have the word "ultra" in the name or description' },
+    { id: 2, text: "What are all of the possible categories for the products, and their counts?" },
+    { id: 3, text: 'Show me all products that have been reviewed by someone with a username that contains "bob"' },
   ];
   const [filteredHistories, setFilteredHistories] = useState<string[]>(histories);
   const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState<SuggestedPrompt[]>(suggestedPrompts);
@@ -149,9 +148,16 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   };
 
   const updateHistories = (): void => {
-    const newHistories = histories.length < 3 ? [userPrompt, ...histories] : [userPrompt, histories[1], histories[2]];
+    const formattedUserPrompt = userPrompt.replace(/\s+/g, " ").trim();
+    const existingHistories = histories.map((history) => history.replace(/\s+/g, " ").trim());
+
+    const updatedHistories = existingHistories.filter(
+      (history) => history.toLowerCase() !== formattedUserPrompt.toLowerCase()
+    );
+    const newHistories = [formattedUserPrompt, ...updatedHistories.slice(0, 2)];
+
     setHistories(newHistories);
-    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join(","));
+    localStorage.setItem(`${userContext.databaseAccount.id}-queryCopilotHistories`, newHistories.join("|"));
   };
 
   const generateSQLQuery = async (): Promise<void> => {
@@ -260,16 +266,17 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       disabled: query?.trim() === "",
     };
 
-    const samplePromptsBtn = {
-      iconSrc: SamplePromptsIcon,
-      iconAlt: "Sample Prompts",
-      onCommandClick: () => setIsSamplePromptsOpen(true),
-      commandButtonLabel: "Sample Prompts",
-      ariaLabel: "Sample Prompts",
-      hasPopup: false,
-    };
+    // Sample Prompts temporary disabled due current design
+    // const samplePromptsBtn = {
+    //   iconSrc: SamplePromptsIcon,
+    //   iconAlt: "Sample Prompts",
+    //   onCommandClick: () => setIsSamplePromptsOpen(true),
+    //   commandButtonLabel: "Sample Prompts",
+    //   ariaLabel: "Sample Prompts",
+    //   hasPopup: false,
+    // };
 
-    return [executeQueryBtn, saveQueryBtn, samplePromptsBtn];
+    return [executeQueryBtn, saveQueryBtn];
   };
   const showTeachingBubble = (): void => {
     if (!inputEdited.current) {
@@ -301,7 +308,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   }, []);
 
   return (
-    <Stack className="tab-pane" style={{ padding: 24, width: "100%", height: "100%" }}>
+    <Stack className="tab-pane" style={{ padding: 24, width: "100%" }}>
+      <div style={{ overflowY: "auto", height: "100%" }}>
         <Stack horizontal verticalAlign="center">
           <Image src={CopilotIcon} />
           <Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
@@ -454,7 +462,8 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
           )}
         </Stack>
 
-      <Text style={{ marginTop: 8, marginBottom: 24, fontSize: 12 }}>
+        <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">
               Read preview terms
@@ -468,6 +477,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
               </Stack>
             )}
           </Text>
+        </Stack>
 
         {showFeedbackBar && (
           <Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
@@ -556,7 +566,9 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
               error={errorMessage}
               queryResults={queryResults}
               isExecuting={isExecuting}
-            executeQueryDocumentsPage={(firstItemIndex: number) => queryDocumentsPerPage(firstItemIndex, queryIterator)}
+              executeQueryDocumentsPage={(firstItemIndex: number) =>
+                queryDocumentsPerPage(firstItemIndex, queryIterator)
+              }
             />
           </SplitterLayout>
         </Stack>
@@ -572,6 +584,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
           />
         )}
         <CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
+      </div>
     </Stack>
   );
 };

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

@@ -5,11 +5,18 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
   className="tab-pane"
   style={
     Object {
-      "height": "100%",
       "padding": 24,
       "width": "100%",
     }
   }
+>
+  <div
+    style={
+      Object {
+        "height": "100%",
+        "overflowY": "auto",
+      }
+    }
   >
     <Stack
       horizontal={true}
@@ -76,12 +83,18 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
         }
       />
     </Stack>
+    <Stack
+      style={
+        Object {
+          "marginBottom": 24,
+          "marginTop": 8,
+        }
+      }
+    >
       <Text
         style={
           Object {
             "fontSize": 12,
-        "marginBottom": 24,
-        "marginTop": 8,
           }
         }
       >
@@ -94,6 +107,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
           Read preview terms
         </StyledLinkBase>
       </Text>
+    </Stack>
     <Stack
       className="tabPaneContentContainer"
     >
@@ -133,5 +147,6 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
       setShowCopyPopup={[Function]}
       showCopyPopup={false}
     />
+  </div>
 </Stack>
 `;