@atlaskit/emoji 71.6.5 → 71.7.0

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

@@ -0,0 +1,66 @@
+/**
+ * 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 var 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'
+ */
+export var 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.
+ */
+export var 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 var wrapEmojiPrompt = function wrapEmojiPrompt(userPrompt) {
+  return "".concat(EMOJI_PROMPT_PREFIX).concat(userPrompt.trim());
+};

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.6.4"
+      packageVersion: "71.6.6"
     }, attributes)
   };
 };
@@ -132,6 +132,18 @@ export var uploadSucceededEvent = function uploadSucceededEvent(attributes) {
 export var 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);
+};
+export var aiGenerationStartedEvent = function aiGenerationStartedEvent(attributes) {
+  return aiEmojiGenerationEvent('started', 'generateButton', attributes);
+};
+export var aiGenerationCompletedEvent = function aiGenerationCompletedEvent(attributes) {
+  return createEvent('operational', 'completed', 'emojiPickerAiGeneration', undefined, attributes);
+};
+export var aiGenerationFailedEvent = function aiGenerationFailedEvent(attributes) {
+  return createEvent('operational', 'failed', 'emojiPickerAiGeneration', undefined, attributes);
+};
 export var deleteBeginEvent = function deleteBeginEvent(attributes) {
   return createEvent('ui', 'clicked', 'emojiPicker', 'deleteEmojiTrigger', attributes);
 };

package/dist/esm/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/types/api/ai/generateEmojiImage.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Calls the Confluence "header image" AI backend to generate an emoji-style
+ * image (base64) from a text description.
+ */
+export interface GenerateEmojiImageResult {
+    /** Base64-encoded image data, used for preview and emoji upload. */
+    imageData: string;
+    /** Media Service file id (informational; not used for registration). */
+    mediaFileId?: string;
+}
+export interface GenerateEmojiImageOptions {
+    /**
+     * The current Confluence page content id. Required by the header image BE so
+     * generation is scoped/attributed to a piece of content.
+     */
+    contentId: string;
+    /**
+     * The raw text description typed by the user (e.g. "a cat wearing a hard hat").
+     * It is wrapped with the emoji-style prefix before being sent to the backend.
+     */
+    prompt: string;
+}
+/**
+ * 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 declare const generateEmojiImage: ({ contentId, prompt, }: GenerateEmojiImageOptions) => Promise<GenerateEmojiImageResult>;

package/dist/types/components/common/CreateEmojiWithRovo.d.ts

@@ -0,0 +1,24 @@
+import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+export declare const createEmojiWithRovoTestId = "create-emoji-with-rovo";
+export declare const createEmojiWithRovoPromptTestId = "create-emoji-with-rovo-prompt";
+export declare const createEmojiWithRovoGenerateTestId = "create-emoji-with-rovo-generate";
+export interface CreateEmojiWithRovoProps {
+    /**
+     * The current Confluence page content id. Required by the image generation
+     * backend. When absent, the section should not be rendered by the caller.
+     */
+    contentId: string;
+    /**
+     * Fires an analytics event in the elements channel.
+     */
+    fireAnalytics?: (event: AnalyticsEventPayload) => void;
+    /**
+     * Called when an emoji image has been generated. The generated image (as a
+     * data URL) and a suggested slug name are handed back to the parent upload
+     * form, which then drives the shared preview, name field and "Add emoji"
+     * button — so there is a single name input and a single submit button.
+     */
+    onEmojiGenerated: (dataURL: string, suggestedName: string) => void;
+}
+declare const CreateEmojiWithRovo: (props: CreateEmojiWithRovoProps) => JSX.Element;
+export default CreateEmojiWithRovo;

package/dist/types/components/common/EmojiActions.d.ts

@@ -5,6 +5,7 @@
 import { type ComponentType, type FC } from 'react';
 import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
 import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
+import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import type { CategoryId } from '../picker/categories';
 import { type OnDeleteEmoji } from './EmojiDeletePreview';
 import { type OnUploadEmoji } from './EmojiUploadPicker';
