From 13fafb624e5e498a072b0d90f4209ee56b78ac33 Mon Sep 17 00:00:00 2001
From: Sampath <v-smokireddy@microsoft.com>
Date: Mon, 11 Dec 2023 23:44:54 +0530
Subject: [PATCH] keyboard navigation has been added to the suggestions under
 the querycopilot search bar

---
 .../ThroughputInput/ThroughputInput.less      |  8 ++-
 .../QueryCopilot/QueryCopilotPromptbar.tsx    | 62 ++++++++++++++++---
 2 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index 00c328077..8ee973d83 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -14,7 +14,11 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
-.capacitycalculator-link:focus{
+.capacitycalculator-link:focus {
   text-decoration: underline;
   outline-offset: 2px;
-}
\ No newline at end of file
+}
+.highlighted-buttonstyles {
+  outline: 1px dashed back;
+  background-color: #cccccc;
+}
diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 3cbd8ffed..75d26d4f4 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -36,13 +36,14 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
-import React, { useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import HintIcon from "../../../images/Hint.svg";
 import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
 import RecentIcon from "../../../images/Recent.svg";
 import errorIcon from "../../../images/close-black.svg";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { useTabs } from "../../hooks/useTabs";
+import "../Controls/ThroughputInput/ThroughputInput.less";
 import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
 import { useSelectedNode } from "../useSelectedNode";
 
@@ -110,6 +111,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     errorMessage,
   } = useCopilotStore();
 
+  const [focusedindex, setFocusedindex] = useState(-1);
+
   const sampleProps: SamplePromptsProps = {
     isSamplePromptsOpen: isSamplePromptsOpen,
     setIsSamplePromptsOpen: setIsSamplePromptsOpen,
@@ -308,6 +311,45 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     useTabs.getState().setIsQueryErrorThrown(false);
   }, []);
 
+  const suggestionsnhistory = filteredHistories.concat(filteredSuggestedPrompts.map((item) => item.text));
+
+  const handlekeydown: React.KeyboardEventHandler = (e) => {
+    const { key } = e;
+    let nexIndexCount = 0;
+    if (key === "ArrowDown") {
+      nexIndexCount = (focusedindex + 1) % suggestionsnhistory.length;
+      console.log(nexIndexCount);
+    }
+    if (key === "ArrowUp") {
+      nexIndexCount = (focusedindex + suggestionsnhistory.length - 1) % suggestionsnhistory.length;
+      console.log(nexIndexCount);
+    }
+    if (key === "Enter") {
+      e.preventDefault();
+      console.log(focusedindex);
+      handleSelection(focusedindex);
+    }
+    setFocusedindex(nexIndexCount);
+  };
+
+  const handleSelection = (selectedIndex: number) => {
+    const selecteditem = suggestionsnhistory[selectedIndex];
+    if (!selecteditem) return resetSearchComplete();
+    else {
+      handlepromptset(selecteditem);
+    }
+  };
+  const resetSearchComplete = useCallback(() => {
+    setFocusedindex(-1);
+    setShowSamplePrompts(false);
+  }, []);
+
+  const handlepromptset = (prompttext: string) => {
+    inputEdited.current = true;
+    setUserPrompt(prompttext);
+    console.log("prompt", userPrompt);
+  };
+
   return (
     <Stack className="copilot-prompt-pane" styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}>
       <Stack horizontal>
@@ -337,17 +379,14 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             inputEdited.current = true;
             setShowSamplePrompts(true);
           }}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && userPrompt) {
-              inputEdited.current = true;
-              startGenerateQueryProcess();
-            }
-          }}
+          onKeyDown={handlekeydown}
+          onFocus={() => setShowSamplePrompts(true)}
           style={{ lineHeight: 30 }}
           styles={{ root: { width: "95%" }, fieldGroup: { borderRadius: 6 } }}
           disabled={isGeneratingQuery}
           autoComplete="off"
           placeholder="Ask a question in natural language and we’ll generate the query for you."
+          tabIndex={0}
         />
         {copilotTeachingBubbleVisible && (
           <TeachingBubble
@@ -376,7 +415,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           iconProps={{ iconName: "Send" }}
           disabled={isGeneratingQuery || !userPrompt.trim()}
           style={{ marginLeft: 8 }}
-          onClick={() => startGenerateQueryProcess()}
+          onClick={() => {
+            startGenerateQueryProcess();
+            setShowSamplePrompts(false);
+          }}
         />
         {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
         {showSamplePrompts && (
@@ -415,6 +457,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       }}
                       onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
                       styles={promptStyles}
+                      className={focusedindex === i ? "highlighted-buttonstyles" : "buttonstyles"}
                     >
                       {history}
                     </DefaultButton>
@@ -435,7 +478,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   >
                     Suggested Prompts
                   </Text>
-                  {filteredSuggestedPrompts.map((prompt) => (
+                  {filteredSuggestedPrompts.map((prompt, index) => (
                     <DefaultButton
                       key={prompt.id}
                       onClick={() => {
@@ -445,6 +488,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       }}
                       onRenderIcon={() => <Image src={HintIcon} />}
                       styles={promptStyles}
+                      className={focusedindex === filteredHistories.length + index ? "highlighted-buttonstyles" : ""}
                     >
                       {prompt.text}
                     </DefaultButton>