@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/Chat/Chat.scss

@@ -0,0 +1,447 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.active-chat {
+  $self: &;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  height: 100%;
+
+  &__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 288px;
+  }
+
+  &__header {
+    padding: get-spacing(haapsalu);
+    background-color: get-color(extra-light);
+    border-bottom: 1px solid get-color(black-coral-2);
+  }
+
+  &__group-wrapper {
+    flex: 1;
+    padding: get-spacing(haapsalu) get-spacing(haapsalu) 0;
+    overflow: auto;
+    overflow-anchor: none;
+
+    #anchor {
+      overflow-anchor: auto;
+      height: 1px;
+      margin-top: 16px;
+    }
+  }
+
+  &__toolbar {
+    background-color: get-color(extra-light);
+    border-top: 1px solid get-color(black-coral-2);
+    padding: get-spacing(paldiski);
+    position: relative;
+  }
+
+  &__toolbar-actions {
+    display: flex;
+    gap: 8px;
+    position: relative;
+    right: 12px;
+    left: 5px;
+    top: 0px;
+    bottom: 8px;
+    flex-flow: wrap;
+
+    .btn {
+      padding-left: 20px;
+      padding-right: 20px;
+      padding-top: 9.5px;
+      padding-bottom: 9.5px;
+      border-radius: 15px;
+    }
+  }
+
+  &__side {
+    flex: 0 0 288px;
+    height: 100%;
+    overflow: auto;
+    border-left: 1px solid get-color(black-coral-2);
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+
+    .btn {
+      justify-content: center;
+    }
+  }
+
+  &__side-actions,
+  &__side-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: get-spacing(haapsalu);
+
+    .csa-away {
+      font-size: $veera-font-size-80;
+      line-height: $veera-line-height-500;
+      color: get-color(black-coral-12);
+    }
+  }
+
+  &__side-meta {
+    font-size: $veera-font-size-80;
+    line-height: $veera-line-height-500;
+    color: get-color(black-coral-12);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-left: 56px;
+    position: relative;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    &--event {
+      padding-left: 0;
+      #{$self} {
+        &__event-message {
+          display: flex;
+          position: relative;
+          isolation: isolate;
+          padding: 6px 0;
+
+          p {
+            color: get-color(black-coral-12);
+            font-size: $veera-font-size-80;
+            line-height: $veera-line-height-500;
+            padding: 4px 8px 4px 0;
+            background-color: get-color(white);
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            height: 1px;
+            background-color: get-color(black-coral-2);
+            position: absolute;
+            top: 50%;
+            left: 56px;
+            right: 0;
+            transform: translateY(-50%);
+            z-index: -1;
+          }
+        }
+      }
+    }
+
+    &--buerokratt,
+    &--chatbot {
+      #{$self} {
+        &__group-initials {
+          background-color: get-color(sapphire-blue-10);
+          left: 0;
+        }
+
+        &__group-name {
+          color: get-color(sapphire-blue-10);
+          text-align: left;
+          margin-left: 0;
+          font-size: $veera-font-size-100;
+        }
+
+        &__messages {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          align-items: flex-start;
+        }
+
+        &__message-text {
+          background-color: get-color(sapphire-blue-10);
+          color: get-color(white);
+
+          :any-link {
+            background: url('../../static/icons/link-external-blue.svg')
+            no-repeat right center;
+            padding-right: 1.25em;
+            color: blue;
+            text-decoration: underline;
+          }
+
+          &:hover {
+            background-color: get-color(sapphire-blue-13);
+          }
+        }
+      }
+    }
+
+    &--backoffice-user {
+      #{$self} {
+        &__group-initials {
+          background-color: get-color(black-coral-10);
+          color: get-color(white);
+          left: 0;
+        }
+
+        &__group-name {
+          text-align: left;
+          margin-left: 0;
+          font-size: $veera-font-size-100;
+        }
+
+        &__messages {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          align-items: flex-start;
+        }
+
+        &__message-text {
+          background-color: get-color(black-coral-10);
+          color: get-color(white);
+
+          :any-link {
+            background: url('../../static/icons/link-external-white.svg')
+            no-repeat right center;
+            padding-right: 1.25em;
+            color: white;
+            text-decoration: underline;
+          }
+
+          &:hover {
+            background-color: #535665;
+          }
+        }
+
+        &__selection-icon {
+          background-color: get-color(black-coral-20);
+        }
+      }
+    }
+  }
+
+  &__group-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: get-color(black-coral-1);
+    border-radius: 50%;
+    font-size: $veera-font-size-80;
+    line-height: $veera-line-height-500;
+    font-weight: $veera-font-weight-delta;
+    color: get-color(black-coral-6);
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &__group-name {
+    font-size: $veera-font-size-100;
+    line-height: $veera-line-height-500;
+    font-weight: $veera-font-weight-delta;
+    text-transform: capitalize;
+    margin-left: 10rem;
+    margin-right: 3rem;
+    text-align: right;
+    padding-top: 10px;
+  }
+
+  &__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-end;
+  }
+
+  &__messageContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+
+  &__message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+
+    &--selected {
+      #{$self}__message-text {
+        box-shadow: inset 0 0 0 1px get-color(black-coral-20);
+      }
+    }
+  }
+
+  &__selection-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+    background-color: get-color(black-coral-10);
+    border-radius: 50%;
+    color: get-color(white);
+    font-size: 8px;
+    line-height: 1;
+    position: absolute;
+    top: 50%;
+    left: -6px;
+    transform: translateY(-50%);
+  }
+
+  &__edit-icon {
+    height: 25px;
+    margin-left: 5px;
+    width: 20px;
+  }
+
+  &__message-text {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    background-color: get-color(black-coral-0);
+    border-radius: 8px 8px 8px 4px;
+    font-size: $veera-font-size-100;
+    line-height: $veera-line-height-500;
+    transition: all 0.25s ease-out;
+    cursor: pointer;
+    word-break: break-word;
+    white-space: pre-wrap;
+
+    &:hover {
+      background-color: get-color(black-coral-1);
+    }
+
+    :any-link {
+      background: url('../../static/icons/link-external-blue.svg') no-repeat
+      right center;
+      padding-right: 1.25em;
+      color: blue;
+      text-decoration: underline;
+    }
+  }
+
+  &__message-preview {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 8px 8px 8px 4px;
+    font-size: $veera-font-size-100;
+    line-height: $veera-line-height-500;
+    transition: all 0.25s ease-out;
+    cursor: pointer;
+
+    color: #4472c4;
+    background-color: #e7f3ff;
+  }
+
+  &__message-date {
+    color: get-color(black-coral-6);
+    font-size: 11px;
+    line-height: 20px;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  &__message-status {
+    color: get-color(black-coral-6);
+    font-size: 11px;
+    line-height: 15px;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    &::before {
+      // css base64 ::before checkmark
+      content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuODYzMzkgNy41ODMzNkwxLjA4MzM5IDQuODAzMzZMMC4xMzY3MTkgNS43NDMzNkwzLjg2MzM5IDkuNDcwMDNMMTEuODYzNCAxLjQ3MDAzTDEwLjkyMzQgMC41MzAwMjlMMy44NjMzOSA3LjU4MzM2WiIgZmlsbD0iIzk3OTlBNCIvPgo8L3N2Zz4K');
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.edit-toolbar {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: auto auto;
+    gap: 10px;
+
+    &__header {
+      align-items: center;
+      display: flex;
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    &__textarea {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    &__edit-actions {
+      display: flex;
+      grid-column: 2;
+      grid-row: 2;
+      gap: 10px;
+      justify-content: flex-end;
+    }
+  }
+
+.title {
+  font-size: 13px;
+  color: get-color(black-coral-6);
+  padding-top: 2px;
+}
+
+.reset {
+  margin: 0;
+  padding: 0;
+  line-height: 1.3;
+}
+
+.reset h1,
+.reset h2,
+.reset h3,
+.reset h4,
+.reset h5,
+.reset h6 {
+  margin: 0;
+  padding: 0;
+}
+
+.reset p {
+  margin:  0 0 0.5rem;
+  padding: 0;
+}
+
+.reset ul,
+.reset ol {
+  margin: 0 0 1rem;
+  padding-left: 1.5rem;
+}
+
+.reset li {
+  margin: 0;
+  padding: 0;
+}
+
+.reset a {
+  text-decoration: none;
+  color: inherit;
+}

package/ui-components/Chat/ChatMessage.tsx

@@ -0,0 +1,270 @@
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { format } from 'date-fns';
+import clsx from 'clsx';
+import {
+    MdCheck,
+    MdClose,
+    MdOutlineCreate,
+    MdOutlineCheck,
+} from 'react-icons/md';
+import { Message } from '../../types/message';
+import { CHAT_EVENTS, MessageStatus } from '../../types/chat';
+import Markdownify from './Markdownify';
+import { useTranslation } from 'react-i18next';
+import './Typing.scss';
+import { parseButtons, parseOptions } from '../../utils/parse-utils';
+import ButtonMessage from '../ButtonMessage';
+import OptionMessage from '../OptionMessage';
+import Track from '../Track';
+import Icon from '../Icon';
+import { HiOutlinePencil } from 'react-icons/hi';
+import Button from '../Button';
+import FormTextarea from '../FormElements/FormTextarea';
+import { apiDev } from '../../services';
+import { useToast } from '../../hooks';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+type ChatMessageProps = {
+    message: Message;
+    onSelect: (message: Message) => void;
+    selected: boolean;
+    editableMessage?: boolean;
+};
+
+const ChatMessage: FC<ChatMessageProps> = ({
+                                               message,
+                                               onSelect,
+                                               selected,
+                                               editableMessage,
+                                           }) => {
+    const { t } = useTranslation();
+
+    const buttons = useMemo(() => parseButtons(message), [message.buttons]);
+    const options = useMemo(() => parseOptions(message), [message.options]);
+    const [isEditing, setIsEditing] = useState(false);
+    const [content, setContent] = useState(message.content ?? '');
+    const [inputContent, setInputContent] = useState(content);
+    const [messageHeight, setMessageHeight] = useState(0);
+    const messageRef = useRef<HTMLButtonElement>(null);
+    const toast = useToast();
+
+    useEffect(() => {
+        setMessageHeight(messageRef?.current?.clientHeight ?? 0);
+    });
+
+    const approveMessage = useMutation({
+        mutationFn: (data: { chatId: string; messageId: string }) => {
+            return apiDev.post(`chats/messages/approve-validation`, {
+                chatId: data.chatId,
+                messageId: data.messageId,
+            });
+        },
+        onSuccess: async () => {
+            toast.open({
+                type: 'success',
+                title: t('global.notification'),
+                message: t('chat.validations.messageApproved'),
+            });
+            return true;
+        },
+        onError: (error: AxiosError) => {
+            toast.open({
+                type: 'error',
+                title: t('global.notificationError'),
+                message: error.message,
+            });
+            return false;
+        },
+    });
+
+    return (
+        <div className={clsx('active-chat__messageContainer')}>
+            <div
+                className={clsx('active-chat__message', {
+                    'active-chat__message--selected': selected,
+                })}
+            >
+                {(message.event === CHAT_EVENTS.GREETING ||
+                    message.event === CHAT_EVENTS.WAITING_VALIDATION ||
+                    message.event === CHAT_EVENTS.APPROVED_VALIDATION ||
+                    !message.event) && (
+                    <>
+                        <button
+                            className={clsx('active-chat__message-text')}
+                            ref={messageRef}
+                            onClick={() => onSelect(message)}
+                        >
+                            <Track direction={isEditing ? 'vertical' : 'horizontal'}>
+                                {message.event === CHAT_EVENTS.WAITING_VALIDATION &&
+                                    isEditing && (
+                                        <FormTextarea
+                                            name={''}
+                                            label={''}
+                                            minRows={1}
+                                            maxRows={-1}
+                                            maxLength={-1}
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                border: 'none',
+                                                width: '400px',
+                                            }}
+                                            defaultValue={content}
+                                            onChange={(e) => {
+                                                setInputContent(e.target.value);
+                                            }}
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                            }}
+                                            autoFocus
+                                        />
+                                    )}
+                                {!isEditing && <Markdownify message={content} />}
+                                {!message.content && options.length > 0 && 'ok'}
+                                {editableMessage && !isEditing && (
+                                    <MdOutlineCreate className="active-chat__edit-icon" />
+                                )}
+                                {message.event === CHAT_EVENTS.WAITING_VALIDATION && (
+                                    <button
+                                        style={{
+                                            color: 'white',
+                                            alignSelf: 'end',
+                                            paddingTop: '0.3rem',
+                                        }}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            setMessageHeight(messageRef?.current?.clientHeight ?? 0);
+                                            setIsEditing(true);
+                                        }}
+                                    >
+                                        <Icon
+                                            icon={<HiOutlinePencil fontSize={18} />}
+                                            size="medium"
+                                        />
+                                    </button>
+                                )}
+                            </Track>
+                        </button>
+                        <Track
+                            direction="horizontal"
+                            style={{
+                                height: messageHeight,
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div>
+                                <time
+                                    dateTime={message.created}
+                                    className="active-chat__message-date"
+                                    style={{ alignSelf: 'center' }}
+                                >
+                                    {format(new Date(message.created), 'HH:mm:ss')}
+                                </time>
+                            </div>
+                            {message.event === CHAT_EVENTS.WAITING_VALIDATION &&
+                                isEditing && (
+                                    <Track
+                                        style={{
+                                            position: 'absolute',
+                                            bottom: 0,
+                                        }}
+                                        gap={2}
+                                    >
+                                        <Icon
+                                            style={{ cursor: 'pointer' }}
+                                            icon={
+                                                <MdCheck
+                                                    fontSize={22}
+                                                    color="#308653"
+                                                    onClick={async () => {
+                                                        if (inputContent.length === 0) return;
+                                                        try {
+                                                            await apiDev.post('chats/messages/edit', {
+                                                                chatId: message.chatId,
+                                                                messageId: message.id ?? '',
+                                                                content: inputContent,
+                                                            });
+                                                            setIsEditing(false);
+                                                            setContent(inputContent);
+                                                            toast.open({
+                                                                type: 'success',
+                                                                title: t('global.notification'),
+                                                                message: t('chat.validations.messageChanged'),
+                                                            });
+                                                        } catch (_) {
+                                                            toast.open({
+                                                                type: 'error',
+                                                                title: t('global.notificationError'),
+                                                                message: t(
+                                                                    'chat.validations.messageChangeFailed'
+                                                                ),
+                                                            });
+                                                        }
+                                                    }}
+                                                />
+                                            }
+                                            size="medium"
+                                        />
+                                        <Icon
+                                            style={{ cursor: 'pointer' }}
+                                            icon={
+                                                <MdClose
+                                                    fontSize={22}
+                                                    color="#D73E3E"
+                                                    onClick={() => {
+                                                        setIsEditing(false);
+                                                        setInputContent(content ?? '');
+                                                    }}
+                                                />
+                                            }
+                                            size="medium"
+                                        />
+                                    </Track>
+                                )}
+                        </Track>
+                        {selected && (
+                            <div className="active-chat__selection-icon">
+                                <MdOutlineCheck />
+                            </div>
+                        )}
+                    </>
+                )}
+            </div>
+            {message.event === CHAT_EVENTS.WAITING_VALIDATION && (
+                <Button
+                    appearance="success"
+                    style={{
+                        borderRadius: '50px',
+                        marginTop: '5px',
+                        marginLeft: '-55px',
+                        paddingLeft: '40px',
+                        paddingRight: '40px',
+                        display: 'absolute',
+                        right: '10',
+                    }}
+                    onClick={() => {
+                        approveMessage.mutate({
+                            chatId: message.chatId,
+                            messageId: message.id ?? '',
+                        });
+                    }}
+                >
+                    {t('chat.validations.confirmAnswer')}
+                </Button>
+            )}
+            {buttons.length > 0 && <ButtonMessage buttons={buttons} />}
+            {options.length > 0 && <OptionMessage options={options} />}
+            {message.event === CHAT_EVENTS.READ ? (
+                <span className="active-chat__message-status">
+          {t('global.read')}
+                    <time dateTime={message.authorTimestamp}>
+            {' '}
+                        {format(new Date(message.authorTimestamp), 'HH:mm:ss')}
+          </time>
+        </span>
+            ) : null}{' '}
+        </div>
+    );
+};
+
+export default ChatMessage;