random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-06-05 15:12:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Delete chat history button

Browse Source
This commit is contained in:
Predrag Klepic 2023-09-06 11:03:04 +02:00
parent 98bf84d09d
commit 8ce7aaa728
1 changed files with 71 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/Explorer/QueryCopilot/V2/Header/Header.tsx
View File

@ -1,39 +1,81 @@
import { IconButton, Image, Stack, Text } from "@fluentui/react"; import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
import { useQueryCopilot } from "hooks/useQueryCopilot"; import { useQueryCopilot } from "hooks/useQueryCopilot";
import React from "react"; import React from "react";
import CopilotIcon from "../../../../../images/CopilotSidebarLogo.svg"; import CopilotIcon from "../../../../../images/CopilotSidebarLogo.svg";
export const Header: React.FC = (): JSX.Element => { export const Header: React.FC = (): JSX.Element => {
const { setShowCopilotSidebar } = useQueryCopilot(); const { setShowCopilotSidebar, chatMessages, setChatMessages, setShowExplanationBubble } = useQueryCopilot();
const [showDeleteHistoryModal, setShowDeleteHistoryModal] = React.useState(false);
const getDeleteHistoryModal = () => {
return (
<Modal isOpen={showDeleteHistoryModal} styles={{ main: { minHeight: "122px", minWidth: "480px" } }}>
<Stack style={{ padding: "16px 24px", height: "auto" }}>
<Text style={{ height: 24, fontSize: "18px" }}>
<b>Delete chat history?</b>
</Text>
<Text style={{ marginTop: 10, marginBottom: 20 }}>
This action will clear all chat history. Are you sure you want to continue?
</Text>
<Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
<PrimaryButton
style={{ padding: "0px 20px", height: 24 }}
onClick={() => {
setChatMessages([]);
setShowExplanationBubble(false);
setShowDeleteHistoryModal(false);
}}
>
Continue
</PrimaryButton>
<DefaultButton style={{ padding: "0px 20px", height: 24 }} onClick={() => setShowDeleteHistoryModal(false)}>
Close
</DefaultButton>
</Stack>
</Stack>
</Modal>
);
};
return ( return (
<Stack <>
style={{ margin: "15px 0px 0px 0px", padding: "5px", display: "flex", justifyContent: "space-between" }} <Stack
horizontal style={{ margin: "15px 0px 0px 0px", padding: "5px", display: "flex", justifyContent: "space-between" }}
verticalAlign="center" horizontal
> verticalAlign="center"
<Stack horizontal verticalAlign="center"> >
<Image src={CopilotIcon} /> <Stack horizontal verticalAlign="center">
<Text style={{ marginLeft: "5px", fontWeight: "bold" }}>Copilot</Text> <Image src={CopilotIcon} />
<Text <Text style={{ marginLeft: "5px", fontWeight: "bold" }}>Copilot</Text>
style={{ <Text
background: "#f0f0f0", style={{
fontSize: "10px", background: "#f0f0f0",
padding: "2px 4px", fontSize: "10px",
marginLeft: "5px", padding: "2px 4px",
borderRadius: "8px", marginLeft: "5px",
}} borderRadius: "8px",
> }}
Preview >
</Text> Preview
</Text>
</Stack>
<IconButton
onClick={() => setShowDeleteHistoryModal(true)}
iconProps={{ iconName: "History" }}
title="Delete history"
ariaLabel="Delete history"
style={{ color: "#424242", verticalAlign: "middle" }}
disabled={chatMessages.length === 0}
/>
<IconButton
onClick={() => setShowCopilotSidebar(false)}
iconProps={{ iconName: "Cancel" }}
title="Exit"
ariaLabel="Exit"
style={{ color: "#424242", verticalAlign: "middle" }}
/>
</Stack> </Stack>
<IconButton {getDeleteHistoryModal()}
onClick={() => setShowCopilotSidebar(false)} </>
iconProps={{ iconName: "Cancel" }}
title="Exit"
ariaLabel="Exit"
style={{ color: "#424242", verticalAlign: "middle" }}
/>
</Stack>
); );
}; };