@buerokratt-ria/common-gui-components 0.0.24 → 0.0.26

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.26] - 15-09-2025
+
+- Added download button do download chat history with currently selected criteriasa
+- Added new optional param to enable this button(disabled by default)
+
+## [0.0.25] - 01-09-2025
+
+- Added test column to display chats mark for test
+- FIX: refetch based on updated domains
+
 ## [0.0.24] - 14-08-2025
 
 - Modified Start and End dates to send them in payload in iso format

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",
@@ -29,6 +29,7 @@
     "downshift": "^7.0.5",
     "esbuild": "^0.19.5",
     "framer-motion": "^8.5.5",
+    "file-saver": "^2.0.5",
     "i18next": "^22.4.5",
     "i18next-browser-languagedetector": "^7.0.1",
     "linkify-react": "^4.1.1",

package/services/file.ts

@@ -0,0 +1,31 @@
+import { Buffer } from 'buffer';
+
+export const saveFile = async (base64String: string, fileName: `${string}.${string}`, type: string) => {
+    const blob = new Blob([Buffer.from(base64String, 'base64')], {
+        type: type,
+    });
+
+    const extension = fileName.split('.').pop();
+
+    if (window.showSaveFilePicker) {
+        const handle = await window.showSaveFilePicker({
+            suggestedName: fileName,
+            types: [
+                {
+                    description: extension!.toUpperCase() + ' file',
+                    accept: { [type]: [`.${extension}` as `.${string}`] },
+                },
+            ],
+        });
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        writable.close();
+    } else {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }
+};

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

@@ -1,5 +1,6 @@
 @import 'src/styles/tools/spacing';
 @import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
 @import 'src/styles/settings/variables/typography';
 
 .input-wrapper {
@@ -13,6 +14,39 @@
   box-sizing: border-box;
 }
 
