random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-27 12:51:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add welcome popop for query copilot (#1493)

Browse Source
This commit is contained in:
v-darkora
2023-07-06 09:49:34 +02:00
committed by GitHub
parent 4742ee0e7b
commit ebfc9d4b36
8 changed files with 206 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/Explorer/QueryCopilot/Modal/WelcomeModal.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { IconButton, Image, Link, Modal, PrimaryButton, Stack, StackItem, Text } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React from "react";
import Database from "../../../../images/CopilotDatabase.svg";
import Flash from "../../../../images/CopilotFlash.svg";
import Thumb from "../../../../images/CopilotThumb.svg";
import CoplilotWelcomeIllustration from "../../../../images/CopliotWelcomeIllustration.svg";
import "./WelcomeModal.css";
export const WelcomeModal = ({ visible }: { visible: boolean }): JSX.Element => {
const [isModalVisible, { setFalse: hideModal }] = useBoolean(visible);
React.useEffect(() => {
if (visible) {
window.localStorage.setItem("hideWelcomeModal", "true");
}
});
return (
<>
(
<Modal isOpen={isModalVisible} onDismiss={hideModal} isBlocking={false}>
<Stack className="modalContentPadding">
<Stack horizontal>
<Stack horizontal grow={4} horizontalAlign="end">
<Stack.Item>
<Image src={CoplilotWelcomeIllustration} />
</Stack.Item>
</Stack>
<Stack horizontal grow={1} horizontalAlign="end" verticalAlign="start" className="exitPadding">
<Stack.Item className="previewMargin">
<Text className="preview">Preview</Text>
</Stack.Item>
<Stack.Item>
<IconButton
onClick={hideModal}
iconProps={{ iconName: "Cancel" }}
title="Exit"
ariaLabel="Exit"
className="exitIcon"
/>
</Stack.Item>
</Stack>
</Stack>
<Stack horizontalAlign="center">
<Stack.Item align="center">
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Flash} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Let copilot do the work for you
<br />
</Text>
</StackItem>
</Stack>
<Text>
Ask Copilot to generate a query by describing the query in your words.
<br />
<Link href="">Learn more</Link>
</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Thumb} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Use your judgement
<br />
</Text>
</StackItem>
</Stack>
<Text>
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
<br />
<Link href="">Read preview terms</Link>
</Text>
</Stack.Item>
<Stack.Item align="center" className="text">
<Stack horizontal>
<StackItem align="start" className="imageTextPadding">
<Image src={Database} />
</StackItem>
<StackItem align="start">
<Text className="bold">
Copilot currently works only a sample database
<br />
</Text>
</StackItem>
</Stack>
<Text>
Copilot is setup on a sample database we have configured for you at no cost
<br />
<Link href="">Learn more</Link>
</Text>
</Stack.Item>
</Stack>
<Stack className="buttonPadding">
<Stack.Item align="center">
<PrimaryButton onClick={hideModal} className="tryButton">
Try Copilot
</PrimaryButton>
</Stack.Item>
</Stack>
</Stack>
</Modal>
)
</>
);
};