From ca824e547edd62b9711d0636f33dfb75fca9b797 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 27 Oct 2023 13:23:47 +0200
Subject: [PATCH] [FIX] web_editor: do not base selected alternative on index

When selecting an alternative in the AI Copywriter dialog, what we store
in the state is the index of the message. But that targets a different
message every time we add each new message at the start of the list.

This pushes new messages at the end of the list and only displays them
in reverse order, but also adds an ID to each message so they can be
targeted more robustly.

Part-of: odoo/odoo#139857
---
 .../wysiwyg/widgets/chatgpt_alternatives_dialog.js |  5 +++--
 .../widgets/chatgpt_alternatives_dialog.xml        | 10 +++++-----
 .../src/js/wysiwyg/widgets/chatgpt_dialog.js       |  7 ++++---
 .../js/wysiwyg/widgets/chatgpt_prompt_dialog.js    | 14 ++++++++++----
 .../js/wysiwyg/widgets/chatgpt_prompt_dialog.xml   |  2 +-
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
index 07d46032b5f..ac71dc05a26 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.js
@@ -25,7 +25,7 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
     setup() {
         super.setup();
         this.state = useState({
-            selectedMessage: null,
+            ...this.state,
             conversationHistory: [{
                 role: 'system',
                 content: 'The user wrote the following text:\n' +
@@ -86,12 +86,13 @@ export class ChatGPTAlternativesDialog extends ChatGPTDialog {
                             content,
                         });
                     }
-                    this.state.messages.unshift({
+                    this.state.messages.push({
                         author: 'assistant',
                         text: alternative,
                         isError,
                         batchId,
                         mode: this.state.alternativesMode,
+                        id: new Date().getTime(),
                     });
                 }
             }).catch(() => {
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
index 49d9ed5c303..c398105a2b9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_alternatives_dialog.xml
@@ -23,7 +23,7 @@
                         <em t-else="">Generating <t t-out="state.messagesInProgress"/> alternatives...</em>
                     </p>
                 </div>
-                <t t-foreach="state.messages" t-as="message" t-key="message_index">
+                <t t-foreach="[...state.messages].reverse()" t-as="message" t-key="message.id">
                     <t t-if="message.isError">
                         <div class="list-group-item o-chatgpt-alternative border-danger bg-danger o-message-error"
                             t-att-class="{ 'text-muted': state.currentBatchId != message.batchId }">
@@ -33,10 +33,10 @@
                     <t t-else="">
                         <button type="button" class="list-group-item list-group-item-action o-chatgpt-alternative"
                             t-on-click="selectMessage"
-                            t-att-data-message-index="message_index"
+                            t-att-data-message-id="message.id"
                             t-att-class="{
-                                active: state.selectedMessage == message_index,
-                                'text-muted': state.currentBatchId != message.batchId,
+                                active: state.selectedMessageId == message.id,
+                                'text-muted': state.selectedMessageId != message.id and state.currentBatchId != message.batchId,
                             }">
                             <span t-if="message.mode" class="badge bg-secondary float-end"><t t-out="props.alternativesModes[message.mode]"/></span>
                             <t t-out="formatContent(message.text)"/>
@@ -49,7 +49,7 @@
         <!-- FOOTER -->
         <t t-set-slot="footer">
             <button class="btn btn-primary" t-on-click="_confirm"
-                t-att-disabled="typeof state.selectedMessage !== 'number'">Insert</button>
+                t-att-disabled="typeof state.selectedMessageId !== 'number'">Insert</button>
             <button class="btn btn-secondary" t-on-click="_cancel">Cancel</button>
         </t>
     </Dialog>
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_dialog.js
index 14c90ee6f2a..285c86b0e49 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_dialog.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Component, markup } from "@odoo/owl";
+import { Component, useState, markup } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
 import { Dialog } from "@web/core/dialog/dialog";
 import { escape } from "@web/core/utils/strings";
@@ -18,6 +18,7 @@ export class ChatGPTDialog extends Component {
 
     setup() {
         this.rpc = useService('rpc');
+        this.state = useState({ selectedMessageId: null });
     }
 
     //--------------------------------------------------------------------------
@@ -25,7 +26,7 @@ export class ChatGPTDialog extends Component {
     //--------------------------------------------------------------------------
 
     selectMessage(ev) {
-        this.state.selectedMessage = +ev.currentTarget.getAttribute('data-message-index');
+        this.state.selectedMessageId = +ev.currentTarget.getAttribute('data-message-id');
     }
     insertMessage(ev) {
         this.selectMessage(ev);
@@ -91,7 +92,7 @@ export class ChatGPTDialog extends Component {
     _confirm() {
         try {
             this.props.close();
-            const text = this.state.messages[this.state.selectedMessage]?.text;
+            const text = this.state.messages.find(message => message.id === this.state.selectedMessageId)?.text;
             this.props.insert(this._postprocessGeneratedContent(text || ''));
         } catch (e) {
             this.props.close();
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.js
index c14058f979c..6d8123568a1 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.js
@@ -21,6 +21,7 @@ export class ChatGPTPromptDialog extends ChatGPTDialog {
         this.assistantAvatarUrl = `${browser.location.origin}/web_editor/static/src/img/odoobot_transparent.png`;
         this.userAvatarUrl = `${browser.location.origin}/web/image?model=res.users&field=avatar_128&id=${encodeURIComponent(session.uid)}`;
         this.state = useState({
+            ...this.state,
             prompt: this.props.initialPrompt,
             conversationHistory: [{
                 role: 'system',
@@ -55,10 +56,10 @@ export class ChatGPTPromptDialog extends ChatGPTDialog {
         ev.preventDefault();
         const prompt = this.state.prompt;
         this.state.messages.push({ author: 'user', text: prompt });
-        const datetime = new Date().getTime();
+        const messageId = new Date().getTime();
         const conversation = { role: 'user', content: prompt };
         this.state.conversationHistory.push(conversation);
-        this.state.messages.push({ author: 'assistant', datetime });
+        this.state.messages.push({ author: 'assistant', id: messageId });
         this.state.prompt = '';
         this._generate(prompt, (content, isError) => {
             if (isError) {
@@ -68,8 +69,13 @@ export class ChatGPTPromptDialog extends ChatGPTDialog {
                 // There was no error, add the response to the history.
                 this.state.conversationHistory.push({ role: 'assistant', content });
             }
-            const messageIndex = this.state.messages.findIndex(m => m.datetime === datetime);
-            this.state.messages[messageIndex] = { author: 'assistant', text: content, isError };
+            const messageIndex = this.state.messages.findIndex(m => m.id === messageId);
+            this.state.messages[messageIndex] = {
+                author: 'assistant',
+                text: content,
+                isError,
+                id: messageId,
+            };
             this._unfreezeInput();
         });
     }
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.xml b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.xml
index 83bfb2cbec3..372210c505c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.xml
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/chatgpt_prompt_dialog.xml
@@ -30,7 +30,7 @@
                                     <div class="position-relative text-break mb-0 py-2 px-3 align-self-start rounded-end-3 rounded-bottom-3 o-chatgpt-message">
                                         <!-- INSERT BUTTON -->
                                         <button t-if="message.author === 'assistant' and 'text' in message and message.isError !== true"
-                                            t-att-data-message-index="message_index"
+                                            t-att-data-message-id="message.id"
                                             class="o-message-insert d-block float-end p-1 mb-1 btn btn-info opacity-75 fst-italic ms-3"
                                             t-on-click="insertMessage">Insert</button>
                                         <div class="d-inline">