@buerokratt-ria/common-gui-components 0.0.6 → 0.0.8

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 All changes to this project will be documented in this file.
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.8] - 21-03-2025
+
+- Fixated markdown-to-jsx to version 7.7.3
+
+## [0.0.7] - 19-03-2025
+
+- Fixed End-user messages not visible in chat history
+
 ## [0.0.6] - 11-03-2025
 
 - Enhanced Markdownify List Rendering

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",
@@ -34,7 +34,7 @@
     "linkify-react": "^4.1.1",
     "linkifyjs": "^4.1.1",
     "lodash": "^4.17.21",
-    "markdown-to-jsx": "^7.5.0",
+    "markdown-to-jsx": "7.7.3",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
@@ -88,7 +88,7 @@
     "linkify-react": "^4.1.1",
     "linkifyjs": "^4.1.1",
     "lodash": "^4.17.21",
-    "markdown-to-jsx": "^7.5.0",
+    "markdown-to-jsx": "7.7.3",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",

package/ui-components/HistoricalChat/HistoricalChat.scss

@@ -135,7 +135,8 @@
     }
   }
 
-  &__group-initials {
+  &__group-initials,
+  &__group-event-initials {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -149,10 +150,18 @@
     color: get-color(black-coral-6);
     position: absolute;
     right: 0;
+  }
+
+  &__group-initials {
     top: 0;
   }
 
-  &__group-name {
+  &__group-event-initials {
+    bottom: 23px;
+  }
+
+  &__group-name,
+  &__group-event-name {
     font-size: $veera-font-size-100;
     line-height: $veera-line-height-500;
     font-weight: $veera-font-weight-delta;
@@ -163,6 +172,10 @@
     padding-top: 7px;
   }
 
+  &__group-event-name {
+    padding-bottom: 4px;
+  }
+
   &__messages {
     display: flex;
     flex-direction: column;
@@ -222,4 +235,4 @@
   font-size: 14px;
   color: get-color(black-coral-6);
   padding-top: 4px;
-}
+}

package/ui-components/HistoricalChat/index.tsx

@@ -164,9 +164,47 @@ const HistoricalChat: FC<ChatProps> = ({
   }, [messageGroups]);
 
   const isEvent = (group: GroupedMessage) => {
-    return (
-      group.type === "event" || group.name.trim() === "" || (!group.messages[0].content && group.messages[0].event)
-    );
+    return (group.type === "event" || group.name.trim() === "" ||  group.messages.some((message) => message.event && !message.content));
+  };
+
+  const eventGroup = (group: GroupedMessage) => {
+    return group.messages.map((message) => {
+      if (message.event && !message.content) {
+        return <ChatEvent key={message.id} message={message} />;
+      } else {
+        return (
+          <div key={message.id}>
+            <div className="historical-chat__group-event-initials">
+              {group.type === "buerokratt" || group.type === "chatbot" ? (
+                <BykLogoWhite height={24} />
+              ) : (
+                <>
+                  {group.name
+                    .split(" ")
+                    .map((n) => n[0])
+                    .join("")
+                    .toUpperCase()}
+                </>
+              )}
+            </div>
+            <div className="historical-chat__group-event-name">
+              {group.name}
+              {group.title.length > 0 && <div className="title">{group.title}</div>}
+            </div>
+            <div className="historical-chat__messages">
+              <ChatMessage
+                message={message}
+                key={`${message.id ?? ""}`}
+                toastContext={toastContext}
+                onMessageClick={(message) => {
+                  onMessageClick?.(message);
+                }}
+              />
+            </div>
+          </div>
+        );
+      }
+    });
   };
 
   return (
@@ -180,7 +218,7 @@ const HistoricalChat: FC<ChatProps> = ({
                 key={`${group.name}-${index}`}
               >
                 {isEvent(group) ? (
-                  <ChatEvent message={group.messages[0]} />
+                  eventGroup(group)
                 ) : (
                   <>
                     <div className="historical-chat__group-initials">