Designed talk message reactions

lib/api/marianumcloud/talk/chat/getChatResponse.dart

@@ -1,3 +1,4 @@
+import 'package:jiffy/jiffy.dart';
 import 'package:json_annotation/json_annotation.dart';
 
 import '../../../apiResponse.dart';
@@ -34,6 +35,8 @@ class GetChatResponseObject {
   bool isReplyable;
   String referenceId;
   String message;
+  Map<String, int>? reactions;
+  List<String>? reactionsSelf;
   @JsonKey(fromJson: _fromJson) Map<String, RichObjectString>? messageParameters;
 
   GetChatResponseObject(
@@ -48,11 +51,35 @@ class GetChatResponseObject {
       this.isReplyable,
       this.referenceId,
       this.message,
-      this.messageParameters);
+      this.messageParameters,
+      this.reactions,
+      this.reactionsSelf
+  );
 
   factory GetChatResponseObject.fromJson(Map<String, dynamic> json) => _$GetChatResponseObjectFromJson(json);
   Map<String, dynamic> toJson() => _$GetChatResponseObjectToJson(this);
 
+  static GetChatResponseObject getDateDummy(int timestamp) {
+    DateTime elementDate = DateTime.fromMillisecondsSinceEpoch(timestamp * 1000);
+
+    return GetChatResponseObject(
+        0,
+        "",
+        GetRoomResponseObjectMessageActorType.user,
+        "",
+        "",
+        timestamp,
+        elementDate.toIso8601String(),
+        GetRoomResponseObjectMessageType.system,
+        false,
+        "",
+        Jiffy.parseFromDateTime(elementDate).format(pattern: "dd.MM.yyyy"),
+        null,
+        null,
+        null
+    );
+  }
+
 }
 
 Map<String, RichObjectString>? _fromJson(json) {

lib/api/marianumcloud/talk/chat/getChatResponse.g.dart

@@ -35,6 +35,12 @@ GetChatResponseObject _$GetChatResponseObjectFromJson(
       json['referenceId'] as String,
       json['message'] as String,
       _fromJson(json['messageParameters']),
+      (json['reactions'] as Map<String, dynamic>?)?.map(
+        (k, e) => MapEntry(k, e as int),
+      ),
+      (json['reactionsSelf'] as List<dynamic>?)
+          ?.map((e) => e as String)
+          .toList(),
     );
 
 Map<String, dynamic> _$GetChatResponseObjectToJson(
@@ -53,6 +59,8 @@ Map<String, dynamic> _$GetChatResponseObjectToJson(
       'isReplyable': instance.isReplyable,
       'referenceId': instance.referenceId,
       'message': instance.message,
+      'reactions': instance.reactions,
+      'reactionsSelf': instance.reactionsSelf,
       'messageParameters':
           instance.messageParameters?.map((k, e) => MapEntry(k, e.toJson())),
     };

lib/api/marianumcloud/talk/talkApi.dart

@@ -54,7 +54,7 @@ abstract class TalkApi<T> extends ApiRequest {
       return assembled;
     } catch (_) {
       // TODO report error
-      log("Error assembling Talk API response on $endpoint with body: $body and headers: ${headers.toString()}");
+      log("Error assembling Talk API ${T.toString()} response on ${endpoint.path} with body: $body and headers: ${headers.toString()}");
     }
 
     throw Exception("Error assembling Talk API response");

lib/view/pages/talk/chatBubble.dart

@@ -56,9 +56,10 @@ class _ChatBubbleState extends State<ChatBubble> {
   }
 
   BubbleStyle getSelfStyle(bool seamless) {
+    var color = AppTheme.isDarkMode(context) ? const Color(0xff005c4b) : const Color(0xffd3d3d3);
     return BubbleStyle(
       nip: BubbleNip.rightBottom,
-      color: seamless ? Colors.transparent : const Color(0xff005c4b),
+      color: seamless ? Colors.transparent : color,
       borderWidth: seamless ? 0 : 1,
       elevation: seamless ? 0 : 1,
       margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
@@ -99,7 +100,14 @@ class _ChatBubbleState extends State<ChatBubble> {
     bool showBubbleTime = widget.bubbleData.messageType != GetRoomResponseObjectMessageType.system;
     var actorTextStyle = TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold);
 
-    return GestureDetector(
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.end,
+      textDirection: TextDirection.ltr,
+      crossAxisAlignment: CrossAxisAlignment.end,
+
+      children: [
+        GestureDetector(
           child: Bubble(
 
             style: getStyle(),
@@ -112,13 +120,7 @@ class _ChatBubbleState extends State<ChatBubble> {
                 children: [
                   Padding(
                       padding: EdgeInsets.only(bottom: showBubbleTime ? 18 : 0, top: showActorDisplayName ? 18 : 0),
-                  child: FutureBuilder(
+                      child: message.getWidget()
-                    future: message.getWidget(),
-                    builder: (context, snapshot) {
-                      if(!snapshot.hasData) return const CircularProgressIndicator();
-                      return snapshot.data ?? const Icon(Icons.error);
-                    },
-                  )
                   ),
                   Visibility(
                     visible: showActorDisplayName,
@@ -255,6 +257,34 @@ class _ChatBubbleState extends State<ChatBubble> {
               }
             });
           },
+        ),
+        Visibility(
+          visible: widget.bubbleData.reactions != null,
+          child: Transform.translate(
+            offset: const Offset(0, -10),
+            child: Container(
+              width: MediaQuery.of(context).size.width,
+              margin: const EdgeInsets.only(left: 5, right: 5),
+              child: Wrap(
+                alignment: widget.isSender ? WrapAlignment.end : WrapAlignment.start,
+                crossAxisAlignment: WrapCrossAlignment.start,
+                //mainAxisSize: MainAxisSize.max,
+                children: widget.bubbleData.reactions?.entries.map<Widget>((e) {
+                  return Container(
+                    margin: const EdgeInsets.only(right: 2.5, left: 2.5),
+                    child: Chip(
+                      label: Text("${e.key} ${e.value}"),
+                      visualDensity: const VisualDensity(vertical: VisualDensity.minimumDensity, horizontal: VisualDensity.minimumDensity),
+                      padding: EdgeInsets.zero,
+                      backgroundColor: widget.bubbleData.reactionsSelf?.contains(e.key) ?? false ? Theme.of(context).primaryColor : null,
+                    ),
+                  );
+                }).toList() ?? [],
+              ),
+            ),
+          ),
+        ),
+      ],
     );
   }
 }

lib/view/pages/talk/chatMessage.dart

@@ -1,13 +1,12 @@
-import 'dart:convert';
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
-import 'package:shared_preferences/shared_preferences.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 import '../../../api/marianumcloud/talk/chat/getChatResponse.dart';
 import '../../../api/marianumcloud/talk/chat/richObjectStringProcessor.dart';
+import '../../../model/accountData.dart';
 
 class ChatMessage {
   String originalMessage;
@@ -27,8 +26,7 @@ class ChatMessage {
     }
   }
 
-  Future<Widget> getWidget() async {
+  Widget getWidget() {
-    SharedPreferences preferences = await SharedPreferences.getInstance();
 
     if(file == null) {
       return SelectableLinkify(
@@ -50,10 +48,9 @@ class ChatMessage {
       placeholder: (context, url) {
         return const Padding(padding: EdgeInsets.all(10), child: CircularProgressIndicator());
       },
-      fadeInDuration: const Duration(seconds: 1),
       imageUrl: "https://cloud.marianum-fulda.de/core/preview?fileId=${file!.id}&x=100&y=-1&a=1",
       httpHeaders: {
-        "Authorization": "Basic ${base64.encode(utf8.encode("${preferences.getString("username")}:${preferences.getString("password")}"))}" // TODO move authentication
+        "Authorization": "Basic ${AccountData().buildHttpAuthString()}"
       },
     );
   }

lib/view/pages/talk/chatView.dart

@@ -1,6 +1,5 @@
 
 import 'package:flutter/material.dart';
-import 'package:jiffy/jiffy.dart';
 import 'package:loader_overlay/loader_overlay.dart';
 import 'package:provider/provider.dart';
 
@@ -47,25 +46,15 @@ class _ChatViewState extends State<ChatView> {
           DateTime lastDate = DateTime.now();
           data.getChatResponse.sortByTimestamp().forEach((element) {
             DateTime elementDate = DateTime.fromMillisecondsSinceEpoch(element.timestamp * 1000);
+
+            if(element.systemMessage.contains("reaction")) return;
+
             if(elementDate.weekday != lastDate.weekday) {
               lastDate = elementDate;
               messages.add(ChatBubble(
                   context: context,
                   isSender: true,
-                  bubbleData: GetChatResponseObject(
+                  bubbleData: GetChatResponseObject.getDateDummy(element.timestamp),
-                    1,
-                    "asd",
-                    GetRoomResponseObjectMessageActorType.bridge,
-                    "system",
-                    "System",
-                    element.timestamp,
-                    elementDate.toIso8601String(),
-                    GetRoomResponseObjectMessageType.system,
-                    false,
-                    "",
-                    Jiffy.parseFromDateTime(elementDate).format(pattern: "dd.MM.yyyy"),
-                    null
-                  ),
                   chatData: widget.room
               ));
             }