Update design of unsupported attachments (#6368)

Author: gpunto

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

@@ -23,21 +23,21 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.state.messages.attachments.AttachmentState
-import io.getstream.chat.android.compose.ui.components.attachments.files.FileTypeIcon
 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.StreamTokens
-import io.getstream.chat.android.compose.ui.util.MimeTypeIconProvider
 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
@@ -68,12 +68,19 @@ public fun UnsupportedAttachmentContent(
                             padding(MessageStyling.messageSectionPadding)
                                 .background(color, RoundedCornerShape(StreamTokens.radiusLg))
                         }
-                        .padding(StreamTokens.spacingSm),
+                        .padding(
+                            start = StreamTokens.spacingSm,
+                            top = StreamTokens.spacingMd,
+                            end = StreamTokens.spacingMd,
+                            bottom = StreamTokens.spacingMd,
+                        ),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    FileTypeIcon(
-                        data = MimeTypeIconProvider.getIcon(attachment.mimeType),
-                        modifier = Modifier.size(height = 40.dp, width = 35.dp),
+                    Icon(
+                        painter = painterResource(R.drawable.stream_design_ic_unsupported_attachment),
+                        tint = ChatTheme.colors.textPrimary,
+                        contentDescription = null,
+                        modifier = Modifier.size(20.dp),
                     )
 
                     Text(
@@ -82,7 +89,7 @@ public fun UnsupportedAttachmentContent(
                         color = MessageStyling.textColor(outgoing = state.isMine),
                         maxLines = 2,
                         overflow = TextOverflow.Ellipsis,
-                        modifier = Modifier.padding(horizontal = StreamTokens.spacingSm),
+                        modifier = Modifier.padding(horizontal = StreamTokens.spacingXs),
                     )
                 }
             }
@@ -99,20 +106,25 @@ private val supportedAttachmentTypes = setOf(
     AttachmentType.AUDIO_RECORDING,
 )
 
+@Composable
+internal fun UnsupportedAttachmentContent(isMine: Boolean) {
+    UnsupportedAttachmentContent(
+        state = AttachmentState(
+            message = Message(
+                attachments = mutableListOf(
+                    Attachment(type = "unknown"),
+                    Attachment(type = "custom_type"),
+                ),
+            ),
+            isMine = isMine,
+        ),
+    )
+}
+
 @Preview(showBackground = true)
 @Composable
 private fun OwnUnsupportedAttachmentContentPreview() {
     ChatTheme {
-        UnsupportedAttachmentContent(
-            state = AttachmentState(
-                message = Message(
-                    attachments = mutableListOf(
-                        Attachment(type = "unknown"),
-                        Attachment(type = "custom_type"),
-                    ),
-                ),
-                isMine = true,
-            ),
-        )
+        UnsupportedAttachmentContent(isMine = true)
     }
 }

stream-chat-android-compose/src/main/res/drawable/stream_design_ic_unsupported_attachment.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+    Copyright (c) 2014-2026 Stream.io Inc. All rights reserved.
+
+    Licensed under the Stream License;
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+      https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+    <path
+        android:pathData="M11.875,2.5H4.375C4.209,2.5 4.05,2.566 3.933,2.683C3.816,2.8 3.75,2.959 3.75,3.125V16.875C3.75,17.041 3.816,17.2 3.933,17.317C4.05,17.434 4.209,17.5 4.375,17.5H15.625C15.791,17.5 15.95,17.434 16.067,17.317C16.184,17.2 16.25,17.041 16.25,16.875V6.875M11.875,2.5L16.25,6.875M11.875,2.5V6.875H16.25M8.125,10L11.875,13.75M11.875,10L8.125,13.75"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="#FF000000"
+        android:strokeLineCap="round"
+        />
+</vector>

stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/attachments/content/AttachmentsContentTest.kt

@@ -97,4 +97,14 @@ internal class AttachmentsContentTest : PaparazziComposeTest {
             AudioRecordAttachmentContentItemUploading()
         }
     }
+
+    @Test
+    fun `unsupported attachment content`() {
+        snapshotWithDarkMode {
+            Column {
+                UnsupportedAttachmentContent(isMine = true)
+                UnsupportedAttachmentContent(isMine = false)
+            }
+        }
+    }
 }