[8.x] [Obs AI Assistant] Fix editing prompt from contextual insights (#…

…206673) (#206982)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Obs AI Assistant] Fix editing prompt from contextual insights
(#206673)](#206673)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Viduni
Wickramarachchi","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-16T16:52:44Z","message":"[Obs
AI Assistant] Fix editing prompt from contextual insights
(#206673)\n\nCloses
https://github.com/elastic/kibana/issues/201642\r\n\r\n##
Summary\r\n\r\n### Problem\r\n1. Before a conversation is generated from
contextual insights (before\r\n`Help me understand this alert` is
clicked), if the user clicks on `Edit\r\nPrompt`, the prompt to edit is
not loaded. An empty input box is loaded.\r\n2. When a new prompt is
typed in the empty input box and submitted, it\r\nthrows an error
(because the way the new prompt is assigned to the\r\nconversation
errors out)\r\n3. After clicking on \"Help me understand this alert\",
if the user clicks\r\non `Edit Prompt`, a large string is loaded with
contextual information,\r\nas the prompt to edit. This is not
user-friendly.\r\n\r\n(All of the above can be seen in the screen
recording before the changes\r\n- attached below)\r\n\r\n###
Solution\r\n1. Wait for the messages to be generated and then load the
correct\r\ninitial prompt to edit.\r\n2. When re-assigning the new
prompt to the messages, make sure to parse\r\nit and then assign
correctly so that editing the prompt is user\r\nfriendly.\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"10a221553a1b0b4d66afd5b887e4115e3412d9d3","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","Team:Obs
AI
Assistant","Team:obs-ux-management","backport:version","v8.18.0"],"title":"[Obs
AI Assistant] Fix editing prompt from contextual
insights","number":206673,"url":"https://github.com/elastic/kibana/pull/206673","mergeCommit":{"message":"[Obs
AI Assistant] Fix editing prompt from contextual insights
(#206673)\n\nCloses
https://github.com/elastic/kibana/issues/201642\r\n\r\n##
Summary\r\n\r\n### Problem\r\n1. Before a conversation is generated from
contextual insights (before\r\n`Help me understand this alert` is
clicked), if the user clicks on `Edit\r\nPrompt`, the prompt to edit is
not loaded. An empty input box is loaded.\r\n2. When a new prompt is
typed in the empty input box and submitted, it\r\nthrows an error
(because the way the new prompt is assigned to the\r\nconversation
errors out)\r\n3. After clicking on \"Help me understand this alert\",
if the user clicks\r\non `Edit Prompt`, a large string is loaded with
contextual information,\r\nas the prompt to edit. This is not
user-friendly.\r\n\r\n(All of the above can be seen in the screen
recording before the changes\r\n- attached below)\r\n\r\n###
Solution\r\n1. Wait for the messages to be generated and then load the
correct\r\ninitial prompt to edit.\r\n2. When re-assigning the new
prompt to the messages, make sure to parse\r\nit and then assign
correctly so that editing the prompt is user\r\nfriendly.\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"10a221553a1b0b4d66afd5b887e4115e3412d9d3"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206673","number":206673,"mergeCommit":{"message":"[Obs
AI Assistant] Fix editing prompt from contextual insights
(#206673)\n\nCloses
https://github.com/elastic/kibana/issues/201642\r\n\r\n##
Summary\r\n\r\n### Problem\r\n1. Before a conversation is generated from
contextual insights (before\r\n`Help me understand this alert` is
clicked), if the user clicks on `Edit\r\nPrompt`, the prompt to edit is
not loaded. An empty input box is loaded.\r\n2. When a new prompt is
typed in the empty input box and submitted, it\r\nthrows an error
(because the way the new prompt is assigned to the\r\nconversation
errors out)\r\n3. After clicking on \"Help me understand this alert\",
if the user clicks\r\non `Edit Prompt`, a large string is loaded with
contextual information,\r\nas the prompt to edit. This is not
user-friendly.\r\n\r\n(All of the above can be seen in the screen
recording before the changes\r\n- attached below)\r\n\r\n###
Solution\r\n1. Wait for the messages to be generated and then load the
correct\r\ninitial prompt to edit.\r\n2. When re-assigning the new
prompt to the messages, make sure to parse\r\nit and then assign
correctly so that editing the prompt is user\r\nfriendly.\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"10a221553a1b0b4d66afd5b887e4115e3412d9d3"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Viduni Wickramarachchi <[email protected]>

x-pack/platform/plugins/shared/observability_solution/observability_ai_assistant/public/components/insight/insight.tsx

@@ -14,6 +14,7 @@ import {
   EuiText,
   EuiTextArea,
   EuiCallOut,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { cloneDeep, isArray, isEmpty, last, once } from 'lodash';
@@ -288,16 +289,47 @@ export function Insight({
     [service]
   );
 
+  const getPromptToEdit = () => {
+    const clonedMessages = cloneDeep(messages.messages);
+    const lastUserPrompt = getLastMessageOfType(clonedMessages, MessageRole.User)?.message.content;
+
+    if (!lastUserPrompt) {
+      return '';
+    }
+
+    try {
+      const { instructions = '' } = JSON.parse(lastUserPrompt);
+      return instructions.trim();
+    } catch (e) {
+      return '';
+    }
+  };
+
   const onEditPrompt = (newPrompt: string) => {
     const clonedMessages = cloneDeep(messages.messages);
     const userMessage = getLastMessageOfType(clonedMessages, MessageRole.User);
     if (!userMessage) return false;
 
-    userMessage.message.content = newPrompt;
-    setIsPromptUpdated(true);
-    setMessages({ messages: clonedMessages, status: FETCH_STATUS.SUCCESS });
-    setEditingPrompt(false);
-    return true;
+    try {
+      const parsedContent = JSON.parse(userMessage.message.content || '');
+
+      if (!parsedContent.instructions) {
+        return false;
+      }
+
+      // Assign the updated instructions
+      parsedContent.instructions = newPrompt;
+      userMessage.message.content = JSON.stringify(parsedContent);
+
+      setIsPromptUpdated(true);
+      setMessages({ messages: clonedMessages, status: FETCH_STATUS.SUCCESS });
+      setEditingPrompt(false);
+      return true;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to edit prompt:', e);
+      return false;
+    }
   };
 
   const handleCancel = () => {
@@ -372,15 +404,15 @@ export function Insight({
       </>
     );
   } else if (isEditingPrompt) {
-    children = (
-      <PromptEdit
-        initialPrompt={
-          getLastMessageOfType(messages.messages, MessageRole.User)?.message.content || ''
-        }
-        onSend={onEditPrompt}
-        onCancel={handleCancel}
-      />
-    );
+    const promptToEdit = getPromptToEdit();
+
+    if (messages.status === FETCH_STATUS.SUCCESS && promptToEdit) {
+      children = (
+        <PromptEdit initialPrompt={promptToEdit} onSend={onEditPrompt} onCancel={handleCancel} />
+      );
+    } else {
+      children = <EuiLoadingSpinner size="m" />;
+    }
   } else if (!connectors.loading && !connectors.connectors?.length) {
     children = (
       <MissingCredentialsCallout connectorsManagementHref={getConnectorsManagementHref(http!)} />