[Chat] Remove inline image from stable (#4010)

* Revert "[Chat] Remove file card group message from stable API (#3940)"

This reverts commit 74a97ba.

* Revert "[Chat] Rename ImageGallery related Chat Theme (#3936)"

This reverts commit 98b9f7d.

* Revert Inline Image GA changes

* Fix lint issues

* Change files

* Duplicate change files for beta release

* Separate file sharing with inline image

* Remove test CC

* Update FileDownloadCards.test.tsx

* Update ChatScreen.tsx

change-beta/@azure-communication-react-271e1156-3766-4b14-99c4-12db881e1dad.json → change-beta/@azure-communication-react-61f937b2-cbad-478d-8fd1-0dee23f52308.json

@@ -1,9 +1,9 @@
 {
-  "type": "minor",
+  "type": "none",
   "area": "improvement",
   "workstream": "InlineImageGA",
-  "comment": "Remove FileCardGroupMessage From Stable API",
+  "comment": "Remove Inline Image from stable",
   "packageName": "@azure/communication-react",
   "email": "[email protected]",
-  "dependentChangeType": "patch"
+  "dependentChangeType": "none"
 }

change/@azure-communication-react-271e1156-3766-4b14-99c4-12db881e1dad.json → change/@azure-communication-react-61f937b2-cbad-478d-8fd1-0dee23f52308.json

@@ -1,9 +1,9 @@
 {
-  "type": "minor",
+  "type": "none",
   "area": "improvement",
   "workstream": "InlineImageGA",
-  "comment": "Remove FileCardGroupMessage From Stable API",
+  "comment": "Remove Inline Image from stable",
   "packageName": "@azure/communication-react",
   "email": "[email protected]",
-  "dependentChangeType": "patch"
+  "dependentChangeType": "none"
 }

common/config/babel/features.js

@@ -41,6 +41,8 @@ module.exports = {
     "teams-adhoc-call",
     // Joining calls using teams token
     "teams-identity-support",
+    // Chat teams interop to display images and file attachments in chat messages
+    "teams-inline-images-and-file-sharing",
     "unsupported-browser",
     // Support Calling SDK isReceiving flag, shows a loading spinner on the video tile when isAvailable is true but isReceiving is false
     "video-stream-is-receiving-flag",
@@ -62,6 +64,8 @@ module.exports = {
     "capabilities",
     // Feature for custom video gallery layouts
     "gallery-layouts",
+    // Feature image gallery
+    "image-gallery",
     // Feature for large Gallery layout
     "large-gallery",
     // feature for positioning the overflowGallery at the top of the screen in the composite

packages/chat-component-bindings/src/messageThreadSelector.ts

@@ -19,9 +19,7 @@ import {
   CommunicationParticipant,
   SystemMessage,
   MessageContentType,
-  ReadReceiptsBySenderId,
-  InlineImageMetadata,
-  ChatAttachmentType as AttachmentType
+  ReadReceiptsBySenderId
 } from '@internal/react-components';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { BlockedMessage } from '@internal/react-components';
@@ -32,7 +30,10 @@ import { ACSKnownMessageType } from './utils/constants';
 import { updateMessagesWithAttached } from './utils/updateMessagesWithAttached';
 /* @conditional-compile-remove(file-sharing) */
 import { FileMetadata } from '@internal/react-components';
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 import { ChatAttachment, ChatAttachmentType } from '@azure/communication-chat';
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+import { ChatAttachmentType as AttachmentType, InlineImageMetadata } from '@internal/react-components';
 
 const memoizedAllConvertChatMessage = memoizeFnAll(
   (
@@ -72,7 +73,7 @@ const extractAttachedFilesMetadata = (metadata: Record<string, string>): FileMet
     return [];
   }
 };
-
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractTeamsAttachmentsMetadata = (
   attachments: ChatAttachment[]
 ): { /* @conditional-compile-remove(file-sharing) */ files: FileMetadata[]; inlineImages: InlineImageMetadata[] } => {
@@ -97,7 +98,7 @@ const extractTeamsAttachmentsMetadata = (
         attachmentType: attachmentType,
         id: attachment.id,
         name: attachment.name ?? '',
-        extension: contentType,
+        extension: contentType ?? '',
         url: extractAttachmentUrl(attachment),
         payload: { teamsFileAttachment: 'true' }
       });
@@ -128,6 +129,7 @@ const convertToUiBlockedMessage = (
   };
 };
 
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const mapAttachmentType = (attachmentType: ChatAttachmentType): AttachmentType => {
   if (attachmentType === 'image') {
     return 'inlineImage';
@@ -139,12 +141,14 @@ const mapAttachmentType = (attachmentType: ChatAttachmentType): AttachmentType =
   return 'unknown';
 };
 
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractAttachmentUrl = (attachment: ChatAttachment): string => {
   /* @conditional-compile-remove(file-sharing) */
   return attachment.attachmentType === 'file' && attachment.previewUrl ? attachment.previewUrl : attachment.url || '';
   return attachment.url || '';
 };
 const processChatMessageContent = (message: ChatMessageWithStatus): string | undefined => {
+  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
   if (sanitizedMessageContentType(message.type).includes('html') && message.content?.attachments) {
     const attachments: ChatAttachment[] = message.content?.attachments;
     const teamsImageHtmlContent = attachments
@@ -160,11 +164,13 @@ const processChatMessageContent = (message: ChatMessageWithStatus): string | und
   return message.content?.message;
 };
 
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const generateImageAttachmentImgHtml = (attachment: ChatAttachment): string => {
   const contentType = extractAttachmentContentTypeFromName(attachment.name);
   return `\r\n<p><img alt="image" src="" itemscope="${contentType}" id="${attachment.id}"></p>`;
 };
 
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractAttachmentContentTypeFromName = (name?: string): string => {
   if (name === undefined) {
     return '';
@@ -177,6 +183,7 @@ const extractAttachmentContentTypeFromName = (name?: string): string => {
   return contentType;
 };
 
+/* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractAttachmentsMetadata = (
   message: ChatMessageWithStatus
 ): { /* @conditional-compile-remove(file-sharing) */ files: FileMetadata[]; inlineImages: InlineImageMetadata[] } => {
@@ -189,6 +196,7 @@ const extractAttachmentsMetadata = (
     files = files.concat(extractAttachedFilesMetadata(message.metadata));
   }
 
+  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
   if (message.content?.attachments) {
     const teamsAttachments = extractTeamsAttachmentsMetadata(message.content?.attachments);
     /* @conditional-compile-remove(file-sharing) */
@@ -205,7 +213,11 @@ const convertToUiChatMessage = (
   isLargeGroup: boolean
 ): ChatMessage => {
   const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
-  const { /* @conditional-compile-remove(file-sharing) */ files, inlineImages } = extractAttachmentsMetadata(message);
+  /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+  const {
+    /* @conditional-compile-remove(file-sharing) */ files,
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ inlineImages
+  } = extractAttachmentsMetadata(message);
   return {
     messageType: 'chat',
     createdOn: message.createdOn,
@@ -222,6 +234,7 @@ const convertToUiChatMessage = (
     metadata: message.metadata,
     /* @conditional-compile-remove(file-sharing) */
     files,
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     inlineImages
   };
 };
@@ -355,7 +368,10 @@ const isMessageValidToRender = (message: ChatMessageWithStatus): boolean => {
   if (message.deletedOn) {
     return false;
   }
-  if (message.metadata?.fileSharingMetadata || message.content?.attachments) {
+  if (
+    message.metadata?.fileSharingMetadata ||
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ message.content?.attachments
+  ) {
     return true;
   }
   /* @conditional-compile-remove(data-loss-prevention) */

packages/chat-stateful-client/src/EventSubscriber.ts

@@ -44,6 +44,7 @@ export class EventSubscriber {
       version: event.version,
       content: {
         message: event.message,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         attachments: event.attachments
       },
       type: this.convertEventType(event.type),

packages/communication-react/review/beta/communication-react.api.md

@@ -147,14 +147,14 @@ export type AreParamEqual<A extends (props: any) => JSX.Element | undefined, B e
 // @public
 export type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
-// @public
+// @beta
 export interface AttachmentDownloadResult {
     attachmentId: string;
     blobUrl: string;
 }
 
-// @public
-export type AttachmentMetadata = InlineImageMetadata | /* @conditional-compile-remove(file-sharing) */ FileMetadata;
+// @beta
+export type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;
 
 // @public
 export type AvatarPersonaData = {
@@ -213,7 +213,7 @@ export type AzureCommunicationChatAdapterArgs = {
     threadId: string;
 };
 
-// @public
+// @beta
 export type AzureCommunicationChatAdapterOptions = {
     credential?: CommunicationTokenCredential;
 };
@@ -1614,8 +1614,8 @@ export type ChatAdapterUiState = {
     fileUploads?: FileUploadsUiState;
 };
 
-// @public
-export type ChatAttachmentType = 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file' | 'unknown';
+// @beta
+export type ChatAttachmentType = 'unknown' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | /* @conditional-compile-remove(file-sharing) */ 'file';
 
 // @public
 export type ChatBaseSelectorProps = {
@@ -1747,6 +1747,7 @@ export interface ChatMessage extends MessageCommon {
     failureReason?: string;
     // @beta
     files?: FileMetadata[];
+    // @beta
     inlineImages?: InlineImageMetadata[];
     // (undocumented)
     messageType: 'chat';
@@ -1777,14 +1778,14 @@ export type ChatParticipantListSelector = (state: ChatClientState, props: ChatBa
 // @public
 export type ChatReturnProps<Component extends (props: any) => JSX.Element> = GetChatSelector<Component> extends (state: ChatClientState, props: any) => any ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]> : never;
 
-// @public
+// @beta
 export interface ChatTheme {
     chatPalette: {
-        imageGalleryOverlayBlack: string;
-        imageGalleryTitleWhite: string;
-        imageGalleryDefaultButtonBackground: string;
-        imageGalleryButtonBackgroundHover: string;
-        imageGalleryButtonBackgroundActive: string;
+        modalOverlayBlack: string;
+        modalTitleWhite: string;
+        modalButtonBackground: string;
+        modalButtonBackgroundHover: string;
+        modalButtonBackgroundActive: string;
     };
 }
 
@@ -2346,7 +2347,7 @@ export interface CustomMessage extends MessageCommon {
 }
 
 // @public
-export const darkTheme: PartialTheme & CallingTheme & ChatTheme;
+export const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme;
 
 // @beta
 export type DeclarativeCallAgent = CallAgent & IncomingCallManagement;
@@ -2967,10 +2968,10 @@ export interface _Identifiers {
     videoTile: string;
 }
 
-// @public
+// @beta
 export const ImageGallery: (props: ImageGalleryProps) => JSX.Element;
 
-// @public
+// @beta
 export interface ImageGalleryImageProps {
     altText?: string;
     downloadFilename: string;
@@ -2979,7 +2980,7 @@ export interface ImageGalleryImageProps {
     titleIcon?: JSX.Element;
 }
 
-// @public
+// @beta
 export interface ImageGalleryProps {
     images: Array<ImageGalleryImageProps>;
     isOpen: boolean;
@@ -2989,7 +2990,7 @@ export interface ImageGalleryProps {
     startIndex?: number;
 }
 
-// @public
+// @beta
 export interface ImageGalleryStrings {
     dismissButtonAriaLabel: string;
     downloadButtonLabel: string;
@@ -3009,7 +3010,7 @@ export interface IncomingCallState {
     startTime: Date;
 }
 
-// @public
+// @beta
 export interface InlineImageMetadata {
     // (undocumented)
     attachmentType: 'inlineImage';
@@ -3064,7 +3065,7 @@ export interface JumpToNewMessageButtonProps {
 }
 
 // @public
-export const lightTheme: PartialTheme & CallingTheme & ChatTheme;
+export const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-gallery) */ ChatTheme;
 
 // @public
 export type LoadingState = 'loading' | 'none';