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

package/ui-components/FormElements/index.tsx

@@ -21,3 +21,4 @@ export {
     FormDatepicker,
     SwitchBox,
 };
+export * from './FormCombobox';

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>
   );
 };

package/ui-components/Icon/index.tsx

@@ -14,6 +14,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(({ label, icon, size = 'smal
     const iconClasses = clsx(
         'icon',
         `icon--${size}`,
+        rest.className,
     );
 
     return (

package/ui-components/index.tsx

@@ -12,6 +12,7 @@ import {
     FormTextarea,
     Switch,
     SwitchBox,
+    FormCombobox,
 } from './FormElements';
 import DataTable from './DataTable';
 import Tooltip from './Tooltip';
@@ -52,4 +53,5 @@ export {
     Toast,
     Label,
     ClearFiltersButton,
+    FormCombobox,
 };