feat(markdown): render user messages and table cells as markdown

Render user message bubbles through the markdown renderer (new
rxCodeChatUser style tuned for the accent bubble), rewriting [ImageN]
chips into rxcode-image:// links so taps still open the image preview,
and preserving long-message collapse via height clipping. Also parse
table cell contents as inline markdown so bold/code/links/italics render
instead of showing literal syntax.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

Author: sirily11

Packages/Sources/RxCodeChatKit/ChatMessageBubble.swift

@@ -93,14 +93,9 @@ private struct CompactChatMessageBubble: View {
     }
 
     private func userTextBubble(_ text: String) -> some View {
-        ChatTextContentView(
-            text,
-            size: ClaudeTheme.messageSize(14),
-            color: ClaudeTheme.userBubbleText,
-            lineSpacing: 2
-        )
-        .bubbleStyle(.user)
-        .frame(maxWidth: 500, alignment: .trailing)
+        MarkdownContentView(text: text, style: .rxCodeChatUser)
+            .bubbleStyle(.user)
+            .frame(maxWidth: 500, alignment: .trailing)
     }
 
     private func assistantText(_ text: String) -> some View {

Packages/Sources/RxCodeChatKit/MarkdownView.swift

@@ -3,7 +3,7 @@ import RxCodeCore
 import RxCodeMarkdown
 
 extension MarkdownStyle {
-    static var rxCodeChat: MarkdownStyle {
+    public static var rxCodeChat: MarkdownStyle {
         MarkdownStyle(
             bodyFontSize: ClaudeTheme.messageSize(15),
             bodyColor: ClaudeTheme.textPrimary,
@@ -19,6 +19,27 @@ extension MarkdownStyle {
             cornerRadius: ClaudeTheme.cornerRadiusSmall
         )
     }
+
+    /// Markdown styling tuned for the accent-tinted user bubble: text and
+    /// inline accents derive from `userBubbleText` so they stay legible on the
+    /// dark bubble background instead of using the global primary/accent colors.
+    public static var rxCodeChatUser: MarkdownStyle {
+        let text = ClaudeTheme.userBubbleText
+        return MarkdownStyle(
+            bodyFontSize: ClaudeTheme.messageSize(14),
+            bodyColor: text,
+            secondaryColor: text.opacity(0.85),
+            accentColor: text,
+            codeTextColor: text,
+            codeBackground: text.opacity(0.12),
+            codeHeaderBackground: text.opacity(0.08),
+            borderColor: text.opacity(0.22),
+            tableHeaderBackground: text.opacity(0.1),
+            lineSpacing: 3,
+            blockSpacing: 8,
+            cornerRadius: ClaudeTheme.cornerRadiusSmall
+        )
+    }
 }
 
 /// Renders markdown text through the pure SwiftUI markdown package while
@@ -28,6 +49,7 @@ public struct MarkdownContentView: View {
     let showsTrailingCursor: Bool
     let isCursorVisible: Bool
     let baseURL: URL?
+    let style: MarkdownStyle
     let fadeNewText: Bool
     let onOpenLink: MarkdownView.LinkHandler?
 
@@ -36,13 +58,15 @@ public struct MarkdownContentView: View {
         showsTrailingCursor: Bool = false,
         isCursorVisible: Bool = true,
         baseURL: URL? = nil,
+        style: MarkdownStyle = .rxCodeChat,
         fadeNewText: Bool = false,
         onOpenLink: MarkdownView.LinkHandler? = nil
     ) {
         self.text = text
         self.showsTrailingCursor = showsTrailingCursor
         self.isCursorVisible = isCursorVisible
         self.baseURL = baseURL
+        self.style = style
         self.fadeNewText = fadeNewText
         self.onOpenLink = onOpenLink
     }
@@ -53,7 +77,7 @@ public struct MarkdownContentView: View {
             showsTrailingCursor: showsTrailingCursor,
             isCursorVisible: isCursorVisible,
             baseURL: baseURL,
-            style: .rxCodeChat,
+            style: style,
             fadeNewText: fadeNewText,
             onOpenLink: onOpenLink
         )

Packages/Sources/RxCodeChatKit/MessageBubble.swift

@@ -19,6 +19,9 @@ struct MessageBubble: View {
     /// Threshold (character count) for collapsing long text
     private static let longTextThreshold = 500
 
+    /// Height the collapsed (long) user bubble is clipped to before "Show more".
+    private static let collapsedMaxHeight: CGFloat = 120
+
     private enum AssistantRenderBlock: Identifiable {
         case text(MessageBlock)
         case tool(ToolCall)
@@ -234,24 +237,25 @@ struct MessageBubble: View {
         } else {
             VStack(alignment: .leading, spacing: 6) {
                 let isLong = displayText.count > Self.longTextThreshold
-                ChatTextContentView(
-                    attributed: chipifiedAttributedString(displayText),
-                    size: ClaudeTheme.messageSize(14),
-                    color: ClaudeTheme.userBubbleText,
-                    maximumNumberOfLines: isLong && !isLongTextExpanded ? 5 : nil
+                let collapsed = isLong && !isLongTextExpanded
+                MarkdownContentView(
+                    text: markdownUserText(displayText),
+                    style: .rxCodeChatUser
                 ) { url in
                     // Intercept the synthetic `rxcode-image://<index>` link emitted
-                    // by chipifiedAttributedString and open the matching image in the
-                    // preview sheet rather than the system browser.
+                    // by markdownUserText and open the matching image in the preview
+                    // sheet rather than the system browser.
                     guard url.scheme == "rxcode-image",
                           let index = Int(url.host ?? ""),
                           let path = imagePath(forChipIndex: index) else {
-                        return false
+                        return .systemAction
                     }
                     previewImagePath = path
-                    return true
+                    return .handled
                 }
-                .fixedSize(horizontal: false, vertical: true)
+                .frame(maxHeight: collapsed ? Self.collapsedMaxHeight : nil, alignment: .topLeading)
+                .clipped()
+                .fixedSize(horizontal: false, vertical: !collapsed)
                 if isLong {
                     Button {
                         withAnimation(.easeInOut(duration: 0.2)) {
@@ -660,32 +664,21 @@ struct MessageBubble: View {
         return result
     }
 
-    /// Renders `[Image\d+]` tokens with accent-tinted chip styling. The same tokens
-    /// are inserted into the input bar by `WindowState.insertImageToken` and drawn
-    /// with a rounded background there via `ChipLayoutManager`; this mirrors that
-    /// treatment in the sent user bubble.
-    ///
-    /// Each chip also gets a `rxcode-image://<index>` link attribute; an
-    /// `environment(\.openURL, ...)` handler on the Text intercepts the tap and
-    /// opens the corresponding image in `MessageImagePreviewSheet`. The index
-    /// matches `WindowState.imageIndex(for:)` — 1-based, image-only.
-    private func chipifiedAttributedString(_ text: String) -> AttributedString {
-        var attr = AttributedString(text)
+    /// Prepares user-message text for the markdown renderer by rewriting `[ImageN]`
+    /// chip tokens into `[ImageN](rxcode-image://N)` links. The renderer then draws
+    /// them as tappable accents; the `rxcode-image` scheme is intercepted by the
+    /// bubble's link handler to open the image preview rather than the browser. The
+    /// same `[ImageN]` tokens are inserted into the input bar by
+    /// `WindowState.insertImageToken`; the index matches `WindowState.imageIndex(for:)`
+    /// — 1-based, image-only.
+    private func markdownUserText(_ text: String) -> String {
         let ns = text as NSString
         let fullRange = NSRange(location: 0, length: ns.length)
-        Self.imageChipRegex.enumerateMatches(in: text, range: fullRange) { match, _, _ in
-            guard let m = match,
-                  let range = Range(m.range, in: attr),
-                  m.numberOfRanges >= 2,
-                  let indexRange = Range(m.range(at: 1), in: text),
-                  let index = Int(text[indexRange]) else { return }
-            attr[range].backgroundColor = ClaudeTheme.accent.opacity(0.22)
-            attr[range].foregroundColor = ClaudeTheme.accent
-            attr[range].font = .system(size: ClaudeTheme.messageSize(13), weight: .medium)
-            attr[range].link = URL(string: "rxcode-image://\(index)")
-            attr[range].underlineStyle = nil
-        }
-        return attr
+        return Self.imageChipRegex.stringByReplacingMatches(
+            in: text,
+            range: fullRange,
+            withTemplate: "[Image$1](rxcode-image://$1)"
+        )
     }
 
     /// Resolve `[ImageN]` chip index (1-based) to a concrete image file path.

Packages/Sources/RxCodeMarkdown/MarkdownView.swift

@@ -275,7 +275,7 @@ private struct MarkdownDocumentView: View {
             )
             .opacity(opacity(for: range))
         case .table(let headers, let rows, let range):
-            MarkdownTableView(headers: headers, rows: rows, style: style)
+            MarkdownTableView(headers: headers, rows: rows, baseURL: baseURL, style: style)
                 .opacity(opacity(for: range))
         case .divider(let range):
             Rectangle()
@@ -605,25 +605,22 @@ private struct MarkdownCodeBlockView: View {
 private struct MarkdownTableView: View {
     let headers: [String]
     let rows: [[String]]
+    let baseURL: URL?
     let style: MarkdownStyle
 
     var body: some View {
         ScrollView(.horizontal, showsIndicators: false) {
             Grid(alignment: .leading, horizontalSpacing: 14, verticalSpacing: 8) {
                 GridRow {
                     ForEach(Array(headers.enumerated()), id: \.offset) { _, header in
-                        Text(header)
-                            .font(.system(size: style.bodyFontSize * 0.92, weight: .semibold))
-                            .foregroundStyle(style.bodyColor)
+                        cell(header, weight: .semibold, color: style.bodyColor)
                             .padding(.vertical, 5)
                     }
                 }
                 ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
                     GridRow {
                         ForEach(0..<max(headers.count, row.count), id: \.self) { index in
-                            Text(index < row.count ? row[index] : "")
-                                .font(.system(size: style.bodyFontSize * 0.92))
-                                .foregroundStyle(style.secondaryColor)
+                            cell(index < row.count ? row[index] : "", weight: .regular, color: style.secondaryColor)
                                 .padding(.vertical, 3)
                         }
                     }
@@ -637,6 +634,19 @@ private struct MarkdownTableView: View {
             )
         }
     }
+
+    @ViewBuilder
+    private func cell(_ content: String, weight: Font.Weight, color: Color) -> some View {
+        InlineMarkdownText(
+            inlines: MarkdownDocumentParser.parseInlines(content),
+            style: style,
+            baseURL: baseURL,
+            fontSize: style.bodyFontSize * 0.92,
+            weight: weight,
+            overrideColor: color,
+            fadeSegments: []
+        )
+    }
 }
 
 private struct CachedMarkdownImage: View {
@@ -763,8 +773,8 @@ private func copyToPasteboard(_ text: String) {
 
             | Component | Status |
             | --- | --- |
-            | Parser | Native |
-            | Images | Cached |
+            | **Parser** | `Native` |
+            | [Images](https://rxlab.dev) | *Cached* |
 
             ```swift
             MarkdownView(text: markdown, fadeNewText: true)