Keep side reply previews inside narrow chat rows (#84)

* Keep side replies inside narrow chat rows

* Add native before and after reply captures

Author: PystoyPlayer

packages/ChatUI/Sources/ChatUI/ChatRowItem.swift

@@ -446,8 +446,8 @@ public class ChatRowItem: TableRowItem {
                 height += additional
             }
 
-            if replyModel?.isSideAccessory == true {
-                height = max(48, height)
+            if let replyModel, replyModel.isSideAccessory {
+                height = max(48, height, replyOffset + replyModel.size.height + defaultContentTopOffset)
             }
         }
         if let _ = commentsBubbleData {
@@ -3191,10 +3191,20 @@ public class ChatRowItem: TableRowItem {
                     replyModel.measureSize(fill_size, sizeToFit: false)
                 }
             } else {
-                if _contentSize.width == 0 {
-                    replyModel.measureSize(200, sizeToFit: true)
-                } else {
-                    replyModel.measureSize(_contentSize.width - bubbleContentInset * 2, sizeToFit: true)
+                let bubbleFrame = ChatRowGeometry.bubbleFrame(.init(
+                    rowWidth: width,
+                    layoutFrame: NSMakeRect(defLeftInset, 0, bubbleFrameWidth, 0),
+                    leftInset: leftInset,
+                    isIncoming: isIncoming,
+                    isCenteredThread: chatInteraction.mode.isThreadMode && chatInteraction.chatLocation.threadMsgId == message?.id
+                ))
+                let contentFrame = ChatRowGeometry.contentFrame(.init(item: self, bubbleFrame: bubbleFrame))
+                let sideFrame = ChatRowGeometry.sideAccessoryFrame(.init(item: self, size: .zero, offset: 0, contentFrame: contentFrame))
+                let availableWidth = max(1, isIncoming ? width - rightInset - sideFrame.minX : sideFrame.maxX - leftInset)
+                let preferredWidth = _contentSize.width == 0 ? 200 : _contentSize.width - bubbleContentInset * 2
+                replyModel.measureSize(min(preferredWidth, availableWidth), sizeToFit: true)
+                if replyModel.size.width > availableWidth {
+                    replyModel.measureSize(availableWidth, sizeToFit: false)
                 }
             }
         }

tools/tests/side-reply-layout/SideReplyLayoutTests.swift

@@ -0,0 +1,99 @@
+import Cocoa
+
+final class Accessory {
+    var isSideAccessory = true
+    var size = NSSize.zero
+    var width: CGFloat = 0
+    var longQuote = false
+    func measureSize(_ width: CGFloat, sizeToFit: Bool) {
+        self.width = width
+        let lines = longQuote ? min(8, ceil(700 / max(1, width - 14))) : 1
+        size = NSSize(width: sizeToFit ? min(180, max(1, width)) + 12 : width, height: 22 + 16 * lines)
+    }
+}
+struct Mode { var isThreadMode = false }
+struct Location { var threadMsgId: Int? }
+struct Interaction { let mode = Mode(); let chatLocation = Location() }
+struct Message { let id: Int }
+final class ChatRowItem {
+    var width: CGFloat = 320
+    var leftInset: CGFloat = 13
+    var rightInset: CGFloat = 12
+    var defLeftInset: CGFloat = 20
+    var isIncoming = false
+    var isBubbled = true
+    var hasBubble = false
+    var isBubbleFullFilled = true
+    var isSharable = false
+    var hasSource = false
+    var commentsBubbleDataOverlay: Int?
+    var elementsContentInset: CGFloat = 0
+    var bubbleContentInset: CGFloat = 0
+    var additionBubbleInset: CGFloat = 6
+    var bubbleDefaultInnerInset: CGFloat { bubbleContentInset * 2 + additionBubbleInset }
+    var _contentSize = NSSize(width: 160, height: 80)
+    var contentSize: NSSize { _contentSize }
+    var contentOffset: NSPoint { NSPoint(x: defLeftInset, y: 2) }
+    var bubbleFrameWidth: CGFloat { _contentSize.width + additionBubbleInset }
+    var max_reply_size_width: CGFloat { _contentSize.width }
+    var additionalLineForDateInBubbleState: CGFloat?
+    var defaultContentTopOffset: CGFloat = 2
+    var replyOffset: CGFloat = 5
+    var replyModel: Accessory? = Accessory()
+    let chatInteraction = Interaction()
+    var message: Message?
+    func measureReply() {
+        let cachedBlockWidth = width
+        if let replyModel = replyModel { __MEASURE__ }
+    }
+    var height: CGFloat {
+        var height = _contentSize.height + defaultContentTopOffset * 2
+        __HEIGHT__
+        return height
+    }
+    var replyFrame: NSRect {
+        let bubble = ChatRowGeometry.bubbleFrame(.init(rowWidth: width, layoutFrame: NSRect(x: defLeftInset, y: 0, width: bubbleFrameWidth, height: 0), leftInset: leftInset, isIncoming: isIncoming, isCenteredThread: false))
+        let content = ChatRowGeometry.contentFrame(.init(item: self, bubbleFrame: bubble))
+        return ChatRowGeometry.sideAccessoryFrame(.init(item: self, size: replyModel!.size, offset: replyOffset, contentFrame: content))
+    }
+}
+var checks = 0
+var failures = 0
+func expect(_ condition: @autoclosure () -> Bool, _ name: String) {
+    checks += 1
+    if !condition() { failures += 1; print("FAIL: \(name)") }
+}
+for width in [CGFloat(300), 320, 350, 400, 640, 1280] {
+    for incoming in [false, true] {
+        for sideAction in [false, true] {
+            for contentWidth in [CGFloat(80), 160, 200] {
+                for longQuote in [false, true] {
+                    let row = ChatRowItem()
+                    row.width = width
+                    row.isIncoming = incoming
+                    row.isSharable = sideAction
+                    row._contentSize.width = contentWidth
+                    row.replyModel!.longQuote = longQuote
+                    row.measureReply()
+                    let frame = row.replyFrame
+                    let tag = "width=\(width) incoming=\(incoming) action=\(sideAction) content=\(contentWidth) quote=\(longQuote)"
+                    expect(frame.minX >= row.leftInset, "reply keeps left margin: \(tag)")
+                    expect(frame.maxX <= width - row.rightInset, "reply keeps right margin: \(tag)")
+                    expect(frame.maxY <= row.height - row.defaultContentTopOffset, "entire quoted reply fits row height: \(tag)")
+                }
+            }
+        }
+    }
+}
+let row = ChatRowItem()
+row.width = 1280
+row.measureReply()
+expect(row.replyModel!.size.width == 172, "wide layout keeps intrinsic side reply sizing")
+row.width = 320
+row.measureReply()
+expect(row.replyFrame.minX >= row.leftInset, "resizing narrows existing reply")
+row.width = 1280
+row.measureReply()
+expect(row.replyModel!.size.width == 172, "resizing restores intrinsic side reply width")
+print("\(checks - failures)/\(checks) side reply layout checks passed")
+exit(failures == 0 ? 0 : 1)

tools/tests/side-reply-layout/run.py

@@ -0,0 +1,38 @@
+import argparse
+from pathlib import Path
+import subprocess
+import tempfile
+
+root = Path(__file__).resolve().parents[3]
+parser = argparse.ArgumentParser()
+parser.add_argument('--source-root', type=Path, default=root)
+args = parser.parse_args()
+source = args.source_root / 'packages/ChatUI/Sources/ChatUI'
+
+def block(text, marker):
+    start = text.index(marker) + len(marker)
+    end = start
+    depth = 1
+    while depth:
+        depth += (text[end] == '{') - (text[end] == '}')
+        end += 1
+    return text[start:end - 1]
+
+row = (source / 'ChatRowItem.swift').read_text()
+measure = block(row, '} else if let replyModel = replyModel {')
+height_start = row.index('        if isBubbled {\n            if let additional = additionalLineForDateInBubbleState')
+height = row[height_start:row.index('        if let _ = commentsBubbleData', height_start)]
+adapter = (source / 'ChatRowGeometry+Item.swift').read_text()
+content = 'extension ChatRowGeometry.Content {' + block(adapter, 'extension ChatRowGeometry.Content {') + '}\n'
+adapter = (source / 'ChatRowAccessoryGeometry+Item.swift').read_text()
+side = 'extension ChatRowGeometry.SideAccessory {' + block(adapter, 'extension ChatRowGeometry.SideAccessory {') + '}\n'
+fixture = Path(__file__).with_name('SideReplyLayoutTests.swift').read_text().replace('__MEASURE__', measure).replace('__HEIGHT__', height)
+with tempfile.TemporaryDirectory(prefix='side-reply-layout-') as temp:
+    temp = Path(temp)
+    for name in ['ChatRowGeometry.swift', 'ChatRowAccessoryGeometry.swift']:
+        (temp / name).write_bytes((source / name).read_bytes())
+    (temp / 'Adapters.swift').write_text('import Cocoa\n' + content + side)
+    (temp / 'main.swift').write_text(fixture)
+    binary = temp / 'tests'
+    subprocess.run(['swiftc', str(temp / 'ChatRowGeometry.swift'), str(temp / 'ChatRowAccessoryGeometry.swift'), str(temp / 'Adapters.swift'), str(temp / 'main.swift'), '-o', str(binary)], check=True)
+    raise SystemExit(subprocess.run([str(binary)]).returncode)