@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/FormElements/Switch/index.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef, useId } from 'react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { useTranslation } from 'react-i18next';
+import { ControllerRenderProps } from 'react-hook-form';
+
+import './Switch.scss';
+
+type SwitchProps = Partial<ControllerRenderProps> & {
+    onLabel?: string;
+    offLabel?: string;
+    onColor?: string;
+    name?: string;
+    label: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    hideLabel?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+    (
+        {
+            onLabel,
+            offLabel,
+            onColor,
+            name,
+            label,
+            checked,
+            hideLabel,
+            onCheckedChange,
+            defaultChecked,
+        },
+        ref
+    ) => {
+        const id = useId();
+        const { t } = useTranslation();
+        const onValueLabel = onLabel || t('global.on');
+        const offValueLabel = offLabel || t('global.off');
+
+        return (
+            <div className="switch" style={{  [`${'--active-color'}`]: onColor }}>
+                {label && !hideLabel && (
+                    <label htmlFor={id} className="switch__label">
+                        {label}
+                    </label>
+                )}
+                <RadixSwitch.Root
+                    ref={ref}
+                    id={id}
+                    className="switch__button"
+                    name={name}
+                    onCheckedChange={onCheckedChange}
+                    checked={checked}
+                    defaultChecked={defaultChecked}
+                >
+                    <RadixSwitch.Thumb className="switch__thumb" />
+                    <span className="switch__on">{onValueLabel}</span>
+                    <span className="switch__off">{offValueLabel}</span>
+                </RadixSwitch.Root>
+            </div>
+        );
+    }
+);
+
+export default Switch;

package/ui-components/FormElements/SwitchBox/SwitchBox.scss

@@ -0,0 +1,45 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.switchbox {
+  $self: &;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__button {
+    width: 48px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: get-color(black-coral-6);
+    position: relative;
+
+    &[aria-checked=true] {
+      background-color: get-color(sapphire-blue-4);
+
+      #{$self} {
+        &__thumb {
+          transform: translate(24px, -50%);
+          background-color: get-color(sapphire-blue-10);
+        }
+      }
+    }
+  }
+
+  &__thumb {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-2);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: all .25s ease-out;
+  }
+}

