@atlaskit/emoji 71.6.6 → 71.7.0

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapEmojiPrompt = exports.slugifyPrompt = exports.MAX_SHORTNAME_LENGTH = exports.EMOJI_PROMPT_PREFIX = void 0;
+/**
+ * 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).
+ */
+var MAX_SHORTNAME_LENGTH = exports.MAX_SHORTNAME_LENGTH = 50;
+var 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'
+ */
+var slugifyPrompt = exports.slugifyPrompt = function slugifyPrompt(prompt) {
+  if (!prompt) {
+    return '';
+  }
+  var 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);
+  }
+  var 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.
+ */
+var EMOJI_PROMPT_PREFIX = exports.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'
+ */
+var wrapEmojiPrompt = exports.wrapEmojiPrompt = function wrapEmojiPrompt(userPrompt) {
+  return "".concat(EMOJI_PROMPT_PREFIX).concat(userPrompt.trim());
+};

package/dist/cjs/util/analytics/analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadSucceededEvent = exports.uploadFailedEvent = exports.uploadConfirmButton = exports.uploadCancelButton = exports.uploadBeginButton = exports.typeaheadSelectedEvent = exports.typeaheadRenderedEvent = exports.typeaheadCancelledEvent = exports.toneSelectorOpenedEvent = exports.toneSelectorClosedEvent = exports.toneSelectedEvent = exports.selectedFileEvent = exports.recordSucceededEmoji = exports.recordSucceeded = exports.recordSelectionSucceededSli = exports.recordSelectionFailedSli = exports.recordFailedEmoji = exports.recordFailed = exports.pickerSearchedEvent = exports.pickerClickedEvent = exports.openedPickerEvent = exports.extractErrorInfo = exports.deleteConfirmEvent = exports.deleteCancelEvent = exports.deleteBeginEvent = exports.createAndFireEventInElementsChannel = exports.closedPickerEvent = exports.categoryClickedEvent = void 0;
+exports.uploadSucceededEvent = exports.uploadFailedEvent = exports.uploadConfirmButton = exports.uploadCancelButton = exports.uploadBeginButton = exports.typeaheadSelectedEvent = exports.typeaheadRenderedEvent = exports.typeaheadCancelledEvent = exports.toneSelectorOpenedEvent = exports.toneSelectorClosedEvent = exports.toneSelectedEvent = exports.selectedFileEvent = exports.recordSucceededEmoji = exports.recordSucceeded = exports.recordSelectionSucceededSli = exports.recordSelectionFailedSli = exports.recordFailedEmoji = exports.recordFailed = exports.pickerSearchedEvent = exports.pickerClickedEvent = exports.openedPickerEvent = exports.extractErrorInfo = exports.deleteConfirmEvent = exports.deleteCancelEvent = exports.deleteBeginEvent = exports.createAndFireEventInElementsChannel = exports.closedPickerEvent = exports.categoryClickedEvent = exports.aiGenerationStartedEvent = exports.aiGenerationFailedEvent = exports.aiGenerationCompletedEvent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _types = require("../../types");
@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.6.5"
+      packageVersion: "71.6.6"
     }, attributes)
   };
 };
@@ -138,6 +138,18 @@ var uploadSucceededEvent = exports.uploadSucceededEvent = function uploadSucceed
 var uploadFailedEvent = exports.uploadFailedEvent = function uploadFailedEvent(attributes) {
   return createEvent('operational', 'failed', 'emojiUploader', undefined, attributes);
 };
+var aiEmojiGenerationEvent = function aiEmojiGenerationEvent(action, actionSubjectId, attributes) {
+  return createEvent('ui', action, 'emojiPickerAiGeneration', actionSubjectId, attributes);
+};
+var aiGenerationStartedEvent = exports.aiGenerationStartedEvent = function aiGenerationStartedEvent(attributes) {
+  return aiEmojiGenerationEvent('started', 'generateButton', attributes);
+};
+var aiGenerationCompletedEvent = exports.aiGenerationCompletedEvent = function aiGenerationCompletedEvent(attributes) {
+  return createEvent('operational', 'completed', 'emojiPickerAiGeneration', undefined, attributes);
+};
+var aiGenerationFailedEvent = exports.aiGenerationFailedEvent = function aiGenerationFailedEvent(attributes) {
+  return createEvent('operational', 'failed', 'emojiPickerAiGeneration', undefined, attributes);
+};
 var deleteBeginEvent = exports.deleteBeginEvent = function deleteBeginEvent(attributes) {
   return createEvent('ui', 'clicked', 'emojiPicker', 'deleteEmojiTrigger', attributes);
 };

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

