@atlaskit/emoji 71.6.6 → 71.7.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/emoji
 
+## 71.7.0
+
+### Minor Changes
+
+- [`cdddb84518902`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cdddb84518902) -
+  Add a "Create an emoji with Rovo" section to the emoji picker's "Add your own emoji" flow, behind
+  the `confluence_ai_generated_emojis` experiment.
+
+  When enabled (and a page `contentId` is supplied), a description input + generate button appear
+  above the Emoji name field. Generating produces an emoji-style image via the Confluence header
+  image backend (Gemini 2.5 Flash Image, 1:1 aspect ratio). The generated image flows into the
+  existing upload form — reusing the same preview, Emoji name field (auto-populated with a slugified
+  shortname) and "Add emoji" button — and is uploaded through the existing `SiteEmojiResource` path.
+  - New optional `EmojiPicker` `contentId` prop threads the current page content id down to enable
+    the AI section.
+  - New analytics events for AI emoji generation (started/completed/failed).
+  - Register the `confluence_ai_generated_emojis` experiment in `@atlaskit/tmp-editor-statsig` so it
+    can be checked via `expValEquals`.
+
+  When the experiment is off (or no `contentId` is supplied), only the existing manual upload flow
+  is shown.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 71.6.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -52,6 +52,9 @@
 		{
 			"path": "../../../design-system/image/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../media/media-client/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -52,6 +52,9 @@
 		{
 			"path": "../../../design-system/image/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/logo/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../media/media-client/afm-products/tsconfig.json"
 		},

package/dist/cjs/api/ai/generateEmojiImage.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateEmojiImage = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _aiEmoji = require("../../util/ai-emoji");
+var _logger = _interopRequireDefault(require("../../util/logger"));
+/**
+ * Calls the Confluence "header image" AI backend to generate an emoji-style
+ * image (base64) from a text description.
+ */
+
+var HEADER_IMAGE_GENERATION_ENDPOINT = '/gateway/api/assist/api/ai/v2/ai-feature/confluence-header-image-generation';
+
+/** Emojis are square, so we always request a 1:1 image from the BE. */
+var EMOJI_ASPECT_RATIO = '1:1';
+
+/** Shape of the `ai_feature_output` envelope returned by the BE. */
+
+/**
+ * Generate an emoji-style image and return its base64 image data.
+ *
+ * @throws Error if the request fails, the BE returns a body-level error, or no
+ * image data is returned.
+ */
+var generateEmojiImage = exports.generateEmojiImage = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var contentId, prompt, wrappedPrompt, response, json, output;
+    return _regenerator.default.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          contentId = _ref.contentId, prompt = _ref.prompt;
+          wrappedPrompt = (0, _aiEmoji.wrapEmojiPrompt)(prompt);
+          _context.next = 1;
+          return fetch(HEADER_IMAGE_GENERATION_ENDPOINT, {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json;charset=UTF-8',
+              'X-Experience-Id': 'confluence-ai-first-creation',
+              'X-Product': 'confluence'
+            },
+            body: JSON.stringify({
+              ai_feature_input: {
+                adfContent: wrappedPrompt,
+                contentId: contentId,
+                useRawPrompt: true,
+                // Emojis are square — request a 1:1 image from the BE.
+                aspectRatio: EMOJI_ASPECT_RATIO
+              }
+            })
+          });
+        case 1:
+          response = _context.sent;
+          if (response.ok) {
+            _context.next = 2;
+            break;
+          }
+          (0, _logger.default)('generateEmojiImage failed', response.status);
+          throw new Error("Emoji image generation failed with status ".concat(response.status));
+        case 2:
+          _context.next = 3;
+          return response.json();
+        case 3:
+          json = _context.sent;
+          output = json === null || json === void 0 ? void 0 : json.ai_feature_output;
+          if (output) {
+            _context.next = 4;
+            break;
+          }
+          throw new Error('Emoji image generation returned no content');
+        case 4:
+          if (!output.error) {
+            _context.next = 5;
+            break;
+          }
+          throw new Error(output.error.error_message || output.error.error_reason || 'Emoji image generation failed');
+        case 5:
+          if (output.imageData) {
+            _context.next = 6;
+            break;
+          }
+          throw new Error('Emoji image generation did not return image data');
+        case 6:
+          return _context.abrupt("return", {
+            imageData: output.imageData,
+            mediaFileId: output.mediaFileId
+          });
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function generateEmojiImage(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/dist/cjs/components/common/CreateEmojiWithRovo.compiled.css

@@ -0,0 +1,12 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._x3doia51{border-top:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._16jlkb7n{flex-grow:1}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._i0dlf1ug{flex-basis:0%}

package/dist/cjs/components/common/CreateEmojiWithRovo.js

@@ -0,0 +1,150 @@
+/* CreateEmojiWithRovo.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.createEmojiWithRovoTestId = exports.createEmojiWithRovoPromptTestId = exports.createEmojiWithRovoGenerateTestId = void 0;
+require("./CreateEmojiWithRovo.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntl = require("react-intl");
+var _new = require("@atlaskit/button/new");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
+var _logo = require("@atlaskit/logo");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _generateEmojiImage = require("../../api/ai/generateEmojiImage");
+var _aiEmoji = require("../../util/ai-emoji");
+var _analytics = require("../../util/analytics");
+var _i18n = require("../i18n");
+var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var createEmojiWithRovoTestId = exports.createEmojiWithRovoTestId = 'create-emoji-with-rovo';
+var createEmojiWithRovoPromptTestId = exports.createEmojiWithRovoPromptTestId = 'create-emoji-with-rovo-prompt';
+var createEmojiWithRovoGenerateTestId = exports.createEmojiWithRovoGenerateTestId = 'create-emoji-with-rovo-generate';
+var sectionStyles = null;
+var headerStyles = null;
+var promptRowStyles = null;
+var promptInputStyles = null;
+var CreateEmojiWithRovo = function CreateEmojiWithRovo(props) {
+  var contentId = props.contentId,
+    fireAnalytics = props.fireAnalytics,
+    onEmojiGenerated = props.onEmojiGenerated;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    prompt = _useState2[0],
+    setPrompt = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isGenerating = _useState4[0],
+    setIsGenerating = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    hasError = _useState6[0],
+    setHasError = _useState6[1];
+  var onPromptChange = (0, _react.useCallback)(function (event) {
+    setPrompt(event.target.value);
+    // Clear any previous error as soon as the user edits the prompt to retry.
+    setHasError(false);
+  }, []);
+  var onGenerate = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var trimmedPrompt, startTime, _yield$generateEmojiI, imageData, dataURL, suggestedName, _t;
+    return _regenerator.default.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          trimmedPrompt = prompt.trim();
+          if (!(!trimmedPrompt || isGenerating)) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return");
+        case 1:
+          setHasError(false);
+          setIsGenerating(true);
+          fireAnalytics === null || fireAnalytics === void 0 || fireAnalytics((0, _analytics.aiGenerationStartedEvent)({
+            promptLength: trimmedPrompt.length
+          }));
+          startTime = Date.now();
+          _context.prev = 2;
+          _context.next = 3;
+          return (0, _generateEmojiImage.generateEmojiImage)({
+            contentId: contentId,
+            prompt: trimmedPrompt
+          });
+        case 3:
+          _yield$generateEmojiI = _context.sent;
+          imageData = _yield$generateEmojiI.imageData;
+          dataURL = "data:image/png;base64,".concat(imageData);
+          suggestedName = (0, _aiEmoji.slugifyPrompt)(trimmedPrompt);
+          fireAnalytics === null || fireAnalytics === void 0 || fireAnalytics((0, _analytics.aiGenerationCompletedEvent)({
+            duration: Date.now() - startTime
+          }));
+          // Hand the generated image to the parent upload form.
+          onEmojiGenerated(dataURL, suggestedName);
+          _context.next = 5;
+          break;
+        case 4:
+          _context.prev = 4;
+          _t = _context["catch"](2);
+          setHasError(true);
+          fireAnalytics === null || fireAnalytics === void 0 || fireAnalytics((0, _analytics.aiGenerationFailedEvent)({
+            errorType: _t instanceof Error ? _t.message : 'generation_failed'
+          }));
+        case 5:
+          _context.prev = 5;
+          setIsGenerating(false);
+          return _context.finish(5);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 4, 5, 6]]);
+  })), [contentId, fireAnalytics, isGenerating, onEmojiGenerated, prompt]);
+  var generateDisabled = !prompt.trim() || isGenerating;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": createEmojiWithRovoTestId,
+    className: (0, _runtime.ax)(["_zulpu2gc _x3doia51 _1e0c1txw _2lx21bp4 _ca0qutpp _19pku2gc"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp12x7 _1e0c1txw _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_logo.RovoIcon, {
+    appearance: "brand",
+    size: "xsmall",
+    label: formatMessage(_i18n.messages.createEmojiWithRovoTitle)
+  }), /*#__PURE__*/React.createElement(_compiled.Text, {
+    size: "medium",
+    weight: "bold"
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.createEmojiWithRovoTitle))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1y6m"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug"])
+  }, /*#__PURE__*/React.createElement(_textfield.default, {
+    value: prompt,
+    onChange: onPromptChange,
+    placeholder: formatMessage(_i18n.messages.createEmojiWithRovoPromptPlaceholder),
+    "aria-label": formatMessage(_i18n.messages.createEmojiWithRovoPromptAriaLabel),
+    isCompact: true,
+    isDisabled: isGenerating,
+    testId: createEmojiWithRovoPromptTestId
+  })), /*#__PURE__*/React.createElement(_new.IconButton, {
+    appearance: "primary",
+    icon: _arrowUp.default,
+    label: formatMessage(_i18n.messages.createEmojiWithRovoGenerateLabel),
+    isDisabled: generateDisabled,
+    isLoading: isGenerating,
+    onClick: onGenerate,
+    testId: createEmojiWithRovoGenerateTestId
+  })), hasError && /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+    errorStyle: "chooseFile",
+    message: /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.createEmojiWithRovoError)
+  }));
+};
+var _default = exports.default = CreateEmojiWithRovo;

