@steroidsjs/bootstrap 3.0.0-beta.99 → 3.0.0

package/content/Chat/views/BubbleMessage/BubbleMessageView.js

@@ -0,0 +1,72 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var Avatar_1 = require("@steroidsjs/core/ui/content/Avatar");
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var timeTemplatesAndUnits_1 = require("@steroidsjs/core/ui/content/Chat/constants/timeTemplatesAndUnits");
+var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
+require("./BubbleMessageView.scss");
+var ChatFileItem_1 = __importDefault(require("../ChatFileItem"));
+function BubbleMessageView(props) {
+    var _a, _b;
+    var bem = (0, useBem_1["default"])('BubbleMessageView');
+    var isMessageByAnotherUser = !props.isCurrentUser;
+    var _c = (0, react_1.useState)(props.timeAgo), timeAgo = _c[0], setTimeAgo = _c[1];
+    (0, react_use_1.useInterval)(function () { return setTimeAgo((0, utils_1.calculateMessageTimeAgo)(props.timestamp)); }, props.isTodayMessage ? timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE : null);
+    return (react_1["default"].createElement("div", { className: bem.block({
+            'another-user': isMessageByAnotherUser,
+            'last-message': !!props.isLastMessage
+        }) },
+        react_1["default"].createElement("div", { className: bem.element('user-message') },
+            !props.isCurrentUser && props.isFirstMessage && (react_1["default"].createElement(Title_1["default"], { className: bem.element('username'), type: 'h4', tag: 'h4', content: "".concat(props.user.firstName, " ").concat(props.user.lastName) })),
+            react_1["default"].createElement(typography_1.Text, { className: bem.element('text'), type: "body", content: props.text }),
+            !(0, isEmpty_1["default"])(props.files) && (react_1["default"].createElement("div", { className: bem.element('files') }, props.files.map(function (file) { return (react_1["default"].createElement(ChatFileItem_1["default"], __assign({ key: file.uid, isFileByAnotherUser: isMessageByAnotherUser, isFileFromMessage: true }, file))); }))),
+            react_1["default"].createElement("div", { className: bem.element('indicators') },
+                react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: timeAgo }),
+                props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),
+        props.user && (react_1["default"].createElement("div", { className: bem.element('avatar') },
+            react_1["default"].createElement(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' })))));
+}
+exports["default"] = (0, react_1.memo)(BubbleMessageView);

package/content/Chat/views/BubbleMessage/BubbleMessageView.scss

@@ -0,0 +1,195 @@
+@use "../../../../scss/variables";
+
+:root {
+  --bubble-background-color: #6b76ad;
+  --bubble-border-color: #6b76ad;
+  --username-text-color: #fff;
+  --message-text-color: #fff;
+  --message-time-color: #fff;
+
+  --another-user-bubble-background-color: #f8f8f8;
+  --another-user-bubble-border-color: #f1f5f7;
+  --another-user-username-text-color: #fff;
+  --another-user-message-text-color: #323232;
+  --another-user-message-time-color: rgba(0, 0, 0, 0.30);
+}
+
+html[data-theme="dark"] {
+  --bubble-background-color: #727EB7;
+  --bubble-border-color: #727EB7;
+  --message-text-color: #fff;
+  --message-time-color: #fff;
+
+  --another-user-bubble-background-color: #333646;
+  --another-user-bubble-border-color: #333646;
+  --another-user-message-text-color: #fff;
+  --another-user-message-time-color: rgba(255, 255, 255, 0.30);
+}
+
+$bubble-background-color: var(--bubble-background-color);
+$bubble-border-color: var(--bubble-border-color);
+$message-text-color: var(--message-text-color);
+$message-time-color: var(--message-time-color);
+
+$another-user-bubble-background-color: var(--another-user-bubble-background-color);
+$another-user-bubble-border-color: var(--another-user-bubble-border-color);
+$another-user-message-text-color: var(--another-user-message-text-color);
+$another-user-message-time-color: var(--another-user-message-time-color);
+
+@mixin svg-color($color) {
+  svg {
+    path {
+      stroke: $color;
+    }
+
+    circle {
+      fill: $color;
+    }
+  }
+}
+
+.BubbleMessageView {
+  $root: &;
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  align-self: flex-end;
+  gap: 8px;
+  max-width: 548px;
+  width: 100%;
+  margin-bottom: 4px;
+
+  &_another-user {
+    justify-content: flex-start;
+    align-self: flex-start;
+
+    #{$root}__avatar {
+      order: -1;
+    }
+
+    #{$root}__username {
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__user-message {
+      border: 1px solid $another-user-bubble-border-color;
+      background: $another-user-bubble-background-color;
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__text {
+      text-align: left;
+      color: $another-user-message-text-color;
+    }
+
+    #{$root}__files {
+      @include svg-color($another-user-message-text-color);
+
+      .TextView {
+        color: $another-user-message-text-color;
+      }
+    }
+
+    #{$root}__time {
+      color: $another-user-message-time-color;
+    }
+
+    &#{$root}_last-message {
+      #{$root}__user-message {
+        border-radius: 16px 16px 16px 0;
+      }
+
+      #{$root}__avatar {
+        visibility: visible;
+      }
+
+      #{$root}__username {
+        color: $another-user-message-text-color;
+      }
+    }
+  }
+
+  &_last-message {
+    margin-bottom: 8px;
+
+    #{$root}__user-message {
+      border-radius: 16px 16px 0 16px;
+    }
+
+    #{$root}__avatar {
+      visibility: visible;
+    }
+  }
+
+  &__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    min-height: 36px;
+    visibility: hidden;
+  }
+
+  &__username {
+    align-self: flex-start;
+    margin-bottom: 0;
+    color: $message-text-color;
+  }
+
+  &__user-message {
+    display: flex;
+    padding: 12px;
+    flex-flow: column nowrap;
+    justify-content: flex-end;
+    align-items: flex-end;
+    gap: 4px;
+    border-radius: 16px;
+
+    border: 1px solid $bubble-border-color;
+    background: $bubble-background-color;
+    color: $message-text-color;
+  }
+
+  &__text {
+    margin-bottom: 0;
+    white-space: break-spaces;
+    width: 100%;
+    text-align: left;
+    color: $message-text-color;
+  }
+
+  &__files {
+    @include svg-color($message-text-color);
+
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 0;
+
+    .TextView {
+      color: $message-text-color;
+    }
+  }
+
+  &__indicators {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__time {
+    margin-bottom: 0;
+    font-weight: 500;
+    color: $message-time-color;
+  }
+
+  &__check {
+    margin-left: 4px;
+  }
+
+  .ChatFileItemView {
+    width: 100%;
+  }
+}