@@ -3,6 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "aiGenerationCompletedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.aiGenerationCompletedEvent;
+  }
+});
+Object.defineProperty(exports, "aiGenerationFailedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.aiGenerationFailedEvent;
+  }
+});
+Object.defineProperty(exports, "aiGenerationStartedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.aiGenerationStartedEvent;
+  }
+});
 Object.defineProperty(exports, "categoryClickedEvent", {
   enumerable: true,
   get: function get() {

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

@@ -0,0 +1,64 @@
+/**
+ * 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';
+const 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. */
+const 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 const generateEmojiImage = async ({
+  contentId,
+  prompt
+}) => {
+  const wrappedPrompt = wrapEmojiPrompt(prompt);
+  const response = await 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,
+        useRawPrompt: true,
+        // Emojis are square — request a 1:1 image from the BE.
+        aspectRatio: EMOJI_ASPECT_RATIO
+      }
+    })
+  });
+  if (!response.ok) {
+    debug('generateEmojiImage failed', response.status);
+    throw new Error(`Emoji image generation failed with status ${response.status}`);
+  }
+  const json = await response.json();
+  const output = json === null || json === void 0 ? void 0 : json.ai_feature_output;
+  if (!output) {
+    throw new Error('Emoji image generation returned no content');
+  }
+
+  // The BE can return 200 OK with an error in the body (e.g. moderation).
+  if (output.error) {
+    throw new Error(output.error.error_message || output.error.error_reason || 'Emoji image generation failed');
+  }
+  if (!output.imageData) {
+    throw new Error('Emoji image generation did not return image data');
+  }
+  return {
+    imageData: output.imageData,
+    mediaFileId: output.mediaFileId
+  };
+};

package/dist/es2019/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/es2019/components/common/CreateEmojiWithRovo.js

@@ -0,0 +1,113 @@
+/* CreateEmojiWithRovo.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./CreateEmojiWithRovo.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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 const createEmojiWithRovoTestId = 'create-emoji-with-rovo';
+export const createEmojiWithRovoPromptTestId = 'create-emoji-with-rovo-prompt';
+export const createEmojiWithRovoGenerateTestId = 'create-emoji-with-rovo-generate';
+const sectionStyles = null;
+const headerStyles = null;
+const promptRowStyles = null;
+const promptInputStyles = null;
+const CreateEmojiWithRovo = props => {
+  const {
+    contentId,
+    fireAnalytics,
+    onEmojiGenerated
+  } = props;
+  const {
+    formatMessage
+  } = useIntl();
+  const [prompt, setPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const onPromptChange = useCallback(event => {
+    setPrompt(event.target.value);
+    // Clear any previous error as soon as the user edits the prompt to retry.
+    setHasError(false);
+  }, []);
+  const onGenerate = useCallback(async () => {
+    const trimmedPrompt = prompt.trim();
+    if (!trimmedPrompt || isGenerating) {
+      return;
+    }
+    setHasError(false);
+    setIsGenerating(true);
+    fireAnalytics === null || fireAnalytics === void 0 ? void 0 : fireAnalytics(aiGenerationStartedEvent({
+      promptLength: trimmedPrompt.length
+    }));
+    const startTime = Date.now();
+    try {
+      const {
+        imageData
+      } = await generateEmojiImage({
+        contentId,
+        prompt: trimmedPrompt
+      });
+      const dataURL = `data:image/png;base64,${imageData}`;
+      const suggestedName = slugifyPrompt(trimmedPrompt);
+      fireAnalytics === null || fireAnalytics === void 0 ? void 0 : fireAnalytics(aiGenerationCompletedEvent({
+        duration: Date.now() - startTime
+      }));
+      // Hand the generated image to the parent upload form.
+      onEmojiGenerated(dataURL, suggestedName);
+    } catch (error) {
+      setHasError(true);
+      fireAnalytics === null || fireAnalytics === void 0 ? void 0 : fireAnalytics(aiGenerationFailedEvent({
+        errorType: error instanceof Error ? error.message : 'generation_failed'
+      }));
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [contentId, fireAnalytics, isGenerating, onEmojiGenerated, prompt]);
+  const 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/es2019/components/common/EmojiActions.js

@@ -308,7 +308,9 @@ export const 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, {
@@ -316,7 +318,9 @@ export const EmojiActions = props => {
       onUploadEmoji: onUploadEmoji,
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
-      initialUploadName: initialUploadName
+      initialUploadName: initialUploadName,
+      contentId: props.contentId,
+      fireAnalytics: props.fireAnalytics
     }));
   }
   if (emojiToDelete) {

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

@@ -10,6 +10,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';
@@ -18,6 +19,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';
@@ -86,6 +88,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     nameErrorMessage,
     previewImage,
     uploadStatus,
+    aiSection,
     intl
   } = props;
   const {
@@ -135,7 +138,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(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, {
@@ -231,6 +234,8 @@ const EmojiUploadPicker = props => {
     onFileChooserClicked,
     onUploadCancelled,
     disableFocusLock = false,
+    contentId,
+    fireAnalytics,
     intl
   } = props;
   const [uploadStatus, setUploadStatus] = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting);
@@ -302,6 +307,16 @@ const EmojiUploadPicker = props => {
   const cancelChooseFile = useCallback(() => {
     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).
+  const onEmojiGenerated = useCallback((dataURL, suggestedName) => {
+    setFilename('rovo-emoji.png');
+    setPreviewImage(dataURL);
+    setChooseEmojiErrorMessage(undefined);
+    // Only auto-populate the name if the user hasn't already typed one.
+    setName(current => current || sanitizeName(suggestedName));
+  }, []);
   const errorOnUpload = useCallback(event => {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUploadFailed));
@@ -364,6 +379,17 @@ const EmojiUploadPicker = props => {
     onFileChooserClicked && onFileChooserClicked();
   };
   const 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.
+  const aiSection = contentId && expValEquals('confluence_ai_generated_emojis', 'isEnabled', true) ? /*#__PURE__*/React.createElement(CreateEmojiWithRovo, {
+    contentId: contentId,
+    fireAnalytics: fireAnalytics,
+    onEmojiGenerated: onEmojiGenerated
+  }) : null;
   const content = name && previewImage && !isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
