Merge pull request buerokratt#720 from 1AhmedYasser/fixes-in-chat-history

KlviG · web-flow · commit 7fe477e8d12e · 2024-06-20T11:32:35.000+03:00
Fixes in chat history
diff --git a/DSL/Resql/get-cs-all-ended-chats.sql b/DSL/Resql/get-cs-all-ended-chats.sql
@@ -105,7 +105,7 @@ Detractors AS (
 	SELECT COUNT(rating) AS d FROM RatedChats WHERE rating <= 6
 ), 
 NPS AS (
-  SELECT ROUND(((p / (total * 1.0)) - (d / (total * 1.0))) * 100.0, 2) AS nps
+  SELECT ROUND(((p / (GREATEST(total, 1) * 1.0)) - (d / (GREATEST(total, 1) * 1.0))) * 100.0, 2) AS nps
   FROM RatedChatsCount
   CROSS JOIN Promoters
   CROSS JOIN Detractors
diff --git a/GUI/src/components/DataTable/index.tsx b/GUI/src/components/DataTable/index.tsx
@@ -14,6 +14,7 @@ import {
   TableMeta,
   Row,
   RowData, ColumnFiltersState,
+  ColumnPinningState,
 } from '@tanstack/react-table';
 import {
   RankingInfo,
@@ -43,6 +44,7 @@ type DataTableProps = {
   filterable?: boolean;
   pagination?: PaginationState;
   sorting?: SortingState;
+  columnPinning?: ColumnPinningState;
   setPagination?: (state: PaginationState) => void;
   setSorting?: (state: SortingState) => void;
   globalFilter?: string;
@@ -57,8 +59,9 @@ type DataTableProps = {
 type ColumnMeta = {
   meta: {
     size: number | string;
-  }
-}
+    sticky: 'left' | 'right';
+  };
+};
 
 type CustomColumnDef = ColumnDef<any> & ColumnMeta;
 
@@ -99,6 +102,7 @@ const DataTable: FC<DataTableProps> = (
     filterable,
     pagination,
     sorting,
+    columnPinning,
     setPagination,
     setSorting,
     globalFilter,
@@ -123,9 +127,14 @@ const DataTable: FC<DataTableProps> = (
       sorting,
       columnFilters,
       globalFilter,
+      columnPinning: columnPinning ?? {
+        left: [],
+        right: [],
+      },
       columnVisibility,
       ...{ pagination },
     },
+    enableColumnPinning: columnPinning != undefined ? true : false,
     meta,
     onColumnFiltersChange: setColumnFilters,
     onGlobalFilterChange: setGlobalFilter,
@@ -156,7 +165,10 @@ const DataTable: FC<DataTableProps> = (
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th key={header.id} style={{ width: header.column.columnDef.meta?.size }}>
+                <th key={header.id} style={{ width: header.column.columnDef.meta?.size, position: header.column.columnDef.meta?.sticky ? 'sticky' : undefined , 
+                  left: header.column.columnDef.meta?.sticky === 'left' ? `${header.column.getAfter('left') * 0.675}px` : undefined, 
+                  right: header.column.columnDef.meta?.sticky === 'right' ? `${header.column.getAfter('right') * 0.675}px` : undefined,
+                  backgroundColor: 'white', zIndex: header.column.columnDef.meta?.sticky ? 1 : 0 }}>
                   {header.isPlaceholder ? null : (
                       <Track gap={8}>
                         {sortable && header.column.getCanSort() && (
@@ -186,7 +198,10 @@ const DataTable: FC<DataTableProps> = (
         {table.getRowModel().rows.map((row) => (
           <tr key={row.id} style={table.options.meta?.getRowStyles(row)}>
             {row.getVisibleCells().map((cell) => (
-              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+              <td key={cell.id} style={{position: cell.column.columnDef.meta?.sticky ? 'sticky' : undefined , 
+                  left: cell.column.columnDef.meta?.sticky === 'left' ? `${cell.column.getAfter('left') * 0.675}px` : undefined, 
+                  right: cell.column.columnDef.meta?.sticky === 'right' ? `${cell.column.getAfter('right') * 0.675}px` : undefined,
+                  backgroundColor: 'white', zIndex: cell.column.columnDef.meta?.sticky ? 1 : 0}} >{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
             ))}
           </tr>
         ))}
diff --git a/GUI/src/pages/Chat/ChatHistory/index.tsx b/GUI/src/pages/Chat/ChatHistory/index.tsx
@@ -2,6 +2,7 @@ import { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@tanstack/react-query';
 import {
+  ColumnPinningState,
   createColumnHelper,
   PaginationState,
   SortingState,
@@ -62,6 +63,10 @@ const ChatHistory: FC = () => {
     pageSize: 10,
   });
   const [sorting, setSorting] = useState<SortingState>([]);
+  const columnPinning: ColumnPinningState = {
+    left: [],
+    right: ['detail'],
+  };
   const [totalPages, setTotalPages] = useState<number>(1);
   const [endedChatsList, setEndedChatsList] = useState<ChatType[]>([]);
   const [filteredEndedChatsList, setFilteredEndedChatsList] = useState<
@@ -271,23 +276,30 @@ const ChatHistory: FC = () => {
   };
 
   const commentView = (props: any) =>
-    props.getValue() && <Tooltip content={props.getValue()}>
-      <span onClick={() => copyValueToClipboard(props.getValue())} style={{ cursor: 'pointer' }}>
-        {props.getValue().length <= 30 ? props.getValue() : `${props.getValue()?.slice(0, 30)}...`}
-      </span>
-    </Tooltip>;
+    props.getValue() && (
+      <Tooltip content={props.getValue()}>
+        <span
+          onClick={() => copyValueToClipboard(props.getValue())}
+          style={{ cursor: 'pointer' }}
+        >
+          {props.getValue().length <= 30
+            ? props.getValue()
+            : `${props.getValue()?.slice(0, 30)}...`}
+        </span>
+      </Tooltip>
+    );
 
-  const feedbackTextView = (props: any) =>  {
+  const feedbackTextView = (props: any) => {
     const value = props.getValue() ?? '';
-    
+
     return (
       <Tooltip content={value}>
         <span style={{ minWidth: '250px' }}>
-        {value.length < 30 ? value : `${value?.slice?.(0, 30)}...`}
+          {value.length < 30 ? value : `${value?.slice?.(0, 30)}...`}
         </span>
       </Tooltip>
-    )
-  }
+    );
+  };
 
   const statusView = (props: any) => {
     const isLastMessageEvent =
@@ -300,7 +312,10 @@ const ChatHistory: FC = () => {
 
   const idView = (props: any) => (
     <Tooltip content={props.getValue()}>
-      <span onClick={() => copyValueToClipboard(props.getValue())} style={{ cursor: 'pointer' }}>
+      <span
+        onClick={() => copyValueToClipboard(props.getValue())}
+        style={{ cursor: 'pointer' }}
+      >
         {props.getValue().split('-')[0]}
       </span>
     </Tooltip>
@@ -324,8 +339,8 @@ const ChatHistory: FC = () => {
         cell: (props) =>
           format(
             new Date(props.getValue()),
-            'd. MMM yyyy HH:mm:ss',
-            i18n.language === 'et' ? { locale: et } : undefined,
+            'dd.MM.yyyy HH:mm:ss',
+            i18n.language === 'et' ? { locale: et } : undefined
           ),
       }),
       columnHelper.accessor('ended', {
@@ -334,8 +349,8 @@ const ChatHistory: FC = () => {
         cell: (props) =>
           format(
             new Date(props.getValue()),
-            'd. MMM yyyy HH:mm:ss',
-            i18n.language === 'et' ? { locale: et } : undefined,
+            'dd.MM.yyyy HH:mm:ss',
+            i18n.language === 'et' ? { locale: et } : undefined
           ),
       }),
       columnHelper.accessor('customerSupportDisplayName', {
@@ -366,12 +381,13 @@ const ChatHistory: FC = () => {
       columnHelper.accessor('feedbackRating', {
         id: 'feedbackRating',
         header: t('chat.history.rating') ?? '',
-        cell: (props) => props.getValue() && <span>{`${props.getValue()}/10`}</span>,
+        cell: (props) =>
+          props.getValue() && <span>{`${props.getValue()}/10`}</span>,
       }),
       columnHelper.accessor('feedbackText', {
         id: 'feedbackText',
         header: t('chat.history.feedback') ?? '',
-        cell: feedbackTextView
+        cell: feedbackTextView,
       }),
       columnHelper.accessor('status', {
         id: 'status',
@@ -404,6 +420,7 @@ const ChatHistory: FC = () => {
         cell: detailsView,
         meta: {
           size: '1%',
+          sticky: 'right',
         },
       }),
     ],
@@ -540,6 +557,7 @@ const ChatHistory: FC = () => {
           sortable
           columns={getFilteredColumns()}
           pagination={pagination}
+          columnPinning={columnPinning}
           sorting={sorting}
           setPagination={(state: PaginationState) => {
             if (
diff --git a/README.md b/README.md
@@ -76,6 +76,6 @@ For production deploying on kubernetes use this the variable [`REACT_APP_MENU_JS
 ```
 like this:
 ```
-            - name: REACT_APP_MENU_JSON
-              value: "[{\"id\":\"conversations\",\"label\":{\"et\":\"Vestlused\",\"en\":\"Conversations\"},\"path\":\"/chat\",\"children\":[{\"label\":{\"et\":\"Vastamata\",\"en\":\"Unanswered\"},\"path\":\"/unanswered\"},{\"label\":{\"et\":\"Aktiivsed\",\"en\":\"Active\"},\"path\":\"/active\"},{\"label\":{\"et\":\"Ootel\",\"en\":\"Pending\"},\"path\":\"/pending\"},{\"label\":{\"et\":\"Ajalugu\",\"en\":\"History\"},\"path\":\"/history\"}]},{\"id\":\"training\",\"label\":{\"et\":\"Treening\",\"en\":\"Training\"},\"path\":\"/training\",\"children\":[{\"label\":{\"et\":\"Treening\",\"en\":\"Training\"},\"path\":\"/training\",\"children\":[{\"label\":{\"et\":\"Teemad\",\"en\":\"Themes\"},\"path\":\"/training/intents\"},{\"hidden\":true,\"label\":{\"et\":\"Avalikud teemad\",\"en\":\"Public themes\"},\"path\":\"/training/common-intents\"},{\"label\":{\"et\":\"Teemade järeltreenimine\",\"en\":\"Post training themes\"},\"path\":\"/training/intents-followup-training\"},{\"label\":{\"et\":\"Vastused\",\"en\":\"Answers\"},\"path\":\"/training/responses\"},{\"label\":{\"et\":\"Kasutuslood\",\"en\":\"User Stories\"},\"path\":\"/training/stories\"},{\"hidden\":true,\"label\":{\"et\":\"Konfiguratsioon\",\"en\":\"Configuration\"},\"path\":\"/training/configuration\"},{\"label\":{\"et\":\"Vormid\",\"en\":\"Forms\"},\"path\":\"/training/forms\"},{\"label\":{\"et\":\"Mälukohad\",\"en\":\"Slots\"},\"path\":\"/training/slots\"},{\"hidden\":true,\"label\":{\"et\":\"Automatic Teenused\",\"en\":\"Automatic Services\"},\"path\":\"/auto-services\"}]},{\"label\":{\"et\":\"Ajaloolised vestlused\",\"en\":\"Historical conversations\"},\"path\":\"/history\",\"children\":[{\"label\":{\"et\":\"Ajalugu\",\"en\":\"History\"},\"path\":\"/history/history\"},{\"hidden\":true,\"label\":{\"et\":\"Pöördumised\",\"en\":\"Appeals\"},\"path\":\"/history/appeal\"}]},{\"label\":{\"et\":\"Mudelipank ja analüütika\",\"en\":\"Modelbank and analytics\"},\"path\":\"/analytics\",\"children\":[{\"label\":{\"et\":\"Teemade ülevaade\",\"en\":\"Overview of topics\"},\"path\":\"/analytics/overview\"},{\"label\":{\"et\":\"Mudelite võrdlus\",\"en\":\"Comparison of models\"},\"path\":\"/analytics/models\"},{\"hidden\":true,\"label\":{\"et\":\"Testlood\",\"en\":\"testTracks\"},\"path\":\"/analytics/testcases\"}]},{\"label\":{\"et\":\"Treeni uus mudel\",\"en\":\"Train new model\"},\"path\":\"/train-new-model\"}]},{\"id\":\"analytics\",\"label\":{\"et\":\"Analüütika\",\"en\":\"Analytics\"},\"path\":\"/analytics\",\"children\":[{\"label\":{\"et\":\"Ülevaade\",\"en\":\"Overview\"},\"path\":\"/overview\"},{\"label\":{\"et\":\"Vestlused\",\"en\":\"Chats\"},\"path\":\"/chats\"},{\"label\":{\"et\":\"Tagasiside\",\"en\":\"Feedback\"},\"path\":\"/feedback\"},{\"label\":{\"et\":\"Nõustajad\",\"en\":\"Advisors\"},\"path\":\"/advisors\"},{\"label\":{\"et\":\"Avaandmed\",\"en\":\"Reports\"},\"path\":\"/reports\"}]},{\"id\":\"services\",\"hidden\":true,\"label\":{\"et\":\"Teenused\",\"en\":\"Services\"},\"path\":\"/services\",\"children\":[{\"label\":{\"et\":\"Ülevaade\",\"en\":\"Overview\"},\"path\":\"/overview\"},{\"label\":{\"et\":\"Uus teenus\",\"en\":\"New Service\"},\"path\":\"/newService\"},{\"label\":{\"et\":\"Automatic Teenused\",\"en\":\"Automatic Services\"},\"path\":\"/auto-services\"},{\"label\":{\"et\":\"Probleemsed teenused\",\"en\":\"Faulty Services\"},\"path\":\"/faultyServices\"}]},{\"id\":\"settings\",\"label\":{\"et\":\"Haldus\",\"en\":\"Administration\"},\"path\":\"/settings\",\"children\":[{\"label\":{\"et\":\"Kasutajad\",\"en\":\"Users\"},\"path\":\"/users\"},{\"label\":{\"et\":\"Vestlusbot\",\"en\":\"Chatbot\"},\"path\":\"/chatbot\",\"children\":[{\"label\":{\"et\":\"Seaded\",\"en\":\"Settings\"},\"path\":\"/chatbot/settings\"},{\"label\":{\"et\":\"Tervitussõnum\",\"en\":\"Welcome message\"},\"path\":\"/chatbot/welcome-message\"},{\"label\":{\"et\":\"Välimus ja käitumine\",\"en\":\"Appearance and behavior\"},\"path\":\"/chatbot/appearance\"},{\"label\":{\"et\":\"Erakorralised teated\",\"en\":\"Emergency notices\"},\"path\":\"/chatbot/emergency-notices\"}]},{\"label\":{\"et\":\"Asutuse tööaeg\",\"en\":\"Office opening hours\"},\"path\":\"/working-time\"},{\"label\":{\"et\":\"Sessiooni pikkus\",\"en\":\"Session length\"},\"path\":\"/session-length\"}]},{\"id\":\"monitoring\",\"hidden\":true,\"label\":{\"et\":\"Seire\",\"en\":\"Monitoring\"},\"path\":\"/monitoring\",\"children\":[{\"label\":{\"et\":\"Aktiivaeg\",\"en\":\"Working hours\"},\"path\":\"/uptime\"}]}]"
+- name: REACT_APP_MENU_JSON
+  value: "[{\"id\":\"conversations\",\"label\":{\"et\":\"Vestlused\",\"en\":\"Conversations\"},\"path\":\"/chat\",\"children\":[{\"label\":{\"et\":\"Vastamata\",\"en\":\"Unanswered\"},\"path\":\"/unanswered\"},{\"label\":{\"et\":\"Aktiivsed\",\"en\":\"Active\"},\"path\":\"/active\"},{\"label\":{\"et\":\"Ootel\",\"en\":\"Pending\"},\"path\":\"/pending\"},{\"label\":{\"et\":\"Ajalugu\",\"en\":\"History\"},\"path\":\"/history\"}]},{\"id\":\"training\",\"label\":{\"et\":\"Treening\",\"en\":\"Training\"},\"path\":\"/training\",\"children\":[{\"label\":{\"et\":\"Treening\",\"en\":\"Training\"},\"path\":\"/training\",\"children\":[{\"label\":{\"et\":\"Teemad\",\"en\":\"Themes\"},\"path\":\"/training/intents\"},{\"hidden\":true,\"label\":{\"et\":\"Avalikud teemad\",\"en\":\"Public themes\"},\"path\":\"/training/common-intents\"},{\"label\":{\"et\":\"Teemade järeltreenimine\",\"en\":\"Post training themes\"},\"path\":\"/training/intents-followup-training\"},{\"label\":{\"et\":\"Vastused\",\"en\":\"Answers\"},\"path\":\"/training/responses\"},{\"label\":{\"et\":\"Kasutuslood\",\"en\":\"User Stories\"},\"path\":\"/training/stories\"},{\"hidden\":true,\"label\":{\"et\":\"Konfiguratsioon\",\"en\":\"Configuration\"},\"path\":\"/training/configuration\"},{\"label\":{\"et\":\"Vormid\",\"en\":\"Forms\"},\"path\":\"/training/forms\"},{\"label\":{\"et\":\"Mälukohad\",\"en\":\"Slots\"},\"path\":\"/training/slots\"},{\"hidden\":true,\"label\":{\"et\":\"Automatic Teenused\",\"en\":\"Automatic Services\"},\"path\":\"/auto-services\"}]},{\"label\":{\"et\":\"Ajaloolised vestlused\",\"en\":\"Historical conversations\"},\"path\":\"/history\",\"children\":[{\"label\":{\"et\":\"Ajalugu\",\"en\":\"History\"},\"path\":\"/history/history\"},{\"hidden\":true,\"label\":{\"et\":\"Pöördumised\",\"en\":\"Appeals\"},\"path\":\"/history/appeal\"}]},{\"label\":{\"et\":\"Mudelipank ja analüütika\",\"en\":\"Modelbank and analytics\"},\"path\":\"/analytics\",\"children\":[{\"label\":{\"et\":\"Teemade ülevaade\",\"en\":\"Overview of topics\"},\"path\":\"/analytics/overview\"},{\"label\":{\"et\":\"Mudelite võrdlus\",\"en\":\"Comparison of models\"},\"path\":\"/analytics/models\"},{\"hidden\":true,\"label\":{\"et\":\"Testlood\",\"en\":\"testTracks\"},\"path\":\"/analytics/testcases\"}]},{\"label\":{\"et\":\"Treeni uus mudel\",\"en\":\"Train new model\"},\"path\":\"/train-new-model\"}]},{\"id\":\"analytics\",\"label\":{\"et\":\"Analüütika\",\"en\":\"Analytics\"},\"path\":\"/analytics\",\"children\":[{\"label\":{\"et\":\"Ülevaade\",\"en\":\"Overview\"},\"path\":\"/overview\"},{\"label\":{\"et\":\"Vestlused\",\"en\":\"Chats\"},\"path\":\"/chats\"},{\"label\":{\"et\":\"Tagasiside\",\"en\":\"Feedback\"},\"path\":\"/feedback\"},{\"label\":{\"et\":\"Nõustajad\",\"en\":\"Advisors\"},\"path\":\"/advisors\"},{\"label\":{\"et\":\"Avaandmed\",\"en\":\"Reports\"},\"path\":\"/reports\"}]},{\"id\":\"services\",\"hidden\":true,\"label\":{\"et\":\"Teenused\",\"en\":\"Services\"},\"path\":\"/services\",\"children\":[{\"label\":{\"et\":\"Ülevaade\",\"en\":\"Overview\"},\"path\":\"/overview\"},{\"label\":{\"et\":\"Uus teenus\",\"en\":\"New Service\"},\"path\":\"/newService\"},{\"label\":{\"et\":\"Automatic Teenused\",\"en\":\"Automatic Services\"},\"path\":\"/auto-services\"},{\"label\":{\"et\":\"Probleemsed teenused\",\"en\":\"Faulty Services\"},\"path\":\"/faultyServices\"}]},{\"id\":\"settings\",\"label\":{\"et\":\"Haldus\",\"en\":\"Administration\"},\"path\":\"/settings\",\"children\":[{\"label\":{\"et\":\"Kasutajad\",\"en\":\"Users\"},\"path\":\"/users\"},{\"label\":{\"et\":\"Vestlusbot\",\"en\":\"Chatbot\"},\"path\":\"/chatbot\",\"children\":[{\"label\":{\"et\":\"Seaded\",\"en\":\"Settings\"},\"path\":\"/chatbot/settings\"},{\"label\":{\"et\":\"Tervitussõnum\",\"en\":\"Welcome message\"},\"path\":\"/chatbot/welcome-message\"},{\"label\":{\"et\":\"Välimus ja käitumine\",\"en\":\"Appearance and behavior\"},\"path\":\"/chatbot/appearance\"},{\"label\":{\"et\":\"Erakorralised teated\",\"en\":\"Emergency notices\"},\"path\":\"/chatbot/emergency-notices\"}]},{\"label\":{\"et\":\"Asutuse tööaeg\",\"en\":\"Office opening hours\"},\"path\":\"/working-time\"},{\"label\":{\"et\":\"Sessiooni pikkus\",\"en\":\"Session length\"},\"path\":\"/session-length\"}]},{\"id\":\"monitoring\",\"hidden\":true,\"label\":{\"et\":\"Seire\",\"en\":\"Monitoring\"},\"path\":\"/monitoring\",\"children\":[{\"label\":{\"et\":\"Aktiivaeg\",\"en\":\"Working hours\"},\"path\":\"/uptime\"}]}]"
 ```
