@atlaskit/emoji 71.6.5 → 71.7.0

package/dist/es2019/util/ai-emoji.js

@@ -0,0 +1,64 @@
+/**
+ * Pure utilities for the "Create an emoji with Rovo" (AI emoji generation) flow.
+ */
+
+/**
+ * Maximum length of an auto-generated shortname. Matches the `maxNameLength`
+ * used by the manual emoji upload flow (see EmojiUploadPicker).
+ */
+export const MAX_SHORTNAME_LENGTH = 50;
+const LEADING_ARTICLES = ['a', 'an', 'the'];
+
+/**
+ * Convert a free-text emoji description into a slugified shortname suitable for
+ * the `:shortname:` field expected by pf-emoji-service.
+ *
+ * Rules (v1):
+ * - Strip leading articles (a, an, the)
+ * - Lowercase
+ * - Replace runs of whitespace with a single underscore
+ * - Remove any character that is not a-z, 0-9 or underscore
+ * - Collapse repeated underscores and trim leading/trailing underscores
+ * - Truncate to {@link MAX_SHORTNAME_LENGTH} characters
+ *
+ * @example
+ * slugifyPrompt('a cat wearing a hard hat') // => 'cat_wearing_a_hard_hat'
+ */
+export const slugifyPrompt = prompt => {
+  if (!prompt) {
+    return '';
+  }
+  let words = prompt.trim().toLowerCase().split(/\s+/);
+
+  // Strip a single leading article only (e.g. "a cat" -> "cat").
+  if (words.length > 1 && LEADING_ARTICLES.includes(words[0])) {
+    words = words.slice(1);
+  }
+  const slug = words.join('_')
+  // remove everything that is not a word char (letters, digits, underscore)
+  .replace(/[^a-z0-9_]/g, '')
+  // collapse repeated underscores introduced by removed characters
+  .replace(/_+/g, '_')
+  // trim leading/trailing underscores
+  .replace(/^_+|_+$/g, '');
+  return slug.slice(0, MAX_SHORTNAME_LENGTH);
+};
+
+/**
+ * Prefix prepended to the user's description so the header-image backend
+ * produces clean, emoji-style output instead of a scene/photo.
+ *
+ * Kept as a single line (no newlines) — newlines in the prompt can degrade the
+ * model's output. Learnings from ShipIt 56 ("Emoji Pop") showed that a simple
+ * prompt prefix significantly improved emoji quality.
+ */
+export const EMOJI_PROMPT_PREFIX = 'Generate a clean, simple, emoji-style icon of ';
+
+/**
+ * Wrap the raw user prompt with the emoji-style prefix.
+ *
+ * @example
+ * wrapEmojiPrompt('a cat wearing a hard hat')
+ * // => 'Generate a clean, simple, emoji-style icon of a cat wearing a hard hat'
+ */
+export const wrapEmojiPrompt = userPrompt => `${EMOJI_PROMPT_PREFIX}${userPrompt.trim()}`;

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.6.4",
+    packageVersion: "71.6.6",
     ...attributes
   }
 });
@@ -91,6 +91,10 @@ export const uploadConfirmButton = attributes => emojiUploaderEvent('clicked', '
 export const uploadCancelButton = () => emojiUploaderEvent('clicked', 'cancelButton');
 export const uploadSucceededEvent = attributes => createEvent('operational', 'finished', 'emojiUploader', undefined, attributes);
 export const uploadFailedEvent = attributes => createEvent('operational', 'failed', 'emojiUploader', undefined, attributes);
+const aiEmojiGenerationEvent = (action, actionSubjectId, attributes) => createEvent('ui', action, 'emojiPickerAiGeneration', actionSubjectId, attributes);
+export const aiGenerationStartedEvent = attributes => aiEmojiGenerationEvent('started', 'generateButton', attributes);
+export const aiGenerationCompletedEvent = attributes => createEvent('operational', 'completed', 'emojiPickerAiGeneration', undefined, attributes);
+export const aiGenerationFailedEvent = attributes => createEvent('operational', 'failed', 'emojiPickerAiGeneration', undefined, attributes);
 export const deleteBeginEvent = attributes => createEvent('ui', 'clicked', 'emojiPicker', 'deleteEmojiTrigger', attributes);
 export const deleteConfirmEvent = attributes => createEvent('ui', 'clicked', 'emojiPicker', 'deleteEmojiConfirm', attributes);
 export const deleteCancelEvent = attributes => createEvent('ui', 'clicked', 'emojiPicker', 'deleteEmojiCancel', attributes);

package/dist/es2019/util/analytics/index.js

@@ -1,4 +1,4 @@
 export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling } from './samplingUfo';
