@buerokratt-ria/common-gui-components 0.0.34 → 0.0.36

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.36] - 14.01.2026
+
+- Hide $backoffice, $validate_ and $general_knowledge from end user
+
+## [0.0.35] - 09.01.2026
+
+- Fixed Pagination on date change
+- Fix Profile Picture and namu UI conflict
+
+## [0.0.34] - 30.12.2025
+
+- Fix building dependents
+
 ## [0.0.33] - 22.12.2025
 
 - Updated domain logic change

package/package.json

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

package/templates/history-page/src/index.tsx

@@ -1024,7 +1024,10 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                     onChange={(v) => {
                                                         field.onChange(v);
                                                         const start = formatISO(startOfDay(new Date(v)));
+                                                        const resetPagination = { pageIndex: 0, pageSize: pagination.pageSize };
+                                                        setPagination(resetPagination);
                                                         setSearchParams((params) => {
+                                                            params.set("page", "1");
                                                             params.set('start', start);
                                                             return params;
                                                         });
@@ -1032,7 +1035,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                             startDate: start,
                                                             endDate: formatISO(endOfDay(new Date(endDate))),
                                                             customerSupportIds: passedCustomerSupportIds,
-                                                            pagination,
+                                                            pagination: resetPagination,
                                                             sorting,
                                                             search,
                                                         });
@@ -1056,7 +1059,10 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                     onChange={(v) => {
                                                         field.onChange(v);
                                                         const end = formatISO(endOfDay(new Date(v)));
+                                                        const resetPagination = { pageIndex: 0, pageSize: pagination.pageSize };
+                                                        setPagination(resetPagination);
                                                         setSearchParams((params) => {
+                                                            params.set("page", "1");
                                                             params.set('end', end);
                                                             return params;
                                                         });
@@ -1064,7 +1070,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                             startDate: formatISO(startOfDay(new Date(startDate))),
                                                             endDate: end,
                                                             customerSupportIds: passedCustomerSupportIds,
-                                                            pagination,
+                                                            pagination: resetPagination,
                                                             sorting,
                                                             search,
                                                         });

package/ui-components/Chat/Chat.scss

@@ -105,8 +105,8 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding-left: 56px;
     position: relative;
