From 98309d4b36778883d9051d174f2d06720cfdba2c Mon Sep 17 00:00:00 2001
From: Kohei <yamashita@0235.co.jp>
Date: Thu, 19 Feb 2026 08:22:18 +0900
Subject: [PATCH] feat: add Markdown rendering support in chat bubbles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 android/feature/chat/build.gradle.kts              |  2 ++
 .../feature/chat/component/MessageBubble.kt        | 14 +++++++++-----
 android/gradle/libs.versions.toml                  |  4 ++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/android/feature/chat/build.gradle.kts b/android/feature/chat/build.gradle.kts
index 1651326b9..11c89e096 100644
--- a/android/feature/chat/build.gradle.kts
+++ b/android/feature/chat/build.gradle.kts
@@ -41,5 +41,7 @@ dependencies {
 
     implementation(libs.coil.compose)
 
+    implementation(libs.markdown.renderer.m3)
+
     debugImplementation(libs.compose.ui.tooling)
 }
diff --git a/android/feature/chat/src/main/java/io/picoclaw/android/feature/chat/component/MessageBubble.kt b/android/feature/chat/src/main/java/io/picoclaw/android/feature/chat/component/MessageBubble.kt
index 815766349..678ad335b 100644
--- a/android/feature/chat/src/main/java/io/picoclaw/android/feature/chat/component/MessageBubble.kt
+++ b/android/feature/chat/src/main/java/io/picoclaw/android/feature/chat/component/MessageBubble.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -18,6 +17,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
+import com.mikepenz.markdown.m3.Markdown
+import com.mikepenz.markdown.m3.markdownColor
+import com.mikepenz.markdown.m3.markdownTypography
 import io.picoclaw.android.core.domain.model.ChatMessage
 import io.picoclaw.android.core.domain.model.MessageSender
 import io.picoclaw.android.core.ui.theme.AgentBubble
@@ -68,10 +70,12 @@ fun MessageBubble(
                     )
                 }
                 if (message.content.isNotEmpty()) {
-                    Text(
-                        text = message.content,
-                        color = Color.White,
-                        style = MaterialTheme.typography.bodyLarge
+                    Markdown(
+                        content = message.content,
+                        colors = markdownColor(text = Color.White),
+                        typography = markdownTypography(
+                            paragraph = MaterialTheme.typography.bodyLarge.copy(color = Color.White),
+                        ),
                     )
                 }
             }
diff --git a/android/gradle/libs.versions.toml b/android/gradle/libs.versions.toml
index 4ae731a92..b0d65aeff 100644
--- a/android/gradle/libs.versions.toml
+++ b/android/gradle/libs.versions.toml
@@ -12,6 +12,7 @@ activity-compose = "1.12.4"
 core-ktx = "1.17.0"
 coroutines = "1.10.2"
 coil = "3.1.0"
+markdown-renderer = "0.39.0"
 
 [libraries]
 # Compose
@@ -52,6 +53,9 @@ coroutines-android = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutin
 # Coil
 coil-compose = { group = "io.coil-kt.coil3", name = "coil-compose", version.ref = "coil" }
 
+# Markdown
+markdown-renderer-m3 = { group = "com.mikepenz", name = "multiplatform-markdown-renderer-m3", version.ref = "markdown-renderer" }
+
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
 android-library = { id = "com.android.library", version.ref = "agp" }