package/ui-components/FormElements/SwitchBox/index.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, useId } from 'react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { ControllerRenderProps } from 'react-hook-form';
+
+import './SwitchBox.scss';
+
+type SwitchBoxProps = Partial<ControllerRenderProps> & {
+    name?: string;
+    label: string;
+    checked?: boolean;
+    hideLabel?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+
+const SwitchBox = forwardRef<HTMLButtonElement, SwitchBoxProps>((
+    {
+        name,
+        label,
+        checked,
+        hideLabel,
+        onCheckedChange,
+    },
+    ref,
+) => {
+    const id = useId();
+
+    return (
+        <div className='switchbox'>
+            {label && !hideLabel && <label htmlFor={id} className='switch__label'>{label}</label>}
+            <RadixSwitch.Root
+                ref={ref}
+                id={id}
+                name={name}
+                className='switchbox__button'
+                onCheckedChange={onCheckedChange}
+                defaultChecked={checked}
+            >
+                <RadixSwitch.Thumb className='switchbox__thumb' />
+            </RadixSwitch.Root>
+        </div>
+    );
+});
+
+export default SwitchBox;

package/ui-components/FormElements/index.tsx

@@ -0,0 +1,23 @@
+import FormInput from './FormInput';
+import FormTextarea from './FormTextarea';
+import FormSelect from './FormSelect';
+import FormMultiselect from './FormSelect/FormMultiselect';
+import Switch from './Switch';
+import FormCheckboxes from './FormCheckboxes';
+import FormRadios from './FormRadios';
+import FormCheckbox from './FormCheckbox';
+import FormDatepicker from './FormDatepicker';
+import SwitchBox from './SwitchBox';
+
+export {
+    FormInput,
+    FormTextarea,
+    FormSelect,
+    FormMultiselect,
+    Switch,
+    FormCheckboxes,
+    FormRadios,
+    FormCheckbox,
+    FormDatepicker,
+    SwitchBox,
+};

package/ui-components/HistoricalChat/ChatMessage.tsx

@@ -0,0 +1,67 @@
+import React, { FC, useMemo } from 'react';
+import { format } from 'date-fns';
+import { Message } from '../../types/message';
+import Markdownify from '../Chat/Markdownify';
+import { parseButtons, parseOptions } from '../../utils/parse-utils';
+import ButtonMessage from '../ButtonMessage';
+import OptionMessage from '../OptionMessage';
+import {useTranslation} from "react-i18next";
+import { ToastContextType } from "../../context";
+
+type ChatMessageProps = {
+    message: Message;
+    onMessageClick?: (message: Message) => void;
+    toastContext: ToastContextType | null;
+};
+
+const ChatMessage: FC<ChatMessageProps> = ({ message, onMessageClick, toastContext }) => {
+    const buttons = useMemo(() => parseButtons(message), [message.buttons]);
+    const options = useMemo(() => parseOptions(message), [message.options]);
+    const { t } = useTranslation();
+    const toast = toastContext;
+
+    const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        const content = message.content ?? '';
+        navigator.clipboard
+            .writeText(content)
+            .then(() => {
+                toast?.open({
+                    type: 'success',
+                    title: t('global.notification'),
+                    message: t('toast.copied'),
+                });
+            })
+            .catch((err) => {
+                toast?.open({
+                    type: 'error',
+                    title: t('global.notification'),
+                    message: err?.message,
+                });
+            });
+    };
+
+    return (
+        <>
+            <div className="historical-chat__message">
+                <button
+                    className="historical-chat__message-text"
+                    onClick={onMessageClick ? () => onMessageClick(message) : undefined}
+                    onContextMenu={handleContextMenu}
+                >
+                    <Markdownify message={message.content ?? ''} />
+                </button>
+                <time
+                    dateTime={message.created}
+                    className="historical-chat__message-date"
+                >
+                    {format(new Date(message.created ?? ''), 'HH:mm:ss')}
+                </time>
+            </div>
+            {buttons.length > 0 && <ButtonMessage buttons={buttons} />}
+            {options.length > 0 && <OptionMessage options={options} />}
+        </>
+    );
+};
+
+export default ChatMessage;

package/ui-components/HistoricalChat/HistoricalChat.scss

@@ -0,0 +1,225 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.historical-chat {
+  $self: &;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  height: 100%;
+  white-space: pre-wrap;
+
+  &__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &__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-row {
+    border-top: 1px solid get-color(black-coral-2);
+    padding: get-spacing(paldiski) get-spacing(haapsalu);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-left: 56px;
+    position: relative;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    &--buerokratt,
+    &--chatbot {
+      #{$self} {
+        &__group-initials {
+          background-color: get-color(sapphire-blue-10);
+          left: 0;
+          top: 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);
+          margin-left: 0;
+
+          :any-link {
+            color: get-color(white);
+          }
+
+          &: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);
+          margin-left: 0;
+
+          :any-link {
+            color: get-color(white);
+          }
+
+          &:hover {
+            background-color: #535665;
+          }
+        }
+      }
+    }
+  }
+
+  &__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: 7px;
+  }
+
+  &__messages {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-end;
+  }
+
+  &__message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__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 .25s ease-out;
+    cursor: pointer;
+
+    :any-link {
+      text-decoration: underline;
+    }
+
+    &:hover {
+      background-color: get-color(black-coral-1);
+    }
+  }
+
+  &__message-date {
+    color: get-color(black-coral-6);
+    font-size: 11px;
+    line-height: 20px;
+  }
+
+  &__comment-text {
+    color: get-color(black);
+
+    &.placeholder {
+      color: get-color(black-coral-6);
+    }
+  }
+}
+
+.header-link {
+  text-decoration: none;
+  padding: 15px 35px;
+  font-family: Roboto , sans-serif;
+  font-weight: 400;
+}
+
+.title {
+  font-size: 14px;
+  color: get-color(black-coral-6);
+  padding-top: 4px;
+}