added chatbubbleshape

2026-09-14 21:17:54 +07:00
parent b37c71720b
commit 2d29f82647
6 changed files with 124 additions and 88 deletions
@@ -0,0 +1,86 @@
+import SwiftUI
+
+struct ChatBubbleShape: Shape {
+    let isOutgoing: Bool
+    func path(in rect: CGRect) -> Path {
+        let width = rect.width
+        let height = rect.height
+        var p = Path()
+        if isOutgoing {
+            p.move(to: CGPoint(x: 25, y: height))
+            p.addLine(to: CGPoint(x: 20, y: height))
+            p.addCurve(
+                to: CGPoint(x: 0, y: height - 20),
+                control1: CGPoint(x: 8, y: height),
+                control2: CGPoint(x: 0, y: height - 8)
+            )
+            p.addLine(to: CGPoint(x: 0, y: 20))
+            p.addCurve(
+                to: CGPoint(x: 20, y: 0),
+                control1: CGPoint(x: 0, y: 8),
+                control2: CGPoint(x: 8, y: 0)
+            )
+            p.addLine(to: CGPoint(x: width - 21, y: 0))
+            p.addCurve(
+                to: CGPoint(x: width - 4, y: 20),
+                control1: CGPoint(x: width - 12, y: 0),
+                control2: CGPoint(x: width - 4, y: 8)
+            )
+            p.addLine(to: CGPoint(x: width - 4, y: height - 11))
+            p.addCurve(
+                to: CGPoint(x: width, y: height),
+                control1: CGPoint(x: width - 4, y: height - 1),
+                control2: CGPoint(x: width, y: height)
+            )
+            p.addLine(to: CGPoint(x: width + 0.05, y: height - 0.01))
+            p.addCurve(
+                to: CGPoint(x: width - 11, y: height - 4),
+                control1: CGPoint(x: width - 4, y: height + 0.5),
+                control2: CGPoint(x: width - 8, y: height - 1)
+            )
+            p.addCurve(
+                to: CGPoint(x: width - 25, y: height),
+                control1: CGPoint(x: width - 16, y: height),
+                control2: CGPoint(x: width - 20, y: height)
+            )
+        } else {
+            p.move(to: CGPoint(x: 25, y: height))
+            p.addLine(to: CGPoint(x: width - 20, y: height))
+            p.addCurve(
+                to: CGPoint(x: width, y: height - 20),
+                control1: CGPoint(x: width - 8, y: height),
+                control2: CGPoint(x: width, y: height - 8)
+            )
+            p.addLine(to: CGPoint(x: width, y: 20))
+            p.addCurve(
+                to: CGPoint(x: width - 20, y: 0),
+                control1: CGPoint(x: width, y: 8),
+                control2: CGPoint(x: width - 8, y: 0)
+            )
+            p.addLine(to: CGPoint(x: 21, y: 0))
+            p.addCurve(
+                to: CGPoint(x: 4, y: 20),
+                control1: CGPoint(x: 12, y: 0),
+                control2: CGPoint(x: 4, y: 8)
+            )
+            p.addLine(to: CGPoint(x: 4, y: height - 11))
+            p.addCurve(
+                to: CGPoint(x: 0, y: height),
+                control1: CGPoint(x: 4, y: height - 1),
+                control2: CGPoint(x: 0, y: height)
+            )
+            p.addLine(to: CGPoint(x: -0.05, y: height - 0.01))
+            p.addCurve(
+                to: CGPoint(x: 11.0, y: height - 4.0),
+                control1: CGPoint(x: 4.0, y: height + 0.5),
+                control2: CGPoint(x: 8, y: height - 1)
+            )
+            p.addCurve(
+                to: CGPoint(x: 25, y: height),
+                control1: CGPoint(x: 16, y: height),
+                control2: CGPoint(x: 20, y: height)
+            )
+        }
+        return p
+    }
+}
@@ -1,84 +0,0 @@
-import SwiftUI
-
-struct ChatBubbleTailShape: Shape {
-    let isOutgoing: Bool
-    func path(in rect: CGRect) -> Path {
-        let radius: CGFloat = 18
-        let tailWidth: CGFloat = 8
-        let tailHeight: CGFloat = 7
-        var path = Path()
-        if isOutgoing {
-            // Top-left
-            path.move(to: CGPoint(x: rect.minX + radius, y: rect.minY))
-            // Top edge
-            path.addLine(to: CGPoint(x: rect.maxX - radius, y: rect.minY))
-            // Top-right corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX, y: rect.minY + radius),
-                control: CGPoint(x: rect.maxX, y: rect.minY))
-            // Right edge
-            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - radius))
-            // Bottom-right corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX - radius, y: rect.maxY),
-                control: CGPoint(x: rect.maxX, y: rect.maxY))
-            // Bottom edge before tail
-            path.addLine(to: CGPoint(x: rect.maxX - tailWidth, y: rect.maxY))
-            // Tail
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX - 2, y: rect.maxY + tailHeight),
-                control: CGPoint(x: rect.maxX - tailWidth, y: rect.maxY + 2))
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX - 6, y: rect.maxY - 2),
-                control: CGPoint(x: rect.maxX - 4, y: rect.maxY + 1))
-            // Bottom-left
-            path.addLine(to: CGPoint(x: rect.minX + radius, y: rect.maxY))
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX, y: rect.maxY - radius),
-                control: CGPoint(x: rect.minX, y: rect.maxY))
-            // Left edge
-            path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + radius))
-            // Top-left corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX + radius, y: rect.minY),
-                control: CGPoint(x: rect.minX, y: rect.minY))
-        } else {
-            // Incoming — mirror of outgoing
-            // Top-right
-            path.move(to: CGPoint(x: rect.maxX - radius, y: rect.minY))
-            // Top edge
-            path.addLine(to: CGPoint(x: rect.minX + radius, y: rect.minY))
-            // Top-left corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX, y: rect.minY + radius),
-                control: CGPoint(x: rect.minX, y: rect.minY))
-            // Left edge
-            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY - radius))
-            // Bottom-left corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX + radius, y: rect.maxY),
-                control: CGPoint(x: rect.minX, y: rect.maxY))
-            // Bottom edge before tail
-            path.addLine(to: CGPoint(x: rect.minX + tailWidth, y: rect.maxY))
-            // Tail
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX + 2, y: rect.maxY + tailHeight),
-                control: CGPoint(x: rect.minX + tailWidth, y: rect.maxY + 2))
-            path.addQuadCurve(
-                to: CGPoint(x: rect.minX + 6, y: rect.maxY - 2),
-                control: CGPoint(x: rect.minX + 4, y: rect.maxY + 1))
-            // Bottom-right
-            path.addLine(to: CGPoint(x: rect.maxX - radius, y: rect.maxY))
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX, y: rect.maxY - radius),
-                control: CGPoint(x: rect.maxX, y: rect.maxY))
-            // Right edge
-            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + radius))
-            // Top-right corner
-            path.addQuadCurve(
-                to: CGPoint(x: rect.maxX - radius, y: rect.minY),
-                control: CGPoint(x: rect.maxX, y: rect.minY))
-        }
-        return path
-    }
-}
@@ -781,9 +781,8 @@ struct MessageBubble: View {
        }
    }

-    private var messageBubbleShape: RoundedRectangle {
-        // RoundedRectangle(cornerRadius: 18, style: .continuous)
-        ChatBubbleTailShape(isOutgoing: message.direction == .outgoing)
+    private var messageBubbleShape: ChatBubbleShape {
+        ChatBubbleShape(isOutgoing: message.direction == .outgoing)
    }

    private var deliveryIcon: String {
@@ -0,0 +1,17 @@
+//
+//  SwiftChatView.swift
+//  Luma
+//
+//  Created by tola on 9/14/26.
+//
+
+//import SwiftUI
+//import SwiftChat
+//
+//struct SwiftChatView: View {
+//    var body: some View {
+//        Chat(messages) { message in
+//            Message(...)
+//        }
+//    }
+//}