Roo-Code/webview-ui/src/components/chat/MessageModificationConfirmationDialog.tsx
Will Li fb374b3e94
Message edit/delete overhaul (#5538)
* improved chat row first pass

* big UI improvements

* working functionality

* tests working

* ok finally tests working for real!

* translations

* add back hidden flag

* remove option to skip notif

* fixed image issue

* ui fix

* put back edit flag

* oops test fix

* reduce margins

* code review
2025-07-17 10:16:57 -04:00

62 lines
2.2 KiB
TypeScript

import React from "react"
import { useAppTranslation } from "@src/i18n/TranslationContext"
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@src/components/ui"
interface MessageModificationConfirmationDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onConfirm: () => void
type: "edit" | "delete"
}
export const MessageModificationConfirmationDialog: React.FC<MessageModificationConfirmationDialogProps> = ({
open,
onOpenChange,
onConfirm,
type,
}) => {
const { t } = useAppTranslation()
const isEdit = type === "edit"
const title = isEdit ? t("common:confirmation.editMessage") : t("common:confirmation.deleteMessage")
const description = isEdit ? t("common:confirmation.editWarning") : t("common:confirmation.deleteWarning")
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="text-lg">{title}</AlertDialogTitle>
<AlertDialogDescription className="text-base">{description}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="flex-col gap-2">
<AlertDialogCancel className="bg-vscode-button-secondaryBackground hover:bg-vscode-button-secondaryHoverBackground text-vscode-button-secondaryForeground border-vscode-button-border">
{t("common:answers.cancel")}
</AlertDialogCancel>
<AlertDialogAction
onClick={onConfirm}
className="bg-vscode-button-background hover:bg-vscode-button-hoverBackground text-vscode-button-foreground border-vscode-button-border">
{t("common:confirmation.proceed")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)
}
// Export convenience components for backward compatibility
export const EditMessageDialog: React.FC<Omit<MessageModificationConfirmationDialogProps, "type">> = (props) => (
<MessageModificationConfirmationDialog {...props} type="edit" />
)
export const DeleteMessageDialog: React.FC<Omit<MessageModificationConfirmationDialogProps, "type">> = (props) => (
<MessageModificationConfirmationDialog {...props} type="delete" />
)