@lobehub/ui 1.6.1 → 1.7.2

package/es/Conversation/ChatList/index.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from 'react';
+interface ChatListProps {
+    /**
+     * @title 是否只读
+     */
+    readonly?: boolean;
+    /**
+     * @title 是否包含系统消息
+     */
+    includeSystem?: boolean;
+    style?: CSSProperties;
+}
+declare const ChatList: FC<ChatListProps>;
+export default ChatList;

package/es/Conversation/ChatList/index.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+import { useStore } from "../../Chat/store";
+import MessageItem from "./MessageItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    loading: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 12px;\n    background: ", ";\n    border-radius: 8px;\n  "])), token.colorFillQuaternary),
+    btn: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    color: ", ";\n    background: transparent;\n    border: 2px solid ", " !important;\n  "])), token.colorTextSecondary, token.colorBorderSecondary)
+  };
+});
+var ChatList = /*#__PURE__*/memo(function (_ref2) {
+  var readonly = _ref2.readonly,
+    _ref2$includeSystem = _ref2.includeSystem,
+    includeSystem = _ref2$includeSystem === void 0 ? false : _ref2$includeSystem,
+    style = _ref2.style;
+  // const [messages, loading] = useStore((s) => [s.messages, s.loading], isEqual);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useStore = useStore(function (s) {
+      return [s.messages, s.loading];
+    }, isEqual),
+    _useStore2 = _slicedToArray(_useStore, 2),
+    messages = _useStore2[0],
+    loading = _useStore2[1];
+  return !messages || messages.length === 0 ? null : /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 8,
+    style: style,
+    children: [messages
+    // 根据情况确认是否包含系统
+    .filter(function (s) {
+      return !includeSystem ? s.role !== 'system' : !!s;
+    }).map(function (item, index) {
+      return /*#__PURE__*/_jsx(MessageItem, _objectSpread({
+        readonly: readonly,
+        index: index
+      }, item), index);
+    }), loading ? /*#__PURE__*/_jsx(Center, {
+      id: 'for-loading',
+      className: styles.loading,
+      children: /*#__PURE__*/_jsxs(Flexbox, {
+        horizontal: true,
+        distribution: 'space-between',
+        align: 'center',
+        gap: 24,
+        children: [/*#__PURE__*/_jsx("div", {}), "\u6B63\u5728\u751F\u6210...", /*#__PURE__*/_jsx("div", {})]
+      })
+    }) : null]
+  });
+});
+export default ChatList;

package/es/Conversation/InputArea/ActionBar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ActionBar: () => import("react/jsx-runtime").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;

package/es/Conversation/InputArea/ActionBar.js

@@ -0,0 +1,71 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import IconAction from "../../ActionIcon";
+import { ConfigProvider, Popconfirm, Tooltip } from 'antd';
+import { EraserIcon } from 'lucide-react';
+import { chatSelectors, useStore } from "../../Chat/store";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    extra: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextTertiary)
+  };
+});
+export var ActionBar = function ActionBar() {
+  var _useStore = useStore(function (s) {
+      return [chatSelectors.totalTokenCount(s), chatSelectors.agentTokenCount(s), chatSelectors.messagesTokenCount(s), s.dispatchMessage];
+    }, shallow),
+    _useStore2 = _slicedToArray(_useStore, 4),
+    totalToken = _useStore2[0],
+    agentToken = _useStore2[1],
+    messagesToken = _useStore2[2],
+    dispatchMessage = _useStore2[3];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  return totalToken > 0 ? /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        colorText: theme.colorTextSecondary
+      }
+    },
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      direction: 'horizontal-reverse',
+      paddingInline: 12,
+      className: styles.extra,
+      gap: 8,
+      children: [/*#__PURE__*/_jsx(Popconfirm, {
+        title: '你即将要清空会话，清空后将无法找回。是否清空当前会话？',
+        okButtonProps: {
+          danger: true
+        },
+        okText: '清空会话',
+        onConfirm: function onConfirm() {
+          dispatchMessage({
+            type: 'resetMessages'
+          });
+        },
+        children: /*#__PURE__*/_jsx(IconAction, {
+          title: '清空当前会话',
+          size: 'small',
+          icon: EraserIcon
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: [agentToken > 0 ? "\u89D2\u8272\u5B9A\u4E49: ".concat(agentToken) : null, messagesToken > 0 ? "\u4F1A\u8BDD: ".concat(messagesToken) : null].filter(Boolean).join('  |  '),
+        children: /*#__PURE__*/_jsxs(Flexbox, {
+          gap: 4,
+          children: [" Tokens: ", totalToken]
+        })
+      })]
+    })
+  }) : null;
+};
+export default /*#__PURE__*/memo(ActionBar);

