[Agent Builder] Enable creating a new conversation from flyout (#241322)

Author: chrisbmar

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_header.tsx

@@ -18,20 +18,22 @@ import { ConversationSidebarToggle } from './conversation_sidebar/conversation_s
 import { ConversationTitle } from './conversation_title';
 
 interface ConversationHeaderProps {
-  isSidebarOpen: boolean;
-  onToggleSidebar: () => void;
+  sidebar?: {
+    isOpen: boolean;
+    onToggle: () => void;
+  };
 }
 
-export const ConversationHeader: React.FC<ConversationHeaderProps> = ({
-  isSidebarOpen,
-  onToggleSidebar,
-}) => {
+export const ConversationHeader: React.FC<ConversationHeaderProps> = ({ sidebar }) => {
   const hasActiveConversation = useHasActiveConversation();
+
   return (
     <ConversationGrid>
-      <ConversationLeft>
-        <ConversationSidebarToggle isSidebarOpen={isSidebarOpen} onToggle={onToggleSidebar} />
-      </ConversationLeft>
+      {sidebar && (
+        <ConversationLeft>
+          <ConversationSidebarToggle isSidebarOpen={sidebar.isOpen} onToggle={sidebar.onToggle} />
+        </ConversationLeft>
+      )}
       {hasActiveConversation && (
         <>
           <ConversationCenter>

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversations_view.tsx

@@ -83,9 +83,11 @@ export const OnechatConversationsView: React.FC<{}> = () => {
             paddingSize="m"
           >
             <ConversationHeader
-              isSidebarOpen={isSidebarOpen}
-              onToggleSidebar={() => {
-                setIsSidebarOpen((open) => !open);
+              sidebar={{
+                isOpen: isSidebarOpen,
+                onToggle: () => {
+                  setIsSidebarOpen((open) => !open);
+                },
               }}
             />
           </KibanaPageTemplate.Header>

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_button.tsx

@@ -13,9 +13,11 @@ import { appPaths } from '../../utils/app_paths';
 import { useConversationId } from '../../context/conversation/use_conversation_id';
 import { useIsSendingMessage } from '../../hooks/use_is_sending_message';
 import { useSendMessage } from '../../context/send_message/send_message_context';
+import { useConversationContext } from '../../context/conversation/conversation_context';
 
 export const NewConversationButton: React.FC<{}> = () => {
   const { createOnechatUrl } = useNavigation();
+  const { isEmbeddedContext, setConversationId } = useConversationContext();
   const conversationId = useConversationId();
   const isNewConversation = !conversationId;
   const isSendingMessage = useIsSendingMessage();
@@ -27,12 +29,17 @@ export const NewConversationButton: React.FC<{}> = () => {
     if (isNewConversation) {
       cleanConversation();
     }
+    if (isEmbeddedContext) {
+      setConversationId?.(undefined);
+    }
   };
 
   const buttonProps = isDisabled
     ? {
         disabled: true,
       }
+    : isEmbeddedContext
+    ? {}
     : {
         href: createOnechatUrl(appPaths.chat.new),
       };

x-pack/platform/plugins/shared/onechat/public/application/context/conversation/conversation_context.tsx

@@ -15,7 +15,7 @@ interface ConversationContextValue {
   sessionTag?: string;
   agentId?: string;
   initialMessage?: string;
-  setConversationId?: (conversationId: string) => void;
+  setConversationId?: (conversationId?: string) => void;
   conversationActions: ConversationActions;
 }
 

x-pack/platform/plugins/shared/onechat/public/application/context/conversation/embeddable_conversations_provider.tsx

@@ -5,19 +5,16 @@
  * 2.0.
  */
 
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useEffect, useCallback, useRef } from 'react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { QueryClient, QueryClientProvider } from '@kbn/react-query';
 import type { EmbeddableConversationInternalProps } from '../../../embeddable/types';
 import { ConversationContext } from './conversation_context';
 import { OnechatServicesContext } from '../onechat_services_context';
 import { SendMessageProvider } from '../send_message/send_message_context';
-import { queryKeys } from '../../query_keys';
-import { newConversationId } from '../../utils/new_conversation';
 import { useConversationActions } from './use_conversation_actions';
-import { useResolveConversationId } from '../../hooks/use_resolve_conversation_id';
-import { useSaveLastConversationId } from '../../hooks/use_save_last_conversation_id';
+import { usePersistedConversationId } from '../../hooks/use_persisted_conversation_id';
 
 interface EmbeddableConversationsProviderProps extends EmbeddableConversationInternalProps {
   children: React.ReactNode;
@@ -40,89 +37,89 @@ export const EmbeddableConversationsProvider: React.FC<EmbeddableConversationsPr
     [coreStart, services.startDependencies]
   );
 
-  const resolvedConversationId = useResolveConversationId({
-    newConversation: contextProps.newConversation,
-    conversationId: contextProps.conversationId,
+  const { persistedConversationId, updatePersistedConversationId } = usePersistedConversationId({
     sessionTag: contextProps.sessionTag,
     agentId: contextProps.agentId,
   });
 
-  const [conversationId, setConversationId] = useState<string | undefined>(undefined);
+  const hasInitializedConversationIdRef = useRef(false);
+
+  const setConversationId = useCallback(
+    (id?: string) => {
+      if (id !== persistedConversationId) {
+        updatePersistedConversationId(id);
+      }
+    },
+    [persistedConversationId, updatePersistedConversationId]
+  );
 
   const validateAndSetConversationId = useCallback(
     async (id: string) => {
       try {
         const conversation = await services.conversationsService.get({ conversationId: id });
-        setConversationId(conversation ? id : undefined);
+        setConversationId(conversation.id ?? undefined);
       } catch {
         setConversationId(undefined);
       }
     },
-    [services.conversationsService]
+    [services.conversationsService, setConversationId]
   );
 
+  // One-time initialization per provider instance:
+  // - If newConversation flag is set, clears the conversation ID to start fresh.
+  // - Otherwise, if there's a persisted conversation ID, validates and restores it.
+  // - Otherwise, clears the conversation ID.
+  // Guarded by hasInitializedConversationIdRef to prevent re-running on subsequent renders.
   useEffect(() => {
-    if (!resolvedConversationId) {
+    if (hasInitializedConversationIdRef.current) return;
+
+    if (contextProps.newConversation) {
+      setConversationId(undefined);
+    } else if (persistedConversationId) {
+      validateAndSetConversationId(persistedConversationId);
+    } else {
       setConversationId(undefined);
-      return;
     }
-    validateAndSetConversationId(resolvedConversationId);
-  }, [resolvedConversationId, validateAndSetConversationId]);
-
-  useSaveLastConversationId({
-    conversationId,
-    sessionTag: contextProps.sessionTag,
-    agentId: contextProps.agentId,
-  });
-
-  const queryKey = queryKeys.conversations.byId(conversationId ?? newConversationId);
+    hasInitializedConversationIdRef.current = true;
+  }, [
+    contextProps.newConversation,
+    persistedConversationId,
+    setConversationId,
+    validateAndSetConversationId,
+  ]);
 
   const onConversationCreated = useCallback(
     ({ conversationId: id }: { conversationId: string }) => {
-      // Update conversationId to show the newly created conversation in the UI
       setConversationId(id);
     },
-    []
-  );
-
-  const onDeleteConversation = useCallback(
-    ({ isCurrentConversation }: { isCurrentConversation: boolean }) => {
-      if (isCurrentConversation) {
-        // For embeddable context, we can't navigate, just reset the conversation ID
-        setConversationId(undefined);
-      }
-    },
-    []
+    [setConversationId]
   );
 
   const conversationActions = useConversationActions({
-    conversationId,
-    queryKey,
+    conversationId: persistedConversationId,
     queryClient,
     conversationsService: services.conversationsService,
     onConversationCreated,
-    onDeleteConversation,
   });
 
   const conversationContextValue = useMemo(
     () => ({
-      conversationId,
+      conversationId: persistedConversationId,
       shouldStickToBottom: true,
       isEmbeddedContext: true,
       sessionTag: contextProps.sessionTag,
       agentId: contextProps.agentId,
       initialMessage: contextProps.initialMessage,
-      setConversationId: (id: string) => {
-        setConversationId(id);
-      },
+      setConversationId,
       conversationActions,
     }),
     [
-      conversationId,
+      persistedConversationId,
       contextProps.sessionTag,
       contextProps.agentId,
       contextProps.initialMessage,
       conversationActions,
+      setConversationId,
     ]
   );
 

x-pack/platform/plugins/shared/onechat/public/application/context/conversation/routed_conversations_provider.tsx

@@ -12,7 +12,6 @@ import { useQueryClient } from '@kbn/react-query';
 import { ConversationContext } from './conversation_context';
 import type { LocationState } from '../../hooks/use_navigation';
 import { newConversationId } from '../../utils/new_conversation';
-import { queryKeys } from '../../query_keys';
 import { appPaths } from '../../utils/app_paths';
 import { useNavigation } from '../../hooks/use_navigation';
 import { useOnechatServices } from '../../hooks/use_onechat_service';
@@ -43,7 +42,6 @@ export const RoutedConversationsProvider: React.FC<RoutedConversationsProviderPr
   const { agents } = useOnechatAgents();
 
   const { navigateToOnechatUrl } = useNavigation();
-  const queryKey = queryKeys.conversations.byId(conversationId ?? newConversationId);
   const shouldAllowConversationRedirectRef = useRef(true);
   const agentIdSyncedRef = useRef(false);
 
@@ -87,7 +85,6 @@ export const RoutedConversationsProvider: React.FC<RoutedConversationsProviderPr
 
   const conversationActions = useConversationActions({
     conversationId,
-    queryKey,
     queryClient,
     conversationsService,
     onConversationCreated,

x-pack/platform/plugins/shared/onechat/public/application/context/conversation/use_conversation_actions.ts

@@ -61,7 +61,6 @@ export interface ConversationActions {
 
 interface UseConversationActionsParams {
   conversationId?: string;
-  queryKey: string[];
   queryClient: QueryClient;
   conversationsService: ConversationsService;
   onConversationCreated?: (params: { conversationId: string; title: string }) => void;
@@ -70,13 +69,13 @@ interface UseConversationActionsParams {
 
 export const useConversationActions = ({
   conversationId,
-  queryKey,
   queryClient,
   conversationsService,
   onConversationCreated,
   onDeleteConversation,
 }: UseConversationActionsParams): ConversationActions => {
   const [, setAgentIdStorage] = useLocalStorage<string>(storageKeys.agentId);
+  const queryKey = queryKeys.conversations.byId(conversationId ?? newConversationId);
 
   const setConversation = useCallback(
     (updater: (conversation?: Conversation) => Conversation) => {

x-pack/platform/plugins/shared/onechat/public/application/hooks/use_last_conversation_id.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 useLocalStorage from 'react-use/lib/useLocalStorage';
+import { storageKeys } from '../storage_keys';
+
+interface UsePersistedConversationIdParams {
+  sessionTag?: string;
+  agentId?: string;
+}
+
+export const usePersistedConversationId = ({
+  sessionTag,
+  agentId,
+}: UsePersistedConversationIdParams) => {
+  const storageKey = storageKeys.getLastConversationKey(sessionTag, agentId);
+  const [persistedConversationId, setPersistedConversationId, clearPersistedConversationId] =
+    useLocalStorage<string>(storageKey);
+
+  const updatePersistedConversationId = (id?: string) => {
+    if (id) {
+      setPersistedConversationId(id);
+    } else {
+      clearPersistedConversationId();
+    }
+  };
+
+  return {
+    persistedConversationId,
+    updatePersistedConversationId,
+  };
+};