@buerokratt-ria/common-gui-components 0.0.42 → 0.0.44

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.44] - 26.02.2026
+
+- Removed _ from chosen CSA's list
+
+## [0.0.43] - 06.02.2026
+
+- Prevent url fetch in markdownify for non image urls
+- Added Comment Settings to get-chat-by-id
+- Enhance eventGroup Function
+- Reset Pagination on search change
+
 ## [0.0.42] - 04.02.2026
 
 - Fix comment display in chat content view

package/package.json

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

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

@@ -340,23 +340,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 chatId: passedChatId,
             }),
         onSuccess: (res: any) => {
-            setSelectedChat({
-              ...res.data.response,
-              comment: selectedChat?.comment,
-              commentAddedDate: selectedChat?.commentAddedDate,
-              commentAuthor: selectedChat?.commentAuthor,
-              labels: selectedChat?.labels,
-              lastMessageEvent: selectedChat?.lastMessageEvent,
-              contactsMessage: selectedChat?.contactsMessage,
-              isFiveRatingScale: selectedChat?.isFiveRatingScale,
-              istest: selectedChat?.istest,
-              nps: selectedChat?.nps,
-              userDisplayName: selectedChat?.userDisplayName,
-              customerSupportFirstName: selectedChat?.customerSupportFirstName,
-              customerSupportLastName: selectedChat?.customerSupportLastName,
-              allCsa: selectedChat?.allCsa,
-              totalPages: selectedChat?.totalPages,
-            });
+            setSelectedChat(res.data.response);
             setChatState(res.data.response);
         },
     });