package/es/Conversation/InputArea/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InputArea: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<({}: {}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/Conversation/InputArea/index.js

@@ -0,0 +1,101 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { SendOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider, Input } from 'antd';
+import { createStyles, useResponsive } from 'antd-style';
+import { memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { shallow } from 'zustand/shallow';
+import { chatSelectors, useStore, useStoreApi } from "../../Chat/store";
+import ActionBar from "./ActionBar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    responsive = _ref.responsive,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: sticky;\n    z-index: ", ";\n    bottom: 0;\n\n    width: ", "px;\n    padding-top: 12px;\n    padding-bottom: 24px;\n\n    background-image: linear-gradient(to top, ", " 88%, transparent 100%);\n\n    ", " {\n      width: 100%;\n    }\n  "])), token.zIndexPopupBase, token.contentWidth, token.colorBgLayout, responsive.mobile),
+    boxShadow: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    border-radius: 8px;\n    box-shadow: ", ";\n  "])), token.boxShadowSecondary),
+    input: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    border-radius: 8px;\n  "]))),
+    btn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 10;\n    right: 8px;\n    bottom: 8px;\n\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), token.colorTextTertiary, token.colorTextSecondary),
+    extra: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextTertiary)
+  };
+});
+export var InputArea = function InputArea(_ref2) {
+  _objectDestructuringEmpty(_ref2);
+  var _useStore = useStore(function (s) {
+      return [s.message, s.sendMessage, s.loading, chatSelectors.disableInput(s)];
+    }, shallow),
+    _useStore2 = _slicedToArray(_useStore, 4),
+    message = _useStore2[0],
+    sendMessage = _useStore2[1],
+    isLoading = _useStore2[2],
+    disabled = _useStore2[3];
+  var isChineseInput = useRef(false);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
+  var storeApi = useStoreApi();
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        borderRadius: 4,
+        fontSize: 16,
+        colorBgContainer: theme.colorBgElevated,
+        controlHeightLG: 48,
+        colorBorder: 'transparent',
+        colorPrimaryHover: 'transparent'
+      }
+    },
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      className: styles.container,
+      children: [/*#__PURE__*/_jsx(ActionBar, {}), /*#__PURE__*/_jsxs(Flexbox, {
+        horizontal: true,
+        gap: 8,
+        align: 'center',
+        className: styles.boxShadow,
+        children: [/*#__PURE__*/_jsx(Input.TextArea, {
+          size: 'large',
+          value: message,
+          placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9...",
+          onChange: function onChange(e) {
+            storeApi.setState({
+              message: e.target.value
+            });
+          },
+          disabled: disabled,
+          autoSize: {
+            maxRows: 8
+          },
+          onCompositionStart: function onCompositionStart() {
+            isChineseInput.current = true;
+          },
+          onCompositionEnd: function onCompositionEnd() {
+            isChineseInput.current = false;
+          },
+          className: styles.input,
+          onPressEnter: function onPressEnter(e) {
+            if (!isLoading && !e.shiftKey && !isChineseInput.current) {
+              e.preventDefault();
+              sendMessage();
+            }
+          }
+        }), mobile ? null : /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          loading: isLoading,
+          type: "text",
+          className: styles.btn,
+          onClick: sendMessage,
+          icon: /*#__PURE__*/_jsx(SendOutlined, {})
+        })]
+      })]
+    })
+  });
+};
+export default /*#__PURE__*/memo(InputArea);

package/es/Conversation/StoreUpdater.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { InternalChatContext } from '../Chat/types';
+import { ChatStore } from '../Chat/store';
+export interface StoreUpdaterProps extends Partial<InternalChatContext>, Pick<ChatStore, 'onMessagesChange' | 'onAgentChange' | 'onResponseFinished' | 'onResponseStart'> {
+}
+declare const StoreUpdater: FC<StoreUpdaterProps>;
+export default StoreUpdater;

package/es/Conversation/StoreUpdater.js

@@ -0,0 +1,27 @@
+import { createStoreUpdater } from 'zustand-utils';
+import { useStoreApi } from "../Chat/store";
+var StoreUpdater = function StoreUpdater(_ref) {
+  var updateAt = _ref.updateAt,
+    createAt = _ref.createAt,
+    title = _ref.title,
+    description = _ref.description,
+    agent = _ref.agent,
+    messages = _ref.messages,
+    onAgentChange = _ref.onAgentChange,
+    onMessagesChange = _ref.onMessagesChange,
+    onResponseFinished = _ref.onResponseFinished,
+    onResponseStart = _ref.onResponseStart;
+  var useStoreUpdater = createStoreUpdater(useStoreApi());
+  useStoreUpdater('agent', agent);
+  useStoreUpdater('onAgentChange', onAgentChange);
+  useStoreUpdater('messages', messages);
+  useStoreUpdater('onMessagesChange', onMessagesChange);
+  useStoreUpdater('onResponseFinished', onResponseFinished);
+  useStoreUpdater('onResponseStart', onResponseStart);
+  useStoreUpdater('title', title);
+  useStoreUpdater('description', description);
+  useStoreUpdater('createAt', createAt);
+  useStoreUpdater('updateAt', updateAt);
+  return null;
+};
+export default StoreUpdater;

