@jinmi/ui 0.0.0-stage → 6.0.1

package/es/chat/ChatItem/components/Loading.mjs

@@ -0,0 +1,26 @@
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import Icon from "../../../Icon/Icon.mjs";
+import { styles } from "../style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+//#region src/chat/ChatItem/components/Loading.tsx
+const Loading = ({ loading, placement = "left" }) => {
+	if (!loading) return null;
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		className: placement === "left" ? styles.loadingLeft : styles.loadingRight,
+		justify: "center",
+		children: /* @__PURE__ */ jsx(Icon, {
+			spin: true,
+			icon: Loader2,
+			size: {
+				size: 12,
+				strokeWidth: 3
+			}
+		})
+	});
+};
+//#endregion
+export { Loading as default };
+
+//# sourceMappingURL=Loading.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Loading.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\r\nimport type { FC } from 'react';\r\n\r\nimport { type ChatItemProps } from '@/chat/ChatItem';\r\nimport { Flexbox } from '@/Flex';\r\nimport Icon from '@/Icon';\r\n\r\nimport { styles } from '../style';\r\n\r\nexport interface LoadingProps {\r\n  loading?: ChatItemProps['loading'];\r\n  placement?: ChatItemProps['placement'];\r\n}\r\n\r\nconst Loading: FC<LoadingProps> = ({ loading, placement = 'left' }) => {\r\n  if (!loading) return null;\r\n\r\n  return (\r\n    <Flexbox\r\n      align={'center'}\r\n      className={placement === 'left' ? styles.loadingLeft : styles.loadingRight}\r\n      justify={'center'}\r\n    >\r\n      <Icon spin icon={Loader2} size={{ size: 12, strokeWidth: 3 }} />\r\n    </Flexbox>\r\n  );\r\n};\r\n\r\nexport default Loading;\r\n"],"mappings":";;;;;;AAcA,MAAM,WAA6B,EAAE,SAAS,YAAY,aAAa;CACrE,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAACA,mBAAD;EACE,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,cAAc,OAAO;EAC9D,SAAS;EAET,UAAA,oBAAC,MAAD;GAAM,MAAA;GAAK,MAAM;GAAS,MAAM;IAAE,MAAM;IAAI,aAAa;GAAE;EAAI,CAAA;CACxD,CAAA;AAEb"}

package/es/chat/ChatItem/components/MessageContent.mjs