@@ -382,6 +408,7 @@ const EmojiUploadPicker = props => {
     uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
     nameErrorMessage: isDuplicateNameError ? errorMessage : undefined,
+    aiSection: aiSection,
     intl: intl
   });
   return disableFocusLock || isRefreshEmojiPickerEnabled() ? content : /*#__PURE__*/React.createElement(FocusLock, {

package/dist/es2019/components/i18n.js

@@ -100,6 +100,31 @@ export const 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/es2019/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}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}
@@ -27,10 +28,12 @@
 ._4t3ibqjm{height:310px}
 ._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
+._4t3ikbql{height:450px}
 ._4t3iqbeb{height:339px}
 ._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/es2019/components/picker/EmojiPickerComponent.js

@@ -28,6 +28,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';
 const isRefreshEmojiPickerEnabled = () => {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -48,6 +49,17 @@ const heightOffset = 80;
 const emojiPicker = null;
 const emojiPickerNew = null;
 const 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.
+const 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.
+const withAiUploadHeight = null;
 const withPreviewHeight = {
   small: "_4t3ivixp _1tkegx0z",
   medium: "_4t3i2300 _1tke5x59",
@@ -80,6 +92,7 @@ const EmojiPickerComponent = ({
   onPickerRef,
   hideToneSelector,
   createAnalyticsEvent,
+  contentId,
   size = defaultEmojiPickerSize
 }) => {
   const {
@@ -574,19 +587,23 @@ const EmojiPickerComponent = ({
   const showPreview = isRefreshEmojiPickerEnabled() ? !uploading : selectedEmoji && !uploading;
   const shouldRenderFooter = showPreview && !(emojiToDelete && isRefreshEmojiPickerEnabled()) && !(query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled()) && (Boolean(selectedEmoji) || uploadEnabled || !isRefreshEmojiPickerEnabled());
   const 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.
+  const 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 _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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 _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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"])
   }, /*#__PURE__*/React.createElement("div", {
     role: "presentation",
     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,
@@ -623,7 +640,9 @@ const EmojiPickerComponent = ({
     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/es2019/components/picker/EmojiPickerList.js

@@ -77,7 +77,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onProductivityColorSelected,
     activeCategoryId,
     selectedProductivityColor,
-    useFooterSpaceForList
+    useFooterSpaceForList,
+    contentId,
+    fireAnalytics
   } = props;
   const {
     formatMessage
@@ -468,7 +470,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     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/es2019/components/uploader/EmojiUploadComponent.js

@@ -18,7 +18,8 @@ const EmojiUploadComponent = props => {
     emojiProvider,
     createAnalyticsEvent,
     onUploaderRef,
-    disableFocusLock
+    disableFocusLock,
+    contentId
   } = props;
   const [uploadErrorMessage, setUploadErrorMessage] = useState();
   useEffect(() => {
@@ -91,7 +92,9 @@ const EmojiUploadComponent = props => {
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     errorMessage: uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null,
-    disableFocusLock: disableFocusLock
+    disableFocusLock: disableFocusLock,
+    contentId: contentId,
+    fireAnalytics: fireAnalytics
   })));
 };
 const _default_1 = /*#__PURE__*/memo(EmojiUploadComponent);