+.checkbox-test {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__item {
+    input[type=checkbox] {
+      &::before {
+        content: '';
+        display: block;
+        width: 16px;
+        height: 16px;
+        box-shadow: inset 0 0 0 1px get-color(black-coral-2);
+        border-radius: 2px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &:checked {
+      &::before {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNzQ5NzkgOC4xMjkwNkwxLjYyMjI5IDUuMDAxNTZMMC41NjEwMzUgNi4wNjI4MUw0Ljc0OTc5IDEwLjI1MTZMMTMuNzQ5OCAxLjI1MTU2TDEyLjY4ODUgMC4xOTAzMDhMNC43NDk3OSA4LjEyOTA2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
+        background-color: get-color(sapphire-blue-10);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 13px 10px;
+        box-shadow: inset 0 0 0 1px get-color(sapphire-blue-10);
+      }
+    }
+  }
+}
+
 .card-wrapper {
   flex: 1;
   overflow: auto;

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

@@ -1,11 +1,12 @@
-import React, {FC, PropsWithChildren, useEffect, useRef, useMemo, useState} from 'react';
+import React, {FC, PropsWithChildren, useEffect, useMemo, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useMutation} from '@tanstack/react-query';
 import {ColumnPinningState, createColumnHelper, PaginationState, SortingState,} from '@tanstack/react-table';
-import { format, startOfDay, endOfDay, formatISO } from "date-fns";
+import {endOfDay, format, formatISO, startOfDay} from "date-fns";
 import {AxiosError} from 'axios';
 import './History.scss';
 import {MdOutlineRemoveRedEye} from 'react-icons/md';
+import {CgSpinner} from 'react-icons/cg';
 
 import {
     Button,
@@ -13,6 +14,7 @@ import {
     DataTable,
     Dialog,
     Drawer,
+    FormCheckbox,
     FormDatepicker,
     FormInput,
     FormMultiselect,
@@ -34,6 +36,7 @@ import {ToastContextType} from "../../../context";
 
 import {getDomainsArray} from "../../../utils/multiDomain-utils";
 import {StoreState} from "../../../store";
+import {saveFile} from "../../../services/file";
 
 type HistoryProps = {
     user: UserInfo | null;
@@ -41,6 +44,7 @@ type HistoryProps = {
     toastContext: ToastContextType | null;
     onMessageClick?: (message: any) => void;
     showComment?: boolean;
+    showDownload?: boolean;
     showEmail?: boolean;
     showSortingLabel?: boolean;
     showStatus?: boolean;
@@ -51,12 +55,19 @@ type HistoryProps = {
     delegatedEndDate?: string;
 }
 
+type ExportResult = {
+    headers: string[];
+    rows: (string | number | null)[][];
+    chatIds: string[];
+};
+
 const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                               user,
                                                               userDomains,
                                                               toastContext,
                                                               onMessageClick,
                                                               showComment = true,
+                                                              showDownload = false,
                                                               showEmail = false,
                                                               showSortingLabel = false,
                                                               showStatus = true,
@@ -109,6 +120,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const [updateKey, setUpdateKey] = useState<number>(0)
     const currentDomains = useStore.getState().userDomains;
     const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN?.toLowerCase() === 'true';
+    const testMessageEnabled = import.meta.env.REACT_APP_SHOW_TEST_MESSAGE?.toLowerCase() === 'true';
+    const [loading, setLoading] = useState(false);
 
     const parseDateParam = (dateString: string | null) => {
       if (!dateString) return new Date();
@@ -143,9 +156,9 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         });
     }, 500);
 
-    if(multiDomainEnabled) {
+    if (multiDomainEnabled) {
         useStore.subscribe((state, prevState) => {
-            if(JSON.stringify(state.userDomains) !== JSON.stringify(prevState.userDomains)) {
+            if (JSON.stringify(state.userDomains) !== JSON.stringify(prevState.userDomains)) {
                 setUpdateKey(prevState => prevState + 1);
             }
         });
@@ -170,7 +183,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 setValue('endDate', unifyDateFromat(delegatedEndDate));
             }
 
-            if(initialLoad) {
+            if (initialLoad) {
                 fetchData()
             } else {
                 getAllEndedChats.mutate({
@@ -248,7 +261,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 search,
             });
         }
-    }, [selectedColumns]);
+    }, [selectedColumns, currentDomains]);
 
     useEffect(() => {
         listCustomerSupportAgents.mutate();
@@ -356,11 +369,15 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         ];
 
         if (showEmail) {
-            columns.splice(4, 0, {label: t('global.email'), value: 'endUserEmail'}); // insert after name
+            columns.splice(4, 0, {label: t('global.email'), value: 'endUserEmail'});
+        }
+
+        if (testMessageEnabled) {
+            columns.splice(5, 0, {label: t('global.test'), value: 'istest'});
         }
 
         return columns;
-    }, [t, showEmail])
+    }, [t, showEmail, testMessageEnabled])
 
     const chatStatusChangeMutation = useMutation({
         mutationFn: async (data: { chatId: string | number; event: string }) => {
@@ -451,6 +468,31 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         },
     });
 
+    const chatTestChangeMutation = useMutation({
+        mutationFn: (data: {
+            chatId: string | number;
+            isTest: boolean;
+        }) => apiDev.post('chats/mark-test', data),
+        onSuccess: (res, {chatId, isTest}) => {
+            const updatedChatList = filteredEndedChatsList.map((chat) =>
+                chat.id === chatId ? {...chat, isTest} : chat
+            );
+            filterChatsList(updatedChatList);
+            toast?.open({
+                type: 'success',
+                title: t('global.notification'),
+                message: t('toast.success.updateSuccess'),
+            });
+        },
+        onError: (error: AxiosError) => {
+            toast?.open({
+                type: 'error',
+                title: t('global.notificationError'),
+                message: error.message,
+            });
+        },
+    });
+
     const columnHelper = createColumnHelper<ChatType>();
 
     const copyValueToClipboard = async (value: string) => {
@@ -520,6 +562,26 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         </Tooltip>
     );
 
