Add subviews for message and image

RiotSwiftUI/Modules/Template/TemplateAdvancedRoomsExample/TemplateRoomChat/View/TemplateRoomChat.swift

@@ -31,15 +31,25 @@ struct TemplateRoomChat: View {
     
     var body: some View {
         VStack {
-            LazyVStack {
-                
-            }.frame(maxHeight: .infinity)
+            if viewModel.viewState.bubbles.isEmpty {
+                VStack{
+                    Text("No messages")
+                }
+                .frame(maxHeight: .infinity)
+            } else {
+                LazyVStack {
+                    ForEach(viewModel.viewState.bubbles) { bubble in
+                        TemplateRoomChatBubbleView(bubble: bubble)
+                    }
+                }
+                .frame(maxHeight: .infinity, alignment: .top)
+            }
             
             HStack {
                 TextField(VectorL10n.roomMessageShortPlaceholder, text: $viewModel.input.messageInput)
                     .textFieldStyle(BorderedInputFieldStyle())
                 Button(action: {
-                    
+
                 }, label: {
                     Image(uiImage: Asset.Images.sendIcon.image)
                 })

RiotSwiftUI/Modules/Template/TemplateAdvancedRoomsExample/TemplateRoomChat/View/TemplateRoomChatBubbleItemView.swift

@@ -0,0 +1,49 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+@available(iOS 14.0, *)
+struct TemplateRoomChatBubbleItemView: View {
+
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    // MARK: Public
+    
+    let bubbleItem: TemplateRoomChatBubbleItem
+    
+    var body: some View {
+        switch bubbleItem {
+        case .message(let messageItem):
+            TemplateRoomChatBubbleMessage(messageItem: messageItem)
+        case .image(let imageItem):
+            TemplateRoomChatBubbleImage(imageItem: imageItem)
+        }
+    }
+}
+
+// MARK: - Previews
+
+@available(iOS 14.0, *)
+struct TemplateRoomChatBubbleItemView_Previews: PreviewProvider {
+    static var previews: some View {
+        EmptyView()
+    }
+}

RiotSwiftUI/Modules/Template/TemplateAdvancedRoomsExample/TemplateRoomChat/View/TemplateRoomChatBubbleMessage.swift

@@ -0,0 +1,44 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+@available(iOS 14.0, *)
+struct TemplateRoomChatBubbleMessage: View {
+
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    // MARK: Public
+    
+    let messageItem: TemplateRoomChatBubbleMessageItem
+    
+    var body: some View {
+        Text(messageItem.body)
+    }
+}
+
+// MARK: - Previews
+
+@available(iOS 14.0, *)
+struct TemplateRoomChatBubbleMessage_Previews: PreviewProvider {
+    static var previews: some View {
+        EmptyView()
+    }
+}

RiotSwiftUI/Modules/Template/TemplateAdvancedRoomsExample/TemplateRoomChat/View/TemplateRoomChatBubbleView.swift

@@ -31,9 +31,9 @@ struct TemplateRoomChatBubbleView: View {
     
     var body: some View {
         HStack{
-            AvatarImage(avatarData: bubble.avatar, size: .xSmall)
-            VStack{
-                Text(bubble.displayName ?? "")
+            AvatarImage(avatarData: bubble.senderAvatar, size: .xSmall)
+            VStack(alignment: .leading){
+                Text(bubble.senderDisplayName ?? "")
                 ForEach(bubble.items) { item in
                     TemplateRoomChatBubbleItemView(bubbleItem: item)
                 }
@@ -52,7 +52,14 @@ struct TemplateRoomChatBubbleView: View {
 
 @available(iOS 14.0, *)
 struct TemplateRoomChatBubbleView_Previews: PreviewProvider {
+    static let bubble = TemplateRoomChatBubble(
+        id: "111",
+        senderAvatar: MockAvatarInput.example,
+        senderDisplayName: "Alice",
+        items: [.message(TemplateRoomChatBubbleMessageItem(id: "222", body: "Hello world! 🌎"))]
+    )
     static var previews: some View {
-        EmptyView()
+        TemplateRoomChatBubbleView(bubble: bubble)
+            .addDependency(MockAvatarService.example)
     }
 }