-export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordFailedEmoji, recordSucceeded, recordSucceededEmoji, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { aiGenerationStartedEvent, aiGenerationCompletedEvent, aiGenerationFailedEvent, categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordFailedEmoji, recordSucceeded, recordSucceededEmoji, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
 export { sampledUfoRenderedEmoji, ufoExperiences } from './ufoExperiences';
 export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

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

@@ -0,0 +1,94 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * Calls the Confluence "header image" AI backend to generate an emoji-style
+ * image (base64) from a text description.
+ */
+
+import { wrapEmojiPrompt } from '../../util/ai-emoji';
+import debug from '../../util/logger';
+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.
+ */
+export var generateEmojiImage = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var contentId, prompt, wrappedPrompt, response, json, output;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          contentId = _ref.contentId, prompt = _ref.prompt;
+          wrappedPrompt = 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;
+          }
+          debug('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/esm/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/esm/components/common/CreateEmojiWithRovo.js

@@ -0,0 +1,141 @@
+/* CreateEmojiWithRovo.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./CreateEmojiWithRovo.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { IconButton } from '@atlaskit/button/new';
+import TextField from '@atlaskit/textfield';
+import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
+import { RovoIcon } from '@atlaskit/logo';
+import { Text } from '@atlaskit/primitives/compiled';
+import { generateEmojiImage } from '../../api/ai/generateEmojiImage';
+import { slugifyPrompt } from '../../util/ai-emoji';
+import { aiGenerationStartedEvent, aiGenerationCompletedEvent, aiGenerationFailedEvent } from '../../util/analytics';
+import { messages } from '../i18n';
+import EmojiErrorMessage from './EmojiErrorMessage';
+export var createEmojiWithRovoTestId = 'create-emoji-with-rovo';
+export var createEmojiWithRovoPromptTestId = 'create-emoji-with-rovo-prompt';
+export var 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    prompt = _useState2[0],
+    setPrompt = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isGenerating = _useState4[0],
+    setIsGenerating = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasError = _useState6[0],
+    setHasError = _useState6[1];
+  var onPromptChange = 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 = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var trimmedPrompt, startTime, _yield$generateEmojiI, imageData, dataURL, suggestedName, _t;
+    return _regeneratorRuntime.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(aiGenerationStartedEvent({
+            promptLength: trimmedPrompt.length
+          }));
+          startTime = Date.now();
+          _context.prev = 2;
+          _context.next = 3;
+          return generateEmojiImage({
+            contentId: contentId,
+            prompt: trimmedPrompt
+          });
+        case 3:
+          _yield$generateEmojiI = _context.sent;
+          imageData = _yield$generateEmojiI.imageData;
+          dataURL = "data:image/png;base64,".concat(imageData);
+          suggestedName = slugifyPrompt(trimmedPrompt);
+          fireAnalytics === null || fireAnalytics === void 0 || fireAnalytics(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(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: ax(["_zulpu2gc _x3doia51 _1e0c1txw _2lx21bp4 _ca0qutpp _19pku2gc"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp12x7 _1e0c1txw _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(RovoIcon, {
+    appearance: "brand",
+    size: "xsmall",
+    label: formatMessage(messages.createEmojiWithRovoTitle)
+  }), /*#__PURE__*/React.createElement(Text, {
+    size: "medium",
+    weight: "bold"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.createEmojiWithRovoTitle))), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _1e0c1txw _4cvr1y6m"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug"])
+  }, /*#__PURE__*/React.createElement(TextField, {
+    value: prompt,
+    onChange: onPromptChange,
+    placeholder: formatMessage(messages.createEmojiWithRovoPromptPlaceholder),
+    "aria-label": formatMessage(messages.createEmojiWithRovoPromptAriaLabel),
+    isCompact: true,
+    isDisabled: isGenerating,
+    testId: createEmojiWithRovoPromptTestId
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "primary",
+    icon: ArrowUpIcon,
+    label: formatMessage(messages.createEmojiWithRovoGenerateLabel),
+    isDisabled: generateDisabled,
+    isLoading: isGenerating,
+    onClick: onGenerate,
+    testId: createEmojiWithRovoGenerateTestId
+  })), hasError && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+    errorStyle: "chooseFile",
+    message: /*#__PURE__*/React.createElement(FormattedMessage, messages.createEmojiWithRovoError)
+  }));
+};
+export default CreateEmojiWithRovo;

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