+    const markConversationAsTest = (props: any) => {
+        return <>
+            <FormCheckbox
+                label={''}
+                hideLabel
+                emptyItem={true}
+                name="active"
+
+                item={{
+                    label: '',
+                    value: 'active',
+                    checked: props.getValue()
+                }}
+                onChange={(e) => {
+                    return chatTestChangeMutation.mutate({chatId: props.row.original.id, isTest: e.target.checked})
+                }}
+            />
+        </>
+    }
+
     const detailsView = (props: any) => (
         <Button
             appearance="text"
@@ -574,8 +636,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     }
                 },
                 {
-                  id: `customerSupportFullName`,
-                  header: t('chat.history.csaName') ?? '',
+                    id: `customerSupportFullName`,
+                    header: t('chat.history.csaName') ?? '',
                 }
             ),
             columnHelper.accessor(
@@ -660,11 +722,19 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             }));
         }
 
+        if (testMessageEnabled) {
+            columns.splice(4, 0, columnHelper.accessor('istest', {
+                id: 'istest',
+                header: t('global.test') ?? '',
+                cell: markConversationAsTest
+            }));
+        }
+
         return columns;
-    }, [t, showEmail])
+    }, [t, showEmail, testMessageEnabled])
 
     const getSortingString = () => {
-        if(sorting && sorting.length > 0) {
+        if (sorting && sorting.length > 0) {
             const sortingObject = sorting[0];
             const sortingString = t('sorting.sorting');
             const orderingString = t(`sorting.${sortingObject.desc ? 'desc' : 'asc'}`);
@@ -675,7 +745,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         }
     }
 
-    const getColumnTranslation = (column: string) : string => {
+    const getColumnTranslation = (column: string): string => {
         switch (column) {
             case 'endUserId':
                 return t('global.idCode') ?? ''
@@ -703,6 +773,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 return 'www'
             case 'id':
                 return 'id';
+            case 'istest':
+                return t('global.test') ?? ''
             default:
                 return '';
         }
@@ -749,6 +821,120 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         );
     };
 
+    const mapChatsToExportRows = (
+        chats: ChatType[],
+        allColumns: any[],
+        selectedColumns: string[],
+        t: (key: string) => string
+    ): ExportResult => {
+        const activeColumns =
+            selectedColumns.length > 0
+                ? allColumns.filter(
+                    (col) => col.id && col.id !== 'detail' && selectedColumns.includes(col.id)
+                )
+                : allColumns.filter((col) => col.id && col.id !== 'detail');
+
+        const headers = activeColumns.map(
+            (col) => getColumnTranslation(col.id) || col.header || col.id
+        );
+
+        const rows = chats.map((chat) =>
+            activeColumns.map((col) => {
+                let rawValue: any = null;
+
+                if (typeof col.accessorFn === 'function') {
+                    rawValue = col.accessorFn(chat, 0);
+                } else if (typeof col.accessorKey === 'string') {
+                    rawValue = (chat as any)[col.accessorKey];
+                }
+
+                let processedValue: any = rawValue;
+                switch (col.id) {
+                    case 'created':
+                    case 'ended':
+                        processedValue = rawValue
+                            ? format(
+                                new Date(rawValue),
+                                'dd.MM.yyyy HH:mm:ss',
+                                i18n.language === 'et' ? {locale: et} : undefined
+                            )
+                            : '';
+                        break;
+                    case 'contactsMessage':
+                        processedValue = rawValue ? t('global.yes') : t('global.no');
+                        break;
+                    case 'feedbackRating':
+                        processedValue = rawValue != null ? `${rawValue}/10` : '';
+                        break;
+                    case 'status':
+                        processedValue =
+                            chat.status === CHAT_STATUS.ENDED
+                                ? t('chat.plainEvents.' + (chat.lastMessageEvent ?? ''))
+                                : '';
+                        break;
+                    case 'endUserName':
+                        processedValue = `${chat.endUserFirstName ?? ''} ${chat.endUserLastName ?? ''}`;
+                        break;
+                    default:
+                        processedValue =
+                            typeof rawValue === 'object' ? JSON.stringify(rawValue) : rawValue ?? '';
+                }
+
+                return processedValue;
+            })
+        );
+
+        const chatIds = chats.map((c) => c.id);
+
+        return {headers, rows, chatIds};
+    };
+
+
+    const downloadChatHistory = async () => {
+        setLoading(true);
+        try {
+            let sortBy = 'created desc';
+            if (sorting.length > 0) {
+                const sortType = sorting[0].desc ? 'desc' : 'asc';
+                sortBy = `${sorting[0].id} ${sortType}`;
+            }
+
+            const chats = await apiDev.post('agents/chats/ended', {
+                customerSupportIds: passedCustomerSupportIds,
+                startDate: formatISO(startOfDay(new Date(startDate))),
+                endDate: formatISO(endOfDay(new Date(endDate))),
+                urls: getDomainsArray(currentDomains),
+                page: 1,
+                page_size: 1000,
+                sorting: sortBy,
+                search,
+            });
+
+            const {headers, rows, chatIds} = mapChatsToExportRows(
+                chats.data.response,
+                endedChatsColumns,
+                selectedColumns,
+                t
+            );
+
+            const response = await apiDev.post('chats/ended/download', {
+                headers, rows, chatIds
+            });
+
+
+            await saveFile(
+                response.data.base64String,
+                'history.xlsx',
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+            );
+
+        } catch (error) {
+            console.error('Error getting CSV file:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
     const endUserFullName = getUserName();
 
     if (!filteredEndedChatsList) return <>Loading... {{filteredEndedChatsList}} something is wrong </>;
@@ -759,6 +945,15 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 <h1>{t('chat.history.title')}</h1>
             )}
 
+            {showDownload && (
+                <div>
+                    <Button appearance={"primary"} onClick={downloadChatHistory}>
+                        {loading && <CgSpinner className="spinner"/>}
+                        {!loading && t('files.download_xlsx')}
+                    </Button>
+                </div>
+            )}
+
             <Card>
                 <Track gap={16}>
                     {displaySearchBar && (
@@ -902,7 +1097,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </Button>
                 </div>)
             }
-            <div className="card-drawer-container" style={{ height: '100%', overflow: 'auto' }}>
+            <div className="card-drawer-container" style={{height: '100%', overflow: 'auto'}}>
                 <div className="card-wrapper">
                     <Card>
                         <DataTable

package/ui-components/FormElements/FormCheckbox/FormCheckbox.scss

@@ -17,6 +17,8 @@
   }
 
   &__item {
+    position: relative;
+
     input[type=checkbox] {
       display: none;
 
@@ -53,5 +55,18 @@
         }
       }
     }