+    padding-left: 0px !important;
 
     &:not(:last-child) {
       margin-bottom: 8px;
@@ -148,9 +148,13 @@
     &--buerokratt,
     &--chatbot {
       #{$self} {
+        &__group-header {
+          align-items: center;
+        }
+
         &__group-initials {
           background-color: get-color(sapphire-blue-10);
-          left: 0;
+          position: relative;
         }
 
         &__group-name {
@@ -158,6 +162,7 @@
           text-align: left;
           margin-left: 0;
           font-size: $veera-font-size-100;
+          padding-top: 0;
         }
 
         &__messages {
@@ -165,6 +170,7 @@
           flex-direction: column;
           gap: 4px;
           align-items: flex-start;
+          padding-left: 50px;
         }
 
         &__message-text {
@@ -172,8 +178,7 @@
           color: get-color(white);
 
           :any-link {
-            background: url('../../static/icons/link-external-blue.svg')
-            no-repeat right center;
+            background: url('../../static/icons/link-external-blue.svg') no-repeat right center;
             padding-right: 1.25em;
             color: blue;
             text-decoration: underline;
@@ -186,18 +191,57 @@
       }
     }
 
+    &--end-user {
+      #{$self} {
+        &__group-header {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+        }
+      }
+
+      &__messages {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-end;
+        padding-left: 50px !important;
+      }
+
+      &__message-text {
+        background-color: get-color(black-coral-10);
+        color: get-color(white);
+
+        :any-link {
+          background: url('../../static/icons/link-external-white.svg') no-repeat right center;
+          padding-right: 1.25em;
+          color: white;
+          text-decoration: underline;
+        }
+
+        &:hover {
+          background-color: #535665;
+        }
+      }
+    }
+
     &--backoffice-user {
       #{$self} {
+        &__group-header {
+          align-items: center;
+        }
+
         &__group-initials {
           background-color: get-color(black-coral-10);
           color: get-color(white);
-          left: 0;
+          position: relative;
         }
 
         &__group-name {
           text-align: left;
           margin-left: 0;
           font-size: $veera-font-size-100;
+          padding-top: 0;
         }
 
         &__messages {
@@ -205,6 +249,7 @@
           flex-direction: column;
           gap: 4px;
           align-items: flex-start;
+          padding-left: 50px;
         }
 
         &__message-text {
@@ -212,8 +257,7 @@
           color: get-color(white);
 
           :any-link {
-            background: url('../../static/icons/link-external-white.svg')
-            no-repeat right center;
+            background: url('../../static/icons/link-external-white.svg') no-repeat right center;
             padding-right: 1.25em;
             color: white;
             text-decoration: underline;
@@ -231,6 +275,13 @@
     }
   }
 
+  &__group-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-height: 40px;
+  }
+
   &__group-initials {
     display: flex;
     align-items: center;
@@ -256,7 +307,10 @@
     margin-left: 10rem;
     margin-right: 3rem;
     text-align: right;
-    padding-top: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &__messages {
@@ -264,6 +318,7 @@
     flex-direction: column;
     gap: 4px;
     align-items: flex-end;
+    padding-left: 50px;
   }
 
   &__messageContainer {
@@ -327,8 +382,7 @@
     }
 
     :any-link {
-      background: url('../../static/icons/link-external-blue.svg') no-repeat
-      right center;
+      background: url('../../static/icons/link-external-blue.svg') no-repeat right center;
       padding-right: 1.25em;
       color: blue;
       text-decoration: underline;
@@ -358,6 +412,28 @@
     user-select: none;
   }
 
+  &__message-failed-wrapper {
+    gap: 2px;
+    margin-left: -22px;
+  }
+
+  &__message-failed {
+    color: red;
+    display: flex;
+    font-size: 11px;
+    line-height: $veera-line-height-500;
+  }
+
+  &__message-failed-content {
+    margin-top: 4px;
+  }
+
+  &__message-failed-buttons {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+  }
+
   &__message-status {
     color: get-color(black-coral-6);
     font-size: 11px;
@@ -377,31 +453,31 @@
 }
 
 .edit-toolbar {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: auto auto;
-    gap: 10px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: auto auto;
+  gap: 10px;
 
-    &__header {
-      align-items: center;
-      display: flex;
-      grid-column: 1;
-      grid-row: 1;
-    }
+  &__header {
+    align-items: center;
+    display: flex;
+    grid-column: 1;
+    grid-row: 1;
+  }
 
-    &__textarea {
-      grid-column: 1;
-      grid-row: 2;
-    }
+  &__textarea {
+    grid-column: 1;
+    grid-row: 2;
+  }
 
-    &__edit-actions {
-      display: flex;
-      grid-column: 2;
-      grid-row: 2;
-      gap: 10px;
-      justify-content: flex-end;
-    }
+  &__edit-actions {
+    display: flex;
+    grid-column: 2;
+    grid-row: 2;
+    gap: 10px;
+    justify-content: flex-end;
   }
+}
 
 .title {
   font-size: 13px;
@@ -426,7 +502,7 @@
 }
 
 .reset p {
-  margin:  0 0 0.5rem;
+  margin: 0 0 0.5rem;
   padding: 0;
 }
 
@@ -445,3 +521,31 @@
   text-decoration: none;
   color: inherit;
 }
+
+.newMessageContainer {
+  position: absolute;
+  bottom: 115px;
+  right: 0;
+  background: transparent;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 10px;
+}
+
+.newMessage {
+  display: inline-block;
+  width: max-content;
+  background-color: lightgray;
+  padding: 6px 28px;
+  border-radius: 8px;
+  margin-bottom: 2px;
+  margin-left: auto;
+  margin-right: 20px !important;
+  font-size: 18px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: get-color(sapphire-blue-10);
+    color: white;
+  }
+}