@@ -0,0 +1,43 @@
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { styles } from "../style.mjs";
+import EditableMessage from "../../EditableMessage/EditableMessage.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+//#region src/chat/ChatItem/components/MessageContent.tsx
+const MessageContent = memo(({ editing, onChange, onEditingChange, text, message, placement, messageExtra, renderMessage, variant, primary, onDoubleClick, fontSize, markdownProps }) => {
+	const { mobile } = useResponsive();
+	const messageClassName = useMemo(() => {
+		if (variant === "bubble") return styles.messageBubble;
+		return styles.messageDocsWithoutTitle;
+	}, [variant]);
+	const editingContainerClassName = useMemo(() => {
+		return variant === "docs" ? styles.editingContainerDocs : styles.editingContainer;
+	}, [variant]);
+	const content = /* @__PURE__ */ jsx(EditableMessage, {
+		fullFeaturedCodeBlock: true,
+		classNames: { input: styles.editingInput },
+		editButtonSize: "small",
+		editing,
+		fontSize,
+		markdownProps,
+		openModal: mobile ? editing : void 0,
+		text,
+		value: message ? String(message) : "",
+		onChange,
+		onEditingChange
+	});
+	const messageContent = renderMessage ? renderMessage(content) : content;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(messageClassName, editing && editingContainerClassName),
+		onDoubleClick,
+		children: [messageContent, messageExtra && !editing ? /* @__PURE__ */ jsx("div", {
+			className: styles.messageExtra,
+			children: messageExtra
+		}) : null]
+	});
+});
+//#endregion
+export { MessageContent as default };
+
+//# sourceMappingURL=MessageContent.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContent.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/MessageContent.tsx"],"sourcesContent":["import { cx, useResponsive } from 'antd-style';\r\nimport { memo, type ReactNode, useMemo } from 'react';\r\n\r\nimport { type ChatItemProps } from '@/chat/ChatItem';\r\nimport EditableMessage from '@/chat/EditableMessage';\r\nimport { Flexbox } from '@/Flex';\r\nimport { type MarkdownProps } from '@/Markdown';\r\n\r\nimport { styles } from '../style';\r\n\r\nexport interface MessageContentProps {\r\n  editing?: ChatItemProps['editing'];\r\n  fontSize?: number;\r\n  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;\r\n  message?: ReactNode;\r\n  messageExtra?: ChatItemProps['messageExtra'];\r\n  onChange?: ChatItemProps['onChange'];\r\n  onDoubleClick?: ChatItemProps['onDoubleClick'];\r\n  onEditingChange?: ChatItemProps['onEditingChange'];\r\n  placement?: ChatItemProps['placement'];\r\n  primary?: ChatItemProps['primary'];\r\n  renderMessage?: ChatItemProps['renderMessage'];\r\n  text?: ChatItemProps['text'];\r\n  variant?: ChatItemProps['variant'];\r\n}\r\n\r\nconst MessageContent = memo<MessageContentProps>(\r\n  ({\r\n    editing,\r\n    onChange,\r\n    onEditingChange,\r\n    text,\r\n    message,\r\n    placement,\r\n    messageExtra,\r\n    renderMessage,\r\n    variant,\r\n    primary,\r\n    onDoubleClick,\r\n    fontSize,\r\n    markdownProps,\r\n  }) => {\r\n    // placement and primary are part of the interface but not used in this component\r\n    void placement;\r\n    void primary;\r\n    const { mobile } = useResponsive();\r\n\r\n    const messageClassName = useMemo(() => {\r\n      if (variant === 'bubble') return styles.messageBubble;\r\n      // For docs variant, we need title info, but we don't have it here\r\n      // Use withoutTitle as default\r\n      return styles.messageDocsWithoutTitle;\r\n    }, [variant]);\r\n\r\n    const editingContainerClassName = useMemo(() => {\r\n      return variant === 'docs' ? styles.editingContainerDocs : styles.editingContainer;\r\n    }, [variant]);\r\n\r\n    const content = (\r\n      <EditableMessage\r\n        fullFeaturedCodeBlock\r\n        classNames={{ input: styles.editingInput }}\r\n        editButtonSize={'small'}\r\n        editing={editing}\r\n        fontSize={fontSize}\r\n        markdownProps={markdownProps}\r\n        openModal={mobile ? editing : undefined}\r\n        text={text}\r\n        value={message ? String(message) : ''}\r\n        onChange={onChange}\r\n        onEditingChange={onEditingChange}\r\n      />\r\n    );\r\n    const messageContent = renderMessage ? renderMessage(content) : content;\r\n\r\n    return (\r\n      <Flexbox\r\n        className={cx(messageClassName, editing && editingContainerClassName)}\r\n        onDoubleClick={onDoubleClick}\r\n      >\r\n        {messageContent}\r\n        {messageExtra && !editing ? (\r\n          <div className={styles.messageExtra}>{messageExtra}</div>\r\n        ) : null}\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nexport default MessageContent;\r\n"],"mappings":";;;;;;;AA0BA,MAAM,iBAAiB,MACpB,EACC,SACA,UACA,iBACA,MACA,SACA,WACA,cACA,eACA,SACA,SACA,eACA,UACA,oBACI;CAIJ,MAAM,EAAE,WAAW,cAAc;CAEjC,MAAM,mBAAmB,cAAc;EACrC,IAAI,YAAY,UAAU,OAAO,OAAO;EAGxC,OAAO,OAAO;CAChB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,4BAA4B,cAAc;EAC9C,OAAO,YAAY,SAAS,OAAO,uBAAuB,OAAO;CACnE,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,UACJ,oBAAC,iBAAD;EACE,uBAAA;EACA,YAAY,EAAE,OAAO,OAAO,aAAa;EACzC,gBAAgB;EACP;EACC;EACK;EACf,WAAW,SAAS,UAAU,KAAA;EACxB;EACN,OAAO,UAAU,OAAO,OAAO,IAAI;EACzB;EACO;CAClB,CAAA;CAEH,MAAM,iBAAiB,gBAAgB,cAAc,OAAO,IAAI;CAEhE,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,kBAAkB,WAAW,yBAAyB;EACrD;EAFjB,UAAA,CAIG,gBACA,gBAAgB,CAAC,UAChB,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAe,UAAA;EAAkB,CAAA,IACtD,IACG;;AAEb,CACF"}

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

