@lobehub/ui 1.30.0 → 1.31.1

package/es/CodeEditor/index.d.ts

@@ -0,0 +1,36 @@
+import { InputRef } from 'antd';
+import { type CSSProperties, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler, type Ref } from 'react';
+import { SyntaxHighlighterProps } from "../Highlighter/SyntaxHighlighter";
+export interface CodeEditorProps {
+    autoFocus?: boolean;
+    className?: string;
+    disabled?: boolean;
+    form?: string;
+    ignoreTabKey?: boolean;
+    insertSpaces?: boolean;
+    language: SyntaxHighlighterProps['language'];
+    maxLength?: number;
+    minLength?: number;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onClick?: MouseEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    preClassName?: string;
+    readOnly?: boolean;
+    ref?: Ref<InputRef>;
+    required?: boolean;
+    resize?: boolean;
+    style?: CSSProperties;
+    tabSize?: number;
+    textareaClassName?: string;
+    textareaId?: string;
+    theme?: SyntaxHighlighterProps['theme'];
+    type?: 'ghost' | 'block' | 'pure';
+    value: string;
+}
+declare const CodeEditor: import("react").NamedExoticComponent<CodeEditorProps>;
+export default CodeEditor;

package/es/CodeEditor/index.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "language", "theme", "value", "onValueChange", "resize", "className", "textareaClassName", "type"];
+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 { forwardRef, memo } from 'react';
+import Editor from 'react-simple-code-editor';
+import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var CodeEditor = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
+  var style = _ref.style,
+    language = _ref.language,
+    theme = _ref.theme,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? true : _ref$resize,
+    className = _ref.className,
+    textareaClassName = _ref.textareaClassName,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      resize: resize,
+      type: type
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(styles.container, className),
+    style: style,
+    children: /*#__PURE__*/_jsx(Editor, _objectSpread({
+      className: styles.editor,
+      highlight: function highlight(code) {
+        return /*#__PURE__*/_jsx(SyntaxHighlighter, {
+          language: language,
+          theme: theme,
+          children: code
+        });
+      },
+      onValueChange: onValueChange,
+      padding: 0,
+      ref: reference,
+      textareaClassName: cx(styles.textarea, textareaClassName),
+      value: value
+    }, props))
+  });
+}));
+export default CodeEditor;

package/es/CodeEditor/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: {
+    resize: boolean;
+    type: 'ghost' | 'block' | 'pure';
+} | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    editor: import("antd-style").SerializedStyles;
+    textarea: import("antd-style").SerializedStyles;
+}>;

package/es/CodeEditor/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
+  var type = _ref2.type,
+    resize = _ref2.resize;
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
+  return {
+    container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          height: fit-content;\n        "])))),
+    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        font-family: ", " !important;\n\n        pre {\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
+    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow-x: hidden;\n        overflow-y: auto;\n        height: 100% !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &::selection {\n          color: #000;\n          background: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorTextQuaternary, isDarkMode ? token.yellow3A : token.yellow6A)
+  };
+});

package/es/Highlighter/theme.js

@@ -2,8 +2,8 @@ import { colorScales } from "../styles/colors";
 export var themeConfig = function themeConfig(isDarkMode) {
   var type = isDarkMode ? 'dark' : 'light';
   var colorText = colorScales.gray[type][11];
-  var colorTextSecondary = isDarkMode ? colorScales.gray[type][9] : colorScales.gray[type][10];
-  var colorTextTertiary = isDarkMode ? colorScales.gray[type][6] : colorScales.gray[type][7];
+  var colorTextSecondary = colorScales.gray[type][10];
+  var colorTextTertiary = colorScales.gray[type][7];
   var colorRed = isDarkMode ? colorScales.red[type][9] : colorScales.volcano[type][9];
   var colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9];
   var colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][9];

package/es/Markdown/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+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 { Collapse, Divider, Typography } from 'antd';
 import pangu from 'pangu';
 import { memo } from 'react';
@@ -9,7 +14,8 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    className = _ref.className;
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -21,12 +27,13 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     pre: CodeBlock
   };
   return /*#__PURE__*/_jsx(Typography, {
-    children: /*#__PURE__*/_jsx(ReactMarkdown, {
+    children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
       className: cx(styles.markdown, className),
       components: components,
-      remarkPlugins: [remarkGfm],
+      remarkPlugins: [remarkGfm]
+    }, props), {}, {
       children: pangu.spacing(children)
-    })
+    }))
   });
 });
 export default Markdown;

package/es/MessageInput/index.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import { ButtonProps } from 'antd';
+import { type CSSProperties } from 'react';
 import { type TextAreaProps } from "../Input";
-export interface MessageInputProps {
+import { DivProps } from "../types";
+export interface MessageInputProps extends DivProps {
     /**
      * @description Additional className to apply to the component.
      */
@@ -10,10 +11,7 @@ export interface MessageInputProps {
      * @description The default value of the input box.
      */
     defaultValue?: string;
-    /**
-     * @description The height of the input box.
-     */
-    height?: number;
+    height?: number | string;
     /**
      * @description Callback function triggered when user clicks on the cancel button.
      */
@@ -28,6 +26,8 @@ export interface MessageInputProps {
      * @param text - The text input by the user.
      */
     renderButtons?: (text: string) => ButtonProps[];
+    textareaClassname?: string;
+    textareaStyle?: CSSProperties;
     /**
      * @description The type of the input box.
      */

package/es/MessageInput/index.js

@@ -1,38 +1,46 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "height"];
 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 { Button } from 'antd';
-import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { TextArea } from "../Input";
+import CodeEditor from "../CodeEditor";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageInput = /*#__PURE__*/memo(function (_ref) {
-  var type = _ref.type,
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'ghost' : _ref$type,
     onCancel = _ref.onCancel,
     defaultValue = _ref.defaultValue,
     onConfirm = _ref.onConfirm,
     renderButtons = _ref.renderButtons,
-    height = _ref.height,
-    className = _ref.className;
+    textareaStyle = _ref.textareaStyle,
+    textareaClassname = _ref.textareaClassname,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'fit-content' : _ref$height,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
     temporarySystemRole = _useState2[0],
     setRole = _useState2[1];
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    gap: 8,
-    children: [/*#__PURE__*/_jsx(TextArea, {
-      className: cx('nowheel', className),
-      onChange: function onChange(e) {
-        setRole(e.target.value);
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    gap: 8
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(CodeEditor, {
+      className: textareaClassname,
+      language: "md",
+      onValueChange: function onValueChange(value) {
+        setRole(value);
       },
       placeholder: '例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。',
-      style: {
-        height: height !== null && height !== void 0 ? height : 200
-      },
+      resize: false,
+      style: _objectSpread({
+        height: height
+      }, textareaStyle),
       type: type,
       value: temporarySystemRole
     }), /*#__PURE__*/_jsx(Flexbox, {
@@ -49,11 +57,10 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
           children: "Confirm"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
-          type: "text",
           children: "Cancel"
         })]
       })
     })]
-  });
+  }));
 });
 export default MessageInput;

package/es/MessageModal/index.js

@@ -38,7 +38,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     closeIcon: /*#__PURE__*/_jsx(Icon, {
       icon: X
     }),
-    footer: isEdit ? undefined : undefined,
+    footer: isEdit ? null : undefined,
     okText: 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
@@ -56,7 +56,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     width: 800,
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       defaultValue: value,
-      height: 400,
+      height: "70vh",
       onCancel: function onCancel() {
         return setTyping(false);
       },

package/es/MessageModal/style.js

@@ -6,6 +6,6 @@ export var useStyles = createStyles(function (_ref) {
     prefixCls = _ref.prefixCls;
   return {
     body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 70vh;\n  "]))),
-    modal: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 70%;\n    .", "-modal-header {\n      margin-bottom: 24px;\n    }\n  "])), prefixCls)
+    modal: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-modal-header {\n      margin-bottom: 24px;\n    }\n  "])), prefixCls)
   };
 });

package/es/Swatches/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref, size) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 2px ", ";\n    "])), token.colorPrimary),
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 2px ", ";\n    "])), token.colorText),
     container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      transition: scale 400ms ", ";\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorFill, token.motionEaseOut)
   };
 });

package/es/components/ControlInput.js

@@ -6,22 +6,21 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { ConfigProvider, Space } from 'antd';
 import { RotateCcw, Save } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { Input } from "../Input";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ControlInput = /*#__PURE__*/memo(function (_ref) {
+export var ControlInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
   var value = _ref.value,
     onChange = _ref.onChange,
     onValueChanging = _ref.onValueChanging,
     onChangeEnd = _ref.onChangeEnd,
-    properties = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(value || ''),
     _useState2 = _slicedToArray(_useState, 2),
     input = _useState2[0],
     setInput = _useState2[1];
-  var inputReference = useRef();
   var isChineseInput = useRef(false);
   var isFocusing = useRef(false);
   var updateValue = useCallback(function () {
@@ -30,9 +29,7 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     if (value !== undefined) setInput(value);
   }, [value]);
-  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-    ref: inputReference
-  }, properties), {}, {
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
     onBlur: function onBlur() {
       isFocusing.current = false;
       onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
@@ -58,6 +55,7 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
         onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
       }
     },
+    ref: reference,
     suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         token: {
@@ -82,5 +80,5 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
       })
     }),
     value: input
-  }));
-});
+  }, props));
+}));

package/es/index.d.ts

@@ -6,6 +6,7 @@ export type { ChatMessage, MessageRoleType } from './Chat';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { default as ChatList, type ChatListProps } from './ChatList';
+export { default as CodeEditor, type CodeEditorProps } from './CodeEditor';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';

package/es/index.js

@@ -5,6 +5,7 @@ export { default as Burger } from "./Burger";
 export { default as ChatInputArea } from "./ChatInputArea";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";
+export { default as CodeEditor } from "./CodeEditor";
 export { default as ColorScales } from "./ColorScales";
 export { default as ContextMenu } from "./ContextMenu";
 export { default as CopyButton } from "./CopyButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.30.0",
+  "version": "1.31.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -95,9 +95,10 @@
     "react-layout-kit": "^1",
     "react-markdown": "^8",
     "react-rnd": "^10",
+    "react-simple-code-editor": "^0",
     "remark-gfm": "^3",
     "shiki-es": "^0",
-    "styled-components": "latest",
+    "styled-components": "^6",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",