@buerokratt-ria/common-gui-components 0.0.57 → 0.0.58

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.58] - 25.05.2026
+
+- Properly render mcq selected button
+
 ## [0.0.57] - 14.05.2026
 
 - Added authenticated person to chosen columns list

package/package.json

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

package/templates/history-page/src/History.scss

@@ -9,10 +9,21 @@
     gap: 24px;
 }
 
+.history-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+
 .card-drawer-container {
   display: flex;
   width: 100%;
-  height: 100vh;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
   box-sizing: border-box;
 }
 
@@ -57,7 +68,7 @@
 
 .drawer-container {
   flex: 1;
-  height: 100%;
+  min-height: 0;
   overflow-y: auto;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
   border: 1px solid get-color(black-coral-2);
@@ -87,6 +98,11 @@
 }
 
 .history-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
   &--loading {
     opacity: 0.5;
     pointer-events: none;

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

@@ -1099,7 +1099,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     if (!filteredEndedChatsList) return <>Loading... {{filteredEndedChatsList}} something is wrong </>;
 
     return (
-        <>
+        <div className="history-page-wrapper">
             <div className="header-container">
                 {displayTitle && (
                     <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
@@ -1255,7 +1255,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     <ClearFiltersButton style={{ marginLeft: 'auto' }} onClick={onClearFilersClick} />
                 </Track>
             )}
-            <div className="card-drawer-container" style={{height: '100%', overflow: 'auto'}}>
+            <div className="card-drawer-container">
                 <div className="card-wrapper">
                     <Card>
                         <DataTable
@@ -1496,7 +1496,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     <p>{t('global.removeValidation')}</p>
                 </Dialog>
             )}
