[Obs AI Assistant] Update delete confirmation modal (#212695)

Closes https://github.com/elastic/kibana/issues/210064

## Summary

Updates the delete confirmation modal based on the new designs

### Screen recording


https://github.com/user-attachments/assets/ba2a02ea-6751-497c-929f-2b38426deaf3

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/conversation_list.tsx

@@ -73,13 +73,13 @@ export function ConversationList({
 
   const { element: confirmDeleteElement, confirm: confirmDeleteCallback } = useConfirmModal({
     title: i18n.translate('xpack.aiAssistant.flyout.confirmDeleteConversationTitle', {
-      defaultMessage: 'Delete this conversation?',
+      defaultMessage: 'Delete conversation',
     }),
     children: i18n.translate('xpack.aiAssistant.flyout.confirmDeleteConversationContent', {
-      defaultMessage: 'This action cannot be undone.',
+      defaultMessage: 'This action is permanent and cannot be undone.',
     }),
     confirmButtonText: i18n.translate('xpack.aiAssistant.flyout.confirmDeleteButtonText', {
-      defaultMessage: 'Delete conversation',
+      defaultMessage: 'Delete',
     }),
   });
 
@@ -169,7 +169,15 @@ export function ConversationList({
                               }
                             ),
                             onClick: () => {
-                              confirmDeleteCallback().then((confirmed) => {
+                              confirmDeleteCallback(
+                                i18n.translate(
+                                  'xpack.aiAssistant.flyout.confirmDeleteCheckboxLabel',
+                                  {
+                                    defaultMessage: 'Delete "{title}"',
+                                    values: { title: conversation.label },
+                                  }
+                                )
+                              ).then((confirmed) => {
                                 if (!confirmed) {
                                   return;
                                 }

x-pack/platform/packages/shared/kbn-ai-assistant/src/hooks/use_confirm_modal.tsx

@@ -4,9 +4,59 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
 import React from 'react';
-import { EuiConfirmModal } from '@elastic/eui';
+import { EuiCheckbox, EuiConfirmModal, EuiText } from '@elastic/eui';
 import { useState } from 'react';
+import { css } from '@emotion/css';
+
+const ConfirmModal = ({
+  checkboxLabel,
+  onClose,
+  title,
+  children,
+  confirmButtonText,
+  setElement,
+}: {
+  checkboxLabel: string;
+  onClose: (confirmed: boolean) => void;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  confirmButtonText: React.ReactNode;
+  setElement: (element: React.ReactNode | undefined) => void;
+}) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <EuiConfirmModal
+      title={title}
+      onConfirm={() => {
+        onClose(true);
+        setElement(undefined);
+      }}
+      onCancel={() => {
+        onClose(false);
+        setElement(undefined);
+      }}
+      confirmButtonText={confirmButtonText}
+      cancelButtonText="Cancel"
+      buttonColor="danger"
+      confirmButtonDisabled={!isChecked}
+      maxWidth
+    >
+      <EuiText>{children}</EuiText>
+      <EuiCheckbox
+        id="deleteConfirmationCheckbox"
+        label={checkboxLabel}
+        checked={isChecked}
+        onChange={(e) => setIsChecked(e.target.checked)}
+        className={css`
+          margin-top: 15px;
+        `}
+      />
+    </EuiConfirmModal>
+  );
+};
 
 export function useConfirmModal({
   title,
@@ -16,27 +66,26 @@ export function useConfirmModal({
   title: React.ReactNode;
   children: React.ReactNode;
   confirmButtonText: React.ReactNode;
-}) {
+}): {
+  element: React.ReactNode | undefined;
+  confirm: (checkBoxLabel: string) => Promise<boolean>;
+} {
   const [element, setElement] = useState<React.ReactNode | undefined>(undefined);
 
-  const confirm = () => {
+  const confirm = (checkboxLabel: string) => {
     return new Promise<boolean>((resolve) => {
-      setElement(
-        <EuiConfirmModal
-          title={title}
-          onConfirm={() => {
-            resolve(true);
-            setElement(undefined);
-          }}
-          onCancel={() => {
-            resolve(false);
-            setElement(undefined);
-          }}
-          confirmButtonText={confirmButtonText}
-        >
-          {children}
-        </EuiConfirmModal>
-      );
+      setElement(() => {
+        return (
+          <ConfirmModal
+            checkboxLabel={checkboxLabel}
+            onClose={resolve}
+            title={title}
+            children={children}
+            confirmButtonText={confirmButtonText}
+            setElement={setElement}
+          />
+        );
+      });
     });
   };