package/content/Chat/views/BubbleMessage/index.d.ts

@@ -0,0 +1,2 @@
+import BubbleMessageView from './BubbleMessageView';
+export default BubbleMessageView;

package/content/Chat/views/BubbleMessage/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var BubbleMessageView_1 = __importDefault(require("./BubbleMessageView"));
+exports["default"] = BubbleMessageView_1["default"];

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IGroupedMessage } from '@steroidsjs/core/ui/content/Chat/hooks/useChat';
+import { IChatUser } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './BubblesDateGroup.scss';
+interface IBubblesDateGroupProps {
+    date: string;
+    groupedMessages: IGroupedMessage[][];
+    currentUser: IChatUser;
+}
+declare function BubblesDateGroup(props: IBubblesDateGroupProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BubblesDateGroup>;
+export default _default;

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importStar(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
+var BubbleMessage_1 = __importDefault(require("../BubbleMessage"));
+require("./BubblesDateGroup.scss");
+function BubblesDateGroup(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('BubblesDateGroup');
+    var toBubbles = (0, react_1.useCallback)(function (groupedMessages) { return (react_1["default"].createElement("div", { className: bem.element('bubbles') }, groupedMessages.map(function (bubbleMessage) { return (react_1["default"].createElement(BubbleMessage_1["default"], { key: bubbleMessage.id, user: bubbleMessage.user, text: bubbleMessage.text, files: bubbleMessage.files, timestamp: bubbleMessage.timestamp, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isTodayMessage: (0, utils_1.isTodayMessage)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage })); }))); }, [bem, props.currentUser.id]);
+    var renderDate = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("div", { className: bem.element('date') },
+            react_1["default"].createElement("div", { className: bem.element('date-wrapper') },
+                react_1["default"].createElement("span", { className: bem.element('date-text') }, props.date))),
+        react_1["default"].createElement("div", { className: bem.element('date', 'invisible-date') },
+            react_1["default"].createElement("div", { className: bem.element('date-wrapper', 'invisible-date') }, props.date)))); }, [bem, props.date]);
+    return (react_1["default"].createElement("div", { className: bem.block() },
+        renderDate(), (_a = props.groupedMessages) === null || _a === void 0 ? void 0 :
+        _a.map(toBubbles)));
+}
+exports["default"] = (0, react_1.memo)(BubblesDateGroup);

package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.scss

