Merge pull request #552 from Contextable/codex/address-github-issue-514

Address GitHub issue 514

Author: contextablemark

sdks/community/kotlin/examples/chatapp/gradle/libs.versions.toml

@@ -21,6 +21,7 @@ runner = "1.6.2"
 slf4j = "2.0.9"
 ui-test-junit4 = "1.8.3"
 voyager-navigator = "1.0.0"
+compose-richtext = "1.0.0-alpha03"
 
 [libraries]
 # Ktor
@@ -62,6 +63,9 @@ ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref =
 voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyager-navigator" }
 voyager-screenmodel = { module = "cafe.adriel.voyager:voyager-screenmodel", version.ref = "voyager-navigator" }
 voyager-transitions = { module = "cafe.adriel.voyager:voyager-transitions", version.ref = "voyager-navigator" }
+richtext-commonmark = { module = "com.halilibo.compose-richtext:richtext-commonmark", version.ref = "compose-richtext" }
+richtext-ui = { module = "com.halilibo.compose-richtext:richtext-ui", version.ref = "compose-richtext" }
+richtext-ui-material3 = { module = "com.halilibo.compose-richtext:richtext-ui-material3", version.ref = "compose-richtext" }
 
 [plugins]
 kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

sdks/community/kotlin/examples/chatapp/shared/build.gradle.kts

@@ -48,6 +48,7 @@ kotlin {
                 implementation(compose.ui)
                 implementation(compose.components.resources)
                 implementation(compose.components.uiToolingPreview)
+                implementation(compose.materialIconsExtended)
 
                 // ag-ui library - consolidated client module includes agent functionality
                 implementation(libs.agui.client)
@@ -79,6 +80,11 @@ kotlin {
 
                 // Base64 encoding/decoding
                 implementation(libs.okio)
+
+                // Markdown rendering
+                implementation(libs.richtext.commonmark)
+                implementation(libs.richtext.ui)
+                implementation(libs.richtext.ui.material3)
             }
         }
 
@@ -261,4 +267,4 @@ compose.resources {
 //            }
 //        }
 //    }
-//}
+//}

sdks/community/kotlin/examples/chatapp/shared/src/commonMain/kotlin/com/agui/example/chatapp/ui/screens/chat/components/MessageBubble.kt

@@ -15,10 +15,15 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.text
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.agui.example.chatapp.ui.screens.chat.DisplayMessage
 import com.agui.example.chatapp.ui.screens.chat.MessageRole
+import com.halilibo.richtext.commonmark.Markdown
+import com.halilibo.richtext.ui.material3.RichText
 import kotlinx.datetime.Instant
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
@@ -34,6 +39,14 @@ fun MessageBubble(
     val isToolCall = message.role == MessageRole.TOOL_CALL
     val isStepInfo = message.role == MessageRole.STEP_INFO
     val isEphemeral = message.ephemeralGroupId != null
+    val messageTextColor = when {
+        isUser -> MaterialTheme.colorScheme.onPrimary
+        isError -> MaterialTheme.colorScheme.onError
+        isSystem -> MaterialTheme.colorScheme.onTertiary
+        isToolCall -> MaterialTheme.colorScheme.onSecondaryContainer
+        isStepInfo -> MaterialTheme.colorScheme.onTertiaryContainer
+        else -> MaterialTheme.colorScheme.onSurfaceVariant
+    }
 
     // Enhanced fade-in animation
     val animatedAlpha = remember(message.id) { Animatable(0f) }
@@ -94,12 +107,7 @@ fun MessageBubble(
                     Text(
                         text = message.content,
                         style = MaterialTheme.typography.bodyLarge,
-                        color = when {
-                            isUser -> MaterialTheme.colorScheme.onPrimary
-                            isError -> MaterialTheme.colorScheme.onError
-                            isSystem -> MaterialTheme.colorScheme.onTertiary
-                            else -> MaterialTheme.colorScheme.onSurfaceVariant
-                        }
+                        color = messageTextColor
                     )
                     CircularProgressIndicator(
                         modifier = Modifier.size(12.dp),
@@ -126,14 +134,7 @@ fun MessageBubble(
                         label = "textShimmer"
                     )
 
-                    val textColor = when {
-                        isUser -> MaterialTheme.colorScheme.onPrimary
-                        isError -> MaterialTheme.colorScheme.onError
-                        isSystem -> MaterialTheme.colorScheme.onTertiary
-                        isToolCall -> MaterialTheme.colorScheme.onSecondaryContainer
-                        isStepInfo -> MaterialTheme.colorScheme.onTertiaryContainer
-                        else -> MaterialTheme.colorScheme.onSurfaceVariant
-                    }
+                    val textColor = messageTextColor
 
                     Box {
                         Text(
@@ -163,18 +164,17 @@ fun MessageBubble(
                     }
                 } else {
                     // Regular text for non-ephemeral messages
-                    Text(
-                        text = message.content,
-                        style = MaterialTheme.typography.bodyLarge,
-                        color = when {
-                            isUser -> MaterialTheme.colorScheme.onPrimary
-                            isError -> MaterialTheme.colorScheme.onError
-                            isSystem -> MaterialTheme.colorScheme.onTertiary
-                            isToolCall -> MaterialTheme.colorScheme.onSecondaryContainer
-                            isStepInfo -> MaterialTheme.colorScheme.onTertiaryContainer
-                            else -> MaterialTheme.colorScheme.onSurfaceVariant
+                    ProvideTextStyle(MaterialTheme.typography.bodyLarge) {
+                        CompositionLocalProvider(LocalContentColor provides messageTextColor) {
+                            RichText(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .semantics { text = AnnotatedString(message.content) }
+                            ) {
+                                Markdown(message.content)
+                            }
                         }
-                    )
+                    }
                 }
             }
 
@@ -203,4 +203,4 @@ private fun formatTimestamp(timestamp: Long): String {
     val instant = Instant.fromEpochMilliseconds(timestamp)
     val localDateTime = instant.toLocalDateTime(TimeZone.currentSystemDefault())
     return "${localDateTime.hour.toString().padStart(2, '0')}:${localDateTime.minute.toString().padStart(2, '0')}"
-}
+}