@@ -12,6 +13,16 @@ import type { ProductivityColor } from '../../util/productivity-colors';
 export interface Props {
     activeCategoryId?: CategoryId | null;
     activeAtlassianSubcategory?: string | null;
+    /**
+     * Current Confluence page content id, required to enable AI emoji generation.
+     * When undefined, the "Create an emoji with Rovo" section is not shown.
+     */
+    contentId?: string;
+    /**
+     * Fires an analytics event in the elements channel. Required for AI emoji
+     * generation analytics.
+     */
+    fireAnalytics?: (event: AnalyticsEventPayload) => void;
     emojiToDelete?: EmojiDescription;
     initialUploadName?: string;
     onChange: (value: string) => void;

package/dist/types/components/common/EmojiUploadPicker.d.ts

@@ -4,6 +4,7 @@
  */
 import { type ComponentType, type FC } from 'react';
 import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
+import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import type { EmojiUpload, Message } from '../../types';
 export interface OnUploadEmoji {
     (upload: EmojiUpload, retry: boolean, onSuccessHandler?: () => void): void;
@@ -18,6 +19,14 @@ export interface Props {
     onFileChooserClicked?: () => void;
     onUploadCancelled: () => void;
     onUploadEmoji: OnUploadEmoji;
+    /**
+     * Current Confluence page content id. When provided (and the
+     * `confluence_ai_generated_emojis` experiment is on), the "Create an emoji
+     * with Rovo" AI generation section is shown above the Emoji name field.
+     */
+    contentId?: string;
+    /** Fires an analytics event (used by AI emoji generation). */
+    fireAnalytics?: (event: AnalyticsEventPayload) => void;
 }
 declare const EmojiUploadPickerComponent: FC<WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: ComponentType<Props & WrappedComponentProps>;

package/dist/types/components/i18n.d.ts

@@ -14,6 +14,31 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    createEmojiWithRovoTitle: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    createEmojiWithRovoPromptPlaceholder: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    createEmojiWithRovoPromptAriaLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    createEmojiWithRovoGenerateLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+    createEmojiWithRovoError: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     allUploadsCustomCategory: {
         defaultMessage: string;
         description: string;

package/dist/types/components/picker/EmojiPicker.d.ts

@@ -11,6 +11,12 @@ import LoadingEmojiComponent, { type Props as LoadingProps, type State as Loadin
 import type { PickerRefHandler, Props as ComponentProps } from './EmojiPickerComponent';
 export declare const preloadEmojiPicker: () => void;
 export interface Props extends LoadingProps {
+    /**
+     * The current Confluence page content id. When provided (and the
+     * `confluence_ai_generated_emojis` experiment is on), enables the
+     * "Create an emoji with Rovo" AI generation section in the upload flow.
+     */
+    contentId?: string;
     /**
      * Flag to disable tone selector.
      */

package/dist/types/components/picker/EmojiPickerComponent.d.ts

@@ -6,6 +6,12 @@ export interface PickerRefHandler {
 }
 export interface Props {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    /**
+     * The current Confluence page content id. When provided (and the
+     * `confluence_ai_generated_emojis` experiment is on), enables the
+     * "Create an emoji with Rovo" AI generation section in the upload flow.
+     */
+    contentId?: string;
     /**
      * Flag to disable tone selector.
      */

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnCategory, OnEmojiEvent, OnToneSelected, OnToneSelectorCancelled, PickerSize, ToneSelection, User } from '../../types';
 import { type ProductivityColor } from '../../util/productivity-colors';
 import { type CategoryId } from './categories';
+import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import type { OnUploadEmoji } from '../common/EmojiUploadPicker';
 import type { OnDeleteEmoji } from '../common/EmojiDeletePreview';
 /**
@@ -13,6 +14,10 @@ export interface OnSearch {
 }
 export interface Props {
     activeCategoryId?: CategoryId | null;
+    /** Current Confluence page content id, enables AI emoji generation. */
+    contentId?: string;
+    /** Fires analytics events (used by AI emoji generation). */
+    fireAnalytics?: (event: AnalyticsEventPayload) => void;
     currentUser?: User;
     emojis: EmojiDescription[];
     emojiToDelete?: EmojiDescription;

package/dist/types/components/uploader/EmojiUploadComponent.d.ts

@@ -13,6 +13,8 @@ export interface Props {
     disableFocusLock?: boolean;
     emojiProvider: EmojiProvider;
     onUploaderRef?: UploadRefHandler;
+    /** Current Confluence page content id, enables AI emoji generation. */
+    contentId?: string;
 }
 declare const _default_1: MemoExoticComponent<(props: Props) => JSX.Element>;
 export default _default_1;

package/dist/types/util/ai-emoji.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 declare const MAX_SHORTNAME_LENGTH = 50;
+/**
+ * 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 declare const slugifyPrompt: (prompt: string) => string;
+/**
+ * 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 declare 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 declare const wrapEmojiPrompt: (userPrompt: string) => string;

package/dist/types/util/analytics/analytics.d.ts

@@ -44,6 +44,13 @@ export declare const uploadSucceededEvent: (attributes: Duration) => AnalyticsEv
 export declare const uploadFailedEvent: (attributes: {
     reason: string;
 } & Duration) => AnalyticsEventPayload;
+export declare const aiGenerationStartedEvent: (attributes: {
+    promptLength: number;
+}) => AnalyticsEventPayload;
+export declare const aiGenerationCompletedEvent: (attributes: Duration) => AnalyticsEventPayload;
+export declare const aiGenerationFailedEvent: (attributes: {
+    errorType: string;
+}) => AnalyticsEventPayload;
 interface Attributes {
     emojiId?: string;
 }

package/dist/types/util/analytics/index.d.ts

@@ -1,6 +1,6 @@
 export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling, } from './samplingUfo';
 export type { UFOExperienceSampledRecords, WithSamplingUFOExperience } 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 type { EmojiInsertionAnalytic } from './analytics';
 export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.6.5",
+	"version": "71.7.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,6 +40,7 @@
 		"@atlaskit/icon": "^36.1.0",
 		"@atlaskit/icon-lab": "^7.2.0",
 		"@atlaskit/image": "^4.1.0",
+		"@atlaskit/logo": "^21.3.0",
 		"@atlaskit/media-client": "^37.1.0",
 		"@atlaskit/media-client-react": "^6.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
@@ -49,7 +50,7 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^118.0.0",
+		"@atlaskit/tmp-editor-statsig": "^119.2.0",
 		"@atlaskit/tokens": "^15.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -150,6 +151,10 @@
 		"platform_teamoji_26_refresh_emoji_picker": {
 			"param": "isEnabled",
 			"defaultValue": false
+		},
+		"confluence_ai_generated_emojis": {
+			"param": "isEnabled",
+			"defaultValue": false
 		}
 	},
 	"scripts": {