mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-02-16 17:25:58 +00:00
reset.
This commit is contained in:
Satyapriya Bai
parent
f6ebb20ff1
commit
e984719991
@ -14,11 +14,17 @@
|
|||||||
.throughputInputSpacing > :not(:last-child) {
|
.throughputInputSpacing > :not(:last-child) {
|
||||||
margin-bottom: @DefaultSpace;
|
margin-bottom: @DefaultSpace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.capacitycalculator-link:focus {
|
.capacitycalculator-link:focus {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
.highlighted-buttonstyles {
|
|
||||||
outline: 1px dashed back;
|
.outlineNone{
|
||||||
background-color: #cccccc;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copyQuery:focus::after,
|
||||||
|
.deleteQuery:focus::after {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
@ -11,18 +11,16 @@ import {
|
|||||||
Link,
|
Link,
|
||||||
MessageBar,
|
MessageBar,
|
||||||
MessageBarType,
|
MessageBarType,
|
||||||
|
ProgressIndicator,
|
||||||
Separator,
|
Separator,
|
||||||
Spinner,
|
|
||||||
Stack,
|
Stack,
|
||||||
TeachingBubble,
|
TeachingBubble,
|
||||||
Text,
|
Text,
|
||||||
TextField,
|
TextField,
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import { useBoolean } from "@fluentui/react-hooks";
|
|
||||||
import { HttpStatusCodes } from "Common/Constants";
|
import { HttpStatusCodes } from "Common/Constants";
|
||||||
import { handleError } from "Common/ErrorHandlingUtils";
|
import { handleError } from "Common/ErrorHandlingUtils";
|
||||||
import { createUri } from "Common/UrlUtility";
|
import { createUri } from "Common/UrlUtility";
|
||||||
import { WelcomeModal } from "Explorer/QueryCopilot/Modal/WelcomeModal";
|
|
||||||
import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
|
import { CopyPopup } from "Explorer/QueryCopilot/Popup/CopyPopup";
|
||||||
import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
|
import { DeletePopup } from "Explorer/QueryCopilot/Popup/DeletePopup";
|
||||||
import {
|
import {
|
||||||
@ -36,14 +34,12 @@ import { SamplePrompts, SamplePromptsProps } from "Explorer/QueryCopilot/Shared/
|
|||||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
import { userContext } from "UserContext";
|
import { userContext } from "UserContext";
|
||||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
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 HintIcon from "../../../images/Hint.svg";
|
||||||
import CopilotIcon from "../../../images/QueryCopilotNewLogo.svg";
|
|
||||||
import RecentIcon from "../../../images/Recent.svg";
|
import RecentIcon from "../../../images/Recent.svg";
|
||||||
import errorIcon from "../../../images/close-black.svg";
|
import errorIcon from "../../../images/close-black.svg";
|
||||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||||
import { useTabs } from "../../hooks/useTabs";
|
import { useTabs } from "../../hooks/useTabs";
|
||||||
import "../Controls/ThroughputInput/ThroughputInput.less";
|
|
||||||
import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
|
import { useCopilotStore } from "../QueryCopilot/QueryCopilotContext";
|
||||||
import { useSelectedNode } from "../useSelectedNode";
|
import { useSelectedNode } from "../useSelectedNode";
|
||||||
|
|
||||||
@ -72,7 +68,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
databaseId,
|
databaseId,
|
||||||
containerId,
|
containerId,
|
||||||
}: QueryCopilotPromptProps): JSX.Element => {
|
}: QueryCopilotPromptProps): JSX.Element => {
|
||||||
const [copilotTeachingBubbleVisible, { toggle: toggleCopilotTeachingBubbleVisible }] = useBoolean(false);
|
const [copilotTeachingBubbleVisible, setCopilotTeachingBubbleVisible] = useState<boolean>(false);
|
||||||
const inputEdited = useRef(false);
|
const inputEdited = useRef(false);
|
||||||
const {
|
const {
|
||||||
openFeedbackModal,
|
openFeedbackModal,
|
||||||
@ -95,6 +91,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
setIsSamplePromptsOpen,
|
setIsSamplePromptsOpen,
|
||||||
showSamplePrompts,
|
showSamplePrompts,
|
||||||
setShowSamplePrompts,
|
setShowSamplePrompts,
|
||||||
|
showPromptTeachingBubble,
|
||||||
|
setShowPromptTeachingBubble,
|
||||||
showDeletePopup,
|
showDeletePopup,
|
||||||
setShowDeletePopup,
|
setShowDeletePopup,
|
||||||
showFeedbackBar,
|
showFeedbackBar,
|
||||||
@ -111,8 +109,6 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
errorMessage,
|
errorMessage,
|
||||||
} = useCopilotStore();
|
} = useCopilotStore();
|
||||||
|
|
||||||
const [focusedindex, setFocusedindex] = useState(-1);
|
|
||||||
|
|
||||||
const sampleProps: SamplePromptsProps = {
|
const sampleProps: SamplePromptsProps = {
|
||||||
isSamplePromptsOpen: isSamplePromptsOpen,
|
isSamplePromptsOpen: isSamplePromptsOpen,
|
||||||
setIsSamplePromptsOpen: setIsSamplePromptsOpen,
|
setIsSamplePromptsOpen: setIsSamplePromptsOpen,
|
||||||
@ -218,12 +214,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
|
const generateSQLQueryResponse: GenerateSQLQueryResponse = await response?.json();
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
if (generateSQLQueryResponse?.sql !== "N/A") {
|
if (generateSQLQueryResponse?.sql !== "N/A") {
|
||||||
let query = `-- **Prompt:** ${userPrompt}\r\n`;
|
const queryExplanation = `-- **Explanation of query:** ${
|
||||||
if (generateSQLQueryResponse.explanation) {
|
generateSQLQueryResponse.explanation ? generateSQLQueryResponse.explanation : "N/A"
|
||||||
query += `-- **Explanation of query:** ${generateSQLQueryResponse.explanation}\r\n`;
|
}\r\n`;
|
||||||
}
|
const currentGeneratedQuery = queryExplanation + generateSQLQueryResponse.sql;
|
||||||
query += generateSQLQueryResponse.sql;
|
const lastQuery = generatedQuery && query ? `${query}\r\n` : "";
|
||||||
setQuery(query);
|
setQuery(`${lastQuery}${currentGeneratedQuery}`);
|
||||||
setGeneratedQuery(generateSQLQueryResponse.sql);
|
setGeneratedQuery(generateSQLQueryResponse.sql);
|
||||||
setGeneratedQueryComments(generateSQLQueryResponse.explanation);
|
setGeneratedQueryComments(generateSQLQueryResponse.explanation);
|
||||||
setShowFeedbackBar(true);
|
setShowFeedbackBar(true);
|
||||||
@ -274,19 +270,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const showTeachingBubble = (): void => {
|
const toggleCopilotTeachingBubbleVisible = (visible: boolean): void => {
|
||||||
if (!inputEdited.current) {
|
setCopilotTeachingBubbleVisible(visible);
|
||||||
setTimeout(() => {
|
setShowPromptTeachingBubble(visible);
|
||||||
if (!inputEdited.current && !isWelcomModalVisible()) {
|
|
||||||
toggleCopilotTeachingBubbleVisible();
|
|
||||||
inputEdited.current = true;
|
|
||||||
}
|
|
||||||
}, 30000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const isWelcomModalVisible = (): boolean => {
|
|
||||||
return localStorage.getItem("hideWelcomeModal") !== "true";
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearFeedback = () => {
|
const clearFeedback = () => {
|
||||||
@ -317,55 +303,399 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
showTeachingBubble();
|
|
||||||
useTabs.getState().setIsQueryErrorThrown(false);
|
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 (
|
return (
|
||||||
<Stack
|
<Stack
|
||||||
className="copilot-prompt-pane"
|
className="copilot-prompt-pane"
|
||||||
styles={{ root: { backgroundColor: "#FAFAFA", padding: "16px 24px 0px" } }}
|
styles={{ root: { backgroundColor: "#FAFAFA", padding: "8px" } }}
|
||||||
id="copilot-textfield-label"
|
id="copilot-textfield-label"
|
||||||
>
|
>
|
||||||
<Stack horizontal>
|
<Stack
|
||||||
<Image src={CopilotIcon} style={{ width: 24, height: 24 }} alt="Copilot" role="none" />
|
horizontal
|
||||||
<Text style={{ marginLeft: 8, fontWeight: 600, fontSize: 16 }}>Copilot</Text>
|
styles={{
|
||||||
|
root: {
|
||||||
|
width: "100%",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#D1D1D1",
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: "0px 4px 8px 0px #00000024",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack style={{ width: "100%" }}>
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ padding: "8px 8px 0px 8px" }}>
|
||||||
|
<TextField
|
||||||
|
id="naturalLanguageInput"
|
||||||
|
value={userPrompt}
|
||||||
|
onChange={handleUserPromptChange}
|
||||||
|
onClick={() => {
|
||||||
|
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 (
|
||||||
|
<IconButton
|
||||||
|
iconProps={{ iconName: "Send" }}
|
||||||
|
disabled={isGeneratingQuery || !userPrompt.trim()}
|
||||||
|
style={{ background: "none" }}
|
||||||
|
onClick={() => startGenerateQueryProcess()}
|
||||||
|
aria-label="Send"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{showPromptTeachingBubble && copilotTeachingBubbleVisible && (
|
||||||
|
<TeachingBubble
|
||||||
|
calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
|
||||||
|
target="#naturalLanguageInput"
|
||||||
|
hasCloseButton={true}
|
||||||
|
closeButtonAriaLabel="Close"
|
||||||
|
onDismiss={() => 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{" "}
|
||||||
|
<Link
|
||||||
|
onClick={() => {
|
||||||
|
setShowSamplePrompts(true);
|
||||||
|
toggleCopilotTeachingBubbleVisible(false);
|
||||||
|
}}
|
||||||
|
style={{ color: "white", fontWeight: 600 }}
|
||||||
|
>
|
||||||
|
sample prompts
|
||||||
|
</Link>{" "}
|
||||||
|
or write your own query
|
||||||
|
</TeachingBubble>
|
||||||
|
)}
|
||||||
|
{showSamplePrompts && (
|
||||||
|
<Callout
|
||||||
|
styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
|
||||||
|
target="#naturalLanguageInput"
|
||||||
|
isBeakVisible={false}
|
||||||
|
onDismiss={() => setShowSamplePrompts(false)}
|
||||||
|
directionalHintFixed={true}
|
||||||
|
directionalHint={DirectionalHint.bottomLeftEdge}
|
||||||
|
alignTargetEdge={true}
|
||||||
|
gapSpace={4}
|
||||||
|
>
|
||||||
|
<Stack>
|
||||||
|
{filteredHistories?.length > 0 && (
|
||||||
|
<Stack>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "#0078D4",
|
||||||
|
marginLeft: 16,
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Recent
|
||||||
|
</Text>
|
||||||
|
{filteredHistories.map((history, i) => (
|
||||||
|
<DefaultButton
|
||||||
|
key={i}
|
||||||
|
onClick={() => {
|
||||||
|
setUserPrompt(history);
|
||||||
|
setShowSamplePrompts(false);
|
||||||
|
inputEdited.current = true;
|
||||||
|
}}
|
||||||
|
onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
|
||||||
|
styles={promptStyles}
|
||||||
|
>
|
||||||
|
{history}
|
||||||
|
</DefaultButton>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
{filteredSuggestedPrompts?.length > 0 && (
|
||||||
|
<Stack>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "#0078D4",
|
||||||
|
marginLeft: 16,
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Suggested Prompts
|
||||||
|
</Text>
|
||||||
|
{filteredSuggestedPrompts.map((prompt) => (
|
||||||
|
<DefaultButton
|
||||||
|
key={prompt.id}
|
||||||
|
onClick={() => {
|
||||||
|
setUserPrompt(prompt.text);
|
||||||
|
setShowSamplePrompts(false);
|
||||||
|
inputEdited.current = true;
|
||||||
|
}}
|
||||||
|
onRenderIcon={() => <Image src={HintIcon} />}
|
||||||
|
styles={promptStyles}
|
||||||
|
>
|
||||||
|
{prompt.text}
|
||||||
|
</DefaultButton>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
{(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
|
||||||
|
<Stack>
|
||||||
|
<Separator
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
selectors: { "::before": { background: "#E1DFDD" } },
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
fontSize: 14,
|
||||||
|
marginLeft: 16,
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Learn about{" "}
|
||||||
|
<Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
|
||||||
|
writing effective prompts
|
||||||
|
</Link>
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Callout>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
{!isGeneratingQuery && (
|
||||||
|
<Stack style={{ padding: 8 }}>
|
||||||
|
{!showFeedbackBar && (
|
||||||
|
<Text style={{ fontSize: 12 }}>
|
||||||
|
AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.{" "}
|
||||||
|
<Link
|
||||||
|
href="https://aka.ms/cdb-copilot-preview-terms"
|
||||||
|
target="_blank"
|
||||||
|
style={{ color: "#0072D4" }}
|
||||||
|
className="underlinedLink"
|
||||||
|
>
|
||||||
|
Read preview terms
|
||||||
|
</Link>
|
||||||
|
{showErrorMessageBar && (
|
||||||
|
<MessageBar messageBarType={MessageBarType.error}>
|
||||||
|
{errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
|
||||||
|
</MessageBar>
|
||||||
|
)}
|
||||||
|
{showInvalidQueryMessageBar && (
|
||||||
|
<MessageBar
|
||||||
|
messageBarType={MessageBarType.info}
|
||||||
|
styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
|
||||||
|
>
|
||||||
|
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
|
||||||
|
<Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
|
||||||
|
this article.
|
||||||
|
</Link>{" "}
|
||||||
|
Our content guidelines can be found
|
||||||
|
<Link href="https://aka.ms/cdb-query-copilot" target="_blank">
|
||||||
|
here.
|
||||||
|
</Link>
|
||||||
|
</MessageBar>
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
{showFeedbackBar && (
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
|
||||||
|
{userContext.feedbackPolicies?.policyAllowFeedback && (
|
||||||
|
<Stack horizontal verticalAlign="center">
|
||||||
|
<Text style={{ fontSize: 12 }}>Provide feedback</Text>
|
||||||
|
{showCallout && !hideFeedbackModalForLikedQueries && (
|
||||||
|
<Callout
|
||||||
|
role="status"
|
||||||
|
style={{ padding: "6px 12px" }}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
beakCurtain: {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
calloutMain: {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
target="#likeBtn"
|
||||||
|
onDismiss={() => {
|
||||||
|
setShowCallout(false);
|
||||||
|
SubmitFeedback({
|
||||||
|
params: {
|
||||||
|
generatedQuery: generatedQuery,
|
||||||
|
likeQuery: likeQuery,
|
||||||
|
description: "",
|
||||||
|
userPrompt: userPrompt,
|
||||||
|
},
|
||||||
|
explorer,
|
||||||
|
databaseId,
|
||||||
|
containerId,
|
||||||
|
mode: isSampleCopilotActive ? "Sample" : "User",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
directionalHint={DirectionalHint.topCenter}
|
||||||
|
>
|
||||||
|
<Text>
|
||||||
|
Thank you. Need to give{" "}
|
||||||
|
<Link
|
||||||
|
onClick={() => {
|
||||||
|
setShowCallout(false);
|
||||||
|
openFeedbackModal(generatedQuery, true, userPrompt);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
more feedback?
|
||||||
|
</Link>
|
||||||
|
</Text>
|
||||||
|
</Callout>
|
||||||
|
)}
|
||||||
|
<IconButton
|
||||||
|
id="likeBtn"
|
||||||
|
style={{ marginLeft: 10 }}
|
||||||
|
aria-label="Like"
|
||||||
|
role="toggle"
|
||||||
|
iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
|
||||||
|
onClick={() => {
|
||||||
|
setShowCallout(!likeQuery);
|
||||||
|
setLikeQuery(!likeQuery);
|
||||||
|
if (likeQuery === true) {
|
||||||
|
document.getElementById("likeStatus").innerHTML = "Unpressed";
|
||||||
|
}
|
||||||
|
if (likeQuery === false) {
|
||||||
|
document.getElementById("likeStatus").innerHTML = "Liked";
|
||||||
|
}
|
||||||
|
if (dislikeQuery) {
|
||||||
|
setDislikeQuery(!dislikeQuery);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
style={{ margin: "0 4px" }}
|
||||||
|
role="toggle"
|
||||||
|
aria-label="Dislike"
|
||||||
|
iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
|
||||||
|
onClick={() => {
|
||||||
|
let toggleStatusValue = "Unpressed";
|
||||||
|
if (!dislikeQuery) {
|
||||||
|
openFeedbackModal(generatedQuery, false, userPrompt);
|
||||||
|
setLikeQuery(false);
|
||||||
|
toggleStatusValue = "Disliked";
|
||||||
|
}
|
||||||
|
setDislikeQuery(!dislikeQuery);
|
||||||
|
setShowCallout(false);
|
||||||
|
document.getElementById("likeStatus").innerHTML = toggleStatusValue;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
|
||||||
|
<Separator
|
||||||
|
vertical
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
"::after": {
|
||||||
|
backgroundColor: "#767676",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
<CommandBarButton
|
||||||
|
className="copyQuery"
|
||||||
|
onClick={copyGeneratedCode}
|
||||||
|
iconProps={{ iconName: "Copy" }}
|
||||||
|
style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
backgroundColor: "inherit",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Copy code
|
||||||
|
</CommandBarButton>
|
||||||
|
<CommandBarButton
|
||||||
|
className="deleteQuery"
|
||||||
|
onClick={() => {
|
||||||
|
setShowDeletePopup(true);
|
||||||
|
}}
|
||||||
|
iconProps={{ iconName: "Delete" }}
|
||||||
|
style={{ fontSize: 12, transition: "background-color 0.3s ease", height: "100%" }}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
backgroundColor: "inherit",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Clear editor
|
||||||
|
</CommandBarButton>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
{isGeneratingQuery && (
|
||||||
|
<ProgressIndicator
|
||||||
|
label="Thinking..."
|
||||||
|
ariaLabel={getAriaLabel()}
|
||||||
|
barHeight={4}
|
||||||
|
styles={{
|
||||||
|
root: {
|
||||||
|
fontSize: 12,
|
||||||
|
width: "100%",
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
itemName: {
|
||||||
|
padding: "0px 8px",
|
||||||
|
},
|
||||||
|
itemProgress: {
|
||||||
|
borderBottomLeftRadius: 8,
|
||||||
|
borderBottomRightRadius: 8,
|
||||||
|
padding: 0,
|
||||||
|
},
|
||||||
|
progressBar: {
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(24, 90, 189) 35%, rgb(71, 207, 250) 70%, rgb(180, 124, 248) 92%, rgba(0, 0, 0, 0))",
|
||||||
|
animationDuration: "5s",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
<IconButton
|
<IconButton
|
||||||
iconProps={{ imageProps: { src: errorIcon } }}
|
iconProps={{ imageProps: { src: errorIcon } }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -373,285 +703,10 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
clearFeedback();
|
clearFeedback();
|
||||||
resetMessageStates();
|
resetMessageStates();
|
||||||
}}
|
}}
|
||||||
styles={{
|
|
||||||
root: {
|
|
||||||
marginLeft: "auto !important",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
ariaLabel="Close"
|
ariaLabel="Close"
|
||||||
|
title="Close copilot"
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
<Stack horizontal verticalAlign="center">
|
|
||||||
<TextField
|
|
||||||
id="naturalLanguageInput"
|
|
||||||
value={userPrompt}
|
|
||||||
onChange={handleUserPromptChange}
|
|
||||||
onClick={() => {
|
|
||||||
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 && (
|
|
||||||
<TeachingBubble
|
|
||||||
calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
|
|
||||||
target="#naturalLanguageInput"
|
|
||||||
hasCloseButton={true}
|
|
||||||
closeButtonAriaLabel="Close"
|
|
||||||
onDismiss={toggleCopilotTeachingBubbleVisible}
|
|
||||||
hasSmallHeadline={true}
|
|
||||||
headline="Write a prompt"
|
|
||||||
>
|
|
||||||
Write a prompt here and Copilot will generate the query for you. You can also choose from our{" "}
|
|
||||||
<Link
|
|
||||||
onClick={() => {
|
|
||||||
setShowSamplePrompts(true);
|
|
||||||
toggleCopilotTeachingBubbleVisible();
|
|
||||||
}}
|
|
||||||
style={{ color: "white", fontWeight: 600 }}
|
|
||||||
>
|
|
||||||
sample prompts
|
|
||||||
</Link>{" "}
|
|
||||||
or write your own query
|
|
||||||
</TeachingBubble>
|
|
||||||
)}
|
|
||||||
<IconButton
|
|
||||||
iconProps={{ iconName: "Send" }}
|
|
||||||
disabled={isGeneratingQuery || !userPrompt.trim()}
|
|
||||||
style={{ marginLeft: 8 }}
|
|
||||||
onClick={() => {
|
|
||||||
startGenerateQueryProcess();
|
|
||||||
setShowSamplePrompts(false);
|
|
||||||
}}
|
|
||||||
aria-label="Send"
|
|
||||||
/>
|
|
||||||
<div role="alert" aria-label={getAriaLabel()}>
|
|
||||||
{isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
|
|
||||||
</div>
|
|
||||||
{showSamplePrompts && (
|
|
||||||
<Callout
|
|
||||||
styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}
|
|
||||||
target="#naturalLanguageInput"
|
|
||||||
isBeakVisible={false}
|
|
||||||
onDismiss={() => setShowSamplePrompts(false)}
|
|
||||||
directionalHintFixed={true}
|
|
||||||
directionalHint={DirectionalHint.bottomLeftEdge}
|
|
||||||
alignTargetEdge={true}
|
|
||||||
gapSpace={4}
|
|
||||||
>
|
|
||||||
<Stack>
|
|
||||||
{filteredHistories?.length > 0 && (
|
|
||||||
<Stack>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 600,
|
|
||||||
color: "#0078D4",
|
|
||||||
marginLeft: 16,
|
|
||||||
padding: "4px 0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Recent
|
|
||||||
</Text>
|
|
||||||
{filteredHistories.map((history, i) => (
|
|
||||||
<DefaultButton
|
|
||||||
key={i}
|
|
||||||
onClick={() => {
|
|
||||||
setUserPrompt(history);
|
|
||||||
setShowSamplePrompts(false);
|
|
||||||
inputEdited.current = true;
|
|
||||||
}}
|
|
||||||
onRenderIcon={() => <Image src={RecentIcon} styles={{ root: { overflow: "unset" } }} />}
|
|
||||||
styles={promptStyles}
|
|
||||||
className={focusedindex === i ? "highlighted-buttonstyles" : "buttonstyles"}
|
|
||||||
>
|
|
||||||
{history}
|
|
||||||
</DefaultButton>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
{filteredSuggestedPrompts?.length > 0 && (
|
|
||||||
<Stack>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 600,
|
|
||||||
color: "#0078D4",
|
|
||||||
marginLeft: 16,
|
|
||||||
padding: "4px 0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Suggested Prompts
|
|
||||||
</Text>
|
|
||||||
{filteredSuggestedPrompts.map((prompt, index) => (
|
|
||||||
<DefaultButton
|
|
||||||
key={prompt.id}
|
|
||||||
onClick={() => {
|
|
||||||
setUserPrompt(prompt.text);
|
|
||||||
setShowSamplePrompts(false);
|
|
||||||
inputEdited.current = true;
|
|
||||||
}}
|
|
||||||
onRenderIcon={() => <Image src={HintIcon} />}
|
|
||||||
styles={promptStyles}
|
|
||||||
className={focusedindex === filteredHistories.length + index ? "highlighted-buttonstyles" : ""}
|
|
||||||
>
|
|
||||||
{prompt.text}
|
|
||||||
</DefaultButton>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
{(filteredHistories?.length > 0 || filteredSuggestedPrompts?.length > 0) && (
|
|
||||||
<Stack>
|
|
||||||
<Separator
|
|
||||||
styles={{
|
|
||||||
root: {
|
|
||||||
selectors: { "::before": { background: "#E1DFDD" } },
|
|
||||||
padding: 0,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
fontSize: 14,
|
|
||||||
marginLeft: 16,
|
|
||||||
padding: "4px 0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Learn about{" "}
|
|
||||||
<Link target="_blank" href="https://aka.ms/cdb-copilot-writing">
|
|
||||||
writing effective prompts
|
|
||||||
</Link>
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Callout>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<Stack style={{ margin: "8px 0" }}>
|
|
||||||
<Text style={{ fontSize: 12 }}>
|
|
||||||
AI-generated content can have mistakes. Make sure it's accurate and appropriate before using it.{" "}
|
|
||||||
<Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072c9" }}>
|
|
||||||
Read preview terms
|
|
||||||
</Link>
|
|
||||||
{showErrorMessageBar && (
|
|
||||||
<MessageBar messageBarType={MessageBarType.error}>
|
|
||||||
{errorMessage ? errorMessage : "We ran into an error and were not able to execute query."}
|
|
||||||
</MessageBar>
|
|
||||||
)}
|
|
||||||
{showInvalidQueryMessageBar && (
|
|
||||||
<MessageBar
|
|
||||||
messageBarType={MessageBarType.info}
|
|
||||||
styles={{ root: { backgroundColor: "#F0F6FF" }, icon: { color: "#015CDA" } }}
|
|
||||||
>
|
|
||||||
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
|
|
||||||
<Link href="https://aka.ms/cdb-copilot-writing" target="_blank">
|
|
||||||
this article.
|
|
||||||
</Link>{" "}
|
|
||||||
Our content guidelines can be found
|
|
||||||
<Link href="https://aka.ms/cdb-query-copilot" target="_blank">
|
|
||||||
here.
|
|
||||||
</Link>
|
|
||||||
</MessageBar>
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
{showFeedbackBar && (
|
|
||||||
<Stack style={{ backgroundColor: "#FFF8F0", padding: "2px 8px" }} horizontal verticalAlign="center">
|
|
||||||
<Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
|
|
||||||
{showCallout && !hideFeedbackModalForLikedQueries && (
|
|
||||||
<Callout
|
|
||||||
style={{ padding: 8 }}
|
|
||||||
target="#likeBtn"
|
|
||||||
onDismiss={() => {
|
|
||||||
setShowCallout(false);
|
|
||||||
SubmitFeedback({
|
|
||||||
params: {
|
|
||||||
generatedQuery: generatedQuery,
|
|
||||||
likeQuery: likeQuery,
|
|
||||||
description: "",
|
|
||||||
userPrompt: userPrompt,
|
|
||||||
},
|
|
||||||
explorer,
|
|
||||||
databaseId,
|
|
||||||
containerId,
|
|
||||||
mode: isSampleCopilotActive ? "Sample" : "User",
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
directionalHint={DirectionalHint.topCenter}
|
|
||||||
>
|
|
||||||
<Text>
|
|
||||||
Thank you. Need to give{" "}
|
|
||||||
<Link
|
|
||||||
onClick={() => {
|
|
||||||
setShowCallout(false);
|
|
||||||
openFeedbackModal(generatedQuery, true, userPrompt);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
more feedback?
|
|
||||||
</Link>
|
|
||||||
</Text>
|
|
||||||
</Callout>
|
|
||||||
)}
|
|
||||||
<IconButton
|
|
||||||
id="likeBtn"
|
|
||||||
style={{ marginLeft: 20 }}
|
|
||||||
iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
|
|
||||||
aria-label="Like"
|
|
||||||
onClick={() => {
|
|
||||||
setShowCallout(!likeQuery);
|
|
||||||
setLikeQuery(!likeQuery);
|
|
||||||
if (dislikeQuery) {
|
|
||||||
setDislikeQuery(!dislikeQuery);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<IconButton
|
|
||||||
style={{ margin: "0 10px" }}
|
|
||||||
iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
|
|
||||||
onClick={() => {
|
|
||||||
if (!dislikeQuery) {
|
|
||||||
openFeedbackModal(generatedQuery, false, userPrompt);
|
|
||||||
setLikeQuery(false);
|
|
||||||
}
|
|
||||||
setDislikeQuery(!dislikeQuery);
|
|
||||||
setShowCallout(false);
|
|
||||||
}}
|
|
||||||
aria-label="Dislike"
|
|
||||||
/>
|
|
||||||
<Separator vertical style={{ color: "#EDEBE9" }} />
|
|
||||||
<CommandBarButton
|
|
||||||
onClick={copyGeneratedCode}
|
|
||||||
iconProps={{ iconName: "Copy" }}
|
|
||||||
style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
|
|
||||||
>
|
|
||||||
Copy query
|
|
||||||
</CommandBarButton>
|
|
||||||
<CommandBarButton
|
|
||||||
onClick={() => {
|
|
||||||
setShowDeletePopup(true);
|
|
||||||
}}
|
|
||||||
iconProps={{ iconName: "Delete" }}
|
|
||||||
style={{ margin: "0 10px", backgroundColor: "#FFF8F0", transition: "background-color 0.3s ease" }}
|
|
||||||
>
|
|
||||||
Delete query
|
|
||||||
</CommandBarButton>
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
<WelcomeModal visible={isWelcomModalVisible()} />
|
|
||||||
{isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
|
{isSamplePromptsOpen && <SamplePrompts sampleProps={sampleProps} />}
|
||||||
{query !== "" && query.trim().length !== 0 && (
|
{query !== "" && query.trim().length !== 0 && (
|
||||||
<DeletePopup
|
<DeletePopup
|
||||||
@ -665,4 +720,4 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
|
|||||||
<CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
|
<CopyPopup showCopyPopup={showCopyPopup} setShowCopyPopup={setshowCopyPopup} />
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user