@sapui5/sap.suite.ui.generic.template 1.152.1 → 1.154.0

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillDialogController.js

@@ -1,14 +1,27 @@
 sap.ui.define([
     "sap/ui/model/json/JSONModel",
     "sap/m/MessageToast",
+    "sap/m/MessageBox",
+    "sap/m/Text",
     "sap/suite/ui/generic/template/genericUtilities/FeLogger",
-    "sap/ui/core/ResizeHandler"
-], function(JSONModel, MessageToast, FeLogger, ResizeHandler) {
+    "sap/ui/core/ResizeHandler",
+    "sap/m/Table",
+    "sap/m/Column",
+    "sap/m/ColumnListItem"
+], function(JSONModel, MessageToast, MessageBox, Text, FeLogger, ResizeHandler, MTable, Column, ColumnListItem) {
     "use strict";
 
     var sClassName = "lib.ai.EasyFill.EasyFillDialogController";
     var oLogger = new FeLogger(sClassName).getLogger();
 
+    // Maximum number of characters accepted as AI input — applies to both the textarea
+    // (fragment maxLength) and imported file text. Keep in sync with EasyFillDialog.fragment.xml
+    // (TextArea maxLength) and EasyFillApplyHandler.
+    var MAX_INPUT_LENGTH = 50000;
+    // Maximum number of CSV data rows rendered in the preview table — guards against building
+    // thousands of controls synchronously. The full text is still sent to the AI.
+    var MAX_PREVIEW_ROWS = 200;
+
     /**
      * EasyFillDialogController
      *
@@ -22,6 +35,29 @@ sap.ui.define([
      * All data operations are delegated to EasyFillAIOrchestrator, EasyFillFormRenderer,
      * EasyFillTableRenderer, and EasyFillApplyHandler.
      */
+    // ─── Private Helpers ─────────────────────────────────────────────────────
+
+    function _addTextPreview(oPreviewContent, sText) {
+        var oText = new Text({ text: sText });
+        oText.addStyleClass("sapSmartTemplatesObjectPageEasyFillFilePreviewText");
+        oPreviewContent.addItem(oText);
+    }
+
+    function _createCSVPreviewTable(oParsed) {
+        var oTable = new MTable({ width: "100%", backgroundDesign: "Solid" });
+        oTable.addStyleClass("sapSmartTemplatesObjectPageEasyFillFilePreviewTable");
+        oParsed.headers.forEach(function(sHeader) {
+            oTable.addColumn(new Column({ width: "10rem", header: new Text({ text: sHeader }) }));
+        });
+        // Cap the number of rendered rows so a large CSV cannot freeze the dialog by creating
+        // one control per cell for thousands of rows.
+        oParsed.rows.slice(0, MAX_PREVIEW_ROWS).forEach(function(aRow) {
+            var aCells = aRow.map(function(sCell) { return new Text({ text: sCell }); });
+            oTable.addItem(new ColumnListItem({ cells: aCells }));
+        });
+        return oTable;
+    }
+
     return {
 
         /**
@@ -66,9 +102,22 @@ sap.ui.define([
                 isFullScreen: true,
                 hasTableUpdates: false,
                 attemptedMultipleNewRows: false,
-                isSplitterPageMode: false
+                isSplitterPageMode: false,
+                // File import state
+                uploadedFileName: "",
+                uploadedFileSize: "",
+                uploadedFileType: "none",
+                filePreviewVisible: false,
+                uploadProgress: 0,
+                selectedFilePreviewMode: "Text",
+                isDragging: false,
+                hasEnteredText: false,
+                remainingCharactersText: ""
             };
 
+            var oRbInit = oController.getView().getModel("i18n").getResourceBundle();
+            oData.remainingCharactersText = oRbInit.getText("EASYFILL_REMAINING_CHARACTERS", [MAX_INPUT_LENGTH]);
+
             oController.getView().setModel(new JSONModel(oData), "easyFillDialogModel");
             oLogger.debug("initDialogModel: easyFillDialogModel created and registered on view");
         },
@@ -118,6 +167,10 @@ sap.ui.define([
 
             if (!oDialog) { return; }  // guard: load rejected, nothing to open
 
+            if (oHandlers._onAfterOpen) {
+                oDialog.attachEventOnce("afterOpen", oHandlers._onAfterOpen);
+            }
+
             oDialog.open();
 
             if (!oDialog._easyFillResizeHandlerId) {
@@ -212,25 +265,193 @@ sap.ui.define([
 
         /**
          * Handles the live change event on the input text area.
-         * Enforces the 2000 character limit by truncating excess input.
          * Enables/disables the "Easy Fill" submit button based on whether there is any input.
          *
          * @param {sap.ui.base.Event} oEvent
          * @param {object} oController - MVC controller
          */
         onLiveChange: function(oEvent, oController) {
-            var oTextArea = oEvent.getSource();
-            var sValue = oTextArea.getValue();
-            var iMaxLength = 2000;
-
-            // Enforce character limit by truncating excess input
-            if (sValue && sValue.length > iMaxLength) {
-                sValue = sValue.substring(0, iMaxLength);
-                oTextArea.setValue(sValue);
+            var sValue = oEvent.getSource().getValue();
+
+            var oDialogModel = oController.getView().getModel("easyFillDialogModel");
+            // Button is enabled when there is text in the textarea OR a file has been imported
+            var bHasFileImported = !!oDialogModel.getProperty("/uploadedFileName") &&
+                oDialogModel.getProperty("/filePreviewVisible");
+            oDialogModel.setProperty("/isEasyFillButtonEnabled", !!sValue || bHasFileImported);
+            oDialogModel.setProperty("/hasEnteredText", !!sValue);
+
+            var oRb = oController.getView().getModel("i18n").getResourceBundle();
+            oDialogModel.setProperty("/remainingCharactersText", oRb.getText("EASYFILL_REMAINING_CHARACTERS", [MAX_INPUT_LENGTH - sValue.length]));
+        },
+
+        // ─── File Import Handlers ──────────────────────────────────────────────────
+
+        /**
+         * Handles the FileUploader change event when a file is selected.
+         * Delegates to the shared acceptFile path.
+         *
+         * @param {sap.ui.base.Event} oEvent - FileUploader change event
+         * @param {object} oController - MVC controller
+         * @param {object} oRb - i18n resource bundle
+         * @param {object} oFileHandler - EasyFillFileHandler module
+         * @param {function} fnOnTextImported - callback(sText) called after successful file read
+         */
+        onFileUploaderChange: function(oEvent, oController, oRb, oFileHandler, fnOnTextImported) {
+            var oFileUploader = oEvent.getSource();
+            var aFiles = oEvent.getParameter("files");
+            var oFile = aFiles && aFiles[0];
+            if (oFile) {
+                this.acceptFile(oController, oRb, oFileHandler, oFile, fnOnTextImported);
+            }
+            oFileUploader.clear();
+        },
+
+        /**
+         * Shows a file-upload error in a MessageBox popup dialog (mirrors V4
+         * EasyFillDialog.showFileUploadError). Used for every file-import failure —
+         * unsupported type, multiple files, empty/unreadable file, and over-limit text.
+         *
+         * @param {object} oRb - i18n resource bundle
+         * @param {string} sMessage - localized error message to display
+         */
+        showFileUploadError: function(oRb, sMessage) {
+            MessageBox.error(sMessage, {
+                title: oRb.getText("EASY_FILL_FILE_UPLOAD_ERROR_TITLE")
+            });
+        },
+
+        /**
+         * Shows the "unsupported file type" error popup. Wired to the FileUploader
+         * typeMissmatch event, which fires when the chosen file's extension is not txt/csv
+         * (the FileUploader rejects it before change fires, so the user otherwise gets no feedback).
+         *
+         * @param {object} oRb - i18n resource bundle
+         */
+        showFileTypeError: function(oRb) {
+            this.showFileUploadError(oRb, oRb.getText("EASY_FILL_UPLOAD_UNSUPPORTED_FILE_ERROR"));
+        },
+
+        /**
+         * Shared file-accept path used by both the FileUploader change handler and the
+         * drag-and-drop handler. Sets the file metadata on the model, reads the file via
+         * EasyFillFileHandler, enforces the input-length cap, and surfaces all failures as a
+         * MessageBox error popup (localized) rather than a transient toast.
+         *
+         * @param {object} oController - MVC controller
+         * @param {object} oRb - i18n resource bundle
+         * @param {object} oFileHandler - EasyFillFileHandler module
+         * @param {File} oFile - the selected/dropped file
+         * @param {function} fnOnTextImported - callback(sText) invoked once the (within-limit) text is read
+         */
+        acceptFile: function(oController, oRb, oFileHandler, oFile, fnOnTextImported) {
+            var oDialogModel = oController.getView().getModel("easyFillDialogModel");
+            var oSelf = this;
+
+            function clearFileMeta() {
+                oDialogModel.setProperty("/uploadedFileName", "");
+                oDialogModel.setProperty("/uploadedFileSize", "");
+                oDialogModel.setProperty("/uploadedFileType", "none");
+                oDialogModel.setProperty("/uploadProgress", 0);
+                oDialogModel.setProperty("/filePreviewVisible", false);
+                oDialogModel.setProperty("/isEasyFillButtonEnabled", false);
             }
 
+            oDialogModel.setProperty("/uploadedFileName", oFile.name);
+            oDialogModel.setProperty("/uploadedFileSize", oFileHandler.formatFileSize(oFile.size));
+            oDialogModel.setProperty("/uploadedFileType", oFileHandler.getFileType(oFile.name));
+            oDialogModel.setProperty("/uploadProgress", 0);
+
+            oFileHandler.importFile(oFile, {
+                onTextImported: function(sText) {
+                    // Enforce the same character cap as the textarea on imported file text.
+                    if (sText.length > MAX_INPUT_LENGTH) {
+                        oLogger.warning("acceptFile: imported text exceeds MAX_INPUT_LENGTH (" + sText.length + ")");
+                        clearFileMeta();
+                        oSelf.showFileUploadError(oRb, oRb.getText("EASY_FILL_UPLOAD_FILE_TOO_LARGE_ERROR", [MAX_INPUT_LENGTH]));
+                        return;
+                    }
+                    var sFileType = oDialogModel.getProperty("/uploadedFileType");
+                    oDialogModel.setProperty("/selectedFilePreviewMode", sFileType === "csv" ? "Table" : "Text");
+                    fnOnTextImported(sText);
+                    oDialogModel.setProperty("/filePreviewVisible", true);
+                    oDialogModel.setProperty("/isEasyFillButtonEnabled", true);
+                    MessageToast.show(oRb.getText("EASY_FILL_FILE_IMPORTED_SUCCESS", [oFile.name]));
+                },
+                onValidationError: function() {
+                    clearFileMeta();
+                    oSelf.showFileUploadError(oRb, oRb.getText("EASY_FILL_UPLOAD_UNSUPPORTED_FILE_ERROR"));
+                },
+                onReadError: function(sReason) {
+                    clearFileMeta();
+                    var sErrorKey = sReason === "empty"
+                        ? "EASY_FILL_UPLOAD_EMPTY_FILE_ERROR"
+                        : "EASY_FILL_UPLOAD_READ_ERROR";
+                    oSelf.showFileUploadError(oRb, oRb.getText(sErrorKey));
+                },
+                onProgress: function(iPercent) {
+                    oDialogModel.setProperty("/uploadProgress", iPercent);
+                }
+            });
+        },
+
+        /**
+         * Renders file preview content into the EasyFillFilePreviewContent VBox.
+         * CSV files in table-preview mode are rendered as a sap.m.Table; all other content
+         * is rendered as a sap.m.Text.
+         *
+         * @param {object} oController - MVC controller
+         * @param {object} oFileHandler - EasyFillFileHandler module (used for parseCSV in table-preview mode)
+         * @param {string|null} sImportedFileText - currently imported file text (or null)
+         */
+        renderFilePreview: function(oController, oFileHandler, sImportedFileText) {
+            var oPreviewContent = oController.byId("EasyFillFilePreviewContent");
+            if (!oPreviewContent) { return; }
+            oPreviewContent.destroyItems();
+
+            var sText = sImportedFileText || "";
+            if (!sText) { return; }
+
+            var oDialogModel = oController.getView().getModel("easyFillDialogModel");
+            var sMode = oDialogModel ? oDialogModel.getProperty("/selectedFilePreviewMode") : "Text";
+            var sFileType = oDialogModel ? oDialogModel.getProperty("/uploadedFileType") : "none";
+
+            if (sMode === "Table" && sFileType === "csv") {
+                var oParsed = oFileHandler.parseCSV(sText);
+                if (oParsed && oParsed.headers.length > 0) {
+                    oPreviewContent.addItem(_createCSVPreviewTable(oParsed));
+                    if (oParsed.rows.length > MAX_PREVIEW_ROWS) {
+                        var oRb = oController.getView().getModel("i18n").getResourceBundle();
+                        var oNote = new Text({ text: oRb.getText("EASY_FILL_FILE_PREVIEW_TRUNCATED", [MAX_PREVIEW_ROWS]) });
+                        oNote.addStyleClass("sapSmartTemplatesObjectPageEasyFillFilePreviewText");
+                        oPreviewContent.addItem(oNote);
+                    }
+                } else {
+                    _addTextPreview(oPreviewContent, sText);
+                }
+            } else {
+                _addTextPreview(oPreviewContent, sText);
+            }
+        },
+
+        /**
+         * Resets all file-related state in the dialog model and clears the preview area.
+         * Called by EasyFillHandler._resetEasyFill when the dialog is cleared or cancelled.
+         *
+         * @param {object} oController - MVC controller
+         */
+        resetFileState: function(oController) {
             var oDialogModel = oController.getView().getModel("easyFillDialogModel");
-            oDialogModel.setProperty("/isEasyFillButtonEnabled", !!sValue);
+            if (!oDialogModel) { return; }
+            oDialogModel.setProperty("/uploadedFileName", "");
+            oDialogModel.setProperty("/uploadedFileSize", "");
+            oDialogModel.setProperty("/uploadedFileType", "none");
+            oDialogModel.setProperty("/filePreviewVisible", false);
+            oDialogModel.setProperty("/uploadProgress", 0);
+            oDialogModel.setProperty("/selectedFilePreviewMode", "Text");
+            oDialogModel.setProperty("/isDragging", false);
+
+            var oPreviewContent = oController.byId("EasyFillFilePreviewContent");
+            if (oPreviewContent) { oPreviewContent.destroyItems(); }
         },
 
         /**

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillFileHandler.js

@@ -0,0 +1,218 @@
+sap.ui.define([
+    "sap/base/Log",
+    "sap/m/MessageBox"
+], function(Log, MessageBox) {
+    "use strict";
+
+    var sClassName = "lib.ai.EasyFill.EasyFillFileHandler";
+
+    // Browser-reported MIME types vary wildly across OS/browser combinations for the very same
+    // file (e.g. a .csv is "application/vnd.ms-excel" on Windows+Excel, "application/csv" elsewhere,
+    // or "" when nothing is registered). The file extension is the authoritative gate (findHandler),
+    // so these are the types we additionally treat as "text-like" when a type IS reported.
+    var VENDOR_TEXT_MIME_TYPES = {
+        "application/csv": true,
+        "application/vnd.ms-excel": true
+    };
+    var BINARY_MIME_TYPE = "application/octet-stream";
+
+    var FILE_HANDLERS = [
+        {
+            extensions: [".txt", ".csv"],
+            handle: _handleTextFileImport
+        }
+    ];
+
+    // ─── File Validation ──────────────────────────────────────────────────────
+
+    /**
+     * Decides whether a file whose extension already matched a handler should be accepted
+     * based on its (unreliable) browser-reported MIME type.
+     *
+     * The extension is the authoritative gate, so an absent/binary/vendor type is accepted —
+     * only a type that is explicitly a different, non-text category (e.g. "image/png") is rejected.
+     *
+     * @param {File} oFile
+     * @returns {boolean}
+     */
+    function _isMimeTypeAcceptable(oFile) {
+        var sMimeType = oFile.type;
+        // No type reported, or generic binary — common for .txt/.csv; trust the extension.
+        if (!sMimeType || sMimeType === BINARY_MIME_TYPE) {
+            Log.warning(sClassName + ": file " + oFile.name + " has no/binary MIME type; accepting on extension");
+            return true;
+        }
+        if (sMimeType.indexOf("text/") === 0 || VENDOR_TEXT_MIME_TYPES[sMimeType]) {
+            return true;
+        }
+        Log.warning(sClassName + ": file " + oFile.name + " has non-text MIME type: " + sMimeType);
+        return false;
+    }
+
+    // ─── File Type Handlers ───────────────────────────────────────────────────
+
+    /**
+     * Reads a TXT or CSV file as text and reports progress/result via callbacks.
+     * No user-facing messages are shown here — the caller owns localized feedback.
+     * @param {File} oFile
+     * @param {{ onTextImported: function, onValidationError: function, onReadError: function(string=), onProgress: function }} oCallbacks
+     *   onReadError receives "empty" when the file is empty, "read" on a read failure.
+     */
+    function _handleTextFileImport(oFile, oCallbacks) {
+        if (!_isMimeTypeAcceptable(oFile)) {
+            Log.error(sClassName + ": file validation failed for " + oFile.name);
+            if (oCallbacks.onValidationError) { oCallbacks.onValidationError("invalidType"); }
+            return;
+        }
+
+        var oReader = new FileReader();
+        oReader.onprogress = function(oEvent) {
+            if (oEvent.lengthComputable && oCallbacks.onProgress) {
+                oCallbacks.onProgress(Math.round((oEvent.loaded / oEvent.total) * 100));
+            }
+        };
+        oReader.onload = function(oEvent) {
+            if (oCallbacks.onProgress) { oCallbacks.onProgress(100); }
+            var sText = oEvent.target && oEvent.target.result;
+            if (!sText) {
+                Log.error(sClassName + ": text file is empty");
+                if (oCallbacks.onReadError) { oCallbacks.onReadError("empty"); }
+                return;
+            }
+            Log.info(sClassName + ": text file parsed successfully");
+            oCallbacks.onTextImported(sText);
+        };
+        oReader.onerror = function() {
+            Log.error(sClassName + ": failed to read text file");
+            if (oCallbacks.onReadError) { oCallbacks.onReadError("read"); }
+        };
+        oReader.readAsText(oFile);
+    }
+
+    // ─── Public API ───────────────────────────────────────────────────────────
+
+    return {
+
+        /**
+         * Finds the handler entry for the given file name based on its extension.
+         * @param {string} sFileName
+         * @returns {{ extensions: string[], handle: function } | undefined}
+         */
+        findHandler: function(sFileName) {
+            var sLower = sFileName.toLowerCase();
+            return FILE_HANDLERS.find(function(oHandler) {
+                return oHandler.extensions.some(function(sExt) { return sLower.endsWith(sExt); });
+            });
+        },
+
+        /**
+         * Detects the file type ("csv" or "txt") from the file name.
+         * @param {string} sFileName
+         * @returns {"csv" | "txt" | "none"}
+         */
+        getFileType: function(sFileName) {
+            if (!sFileName) { return "none"; }
+            var sLower = sFileName.toLowerCase();
+            if (sLower.endsWith(".csv")) { return "csv"; }
+            if (sLower.endsWith(".txt")) { return "txt"; }
+            return "none";
+        },
+
+        /**
+         * Shows a confirmation dialog before removing a file.
+         * Calls fnOnConfirm only when the user clicks OK.
+         * @param {string} sConfirmText - i18n message to display
+         * @param {function} fnOnConfirm - callback invoked on confirmation
+         */
+        confirmFileRemoval: function(sConfirmText, fnOnConfirm) {
+            MessageBox.confirm(sConfirmText, {
+                onClose: function(sAction) {
+                    if (sAction === MessageBox.Action.OK) {
+                        fnOnConfirm();
+                    }
+                }
+            });
+        },
+
+        /**
+         * Parses a CSV/TSV text string into { headers: string[], rows: string[][] }.
+         * Auto-detects comma vs. semicolon vs. tab as separator and honours double-quoted
+         * fields (separators inside quotes are literal; "" is an escaped quote).
+         * @param {string} sText
+         * @returns {{ headers: string[], rows: string[][] }}
+         */
+        parseCSV: function(sText) {
+            if (!sText) { return { headers: [], rows: [] }; }
+            var aLines = sText.split(/\r?\n/).filter(function(sLine) { return sLine.trim() !== ""; });
+            if (!aLines.length) { return { headers: [], rows: [] }; }
+
+            // Auto-detect separator: tab > semicolon > comma
+            var sSep = ",";
+            var sFirst = aLines[0];
+            if (sFirst.indexOf("\t") !== -1) {
+                sSep = "\t";
+            } else if (sFirst.indexOf(";") !== -1) {
+                sSep = ";";
+            }
+
+            // Quote-aware single-line splitter: a separator inside double quotes is part of the
+            // field, and a doubled quote ("") inside a quoted field is a literal quote.
+            function splitLine(sLine) {
+                var aFields = [];
+                var sField = "";
+                var bInQuotes = false;
+                for (var i = 0; i < sLine.length; i++) {
+                    var c = sLine.charAt(i);
+                    if (c === '"') {
+                        if (bInQuotes && sLine.charAt(i + 1) === '"') {
+                            sField += '"';
+                            i++; // skip the escaped quote
+                        } else {
+                            bInQuotes = !bInQuotes;
+                        }
+                    } else if (c === sSep && !bInQuotes) {
+                        aFields.push(sField.trim());
+                        sField = "";
+                    } else {
+                        sField += c;
+                    }
+                }
+                aFields.push(sField.trim());
+                return aFields;
+            }
+
+            var aHeaders = splitLine(aLines[0]);
+            var aRows = aLines.slice(1).map(splitLine);
+            return { headers: aHeaders, rows: aRows };
+        },
+
+        /**
+         * Formats a byte size into a human-readable string (e.g. "1.2 KB").
+         * @param {number} iBytes
+         * @returns {string}
+         */
+        formatFileSize: function(iBytes) {
+            if (!iBytes || iBytes < 0) { return "0 B"; }
+            if (iBytes < 1024) { return iBytes + " B"; }
+            if (iBytes < 1024 * 1024) { return (iBytes / 1024).toFixed(1) + " KB"; }
+            return (iBytes / (1024 * 1024)).toFixed(1) + " MB";
+        },
+
+        /**
+         * Entry point: validates the file and runs the appropriate handler.
+         * Reports failures via oCallbacks.onValidationError (no user-facing message is shown here —
+         * the caller owns localized feedback).
+         * @param {File} oFile
+         * @param {{ onTextImported: function, onValidationError: function, onReadError: function, onProgress: function }} oCallbacks
+         */
+        importFile: function(oFile, oCallbacks) {
+            var oHandler = this.findHandler(oFile.name);
+            if (!oHandler) {
+                Log.error(sClassName + ": unsupported file type: " + oFile.name);
+                if (oCallbacks.onValidationError) { oCallbacks.onValidationError("unsupported"); }
+                return;
+            }
+            oHandler.handle(oFile, oCallbacks);
+        }
+    };
+});

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/EasyFillFormRenderer.js

@@ -2,9 +2,11 @@ sap.ui.define([
     "sap/ui/comp/smartform/GroupElement",
     "sap/ui/comp/smartfield/SmartField",
     "sap/m/Text",
+    "sap/m/Link",
+    "sap/m/Button",
     "sap/ui/layout/form/ColumnElementData",
     "sap/suite/ui/generic/template/genericUtilities/FeLogger"
-], function(GroupElement, SmartField, Text, ColumnElementData, FeLogger) {
+], function(GroupElement, SmartField, Text, Link, Button, ColumnElementData, FeLogger) {
     "use strict";
 
     var sClassName = "lib.ai.EasyFill.EasyFillFormRenderer";
@@ -100,7 +102,10 @@ sap.ui.define([
             if (!Array.isArray(aFields) || aFields.length === 0) { return; }
 
             var oObjectPageLayout = oController.byId("EasyFillObjectPageLayout");
-            var sPreviouslyLabel = oController.getView().getModel("i18n").getResourceBundle().getText("EASY_FILL_PREVIOUSLY_LABEL");
+            var oRb = oController.getView().getModel("i18n").getResourceBundle();
+            var sOriginalValueLabel = oRb.getText("EASY_FILL_ORIGINAL_VALUE_LABEL");
+            var sProposedValueLabel = oRb.getText("EASY_FILL_PROPOSED_VALUE_LABEL");
+            var sRevertTooltip = oRb.getText("EASY_FILL_REVERT_FIELD_TOOLTIP");
             var that = this;
 
             function tryInject() {
@@ -147,23 +152,21 @@ sap.ui.define([
                         });
                     }
 
+                    // Hoist vAIValue so it can be reused when seeding the transient context below
+                    var vAIValue = oLLMData[sKey];
+
                     if (oTransientContextForEasyFill) {
                         oSmartField.setBindingContext(oTransientContextForEasyFill);
                         if (oTransientContextForEasyFill.getProperty(sKey) === undefined) {
-                            oTransientContextForEasyFill.setProperty(sKey, oLLMData[sKey]);
+                            oTransientContextForEasyFill.setProperty(sKey, vAIValue);
                         }
                     } else {
                         oSmartField.setBindingContext(oObjectPageContext);
                     }
 
-                    // Read the current (pre-AI) value as a plain string and render it as
-                    // compact secondary text directly below the SmartField.
-                    // Mirroring V4: no second SmartField — just a plain sap.m.Text showing
-                    // "Previously: <value>", avoiding all SmartField layout overhead.
+                    // Read the current (pre-AI) value as a plain string for display.
                     var vCurrentValue = (oObjectPageContext && typeof oObjectPageContext.getProperty === "function")
                         ? oObjectPageContext.getProperty(sKey) : null;
-                    // Use typeof check to guard against objects/arrays; Date.toLocaleDateString()
-                    // gives a readable form for date values rather than "[object Object]".
                     var sCurrentValue;
                     if (vCurrentValue === null || vCurrentValue === undefined || vCurrentValue === "") {
                         sCurrentValue = "-";
@@ -175,17 +178,79 @@ sap.ui.define([
                         sCurrentValue = String(vCurrentValue);
                     }
 
-                    var oPreviousValueText = new Text({
-                        text:     sPreviouslyLabel + " " + sCurrentValue,
-                        wrapping: false
-                    }).addStyleClass("sapEasyFillPreviouslyLabel");
-
-                    // Two elements stacked vertically in one GroupElement:
-                    // row 1 — primary SmartField (AI value, editable or read-only)
-                    // row 2 — "Previously: <value>" text directly below, no gap
                     var oGroupElement = new GroupElement({ useHorizontalLayout: false });
                     oGroupElement.addElement(oSmartField);
-                    oGroupElement.addElement(oPreviousValueText);
+
+                    // "Original Value:" text shown for all fields (editable and non-editable)
+                    var oOriginalValueText = new Text({
+                        text: sOriginalValueLabel + " " + sCurrentValue,
+                        wrapping: false,
+                        tooltip: sOriginalValueLabel + " " + sCurrentValue
+                    }).addStyleClass("sapEasyFillPreviouslyLabel");
+                    oGroupElement.addElement(oOriginalValueText);
+
+                    // Toggle controls (revert button + proposed value link) only for editable fields
+                    if (bIsEditable) {
+                        var bReverted = false;
+
+                        var oRevertButton = new Button({
+                            icon: "sap-icon://undo",
+                            type: "Transparent",
+                            tooltip: sRevertTooltip
+                        }).addStyleClass("sapEasyFillRevertButton");
+
+                        // State 2 row: "Proposed Value: <aiValue>" clickable link — hidden until user reverts
+                        var sAIDisplayValue;
+                        if (vAIValue === null || vAIValue === undefined || vAIValue === "") {
+                            sAIDisplayValue = "-";
+                        } else if (vAIValue instanceof Date) {
+                            sAIDisplayValue = vAIValue.toLocaleDateString();
+                        } else if (typeof vAIValue === "object") {
+                            sAIDisplayValue = "-";
+                        } else {
+                            sAIDisplayValue = String(vAIValue);
+                        }
+
+                        var oProposedValueLink = new Link({
+                            text: sProposedValueLabel + " " + sAIDisplayValue,
+                            wrapping: false,
+                            visible: false,
+                            icon: "sap-icon://ai",
+                            width: "100%",
+                            tooltip: sProposedValueLabel + " " + sAIDisplayValue,
+                            layoutData: new ColumnElementData({ cellsSmall: 12, cellsLarge: 12 })
+                        }).addStyleClass("sapEasyFillProposedValueLink");
+
+                        // Revert button: State 1 → State 2
+                        oRevertButton.attachPress(function() {
+                            if (bReverted) { return; }
+                            bReverted = true;
+                            if (oTransientContextForEasyFill) {
+                                oTransientContextForEasyFill.setProperty(sKey, vCurrentValue);
+                            }
+                            oOriginalValueText.setVisible(false);
+                            oRevertButton.setVisible(false);
+                            oProposedValueLink.setVisible(true);
+                            if (typeof fnOnFieldChange === "function") { fnOnFieldChange(); }
+                        });
+
+                        // Proposed Value link: State 2 → State 1
+                        oProposedValueLink.attachPress(function() {
+                            if (!bReverted) { return; }
+                            bReverted = false;
+                            if (oTransientContextForEasyFill) {
+                                oTransientContextForEasyFill.setProperty(sKey, vAIValue);
+                            }
+                            oProposedValueLink.setVisible(false);
+                            oOriginalValueText.setVisible(true);
+                            oRevertButton.setVisible(true);
+                            if (typeof fnOnFieldChange === "function") { fnOnFieldChange(); }
+                        });
+
+                        oGroupElement.addElement(oRevertButton);
+                        oGroupElement.addElement(oProposedValueLink);
+                    }
+
                     oGroup.addGroupElement(oGroupElement);
                 });