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

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.59] - 05.06.2026
+
+- Quality measurements in chat history view
+- Column sorting and filtering
+- Analytics: theme, follow up action, response quality
+
+## [0.0.58] - 25.05.2026
+
+- Properly render mcq selected button
+
 ## [0.0.57] - 14.05.2026
 
 - Added authenticated person to chosen columns list

package/package.json

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

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

@@ -9,10 +9,29 @@
     gap: 24px;
 }
 
+.history-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.history-header-combobox {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.data-table th:has(.history-header-combobox .select--open) {
+  z-index: 10001 !important;
+}
+
 .card-drawer-container {
   display: flex;
   width: 100%;
-  height: 100vh;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
   box-sizing: border-box;
 }
 
@@ -57,7 +76,7 @@
 
 .drawer-container {
   flex: 1;
-  height: 100%;
+  min-height: 0;
   overflow-y: auto;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
   border: 1px solid get-color(black-coral-2);
@@ -79,7 +98,13 @@
   font-size: $veera-font-size-80;
   gap: 4px;
   overflow-y: auto;
-  padding: get-spacing(haapsalu);
+  position: relative;
+
+  .side-meta__content {
+    display: grid;
+    gap: 4px;
+    padding: get-spacing(haapsalu);
+  }
 }
 
 .spinner {
@@ -87,6 +112,11 @@
 }
 
 .history-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
   &--loading {
     opacity: 0.5;
     pointer-events: none;

package/templates/history-page/src/components/ChatMetadataPanel/ChatMetadataPanel.scss

@@ -0,0 +1,18 @@
+@import 'src/styles/settings/variables/typography';
+
+.metadata-item {
+  &__value {
+    font-size: $veera-font-size-80;
+  }
+  &__meta {
+    font-size: $veera-font-size-70;
+    color: #686B78;
+  }
+}
+
+.divider {
+  height: 1px;
+  background-color: #686B78;
+  width: 100%;
+  margin: 16px 0;
+}

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

@@ -0,0 +1,206 @@
+import { format } from "date-fns";
+import { et } from "date-fns/locale";
+import { ComponentProps, FC, PropsWithChildren, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Chat as ChatType } from "../../../../../types/chat";
+
+import './ChatMetadataPanel.scss';
+import { CharMeasurementType } from "../../types";
+
+type ChatMetadataPanelProps = PropsWithChildren<{
+  readonly chat: ChatType
+  readonly chatMeasurments: ComponentProps<typeof Measurements>['measurments'];
+}>;
+
+const formatMetaDate = (date: string) => format(
+  new Date(date),
+  'd.MMMM yyyy HH:mm:ss',
+  {
+    locale: et,
+  }
+).toLowerCase();
+
+const formatAuthor = (value?: string) => value ? `(${value})` : '';
+
+const formatMeta = (date?: string, author?: string) => {
+  const formattedDate = date ? formatMetaDate(date) : '';
+  const formattedAuthor = formatAuthor(author);
+
+  return [formattedDate, formattedAuthor].filter(Boolean).join(' ');
+};
+
+const ChatMetadataPanel: FC<ChatMetadataPanelProps> = ({ chat, chatMeasurments, children }) => {
+  const { t } = useTranslation();
+
+  const endUserFullName = useMemo(() => {
+    return chat.endUserFirstName !== '' &&
+      chat?.endUserLastName !== ''
+      ? `${chat.endUserFirstName} ${chat.endUserLastName}`
+      : t('global.anonymous');
+  }, [chat, t]);
+
+  const commentMeta = useMemo(
+    () => formatMeta(chat.commentAddedDate, chat.commentAuthor),
+    [chat.commentAddedDate, chat.commentAuthor]
+  );
+
+  const statusMeta = useMemo(
+    () => formatMeta(chat.lastMessageTimestamp, chat.userDisplayName),
+    [chat.lastMessageTimestamp, chat.userDisplayName]
+  );
+  
+  return <>
+    <div className="side-meta">
+      <div className="side-meta__content">
+        <MetadataItem label="ID" value={chat.id} />
+        <MetadataItem label={t('chat.endUser')} value={endUserFullName} />
+        {chat.endUserId && (
+          <MetadataItem label={t('chat.endUserId')} value={chat.endUserId ?? ''} />
+        )}
+        {chat.endUserEmail && (
+          <MetadataItem label={t('chat.endUserEmail')} value={chat.endUserEmail} />
+        )}
+        {chat.endUserPhone && (
+          <MetadataItem label={t('chat.endUserPhoneNumber')} value={chat.endUserPhone} />
+        )}
+        {chat.customerSupportDisplayName && (
+          <MetadataItem label={t('chat.csaName')} value={chat.customerSupportDisplayName} />
+        )}
+        <MetadataItem
+          label={t('chat.startedAt')}
+          value={format(
+            new Date(chat.created),
+            'dd. MMMM Y HH:mm:ss',
+            {
+              locale: et,
+            }
+          ).toLowerCase()}
+        />
+        <MetadataItem label={t('chat.device')} value={chat.endUserOs ?? ''} />
+        <MetadataItem label={t('chat.location')} value={chat.endUserUrl ?? ''} />
+        {chat.comment && (
+          <MetadataItem
+            label={t('chat.history.comment')}
+            value={chat.comment}
+            meta={commentMeta}
+          />
+        )}
+        {chat.lastMessageEvent && (
+          <MetadataItem
+            label={t('global.status')}
+            value={t('chat.plainEvents.' + chat.lastMessageEvent)}
+            meta={statusMeta}
+          />
+        )}
+        <Measurements measurments={chatMeasurments} />
+      </div>
+      {children}
+    </div>
+  </>;
+};
+
+const Measurements: FC<{
+  readonly measurments: CharMeasurementType[];
+}> = ({ measurments }) => {
+  const { t } = useTranslation();
+
+  const groupedMeasurements = useMemo(() => {
+    const typeOrder: CharMeasurementType['type'][] = [
+      'THEME',
+      'QUALITY',
+      'FOLLOW_UP_ACTION',
+    ];
+
+    const grouped = measurments.reduce<
+      Partial<
+        Record<
+          CharMeasurementType['type'],
+          Record<
+            string,
+            {
+              createdAt: string;
+              authorDisplayName: string;
+              values: string[];
+            }
+          >
+        >
+      >
+    >((acc, item) => {
+      acc[item.type] ??= {};
+
+      acc[item.type]![item.createdAt] ??= {
+        createdAt: item.createdAt,
+        authorDisplayName: item.authorDisplayName,
+        values: [],
+      };
+
+      if (item.value) {
+        acc[item.type]![item.createdAt].values.push(item.value);
+      }
+
+      return acc;
+    }, {});
+
+    return typeOrder
+      .map((type) => ({
+        type,
+        items: Object.values(grouped[type] ?? {})
+          .map((item) => ({
+            createdAt: item.createdAt,
+            authorDisplayName: item.authorDisplayName,
+            value: item.values.join(', '),
+          }))
+          .sort(
+            (a, b) =>
+              new Date(b.createdAt).getTime() -
+              new Date(a.createdAt).getTime()
+          ),
+      }))
+      .filter(({ items }) => items.length > 0);
+  }, [measurments]);
+
+  const getLabel = (type: CharMeasurementType['type']) =>
+    ({
+      THEME: t('chat.quality.theme'),
+      QUALITY: t('chat.quality.responseQuality'),
+      FOLLOW_UP_ACTION: t('chat.quality.followUpAction'),
+    })[type];
+
+  return (
+    <>
+      <div className="divider"></div>
+
+      {groupedMeasurements.map(({ type, items }) =>
+        items.map((item, index) => (
+          <MetadataItem
+            labelStyle={{ marginTop: '12px' }}
+            key={`${type}-${item.createdAt}`}
+            {...((index === 0) ? { label: getLabel(type) } : {})}
+            value={item.value || t('chat.quality.selectionEmptied')}
+            meta={formatMeta(item.createdAt, item.authorDisplayName)}
+          />
+        ))
+      )}
+    </>
+  );
+};
+
+
+type MetadataItemProps = {
+  readonly label?: string;
+  readonly value: string;
+  readonly meta?: string;
+  readonly labelStyle?: React.CSSProperties;
+};
+
+const MetadataItem: FC<MetadataItemProps> = ({ label, value, meta, labelStyle }) => {
+  return <>
+    {label && <p style={labelStyle}>
+      <strong>{label}</strong>
+    </p>}
+    <p className="metadata-item__value">{value}</p>
+    {meta && <p className="metadata-item__meta">{meta}</p>}
+  </>;
+}
+
+export { ChatMetadataPanel };

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

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+type MetadataItemProps = {
+  readonly label: string,
+  readonly value: string
+};
+
+const ChatMetadataPanelItem: FC<MetadataItemProps> = ({ label, value }) => {
+  return <>
+    <p>
+      <strong>{label}</strong>
+    </p>
+    <p>{value}</p>
+  </>;
+}
+
+export { ChatMetadataPanelItem };

package/templates/history-page/src/components/FilterTag/FilterTag.scss

@@ -0,0 +1,42 @@
+@import 'src/styles/settings/variables/typography';
+
+.filter-tag {
+  align-items: center;
+  appearance: none;
+  background-color: #EAF6FF;
+  border-radius: 4px;
+  border: 1px solid #CCDEED;
+  color: #131317;
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: $veera-font-size-80;
+  line-height: $veera-font-size-100;
+  padding: 4px 4px 4px 8px;
+
+  &:hover {
+    background-color: #CCDEED;
+    border-color: #99BDDA;
+
+    .icon {
+      color: #004882;
+    }
+  }
+
+  &:focus {
+    background-color: #003662;
+    border-color: #003662;
+    color: #FFFFFF;
+
+    .icon {
+      color: #FFFFFF;
+    }
+  }
+  
+
+  .icon {
+    cursor: pointer;
+    margin-left: 4px;
+    color: #686B78;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { FC } from "react"
+import { MdClose } from "react-icons/md";
+import './FilterTag.scss';
+
+type FilterTagProps = {
+  readonly text: string;
+  readonly onClick: () => void;
+}
+
+export const FilterTag: FC<FilterTagProps> = ({ text, onClick }) => {
+  return <>
+    <button className="filter-tag" type="button" onClick={onClick}>
+      {text} <MdClose size="16" className="icon" />
+    </button>
+  </>
+}

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

@@ -0,0 +1,66 @@
+import { ComponentProps, FC } from 'react';
+
+import { FormCombobox } from '../../../../../ui-components';
+
+type HeaderComboboxBaseProps = {
+  readonly label: string;
+  readonly options?: ComponentProps<typeof FormCombobox>['options'];
+  readonly isSearchEnabled?: ComponentProps<typeof FormCombobox>['isSearchEnabled'];
+};
+
+type HeaderComboboxSingleProps = HeaderComboboxBaseProps & {
+  readonly multiple: false;
+  readonly value?: string;
+  readonly onChange: (value: string) => void;
+};
+
+type HeaderComboboxMultipleProps = HeaderComboboxBaseProps & {
+  readonly multiple?: true;
+  readonly value?: string[];
+  readonly onChange: (value: string[]) => void;
+};
+
+type HeaderComboboxProps = HeaderComboboxSingleProps | HeaderComboboxMultipleProps;
+
+const HeaderCombobox: FC<HeaderComboboxProps> = (props) => {
+  const {
+    label,
+    options = [],
+    isSearchEnabled = true,
+  } = props;
+  const sharedProps = {
+    hideInputStyle: true,
+    hideLabel: true,
+    label,
+    placeholder: label,
+    searchPlaceholder: label,
+    options,
+    isSearchEnabled,
+  };
+
+  return (
+    <span
+      className="history-header-combobox"
+      onMouseDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      {props.multiple === false ? (
+        <FormCombobox
+          {...sharedProps}
+          multiple={false}
+          value={props.value}
+          onChange={props.onChange}
+        />
+      ) : (
+        <FormCombobox
+          {...sharedProps}
+          multiple={true}
+          value={props.value}
+          onChange={props.onChange}
+        />
+      )}
+    </span>
+  );
+};
+
+export { HeaderCombobox };

package/templates/history-page/src/components/QualitySettings/QualitySettings.scss

@@ -0,0 +1,19 @@
+@import 'src/styles/tools/spacing';
+
+.title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #131317;
+}
+
+.quality-settings {
+  background-color: #ffffff;
+  border-top: 1px solid #e0e0e0;
+  bottom: 0;
+  gap: 8px;
+  margin-top: auto;
+  padding: get-spacing(haapsalu);
+  position: sticky;
+  width: 100%;
+}

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

@@ -0,0 +1,115 @@
+import { ComponentProps, FC } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { FormCombobox, Track } from '../../../../../ui-components';
+
+import './QualitySettings.scss';
+
+type QualitySettingsProps = {
+  readonly theme: {
+    readonly onChange: (value: string[]) => void;
+    readonly options: Pick<ComponentProps<typeof FormCombobox>, 'options'>['options'];
+    readonly value: string[];
+  };
+  readonly quality: {
+    readonly onChange: (value: string) => void;
+    readonly options: Pick<ComponentProps<typeof FormCombobox>, 'options'>['options'];
+    readonly value?: string;
+  };
+  readonly followUp: {
+    readonly onChange: (value: string) => void;
+    readonly options: Pick<ComponentProps<typeof FormCombobox>, 'options'>['options'];
+    readonly value?: string;
+  };
+};
+
+const QualitySettings: FC<QualitySettingsProps> = ({ theme, quality, followUp }) => {
+  const { t } = useTranslation();
+  const form = useForm<{
+    readonly theme: string[];
+    readonly quality: string;
+    readonly followUp: string;
+  }>({
+    defaultValues: {
+      theme: [],
+      quality: '',
+      followUp: '',
+    },
+    values: {
+      theme: theme.value,
+      quality: quality.value ?? '',
+      followUp: followUp.value ?? '',
+    },
+  });
+
+  const handleThemeChange = (value: string[], onChange: (value: string[]) => void) => {
+    onChange(value);
+    theme.onChange(value);
+  };
+
+  const handleQualityChange = (value: string, onChange: (value: string) => void) => {
+    onChange(value);
+    quality.onChange(value);
+  };
+
+  const handleFollowUpChange = (value: string, onChange: (value: string) => void) => {
+    onChange(value);
+    followUp.onChange(value);
+  };
+
+  return (
+    <Track
+      gap={8}
+      direction="vertical"
+      align="left"
+      className="quality-settings"
+    >
+      <p className="title">{t('chat.history.analysis')}</p>
+
+      <Controller
+        name="theme"
+        control={form.control}
+        render={({ field }) => (
+          <FormCombobox
+            multiple={true}
+            placeholder={t('chat.history.chooseConversationTheme')}
+            searchPlaceholder={t('chat.history.conversationTheme')}
+            options={theme.options}
+            value={field.value}
+            onChange={(value) => handleThemeChange(value, field.onChange)}
+            isSearchEnabled={true}
+          />
+        )}
+      />
+      <Controller
+        name="quality"
+        control={form.control}
+        render={({ field }) => (
+          <FormCombobox
+            placeholder={t('chat.history.chooseConversationResponseQuality')}
+            searchPlaceholder={t('chat.history.conversationResponseQuality')}
+            options={quality.options}
+            value={field.value}
+            onChange={(value) => handleQualityChange(value, field.onChange)}
+          />
+        )}
+      />
+      <Controller
+        name="followUp"
+        control={form.control}
+        render={({ field }) => (
+          <FormCombobox
+            placeholder={t('chat.history.chooseFollowUpAction')}
+            searchPlaceholder={t('chat.history.followUpAction')}
+            options={followUp.options}
+            value={field.value}
+            onChange={(value) => handleFollowUpChange(value, field.onChange)}
+          />
+        )}
+      />
+    </Track>
+  );
+};
+
+export { QualitySettings };

package/templates/history-page/src/components/SelectedFilterTags/SelectedFilterTags.scss

@@ -0,0 +1,36 @@
+@import 'src/styles/settings/variables/typography';
+
+.selected-filters__container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-columns: 24px 1fr auto;
+  margin-bottom: 16px;
+
+  .selected-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+
+    .selected-filters__label {
+      color: #686B78;
+      font-size: $veera-font-size-80;
+      line-height: $veera-font-size-250;
+      // max-height -> border-left is with correct height!
+      max-height: 24px;
+      padding-left: 4px;
+      white-space: nowrap;
+
+      &:not(:first-child):not(:last-child) {
+        border-left: 1px solid #878A97;
+      }
+    }
+
+    .selected-filters__items {
+      display: contents;
+    }
+  }
+
+  button {
+    align-self: start;
+  }
+}