@lobehub/ui 1.85.0 → 1.86.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -42,6 +42,8 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
42
42
 
43
43
  - [🤝 Contributing](#-contributing)
44
44
 
45
+ - [🔗 More Products](#-more-products)
46
+
45
47
  ####
46
48
 
47
49
  </details>
@@ -159,56 +161,26 @@ This project is [MIT](./LICENSE) licensed.
159
161
 
160
162
  <!-- LINK GROUP -->
161
163
 
162
- [profile-url]: https://github.com/lobehub
163
- [gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-ui
164
-
165
- <!-- SHIELD LINK GROUP -->
166
-
167
164
  [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
168
-
169
- <!-- release -->
170
-
171
- [release-shield]: https://img.shields.io/npm/v/@lobehub/ui?label=%F0%9F%A4%AF%20NPM
172
- [release-url]: https://www.npmjs.com/package/@lobehub/ui
173
-
174
- <!-- releaseDate -->
175
-
176
- [release-date-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?style=flat
177
- [release-date-url]: https://github.com/lobehub/lobe-ui/releases
178
-
179
- <!-- ciTest -->
180
-
181
- [ci-test-shield]: https://github.com/lobehub/lobe-ui/workflows/Test%20CI/badge.svg
182
- [ci-test-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ATest%20CI
183
-
184
- <!-- ciRelease -->
185
-
186
165
  [ci-release-shield]: https://github.com/lobehub/lobe-ui/workflows/Release%20CI/badge.svg
187
166
  [ci-release-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ARelease%20CI
188
-
189
- <!-- contributors -->
190
-
167
+ [ci-test-shield]: https://github.com/lobehub/lobe-ui/workflows/Test%20CI/badge.svg
168
+ [ci-test-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ATest%20CI
191
169
  [contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui.svg?style=flat
192
170
  [contributors-url]: https://github.com/lobehub/lobe-ui/graphs/contributors
193
-
194
- <!-- forks -->
195
-
196
171
  [forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui.svg?style=flat
197
172
  [forks-url]: https://github.com/lobehub/lobe-ui/network/members
198
-
199
- <!-- stargazers -->
200
-
201
- [stargazers-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui.svg?style=flat
202
- [stargazers-url]: https://github.com/lobehub/lobe-ui/stargazers
203
-
204
- <!-- issues -->
205
-
173
+ [gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-ui
206
174
  [issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat
207
175
  [issues-url]: https://github.com/lobehub/lobe-ui/issues/new/choose
208
-
209
- <!-- products -->
210
-
211
176
  [lobe-chat]: https://github.com/lobehub/lobe-chat
212
- [lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
213
177
  [lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
214
178
  [lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
179
+ [lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
180
+ [profile-url]: https://github.com/lobehub
181
+ [release-date-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?style=flat
182
+ [release-date-url]: https://github.com/lobehub/lobe-ui/releases
183
+ [release-shield]: https://img.shields.io/npm/v/@lobehub/ui?label=%F0%9F%A4%AF%20NPM
184
+ [release-url]: https://www.npmjs.com/package/@lobehub/ui
185
+ [stargazers-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui.svg?style=flat
186
+ [stargazers-url]: https://github.com/lobehub/lobe-ui/stargazers
package/es/Hero/style.js CHANGED
@@ -12,7 +12,7 @@ export var useStyles = createStyles(function (_ref) {
12
12
  canvas: cx(stylish.gradientAnimation, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 10;\n top: -250px;\n left: 50%;\n transform: translateX(-50%) scale(1.5);\n\n width: 600px;\n height: 400px;\n\n opacity: 0.2;\n filter: blur(100px);\n\n ", " {\n width: 200px;\n height: 300px;\n }\n "])), responsive.mobile)),
13
13
  container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n box-sizing: border-box;\n text-align: center;\n "]))),
14
14
  desc: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-top: 0;\n font-size: ", "px;\n color: ", ";\n text-align: center;\n\n ", " {\n margin: 24px 16px;\n font-size: ", "px;\n }\n "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),
15
- title: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: 10;\n margin: 0;\n font-size: 100px;\n\n ", "\n\n b {\n ", "\n position: relative;\n z-index: 5;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n\n &::selection {\n -webkit-text-fill-color: #000 !important;\n }\n }\n "])), responsive({
15
+ title: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: 10;\n margin: 0;\n font-size: 100px;\n\n ", "\n\n b {\n ", "\n position: relative;\n z-index: 5;\n background-clip: text;\n\n -webkit-text-fill-color: transparent;\n\n &::selection {\n -webkit-text-fill-color: #000 !important;\n }\n }\n "])), responsive({
16
16
  mobile: {
17
17
  display: 'flex',
18
18
  flexDirection: 'column',
@@ -1,3 +1,4 @@
1
+ import 'katex/dist/katex.min.css';
1
2
  import { CSSProperties } from 'react';
2
3
  export interface MarkdownProps {
3
4
  /**
@@ -4,12 +4,14 @@ var _excluded = ["children", "className", "style"];
4
4
  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; }
5
5
  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; }
6
6
  import { Collapse, Divider, Image, Typography } from 'antd';
7
+ import 'katex/dist/katex.min.css';
7
8
  import { memo } from 'react';
8
9
  import { ErrorBoundary } from 'react-error-boundary';
9
10
  import ReactMarkdown from 'react-markdown';
11
+ import rehypeKatex from 'rehype-katex';
10
12
  import rehypeRaw from 'rehype-raw';
11
13
  import remarkGfm from 'remark-gfm';
12
- import Code from "./Code";
14
+ import remarkMath from 'remark-math';
13
15
  import CodeBlock from "./CodeBlock";
14
16
  import { useStyles } from "./style";
15
17
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +24,6 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
22
24
  styles = _useStyles.styles;
23
25
  var components = {
24
26
  a: Typography.Link,
25
- code: Code,
26
27
  details: Collapse,
27
28
  hr: function hr() {
28
29
  return /*#__PURE__*/_jsx(Divider, {
@@ -49,8 +50,8 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
49
50
  children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
50
51
  className: styles.markdown,
51
52
  components: components,
52
- rehypePlugins: [rehypeRaw],
53
- remarkPlugins: [remarkGfm]
53
+ rehypePlugins: [rehypeRaw, rehypeKatex],
54
+ remarkPlugins: [remarkGfm, remarkMath]
54
55
  }, props), {}, {
55
56
  children: children
56
57
  }))
@@ -1,4 +1,3 @@
1
1
  export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
2
- code: import("antd-style").SerializedStyles;
3
2
  markdown: any;
4
3
  }>;
@@ -1,13 +1,7 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
- var _templateObject;
3
1
  import { createStyles } from 'antd-style';
4
2
  export var useStyles = createStyles(function (_ref) {
5
- var css = _ref.css,
6
- token = _ref.token,
7
- isDarkMode = _ref.isDarkMode,
8
- stylish = _ref.stylish;
3
+ var stylish = _ref.stylish;
9
4
  return {
10
- code: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 2px 4px;\n font-family: ", " !important;\n color: ", ";\n border-radius: 4px;\n "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7),
11
5
  markdown: stylish.markdown
12
6
  };
13
7
  });
@@ -1,19 +1,19 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
3
3
  import { keyframes } from 'antd-style';
4
- import { readableColor } from 'polished';
5
4
  export var generateCustomStylish = function generateCustomStylish(_ref) {
6
5
  var css = _ref.css,
7
6
  token = _ref.token,
8
7
  isDarkMode = _ref.isDarkMode;
9
- var cyan = isDarkMode ? token.cyan9A : token.cyan10A;
10
8
  var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n "])));
9
+ var cyanColor = isDarkMode ? token.cyan9A : token.cyan11A;
10
+ var cyanBackground = isDarkMode ? token.cyan2A : token.cyan6A;
11
11
  return {
12
12
  blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n backdrop-filter: saturate(180%) blur(10px);\n "]))),
13
13
  blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n backdrop-filter: blur(36px);\n "]))),
14
14
  bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n width: 0;\n height: 4px;\n background-color: transparent;\n\n &-thumb {\n background-color: ", ";\n border-radius: 4px;\n transition: background-color 500ms ", ";\n }\n\n &-corner {\n display: none;\n width: 0;\n height: 0;\n }\n }\n "])), token.colorFill, token.motionEaseOut),
15
15
  gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-image: linear-gradient(\n -45deg,\n ", ",\n ", ",\n ", ",\n ", "\n );\n background-size: 400% 400%;\n border-radius: inherit;\n animation: 5s ", " 5s ease infinite;\n "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
16
- markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-break: break-all;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 0.5em;\n }\n }\n\n > *:last-child {\n margin-bottom: 0 !important;\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n\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 pre,\n [data-code-type='highlighter'] {\n border: none;\n border-radius: ", "px;\n\n > code {\n padding: 0 !important;\n border: none !important;\n }\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n font-size: ", "px;\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\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: 0;\n margin-inline-end: 0;\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\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n > ol > li {\n margin-left: 0;\n }\n\n ol {\n counter-reset: steps;\n margin-left: 0;\n list-style: none;\n\n li {\n counter-increment: steps;\n\n &::before {\n content: counter(steps);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n width: 1.1rem;\n height: 1.1rem;\n margin-right: 0.5em;\n\n font-size: 0.8em;\n font-weight: 500;\n line-height: 1;\n color: ", ";\n\n background: ", ";\n border-radius: 50%;\n }\n }\n\n ol li::before {\n color: ", ";\n background: ", ";\n }\n }\n\n > ul {\n > li {\n line-height: 1.8;\n list-style-type: disc;\n\n &::marker {\n color: ", ";\n }\n }\n }\n\n details {\n margin-bottom: 1em;\n padding: 12px 16px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n\n transition: all 400ms ", ";\n }\n\n details[open] {\n summary {\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n }\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, readableColor(cyan), cyan, token.colorTextSecondary, token.colorFill, cyan, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
16
+ markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-break: break-all;\n word-wrap: break-word;\n\n + * {\n margin-block-end: 0.5em;\n }\n }\n\n > *:last-child {\n margin-bottom: 0 !important;\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n\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 pre,\n [data-code-type='highlighter'] {\n border: none;\n border-radius: ", "px;\n\n > code {\n padding: 0 !important;\n border: none !important;\n }\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n font-size: ", "px;\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\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: 0;\n margin-inline-end: 0;\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\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n > ol > li {\n margin-left: 0;\n }\n\n ol {\n counter-reset: steps;\n margin-left: 0;\n list-style: none;\n\n li {\n counter-increment: steps;\n word-break: break-all;\n\n &::before {\n content: counter(steps);\n\n scale: 0.8;\n\n unicode-bidi: isolate;\n display: inline-flex !important;\n align-items: center;\n justify-content: center;\n\n width: 1.4em;\n min-width: 1.4em;\n max-width: 1.4em;\n height: 1.4em;\n margin-right: 0.5em;\n\n font-family: ", ";\n font-size: 1em;\n line-height: 1;\n color: ", ";\n\n background: ", ";\n border-radius: 50%;\n }\n }\n\n ol li::before {\n color: ", ";\n background: ", ";\n }\n }\n\n ul {\n > li::marker {\n color: ", ";\n }\n }\n\n > ul {\n > li {\n line-height: 1.8;\n list-style-type: disc;\n\n &::marker {\n color: ", " !important;\n }\n }\n }\n\n details {\n margin-bottom: 1em;\n padding: 12px 16px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n\n transition: all 400ms ", ";\n }\n\n details[open] {\n summary {\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n }\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.fontFamilyCode, cyanColor, cyanBackground, token.colorTextSecondary, token.colorFill, token.colorTextDescription, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
17
17
  noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n background-color: transparent;\n }\n "]))),
18
18
  resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n cursor: pointer;\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n "])), token.colorTextSecondary, token.colorText)
19
19
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.85.0",
3
+ "version": "1.86.1",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",
@@ -88,6 +88,7 @@
88
88
  "emoji-regex": "^10",
89
89
  "fast-deep-equal": "^3",
90
90
  "immer": "^10",
91
+ "katex": "^0.16",
91
92
  "leva": "^0",
92
93
  "lodash-es": "^4",
93
94
  "lucide-react": "latest",
@@ -100,8 +101,10 @@
100
101
  "react-markdown": "^8",
101
102
  "react-rnd": "^10",
102
103
  "react-simple-code-editor": "^0",
104
+ "rehype-katex": "^6",
103
105
  "rehype-raw": "^6",
104
106
  "remark-gfm": "^3",
107
+ "remark-math": "^5",
105
108
  "shikiji": "^0",
106
109
  "styled-components": "^6",
107
110
  "three": "^0.150",
@@ -1,3 +0,0 @@
1
- import { PropsWithChildren } from 'react';
2
- declare const Code: import("react").MemoExoticComponent<(p: PropsWithChildren<any>) => import("react/jsx-runtime").JSX.Element>;
3
- export default Code;
@@ -1,12 +0,0 @@
1
- import { memo } from 'react';
2
- import { useStyles } from "./style";
3
- import { jsxs as _jsxs } from "react/jsx-runtime";
4
- var Code = /*#__PURE__*/memo(function (p) {
5
- var _useStyles = useStyles(),
6
- styles = _useStyles.styles;
7
- return /*#__PURE__*/_jsxs("code", {
8
- className: styles.code,
9
- children: ["`", p.children, "`"]
10
- });
11
- });
12
- export default Code;