@@ -0,0 +1,22 @@
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import { styles } from "../style.mjs";
+import { formatTime } from "../../../utils/formatTime.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/ChatItem/components/Title.tsx
+const Title = ({ showTitle, placement = "left", time, avatar, titleAddon }) => {
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: placement === "left" ? styles.nameLeft : styles.nameRight,
+		direction: placement === "left" ? "horizontal" : "horizontal-reverse",
+		gap: 4,
+		children: [
+			showTitle ? avatar.title || "untitled" : void 0,
+			showTitle ? titleAddon : void 0,
+			time && /* @__PURE__ */ jsx("time", { children: formatTime(time) })
+		]
+	});
+};
+//#endregion
+export { Title as default };
+
+//# sourceMappingURL=Title.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Title.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Title.tsx"],"sourcesContent":["import type { FC } from 'react';\r\n\r\nimport { type ChatItemProps } from '@/chat/ChatItem';\r\nimport { Flexbox } from '@/Flex';\r\nimport { formatTime } from '@/utils/formatTime';\r\n\r\nimport { styles } from '../style';\r\n\r\nexport interface TitleProps {\r\n  avatar: ChatItemProps['avatar'];\r\n  placement?: ChatItemProps['placement'];\r\n  showTitle?: ChatItemProps['showTitle'];\r\n  time?: ChatItemProps['time'];\r\n  titleAddon?: ChatItemProps['titleAddon'];\r\n}\r\n\r\nconst Title: FC<TitleProps> = ({ showTitle, placement = 'left', time, avatar, titleAddon }) => {\r\n  return (\r\n    <Flexbox\r\n      align={'center'}\r\n      className={placement === 'left' ? styles.nameLeft : styles.nameRight}\r\n      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\r\n      gap={4}\r\n    >\r\n      {showTitle ? avatar.title || 'untitled' : undefined}\r\n      {showTitle ? titleAddon : undefined}\r\n      {time && <time>{formatTime(time)}</time>}\r\n    </Flexbox>\r\n  );\r\n};\r\n\r\nexport default Title;\r\n"],"mappings":";;;;;AAgBA,MAAM,SAAyB,EAAE,WAAW,YAAY,QAAQ,MAAM,QAAQ,iBAAiB;CAC7F,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,cAAc,SAAS,OAAO,WAAW,OAAO;EAC3D,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK;EAJP,UAAA;GAMG,YAAY,OAAO,SAAS,aAAa,KAAA;GACzC,YAAY,aAAa,KAAA;GACzB,QAAQ,oBAAC,QAAD,EAAA,UAAO,WAAW,IAAI,EAAQ,CAAA;EAChC;;AAEb"}

package/es/chat/ChatItem/index.d.mts

@@ -0,0 +1,3 @@
+import { ChatItemProps } from "./type.mjs";
+import ChatItem from "./ChatItem.mjs";
+export { type ChatItemProps, ChatItem as default };

package/es/chat/ChatItem/style.mjs

