@buerokratt-ria/common-gui-components 0.0.46 → 0.0.48

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.48] - 23.04.2026
+
+- Added chats preserve feature
+
+## [0.0.47] - 21.04.2026
+
+- Added total chat counter under chat history
+
 ## [0.0.46] - 10.04.2026
 
 - Fixed CHAT_STATUS import

package/package.json

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

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

@@ -106,6 +106,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         right: ['detail'],
     };
     const [totalPages, setTotalPages] = useState<number>(1);
+    const [totalCount, setTotalCount] = useState<number | null>(null);
     const [initialLoad, setInitialLoad] = useState<boolean>(true);
     const [filteredEndedChatsList, setFilteredEndedChatsList] = useState<
         ChatType[]
@@ -331,6 +332,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 });
             filterChatsList(res.data.response ?? []);
             setTotalPages(res?.data?.response[0]?.totalPages ?? 1);
+            setTotalCount(res?.data?.response[0]?.totalCount ?? null);
         },
     });
 
@@ -389,6 +391,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             columns.splice(5, 0, {label: t('global.test'), value: 'istest'});
         }
 
+        columns.splice(5, 0, {label: t('global.preserve'), value: 'isPreserve'});
+
         return columns;
     }, [t, showEmail, testMessageEnabled])
 
@@ -506,6 +510,31 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         },
     });
 
+    const chatPreserveChangeMutation = useMutation({
+        mutationFn: (data: {
+            chatId: string | number;
+            isPreserve: boolean;
+        }) => apiDev.post('chats/mark-preserve', data),
+        onSuccess: (res, {chatId, isPreserve}) => {
+            const updatedChatList = filteredEndedChatsList.map((chat) =>
+                chat.id === chatId ? {...chat, isPreserve: isPreserve} : 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) => {
@@ -588,6 +617,19 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
       }
     };
 
+    const updateChatPreserve = function (chatId: string, isPreserve: boolean) {
+      setFilteredEndedChatsList((prevChats) =>
+        prevChats.map((chat) => (chat.id === chatId ? ({ ...chat, isPreserve: isPreserve } as ChatType) : chat))
+      );
+
+      if (selectedChat?.id === chatId) {
+        setSelectedChat({
+          ...selectedChat,
+          isPreserve: isPreserve,
+        } as ChatType);
+      }
+    };
+
     const markConversationAsTest = (props: any) => {
       const chatId = props.row.original.id;
       const newIsTestValue = props.getValue();
@@ -611,6 +653,29 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
       );
     };
 
+    const markConversationAsPreserve = (props: any) => {
+      const chatId = props.row.original.id;
+      const newIsPreserveValue = props.getValue();
+      return (
+        <FormCheckbox
+          checked={newIsPreserveValue}
+          label={""}
+          hideLabel
+          emptyItem={true}
+          name="active"
+          item={{
+            label: "",
+            value: "active",
+          }}
+          onChange={(e) => {
+            const isPreserve = e.target.checked;
+            updateChatPreserve(chatId, isPreserve);
+            chatPreserveChangeMutation.mutate({ chatId, isPreserve });
+          }}
+        />
+      );
+    };
+
     const detailsView = (props: any) => (
         <Button
             appearance="text"
@@ -763,6 +828,12 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             }));
         }
 
+        columns.splice(4, 0, columnHelper.accessor('isPreserve', {
+            id: 'isPreserve',
+            header: t('global.preserve') ?? '',
+            cell: markConversationAsPreserve
+        }));
+
         return columns;
     }, [t, showEmail, testMessageEnabled])
 
@@ -808,6 +879,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 return 'id';
             case 'istest':
                 return t('global.test') ?? ''
+            case 'isPreserve':
+                return t('global.preserve') ?? ''
             default:
                 return '';
         }
@@ -972,7 +1045,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     return (
         <>
             {displayTitle && (
-                <h1>{t('chat.history.title')}</h1>
+                <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
             )}
 
             {showDownload && (
@@ -1191,6 +1264,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             }}
                             isClientSide={false}
                             pagesCount={totalPages}
+                            totalCountLabel={totalCount === null ? null : `${t('chat.history.title')} ${totalCount.toLocaleString('et-EE')}`}
                         />
                     </Card>
                 </div>

package/types/chat.ts

@@ -88,9 +88,11 @@ export interface Chat {
     nps?: number;
     userDisplayName?: string;
     istest?: boolean;
+    isPreserve?: boolean;
     isFiveRatingScale?: string;
     allCsa?: string[];
     totalPages?: number;
+    totalCount?: number;
 }
 export interface GroupedChat {
     myChats: Chat[];

package/ui-components/DataTable/index.tsx

@@ -55,6 +55,7 @@ type DataTableProps = {
     pagesCount?: number;
     meta?: TableMeta<any>;
     selectedRow?: (row: Row<any>) => boolean;
+    totalCountLabel?: string | null;
 };
 
 type ColumnMeta = {
@@ -115,6 +116,7 @@ const DataTable: FC<DataTableProps> = ({
                                            pagesCount,
                                            meta,
                                            selectedRow,
+                                           totalCountLabel,
                                        }) => {
     const id = useId();
     const { t } = useTranslation();
@@ -408,6 +410,7 @@ const DataTable: FC<DataTableProps> = ({
                             </div>
                         )}
                     <div className="data-table__page-size">
+                        {totalCountLabel && <><span>{totalCountLabel}</span><span>|</span></>}
                         <label htmlFor={id}>{t('global.resultCount')}</label>
                         <select
                             id={id}
@@ -416,7 +419,7 @@ const DataTable: FC<DataTableProps> = ({
                                 table.setPageSize(Number(e.target.value));
                             }}
                         >
-                            {[10, 20, 30, 40, 50].map((pageSize) => (
+                            {[10, 20, 30, 40, 50, 100, 150, 200].map((pageSize) => (
                                 <option key={pageSize} value={pageSize}>
                                     {pageSize}
                                 </option>