@@ -372,7 +356,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             }),
         onSuccess: (res: any) => {
             setCustomerSupportAgents([
-                {label: '-', value: '-'},
                 {label: 'Bürokratt', value: 'chatbot'},
                 ...res.data.response.map((item) => ({
                     label: [item.firstName, item.lastName].join(' ').trim(),
@@ -1015,6 +998,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             name="searchChats"
                             placeholder={t('chat.history.searchChats') + '...'}
                             onChange={(e) => {
+                                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                                setSearchParams((params) => {
+                                  params.set("page", "1");
+                                  return params;
+                                });
                                 setSearch(e.target.value);
                                 debouncedGetAllEnded(e.target.value);
                             }}
@@ -1125,18 +1113,27 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 setSearchParams((params) => {
                                     params.delete('customerSupportIds');
                                     params.set('page', '1');
-                                    selection?.forEach((s) =>
-                                        params.append('customerSupportIds', s.value)
-                                    );
+                                    selection?.forEach((s) => {
+                                      params.append("customerSupportIds", s.value);
+                                      if (s.value === "chatbot") params.append("customerSupportIds", "-");
+                                      return params;
+                                    });
                                     return params;
                                 });
 
                                 setPagination({pageIndex: 0, pageSize: pagination.pageSize});
 
+                                const customerSupportIds =
+                                  selection?.reduce((acc, s) => {
+                                    acc.push(s.value);
+                                    if (s.value === "chatbot") acc.push("-");
+                                    return acc;
+                                  }, []) || [];
+
                                 getAllEndedChats.mutate({
                                     startDate,
                                     endDate,
-                                    customerSupportIds: selection?.map((s) => s.value) || [],
+                                    customerSupportIds: customerSupportIds,
                                     pagination: {pageIndex: 0, pageSize: pagination.pageSize},
                                     sorting,
                                     search,

package/ui-components/Chat/Markdownify.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
 import Markdown from "markdown-to-jsx";
+import React, { useState } from "react";
 import sanitizeHtml from "sanitize-html";
 
 interface MarkdownifyProps {
@@ -7,6 +7,27 @@ interface MarkdownifyProps {
   sanitizeLinks?: boolean;
 }
 
+const isValidImageUrl = (s: string): boolean => {
+  try {
+    const u = new URL(s);
+    if (!/^(https?|data):$/i.test(u.protocol)) return false;
+    if (s.startsWith("data:image/")) {
+      return /^data:image\/(png|jpe?g|gif|webp|svg\+xml|bmp);(base64,|charset=utf-8;)/i.test(s);
+    }
+    const path = u.pathname.toLowerCase();
+    const search = u.search.toLowerCase();
+    if (/\.(png|jpe?g|gif|webp|svg|ico|bmp|tiff?|avif|heic|heif|apng)([?#]|$)/i.test(path)) {
+      return true;
+    }
+    if (/\/(images?|img|photos?|pictures?|media|uploads?|thumb|avatar)\//i.test(path)) {
+      return true;
+    }
+    return /[?&](format|type|image|img|photo)=(png|jpe?g|gif|webp|svg|ico)/i.test(search);
+  } catch {
+    return false;
+  }
+};
+
 const LinkPreview: React.FC<{
   href: string;
   children: React.ReactNode;
@@ -27,17 +48,25 @@ const LinkPreview: React.FC<{
     );
   }
 
-  return !hasError ? (
+  if (!isValidImageUrl(href)) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  }
+
+  return hasError ? (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  ) : (
     <img
       src={href}
       alt={typeof children === "string" ? children : "Preview"}
       style={{ maxWidth: "100%", height: "auto", borderRadius: "20px" }}
       onError={() => setHasError(true)}
     />
-  ) : (
-    <a href={href} target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
   );
 };
 
@@ -53,8 +82,14 @@ function formatMessage(message?: string): string {
     .replaceAll(/\\?\$v\w*/g, "")
     .replaceAll(/\\?\$g\w*/g, "");
 
-  return filteredMessage
-    .replaceAll(/&#x([0-9A-Fa-f]+);/g, (_, hex: string) => String.fromCharCode(parseInt(hex, 16)))
+  const dataImagePattern = /((?:^|\s))(data:image\/[a-z0-9+]+;[^)\s]+)/gi;
+  const finalMessage = filteredMessage.replaceAll(
+    dataImagePattern,
+    (_, prefix, dataUrl) => `${prefix}[image](${dataUrl})`,
+  );
+
+  return finalMessage
+    .replaceAll(/&#x([0-9A-F]+);/gi, (_, hex: string) => String.fromCharCode(parseInt(hex, 16)))
     .replaceAll("&amp;", "&")
     .replaceAll("&gt;", ">")
     .replaceAll("&lt;", "<")
@@ -62,7 +97,7 @@ function formatMessage(message?: string): string {
     .replaceAll("&#39;", "'")
     .replaceAll("&apos;", "'")
     .replaceAll(/(^|\n)(\d{4})\.\s/g, (match, prefix, year) => {
-      const remainingText = filteredMessage.substring(filteredMessage.indexOf(match) + match.length);
+      const remainingText = finalMessage.substring(finalMessage.indexOf(match) + match.length);
       const sentenceEnd = remainingText.indexOf("\n\n");
       if (sentenceEnd !== -1) {
         const currentSentence = remainingText.substring(0, sentenceEnd);
@@ -72,7 +107,7 @@ function formatMessage(message?: string): string {
       }
       return `${prefix}${year}\\. `;
     })
-    .replaceAll(/(?<=\n)\d+\.\s/g, hasSpecialFormat(filteredMessage) ? "\n\n$&" : "$&")
+    .replaceAll(/(?<=\n)\d+\.\s/g, hasSpecialFormat(finalMessage) ? "\n\n$&" : "$&")
     .replaceAll(/^(\s+)/g, (match) => match.replaceAll(" ", "&nbsp;"));
 }
 

package/ui-components/HistoricalChat/index.tsx

@@ -194,7 +194,52 @@ const HistoricalChat: FC<ChatProps> = ({
 
   const eventGroup = (group: GroupedMessage) => {
     return group.messages.map((message) => {
-      return <ChatEvent key={message.id} message={message} />;
+      if (message.event) {
+        return <ChatEvent key={message.id} message={message} />;
+      } else {
+        return (
+          <div key={message.id}>
+            {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}
+                key={`${message.id ?? ""}`}
+                toastContext={toastContext}
+                onMessageClick={(message) => {
+                  onMessageClick?.(message);
+                }}
+              />
+            </div>
+          </div>
+        );
+      }
     });
   };