@@ -0,0 +1,325 @@
+import { createStaticStyles, responsive } from "antd-style";
+//#region src/chat/ChatItem/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const blockStylish = css`
+    padding-block: 8px;
+    padding-inline: 12px;
+    border: 1px solid color-mix(in srgb, ${cssVar.colorBorderSecondary} 66%, transparent);
+    border-radius: ${cssVar.borderRadiusLG};
+
+    background-color: ${cssVar.colorBgContainer};
+  `;
+	const rawStylishWithTitle = css`
+    padding-block-start: 0;
+  `;
+	const rawStylishWithoutTitle = css`
+    padding-block-start: 6px;
+  `;
+	const rawContainerStylish = css`
+    margin-block-end: -16px;
+    transition: background-color 100ms ${cssVar.motionEaseOut};
+  `;
+	const editingStylish = css`
+    width: 100%;
+  `;
+	return {
+		actionsBubbleLeft: css`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-end;
+    `,
+		actionsBubbleRight: css`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-start;
+    `,
+		actionsDocsLeft: css`
+      flex: none;
+      align-self: flex-start;
+      justify-content: flex-end;
+    `,
+		actionsDocsRight: css`
+      flex: none;
+      align-self: flex-end;
+      justify-content: flex-start;
+    `,
+		actionsEditing: css`
+      pointer-events: none !important;
+      opacity: 0 !important;
+    `,
+		avatarContainer: css`
+      position: relative;
+      flex: none;
+      width: var(--chat-item-avatar-size, 40px);
+      height: var(--chat-item-avatar-size, 40px);
+    `,
+		avatarGroupContainer: css`
+      width: var(--chat-item-avatar-size, 40px);
+    `,
+		container: css`
+      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.motionEaseOut};
+      }
+
+      &:hover {
+        time,
+        div[role='menubar'] {
+          pointer-events: unset;
+          opacity: 1;
+        }
+      }
+
+      div[role='menubar']:has([data-popup-open]),
+      div[role='menubar'][data-popup-open] {
+        pointer-events: unset !important;
+        opacity: 1 !important;
+
+        [data-popup-open] {
+          background: ${cssVar.colorFillTertiary};
+        }
+      }
+
+      ${responsive.sm} {
+        padding-block-start: 12px;
+        padding-inline: 8px;
+      }
+    `,
+		containerDocs: css`
+      ${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.motionEaseOut};
+      }
+
+      &:hover {
+        time,
+        div[role='menubar'] {
+          pointer-events: unset;
+          opacity: 1;
+        }
+      }
+
+      div[role='menubar']:has(.jinmi-dropdown-menu-trigger[data-popup-open]) {
+        pointer-events: unset;
+        opacity: 1;
+      }
+
+      ${responsive.sm} {
+        padding-block-start: 16px;
+        padding-inline: 8px;
+      }
+    `,
+		editingContainer: css`
+      ${editingStylish}
+      padding-block: 8px 12px;
+      padding-inline: 12px;
+      border: 1px solid ${cssVar.colorBorderSecondary};
+
+      &:active,
+      &:hover {
+        border-color: ${cssVar.colorBorder};
+      }
+    `,
+		editingContainerDocs: css`
+      ${editingStylish}
+      padding-block: 8px 12px;
+      padding-inline: 12px;
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      border-radius: ${cssVar.borderRadius};
+
+      background: ${cssVar.colorFillQuaternary};
+
+      &:active,
+      &:hover {
+        border-color: ${cssVar.colorBorder};
+      }
+    `,
+		editingInput: css`
+      width: 100%;
+    `,
+		errorContainer: css`
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+    `,
+		loadingLeft: css`
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: -4px;
+
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+
+      color: ${cssVar.colorBgLayout};
+
+      background: ${cssVar.colorPrimary};
+    `,
+		loadingRight: css`
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: -4px;
+
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+
+      color: ${cssVar.colorBgLayout};
+
+      background: ${cssVar.colorPrimary};
+    `,
+		messageBubble: css`
+      ${blockStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        width: 100%;
+      }
+    `,
+		messageContainer: css`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerEditing: css`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerEditingWithTime: css`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      margin-block-start: -16px;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContainerWithTime: css`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      margin-block-start: -16px;
+
+      ${responsive.sm} {
+        overflow-x: auto;
+      }
+    `,
+		messageContent: css`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        flex-direction: column !important;
+      }
+    `,
+		messageContentEditing: css`
+      ${editingStylish}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        flex-direction: column !important;
+      }
+    `,
+		messageDocsWithTitle: css`
+      ${rawStylishWithTitle}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        width: 100%;
+      }
+    `,
+		messageDocsWithoutTitle: css`
+      ${rawStylishWithoutTitle}
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+
+      ${responsive.sm} {
+        width: 100%;
+      }
+    `,
+		messageExtra: css`
+      /* message-extra class */
+    `,
+		nameLeft: css`
+      pointer-events: none;
+
+      margin-block-end: 6px;
+
+      font-size: 12px;
+      line-height: 1;
+      color: ${cssVar.colorTextDescription};
+      text-align: start;
+    `,
+		nameRight: css`
+      pointer-events: none;
+
+      margin-block-end: 6px;
+
+      font-size: 12px;
+      line-height: 1;
+      color: ${cssVar.colorTextDescription};
+      text-align: end;
+    `
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"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      div[role='menubar']:has([data-popup-open]),\n      div[role='menubar'][data-popup-open] {\n        pointer-events: unset !important;\n        opacity: 1 !important;\n\n        [data-popup-open] {\n          background: ${cssVar.colorFillTertiary};\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      div[role='menubar']:has(.jinmi-dropdown-menu-trigger[data-popup-open]) {\n        pointer-events: unset;\n        opacity: 1;\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,KAAK,aAAa;CAC5D,MAAM,eAAe,GAAG;;;2CAGiB,OAAO,qBAAqB;qBAClD,OAAO,eAAe;;wBAEnB,OAAO,iBAAiB;;CAG9C,MAAM,sBAAsB,GAAG;;;CAI/B,MAAM,yBAAyB,GAAG;;;CAIlC,MAAM,sBAAsB,GAAG;;yCAEQ,OAAO,cAAc;;CAG5D,MAAM,iBAAiB,GAAG;;;CAI1B,OAAO;EAEL,mBAAmB,GAAG;;;;;EAKtB,oBAAoB,GAAG;;;;;EAKvB,iBAAiB,GAAG;;;;;EAKpB,kBAAkB,GAAG;;;;;EAKrB,gBAAgB,GAAG;;;;EAKnB,iBAAiB,GAAG;;;;;;EAMpB,sBAAsB,GAAG;;;EAGzB,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;oCAqBkB,OAAO,cAAc;;;;;;;;;;;;;;;;;wBAiBjC,OAAO,kBAAkB;;;;QAIzC,WAAW,GAAG;;;;;EAMlB,eAAe,GAAG;QACd,oBAAoB;;;;;;;;;;;;;;;;;;;;;oCAqBQ,OAAO,cAAc;;;;;;;;;;;;;;;;QAgBjD,WAAW,GAAG;;;;;EAKlB,kBAAkB,GAAG;QACjB,eAAe;;;0BAGG,OAAO,qBAAqB;;;;wBAI9B,OAAO,YAAY;;;EAIvC,sBAAsB,GAAG;QACrB,eAAe;;;0BAGG,OAAO,qBAAqB;uBAC/B,OAAO,aAAa;;oBAEvB,OAAO,oBAAoB;;;;wBAIvB,OAAO,YAAY;;;EAIvC,cAAc,GAAG;;;EAIjB,gBAAgB,GAAG;;;;;EAMnB,aAAa,GAAG;;;;;;;;;eASL,OAAO,cAAc;;oBAEhB,OAAO,aAAa;;EAGpC,cAAc,GAAG;;;;;;;;;eASN,OAAO,cAAc;;oBAEhB,OAAO,aAAa;;EAGpC,eAAe,GAAG;QACd,aAAa;;;;;QAKb,WAAW,GAAG;;;;EAKlB,kBAAkB,GAAG;;;;;QAKjB,WAAW,GAAG;;;;EAKlB,yBAAyB,GAAG;QACxB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,iCAAiC,GAAG;QAChC,eAAe;;;;;;QAMf,WAAW,GAAG;;;;EAKlB,0BAA0B,GAAG;;;;;;QAMzB,WAAW,GAAG;;;;EAKlB,gBAAgB,GAAG;;;;;QAKf,WAAW,GAAG;;;;EAKlB,uBAAuB,GAAG;QACtB,eAAe;;;;;QAKf,WAAW,GAAG;;;;EAKlB,sBAAsB,GAAG;QACrB,oBAAoB;;;;;QAKpB,WAAW,GAAG;;;;EAKlB,yBAAyB,GAAG;QACxB,uBAAuB;;;;;QAKvB,WAAW,GAAG;;;;EAKlB,cAAc,GAAG;;;EAIjB,UAAU,GAAG;;;;;;;eAOF,OAAO,qBAAqB;;;EAIvC,WAAW,GAAG;;;;;;;eAOH,OAAO,qBAAqB;;;CAGzC;AACF,CAAC"}

