mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-27 21:01:57 +00:00
[Query Copilot] Sample Prompt implementation and other (#1489)
* Sample Prompts and ComboBox implementation * Adding DeletePopup and SamplePrompts * Implementation of Delete/Copy code buttons * Adjusted changes based on the comments for Modal * Reverded implementation of inline prompt * Updated function * Replacing const to function * Unused icons deleted * Comments removed * Additional styling based on designs * Test snapshots * Implementation of popup for copying code * Tests updated/added * Background color changed * Resolving lint issue * CopyPopup snapshot updated * Merged with master * Implementations fixed based on comments * Test Snapshots updated * Query copilot updated * Resolving minor bug with Delete popup --------- Co-authored-by: Predrag Klepic <v-prklepic@microsoft.com>
This commit is contained in:
Predrag Klepic
GitHub
@@ -0,0 +1,26 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { SamplePrompts, SamplePromptsProps } from "./SamplePrompts";
|
||||
|
||||
describe("Sample Prompts snapshot test", () => {
|
||||
it("should render properly if isSamplePromptsOpen is true", () => {
|
||||
const sampleProps: SamplePromptsProps = {
|
||||
isSamplePromptsOpen: true,
|
||||
setIsSamplePromptsOpen: () => undefined,
|
||||
setTextBox: () => undefined,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should render properly if isSamplePromptsOpen is false", () => {
|
||||
const sampleProps: SamplePromptsProps = {
|
||||
isSamplePromptsOpen: false,
|
||||
setIsSamplePromptsOpen: () => undefined,
|
||||
setTextBox: () => undefined,
|
||||
};
|
||||
const wrapper = shallow(<SamplePrompts sampleProps={sampleProps} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
138
src/Explorer/QueryCopilot/SamplePrompts/SamplePrompts.tsx
Normal file
138
src/Explorer/QueryCopilot/SamplePrompts/SamplePrompts.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import { DefaultButton, FontIcon, IconButton, Image, Modal, Stack, Text } from "@fluentui/react";
|
||||
import React, { Dispatch, SetStateAction } from "react";
|
||||
import ComplexPrompts from "../../../../images/ComplexPrompts.svg";
|
||||
import IntermediatePrompts from "../../../../images/IntermediatePrompts.svg";
|
||||
import SimplePrompts from "../../../../images/SimplePrompts.svg";
|
||||
|
||||
export interface SamplePromptsProps {
|
||||
isSamplePromptsOpen: boolean;
|
||||
setIsSamplePromptsOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setTextBox: Dispatch<SetStateAction<string>>;
|
||||
}
|
||||
|
||||
const SampleUserInputs: string[] = [
|
||||
"Show me products less than 100 dolars",
|
||||
"Show schema",
|
||||
"Show items with a description that contains a number between 0 and 99 inclusive.",
|
||||
"Write a query to return all records in this table created in the last thirty days",
|
||||
"Show all the products that customer Bob has reviewed.",
|
||||
"Which computers are more than 300 dollars and less than 400 dollars?",
|
||||
];
|
||||
|
||||
export const SamplePrompts = ({ sampleProps }: { sampleProps: SamplePromptsProps }): JSX.Element => {
|
||||
const updateTextBox = (userInput: string) => {
|
||||
sampleProps.setTextBox(userInput);
|
||||
sampleProps.setIsSamplePromptsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={sampleProps.isSamplePromptsOpen}>
|
||||
<Stack
|
||||
style={{ padding: "16px 24px", overflowY: "auto", maxHeight: "calc(100vh - 120px)" }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<Stack>
|
||||
<Stack horizontal style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Text style={{ fontSize: 24, fontWeight: 600 }}>Sample Prompts</Text>
|
||||
<IconButton
|
||||
styles={{
|
||||
root: {
|
||||
border: "none",
|
||||
backgroundColor: "transparent",
|
||||
padding: 0,
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
color: "#000", // Set the desired color for the X button on hover
|
||||
},
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
iconProps={{ iconName: "Cancel" }}
|
||||
onClick={() => sampleProps.setIsSamplePromptsOpen(false)}
|
||||
/>
|
||||
</Stack>
|
||||
<Text style={{ fontWeight: 400, fontSize: 13, marginTop: 10 }}>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={SimplePrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Simple Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[0])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[0]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[1])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[1]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={IntermediatePrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Intermediate Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[2])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[2]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[3])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[3]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
|
||||
<Stack style={{ marginTop: 30, display: "flex" }}>
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<Image style={{ width: 25, height: 25 }} src={ComplexPrompts} />
|
||||
<Text style={{ fontSize: 14, fontWeight: 600 }}>Complex Prompts</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal style={{ gap: 35 }}>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[4])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[4]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
<DefaultButton
|
||||
style={{ width: 352, height: 135, background: "#F6F6F7" }}
|
||||
onClick={() => updateTextBox(SampleUserInputs[5])}
|
||||
>
|
||||
<Text style={{ height: 80, fontSize: 13 }}>{SampleUserInputs[5]}</Text>
|
||||
<FontIcon style={{ position: "absolute", left: "92.61%" }} aria-label="Forward" iconName="Forward" />
|
||||
</DefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,781 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is false 1`] = `
|
||||
<Modal
|
||||
isOpen={false}
|
||||
>
|
||||
<Stack
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"maxHeight": "calc(100vh - 120px)",
|
||||
"overflowY": "auto",
|
||||
"padding": "16px 24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Sample Prompts
|
||||
</Text>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Cancel",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"border": "none",
|
||||
"padding": 0,
|
||||
"selectors": Object {
|
||||
"&:focus": Object {
|
||||
"outline": "none",
|
||||
},
|
||||
"&:hover": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#000",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"fontWeight": 400,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Simple Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show me products less than 100 dolars
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show schema
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Intermediate Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show items with a description that contains a number between 0 and 99 inclusive.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return all records in this table created in the last thirty days
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Complex Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show all the products that customer Bob has reviewed.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Which computers are more than 300 dollars and less than 400 dollars?
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
`;
|
||||
|
||||
exports[`Sample Prompts snapshot test should render properly if isSamplePromptsOpen is true 1`] = `
|
||||
<Modal
|
||||
isOpen={true}
|
||||
>
|
||||
<Stack
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"maxHeight": "calc(100vh - 120px)",
|
||||
"overflowY": "auto",
|
||||
"padding": "16px 24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 24,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Sample Prompts
|
||||
</Text>
|
||||
<CustomizedIconButton
|
||||
iconProps={
|
||||
Object {
|
||||
"iconName": "Cancel",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"border": "none",
|
||||
"padding": 0,
|
||||
"selectors": Object {
|
||||
"&:focus": Object {
|
||||
"outline": "none",
|
||||
},
|
||||
"&:hover": Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#000",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"fontWeight": 400,
|
||||
"marginTop": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
Here are some sample prompts for writing queries in NoSQL, ranging from simple to complex
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Simple Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show me products less than 100 dolars
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show schema
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Intermediate Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show items with a description that contains a number between 0 and 99 inclusive.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Write a query to return all records in this table created in the last thirty days
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"marginTop": 30,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
style={
|
||||
Object {
|
||||
"height": 25,
|
||||
"width": 25,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 14,
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Complex Prompts
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
style={
|
||||
Object {
|
||||
"gap": 35,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Show all the products that customer Bob has reviewed.
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
<CustomizedDefaultButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"background": "#F6F6F7",
|
||||
"height": 135,
|
||||
"width": 352,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontSize": 13,
|
||||
"height": 80,
|
||||
}
|
||||
}
|
||||
>
|
||||
Which computers are more than 300 dollars and less than 400 dollars?
|
||||
</Text>
|
||||
<FontIcon
|
||||
aria-label="Forward"
|
||||
iconName="Forward"
|
||||
style={
|
||||
Object {
|
||||
"left": "92.61%",
|
||||
"position": "absolute",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</CustomizedDefaultButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
`;
|
||||
Reference in New Issue
Block a user