package/es/Conversation/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AppProps } from './App';
+import { StoreUpdaterProps } from './StoreUpdater';
+export interface ConversationProps extends StoreUpdaterProps, AppProps {
+    devtools?: boolean;
+}
+declare const Conversation: import("react").NamedExoticComponent<ConversationProps>;
+export default Conversation;

package/es/Conversation/index.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["readonly", "devtools", "includeSystem"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { memo, useRef } from 'react';
+import { Provider, createChatStore } from "../Chat/store";
+import ChatContainer from "./App";
+import StoreUpdater from "./StoreUpdater";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Conversation = /*#__PURE__*/memo(function (_ref) {
+  var readonly = _ref.readonly,
+    devtools = _ref.devtools,
+    includeSystem = _ref.includeSystem,
+    res = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(function () {
+    return createChatStore(devtools);
+  });
+  return /*#__PURE__*/_jsxs(Provider, {
+    createStore: ref.current,
+    children: [/*#__PURE__*/_jsx(ChatContainer, {
+      includeSystem: includeSystem,
+      readonly: readonly
+    }), /*#__PURE__*/_jsx(StoreUpdater, _objectSpread({}, res))]
+  });
+});
+export default Conversation;

package/es/EditableMessageList/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ChatMessage } from "../Chat";
+export interface EditableMessageListProps {
+    dataSources: ChatMessage[];
+    onChange?: (chatMessages: ChatMessage[]) => void;
+    disabled?: boolean;
+}
+export declare const EditableMessageList: import("react").NamedExoticComponent<EditableMessageListProps>;
+export default EditableMessageList;

package/es/EditableMessageList/index.js

@@ -0,0 +1,101 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Select } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useEffect, useReducer } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import IconAction from "../ActionIcon";
+import { messagesReducer } from "../Chat";
+import { ControlInput } from "../components/ControlInput";
+import { TrashIcon } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
+  var disabled = _ref.disabled,
+    dataSources = _ref.dataSources,
+    onChange = _ref.onChange;
+  var _useReducer = useReducer(messagesReducer, dataSources),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    chatMessages = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  useEffect(function () {
+    if (!isEqual(dataSources, chatMessages)) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(chatMessages);
+    }
+  }, [chatMessages]);
+  return !dataSources ? null : /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 12,
+    children: [chatMessages.map(function (item, index) {
+      return /*#__PURE__*/_jsxs(Flexbox, {
+        horizontal: true,
+        gap: 8,
+        width: '100%',
+        align: 'center',
+        children: [/*#__PURE__*/_jsx(Select, {
+          value: item.role,
+          style: {
+            width: 120
+          },
+          dropdownStyle: {
+            zIndex: 100
+          },
+          disabled: disabled,
+          onChange: function onChange(value) {
+            dispatch({
+              type: 'updateMessageRole',
+              index: index,
+              role: value
+            });
+          },
+          options: [{
+            value: 'system',
+            label: '系统'
+          }, {
+            value: 'user',
+            label: '输入'
+          }, {
+            value: 'assistant',
+            label: '输出'
+          }]
+        }), /*#__PURE__*/_jsx(ControlInput, {
+          disabled: disabled,
+          value: item.content,
+          onChange: function onChange(e) {
+            dispatch({
+              type: 'updateMessage',
+              index: index,
+              message: e
+            });
+          },
+          placeholder: item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例'
+        }), /*#__PURE__*/_jsx(IconAction, {
+          icon: TrashIcon,
+          title: '删除',
+          size: 'small',
+          onClick: function onClick() {
+            dispatch({
+              type: 'deleteMessage',
+              index: index
+            });
+          }
+        })]
+      }, "".concat(index, "-").concat(item.content));
+    }), /*#__PURE__*/_jsx(Button, {
+      block: true,
+      disabled: disabled,
+      icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+      onClick: function onClick() {
+        var lastMeg = chatMessages.at(-1);
+        dispatch({
+          type: 'addMessage',
+          message: {
+            role: (lastMeg === null || lastMeg === void 0 ? void 0 : lastMeg.role) === 'user' ? 'assistant' : 'user',
+            content: ''
+          }
+        });
+      },
+      children: "\u6DFB\u52A0\u4E00\u9879"
+    })]
+  });
+}, isEqual);
+export default EditableMessageList;

package/es/EditableText/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ControlInputProps } from './ControlInput';
+import { ControlInputProps } from "../components/ControlInput";
 export declare type EditableTextProps = ControlInputProps;
 declare const EditableText: import("react").NamedExoticComponent<ControlInputProps>;
 export default EditableText;

