@uzum-tech/ui 1.12.12 → 1.12.13

package/es/chat/src/ChatListItems.js

@@ -10,6 +10,7 @@ import { chatLight } from '../styles';
 import { useConfig, useTheme, useThemeClass, useLocale } from '../../_mixins';
 import { CheckmarkDoneSharp, MdTime, PersonOutline, Refresh } from '../../_internal/icons';
 import { UFlex } from '../../flex';
+import { UText } from '../../typography';
 const statusIconMapper = {
     [MessageStatus.READ]: CheckmarkDoneSharp,
     [MessageStatus.PENDING]: MdTime,
@@ -127,24 +128,21 @@ export default defineComponent({
                                 : '?';
                     }
                 })),
-                header: () => (h("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => (h("span", { class: [
+                header: () => (h(UText, { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title`, variant: "body-l-medium" }, {
+                    default: () => typeof item.title === 'function' ? item.title() : item.title
+                })),
+                description: () => (h(UText, { class: [
                         `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
                         isTyping && 'typing'
-                    ], style: {
-                        display: 'block',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        minWidth: 0,
-                        maxWidth: '100%'
-                    } }, isTyping
-                    ? mergedTypingTextRef.value
-                    : typeof item.subtitle === 'string'
-                        ? item.subtitle
-                        : typeof item.subtitle === 'function'
-                            ? item.subtitle()
-                            : item.subtitle)),
+                    ], variant: "body-m-medium" }, {
+                    default: () => isTyping
+                        ? mergedTypingTextRef.value
+                        : typeof item.subtitle === 'string'
+                            ? item.subtitle
+                            : typeof item.subtitle === 'function'
+                                ? item.subtitle()
+                                : item.subtitle
+                })),
                 suffix: () => {
                     const displayUnreadCount = item.unreadCount || 0;
                     const hasUnreadIncoming = displayUnreadCount > 0;

package/es/chat/src/ChatMessages.d.ts

@@ -6205,7 +6205,6 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     renderMessage: (message: ChatMessageData) => JSX.Element;
     renderMarkMessage: (message: ChatMessageData) => JSX.Element;
-    renderTypingIndicator: () => JSX.Element;
     renderSkeletonMessage: (isOwn: boolean, index: number) => JSX.Element;
     renderDateSeparator: (date: string) => JSX.Element;
     renderUnreadNotification: () => JSX.Element;

package/es/chat/src/ChatMessages.js

@@ -95,7 +95,6 @@ export default defineComponent({
             };
         });
         const themeClassHandle = useThemeClass('chat-messages', computed(() => ''), cssVarsRef, props);
-        const mergedTypingTextRef = computed(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedRetryTextRef = computed(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedUnreadNotificationTextRef = computed(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         const unreadMessagesCount = computed(() => {
@@ -260,23 +259,6 @@ export default defineComponent({
                                 ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
             return messageContent;
         };
-        const renderTypingIndicator = () => {
-            return (h("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                h("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    h("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        h("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, mergedTypingTextRef.value)))));
-        };
         const renderSkeletonMessage = (isOwn, index) => {
             return (h("div", { key: `skeleton-${index}`, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
@@ -306,7 +288,6 @@ export default defineComponent({
             mergedTheme: themeRef,
             renderMessage,
             renderMarkMessage,
-            renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
             renderUnreadNotification,
@@ -320,9 +301,9 @@ export default defineComponent({
         };
     },
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
         if (this.loading) {
             return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -383,7 +364,6 @@ export default defineComponent({
                 id: 'unread-notification'
             });
         }
-        const isTyping = this.selectedChatId && ((_c = this.typingChatIds) === null || _c === void 0 ? void 0 : _c.includes(this.selectedChatId));
         return (h("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             h("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
                     border: 'none',
@@ -398,21 +378,19 @@ export default defineComponent({
                             event.preventDefault();
                             this.contextMenuShow = false;
                         }
-                    } },
-                    messagesWithDates.map((item) => {
-                        var _a;
-                        if (item.type === 'date-separator') {
-                            return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
-                        }
-                        if (item.type === 'unread-notification') {
-                            return renderUnreadNotification();
-                        }
-                        const message = item;
-                        if (message.type === ChatMessageType.MARK) {
-                            return renderMarkMessage(message);
-                        }
-                        return renderMessage(message);
-                    }),
-                    isTyping && renderTypingIndicator()))));
+                    } }, messagesWithDates.map((item) => {
+                    var _a;
+                    if (item.type === 'date-separator') {
+                        return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
+                    }
+                    if (item.type === 'unread-notification') {
+                        return renderUnreadNotification();
+                    }
+                    const message = item;
+                    if (message.type === ChatMessageType.MARK) {
+                        return renderMarkMessage(message);
+                    }
+                    return renderMessage(message);
+                })))));
     }
 });

package/es/chat/src/ChatParts/MainArea.js

@@ -44,6 +44,11 @@ export default defineComponent({
                 return 0;
             return messagesRef.value.filter((msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD).length;
         });
+        const isTyping = computed(() => {
+            if (!selectedChatRef.value || !typingChatIdsRef.value)
+                return false;
+            return typingChatIdsRef.value.includes(selectedChatRef.value.id);
+        });
         const showNotificationManually = ref(false);
         const hasUnreadMessages = ref(false);
         const unreadCountOnOpen = ref(0);
@@ -183,9 +188,16 @@ export default defineComponent({
                         const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
                         const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
                         return (h(Fragment, null,
-                            h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                                default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                            }),
+                            h(UFlex, { vertical: true, size: [0, 0], justify: 'flex-start"' },
+                                h(UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                                    default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                                }),
+                                isTyping.value && (h(UText, { class: [
+                                        `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                        'typing'
+                                    ], variant: "body-m-medium" }, {
+                                    default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                                }))),
                             h(UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                                 default: () => resolveSlot(slots.headerActions, () => {
                                     const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);

package/es/chat/src/styles/index.cssr.js

@@ -72,53 +72,28 @@ export default cB('chat', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `, [c('&:hover', `
  background-color: var(--u-sidebar-item-background-color-selected);
- `)]), cM('typing', `
- .u-list-item__description {
- color: var(--u-color-primary) !important;
- font-style: italic;
- }
- `), c('&:hover', `
+ `)]), c('&:hover', `
  background-color: var(--u-sidebar-item-background-color-hover);
  `, [cM('selected', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `)])]), cE('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
  color: var(--u-sidebar-item-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ margin-bottom: 0;
  `), cE('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
+ display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- `, [cM('typing', `
- color: var(--u-color-primary);
- font-style: italic;
- `)]), cE('item-main', `
+ minWidth: 0;
+ maxWidth: 100%;
+ `), cE('item-main', `
  flex: 1;
  min-width: 0;
  margin-right: 12px;
- `), cE('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
- color: var(--u-text-color-base);
- margin-bottom: 2px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- `), cE('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
- color: var(--u-text-color-disabled);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
  `), cE('item-indicators', `
  display: flex;
  flex-direction: column;
@@ -157,10 +132,9 @@ export default cB('chat', `
  `, [cE('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
- padding: 24px 20px 8px 24px;
+ padding: 24px 20px 10px 24px;
  flex-shrink: 0;
  `), cE('header-title', `
- margin-top: 9px;
  color: var(--u-header-title-color);
  flex: 1;
  min-width: 0;
@@ -169,6 +143,14 @@ export default cB('chat', `
  white-space: nowrap;
  display: block;
  margin-right: 16px;
+ `), cE('header-subtitle', `
+ display: block;
+ color: var(--u-sidebar-item-subtitle-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ minWidth: 0;
+ maxWidth: 100%;
  `), cE('header-actions', `
  padding: 4px;
  flex-shrink: 0;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.12";
+declare const _default: "1.12.13";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.12.12';
+export default '1.12.13';

package/lib/chat/src/ChatListItems.js

@@ -16,6 +16,7 @@ const styles_1 = require("../styles");
 const _mixins_1 = require("../../_mixins");
 const icons_1 = require("../../_internal/icons");
 const flex_1 = require("../../flex");
+const typography_1 = require("../../typography");
 const statusIconMapper = {
     [interface_1.MessageStatus.READ]: icons_1.CheckmarkDoneSharp,
     [interface_1.MessageStatus.PENDING]: icons_1.MdTime,
@@ -133,24 +134,21 @@ exports.default = (0, vue_1.defineComponent)({
                                 : '?';
                     }
                 })),
-                header: () => ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title` }, typeof item.title === 'function' ? item.title() : item.title)),
-                description: () => ((0, vue_1.h)("span", { class: [
+                header: () => ((0, vue_1.h)(typography_1.UText, { class: `${mergedClsPrefixRef.value}-chat-sidebar__item-title`, variant: "body-l-medium" }, {
+                    default: () => typeof item.title === 'function' ? item.title() : item.title
+                })),
+                description: () => ((0, vue_1.h)(typography_1.UText, { class: [
                         `${mergedClsPrefixRef.value}-chat-sidebar__item-subtitle`,
                         isTyping && 'typing'
-                    ], style: {
-                        display: 'block',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        minWidth: 0,
-                        maxWidth: '100%'
-                    } }, isTyping
-                    ? mergedTypingTextRef.value
-                    : typeof item.subtitle === 'string'
-                        ? item.subtitle
-                        : typeof item.subtitle === 'function'
-                            ? item.subtitle()
-                            : item.subtitle)),
+                    ], variant: "body-m-medium" }, {
+                    default: () => isTyping
+                        ? mergedTypingTextRef.value
+                        : typeof item.subtitle === 'string'
+                            ? item.subtitle
+                            : typeof item.subtitle === 'function'
+                                ? item.subtitle()
+                                : item.subtitle
+                })),
                 suffix: () => {
                     const displayUnreadCount = item.unreadCount || 0;
                     const hasUnreadIncoming = displayUnreadCount > 0;

package/lib/chat/src/ChatMessages.d.ts

@@ -6205,7 +6205,6 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     renderMessage: (message: ChatMessageData) => JSX.Element;
     renderMarkMessage: (message: ChatMessageData) => JSX.Element;
-    renderTypingIndicator: () => JSX.Element;
     renderSkeletonMessage: (isOwn: boolean, index: number) => JSX.Element;
     renderDateSeparator: (date: string) => JSX.Element;
     renderUnreadNotification: () => JSX.Element;

package/lib/chat/src/ChatMessages.js

@@ -101,7 +101,6 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = (0, _mixins_1.useThemeClass)('chat-messages', (0, vue_1.computed)(() => ''), cssVarsRef, props);
-        const mergedTypingTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.typingText) !== null && _a !== void 0 ? _a : localeRef.value.typingText; });
         const mergedRetryTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.retryText) !== null && _a !== void 0 ? _a : localeRef.value.retryText; });
         const mergedUnreadNotificationTextRef = (0, vue_1.computed)(() => { var _a; return (_a = props.unreadNotificationText) !== null && _a !== void 0 ? _a : localeRef.value.unreadNotificationText; });
         const unreadMessagesCount = (0, vue_1.computed)(() => {
@@ -266,23 +265,6 @@ exports.default = (0, vue_1.defineComponent)({
                                 ], theme: themeRef.value.peers.StatusIcon, themeOverrides: themeRef.value.peerOverrides.StatusIcon }))))))))));
             return messageContent;
         };
-        const renderTypingIndicator = () => {
-            return ((0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefixRef.value}-chat-main__message`,
-                    `${mergedClsPrefixRef.value}-chat-main__message--other`
-                ] },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefixRef.value}-chat-main__message-wrapper` },
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--other`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-bubble--typing`
-                        ] }),
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta`,
-                            `${mergedClsPrefixRef.value}-chat-main__message-meta--other`
-                        ] },
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-chat-main__message-time` }, mergedTypingTextRef.value)))));
-        };
         const renderSkeletonMessage = (isOwn, index) => {
             return ((0, vue_1.h)("div", { key: `skeleton-${index}`, class: [
                     `${mergedClsPrefixRef.value}-chat-main__message`,
@@ -312,7 +294,6 @@ exports.default = (0, vue_1.defineComponent)({
             mergedTheme: themeRef,
             renderMessage,
             renderMarkMessage,
-            renderTypingIndicator,
             renderSkeletonMessage,
             renderDateSeparator,
             renderUnreadNotification,
@@ -326,9 +307,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderTypingIndicator, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
+        const { mergedClsPrefixRef, renderMessage, renderMarkMessage, renderSkeletonMessage, renderDateSeparator, renderUnreadNotification } = this;
         if (this.loading) {
             return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
@@ -389,7 +370,6 @@ exports.default = (0, vue_1.defineComponent)({
                 id: 'unread-notification'
             });
         }
-        const isTyping = this.selectedChatId && ((_c = this.typingChatIds) === null || _c === void 0 ? void 0 : _c.includes(this.selectedChatId));
         return ((0, vue_1.h)("div", { class: [`${mergedClsPrefixRef}-chat`, this.themeClass], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefixRef}-chat-main`, style: {
                     border: 'none',
@@ -404,21 +384,19 @@ exports.default = (0, vue_1.defineComponent)({
                             event.preventDefault();
                             this.contextMenuShow = false;
                         }
-                    } },
-                    messagesWithDates.map((item) => {
-                        var _a;
-                        if (item.type === 'date-separator') {
-                            return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
-                        }
-                        if (item.type === 'unread-notification') {
-                            return renderUnreadNotification();
-                        }
-                        const message = item;
-                        if (message.type === interface_1.ChatMessageType.MARK) {
-                            return renderMarkMessage(message);
-                        }
-                        return renderMessage(message);
-                    }),
-                    isTyping && renderTypingIndicator()))));
+                    } }, messagesWithDates.map((item) => {
+                    var _a;
+                    if (item.type === 'date-separator') {
+                        return renderDateSeparator((_a = item.date) !== null && _a !== void 0 ? _a : '');
+                    }
+                    if (item.type === 'unread-notification') {
+                        return renderUnreadNotification();
+                    }
+                    const message = item;
+                    if (message.type === interface_1.ChatMessageType.MARK) {
+                        return renderMarkMessage(message);
+                    }
+                    return renderMessage(message);
+                })))));
     }
 });

package/lib/chat/src/ChatParts/MainArea.js

@@ -49,6 +49,11 @@ exports.default = (0, vue_1.defineComponent)({
                 return 0;
             return messagesRef.value.filter((msg) => !msg.isOwn && msg.status === interface_1.MessageStatus.UNREAD).length;
         });
+        const isTyping = (0, vue_1.computed)(() => {
+            if (!selectedChatRef.value || !typingChatIdsRef.value)
+                return false;
+            return typingChatIdsRef.value.includes(selectedChatRef.value.id);
+        });
         const showNotificationManually = (0, vue_1.ref)(false);
         const hasUnreadMessages = (0, vue_1.ref)(false);
         const unreadCountOnOpen = (0, vue_1.ref)(0);
@@ -188,9 +193,16 @@ exports.default = (0, vue_1.defineComponent)({
                         const keyId = toKeyString(chat === null || chat === void 0 ? void 0 : chat.id);
                         const keyTitle = toKeyString(chat === null || chat === void 0 ? void 0 : chat.title);
                         return ((0, vue_1.h)(vue_1.Fragment, null,
-                            (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
-                                default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
-                            }),
+                            (0, vue_1.h)(flex_1.UFlex, { vertical: true, size: [0, 0], justify: 'flex-start"' },
+                                (0, vue_1.h)(typography_1.UText, { key: `${keyId}-${keyTitle}`, variant: "heading-s-bold", class: `${mergedClsPrefixRef.value}-chat-main__header-title`, theme: mergedThemeRef.value.peers.Typography, themeOverrides: mergedThemeRef.value.peerOverrides.Typography }, {
+                                    default: () => { var _a, _b; return (_b = (_a = selectedChatRef.value) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ''; }
+                                }),
+                                isTyping.value && ((0, vue_1.h)(typography_1.UText, { class: [
+                                        `${mergedClsPrefixRef.value}-chat-main__header-subtitle`,
+                                        'typing'
+                                    ], variant: "body-m-medium" }, {
+                                    default: () => { var _a; return (_a = typingTextRef.value) !== null && _a !== void 0 ? _a : ''; }
+                                }))),
                             (0, vue_1.h)(flex_1.UFlex, { align: "center", size: "small", class: `${mergedClsPrefixRef.value}-chat-main__header-actions` }, {
                                 default: () => (0, _utils_1.resolveSlot)(slots.headerActions, () => {
                                     const shareButtonProps = Object.assign(Object.assign({}, headerButtonPropsRef.value), headerShareButtonPropsRef.value);

package/lib/chat/src/styles/index.cssr.js

@@ -77,53 +77,28 @@ exports.default = (0, cssr_1.cB)('chat', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `, [(0, cssr_1.c)('&:hover', `
  background-color: var(--u-sidebar-item-background-color-selected);
- `)]), (0, cssr_1.cM)('typing', `
- .u-list-item__description {
- color: var(--u-color-primary) !important;
- font-style: italic;
- }
- `), (0, cssr_1.c)('&:hover', `
+ `)]), (0, cssr_1.c)('&:hover', `
  background-color: var(--u-sidebar-item-background-color-hover);
  `, [(0, cssr_1.cM)('selected', `
  background-color: var(--u-sidebar-item-background-color-selected);
  `)])]), (0, cssr_1.cE)('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
  color: var(--u-sidebar-item-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ margin-bottom: 0;
  `), (0, cssr_1.cE)('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
+ display: block;
  color: var(--u-sidebar-item-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
- `, [(0, cssr_1.cM)('typing', `
- color: var(--u-color-primary);
- font-style: italic;
- `)]), (0, cssr_1.cE)('item-main', `
+ minWidth: 0;
+ maxWidth: 100%;
+ `), (0, cssr_1.cE)('item-main', `
  flex: 1;
  min-width: 0;
  margin-right: 12px;
- `), (0, cssr_1.cE)('item-title', `
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
- color: var(--u-text-color-base);
- margin-bottom: 2px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- `), (0, cssr_1.cE)('item-subtitle', `
- font-size: 12px;
- line-height: 16px;
- color: var(--u-text-color-disabled);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
  `), (0, cssr_1.cE)('item-indicators', `
  display: flex;
  flex-direction: column;
@@ -162,10 +137,9 @@ exports.default = (0, cssr_1.cB)('chat', `
  `, [(0, cssr_1.cE)('header', `
  border-bottom: 1px solid var(--u-border-color);
  width: 100%;
- padding: 24px 20px 8px 24px;
+ padding: 24px 20px 10px 24px;
  flex-shrink: 0;
  `), (0, cssr_1.cE)('header-title', `
- margin-top: 9px;
  color: var(--u-header-title-color);
  flex: 1;
  min-width: 0;
@@ -174,6 +148,14 @@ exports.default = (0, cssr_1.cB)('chat', `
  white-space: nowrap;
  display: block;
  margin-right: 16px;
+ `), (0, cssr_1.cE)('header-subtitle', `
+ display: block;
+ color: var(--u-sidebar-item-subtitle-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ minWidth: 0;
+ maxWidth: 100%;
  `), (0, cssr_1.cE)('header-actions', `
  padding: 4px;
  flex-shrink: 0;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.12";
+declare const _default: "1.12.13";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.12.12';
+exports.default = '1.12.13';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.12.12",
+  "version": "1.12.13",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.12.12",
+  "version": "1.12.13",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {