[Obs AI Assistant] Sharing conversations (new context menu for chat a…

…nd other updates) (#206590)
elastic · Feb 18, 2025 · 3b2b78e · 3b2b78e
1 parent b6f0cc7
commit 3b2b78e
Show file tree

Hide file tree

Showing 7 changed files with 361 additions and 109 deletions.
diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_actions_menu.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_actions_menu.tsx
@@ -131,16 +131,6 @@ export function ChatActionsMenu({
                 ),
                 panel: 1,
               },
-              {
-                name: i18n.translate('xpack.aiAssistant.chatHeader.actions.copyConversation', {
-                  defaultMessage: 'Copy conversation',
-                }),
-                disabled: !conversationId,
-                onClick: () => {
-                  toggleActionsMenu();
-                  onCopyConversationClick();
-                },
-              },
             ],
           },
           {

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_body.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_body.tsx
@@ -140,7 +140,7 @@ export function ChatBody({
   const chatService = useAIAssistantChatService();
 
   const {
-    services: { uiSettings },
+    services: { uiSettings, notifications },
   } = useKibana();
 
   const simulateFunctionCalling = uiSettings!.get<boolean>(
@@ -252,14 +252,57 @@ export function ChatBody({
   });
 
   const handleCopyConversation = () => {
-    const deserializedMessages = (conversation.value?.messages ?? messages).map(deserializeMessage);
+    try {
+      const deserializedMessages = (conversation.value?.messages ?? messages).map(
+        deserializeMessage
+      );
+
+      const content = JSON.stringify({
+        title: initialTitle,
+        messages: deserializedMessages,
+      });
+
+      navigator.clipboard?.writeText(content || '');
+
+      notifications!.toasts.addSuccess({
+        title: i18n.translate('xpack.aiAssistant.copyConversationSuccessToast', {
+          defaultMessage: 'Conversation copied to clipboard',
+        }),
+      });
+    } catch (error) {
+      notifications!.toasts.addError(error, {
+        title: i18n.translate('xpack.aiAssistant.copyConversationErrorToast', {
+          defaultMessage: 'Could not copy conversation',
+        }),
+      });
+    }
+  };
 
-    const content = JSON.stringify({
-      title: initialTitle,
-      messages: deserializedMessages,
-    });
+  const handleCopyUrl = () => {
+    try {
+      const deserializedMessages = (conversation.value?.messages ?? messages).map(
+        deserializeMessage
+      );
 
-    navigator.clipboard?.writeText(content || '');
+      const content = JSON.stringify({
+        title: initialTitle,
+        messages: deserializedMessages,
+      });
+
+      navigator.clipboard?.writeText(content || '');
+
+      notifications!.toasts.addSuccess({
+        title: i18n.translate('xpack.aiAssistant.copyUrlSuccessToast', {
+          defaultMessage: 'URL copied to clipboard',
+        }),
+      });
+    } catch (error) {
+      notifications!.toasts.addError(error, {
+        title: i18n.translate('xpack.aiAssistant.copyUrlErrorToast', {
+          defaultMessage: 'Could not copy URL',
+        }),
+      });
+    }
   };
 
   const handleActionClick = ({

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_context_menu.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_context_menu.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButtonIcon,
+  EuiPopover,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiToolTip,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export function ChatContextMenu({
+  onCopyConversationClick,
+  disabled,
+}: {
+  onCopyConversationClick: () => void;
+  disabled: boolean;
+}) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <EuiPopover
+      button={
+        <EuiToolTip
+          content={i18n.translate('xpack.aiAssistant.chatHeader.contextMenu.chatActionsTooltip', {
+            defaultMessage: 'Chat actions',
+          })}
+          display="block"
+        >
+          <EuiButtonIcon
+            data-test-subj="observabilityAiAssistantChatContextMenuButtonIcon"
+            iconType="boxesHorizontal"
+            disabled={disabled}
+            aria-label={i18n.translate('xpack.aiAssistant.chatHeader.contextMenu.iconAreaLabel', {
+              defaultMessage: 'Chat context menu',
+            })}
+            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+          />
+        </EuiToolTip>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopoverOpen(false)}
+      anchorPosition="downCenter"
+      panelPaddingSize="xs"
+    >
+      <EuiContextMenuPanel
+        size="s"
+        items={[
+          <EuiContextMenuItem
+            key="copyConversation"
+            icon="copyClipboard"
+            onClick={() => {
+              onCopyConversationClick();
+              setIsPopoverOpen(false);
+            }}
+          >
+            {i18n.translate('xpack.aiAssistant.chatHeader.contextMenu.copyConversation', {
+              defaultMessage: 'Copy conversation',
+            })}
+          </EuiContextMenuItem>,
+          <EuiContextMenuItem
+            key="copyURL"
+            icon="link"
+            onClick={() => {
+              navigator.clipboard.writeText(window.location.href);
+              setIsPopoverOpen(false);
+            }}
+          >
+            {i18n.translate('xpack.aiAssistant.chatHeader.contextMenu.copyURL', {
+              defaultMessage: 'Copy URL',
+            })}
+          </EuiContextMenuItem>,
+        ]}
+      />
+    </EuiPopover>
+  );
+}