[8.x] [Observability AI Assistant] duplicate conversations (#208044) (#…

…213167) # Backport This will backport the following commits from `main` to `8.x`: - [[Observability AI Assistant] duplicate conversations (#208044)](#208044)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Arturo Lidueña <arturo.liduena@elastic.co>
elastic · Mar 5, 2025 · f2f5660 · f2f5660
1 parent 4850d36
commit f2f5660
Show file tree

Hide file tree

Showing 18 changed files with 707 additions and 132 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
@@ -25,11 +25,13 @@ export function ChatActionsMenu({
   conversationId,
   disabled,
   onCopyConversationClick,
+  onDuplicateConversationClick,
 }: {
   connectors: UseGenAIConnectorsResult;
   conversationId?: string;
   disabled: boolean;
   onCopyConversationClick: () => void;
+  onDuplicateConversationClick: () => void;
 }) {
   const { application, http } = useKibana().services;
   const knowledgeBase = useKnowledgeBase();
@@ -141,6 +143,16 @@ export function ChatActionsMenu({
                   onCopyConversationClick();
                 },
               },
+              {
+                name: i18n.translate('xpack.aiAssistant.chatHeader.actions.duplicateConversation', {
+                  defaultMessage: 'Duplicate',
+                }),
+                disabled: !conversationId,
+                onClick: () => {
+                  toggleActionsMenu();
+                  onDuplicateConversationClick();
+                },
+              },
             ],
           },
           {

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
@@ -6,13 +6,16 @@
  */
 
 import {
+  EuiButton,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiIcon,
   EuiPanel,
   euiScrollBarStyles,
   EuiSpacer,
+  EuiText,
   useEuiTheme,
 } from '@elastic/eui';
 import { css, keyframes } from '@emotion/css';
@@ -45,8 +48,8 @@ import { SimulatedFunctionCallingCallout } from './simulated_function_calling_ca
 import { WelcomeMessage } from './welcome_message';
 import { useLicense } from '../hooks/use_license';
 import { PromptEditor } from '../prompt_editor/prompt_editor';
-import { deserializeMessage } from '../utils/deserialize_message';
 import { useKibana } from '../hooks/use_kibana';
+import { deserializeMessage } from '../utils/deserialize_message';
 
 const fullHeightClassName = css`
   height: 100%;
@@ -113,16 +116,18 @@ export function ChatBody({
   onConversationUpdate,
   onToggleFlyoutPositionMode,
   navigateToConversation,
+  onConversationDuplicate,
 }: {
   connectors: ReturnType<typeof useGenAIConnectors>;
-  currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
+  currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username' | 'profile_uid'>;
   flyoutPositionMode?: FlyoutPositionMode;
   initialTitle?: string;
   initialMessages?: Message[];
   initialConversationId?: string;
   knowledgeBase: UseKnowledgeBaseResult;
   showLinkToConversationsApp: boolean;
   onConversationUpdate: (conversation: { conversation: Conversation['conversation'] }) => void;
+  onConversationDuplicate: (conversation: Conversation) => void;
   onToggleFlyoutPositionMode?: (flyoutPositionMode: FlyoutPositionMode) => void;
   navigateToConversation?: (conversationId?: string) => void;
 }) {
@@ -142,13 +147,26 @@ export function ChatBody({
     false
   );
 
-  const { conversation, messages, next, state, stop, saveTitle } = useConversation({
+  const {
+    conversation,
+    conversationId,
+    messages,
+    next,
+    state,
+    stop,
+    saveTitle,
+    duplicateConversation,
+    isConversationOwnedByCurrentUser,
+    user: conversationUser,
+  } = useConversation({
+    currentUser,
     initialConversationId,
     initialMessages,
     initialTitle,
     chatService,
     connectorId: connectors.selectedConnector,
     onConversationUpdate,
+    onConversationDuplicate,
   });
 
   const timelineContainerRef = useRef<HTMLDivElement | null>(null);
@@ -385,28 +403,65 @@ export function ChatBody({
                   }
                 />
               ) : (
-                <ChatTimeline
-                  messages={messages}
-                  knowledgeBase={knowledgeBase}
-                  chatService={chatService}
-                  currentUser={currentUser}
-                  chatState={state}
-                  hasConnector={!!connectors.connectors?.length}
-                  onEdit={(editedMessage, newMessage) => {
-                    setStickToBottom(true);
-                    const indexOf = messages.indexOf(editedMessage);
-                    next(messages.slice(0, indexOf).concat(newMessage));
-                  }}
-                  onFeedback={handleFeedback}
-                  onRegenerate={(message) => {
-                    next(reverseToLastUserMessage(messages, message));
-                  }}
-                  onSendTelemetry={(eventWithPayload) =>
-                    chatService.sendAnalyticsEvent(eventWithPayload)
-                  }
-                  onStopGenerating={stop}
-                  onActionClick={handleActionClick}
-                />
+                <>
+                  <ChatTimeline
+                    conversationId={conversationId}
+                    messages={messages}
+                    knowledgeBase={knowledgeBase}
+                    chatService={chatService}
+                    currentUser={conversationUser}
+                    isConversationOwnedByCurrentUser={isConversationOwnedByCurrentUser}
+                    chatState={state}
+                    hasConnector={!!connectors.connectors?.length}
+                    onEdit={(editedMessage, newMessage) => {
+                      setStickToBottom(true);
+                      const indexOf = messages.indexOf(editedMessage);
+                      next(messages.slice(0, indexOf).concat(newMessage));
+                    }}
+                    onFeedback={handleFeedback}
+                    onRegenerate={(message) => {
+                      next(reverseToLastUserMessage(messages, message));
+                    }}
+                    onSendTelemetry={(eventWithPayload) =>
+                      chatService.sendAnalyticsEvent(eventWithPayload)
+                    }
+                    onStopGenerating={stop}
+                    onActionClick={handleActionClick}
+                  />
+                  {conversationId && !isConversationOwnedByCurrentUser ? (
+                    <>
+                      <EuiPanel paddingSize="m" hasShadow={false} color="subdued">
+                        <EuiFlexGroup>
+                          <EuiFlexItem grow={false}>
+                            <EuiIcon size="l" type="users" />
+                          </EuiFlexItem>
+                          <EuiFlexItem grow>
+                            <EuiText size="xs">
+                              <h3>
+                                {i18n.translate('xpack.aiAssistant.sharedBanner.title', {
+                                  defaultMessage: 'This conversation is shared with your team.',
+                                })}
+                              </h3>
+                              <p>
+                                {i18n.translate('xpack.aiAssistant.sharedBanner.description', {
+                                  defaultMessage: `You can’t edit or continue this conversation, but you can duplicate
+                                it into a new private conversation. The original conversation will
+                                remain unchanged.`,
+                                })}
+                              </p>
+                              <EuiButton onClick={duplicateConversation} iconType="copy" size="s">
+                                {i18n.translate('xpack.aiAssistant.duplicateButton', {
+                                  defaultMessage: 'Duplicate',
+                                })}
+                              </EuiButton>
+                            </EuiText>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </EuiPanel>
+                      <EuiSpacer size="m" />
+                    </>
+                  ) : null}
+                </>
               )}
             </EuiPanel>
           </div>
@@ -432,7 +487,11 @@ export function ChatBody({
             className={promptEditorContainerClassName}
           >
             <PromptEditor
-              disabled={!connectors.selectedConnector || !hasCorrectLicense}
+              disabled={
+                !connectors.selectedConnector ||
+                !hasCorrectLicense ||
+                (!!conversationId && !isConversationOwnedByCurrentUser)
+              }
               hidden={connectors.loading || connectors.connectors?.length === 0}
               loading={isLoading}
               onChangeHeight={handleChangeHeight}
@@ -509,23 +568,21 @@ export function ChatBody({
       <EuiFlexItem grow={false} className={headerContainerClassName}>
         <ChatHeader
           connectors={connectors}
-          conversationId={
-            conversation.value?.conversation && 'id' in conversation.value.conversation
-              ? conversation.value.conversation.id
-              : undefined
-          }
+          conversationId={conversationId}
           flyoutPositionMode={flyoutPositionMode}
           licenseInvalid={!hasCorrectLicense && !initialConversationId}
           loading={isLoading}
           title={title}
           onCopyConversation={handleCopyConversation}
+          onDuplicateConversation={duplicateConversation}
           onSaveTitle={(newTitle) => {
             saveTitle(newTitle);
           }}
           onToggleFlyoutPositionMode={onToggleFlyoutPositionMode}
           navigateToConversation={
             initialMessages?.length && !initialConversationId ? undefined : navigateToConversation
           }
+          isConversationOwnedByCurrentUser={isConversationOwnedByCurrentUser}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_consolidated_items.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_consolidated_items.tsx
@@ -49,6 +49,7 @@ const noPanelStyle = css`
 
 export function ChatConsolidatedItems({
   consolidatedItem,
+  isConversationOwnedByCurrentUser,
   onActionClick,
   onEditSubmit,
   onFeedback,
@@ -57,6 +58,7 @@ export function ChatConsolidatedItems({
   onStopGenerating,
 }: {
   consolidatedItem: ChatTimelineItem[];
+  isConversationOwnedByCurrentUser: ChatTimelineProps['isConversationOwnedByCurrentUser'];
   onActionClick: ChatTimelineProps['onActionClick'];
   onEditSubmit: ChatTimelineProps['onEdit'];
   onFeedback: ChatTimelineProps['onFeedback'];
@@ -134,6 +136,7 @@ export function ChatConsolidatedItems({
               }}
               onSendTelemetry={onSendTelemetry}
               onStopGeneratingClick={onStopGenerating}
+              isConversationOwnedByCurrentUser={isConversationOwnedByCurrentUser}
             />
           ))
         : null}

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_flyout.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
-import { Message } from '@kbn/observability-ai-assistant-plugin/common';
+import { Conversation, Message } from '@kbn/observability-ai-assistant-plugin/common';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useConversationKey } from '../hooks/use_conversation_key';
@@ -42,7 +42,7 @@ export enum FlyoutPositionMode {
 
 export function ChatFlyout({
   initialTitle,
-  initialMessages,
+  initialMessages: initialMessagesFromProps,
   initialFlyoutPositionMode,
   onFlyoutPositionModeChange,
   isOpen,
@@ -69,6 +69,7 @@ export function ChatFlyout({
   const knowledgeBase = useKnowledgeBase();
 
   const [conversationId, setConversationId] = useState<string | undefined>(undefined);
+  const [initialMessages, setInitialMessages] = useState(initialMessagesFromProps);
 
   const [flyoutPositionMode, setFlyoutPositionMode] = useState<FlyoutPositionMode>(
     initialFlyoutPositionMode || FlyoutPositionMode.OVERLAY
@@ -88,6 +89,12 @@ export function ChatFlyout({
 
   const { key: bodyKey, updateConversationIdInPlace } = useConversationKey(conversationId);
 
+  const onConversationDuplicate = (conversation: Conversation) => {
+    conversationList.conversations.refresh();
+    setInitialMessages([]);
+    setConversationId(conversation.conversation.id);
+  };
+
   const flyoutClassName = css`
     max-inline-size: 100% !important;
   `;
@@ -287,6 +294,7 @@ export function ChatFlyout({
                     }
                   : undefined
               }
+              onConversationDuplicate={onConversationDuplicate}
             />
           </EuiFlexItem>
 

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.tsx
@@ -46,7 +46,9 @@ export function ChatHeader({
   licenseInvalid,
   loading,
   title,
+  isConversationOwnedByCurrentUser,
   onCopyConversation,
+  onDuplicateConversation,
   onSaveTitle,
   onToggleFlyoutPositionMode,
   navigateToConversation,
@@ -57,7 +59,9 @@ export function ChatHeader({
   licenseInvalid: boolean;
   loading: boolean;
   title: string;
+  isConversationOwnedByCurrentUser: boolean;
   onCopyConversation: () => void;
+  onDuplicateConversation: () => void;
   onSaveTitle: (title: string) => void;
   onToggleFlyoutPositionMode?: (newFlyoutPositionMode: FlyoutPositionMode) => void;
   navigateToConversation?: (nextConversationId?: string) => void;
@@ -113,7 +117,8 @@ export function ChatHeader({
               !conversationId ||
               !connectors.selectedConnector ||
               licenseInvalid ||
-              !Boolean(onSaveTitle)
+              !Boolean(onSaveTitle) ||
+              !isConversationOwnedByCurrentUser
             }
             onChange={(e) => {
               setNewTitle(e.currentTarget.nodeValue || '');
@@ -199,6 +204,7 @@ export function ChatHeader({
                 conversationId={conversationId}
                 disabled={licenseInvalid}
                 onCopyConversationClick={onCopyConversation}
+                onDuplicateConversationClick={onDuplicateConversation}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_item.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_item.tsx
@@ -35,6 +35,7 @@ export interface ChatItemProps extends Omit<ChatTimelineItem, 'message'> {
   onRegenerateClick: () => void;
   onSendTelemetry: (eventWithPayload: TelemetryEventTypeWithPayload) => void;
   onStopGeneratingClick: () => void;
+  isConversationOwnedByCurrentUser: boolean;
 }
 
 const moreCompactHeaderClassName = css`
@@ -87,6 +88,7 @@ export function ChatItem({
   error,
   loading,
   title,
+  isConversationOwnedByCurrentUser,
   onActionClick,
   onEditSubmit,
   onFeedbackClick,
@@ -167,7 +169,11 @@ export function ChatItem({
   return (
     <EuiComment
       timelineAvatar={<ChatItemAvatar loading={loading} currentUser={currentUser} role={role} />}
-      username={getRoleTranslation(role)}
+      username={getRoleTranslation({
+        role,
+        isCurrentUser: isConversationOwnedByCurrentUser,
+        username: currentUser?.username,
+      })}
       event={title}
       actions={
         <ChatItemActions