random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-25 21:47:52 +00: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

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

@ -1,12 +1,44 @@
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 React from "react";
import CopilotIcon from "../../../../../images/CopilotSidebarLogo.svg";
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 (
<>
<Stack
style={{ margin: "15px 0px 0px 0px", padding: "5px", display: "flex", justifyContent: "space-between" }}
horizontal
@ -27,6 +59,14 @@ export const Header: React.FC = (): JSX.Element => {
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" }}
@ -35,5 +75,7 @@ export const Header: React.FC = (): JSX.Element => {
style={{ color: "#424242", verticalAlign: "middle" }}
/>
</Stack>
{getDeleteHistoryModal()}
</>
);
};