@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/Chat/ChatTextArea.scss

@@ -0,0 +1,110 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.textarea {
+  $self: &;
+  display: flex;
+  align-items: center;
+  gap: get-spacing(paldiski);
+  width: 100%;
+
+  &__label {
+    flex: 0 0 185px;
+    font-size: $veera-font-size-100;
+    line-height: 24px;
+  }
+
+  &__wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    position: relative;
+  }
+
+  &__error {
+    width: 100%;
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    color: get-color(black-coral-20);
+    border-radius: $veera-radius-s;
+    background-color: get-color(jasper-3);
+    font-size: 13px;
+    line-height: 20px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+
+    &::before {
+      content: '';
+      display: block;
+      background-color: get-color(jasper-3);
+      border-left: 16px solid transparent;
+      border-right: 16px solid transparent;
+      border-bottom: 25px;
+    }
+  }
+
+  &__max-length-top {
+    position: absolute;
+    top: 10px;
+    right: 8px;
+    font-size: $veera-font-size-80;
+    color: get-color(black-coral-12);
+    pointer-events: none;
+  }
+
+  &__max-length-bottom {
+    position: absolute;
+    bottom: 10px;
+    right: 8px;
+    font-size: $veera-font-size-80;
+    color: get-color(black-coral-12);
+    pointer-events: none;
+  }
+
+  textarea {
+    width: 100%;
+    display: block;
+    appearance: none;
+    background-color: get-color(white);
+    border: 1px solid get-color(black-coral-6);
+    border-radius: $veera-radius-s;
+    color: var(--color-black);
+    font-size: $veera-font-size-100;
+    line-height: $veera-line-height-500;
+    height: 40px;
+    min-height: 40px;
+    resize: none;
+    padding: get-spacing(paldiski);
+
+    &::placeholder {
+      color: get-color(black-coral-6);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: get-color(sapphire-blue-10);
+    }
+  }
+
+  &--error {
+    input {
+      border-color: get-color(jasper-10);
+    }
+  }
+
+  &--disabled & {
+    input {
+      background-color: get-color(black-coral-0);
+    }
+  }
+
+  &--maxlength-shown {
+    textarea {
+      padding-right: 70px;
+    }
+  }
+}

package/ui-components/Chat/ChatTextArea.tsx

@@ -0,0 +1,97 @@
+import React, { ChangeEvent, forwardRef, useId, useState } from 'react';
+import TextareaAutosize, {
+  TextareaAutosizeProps,
+} from 'react-textarea-autosize';
+import clsx from 'clsx';
+
+import './ChatTextArea.scss';
+
+type TextareaProps = TextareaAutosizeProps & {
+  label: string;
+  name: string;
+  hideLabel?: boolean;
+  showMaxLength?: boolean;
+  maxLengthBottom?: boolean;
+};
+
+const ChatTextArea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      name,
+      maxLength = 2000,
+      minRows = 3,
+      maxRows = 3,
+      disabled,
+      hideLabel,
+      showMaxLength,
+      maxLengthBottom,
+      defaultValue,
+      onChange,
+      onSubmit,
+      ...rest
+    },
+    ref
+  ) => {
+    const id = useId();
+    const [currentLength, setCurrentLength] = useState(
+      (typeof defaultValue === 'string' && defaultValue.length) || 0
+    );
+    const textareaClasses = clsx(
+      'textarea',
+      disabled && 'textarea--disabled',
+      showMaxLength && 'textarea--maxlength-shown'
+    );
+
+    const handleOnChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (showMaxLength) {
+        setCurrentLength(e.target.value.length);
+      }
+    };
+
+    return (
+      <div className={textareaClasses}>
+        {label && !hideLabel && (
+          <label htmlFor={id} className="textarea__label">
+            {label}
+          </label>
+        )}
+        <div className="textarea__wrapper">
+          <TextareaAutosize
+            id={id}
+            maxLength={maxLength}
+            minRows={minRows}
+            maxRows={maxRows}
+            ref={ref}
+            onKeyDownCapture={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                if (onSubmit) onSubmit(e);
+              }
+            }}
+            defaultValue={defaultValue}
+            aria-label={hideLabel ? label : undefined}
+            onChange={(e) => {
+              if (onChange) onChange(e);
+              handleOnChange(e);
+            }}
+            {...rest}
+          />
+          {showMaxLength && (
+            <div
+              className={
+                maxLengthBottom
+                  ? 'textarea__max-length-bottom'
+                  : 'textarea__max-length-top'
+              }
+            >
+              {currentLength}/{maxLength}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ChatTextArea;

package/ui-components/Chat/LoaderOverlay.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface LoaderOverlayProps {
+    maxPercent: number;
+    currentPercent: number;
+}
+
+const LoaderOverlay: React.FC<LoaderOverlayProps> = ({
+                                                         maxPercent,
+                                                         currentPercent,
+                                                     }) => {
+    const overlayStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: `${((maxPercent - currentPercent) / maxPercent) * 100}%`, // Modified: Deduct from the full width
+        maxWidth: '100%',
+        backgroundColor: 'rgba(211, 211, 211, 0.7)',
+        transition: 'width 1s linear',
+        visibility: currentPercent > 0 ? 'visible' : 'hidden',
+        borderRadius: '30px 0px 0px 30px',
+    };
+
+    return (
+        <div style={overlayStyle}>
+            <div
+                style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                }}
+            ></div>
+        </div>
+    );
+};
+
+export default LoaderOverlay;