-        </>
+        </div>
     );
 
     function getUserName() {

package/ui-components/HistoricalChat/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from "react";
 import { format } from "date-fns";
-import { Message } from "../../types/message";
+import { Message, MessageButton } from "../../types/message";
 import Markdownify from "../Chat/Markdownify";
 import { parseButtons, parseOptions } from "../../utils/parse-utils";
 import ButtonMessage from "../ButtonMessage";
@@ -12,14 +12,25 @@ type ChatMessageProps = {
   message: Message;
   onMessageClick?: (message: Message) => void;
   toastContext: ToastContextType | null;
+  previousButtons?: MessageButton[];
 };
 
-const ChatMessage: FC<ChatMessageProps> = ({ message, onMessageClick, toastContext }) => {
+const isButtonPayload = (content: string) =>
+  content.startsWith("#service,") || content.startsWith("#common_service,");
+
+const ChatMessage: FC<ChatMessageProps> = ({ message, onMessageClick, toastContext, previousButtons }) => {
   const buttons = useMemo(() => parseButtons(message), [message.buttons]);
   const options = useMemo(() => parseOptions(message), [message.options]);
   const { t } = useTranslation();
   const toast = toastContext;
 
+  const selectedButton = useMemo(() => {
+    const content = message.content ?? "";
+    if (!isButtonPayload(content)) return null;
+    const match = previousButtons?.find((b) => b.payload === content);
+    return match ?? { title: content, payload: content };
+  }, [message.content, previousButtons]);
+
   const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     const content = message.content ?? "";
@@ -44,13 +55,17 @@ const ChatMessage: FC<ChatMessageProps> = ({ message, onMessageClick, toastConte
   return (
     <>
       <div className="historical-chat__message">
-        <button
-          className="historical-chat__message-text"
-          onClick={onMessageClick ? () => onMessageClick(message) : undefined}
-          onContextMenu={handleContextMenu}
-        >
-          <Markdownify message={message.content ?? ""} sanitizeLinks={message.authorRole === "end-user"} />
-        </button>
+        {selectedButton ? (
+          <ButtonMessage buttons={[selectedButton]} />
+        ) : (
+          <button
+            className="historical-chat__message-text"
+            onClick={onMessageClick ? () => onMessageClick(message) : undefined}
+            onContextMenu={handleContextMenu}
+          >
+            <Markdownify message={message.content ?? ""} sanitizeLinks={message.authorRole === "end-user"} />
+          </button>
+        )}
         <time dateTime={message.created} className="historical-chat__message-date">
           {format(new Date(message.created ?? ""), "HH:mm:ss")}
         </time>

package/ui-components/HistoricalChat/index.tsx

@@ -13,6 +13,8 @@ import { apiDev } from "../../services/api";
 import ChatEvent from "../../ui-components/ChatEvent";
 import { ToastContextType } from "../../context";
 import { AUTHOR_ROLES } from "../../utils/constants";
+import { parseButtons } from "../../utils/parse-utils";
+import { MessageButton } from "../../types/message";
 
 type ChatProps = {
   chat: ChatType;
@@ -57,7 +59,7 @@ const HistoricalChat: FC<ChatProps> = ({
   onMessageClick,
 }) => {
   const { t } = useTranslation();
-  const chatRef = useRef<HTMLDivElement>(null);
+  const groupWrapperRef = useRef<HTMLDivElement>(null);
   const [messageGroups, setMessageGroups] = useState<GroupedMessage[]>([]);
   const [editingComment, setEditingComment] = useState<string | null>(null);
   const [messagesList, setMessagesList] = useState<Message[]>([]);
@@ -184,14 +186,22 @@ const HistoricalChat: FC<ChatProps> = ({
   }, [messagesList, endUserFullName]);
 
   useEffect(() => {
-    if (!chatRef.current || !messageGroups) return;
-    chatRef.current.scrollIntoView({ block: "end", inline: "end" });
+    if (!groupWrapperRef.current || !messageGroups) return;
+    groupWrapperRef.current.scrollTop = groupWrapperRef.current.scrollHeight;
   }, [messageGroups]);
 
   const isEvent = (group: GroupedMessage) => {
     return (group.type === "event" || group.name.trim() === "" ||  group.messages.some((message) => message.event && message.event !== CHAT_EVENTS.GREETING));
   };
 
+  const getPreviousButtons = (messageId: string | undefined): MessageButton[] => {
+    const idx = messagesList.findIndex((m) => m.id === messageId);
+    for (let i = idx - 1; i >= 0; i--) {
+      if (messagesList[i].buttons) return parseButtons(messagesList[i]);
+    }
+    return [];
+  };
+
   const eventGroup = (group: GroupedMessage) => {
     return group.messages.map((message) => {
       if (message.event) {
@@ -232,6 +242,7 @@ const HistoricalChat: FC<ChatProps> = ({
                 message={message}
                 key={`${message.id ?? ""}`}
                 toastContext={toastContext}
+                previousButtons={getPreviousButtons(message.id)}
                 onMessageClick={(message) => {
                   onMessageClick?.(message);
                 }}
@@ -247,7 +258,7 @@ const HistoricalChat: FC<ChatProps> = ({
       <div className="historical-chat">
         <div className="historical-chat__body">
           {header_link && <div className={"header-link"}>{header_link}</div>}
-          <div className="historical-chat__group-wrapper">
+          <div className="historical-chat__group-wrapper" ref={groupWrapperRef}>
             {messageGroups?.map((group, index) => (
               <div
                 className={clsx(["historical-chat__group", `historical-chat__group--${group.type}`])}
@@ -282,6 +293,7 @@ const HistoricalChat: FC<ChatProps> = ({
                           message={message}
                           key={`${message.id ?? ""}-${i}`}
                           toastContext={toastContext}
+                          previousButtons={getPreviousButtons(message.id)}
                           onMessageClick={(message) => {
                             onMessageClick?.(message);
                           }}
@@ -292,7 +304,6 @@ const HistoricalChat: FC<ChatProps> = ({
                 )}
               </div>
             ))}
-            <div id="anchor" ref={chatRef}></div>
           </div>
           {lastMessage && (
             <div className="historical-chat__toolbar">
@@ -350,7 +361,6 @@ const HistoricalChat: FC<ChatProps> = ({
             </div>
           )}
         </div>
-        <div id="anchor" ref={chatRef}></div>
       </div>
   );
 };