@@ -0,0 +1,78 @@
+@use "../../../../scss/variables";
+
+:root {
+  --date-text-color: #191b1f;
+  --date-background-color: #f1f5f7;
+  --decorative-line-color: rgba(0, 0, 0, 0.10);
+}
+
+html[data-theme="dark"] {
+  --date-text-color: #fff;
+  --date-background-color: #272a37;
+  --decorative-line-color: rgba(255, 255, 255, 0.10);
+}
+
+$date-text-color: var(--date-text-color);
+$date-background-color: var(--date-background-color);
+$decorative-line-color: var(--decorative-line-color);
+
+.BubblesDateGroup {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+
+  &__date {
+    display: flex;
+    justify-content: center;
+    position: sticky;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    line-height: 16px;
+    margin: 8px 0 16px 0;
+
+    &_invisible-date {
+      position: absolute;
+      top: 0;
+
+      &::before,
+      &::after {
+        content: "";
+        flex: 1 1;
+        border-bottom: 1px solid;
+        margin: auto;
+        color: $decorative-line-color;
+      }
+
+      &::before {
+        margin-right: 10px
+      }
+
+      &::after {
+        margin-left: 10px
+      }
+    }
+  }
+
+  &__date-wrapper {
+    padding: 8px;
+    border-radius: 16px;
+    background: $date-background-color;
+
+    &_invisible-date {
+      opacity: 0;
+    }
+  }
+
+  &__date-text {
+    font-weight: 700;
+    color: $date-text-color;
+    opacity: 0.4;
+  }
+
+  &__bubbles {
+    display: flex;
+    flex-flow: column nowrap;
+  }
+}

package/content/Chat/views/BubblesDateGroup/index.d.ts

@@ -0,0 +1,2 @@
+import BubblesDateGroup from './BubblesDateGroup';
+export default BubblesDateGroup;

package/content/Chat/views/BubblesDateGroup/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var BubblesDateGroup_1 = __importDefault(require("./BubblesDateGroup"));
+exports["default"] = BubblesDateGroup_1["default"];

package/content/Chat/views/ChatFileItem/ChatFileItemView.d.ts

@@ -0,0 +1,9 @@
+import { IFileFieldItemViewProps } from '@steroidsjs/core/ui/form/FileField/FileField';
+import { IMessageFile } from '@steroidsjs/core/ui/content/Chat/Chat';
+import './ChatFileItemView.scss';
+interface IChatFileItemViewProps extends IFileFieldItemViewProps, IMessageFile {
+    isFileFromMessage?: boolean;
+    isFileByAnotherUser?: boolean;
+}
+export default function ChatFileItemView(props: IChatFileItemViewProps): JSX.Element;
+export {};

package/content/Chat/views/ChatFileItem/ChatFileItemView.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var typography_1 = require("@steroidsjs/core/ui/typography");
+var format_1 = require("@steroidsjs/core/ui/format");
+require("./ChatFileItemView.scss");
+function ChatFileItemView(props) {
+    var _a, _b;
+    var bem = (0, hooks_1.useBem)('ChatFileItemView');
+    var isLoading = props.progress && props.progress.percent !== 100;
+    var renderLink = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement("a", { className: bem.element('link'), title: props.title, href: props.error ? '#' : (props.url || ((_a = props.item) === null || _a === void 0 ? void 0 : _a.url)), target: 'blank' }, props.title));
+    }, [bem, props.title, props.error, props.url, (_a = props.item) === null || _a === void 0 ? void 0 : _a.url]);
+    var renderProgressBar = react_1["default"].useCallback(function () { return (react_1["default"].createElement("div", { className: bem.element('progress-track') },
+        react_1["default"].createElement("div", { className: bem.element('progress-bar'), style: { width: "".concat(props.progress.percent, "%") } }))); }, [bem, props.progress]);
+    var renderLoadingState = react_1["default"].useCallback(function () { return (react_1["default"].createElement("div", { className: bem.element('left') },
+        react_1["default"].createElement("div", { className: bem.element('icon-wrapper', 'loading') },
+            react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon-loading'), name: 'loading_default' })),
+        react_1["default"].createElement("div", { className: bem.element('content') },
+            react_1["default"].createElement("span", { className: bem.element('title', 'loading') }, props.title),
+            renderProgressBar()))); }, [bem, props.title, renderProgressBar]);
+    var renderFileItem = react_1["default"].useCallback(function () {
+        var _a;
+        return (react_1["default"].createElement("div", { className: bem.element('left') },
+            react_1["default"].createElement("div", { className: bem.element('icon-wrapper') },
+                react_1["default"].createElement(Icon_1["default"], { className: bem.element('icon'), name: (((_a = props.item) === null || _a === void 0 ? void 0 : _a.fullHeight) || props.fullHeight) ? 'img_box' : 'file_dock' })),
+            react_1["default"].createElement("div", { className: bem.element('content') },
+                react_1["default"].createElement(typography_1.Text, { type: 'boldSpan', content: props.title, className: bem.element('title') }),
+                renderLink(),
+                react_1["default"].createElement(typography_1.Text, { type: 'body2', className: bem.element('size'), color: 'light' },
+                    react_1["default"].createElement(format_1.FileSize, { value: props.size, showZero: true })))));
+    }, [bem, props.fullHeight, (_b = props.item) === null || _b === void 0 ? void 0 : _b.fullHeight, props.size, props.title, renderLink]);
+    return (react_1["default"].createElement("div", { className: bem.block({
+            error: !props.isFileFromMessage && !!props.error,
+            isFileFromMessage: props.isFileFromMessage,
+            isFileForUploading: !props.isFileFromMessage,
+            'another-user': !!props.isFileByAnotherUser
+        }) },
+        isLoading
+            ? renderLoadingState()
+            : renderFileItem(),
+        props.isFileFromMessage ? (react_1["default"].createElement(Icon_1["default"], { name: 'import', className: bem.element('download'), onClick: function () { return window.open(props.downloadUrl || props.url); } })) : (react_1["default"].createElement(Icon_1["default"], { name: props.customRemoveIcon || 'cross_8x8', className: bem.element('remove', { isLoading: isLoading }), onClick: props.onRemove }))));
+}
+exports["default"] = ChatFileItemView;

package/content/Chat/views/ChatFileItem/ChatFileItemView.scss

@@ -0,0 +1,184 @@
+@use "../../../../scss/variables";
+@use "../../../../scss/mixins";
+@use "../../../../scss/animations" as anim;
+
+:root {
+  --file-size-color: rgba(255, 255, 255, 0.60);
+  --file-icon-color: rgb(0, 0, 0);
+  --another-user-file-size-color: rgba(0, 0, 0, 0.60);
+}
+
+html[data-theme="dark"] {
+  --file-size-color: rgba(255, 255, 255, 0.60);
+  --file-icon-color: #fff;
+  --another-user-file-size-color: rgba(255, 255, 255, 0.60);
+}
+
+$file-size-color: var(--file-size-color);
+$file-icon-color: var(--file-icon-color);
+$another-user-file-size-color: var(--another-user-file-size-color);
+
+@mixin svg-color($color) {
+  svg {
+    path {
+      stroke: $color;
+    }
+
+    circle {
+      fill: $color;
+    }
+  }
+}
+
+@mixin textEllipsis {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+@mixin text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.ChatFileItemView {
+  $root: &;
+
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 8px;
+  padding: 8px;
+  border: 1px solid variables.$gray;
+  border-radius: 12px;
+  min-width: 320px;
+  width: 320px;
+
+  &_isFileFromMessage {
+    padding: 0;
+    border: none;
+    width: 100%;
+  }
+
+  &_isFileForUploading {
+    @include svg-color($file-icon-color);
+  }
+
+  &__icon-wrapper {
+    min-width: 24px;
+    min-height: 24px;
+    width: 24px;
+    height: 24px;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    //width: 100%;
+  }
+
+  &__title {
+    @include text;
+    @include textEllipsis;
+
+    display: none;
+
+    &_loading {
+      display: block;
+    }
+  }
+
+  &__link {
+    @include text;
+    @include textEllipsis;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__title,
+  &__size {
+    margin-bottom: 0;
+  }
+
+  &__size {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    color: $another-user-file-size-color;
+  }
+
+  &_another-user {
+    #{$root}__size {
+      color: $another-user-file-size-color !important;
+    }
+  }
+
+  &_error {
+    @include mixins.svg-color(variables.$danger);
+
+    #{$root}__icon {
+      circle {
+        fill: variables.$danger;
+      }
+    }
+
+    #{$root}__title,
+    #{$root}__size {
+      color: variables.$danger;
+    }
+
+    a,
+    a:hover {
+      color: variables.$danger;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &__remove,
+  &__download {
+    cursor: pointer;
+    z-index: 3;
+    height: 25px;
+
+    svg {
+      min-width: 24px;
+      min-height: 24px;
+    }
+  }
+
+  &__icon-loading {
+    @include anim.loadingAnimation;
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  &__progress-track {
+    margin-top: 4px;
+    height: 4px;
+    background-color: variables.$gray;
+    border-radius: 4px;
+  }
+
+  &__progress-bar {
+    height: inherit;
+    background-color: variables.$primary;
+    border-radius: 4px;
+  }
+}

package/content/Chat/views/ChatFileItem/index.d.ts

@@ -0,0 +1,2 @@
+import ChatFileItemView from './ChatFileItemView';
+export default ChatFileItemView;