diff --git a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx index 43f8ae6e8..dd9574b3b 100644 --- a/src/Explorer/QueryCopilot/QueryCopilotTab.tsx +++ b/src/Explorer/QueryCopilot/QueryCopilotTab.tsx @@ -12,9 +12,11 @@ import { Separator, Spinner, Stack, + TeachingBubble, Text, TextField, } from "@fluentui/react"; +import { useBoolean } from "@fluentui/react-hooks"; import { QueryCopilotSampleContainerId, QueryCopilotSampleContainerSchema, @@ -41,7 +43,7 @@ import { userContext } from "UserContext"; import { queryPagesUntilContentPresent } from "Utils/QueryUtils"; import { useQueryCopilot } from "hooks/useQueryCopilot"; import { useSidePanel } from "hooks/useSidePanel"; -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import SplitterLayout from "react-splitter-layout"; import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg"; import HintIcon from "../../../images/Hint.svg"; @@ -93,6 +95,8 @@ export const QueryCopilotTab: React.FC = ({ const [queryIterator, setQueryIterator] = useState(); const [queryResults, setQueryResults] = useState(); const [errorMessage, setErrorMessage] = useState(""); + const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false); + const inputEdited = useRef(false); const [isSamplePromptsOpen, setIsSamplePromptsOpen] = useState(false); const [showDeletePopup, setShowDeletePopup] = useState(false); const [showFeedbackBar, setShowFeedbackBar] = useState(false); @@ -134,6 +138,7 @@ export const QueryCopilotTab: React.FC = ({ const [filteredSuggestedPrompts, setFilteredSuggestedPrompts] = useState(suggestedPrompts); const handleUserPromptChange = (event: React.ChangeEvent) => { + inputEdited.current = true; const { value } = event.target; setUserPrompt(value); @@ -263,6 +268,16 @@ export const QueryCopilotTab: React.FC = ({ return [executeQueryBtn, saveQueryBtn, samplePromptsBtn]; }; + const showTeachingBubble = (): void => { + if (!inputEdited.current) { + setTimeout(() => { + if (!inputEdited.current) { + toggleCopilotTeachingBubbleVisible(); + inputEdited.current = true; + } + }, 30000); + } + }; const resetButtonState = () => { setDislikeQuery(false); @@ -274,6 +289,13 @@ export const QueryCopilotTab: React.FC = ({ useCommandBar.getState().setContextButtons(getCommandbarButtons()); }, [query, selectedQuery]); + React.useEffect(() => { + if (initialInput) { + generateSQLQuery(); + } + showTeachingBubble(); + }, []); + return ( @@ -285,12 +307,38 @@ export const QueryCopilotTab: React.FC = ({ id="naturalLanguageInput" value={userPrompt} onChange={handleUserPromptChange} + onClick={() => { + inputEdited.current = true; + setShowSamplePrompts(true); + }} style={{ lineHeight: 30 }} styles={{ root: { width: "95%" } }} disabled={isGeneratingQuery} autoComplete="off" - onClick={() => setShowSamplePrompts(true)} /> + {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 + + )}