package/dist/cjs/components/common/EmojiActions.js

@@ -326,7 +326,9 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onUploadEmoji: onUploadEmoji,
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
-      initialUploadName: initialUploadName
+      initialUploadName: initialUploadName,
+      contentId: props.contentId,
+      fireAnalytics: props.fireAnalytics
     })) : /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
@@ -334,7 +336,9 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onUploadEmoji: onUploadEmoji,
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
-      initialUploadName: initialUploadName
+      initialUploadName: initialUploadName,
+      contentId: props.contentId,
+      fireAnalytics: props.fireAnalytics
     }));
   }
   if (emojiToDelete) {

package/dist/cjs/components/common/EmojiUploadPicker.js

@@ -21,6 +21,7 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _compiled = require("@atlaskit/primitives/compiled");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
+var _CreateEmojiWithRovo = _interopRequireDefault(require("./CreateEmojiWithRovo"));
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _i18n = require("../i18n");
 var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
@@ -29,6 +30,7 @@ var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _browserApis = require("@atlaskit/browser-apis");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -99,6 +101,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     nameErrorMessage = props.nameErrorMessage,
     previewImage = props.previewImage,
     uploadStatus = props.uploadStatus,
+    aiSection = props.aiSection,
     intl = props.intl;
   var formatMessage = intl.formatMessage;
   var disableChooser = !name;
@@ -147,7 +150,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, errorMessage && /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
     errorStyle: "chooseFile",
     message: errorMessage
-  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+  }))), aiSection, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiNameLabel)), /*#__PURE__*/React.createElement(_textfield.default, {
@@ -245,6 +248,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onUploadCancelled = props.onUploadCancelled,
     _props$disableFocusLo = props.disableFocusLock,
     disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
+    contentId = props.contentId,
+    fireAnalytics = props.fireAnalytics,
     intl = props.intl;
   var _useState = (0, _react.useState)(errorMessage ? _internalTypes.UploadStatus.Error : _internalTypes.UploadStatus.Waiting),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -328,6 +333,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var cancelChooseFile = (0, _react.useCallback)(function () {
     setPreviewImage(undefined);
   }, []);
+
+  // When the Rovo section generates an image, feed it into the existing upload
+  // form (same preview, name field and "Add emoji" button as a manual upload).
+  var onEmojiGenerated = (0, _react.useCallback)(function (dataURL, suggestedName) {
+    setFilename('rovo-emoji.png');
+    setPreviewImage(dataURL);
+    setChooseEmojiErrorMessage(undefined);
+    // Only auto-populate the name if the user hasn't already typed one.
+    setName(function (current) {
+      return current || sanitizeName(suggestedName);
+    });
+  }, []);
   var errorOnUpload = (0, _react.useCallback)(function (event) {
     (0, _logger.default)('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiUploadFailed));
@@ -411,6 +428,17 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onFileChooserClicked && onFileChooserClicked();
   };
   var isDuplicateNameError = errorMessage !== null && errorMessage !== undefined && isRefreshEmojiPickerEnabled();
+
+  // "Create an emoji with Rovo" AI generation section. Only rendered when the
+  // experiment is on AND a page content id is available (the image generation
+  // backend requires it). It is rendered inside ChooseEmojiFile (between the
+  // drop area and the Emoji name field) so the generated image reuses the
+  // single shared name field and "Add emoji" button.
+  var aiSection = contentId && (0, _expValEquals.expValEquals)('confluence_ai_generated_emojis', 'isEnabled', true) ? /*#__PURE__*/React.createElement(_CreateEmojiWithRovo.default, {
+    contentId: contentId,
+    fireAnalytics: fireAnalytics,
+    onEmojiGenerated: onEmojiGenerated
+  }) : null;
   var content = name && previewImage && !isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
@@ -429,6 +457,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
     nameErrorMessage: isDuplicateNameError ? errorMessage : undefined,
+    aiSection: aiSection,
     intl: intl
   });
   return disableFocusLock || isRefreshEmojiPickerEnabled() ? content : /*#__PURE__*/React.createElement(_reactFocusLock.default, {

package/dist/cjs/components/i18n.js

@@ -106,6 +106,31 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Add emoji',
     description: 'Label for the submit button in the custom emoji upload panel that saves the new emoji to the workspace.'
   },
+  createEmojiWithRovoTitle: {
+    id: 'fabric.emoji.ai.create.title',
+    defaultMessage: 'Create an emoji with Rovo',
+    description: 'Section heading for the AI emoji generation area where users describe an emoji and generate it with AI.'
+  },
+  createEmojiWithRovoPromptPlaceholder: {
+    id: 'fabric.emoji.ai.prompt.placeholder',
+    defaultMessage: 'Describe your emoji...',
+    description: 'Placeholder text for the input where the user describes the emoji they want the AI to generate.'
+  },
+  createEmojiWithRovoPromptAriaLabel: {
+    id: 'fabric.emoji.ai.prompt.ariaLabel',
+    defaultMessage: 'Describe the emoji you want to generate',
+    description: 'Accessible label for the AI emoji description input field.'
+  },
+  createEmojiWithRovoGenerateLabel: {
+    id: 'fabric.emoji.ai.generate.label',
+    defaultMessage: 'Generate',
+    description: 'Label for the button that triggers AI generation of the described emoji.'
+  },
+  createEmojiWithRovoError: {
+    id: 'fabric.emoji.ai.error',
+    defaultMessage: 'Something went wrong. Try a different description.',
+    description: 'Inline error message shown when AI emoji generation or upload fails, prompting the user to try again.'
+  },
   retryLabel: {
     id: 'fabric.emoji.retry.label',
     defaultMessage: 'Retry',

package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css

@@ -4,6 +4,7 @@
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb10mj{width:var(--_gsvyy7)}
 ._1e0c1txw{display:flex}
@@ -27,11 +28,13 @@
 ._4t3ibqjm{height:310px}
 ._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
+._4t3ikbql{height:450px}
 ._4t3iqbeb{height:339px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._c71l1y6z{max-height:calc(80vh - 86px)}
+._c71l8k0t{max-height:calc(100vh - 86px)}
 ._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -41,6 +41,7 @@ var _useIsMounted = require("../../hooks/useIsMounted");
 var _i18n = require("../i18n");
 var _productivityColors = require("../../util/productivity-colors");
 var _hiddenEmojis = require("../../util/hidden-emojis");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -64,6 +65,17 @@ var heightOffset = 80;
 var emojiPicker = null;
 var emojiPickerNew = null;
 var emojiPickerWrapper = null;
+
+// When the "Create an emoji with Rovo" section is shown in the upload panel the
+// picker needs more vertical room than the fixed upload height. Make it tall
+// enough to fit the whole section without scrolling, but still let it scroll as
+// a safety net on very short viewports.
+var emojiPickerWrapperScrollable = null;
+
+// When the AI emoji experiment is on, grow the upload panel from its default
+// height to 450px so the manual upload form + the slim "Create an emoji with
+// Rovo" section are both visible without scrolling.
+var withAiUploadHeight = null;
 var withPreviewHeight = {
   small: "_4t3ivixp _1tkegx0z",
   medium: "_4t3i2300 _1tke5x59",
@@ -96,6 +108,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onPickerRef = _ref.onPickerRef,
     hideToneSelector = _ref.hideToneSelector,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
+    contentId = _ref.contentId,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.defaultEmojiPickerSize : _ref$size;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -669,13 +682,17 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var showPreview = isRefreshEmojiPickerEnabled() ? !uploading : selectedEmoji && !uploading;
   var shouldRenderFooter = showPreview && !(emojiToDelete && isRefreshEmojiPickerEnabled()) && !(query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled()) && (Boolean(selectedEmoji) || uploadEnabled || !isRefreshEmojiPickerEnabled());
   var useFooterSpaceForList = showPreview && !selectedEmoji && !uploadEnabled && !emojiToDelete && !(query && filteredEmojis.length === 0) && isRefreshEmojiPickerEnabled();
+
+  // When the AI emoji section is shown in the upload panel, grow the picker so
+  // the section isn't clipped by the fixed upload height.
+  var showAiUpload = uploading && !!contentId && (0, _expValEquals.expValEquals)('confluence_ai_generated_emojis', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("div", {
     ref: setPickerRef,
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
     "aria-modal": true,
-    className: (0, _runtime.ax)([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+    className: (0, _runtime.ax)([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"]),
     style: {
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -685,7 +702,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf", showAiUpload && "_1reo15vq _18m91wug"])
   }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
     activeCategoryId: (uploading || emojiToDelete) && isRefreshEmojiPickerEnabled() ? null : activeCategory,
     dynamicCategories: dynamicCategories,
@@ -722,7 +739,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory,
-    useFooterSpaceForList: useFooterSpaceForList
+    useFooterSpaceForList: useFooterSpaceForList,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   }), shouldRenderFooter && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: uploadEnabled,

package/dist/cjs/components/picker/EmojiPickerList.js

@@ -94,7 +94,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onProductivityColorSelected = props.onProductivityColorSelected,
     activeCategoryId = props.activeCategoryId,
     selectedProductivityColor = props.selectedProductivityColor,
-    useFooterSpaceForList = props.useFooterSpaceForList;
+    useFooterSpaceForList = props.useFooterSpaceForList,
+    contentId = props.contentId,
+    fireAnalytics = props.fireAnalytics;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var listRef = (0, _react.useRef)(null);
@@ -513,7 +515,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     query: query,
     onChange: onSearch,
-    resultsCount: visibleEmojis.length
+    resultsCount: visibleEmojis.length,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   }), /*#__PURE__*/_react.default.createElement(_EmojiPickerListContext.EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,

package/dist/cjs/components/uploader/EmojiUploadComponent.js

@@ -29,7 +29,8 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
   var emojiProvider = props.emojiProvider,
     createAnalyticsEvent = props.createAnalyticsEvent,
     onUploaderRef = props.onUploaderRef,
-    disableFocusLock = props.disableFocusLock;
+    disableFocusLock = props.disableFocusLock,
+    contentId = props.contentId;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     uploadErrorMessage = _useState2[0],
@@ -131,7 +132,9 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, uploadErrorMessage) : null,
-    disableFocusLock: disableFocusLock
+    disableFocusLock: disableFocusLock,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   })));
 };
 var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiUploadComponent);