@lobehub/ui 4.3.2 → 4.3.3

package/es/chat/ChatItem/components/Title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.mjs","names":["Title: FC<TitleProps>","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Title.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\nimport { formatTime } from '@/utils/formatTime';\n\nimport { useStyles } from '../style';\n\nexport interface TitleProps {\n  avatar: ChatItemProps['avatar'];\n  placement?: ChatItemProps['placement'];\n  showTitle?: ChatItemProps['showTitle'];\n  time?: ChatItemProps['time'];\n  titleAddon?: ChatItemProps['titleAddon'];\n}\n\nconst Title: FC<TitleProps> = ({ showTitle, placement, time, avatar, titleAddon }) => {\n  const { styles } = useStyles({ placement, showTitle, time });\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={styles.name}\n      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n      gap={4}\n    >\n      {showTitle ? avatar.title || 'untitled' : undefined}\n      {showTitle ? titleAddon : undefined}\n      {time && <time>{formatTime(time)}</time>}\n    </Flexbox>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;;;;AAgBA,MAAMA,SAAyB,EAAE,WAAW,WAAW,MAAM,QAAQ,iBAAiB;CACpF,MAAM,EAAE,WAAW,UAAU;EAAE;EAAW;EAAW;EAAM,CAAC;AAE5D,QACE,qBAACC;EACC,OAAO;EACP,WAAW,OAAO;EAClB,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK;;GAEJ,YAAY,OAAO,SAAS,aAAa;GACzC,YAAY,aAAa;GACzB,QAAQ,oBAAC,oBAAM,WAAW,KAAK,GAAQ;;GAChC;;AAId,oBAAe"}
+{"version":3,"file":"Title.mjs","names":["Title: FC<TitleProps>","Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Title.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { ChatItemProps } from '@/chat/ChatItem';\nimport { formatTime } from '@/utils/formatTime';\n\nimport { styles } from '../style';\n\nexport interface TitleProps {\n  avatar: ChatItemProps['avatar'];\n  placement?: ChatItemProps['placement'];\n  showTitle?: ChatItemProps['showTitle'];\n  time?: ChatItemProps['time'];\n  titleAddon?: ChatItemProps['titleAddon'];\n}\n\nconst Title: FC<TitleProps> = ({ showTitle, placement = 'left', time, avatar, titleAddon }) => {\n  return (\n    <Flexbox\n      align={'center'}\n      className={placement === 'left' ? styles.nameLeft : styles.nameRight}\n      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n      gap={4}\n    >\n      {showTitle ? avatar.title || 'untitled' : undefined}\n      {showTitle ? titleAddon : undefined}\n      {time && <time>{formatTime(time)}</time>}\n    </Flexbox>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;;;;AAgBA,MAAMA,SAAyB,EAAE,WAAW,YAAY,QAAQ,MAAM,QAAQ,iBAAiB;AAC7F,QACE,qBAACC;EACC,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,WAAW,OAAO;EAC3D,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK;;GAEJ,YAAY,OAAO,SAAS,aAAa;GACzC,YAAY,aAAa;GACzB,QAAQ,oBAAC,oBAAM,WAAW,KAAK,GAAQ;;GAChC;;AAId,oBAAe"}

package/es/chat/ChatItem/style.mjs

@@ -1,159 +1,311 @@
-import { createStyles } from "antd-style";
-import { rgba } from "polished";
+import { createStaticStyles, responsive } from "antd-style";
 
 //#region src/chat/ChatItem/style.ts
-const useStyles = createStyles(({ cx: cx$1, css: css$1, token, responsive }, { placement, variant, title, avatarSize, editing, time }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	const blockStylish = css$1`
-      padding-block: 8px;
-      padding-inline: 12px;
-      border: 1px solid ${rgba(token.colorBorderSecondary, .66)};
-      border-radius: ${token.borderRadiusLG}px;
-
-      background-color: ${token.colorBgContainer};
-    `;
-	const rawStylish = css$1`
-      padding-block-start: ${title ? 0 : "6px"};
-    `;
+    padding-block: 8px;
+    padding-inline: 12px;
+    border: 1px solid color-mix(in srgb, ${cssVar$1.colorBorderSecondary} 66%, transparent);
+    border-radius: ${cssVar$1.borderRadiusLG};
+
+    background-color: ${cssVar$1.colorBgContainer};
+  `;
+	const rawStylishWithTitle = css$1`
+    padding-block-start: 0;
+  `;
+	const rawStylishWithoutTitle = css$1`
+    padding-block-start: 6px;
+  `;
 	const rawContainerStylish = css$1`
-      margin-block-end: -16px;
-      transition: background-color 100ms ${token.motionEaseOut};
-    `;
-	const typeStylish = variant === "bubble" ? blockStylish : rawStylish;
-	const editingStylish = editing && css$1`
-        width: 100%;
-      `;
+    margin-block-end: -16px;
+    transition: background-color 100ms ${cssVar$1.motionEaseOut};
+  `;
+	const editingStylish = css$1`
+    width: 100%;
+  `;
 	return {
-		actions: cx$1(css$1`
-          flex: none;
-          align-self: ${variant === "bubble" ? "flex-end" : placement === "left" ? "flex-start" : "flex-end"};
-          justify-content: ${placement === "left" ? "flex-end" : "flex-start"};
-        `, editing && css$1`
-            pointer-events: none !important;
-            opacity: 0 !important;
-          `),
+		actionsBubbleLeft: css$1`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-end;
+    `,
+		actionsBubbleRight: css$1`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-start;
+    `,
+		actionsDocsLeft: css$1`
+      flex: none;
+      align-self: flex-start;
+      justify-content: flex-end;
+    `,
+		actionsDocsRight: css$1`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-start;
+    `,
+		actionsEditing: css$1`
+      pointer-events: none !important;
+      opacity: 0 !important;
+    `,
 		avatarContainer: css$1`
-        position: relative;
-        flex: none;
-        width: ${avatarSize}px;
-        height: ${avatarSize}px;
-      `,
+      position: relative;
+      flex: none;
+      width: var(--chat-item-avatar-size, 40px);
+      height: var(--chat-item-avatar-size, 40px);
+    `,
 		avatarGroupContainer: css$1`
-        width: ${avatarSize}px;
-      `,
-		container: cx$1(variant === "docs" && rawContainerStylish, css$1`
-          position: relative;
-
-          width: 100%;
-          max-width: 100vw;
-          padding-block: 24px 12px;
-          padding-inline: 12px;
-
-          time {
-            display: inline-block;
-            white-space: nowrap;
-          }
-
-          div[role='menubar'] {
-            display: flex;
-          }
-
-          time,
-          div[role='menubar'] {
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 200ms ${token.motionEaseOut};
-          }
-
-          &:hover {
-            time,
-            div[role='menubar'] {
-              pointer-events: unset;
-              opacity: 1;
-            }
-          }
-
-          ${responsive.mobile} {
-            padding-block-start: ${variant === "docs" ? "16px" : "12px"};
-            padding-inline: 8px;
-          }
-        `),
-		editingContainer: cx$1(editingStylish, css$1`
-          padding-block: 8px 12px;
-          padding-inline: 12px;
-          border: 1px solid ${token.colorBorderSecondary};
-
-          &:active,
-          &:hover {
-            border-color: ${token.colorBorder};
-          }
-        `, variant === "docs" && css$1`
-            border-radius: ${token.borderRadius}px;
-            background: ${token.colorFillQuaternary};
-          `),
+      width: var(--chat-item-avatar-size, 40px);
+    `,
+		container: css$1`
+      position: relative;
+
+      width: 100%;
+      max-width: 100vw;
+      padding-block: 24px 12px;
+      padding-inline: 12px;
+
+      time {
+        display: inline-block;
+        white-space: nowrap;
+      }
+
+      div[role='menubar'] {
+        display: flex;
+      }
+
+      time,
+      div[role='menubar'] {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 200ms ${cssVar$1.motionEaseOut};
+      }
+
+      &:hover {
+        time,
+        div[role='menubar'] {
+          pointer-events: unset;
+          opacity: 1;
+        }
+      }
+
+      ${responsive.sm} {
+        padding-block-start: 12px;
+        padding-inline: 8px;
+      }
+    `,
+		containerDocs: css$1`
+      ${rawContainerStylish}
+      position: relative;
+
+      width: 100%;
+      max-width: 100vw;
+      padding-block: 24px 12px;
+      padding-inline: 12px;
+
+      time {
+        display: inline-block;
+        white-space: nowrap;
+      }
+
+      div[role='menubar'] {
+        display: flex;
+      }
+
+      time,
+      div[role='menubar'] {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 200ms ${cssVar$1.motionEaseOut};
+      }
+
+      &:hover {
+        time,
+        div[role='menubar'] {
+          pointer-events: unset;
+          opacity: 1;
+        }
+      }
+
+      ${responsive.sm} {
+        padding-block-start: 16px;
+        padding-inline: 8px;
+      }
+    `,
+		editingContainer: css$1`
+      ${editingStylish}
+      padding-block: 8px 12px;
+      padding-inline: 12px;
+      border: 1px solid ${cssVar$1.colorBorderSecondary};
+
+      &:active,
+      &:hover {
+        border-color: ${cssVar$1.colorBorder};
+      }
+    `,
+		editingContainerDocs: css$1`
+      ${editingStylish}
+      padding-block: 8px 12px;
+      padding-inline: 12px;
+      border: 1px solid ${cssVar$1.colorBorderSecondary};
+      border-radius: ${cssVar$1.borderRadius};
+
+      background: ${cssVar$1.colorFillQuaternary};
+
+      &:active,
+      &:hover {
+        border-color: ${cssVar$1.colorBorder};
+      }
+    `,
 		editingInput: css$1`
-        width: 100%;
-      `,
+      width: 100%;
+    `,
 		errorContainer: css$1`
-        position: relative;
-        overflow: hidden;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+    `,
+		loadingLeft: css$1`
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: -4px;
+
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+
+      color: ${cssVar$1.colorBgLayout};
+
+      background: ${cssVar$1.colorPrimary};
+    `,
+		loadingRight: css$1`
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: -4px;
+
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+
+      color: ${cssVar$1.colorBgLayout};
+
+      background: ${cssVar$1.colorPrimary};
+    `,
+		messageBubble: css$1`
+      ${blockStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
         width: 100%;
-      `,
-		loading: css$1`
-        position: absolute;
-        inset-block-end: 0;
-        inset-inline: ${placement === "right" ? "-4px" : "unset"}
-          ${placement === "left" ? "-4px" : "unset"};
-
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-
-        color: ${token.colorBgLayout};
-
-        background: ${token.colorPrimary};
-      `,
-		message: cx$1(typeStylish, css$1`
-          position: relative;
-          overflow: hidden;
-          max-width: 100%;
-
-          ${responsive.mobile} {
-            width: 100%;
-          }
-        `),
-		messageContainer: cx$1(editingStylish, css$1`
-          position: relative;
-          overflow: hidden;
-          max-width: 100%;
-          margin-block-start: ${time ? -16 : 0}px;
-
-          ${responsive.mobile} {
-            overflow-x: auto;
-          }
-        `),
-		messageContent: cx$1(editingStylish, css$1`
-          position: relative;
-          overflow: hidden;
-          max-width: 100%;
-
-          ${responsive.mobile} {
-            flex-direction: column !important;
-          }
-        `),
-		messageExtra: cx$1("message-extra"),
-		name: css$1`
-        pointer-events: none;
+      }
+    `,
+		messageContainer: css$1`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerEditing: css$1`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerEditingWithTime: css$1`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      margin-block-start: -16px;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerWithTime: css$1`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      margin-block-start: -16px;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContent: css$1`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        flex-direction: column !important;
+      }
+    `,
+		messageContentEditing: css$1`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        flex-direction: column !important;
+      }
+    `,
+		messageDocsWithTitle: css$1`
+      ${rawStylishWithTitle}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        width: 100%;
+      }
+    `,
+		messageDocsWithoutTitle: css$1`
+      ${rawStylishWithoutTitle}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        width: 100%;
+      }
+    `,
+		messageExtra: css$1`
+      /* message-extra class */
+    `,
+		nameLeft: css$1`
+      pointer-events: none;
+
+      margin-block-end: 6px;
+
+      font-size: 12px;
+      line-height: 1;
+      color: ${cssVar$1.colorTextDescription};
+      text-align: start;
+    `,
+		nameRight: css$1`
+      pointer-events: none;
 
-        margin-block-end: 6px;
+      margin-block-end: 6px;
 
-        font-size: 12px;
-        line-height: 1;
-        color: ${token.colorTextDescription};
-        text-align: ${placement === "left" ? "left" : "right"};
-      `
+      font-size: 12px;
+      line-height: 1;
+      color: ${cssVar$1.colorTextDescription};
+      text-align: end;
+    `
 	};
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/ChatItem/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/chat/ChatItem/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\nimport { rgba } from 'polished';\n\nexport const useStyles = createStyles(\n  (\n    { cx, css, token, responsive },\n    {\n      placement,\n      variant,\n      title,\n      avatarSize,\n      editing,\n      time,\n    }: {\n      avatarSize?: number;\n      editing?: boolean;\n      placement?: 'left' | 'right';\n      primary?: boolean;\n      showTitle?: boolean;\n      time?: number;\n      title?: string;\n      variant?: 'bubble' | 'docs';\n    },\n  ) => {\n    const blockStylish = css`\n      padding-block: 8px;\n      padding-inline: 12px;\n      border: 1px solid ${rgba(token.colorBorderSecondary, 0.66)};\n      border-radius: ${token.borderRadiusLG}px;\n\n      background-color: ${token.colorBgContainer};\n    `;\n\n    const rawStylish = css`\n      padding-block-start: ${title ? 0 : '6px'};\n    `;\n\n    const rawContainerStylish = css`\n      margin-block-end: -16px;\n      transition: background-color 100ms ${token.motionEaseOut};\n    `;\n\n    const typeStylish = variant === 'bubble' ? blockStylish : rawStylish;\n\n    const editingStylish =\n      editing &&\n      css`\n        width: 100%;\n      `;\n\n    return {\n      actions: cx(\n        css`\n          flex: none;\n          align-self: ${variant === 'bubble'\n            ? 'flex-end'\n            : placement === 'left'\n              ? 'flex-start'\n              : 'flex-end'};\n          justify-content: ${placement === 'left' ? 'flex-end' : 'flex-start'};\n        `,\n        editing &&\n          css`\n            pointer-events: none !important;\n            opacity: 0 !important;\n          `,\n      ),\n      avatarContainer: css`\n        position: relative;\n        flex: none;\n        width: ${avatarSize}px;\n        height: ${avatarSize}px;\n      `,\n      avatarGroupContainer: css`\n        width: ${avatarSize}px;\n      `,\n      container: cx(\n        variant === 'docs' && rawContainerStylish,\n        css`\n          position: relative;\n\n          width: 100%;\n          max-width: 100vw;\n          padding-block: 24px 12px;\n          padding-inline: 12px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='menubar'] {\n            display: flex;\n          }\n\n          time,\n          div[role='menubar'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ${token.motionEaseOut};\n          }\n\n          &:hover {\n            time,\n            div[role='menubar'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ${responsive.mobile} {\n            padding-block-start: ${variant === 'docs' ? '16px' : '12px'};\n            padding-inline: 8px;\n          }\n        `,\n      ),\n      editingContainer: cx(\n        editingStylish,\n        css`\n          padding-block: 8px 12px;\n          padding-inline: 12px;\n          border: 1px solid ${token.colorBorderSecondary};\n\n          &:active,\n          &:hover {\n            border-color: ${token.colorBorder};\n          }\n        `,\n        variant === 'docs' &&\n          css`\n            border-radius: ${token.borderRadius}px;\n            background: ${token.colorFillQuaternary};\n          `,\n      ),\n      editingInput: css`\n        width: 100%;\n      `,\n      errorContainer: css`\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n      `,\n\n      loading: css`\n        position: absolute;\n        inset-block-end: 0;\n        inset-inline: ${placement === 'right' ? '-4px' : 'unset'}\n          ${placement === 'left' ? '-4px' : 'unset'};\n\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n\n        color: ${token.colorBgLayout};\n\n        background: ${token.colorPrimary};\n      `,\n      message: cx(\n        typeStylish,\n        css`\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ${responsive.mobile} {\n            width: 100%;\n          }\n        `,\n      ),\n      messageContainer: cx(\n        editingStylish,\n        css`\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n          margin-block-start: ${time ? -16 : 0}px;\n\n          ${responsive.mobile} {\n            overflow-x: auto;\n          }\n        `,\n      ),\n      messageContent: cx(\n        editingStylish,\n        css`\n          position: relative;\n          overflow: hidden;\n          max-width: 100%;\n\n          ${responsive.mobile} {\n            flex-direction: column !important;\n          }\n        `,\n      ),\n      messageExtra: cx('message-extra'),\n      name: css`\n        pointer-events: none;\n\n        margin-block-end: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ${token.colorTextDescription};\n        text-align: ${placement === 'left' ? 'left' : 'right'};\n      `,\n    };\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,UAAI,YAAK,OAAO,cAClB,EACE,WACA,SACA,OACA,YACA,SACA,WAWC;CACH,MAAM,eAAe,KAAG;;;0BAGF,KAAK,MAAM,sBAAsB,IAAK,CAAC;uBAC1C,MAAM,eAAe;;0BAElB,MAAM,iBAAiB;;CAG7C,MAAM,aAAa,KAAG;6BACG,QAAQ,IAAI,MAAM;;CAG3C,MAAM,sBAAsB,KAAG;;2CAEQ,MAAM,cAAc;;CAG3D,MAAM,cAAc,YAAY,WAAW,eAAe;CAE1D,MAAM,iBACJ,WACA,KAAG;;;AAIL,QAAO;EACL,SAASA,KACP,KAAG;;wBAEa,YAAY,WACtB,aACA,cAAc,SACZ,eACA,WAAW;6BACE,cAAc,SAAS,aAAa,aAAa;WAEtE,WACE,KAAG;;;YAIN;EACD,iBAAiB,KAAG;;;iBAGT,WAAW;kBACV,WAAW;;EAEvB,sBAAsB,KAAG;iBACd,WAAW;;EAEtB,WAAWA,KACT,YAAY,UAAU,qBACtB,KAAG;;;;;;;;;;;;;;;;;;;;;wCAqB6B,MAAM,cAAc;;;;;;;;;;;YAWhD,WAAW,OAAO;mCACK,YAAY,SAAS,SAAS,OAAO;;;UAIjE;EACD,kBAAkBA,KAChB,gBACA,KAAG;;;8BAGmB,MAAM,qBAAqB;;;;4BAI7B,MAAM,YAAY;;WAGtC,YAAY,UACV,KAAG;6BACgB,MAAM,aAAa;0BACtB,MAAM,oBAAoB;YAE7C;EACD,cAAc,KAAG;;;EAGjB,gBAAgB,KAAG;;;;;EAMnB,SAAS,KAAG;;;wBAGM,cAAc,UAAU,SAAS,QAAQ;YACrD,cAAc,SAAS,SAAS,QAAQ;;;;;;iBAMnC,MAAM,cAAc;;sBAEf,MAAM,aAAa;;EAEnC,SAASA,KACP,aACA,KAAG;;;;;YAKC,WAAW,OAAO;;;UAIvB;EACD,kBAAkBA,KAChB,gBACA,KAAG;;;;gCAIqB,OAAO,MAAM,EAAE;;YAEnC,WAAW,OAAO;;;UAIvB;EACD,gBAAgBA,KACd,gBACA,KAAG;;;;;YAKC,WAAW,OAAO;;;UAIvB;EACD,cAAcA,KAAG,gBAAgB;EACjC,MAAM,KAAG;;;;;;;iBAOE,MAAM,qBAAqB;sBACtB,cAAc,SAAS,SAAS,QAAQ;;EAEzD;EAEJ"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/chat/ChatItem/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const blockStylish = css`\n    padding-block: 8px;\n    padding-inline: 12px;\n    border: 1px solid color-mix(in srgb, ${cssVar.colorBorderSecondary} 66%, transparent);\n    border-radius: ${cssVar.borderRadiusLG};\n\n    background-color: ${cssVar.colorBgContainer};\n  `;\n\n  const rawStylishWithTitle = css`\n    padding-block-start: 0;\n  `;\n\n  const rawStylishWithoutTitle = css`\n    padding-block-start: 6px;\n  `;\n\n  const rawContainerStylish = css`\n    margin-block-end: -16px;\n    transition: background-color 100ms ${cssVar.motionEaseOut};\n  `;\n\n  const editingStylish = css`\n    width: 100%;\n  `;\n\n  return {\n    // Actions styles - placement + variant + editing combinations\n    actionsBubbleLeft: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-end;\n    `,\n    actionsBubbleRight: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-start;\n    `,\n    actionsDocsLeft: css`\n      flex: none;\n      align-self: flex-start;\n      justify-content: flex-end;\n    `,\n    actionsDocsRight: css`\n      flex: none;\n      align-self: flex-end;\n      justify-content: flex-start;\n    `,\n    actionsEditing: css`\n      pointer-events: none !important;\n      opacity: 0 !important;\n    `,\n\n    avatarContainer: css`\n      position: relative;\n      flex: none;\n      width: var(--chat-item-avatar-size, 40px);\n      height: var(--chat-item-avatar-size, 40px);\n    `,\n    avatarGroupContainer: css`\n      width: var(--chat-item-avatar-size, 40px);\n    `,\n    container: css`\n      position: relative;\n\n      width: 100%;\n      max-width: 100vw;\n      padding-block: 24px 12px;\n      padding-inline: 12px;\n\n      time {\n        display: inline-block;\n        white-space: nowrap;\n      }\n\n      div[role='menubar'] {\n        display: flex;\n      }\n\n      time,\n      div[role='menubar'] {\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 200ms ${cssVar.motionEaseOut};\n      }\n\n      &:hover {\n        time,\n        div[role='menubar'] {\n          pointer-events: unset;\n          opacity: 1;\n        }\n      }\n\n      ${responsive.sm} {\n        padding-block-start: 12px;\n        padding-inline: 8px;\n      }\n    `,\n\n    containerDocs: css`\n      ${rawContainerStylish}\n      position: relative;\n\n      width: 100%;\n      max-width: 100vw;\n      padding-block: 24px 12px;\n      padding-inline: 12px;\n\n      time {\n        display: inline-block;\n        white-space: nowrap;\n      }\n\n      div[role='menubar'] {\n        display: flex;\n      }\n\n      time,\n      div[role='menubar'] {\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 200ms ${cssVar.motionEaseOut};\n      }\n\n      &:hover {\n        time,\n        div[role='menubar'] {\n          pointer-events: unset;\n          opacity: 1;\n        }\n      }\n\n      ${responsive.sm} {\n        padding-block-start: 16px;\n        padding-inline: 8px;\n      }\n    `,\n    editingContainer: css`\n      ${editingStylish}\n      padding-block: 8px 12px;\n      padding-inline: 12px;\n      border: 1px solid ${cssVar.colorBorderSecondary};\n\n      &:active,\n      &:hover {\n        border-color: ${cssVar.colorBorder};\n      }\n    `,\n\n    editingContainerDocs: css`\n      ${editingStylish}\n      padding-block: 8px 12px;\n      padding-inline: 12px;\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      border-radius: ${cssVar.borderRadius};\n\n      background: ${cssVar.colorFillQuaternary};\n\n      &:active,\n      &:hover {\n        border-color: ${cssVar.colorBorder};\n      }\n    `,\n\n    editingInput: css`\n      width: 100%;\n    `,\n\n    errorContainer: css`\n      position: relative;\n      overflow: hidden;\n      width: 100%;\n    `,\n\n    loadingLeft: css`\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-start: -4px;\n\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n\n      color: ${cssVar.colorBgLayout};\n\n      background: ${cssVar.colorPrimary};\n    `,\n\n    loadingRight: css`\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-end: -4px;\n\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n\n      color: ${cssVar.colorBgLayout};\n\n      background: ${cssVar.colorPrimary};\n    `,\n\n    messageBubble: css`\n      ${blockStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageContainer: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerEditing: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerEditingWithTime: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      margin-block-start: -16px;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContainerWithTime: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      margin-block-start: -16px;\n\n      ${responsive.sm} {\n        overflow-x: auto;\n      }\n    `,\n\n    messageContent: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        flex-direction: column !important;\n      }\n    `,\n\n    messageContentEditing: css`\n      ${editingStylish}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        flex-direction: column !important;\n      }\n    `,\n\n    messageDocsWithTitle: css`\n      ${rawStylishWithTitle}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageDocsWithoutTitle: css`\n      ${rawStylishWithoutTitle}\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n\n      ${responsive.sm} {\n        width: 100%;\n      }\n    `,\n\n    messageExtra: css`\n      /* message-extra class */\n    `,\n\n    nameLeft: css`\n      pointer-events: none;\n\n      margin-block-end: 6px;\n\n      font-size: 12px;\n      line-height: 1;\n      color: ${cssVar.colorTextDescription};\n      text-align: start;\n    `,\n\n    nameRight: css`\n      pointer-events: none;\n\n      margin-block-end: 6px;\n\n      font-size: 12px;\n      line-height: 1;\n      color: ${cssVar.colorTextDescription};\n      text-align: end;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;CAC5D,MAAM,eAAe,KAAG;;;2CAGiBA,SAAO,qBAAqB;qBAClDA,SAAO,eAAe;;wBAEnBA,SAAO,iBAAiB;;CAG9C,MAAM,sBAAsB,KAAG;;;CAI/B,MAAM,yBAAyB,KAAG;;;CAIlC,MAAM,sBAAsB,KAAG;;yCAEQA,SAAO,cAAc;;CAG5D,MAAM,iBAAiB,KAAG;;;AAI1B,QAAO;EAEL,mBAAmB,KAAG;;;;;EAKtB,oBAAoB,KAAG;;;;;EAKvB,iBAAiB,KAAG;;;;;EAKpB,kBAAkB,KAAG;;;;;EAKrB,gBAAgB,KAAG;;;;EAKnB,iBAAiB,KAAG;;;;;;EAMpB,sBAAsB,KAAG;;;EAGzB,WAAW,KAAG;;;;;;;;;;;;;;;;;;;;;oCAqBkBA,SAAO,cAAc;;;;;;;;;;;QAWjD,WAAW,GAAG;;;;;EAMlB,eAAe,KAAG;QACd,oBAAoB;;;;;;;;;;;;;;;;;;;;;oCAqBQA,SAAO,cAAc;;;;;;;;;;;QAWjD,WAAW,GAAG;;;;;EAKlB,kBAAkB,KAAG;QACjB,eAAe;;;0BAGGA,SAAO,qBAAqB;;;;wBAI9BA,SAAO,YAAY;;;EAIvC,sBAAsB,KAAG;QACrB,eAAe;;;0BAGGA,SAAO,qBAAqB;uBAC/BA,SAAO,aAAa;;oBAEvBA,SAAO,oBAAoB;;;;wBAIvBA,SAAO,YAAY;;;EAIvC,cAAc,KAAG;;;EAIjB,gBAAgB,KAAG;;;;;EAMnB,aAAa,KAAG;;;;;;;;;eASLA,SAAO,cAAc;;oBAEhBA,SAAO,aAAa;;EAGpC,cAAc,KAAG;;;;;;;;;eASNA,SAAO,cAAc;;oBAEhBA,SAAO,aAAa;;EAGpC,eAAe,KAAG;QACd,aAAa;;;;;QAKb,WAAW,GAAG;;;;EAKlB,kBAAkB,KAAG;;;;;QAKjB,WAAW,GAAG;;;;EAKlB,yBAAyB,KAAG;QACxB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,iCAAiC,KAAG;QAChC,eAAe;;;;;;QAMf,WAAW,GAAG;;;;EAKlB,0BAA0B,KAAG;;;;;;QAMzB,WAAW,GAAG;;;;EAKlB,gBAAgB,KAAG;;;;;QAKf,WAAW,GAAG;;;;EAKlB,uBAAuB,KAAG;QACtB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,sBAAsB,KAAG;QACrB,oBAAoB;;;;;QAKpB,WAAW,GAAG;;;;EAKlB,yBAAyB,KAAG;QACxB,uBAAuB;;;;;QAKvB,WAAW,GAAG;;;;EAKlB,cAAc,KAAG;;;EAIjB,UAAU,KAAG;;;;;;;eAOFA,SAAO,qBAAqB;;;EAIvC,WAAW,KAAG;;;;;;;eAOHA,SAAO,qBAAqB;;;EAGxC;EACD"}

package/es/chat/ChatList/ChatList.d.mts

@@ -1,8 +1,8 @@
 import { ChatListProps } from "./type.mjs";
-import * as react120 from "react";
+import * as react107 from "react";
 
 //#region src/chat/ChatList/ChatList.d.ts
-declare const ChatList: react120.NamedExoticComponent<ChatListProps>;
+declare const ChatList: react107.NamedExoticComponent<ChatListProps>;
 //#endregion
 export { ChatList };
 //# sourceMappingURL=ChatList.d.mts.map

package/es/chat/ChatList/ChatList.mjs

@@ -2,13 +2,13 @@
 
 import ChatListItem_default from "./components/ChatListItem.mjs";
 import HistoryDivider_default from "./components/HistoryDivider.mjs";
-import { useStyles } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { Fragment, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
 
 //#region src/chat/ChatList/ChatList.tsx
 const ChatList = memo(({ onActionsClick, onAvatarsClick, renderMessagesExtra, className, data, variant = "bubble", text, showTitle, onMessageChange, renderMessages, renderErrorMessages, loadingId, renderItems, enableHistoryCount, renderActions, historyCount = 0, showAvatar, ...rest }) => {
-	const { cx, styles } = useStyles();
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(styles.container, className),
 		...rest,

package/es/chat/ChatList/ChatList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatList.mjs","names":["HistoryDivider","ChatListItem"],"sources":["../../../src/chat/ChatList/ChatList.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment, memo } from 'react';\n\nimport ChatListItem from './components/ChatListItem';\nimport HistoryDivider from './components/HistoryDivider';\nimport { useStyles } from './style';\nimport type { ChatListProps } from './type';\n\nconst ChatList = memo<ChatListProps>(\n  ({\n    onActionsClick,\n    onAvatarsClick,\n    renderMessagesExtra,\n    className,\n    data,\n    variant = 'bubble',\n    text,\n    showTitle,\n    onMessageChange,\n    renderMessages,\n    renderErrorMessages,\n    loadingId,\n    renderItems,\n    enableHistoryCount,\n    renderActions,\n    historyCount = 0,\n    showAvatar,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    return (\n      <div className={cx(styles.container, className)} {...rest}>\n        {data.map((item, index) => {\n          const itemProps = {\n            loading: loadingId === item.id,\n            onActionsClick,\n            onAvatarsClick,\n            onMessageChange,\n            renderActions,\n            renderErrorMessages,\n            renderItems,\n            renderMessages,\n            renderMessagesExtra,\n            showAvatar,\n            showTitle,\n            text,\n            variant,\n          };\n\n          const historyLength = data.length;\n          const enableHistoryDivider =\n            enableHistoryCount &&\n            historyLength > historyCount &&\n            historyCount === historyLength - index + 1;\n\n          return (\n            <Fragment key={item.id}>\n              <HistoryDivider enable={enableHistoryDivider} text={text?.history} />\n              <ChatListItem {...itemProps} {...item} />\n            </Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ChatList;\n"],"mappings":";;;;;;;;;AASA,MAAM,WAAW,MACd,EACC,gBACA,gBACA,qBACA,WACA,MACA,UAAU,UACV,MACA,WACA,iBACA,gBACA,qBACA,WACA,aACA,oBACA,eACA,eAAe,GACf,YACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;YAClD,KAAK,KAAK,MAAM,UAAU;GACzB,MAAM,YAAY;IAChB,SAAS,cAAc,KAAK;IAC5B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GAED,MAAM,gBAAgB,KAAK;AAM3B,UACE,qBAAC,uBACC,oBAACA;IAAe,QANlB,sBACA,gBAAgB,gBAChB,iBAAiB,gBAAgB,QAAQ;IAIO,MAAM,MAAM;KAAW,EACrE,oBAACC;IAAa,GAAI;IAAW,GAAI;KAAQ,KAF5B,KAAK,GAGT;IAEb;GACE;EAGX;AAED,uBAAe"}
+{"version":3,"file":"ChatList.mjs","names":["HistoryDivider","ChatListItem"],"sources":["../../../src/chat/ChatList/ChatList.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Fragment, memo } from 'react';\n\nimport ChatListItem from './components/ChatListItem';\nimport HistoryDivider from './components/HistoryDivider';\nimport { styles } from './style';\nimport type { ChatListProps } from './type';\n\nconst ChatList = memo<ChatListProps>(\n  ({\n    onActionsClick,\n    onAvatarsClick,\n    renderMessagesExtra,\n    className,\n    data,\n    variant = 'bubble',\n    text,\n    showTitle,\n    onMessageChange,\n    renderMessages,\n    renderErrorMessages,\n    loadingId,\n    renderItems,\n    enableHistoryCount,\n    renderActions,\n    historyCount = 0,\n    showAvatar,\n    ...rest\n  }) => {\n    return (\n      <div className={cx(styles.container, className)} {...rest}>\n        {data.map((item, index) => {\n          const itemProps = {\n            loading: loadingId === item.id,\n            onActionsClick,\n            onAvatarsClick,\n            onMessageChange,\n            renderActions,\n            renderErrorMessages,\n            renderItems,\n            renderMessages,\n            renderMessagesExtra,\n            showAvatar,\n            showTitle,\n            text,\n            variant,\n          };\n\n          const historyLength = data.length;\n          const enableHistoryDivider =\n            enableHistoryCount &&\n            historyLength > historyCount &&\n            historyCount === historyLength - index + 1;\n\n          return (\n            <Fragment key={item.id}>\n              <HistoryDivider enable={enableHistoryDivider} text={text?.history} />\n              <ChatListItem {...itemProps} {...item} />\n            </Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ChatList;\n"],"mappings":";;;;;;;;;;AAUA,MAAM,WAAW,MACd,EACC,gBACA,gBACA,qBACA,WACA,MACA,UAAU,UACV,MACA,WACA,iBACA,gBACA,qBACA,WACA,aACA,oBACA,eACA,eAAe,GACf,YACA,GAAG,WACC;AACJ,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;YAClD,KAAK,KAAK,MAAM,UAAU;GACzB,MAAM,YAAY;IAChB,SAAS,cAAc,KAAK;IAC5B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GAED,MAAM,gBAAgB,KAAK;AAM3B,UACE,qBAAC,uBACC,oBAACA;IAAe,QANlB,sBACA,gBAAgB,gBAChB,iBAAiB,gBAAgB,QAAQ;IAIO,MAAM,MAAM;KAAW,EACrE,oBAACC;IAAa,GAAI;IAAW,GAAI;KAAQ,KAF5B,KAAK,GAGT;IAEb;GACE;EAGX;AAED,uBAAe"}

package/es/chat/ChatList/style.mjs

@@ -1,12 +1,12 @@
-import { createStyles } from "antd-style";
+import { createStaticStyles } from "antd-style";
 
 //#region src/chat/ChatList/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css: css$1 }) => {
 	return { container: css$1`
       position: relative;
     ` };
 });
 
 //#endregion
-export { useStyles };
+export { styles };
 //# sourceMappingURL=style.mjs.map

package/es/chat/ChatList/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatList/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AACjD,QAAO,EACL,WAAW,KAAG;;OAGf;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/chat/ChatList/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    container: css`\n      position: relative;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,WAAW,KAAG;;OAGf;EACD"}

package/es/chat/EditableMessage/EditableMessage.d.mts

@@ -1,8 +1,8 @@
 import { EditableMessageProps } from "./type.mjs";
-import * as react121 from "react";
+import * as react106 from "react";
 
 //#region src/chat/EditableMessage/EditableMessage.d.ts
-declare const EditableMessage: react121.NamedExoticComponent<EditableMessageProps>;
+declare const EditableMessage: react106.NamedExoticComponent<EditableMessageProps>;
 //#endregion
 export { EditableMessage };
 //# sourceMappingURL=EditableMessage.d.mts.map

package/es/chat/EditableMessage/EditableMessage.mjs

@@ -5,8 +5,8 @@ import MessageInput_default from "../MessageInput/MessageInput.mjs";
 import MessageModal_default from "../MessageModal/MessageModal.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
 import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
 
 //#region src/chat/EditableMessage/EditableMessage.tsx
 const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {

package/es/chat/EditableMessageList/EditableMessageList.d.mts

@@ -1,8 +1,8 @@
 import { EditableMessageListProps } from "./type.mjs";
-import * as react122 from "react";
+import * as react111 from "react";
 
 //#region src/chat/EditableMessageList/EditableMessageList.d.ts
-declare const EditableMessageList: react122.NamedExoticComponent<EditableMessageListProps>;
+declare const EditableMessageList: react111.NamedExoticComponent<EditableMessageListProps>;
 //#endregion
 export { EditableMessageList };
 //# sourceMappingURL=EditableMessageList.d.mts.map