@buerokratt-ria/common-gui-components 0.0.20 → 0.0.21

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.21] - 30-06-2025
+
+- Fix Message With Buttons View.
+
 ## [0.0.20] - 21-05-2025
 
 - Making chat view go take all vertical space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/ui-components/ButtonMessage/ButtonMessage.scss

@@ -6,7 +6,7 @@
   margin: 0.3rem 0 0.7rem 0;
 
   span {
-    padding: 0 0.5rem;
+    padding: 0.25rem 0.5rem;
     background-color: get-color(sea-green-12);
     color: get-color(white);
     border-radius: 8px;

package/ui-components/ButtonMessage/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from "react";
 import { MessageButton } from 'types/message';
 import './ButtonMessage.scss';
 
@@ -9,8 +9,8 @@ type ButtonMessageProps = {
 const ButtonMessage: FC<ButtonMessageProps> = ({ buttons }) => {
     return (
         <div className='button-container'>
-            {buttons.map(({title, payload}) =>
-                <span key={title}>{title}({payload})</span>
+            {buttons.map(({title}) =>
+                <span key={title}>{title}</span>
             )}
         </div>
     );

package/ui-components/HistoricalChat/index.tsx

@@ -100,40 +100,48 @@ const HistoricalChat: FC<ChatProps> = ({
   useEffect(() => {
     if (!messagesList) return;
     let groupedMessages: GroupedMessage[] = [];
-    messagesList.forEach((message) => {
+    messagesList.forEach((message, i) => {
+      const currentMessage = message;
+      const content = currentMessage.content?.trim() ?? "";
+
+      if (content.startsWith("#service,") || content.startsWith("#common_service,")) {
+        let buttons = messagesList[i - 1]?.buttons ? JSON.parse(messagesList[i - 1].buttons!) : [];
+        currentMessage.content = buttons.find((b: any) => b.payload.includes(content))?.title ?? content;
+      }
+
       const lastGroup = groupedMessages[groupedMessages.length - 1];
-      if (lastGroup?.type === message.authorRole) {
+      if (lastGroup?.type === currentMessage.authorRole) {
         if (
-          !message.event ||
-          message.event.toLowerCase() === CHAT_EVENTS.GREETING ||
-          message.event.toLowerCase() === CHAT_EVENTS.WAITING_VALIDATION ||
-          message.event.toLowerCase() === CHAT_EVENTS.APPROVED_VALIDATION
+          !currentMessage.event ||
+          currentMessage.event.toLowerCase() === CHAT_EVENTS.GREETING ||
+          currentMessage.event.toLowerCase() === CHAT_EVENTS.WAITING_VALIDATION ||
+          currentMessage.event.toLowerCase() === CHAT_EVENTS.APPROVED_VALIDATION
         ) {
           lastGroup.messages.push({
-            ...message,
+            ...currentMessage,
             content:
-              message.event === CHAT_EVENTS.WAITING_VALIDATION
+              currentMessage.event === CHAT_EVENTS.WAITING_VALIDATION
                 ? t("chat.waiting_validation").toString()
-                : message.content,
+                : content,
           });
         } else {
           groupedMessages.push({
             name: "",
             type: "event",
             title: "",
-            messages: [{ ...message }],
+            messages: [{ ...currentMessage }],
           });
         }
       } else {
         const isBackOfficeUser =
-          message.authorRole === "backoffice-user"
-            ? `${message.authorFirstName} ${message.authorLastName}`
+          currentMessage.authorRole === "backoffice-user"
+            ? `${currentMessage.authorFirstName} ${currentMessage.authorLastName}`
             : BACKOFFICE_NAME.DEFAULT;
         groupedMessages.push({
-          name: message.authorRole === "end-user" ? endUserFullName : isBackOfficeUser,
-          type: message.authorRole,
-          title: message.csaTitle ?? "",
-          messages: [{ ...message }],
+          name: currentMessage.authorRole === "end-user" ? endUserFullName : isBackOfficeUser,
+          type: currentMessage.authorRole,
+          title: currentMessage.csaTitle ?? "",
+          messages: [{ ...currentMessage }],
         });
       }
     });