package/es/chat/ChatItem/type.d.mts

@@ -0,0 +1,99 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { DivProps } from "../../types/index.mjs";
+import { AvatarProps } from "../../base-ui/Avatar/type.mjs";
+import "../../base-ui/Avatar/index.mjs";
+import { MarkdownProps } from "../../Markdown/type.mjs";
+import "../../Markdown/index.mjs";
+import { AlertProps } from "../../base-ui/Alert/type.mjs";
+import "../../base-ui/Alert/index.mjs";
+import { EditableMessageProps } from "../EditableMessage/type.mjs";
+import "../EditableMessage/index.mjs";
+import { MetaData } from "../types/meta.mjs";
+import "../types/index.mjs";
+import { ReactNode } from "react";
+//#region src/chat/ChatItem/type.d.ts
+interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange'> {
+  aboveMessage?: ReactNode;
+  /**
+   * @description Actions to be displayed in the chat item
+   */
+  actions?: ReactNode;
+  actionsWrapWidth?: number;
+  /**
+   * @description Metadata for the avatar
+   */
+  avatar: MetaData;
+  avatarAddon?: ReactNode;
+  avatarProps?: AvatarProps;
+  belowMessage?: ReactNode;
+  /**
+   * @description Whether the chat item is in editing mode
+   */
+  editing?: boolean;
+  /**
+   * @description Props for Error render
+   */
+  error?: AlertProps;
+  errorMessage?: ReactNode;
+  fontSize?: number;
+  /**
+   * @description Whether the chat item is in loading state
+   */
+  loading?: boolean;
+  markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
+  /**
+   * @description The message content of the chat item
+   */
+  message?: ReactNode;
+  messageExtra?: ReactNode;
+  onAvatarClick?: () => void;
+  /**
+   * @description Callback when the message content changes
+   * @param value - The new message content
+   */
+  onChange?: (value: string) => void;
+  onDoubleClick?: DivProps['onDoubleClick'];
+  /**
+   * @description Callback when the editing mode changes
+   * @param editing - The new editing mode
+   */
+  onEditingChange?: (editing: boolean) => void;
+  /**
+   * @default "..."
+   */
+  placeholderMessage?: string;
+  /**
+   * @description The placement of the chat item
+   * @default 'left'
+   */
+  placement?: 'left' | 'right';
+  /**
+   * @description Whether the chat item is primary
+   */
+  primary?: boolean;
+  renderMessage?: (content: ReactNode) => ReactNode;
+  /**
+   * @description Whether to show the avatar
+   * @default true
+   */
+  showAvatar?: boolean;
+  /**
+   * @description Whether to show the title of the chat item
+   */
+  showTitle?: boolean;
+  text?: EditableMessageProps['text'];
+  /**
+   * @description The timestamp of the chat item
+   */
+  time?: number;
+  titleAddon?: ReactNode;
+  /**
+   * @description The type of the chat item
+   * @default 'bubble'
+   */
+  variant?: 'bubble' | 'docs';
+}
+//#endregion
+export { ChatItemProps };
+//# sourceMappingURL=type.d.mts.map

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

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