package/ui-components/Chat/Markdownify.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import Markdown from 'markdown-to-jsx';
+import './Chat.scss';
+
+interface MarkdownifyProps {
+    message: string | undefined;
+}
+
+const LinkPreview: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => {
+    const [hasError, setHasError] = useState(false);
+    const basicAuthPattern = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\/[^@]+@/;
+
+    if (basicAuthPattern.test(href)) {
+        return null;
+    }
+
+    return !hasError ? (
+        <img
+            src={href}
+            alt={typeof children === "string" ? children : "Preview"}
+            style={{ maxWidth: "100%", height: "auto", borderRadius: "20px" }}
+            onError={() => setHasError(true)}
+        />
+    ) : (
+        <a href={href} target="_blank" rel="noopener noreferrer">
+            {children}
+        </a>
+    );
+};
+
+const Markdownify: React.FC<MarkdownifyProps> = ({ message }) => (
+    <div className={'reset'}>
+        <Markdown
+            options={{
+                enforceAtxHeadings: true,
+                overrides: {
+                    a: {
+                        component: LinkPreview,
+                    },
+                },
+                disableParsingRawHTML: true,
+            }}
+        >
+            {message ?? ''}
+        </Markdown>
+    </div>
+);
+
+export default Markdownify;

package/ui-components/Chat/PreviewMessage.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+import Track from '../Track';
+import './Typing.scss';
+
+type PreviewMessageProps = {
+    preview: string | undefined;
+};
+
+const PreviewMessage: FC<PreviewMessageProps> = ({ preview }) => {
+    return (
+        <div className={clsx('active-chat__messageContainer')}>
+            <Track gap={10}>
+                {!!preview && preview && (
+                    <div className={clsx('active-chat__message-preview')}>
+                        {!!preview && (
+                            <Track>
+                                {/* Commented out as per request in task -1024- */}
+                                {/* <Markdownify message={preview ?? ''} /> */}
+                                <div className="typing">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </div>
+                            </Track>
+                        )}
+                    </div>
+                )}
+                <label
+                    className="active-chat__message-date"
+                >
+                    {'00:00:00'}
+                </label>
+            </Track>
+        </div>
+    );
+};
+
+export default PreviewMessage;

package/ui-components/Chat/Typing.scss

@@ -0,0 +1,46 @@
+$dot-width: 6px;
+$dot-color: #3b5998;
+$speed: 1.5s;
+
+.typing {
+    text-align: center;
+
+    span {
+        content: '';
+        animation: blink $speed infinite;
+        animation-fill-mode: both;
+        height: $dot-width;
+        width: $dot-width;
+        background: $dot-color;
+        display: inline-block;
+        margin: 0 $dot-width * 0.2;
+        border-radius: 50%;
+
+        &:nth-child(1) {
+            animation-delay: .2s;
+            margin-left: 6px;
+        }
+
+        &:nth-child(2) {
+            animation-delay: .2s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: .4s;
+        }
+    }
+}
+
+@keyframes blink {
+    0% {
+        opacity: .1;
+    }
+
+    20% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: .1;
+    }
+}