+
+    &--nolabel {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      &::before {
+        position: static !important;
+        transform: none !important;
+        margin: 0;
+      }
+    }
   }
-}
+}

package/ui-components/FormElements/FormCheckbox/index.tsx

@@ -6,6 +6,7 @@ type FormCheckboxType = InputHTMLAttributes<HTMLInputElement> & {
     label: string;
     name: string;
     hideLabel?: boolean;
+    emptyItem?: boolean;
     item: {
         label: string;
         value: string;
@@ -18,6 +19,7 @@ const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxType>((
         label,
         name,
         hideLabel,
+        emptyItem,
         item,
         ...rest
     },
@@ -28,9 +30,13 @@ const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxType>((
     return (
         <div className='checkbox'>
             {label && !hideLabel && <label className='checkbox__label'>{label}</label>}
-            <div className='checkbox__item'>
+            <div className={`checkbox__item ${!emptyItem ? "checkbox__item--nolabel" : ""}`}>
                 <input ref={ref} type='checkbox' name={name} id={uid} value={item.value} defaultChecked={item.checked} {...rest} />
-                <label htmlFor={uid}>{item.label}</label>
+                {emptyItem ? (
+                    <label htmlFor={uid} className="checkbox__item--nolabel" />
+                ) : (
+                    <label htmlFor={uid}>{item.label}</label>
+                )}
             </div>
         </div>
     );

package/utils/multiDomain-utils.ts

@@ -1,7 +1,5 @@
-import useStore from "../store";
-
 export const getDomainsArray = (currentDomains) => {
-    const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN.toLowerCase() === 'true';
+    const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN?.toLowerCase() === 'true';
     const userDomains = currentDomains || [];
 
     return multiDomainEnabled ? (userDomains?.length > 0 ? userDomains : [null]) : [];