package/es/chat/ChatList/ChatList.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
+import ChatListItem from "./components/ChatListItem.mjs";
+import HistoryDivider from "./components/HistoryDivider.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 }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.container, className),
+		...rest,
+		children: [data.map((item, index) => {
+			const itemProps = {
+				loading: loadingId === item.id,
+				onActionsClick,
+				onAvatarsClick,
+				onMessageChange,
+				renderActions,
+				renderErrorMessages,
+				renderItems,
+				renderMessages,
+				renderMessagesExtra,
+				showAvatar,
+				showTitle,
+				text,
+				variant
+			};
+			const historyLength = data.length;
+			const enableHistoryDivider = enableHistoryCount && historyLength > historyCount && historyCount === historyLength - index + 1;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HistoryDivider, {
+				enable: enableHistoryDivider,
+				text: text?.history
+			}), /* @__PURE__ */ jsx(ChatListItem, {
+				...itemProps,
+				...item
+			})] }, item.id);
+		}), /* @__PURE__ */ jsx(ToastHost, {})]
+	});
+});
+//#endregion
+export { ChatList as default };
+
+//# sourceMappingURL=ChatList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatList.mjs","names":[],"sources":["../../../src/chat/ChatList/ChatList.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { Fragment, memo } from 'react';\r\n\r\nimport { ToastHost } from '@/base-ui/Toast';\r\n\r\nimport ChatListItem from './components/ChatListItem';\r\nimport HistoryDivider from './components/HistoryDivider';\r\nimport { styles } from './style';\r\nimport type { ChatListProps } from './type';\r\n\r\nconst ChatList = memo<ChatListProps>(\r\n  ({\r\n    onActionsClick,\r\n    onAvatarsClick,\r\n    renderMessagesExtra,\r\n    className,\r\n    data,\r\n    variant = 'bubble',\r\n    text,\r\n    showTitle,\r\n    onMessageChange,\r\n    renderMessages,\r\n    renderErrorMessages,\r\n    loadingId,\r\n    renderItems,\r\n    enableHistoryCount,\r\n    renderActions,\r\n    historyCount = 0,\r\n    showAvatar,\r\n    ...rest\r\n  }) => {\r\n    return (\r\n      <div className={cx(styles.container, className)} {...rest}>\r\n        {data.map((item, index) => {\r\n          const itemProps = {\r\n            loading: loadingId === item.id,\r\n            onActionsClick,\r\n            onAvatarsClick,\r\n            onMessageChange,\r\n            renderActions,\r\n            renderErrorMessages,\r\n            renderItems,\r\n            renderMessages,\r\n            renderMessagesExtra,\r\n            showAvatar,\r\n            showTitle,\r\n            text,\r\n            variant,\r\n          };\r\n\r\n          const historyLength = data.length;\r\n          const enableHistoryDivider =\r\n            enableHistoryCount &&\r\n            historyLength > historyCount &&\r\n            historyCount === historyLength - index + 1;\r\n\r\n          return (\r\n            <Fragment key={item.id}>\r\n              <HistoryDivider enable={enableHistoryDivider} text={text?.history} />\r\n              <ChatListItem {...itemProps} {...item} />\r\n            </Fragment>\r\n          );\r\n        })}\r\n        <ToastHost />\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nexport default ChatList;\r\n"],"mappings":";;;;;;;;;AAYA,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,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,WAAW,SAAS;EAAG,GAAI;EAArD,UAAA,CACG,KAAK,KAAK,MAAM,UAAU;GACzB,MAAM,YAAY;IAChB,SAAS,cAAc,KAAK;IAC5B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,MAAM,gBAAgB,KAAK;GAC3B,MAAM,uBACJ,sBACA,gBAAgB,gBAChB,iBAAiB,gBAAgB,QAAQ;GAE3C,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,QAAQ;IAAsB,MAAM,MAAM;GAAU,CAAA,GACpE,oBAAC,cAAD;IAAc,GAAI;IAAW,GAAI;GAAO,CAAA,CAChC,EAAA,GAHK,KAAK,EAGV;EAEd,CAAC,GACD,oBAAC,WAAD,CAAY,CAAA,CACT;;AAET,CACF"}

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

