From e984719991e7065870d6b8aef532da2106968bf0 Mon Sep 17 00:00:00 2001 From: Satyapriya Bai Date: Mon, 1 Jul 2024 13:17:27 +0530 Subject: [PATCH] reset. --- .../ThroughputInput/ThroughputInput.less | 12 +- .../QueryCopilot/QueryCopilotPromptbar.tsx | 747 ++++++++++-------- 2 files changed, 410 insertions(+), 349 deletions(-) diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less index 8ee973d83..3e36fbab1 100644 --- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less +++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less @@ -14,11 +14,17 @@ .throughputInputSpacing > :not(:last-child) { margin-bottom: @DefaultSpace; } + .capacitycalculator-link:focus { text-decoration: underline; outline-offset: 2px; } -.highlighted-buttonstyles { - outline: 1px dashed back; - background-color: #cccccc; + +.outlineNone{ + outline: none !important; } + +.copyQuery:focus::after, +.deleteQuery:focus::after { + outline: none !important; +} \ No newline at end of file diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx index e2e079d02..2bd61a916 100644 --- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx +++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx @@ -11,18 +11,16 @@ import { Link, MessageBar, MessageBarType, + ProgressIndicator, Separator, - Spinner, Stack, TeachingBubble, Text, TextField, } from "@fluentui/react"; -import { useBoolean } from "@fluentui/react-hooks"; import { HttpStatusCodes } from "Common/Constants"; import { handleError } from "Common/ErrorHandlingUtils"; import { createUri } from "Common/UrlUtility"; -import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal"; import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup"; import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup"; import { @@ -36,14 +34,12 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/ import { Action } from "Shared/Telemetry/TelemetryConstants"; import { userContext } from "UserContext"; import { useQueryCopilot } from "hooks/useQueryCopilot"; -import React, { useCallback, useRef, useState } from "react"; +import React, { 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"; @@ -72,7 +68,7 @@ export const QueryCopilotPromptbar: React.FC = ({ databaseId, containerId, }: QueryCopilotPromptProps): JSX.Element => { - const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false); + const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState(false); const inputEdited = useRef(false); const { openFeedbackModal, @@ -95,6 +91,8 @@ export const QueryCopilotPromptbar: React.FC = ({ setIsSamplePromptsOpen, showSamplePrompts, setShowSamplePrompts, + showPromptTeachingBubble, + setShowPromptTeachingBubble, showDeletePopup, setShowDeletePopup, showFeedbackBar, @@ -111,8 +109,6 @@ export const QueryCopilotPromptbar: React.FC = ({ errorMessage, } = useCopilotStore(); - const [focusedindex, setFocusedindex] = useState(-1); - const sampleProps: SamplePromptsProps = { isSamplePromptsOpen: isSamplePromptsOpen, setIsSamplePromptsOpen: setIsSamplePromptsOpen, @@ -218,12 +214,12 @@ export const QueryCopilotPromptbar: React.FC = ({ const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json(); if (response.ok) { if (generateSQLQueryResponse?.sql !== "N/A") { - let query = `-- **Prompt:** ${userPrompt}\r\n`; - if (generateSQLQueryResponse.explanation) { - query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`; - } - query += generateSQLQueryResponse.sql; - setQuery(query); + const queryExplanation = `-- **Explanation of query:** ${ + generateSQLQueryResponse.explanation ? generateSQLQueryResponse.explanation : "N/A" + }\r\n`; + const currentGeneratedQuery = queryExplanation + generateSQLQueryResponse.sql; + const lastQuery = generatedQuery && query ? `${query}\r\n` : ""; + setQuery(`${lastQuery}${currentGeneratedQuery}`); setGeneratedQuery(generateSQLQueryResponse.sql); setGeneratedQueryComments(generateSQLQueryResponse.explanation); setShowFeedbackBar(true); @@ -274,19 +270,9 @@ export const QueryCopilotPromptbar: React.FC = ({ } }; - const showTeachingBubble = (): void => { - if (!inputEdited.current) { - setTimeout(() => { - if (!inputEdited.current && !isWelcomModalVisible()) { - toggleCopilotTeachingBubbleVisible(); - inputEdited.current = true; - } - }, 30000); - } - }; - - const isWelcomModalVisible = (): boolean => { - return localStorage.getItem("hideWelcomeModal") !== "true"; + const toggleCopilotTeachingBubbleVisible = (visible: boolean): void => { + setCopilotTeachingBubbleVisible(visible); + setShowPromptTeachingBubble(visible); }; const clearFeedback = () => { @@ -317,55 +303,399 @@ export const QueryCopilotPromptbar: React.FC = ({ }; React.useEffect(() => { - showTeachingBubble(); useTabs.getState().setIsQueryErrorThrown(false); }, []); - const suggestionsnhistory = filteredHistories.concat(filteredSuggestedPrompts.map((item) => item.text)); - - const handlekeydown: React.KeyboardEventHandler = (e) => { - const { key } = e; - const nexIndexCount = 0; - if (key === "ArrowDown") { - nexIndexCount = (focusedindex + 1) % suggestionsnhistory.length; - } - if (key === "ArrowUp") { - nexIndexCount = (focusedindex + suggestionsnhistory.length - 1) % suggestionsnhistory.length; - } - if (key === "Enter") { - e.preventDefault(); - 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); - }; - return ( - - Copilot - Copilot + + + + { + inputEdited.current = true; + setShowSamplePrompts(true); + }} + onKeyDown={(e) => { + if (e.key === "Enter" && userPrompt) { + inputEdited.current = true; + startGenerateQueryProcess(); + } + }} + style={{ lineHeight: 30 }} + styles={{ + root: { width: "100%" }, + suffix: { + background: "none", + padding: 0, + }, + fieldGroup: { + borderRadius: 4, + borderColor: "#D1D1D1", + "::after": { + border: "inherit", + borderWidth: 2, + borderBottomColor: "#464FEB", + borderRadius: 4, + }, + }, + }} + disabled={isGeneratingQuery} + autoComplete="off" + placeholder="Ask a question in natural language and we’ll generate the query for you." + aria-labelledby="copilot-textfield-label" + onRenderSuffix={() => { + return ( + startGenerateQueryProcess()} + aria-label="Send" + /> + ); + }} + /> + {showPromptTeachingBubble && copilotTeachingBubbleVisible && ( + toggleCopilotTeachingBubbleVisible(false)} + hasSmallHeadline={true} + headline="Write a prompt" + > + Write a prompt here and Query Advisor will generate the query for you. You can also choose from our{" "} + { + setShowSamplePrompts(true); + toggleCopilotTeachingBubbleVisible(false); + }} + style={{ color: "white", fontWeight: 600 }} + > + sample prompts + {" "} + or write your own query + + )} + {showSamplePrompts && ( + setShowSamplePrompts(false)} + directionalHintFixed={true} + directionalHint={DirectionalHint.bottomLeftEdge} + alignTargetEdge={true} + gapSpace={4} + > + + {filteredHistories?.length > 0 && ( + + + Recent + + {filteredHistories.map((history, i) => ( + { + setUserPrompt(history); + setShowSamplePrompts(false); + inputEdited.current = true; + }} + onRenderIcon={() => } + styles={promptStyles} + > + {history} + + ))} + + )} + {filteredSuggestedPrompts?.length > 0 && ( + + + Suggested Prompts + + {filteredSuggestedPrompts.map((prompt) => ( + { + setUserPrompt(prompt.text); + setShowSamplePrompts(false); + inputEdited.current = true; + }} + onRenderIcon={() => } + styles={promptStyles} + > + {prompt.text} + + ))} + + )} + {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && ( + + + + Learn about{" "} + + writing effective prompts + + + + )} + + + )} + + {!isGeneratingQuery && ( + + {!showFeedbackBar && ( + + AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.{" "} + + Read preview terms + + {showErrorMessageBar && ( + + {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."} + + )} + {showInvalidQueryMessageBar && ( + + We were unable to generate a query based upon the prompt provided. Please modify the prompt and + try again. For examples of how to write a good prompt, please read + + this article. + {" "} + Our content guidelines can be found + + here. + + + )} + + )} + {showFeedbackBar && ( + + {userContext.feedbackPolicies?.policyAllowFeedback && ( + + Provide feedback + {showCallout && !hideFeedbackModalForLikedQueries && ( + { + setShowCallout(false); + SubmitFeedback({ + params: { + generatedQuery: generatedQuery, + likeQuery: likeQuery, + description: "", + userPrompt: userPrompt, + }, + explorer, + databaseId, + containerId, + mode: isSampleCopilotActive ? "Sample" : "User", + }); + }} + directionalHint={DirectionalHint.topCenter} + > + + Thank you. Need to give{" "} + { + setShowCallout(false); + openFeedbackModal(generatedQuery, true, userPrompt); + }} + > + more feedback? + + + + )} + { + setShowCallout(!likeQuery); + setLikeQuery(!likeQuery); + if (likeQuery === true) { + document.getElementById("likeStatus").innerHTML = "Unpressed"; + } + if (likeQuery === false) { + document.getElementById("likeStatus").innerHTML = "Liked"; + } + if (dislikeQuery) { + setDislikeQuery(!dislikeQuery); + } + }} + /> + { + let toggleStatusValue = "Unpressed"; + if (!dislikeQuery) { + openFeedbackModal(generatedQuery, false, userPrompt); + setLikeQuery(false); + toggleStatusValue = "Disliked"; + } + setDislikeQuery(!dislikeQuery); + setShowCallout(false); + document.getElementById("likeStatus").innerHTML = toggleStatusValue; + }} + /> + + + + )} + + Copy code + + { + setShowDeletePopup(true); + }} + iconProps={{ iconName: "Delete" }} + style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }} + styles={{ + root: { + backgroundColor: "inherit", + }, + }} + > + Clear editor + + + )} + + )} + {isGeneratingQuery && ( + + )} + { @@ -373,285 +703,10 @@ export const QueryCopilotPromptbar: React.FC = ({ clearFeedback(); resetMessageStates(); }} - styles={{ - root: { - marginLeft: "auto !important", - }, - }} ariaLabel="Close" + title="Close copilot" /> - - { - inputEdited.current = true; - setShowSamplePrompts(true); - }} - 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." - aria-labelledby="copilot-textfield-label" - /> - {copilotTeachingBubbleVisible && ( - - Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "} - { - setShowSamplePrompts(true); - toggleCopilotTeachingBubbleVisible(); - }} - style={{ color: "white", fontWeight: 600 }} - > - sample prompts - {" "} - or write your own query - - )} - { - startGenerateQueryProcess(); - setShowSamplePrompts(false); - }} - aria-label="Send" - /> -
- {isGeneratingQuery && } -
- {showSamplePrompts && ( - setShowSamplePrompts(false)} - directionalHintFixed={true} - directionalHint={DirectionalHint.bottomLeftEdge} - alignTargetEdge={true} - gapSpace={4} - > - - {filteredHistories?.length > 0 && ( - - - Recent - - {filteredHistories.map((history, i) => ( - { - setUserPrompt(history); - setShowSamplePrompts(false); - inputEdited.current = true; - }} - onRenderIcon={() => } - styles={promptStyles} - className={focusedindex === i ? "highlighted-buttonstyles" : "buttonstyles"} - > - {history} - - ))} - - )} - {filteredSuggestedPrompts?.length > 0 && ( - - - Suggested Prompts - - {filteredSuggestedPrompts.map((prompt, index) => ( - { - setUserPrompt(prompt.text); - setShowSamplePrompts(false); - inputEdited.current = true; - }} - onRenderIcon={() => } - styles={promptStyles} - className={focusedindex === filteredHistories.length + index ? "highlighted-buttonstyles" : ""} - > - {prompt.text} - - ))} - - )} - {(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && ( - - - - Learn about{" "} - - writing effective prompts - - - - )} - - - )} - - - - - AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.{" "} - - Read preview terms - - {showErrorMessageBar && ( - - {errorMessage ? errorMessage : "We ran into an error and were not able to execute query."} - - )} - {showInvalidQueryMessageBar && ( - - We were unable to generate a query based upon the prompt provided. Please modify the prompt and try again. - For examples of how to write a good prompt, please read - - this article. - {" "} - Our content guidelines can be found - - here. - - - )} - - - - {showFeedbackBar && ( - - Provide feedback on the query generated - {showCallout && !hideFeedbackModalForLikedQueries && ( - { - setShowCallout(false); - SubmitFeedback({ - params: { - generatedQuery: generatedQuery, - likeQuery: likeQuery, - description: "", - userPrompt: userPrompt, - }, - explorer, - databaseId, - containerId, - mode: isSampleCopilotActive ? "Sample" : "User", - }); - }} - directionalHint={DirectionalHint.topCenter} - > - - Thank you. Need to give{" "} - { - setShowCallout(false); - openFeedbackModal(generatedQuery, true, userPrompt); - }} - > - more feedback? - - - - )} - { - setShowCallout(!likeQuery); - setLikeQuery(!likeQuery); - if (dislikeQuery) { - setDislikeQuery(!dislikeQuery); - } - }} - /> - { - if (!dislikeQuery) { - openFeedbackModal(generatedQuery, false, userPrompt); - setLikeQuery(false); - } - setDislikeQuery(!dislikeQuery); - setShowCallout(false); - }} - aria-label="Dislike" - /> - - - Copy query - - { - setShowDeletePopup(true); - }} - iconProps={{ iconName: "Delete" }} - style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }} - > - Delete query - - - )} - {isSamplePromptsOpen && } {query !== "" && query.trim().length !== 0 && ( = ({ ); -}; +}; \ No newline at end of file