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

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.25",
+  "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/index.tsx

@@ -2,10 +2,11 @@ import React, {FC, PropsWithChildren, useEffect, useMemo, useRef, useState} from
 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,
@@ -35,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;
@@ -42,6 +44,7 @@ type HistoryProps = {
     toastContext: ToastContextType | null;
     onMessageClick?: (message: any) => void;
     showComment?: boolean;
+    showDownload?: boolean;
     showEmail?: boolean;
     showSortingLabel?: boolean;
     showStatus?: boolean;
@@ -52,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,
@@ -111,6 +121,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     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();
@@ -810,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 </>;
@@ -820,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 && (