@@ -317,7 +317,9 @@ export var 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: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
@@ -325,7 +327,9 @@ export var EmojiActions = function EmojiActions(props) {
       onUploadEmoji: onUploadEmoji,
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
-      initialUploadName: initialUploadName
+      initialUploadName: initialUploadName,
+      contentId: props.contentId,
+      fireAnalytics: props.fireAnalytics
     }));
   }
   if (emojiToDelete) {

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

@@ -13,6 +13,7 @@ import AkButton from '@atlaskit/button/standard-button';
 import { Text } from '@atlaskit/primitives/compiled';
 import FocusLock from 'react-focus-lock';
 import * as ImageUtil from '../../util/image';
+import CreateEmojiWithRovo from './CreateEmojiWithRovo';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
 import EmojiErrorMessage from './EmojiErrorMessage';
@@ -21,6 +22,7 @@ import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Button from '@atlaskit/button/new';
 import { Box } from '@atlaskit/primitives/compiled';
 import { getDocument } from '@atlaskit/browser-apis';
@@ -91,6 +93,7 @@ var ChooseEmojiFile = /*#__PURE__*/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;
@@ -139,7 +142,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   }, errorMessage && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
     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: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiNameLabel)), /*#__PURE__*/React.createElement(TextField, {
@@ -237,6 +240,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 = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting),
     _useState2 = _slicedToArray(_useState, 2),
@@ -320,6 +325,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var cancelChooseFile = 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 = 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 = useCallback(function (event) {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUploadFailed));
@@ -403,6 +420,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 && expValEquals('confluence_ai_generated_emojis', 'isEnabled', true) ? /*#__PURE__*/React.createElement(CreateEmojiWithRovo, {
+    contentId: contentId,
+    fireAnalytics: fireAnalytics,
+    onEmojiGenerated: onEmojiGenerated
+  }) : null;
   var content = name && previewImage && !isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
@@ -421,6 +449,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(FocusLock, {

package/dist/esm/components/i18n.js

@@ -100,6 +100,31 @@ export var messages = 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/esm/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/esm/components/picker/EmojiPickerComponent.js

@@ -35,6 +35,7 @@ import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
 import { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
 import { filterHiddenEmojis } from '../../util/hidden-emojis';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -55,6 +56,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",
@@ -87,6 +99,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 ? defaultEmojiPickerSize : _ref$size;
   var _useIntl = useIntl(),
@@ -660,13 +673,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 && expValEquals('confluence_ai_generated_emojis', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("div", {
     ref: setPickerRef,
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),
     "aria-modal": true,
-    className: 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: 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": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -676,7 +693,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf", showAiUpload && "_1reo15vq _18m91wug"])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
     activeCategoryId: (uploading || emojiToDelete) && isRefreshEmojiPickerEnabled() ? null : activeCategory,
     dynamicCategories: dynamicCategories,
@@ -713,7 +730,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, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: uploadEnabled,

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

@@ -86,7 +86,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onProductivityColorSelected = props.onProductivityColorSelected,
     activeCategoryId = props.activeCategoryId,
     selectedProductivityColor = props.selectedProductivityColor,
-    useFooterSpaceForList = props.useFooterSpaceForList;
+    useFooterSpaceForList = props.useFooterSpaceForList,
+    contentId = props.contentId,
+    fireAnalytics = props.fireAnalytics;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var listRef = useRef(null);
@@ -505,7 +507,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     query: query,
     onChange: onSearch,
-    resultsCount: visibleEmojis.length
+    resultsCount: visibleEmojis.length,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   }), /*#__PURE__*/React.createElement(EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,

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

@@ -20,7 +20,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 = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     uploadErrorMessage = _useState2[0],
@@ -122,7 +123,9 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null,
-    disableFocusLock: disableFocusLock
+    disableFocusLock: disableFocusLock,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   })));
 };
 var _default_1 = /*#__PURE__*/memo(EmojiUploadComponent);