@@ -0,0 +1,7 @@
+import { ChatActionsBarProps } from "../type.mjs";
+import { FC } from "react";
+//#region src/chat/ChatList/components/ChatActionsBar.d.ts
+declare const ChatActionsBar: FC<ChatActionsBarProps>;
+//#endregion
+export { ChatActionsBar as default };
+//# sourceMappingURL=ChatActionsBar.d.mts.map

package/es/chat/ChatList/components/ChatActionsBar.mjs

@@ -0,0 +1,23 @@
+import ActionIconGroup from "../../../ActionIconGroup/ActionIconGroup.mjs";
+import { useChatListActionsBar } from "./useChatListActionsBar.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/chat/ChatList/components/ChatActionsBar.tsx
+const ChatActionsBar = ({ text, ref, ...rest }) => {
+	const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+	return /* @__PURE__ */ jsx(ActionIconGroup, {
+		items: [regenerate, edit],
+		menu: [
+			edit,
+			copy,
+			regenerate,
+			divider,
+			del
+		],
+		ref,
+		...rest
+	});
+};
+//#endregion
+export { ChatActionsBar as default };
+
+//# sourceMappingURL=ChatActionsBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatActionsBar.mjs","names":[],"sources":["../../../../src/chat/ChatList/components/ChatActionsBar.tsx"],"sourcesContent":["import { type FC } from 'react';\r\n\r\nimport ActionIconGroup from '@/ActionIconGroup';\r\n\r\nimport type { ChatActionsBarProps } from '../type';\r\nimport { useChatListActionsBar } from './useChatListActionsBar';\r\n\r\nconst ChatActionsBar: FC<ChatActionsBarProps> = ({ text, ref, ...rest }) => {\r\n  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);\r\n  return (\r\n    <ActionIconGroup\r\n      items={[regenerate, edit]}\r\n      menu={[edit, copy, regenerate, divider, del]}\r\n      ref={ref}\r\n      {...rest}\r\n    />\r\n  );\r\n};\r\n\r\nexport default ChatActionsBar;\r\n"],"mappings":";;;;AAOA,MAAM,kBAA2C,EAAE,MAAM,KAAK,GAAG,WAAW;CAC1E,MAAM,EAAE,YAAY,MAAM,MAAM,SAAS,QAAQ,sBAAsB,IAAI;CAC3E,OACE,oBAAC,iBAAD;EACE,OAAO,CAAC,YAAY,IAAI;EACxB,MAAM;GAAC;GAAM;GAAM;GAAY;GAAS;EAAG;EACtC;EACL,GAAI;CACL,CAAA;AAEL"}