Use component factory for Giphy attachments and update design

stream-chat-android-compose-sample/src/androidTestE2eDebug/kotlin/io/getstream/chat/android/compose/robots/UserRobotMessageListAsserts.kt

@@ -304,7 +304,9 @@ fun UserRobot.assertAlsoInTheChannelLabelInThread(): UserRobot {
 
 fun UserRobot.assertGiphyImage(isDisplayed: Boolean = true): UserRobot {
     if (isDisplayed) {
-        assertTrue(Message.giphy.waitToAppear().isDisplayed())
+        device.retryOnStaleObjectException {
+            assertTrue(Message.giphy.waitToAppear().isDisplayed())
+        }
     } else {
         assertFalse(Message.giphy.waitToDisappear().isDisplayed())
     }

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -723,6 +723,13 @@ public final class io/getstream/chat/android/compose/ui/attachments/factory/Comp
 	public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function4;
 }
 
+public final class io/getstream/chat/android/compose/ui/attachments/factory/ComposableSingletons$GiphyAttachmentFactoryKt {
+	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/attachments/factory/ComposableSingletons$GiphyAttachmentFactoryKt;
+	public static field lambda-1 Lkotlin/jvm/functions/Function4;
+	public fun <init> ()V
+	public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function4;
+}
+
 public final class io/getstream/chat/android/compose/ui/attachments/factory/ComposableSingletons$MediaAttachmentFactoryKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/attachments/factory/ComposableSingletons$MediaAttachmentFactoryKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function3;
@@ -1731,13 +1738,6 @@ public final class io/getstream/chat/android/compose/ui/components/messageoption
 	public static final fun defaultMessageOptionsState (Lio/getstream/chat/android/models/Message;Lio/getstream/chat/android/models/User;ZLjava/util/Set;Landroidx/compose/runtime/Composer;I)Ljava/util/List;
 }
 
-public final class io/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$GiphyMessageContentKt {
-	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$GiphyMessageContentKt;
-	public static field lambda-1 Lkotlin/jvm/functions/Function2;
-	public fun <init> ()V
-	public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
-}
-
 public final class io/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$MessageReactionItemKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/messages/ComposableSingletons$MessageReactionItemKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function2;
@@ -2960,6 +2960,7 @@ public abstract interface class io/getstream/chat/android/compose/ui/theme/ChatC
 	public abstract fun FileAttachmentPreviewContent (Landroidx/compose/ui/Modifier;Ljava/util/List;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;I)V
 	public abstract fun FileUploadContent (Lio/getstream/chat/android/compose/state/messages/attachments/AttachmentState;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;I)V
 	public abstract fun FileUploadItem (Lio/getstream/chat/android/models/Attachment;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
+	public abstract fun GiphyAttachmentContent (Lio/getstream/chat/android/compose/state/messages/attachments/AttachmentState;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
 	public abstract fun GroupChannelInfoAddMembersButton (Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
 	public abstract fun GroupChannelInfoExpandMembersItem (Landroidx/compose/foundation/lazy/LazyItemScope;ILkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
 	public abstract fun GroupChannelInfoMemberItem (Landroidx/compose/foundation/lazy/LazyItemScope;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/models/Member;ZLkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
@@ -3139,6 +3140,7 @@ public final class io/getstream/chat/android/compose/ui/theme/ChatComponentFacto
 	public static fun FileAttachmentPreviewContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/ui/Modifier;Ljava/util/List;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;I)V
 	public static fun FileUploadContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/state/messages/attachments/AttachmentState;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;I)V
 	public static fun FileUploadItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/models/Attachment;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
+	public static fun GiphyAttachmentContent (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lio/getstream/chat/android/compose/state/messages/attachments/AttachmentState;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;I)V
 	public static fun GroupChannelInfoAddMembersButton (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
 	public static fun GroupChannelInfoExpandMembersItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/foundation/lazy/LazyItemScope;ILkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
 	public static fun GroupChannelInfoMemberItem (Lio/getstream/chat/android/compose/ui/theme/ChatComponentFactory;Landroidx/compose/foundation/lazy/LazyItemScope;Lio/getstream/chat/android/models/User;Lio/getstream/chat/android/models/Member;ZLkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;I)V
@@ -3671,15 +3673,17 @@ public final class io/getstream/chat/android/compose/ui/theme/ReactionOptionsThe
 public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public static final field $stable I
 	public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamColors$Companion;
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
-	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
+	public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
 	public final fun component1-0d7_KjU ()J
 	public final fun component10-0d7_KjU ()J
 	public final fun component100-0d7_KjU ()J
 	public final fun component101-0d7_KjU ()J
 	public final fun component102-0d7_KjU ()J
 	public final fun component103-0d7_KjU ()J
 	public final fun component104-0d7_KjU ()J
+	public final fun component105-0d7_KjU ()J
+	public final fun component106-0d7_KjU ()J
 	public final fun component11-0d7_KjU ()J
 	public final fun component12-0d7_KjU ()J
 	public final fun component13-0d7_KjU ()J
@@ -3777,8 +3781,8 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun component97-0d7_KjU ()J
 	public final fun component98-0d7_KjU ()J
 	public final fun component99-0d7_KjU ()J
-	public final fun copy-rabOOY8 (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
-	public static synthetic fun copy-rabOOY8$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public final fun copy-_FuyHbg (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
+	public static synthetic fun copy-_FuyHbg$default (Lio/getstream/chat/android/compose/ui/theme/StreamColors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamColors;
 	public fun equals (Ljava/lang/Object;)Z
 	public final fun getAccentBlack-0d7_KjU ()J
 	public final fun getAccentError-0d7_KjU ()J
@@ -3803,7 +3807,9 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamColors {
 	public final fun getBackgroundElevationElevation0-0d7_KjU ()J
 	public final fun getBackgroundElevationElevation2-0d7_KjU ()J
 	public final fun getBadgeBgInverse-0d7_KjU ()J
+	public final fun getBadgeBgOverlay-0d7_KjU ()J
 	public final fun getBadgeText-0d7_KjU ()J
+	public final fun getBadgeTextOnAccent-0d7_KjU ()J
 	public final fun getBarsBackground-0d7_KjU ()J
 	public final fun getBorderCoreDefault-0d7_KjU ()J
 	public final fun getBorderCoreImage-0d7_KjU ()J

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/content/GiphyAttachmentContent.kt

@@ -21,18 +21,19 @@ import android.content.Intent
 import android.net.Uri
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -42,7 +43,9 @@ import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
@@ -53,13 +56,17 @@ import io.getstream.chat.android.client.utils.attachment.isGiphy
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.state.messages.attachments.AttachmentState
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.MessageStyling
 import io.getstream.chat.android.compose.ui.theme.StreamDimens
+import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.compose.ui.util.AsyncImagePreviewHandler
 import io.getstream.chat.android.compose.ui.util.StreamAsyncImage
 import io.getstream.chat.android.compose.ui.util.applyIf
+import io.getstream.chat.android.compose.ui.util.shouldBeDisplayedAsFullSizeAttachment
 import io.getstream.chat.android.models.Attachment
 import io.getstream.chat.android.models.AttachmentType
 import io.getstream.chat.android.models.Message
+import io.getstream.chat.android.ui.common.utils.GiphyInfo
 import io.getstream.chat.android.ui.common.utils.GiphyInfoType
 import io.getstream.chat.android.ui.common.utils.GiphySizingMode
 import io.getstream.chat.android.ui.common.utils.giphyInfo
@@ -147,7 +154,7 @@ public fun GiphyAttachmentContent(
 public fun GiphyAttachmentContent(
     state: AttachmentState,
     modifier: Modifier = Modifier,
-    giphyInfoType: GiphyInfoType = GiphyInfoType.ORIGINAL,
+    giphyInfoType: GiphyInfoType = GiphyInfoType.FIXED_HEIGHT_DOWNSAMPLED,
     giphySizingMode: GiphySizingMode = GiphySizingMode.ADAPTIVE,
     contentScale: ContentScale = ContentScale.Crop,
     onItemClick: (GiphyAttachmentClickData) -> Unit = {
@@ -168,55 +175,19 @@ public fun GiphyAttachmentContent(
         "Missing preview URL."
     }
 
-    val density = LocalDensity.current
-
     val giphyInfo = attachment.giphyInfo(giphyInfoType)
 
-    val maxWidth = ChatTheme.dimens.attachmentsContentGiphyMaxWidth
-    val maxHeight = ChatTheme.dimens.attachmentsContentGiphyMaxHeight
-
-    val width = ChatTheme.dimens.attachmentsContentGiphyWidth
-    val height = ChatTheme.dimens.attachmentsContentGiphyHeight
-
-    val giphyDimensions: DpSize by remember(key1 = giphyInfo) {
-        derivedStateOf {
-            if (giphyInfo != null) {
-                with(density) {
-                    val giphyWidth = giphyInfo.width.toDp()
-                    val giphyHeight = giphyInfo.height.toDp()
-
-                    when {
-                        giphySizingMode == GiphySizingMode.FIXED_SIZE -> {
-                            DpSize(
-                                width = width.coerceIn(
-                                    minimumValue = null,
-                                    maximumValue = maxWidth,
-                                ),
-                                height = height.coerceIn(
-                                    minimumValue = null,
-                                    maximumValue = maxHeight,
-                                ),
-                            )
-                        }
-
-                        else -> calculateResultingDimensions(
-                            maxWidth = maxWidth,
-                            maxHeight = maxHeight,
-                            giphyWidth = giphyWidth,
-                            giphyHeight = giphyHeight,
-                        )
-                    }
-                }
-            } else {
-                DpSize(maxWidth, maxHeight)
-            }
-        }
-    }
+    val giphyDimensions: DpSize = calculateSize(giphyInfo, giphySizingMode)
 
+    val shouldBeFullSize = message.shouldBeDisplayedAsFullSizeAttachment()
     Box(
         modifier = modifier
+            .testTag("Stream_GiphyContent")
             .size(giphyDimensions)
-            .applyIf(message.text.isNotEmpty()) { clip(ChatTheme.shapes.attachment) }
+            .applyIf(!shouldBeFullSize) {
+                padding(MessageStyling.messageSectionPadding)
+                    .clip(ChatTheme.shapes.attachment)
+            }
             .combinedClickable(
                 indication = null,
                 interactionSource = remember { MutableInteractionSource() },
@@ -240,16 +211,83 @@ public fun GiphyAttachmentContent(
             contentScale = contentScale,
         )
 
-        Image(
-            modifier = Modifier
+        GiphyLabel(
+            Modifier
                 .align(Alignment.BottomStart)
-                .padding(8.dp)
-                .width(64.dp)
-                .wrapContentHeight(),
-            painter = painterResource(R.drawable.stream_compose_giphy_label),
+                .padding(StreamTokens.spacingXs),
+        )
+    }
+}
+
+@Composable
+private fun calculateSize(
+    giphyInfo: GiphyInfo?,
+    giphySizingMode: GiphySizingMode,
+): DpSize {
+    val density = LocalDensity.current
+
+    val maxWidth = ChatTheme.dimens.attachmentsContentGiphyMaxWidth
+    val maxHeight = ChatTheme.dimens.attachmentsContentGiphyMaxHeight
+
+    val width = ChatTheme.dimens.attachmentsContentGiphyWidth
+    val height = ChatTheme.dimens.attachmentsContentGiphyHeight
+
+    val giphyDimensions: DpSize = remember(giphyInfo, density, maxWidth, width, maxHeight, height) {
+        if (giphyInfo != null) {
+            with(density) {
+                val giphyWidth = giphyInfo.width.toDp()
+                val giphyHeight = giphyInfo.height.toDp()
+
+                when {
+                    giphySizingMode == GiphySizingMode.FIXED_SIZE -> {
+                        DpSize(
+                            width = width.coerceIn(
+                                minimumValue = null,
+                                maximumValue = maxWidth,
+                            ),
+                            height = height.coerceIn(
+                                minimumValue = null,
+                                maximumValue = maxHeight,
+                            ),
+                        )
+                    }
+
+                    else -> calculateResultingDimensions(
+                        maxWidth = maxWidth,
+                        maxHeight = maxHeight,
+                        giphyWidth = giphyWidth,
+                        giphyHeight = giphyHeight,
+                    )
+                }
+            }
+        } else {
+            DpSize(maxWidth, maxHeight)
+        }
+    }
+    return giphyDimensions
+}
+
+@Composable
+private fun GiphyLabel(modifier: Modifier) {
+    val colors = ChatTheme.colors
+    Row(
+        modifier = modifier
+            .background(colors.badgeBgOverlay, RoundedCornerShape(StreamTokens.radiusLg))
+            .padding(horizontal = StreamTokens.spacingXs, vertical = StreamTokens.spacing2xs),
+        horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacing2xs),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            modifier = Modifier.size(12.dp),
+            painter = painterResource(R.drawable.stream_ic_command_giphy),
             contentDescription = null,
             contentScale = ContentScale.Inside,
         )
+        Text(
+            text = stringResource(R.string.stream_compose_giphy_label),
+            style = ChatTheme.typography.metadataEmphasis,
+            color = colors.badgeTextOnAccent,
+        )
     }
 }
 

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/factory/GiphyAttachmentFactory.kt

@@ -18,10 +18,7 @@ package io.getstream.chat.android.compose.ui.attachments.factory
 
 import android.content.Context
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.runtime.Composable
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.testTag
 import io.getstream.chat.android.client.utils.attachment.isGiphy
 import io.getstream.chat.android.compose.ui.attachments.AttachmentFactory
 import io.getstream.chat.android.compose.ui.attachments.content.GiphyAttachmentClickData
@@ -62,18 +59,7 @@ public class GiphyAttachmentFactory(
 ) : AttachmentFactory(
     type = Type.BuiltIn.GIPHY,
     canHandle = canHandle,
-    content = @Composable { modifier, state ->
-        GiphyAttachmentContent(
-            modifier = modifier
-                .wrapContentSize()
-                .testTag("Stream_GiphyContent"),
-            state = state,
-            giphyInfoType = giphyInfoType,
-            giphySizingMode = giphySizingMode,
-            contentScale = contentScale,
-            onItemClick = onItemClick,
-        )
-    },
+    content = { _, _ -> },
 ) {
     /**
      * Creates a new instance of [GiphyAttachmentFactory] with the default parameters.

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/button/StreamButton.kt

@@ -51,13 +51,13 @@ import io.getstream.chat.android.compose.ui.util.ifNotNull
 @Composable
 internal fun StreamTextButton(
     onClick: () -> Unit,
+    text: String,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     style: StreamButtonStyle = StreamButtonStyleDefaults.primarySolid,
     size: StreamButtonSize = StreamButtonSize.Medium,
     leadingIcon: Painter? = null,
     trailingIcon: Painter? = null,
-    text: String,
 ) {
     StreamButton(
         onClick = onClick,