Merge pull request #16353 from nextcloud/style/16351/assistantMessageBubble

Make chat bubbles dark/light aware and like Nextcloud Talk chat bubbles

Author: AndyScherzinger

app/src/main/java/com/nextcloud/client/assistant/AssistantScreen.kt

@@ -397,9 +397,8 @@ private fun EmptyContent(paddingValues: PaddingValues, iconId: Int?, description
                 painter = painterResource(id = iconId),
                 modifier = Modifier.size(32.dp),
                 colorFilter = ColorFilter.tint(color = colorResource(R.color.text_color)),
-                contentDescription = "empty content icon"
+                contentDescription = null
             )
-
             Spacer(modifier = Modifier.height(8.dp))
         }
 

app/src/main/java/com/nextcloud/client/assistant/chat/ChatContent.kt

@@ -42,7 +42,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.scale
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
@@ -123,7 +122,7 @@ private fun AssistantTypingIndicator() {
                             bottomEnd = CHAT_BUBBLE_CORNER_RADIUS
                         )
                     )
-                    .background(color = colorResource(R.color.white))
+                    .background(color = colorResource(R.color.bg_message_bubble))
             ) {
                 TypingAnimation()
             }
@@ -148,7 +147,9 @@ private fun AnimatedAssistantIcon() {
         modifier = Modifier
             .size(ASSISTANT_ICON_SIZE)
             .clip(CircleShape)
-            .background(Color.White),
+            .background(
+                color = colorResource(R.color.bg_message_bubble)
+            ),
         contentAlignment = Alignment.Center
     ) {
         Image(
@@ -205,7 +206,9 @@ private fun AssistantMessageItem(message: ChatMessage) {
                 modifier = Modifier
                     .size(ASSISTANT_ICON_SIZE)
                     .clip(CircleShape)
-                    .background(Color.White),
+                    .background(
+                        color = colorResource(R.color.bg_message_bubble)
+                    ),
                 contentAlignment = Alignment.Center
             ) {
                 Image(
@@ -228,7 +231,7 @@ private fun AssistantMessageItem(message: ChatMessage) {
                         )
                     )
                     .background(
-                        color = colorResource(R.color.white)
+                        color = colorResource(R.color.bg_message_bubble)
                     )
             ) {
                 MessageTextItem(message)
@@ -259,7 +262,7 @@ private fun UserMessageItem(message: ChatMessage) {
                             bottomStart = CHAT_BUBBLE_CORNER_RADIUS
                         )
                     )
-                    .background(color = colorResource(R.color.white))
+                    .background(color = colorResource(R.color.bg_message_bubble))
             ) {
                 MessageTextItem(message)
             }
@@ -280,13 +283,14 @@ private fun MessageTextItem(message: ChatMessage) {
                 fontSize = 16.sp
             )
         )
-        Spacer(modifier = Modifier.height(8.dp))
+        Spacer(modifier = Modifier.height(4.dp))
         Text(
             text = message.time(),
             style = TextStyle(
-                color = colorResource(R.color.text_color),
+                color = colorResource(R.color.secondary_text_color),
                 fontSize = 12.sp
-            )
+            ),
+            modifier = Modifier.align(Alignment.End)
         )
     }
 }

app/src/main/java/com/nextcloud/client/assistant/taskTypes/TaskTypesRow.kt

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.PrimaryScrollableTabRow
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRowDefaults
@@ -43,7 +44,7 @@ fun TaskTypesRow(
     val selectedTabIndex = data.indexOfFirst { it.id == selectedTaskType?.id }.takeIf { it >= 0 } ?: 0
 
     Row(
-        modifier = Modifier.background(color = colorResource(R.color.actionbar_color)),
+        modifier = Modifier.background(color = MaterialTheme.colorScheme.surface),
         horizontalArrangement = Arrangement.Center
     ) {
         if (data.any { it.isChat() }) {
@@ -63,11 +64,11 @@ fun TaskTypesRow(
         PrimaryScrollableTabRow(
             selectedTabIndex = selectedTabIndex,
             edgePadding = 0.dp,
-            containerColor = colorResource(R.color.actionbar_color),
+            containerColor = MaterialTheme.colorScheme.surface,
             indicator = {
                 TabRowDefaults.SecondaryIndicator(
                     Modifier.tabIndicatorOffset(selectedTabIndex),
-                    color = colorResource(R.color.primary)
+                    color = MaterialTheme.colorScheme.primary
                 )
             }
         ) {

app/src/main/res/layout/toolbar_standard.xml

@@ -118,9 +118,7 @@
             android:id="@+id/toolbar_linear_layout"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/standard_half_margin"
             android:layout_marginTop="@dimen/standard_half_margin"
-            android:layout_marginEnd="@dimen/standard_margin"
             android:layout_marginBottom="@dimen/standard_quarter_margin"
             android:orientation="horizontal"
             android:visibility="gone"
@@ -134,18 +132,24 @@
                 style="@style/Widget.AppTheme.Button.IconButton"
                 android:layout_width="@dimen/minimum_size_for_touchable_area"
                 android:layout_height="@dimen/minimum_size_for_touchable_area"
+                android:layout_marginStart="@dimen/standard_quarter_margin"
+                android:layout_marginTop="-4dp"
+                android:layout_marginEnd="@dimen/standard_half_margin"
+                android:contentDescription="@string/drawer_open"
                 app:cornerRadius="@dimen/button_corner_radius"
                 app:icon="@drawable/ic_menu"
-                app:iconTint="@color/black" />
+                app:iconSize="@dimen/search_bar_icon_size"
+                app:iconTint="@color/fontAppbar" />
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/toolbar_title"
+                android:layout_width="wrap_content"
+                android:layout_height="@dimen/minimum_size_for_touchable_area"
                 android:gravity="center"
-                android:textColor="@color/black"
                 android:lines="1"
-                android:textSize="16sp"
-                android:layout_width="wrap_content"
-                android:layout_height="@dimen/minimum_size_for_touchable_area"/>
+                android:textColor="@color/black"
+                android:textSize="24sp"
+                tools:text="Headline" />
 
         </LinearLayout>
 

app/src/main/res/values-night/colors.xml

@@ -38,5 +38,5 @@
     <color name="appbar">#1E1E1E</color>
     <color name="fontAppbar">@android:color/white</color>
 
-    <color name="actionbar_color">#101418</color>
+    <color name="bg_message_bubble">#2A2A2A</color>
 </resources>

app/src/main/res/values/colors.xml

@@ -88,5 +88,5 @@
     <color name="fontAppbar">#666666</color>
     <color name="fontSecondaryAppbar">#A5A5A5</color>
 
-    <color name="actionbar_color">#F7F9FF</color>
+    <color name="bg_message_bubble">#EFEFEF</color>
 </resources>