package/ui-components/Chat/Markdownify.tsx

@@ -46,10 +46,15 @@ const hasSpecialFormat = (m: string) => m.includes("\n\n") && m.indexOf(".") > 0
 function formatMessage(message?: string): string {
   if (!message) return "";
 
-  return message
-    .replace(/&#x([0-9A-Fa-f]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
-    .replace(/(^|\n)(\d{4})\.\s/g, (match, prefix, year) => {
-      const remainingText = message.substring(message.indexOf(match) + match.length);
+  const filteredMessage = message
+    .replaceAll(/\\?\$b\w*/g, "")
+    .replaceAll(/\\?\$v\w*/g, "")
+    .replaceAll(/\\?\$g\w*/g, "");
+
+  return filteredMessage
+    .replaceAll(/&#x([0-9A-Fa-f]+);/g, (_, hex: string) => String.fromCharCode(parseInt(hex, 16)))
+    .replaceAll(/(^|\n)(\d{4})\.\s/g, (match, prefix, year) => {
+      const remainingText = filteredMessage.substring(filteredMessage.indexOf(match) + match.length);
       const sentenceEnd = remainingText.indexOf("\n\n");
       if (sentenceEnd !== -1) {
         const currentSentence = remainingText.substring(0, sentenceEnd);
@@ -59,7 +64,7 @@ function formatMessage(message?: string): string {
       }
       return `${prefix}${year}\\. `;
     })
-    .replace(/(?<=\n)\d+\.\s/g, hasSpecialFormat(message) ? "\n\n$&" : "$&");
+    .replace(/(?<=\n)\d+\.\s/g, hasSpecialFormat(filteredMessage) ? "\n\n$&" : "$&");
 }
 
 const Markdownify: React.FC<MarkdownifyProps> = ({ message, sanitizeLinks = false }) => (

package/ui-components/HistoricalChat/HistoricalChat.scss

@@ -51,8 +51,8 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding-left: 56px;
     position: relative;
+    padding-left: 0px !important;
 
     &:not(:last-child) {
       margin-bottom: 8px;
@@ -61,10 +61,13 @@
     &--buerokratt,
     &--chatbot {
       #{$self} {
+        &__group-header {
+          align-items: center;
+        }
+
         &__group-initials {
           background-color: get-color(sapphire-blue-10);
-          left: 0;
-          top: 0;
+          position: relative;
         }
 
         &__group-name {
@@ -72,6 +75,7 @@
           text-align: left;
           margin-left: 0;
           font-size: $veera-font-size-100;
+          padding-top: 0;
         }
 
         &__messages {
@@ -79,6 +83,7 @@
           flex-direction: column;
           gap: 4px;
           align-items: flex-start;
+          padding-left: 50px;
         }
 
         &__message-text {
@@ -97,25 +102,73 @@
       }
     }
 
+    &--end-user {
+      #{$self} {
+        &__group-header {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+        }
+      }
+
+      &__group-initials {
+        background-color: get-color(sapphire-blue-10);
+        position: relative !important;
+        right: 0px !important;
+      }
+
+      &__messages {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-end;
+        padding-left: 50px !important;
+      }
+
+      &__message-text {
+        background-color: get-color(black-coral-10);
+        color: get-color(white);
+
+        :any-link {
+          background: url('../../static/icons/link-external-white.svg') no-repeat right center;
+          padding-right: 1.25em;
+          color: white;
+          text-decoration: underline;
+        }
+
+        &:hover {
+          background-color: #535665;
+        }
+      }
+    }
+
     &--backoffice-user {
       #{$self} {
+        &__group-header {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+        }
+
         &__group-initials {
           background-color: get-color(black-coral-10);
           color: get-color(white);
-          left: 0;
+          position: relative;
         }
 
         &__group-name {
           text-align: left;
           margin-left: 0;
           font-size: $veera-font-size-100;
+          padding-top: 0;
         }
 
         &__messages {
           display: flex;
           flex-direction: column;
           gap: 4px;
-          align-items: flex-start;
+          align-items: flex-end;
+          padding-left: 50px;
         }
 
         &__message-text {
@@ -135,6 +188,13 @@
     }
   }
 
+  &__group-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    min-height: 40px;
+  }
+
   &__group-initials,
   &__group-event-initials {
     display: flex;
@@ -150,6 +210,7 @@
     color: get-color(black-coral-6);
     position: absolute;
     right: 0;
+    top: 0;
   }
 
   &__group-initials {
@@ -169,7 +230,10 @@
     margin-left: 10rem;
     margin-right: 3rem;
     text-align: right;
-    padding-top: 7px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &__group-event-name {
@@ -181,6 +245,7 @@
     flex-direction: column;
     gap: 4px;
     align-items: flex-end;
+    padding-left: 50px;
   }
 
   &__message {
@@ -199,6 +264,8 @@
     line-height: $veera-line-height-500;
     transition: all .25s ease-out;
     cursor: pointer;
+    word-break: break-word;
+    white-space: pre-wrap;
 
     :any-link {
       text-decoration: underline;

package/ui-components/HistoricalChat/index.tsx

@@ -12,6 +12,7 @@ import "./HistoricalChat.scss";
 import { apiDev } from "../../services/api";
 import ChatEvent from "../../ui-components/ChatEvent";
 import { ToastContextType } from "../../context";
+import { AUTHOR_ROLES } from "../../utils/constants";
 
 type ChatProps = {
   chat: ChatType;
@@ -64,6 +65,11 @@ const HistoricalChat: FC<ChatProps> = ({
   const [lastMessage, setLastMessage] = useState<Message>();
   const [statuses, setStatuses] = useState(chatStatuses);
 
+  const messageGroupsRef = useRef(messageGroups);
+  const setMessageGroupsState = (data: GroupedMessage[]) => {
+    messageGroupsRef.current = data;
+    setMessageGroups(data);
+  };
   useEffect(() => {
     getMessages();
   }, [trigger]);
@@ -100,55 +106,64 @@ const HistoricalChat: FC<ChatProps> = ({
   useEffect(() => {
     if (!messagesList) return;
     let groupedMessages: GroupedMessage[] = [];
-    messagesList.forEach((message, i) => {
-      const currentMessage = message;
-      const content = currentMessage.content?.trim() ?? "";
-
-      if (content.startsWith("#service,") || content.startsWith("#common_service,")) {
-        const allPreviousButtons = messagesList
-          .slice(0, i)
-          .flatMap((msg) => (msg.buttons ? JSON.parse(msg.buttons) : []));
-        currentMessage.content = allPreviousButtons.find((b: any) => b.payload.includes(content))?.title ?? content;
-      }
-
+    messagesList.forEach((message) => {
       const lastGroup = groupedMessages[groupedMessages.length - 1];
-      if (lastGroup?.type === currentMessage.authorRole) {
-        if (
-          !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({
-            ...currentMessage,
-            content:
-              currentMessage.event === CHAT_EVENTS.WAITING_VALIDATION
-                ? t("chat.waiting_validation").toString()
-                : currentMessage.content,
+      if (
+        lastGroup &&
+        lastGroup.type === AUTHOR_ROLES.BACKOFFICE_USER &&
+        lastGroup.messages.at(-1) &&
+        message.event === CHAT_EVENTS.READ
+      ) {
+        lastGroup.messages.push(message);
+        return;
+      }
+      if (lastGroup?.type === message.authorRole) {
+        if (!message.event || message.event === "" || message.event === "greeting") {
+          lastGroup.messages.push({ ...message });
+        } else if (message.event === CHAT_EVENTS.WAITING_VALIDATION && chat.status === CHAT_STATUS.VALIDATING) {
+          groupedMessages.push({
+            name: "Bürokratt",
+            type: "buerokratt",
+            title: "",
+            messages: [{ ...message }],
           });
         } else {
           groupedMessages.push({
             name: "",
             type: "event",
             title: "",
-            messages: [{ ...currentMessage }],
+            messages: [{ ...message }],
           });
         }
-      } else {
+      } else if (!message.event || message.event === "" || message.event === "greeting") {
         const isBackOfficeUser =
-          currentMessage.authorRole === "backoffice-user"
-            ? `${currentMessage.authorFirstName} ${currentMessage.authorLastName}`
+          message.authorRole === "backoffice-user"
+            ? `${message.authorFirstName} ${message.authorLastName}`
             : BACKOFFICE_NAME.DEFAULT;
         groupedMessages.push({
-          name: currentMessage.authorRole === "end-user" ? endUserFullName : isBackOfficeUser,
-          type: currentMessage.authorRole,
-          title: currentMessage.csaTitle ?? "",
-          messages: [{ ...currentMessage }],
+          name: message.authorRole === "end-user" ? endUserFullName : isBackOfficeUser,
+          type: message.authorRole,
+          title: message.csaTitle ?? "",
+          messages: [{ ...message }],
+        });
+      } else if (message.event === CHAT_EVENTS.WAITING_VALIDATION && chat.status === CHAT_STATUS.VALIDATING) {
+        groupedMessages.push({
+          name: "Bürokratt",
+          type: "buerokratt",
+          title: "",
+          messages: [{ ...message }],
+        });
+      } else {
+        groupedMessages.push({
+          name: "",
+          type: "event",
+          title: "",
+          messages: [{ ...message }],
         });
       }
     });
 
-    setMessageGroups(groupedMessages);
+    setMessageGroupsState(groupedMessages);
     const lastMessage = messagesList[messagesList.length - 1];
     if (
       lastMessage?.event?.toLowerCase() === CHAT_EVENTS.CLIENT_LEFT_FOR_UNKNOWN_REASONS ||
@@ -184,23 +199,34 @@ const HistoricalChat: FC<ChatProps> = ({
       } 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>
+            {group.name.trim() && (
+              <div className="historical-chat__group-header">
+                <div className="historical-chat__group-event-initials">
+                  {group.type === "buerokratt" || group.type === "chatbot" ? (
+                    <BykLogoWhite height={24} />
+                  ) : (
+                    (() => {
+                      if (group.name) {
+                        const initials = group.name
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")
+                          .toUpperCase();
+                        return <>{initials}</>;
+                      } else {
+                        return <></>;
+                      }
+                    })()
+                  )}
+                </div>
+                {group.name && (
+                  <div className="historical-chat__group-event-name">
+                    {group.name}
+                    {group.title.length > 0 && <div className="title">{group.title}</div>}
+                  </div>
+                )}
+              </div>
+            )}
             <div className="historical-chat__messages">
               <ChatMessage
                 message={message}
@@ -231,6 +257,7 @@ const HistoricalChat: FC<ChatProps> = ({
                   eventGroup(group)
                 ) : (
                   <>
+                  <div className="historical-chat__group-header">
                     <div className="historical-chat__group-initials">
                       {group.type === "buerokratt" || group.type === "chatbot" ? (
                         <BykLogoWhite height={24} />
@@ -248,6 +275,7 @@ const HistoricalChat: FC<ChatProps> = ({
                       {group.name}
                       {group.title.length > 0 && <div className="title">{group.title}</div>}
                     </div>
+                  </div>
                     <div className="historical-chat__messages">
                       {group.messages.map((message, i) => (
                         <ChatMessage