package/es/EditableText/index.js

@@ -3,7 +3,7 @@ import { EditOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { ControlInput } from "./ControlInput";
+import { ControlInput } from "../components/ControlInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var EditableText = /*#__PURE__*/memo(function (_ref) {

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -10,6 +10,6 @@ export var useStyles = createStyles(function (_ref) {
   return {
     shiki: cx("".concat(prefix, "-shiki"), css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: scroll;\n          background: none !important;\n        }\n      "])))),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow-x: scroll;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n      color: ", ";\n      padding: 4px 8px;\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
+    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n\n      padding: 4px 8px;\n\n      color: ", ";\n\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
   };
 });

package/es/Highlighter/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, type) {
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
   return {
-    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          overflow: auto;\n          position: relative;\n          transition: background-color 100ms ", ";\n          background-color: ", ";\n          border-radius: ", "px;\n\n          ", "\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n        "])), token.motionEaseOut, type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', token.borderRadius, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, type === 'prue' ? 0 : "16px 24px", buttonHoverCls, langHoverCls)),
+    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
     button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
     lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
   };

package/es/Logo/style.js

@@ -5,6 +5,6 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
     flexCenter: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "]))),
-    extraTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      white-space: nowrap;\n      font-weight: 300;\n    "])))
+    extraTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "])))
   };
 });

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n       color: ", ";\n\n\n\n      p {\n        margin: 20px auto;\n        line-height: 2;\n        word-wrap: break-word;\n        font-size: 14px;\n        color: ", ";\n\n        &:not(:last-child) {\n          margin-bottom: 1em;\n        }\n      }\n\n      // hyperlink\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      // inline code\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n\n      // table\n      table {\n        width: 100%;\n        border-spacing: 0;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        padding: 8px;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n      }\n\n      th {\n\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      // blockquote\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      // list\n      ul li {\n        line-height: 1.8;\n      }\n    }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.colorTextDescription),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 2;\n        color: ", ";\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/Snippet/style.js

@@ -5,5 +5,5 @@ import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, type) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      max-width: 100%;\n      position: relative;\n      align-items: center;\n      border-radius: ", "px;\n      gap: 8px;\n      padding: 0 8px 0 12px;\n      height: 36px;\n      transition:  background-color 100ms ", ";\n\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        background: none !important;\n        padding-top: 6px; !important;\n        margin: 0 !important;\n        line-height: 1;\n      }\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n            "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 1px solid ", ";\n            "])), token.colorBorder), token.colorFillTertiary);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
 });

package/es/StroyBook/style.js

@@ -7,8 +7,8 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var noPadding = _ref2.noPadding,
     mobile = _ref2.mobile;
   return {
-    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
-    left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: auto;\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.colorBgLayout, token.colorBorder)
+    editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
+    left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.colorBgLayout, token.colorBorder)
   };
 });

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  body {\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\";\n    --font-variations: \"opsz\" auto;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    background-color: transparent;\n\n    &-thumb {\n      background-color: ", ";\n      border-radius: 4px;\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -10,10 +10,11 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
 }, function (_ref3) {
   var theme = _ref3.theme;
   return theme.colorTextBase;
-}, function (p) {
-  return p.theme.colorBgLayout;
 }, function (_ref4) {
   var theme = _ref4.theme;
+  return theme.colorBgLayout;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.colorFill;
 });
 export default GlobalStyle;

package/es/Tooltip/style.js

@@ -5,6 +5,6 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    tooltip: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .ant-tooltip-inner {\n        background-color: ", ";\n        color: ", ";\n        padding: 4px 8px;\n        border-radius: ", "px;\n        min-height: unset;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .ant-tooltip-arrow {\n        &:before,\n        &:after {\n          background: ", ";\n        }\n      }\n    "])), token.colorText, token.colorBgLayout, token.borderRadiusSM, token.colorText)
+    tooltip: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      .ant-tooltip-inner {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        min-height: unset;\n        padding: 4px 8px;\n\n        color: ", ";\n\n        background-color: ", ";\n        border-radius: ", "px;\n      }\n      .ant-tooltip-arrow {\n        &:before,\n        &:after {\n          background: ", ";\n        }\n      }\n    "])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText)
   };
 });

package/es/index.d.ts

@@ -1,9 +1,12 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as Avatar, type AvatarProps } from './Avatar';
+export type { ChatMessage } from './Chat';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
+export { default as Conversation, type ConversationProps } from './Conversation';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
+export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';

package/es/index.js

@@ -1,9 +1,11 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as Avatar } from "./Avatar";
 export { default as ContextMenu } from "./ContextMenu";
+export { default as Conversation } from "./Conversation";
 export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";
 export { default as EditableMessage } from "./EditableMessage";
+export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";