@lobehub/ui 1.94.5 → 1.94.7

package/es/ChatItem/components/Actions.js

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Actions = /*#__PURE__*/memo(function (_ref) {
@@ -12,7 +13,8 @@ var Actions = /*#__PURE__*/memo(function (_ref) {
       type: type
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Flexbox, {
+    align: 'flex-start',
     className: styles.actions,
     role: "chat-item-actions",
     children: actions

package/es/ChatItem/components/Loading.js

@@ -1,5 +1,6 @@
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,8 +12,10 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     }),
     styles = _useStyles.styles;
   if (!loading) return null;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Flexbox, {
+    align: 'center',
     className: styles.loading,
+    justify: 'center',
     children: /*#__PURE__*/_jsx(Icon, {
       icon: Loader2,
       size: {

package/es/ChatItem/components/Title.js

@@ -16,8 +16,8 @@ var Title = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, {
     className: styles.name,
+    direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
     gap: 4,
-    horizontal: true,
     children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
       children: formatTime(time)
     })]

package/es/ChatItem/index.js

@@ -54,8 +54,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
-    gap: mobile ? 6 : 12,
-    horizontal: true
+    direction: placement === 'left' ? 'horizontal' : 'horizontal-reverse',
+    gap: mobile ? 6 : 12
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(Avatar, {
       addon: avatarAddon,
@@ -65,6 +65,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       placement: placement,
       size: mobile ? MOBILE_AVATAR_SIZE : undefined
     }), /*#__PURE__*/_jsxs(Flexbox, {
+      align: placement === 'left' ? 'flex-start' : 'flex-end',
       className: styles.messageContainer,
       children: [/*#__PURE__*/_jsx(Title, {
         avatar: avatar,
@@ -72,7 +73,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         showTitle: showTitle,
         time: time
       }), /*#__PURE__*/_jsxs(Flexbox, {
+        align: placement === 'left' ? 'flex-start' : 'flex-end',
         className: styles.messageContent,
+        direction: type === 'block' ? placement === 'left' ? 'horizontal' : 'horizontal-reverse' : 'vertical',
         gap: 8,
         children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
           ErrorMessage: ErrorMessage,

package/es/ChatItem/style.js

@@ -20,18 +20,18 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
-    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: flex-start;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
+    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
     alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          justify-content: revert;\n\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut, responsive.mobile)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
     editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
-    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          align-items: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end')),
-    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n          flex-direction: ", ";\n          align-items: ", ";\n\n          ", " {\n            flex-direction: column;\n          }\n        "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end', responsive.mobile)),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n\n          ", " {\n            flex-direction: column !important;\n          }\n        "])), responsive.mobile)),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        flex-direction: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
+    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -22,10 +22,14 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isLoading ? /*#__PURE__*/_jsx("code", {
+    children: [isLoading ? /*#__PURE__*/_jsx("div", {
       className: cx(styles.unshiki, className),
       style: style,
-      children: children
+      children: /*#__PURE__*/_jsx("pre", {
+        children: /*#__PURE__*/_jsx("code", {
+          children: children
+        })
+      })
     }) : /*#__PURE__*/_jsx("div", {
       className: cx(styles.shiki, className),
       dangerouslySetInnerHTML: {

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -12,6 +12,6 @@ export var useStyles = createStyles(function (_ref) {
     loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow: auto;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
     shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "])))),
-    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 8px;\n    "])))
+    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorTextDescription)
   };
 });

package/es/Highlighter/style.js

@@ -16,6 +16,6 @@ export var useStyles = createStyles(function (_ref, type) {
     container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\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        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
     header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding: 4px 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          right: 0;\n          bottom: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
-    select: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n\n        input {\n          text-align: center;\n        }\n      "])), token.colorTextDescription)
+    select: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription)
   };
 });

package/es/hooks/languageMap.d.ts

@@ -1,2 +1,2 @@
-declare const _default: string[];
+declare const _default: readonly ["abap", "actionscript-3", "ada", "apache", "apex", "apl", "applescript", "ara", "asm", "astro", "awk", "ballerina", "bat", "beancount", "berry", "bibtex", "bicep", "blade", "c", "cadence", "clarity", "clojure", "cmake", "cobol", "codeql", "coffee", "cpp", "crystal", "csharp", "css", "cue", "cypher", "d", "dart", "dax", "diff", "docker", "dream-maker", "elixir", "elm", "erb", "erlang", "fish", "fsharp", "gdresource", "gdscript", "gdshader", "gherkin", "git-commit", "git-rebase", "glimmer-js", "glimmer-ts", "glsl", "gnuplot", "go", "graphql", "groovy", "hack", "haml", "handlebars", "haskell", "hcl", "hjson", "hlsl", "html", "http", "imba", "ini", "java", "javascript", "jinja-html", "jison", "json", "json5", "jsonc", "jsonl", "jsonnet", "jssm", "jsx", "julia", "kotlin", "kusto", "latex", "less", "liquid", "lisp", "logo", "lua", "make", "markdown", "marko", "matlab", "mdc", "mdx", "mermaid", "mojo", "narrat", "nextflow", "nginx", "nim", "nix", "objective-c", "objective-cpp", "ocaml", "pascal", "perl", "php", "plsql", "postcss", "powerquery", "powershell", "prisma", "prolog", "proto", "pug", "puppet", "purescript", "python", "r", "raku", "razor", "reg", "rel", "riscv", "rst", "ruby", "rust", "sas", "sass", "scala", "scheme", "scss", "shaderlab", "shellscript", "shellsession", "smalltalk", "solidity", "sparql", "splunk", "sql", "ssh-config", "stata", "stylus", "svelte", "swift", "system-verilog", "tasl", "tcl", "tex", "toml", "tsx", "turtle", "twig", "typescript", "v", "vb", "verilog", "vhdl", "viml", "vue", "vue-html", "vyper", "wasm", "wenyan", "wgsl", "wolfram", "xml", "xsl", "yaml", "zenscript", "zig", "bash", "batch", "be", "c#", "cdc", "clj", "cmd", "console", "cql", "cs", "dockerfile", "erl", "f#", "fs", "fsl", "gjs", "gts", "hbs", "hs", "jade", "js", "kql", "makefile", "md", "nar", "nf", "objc", "perl6", "properties", "ps", "ps1", "py", "ql", "rb", "rs", "sh", "shader", "shell", "spl", "styl", "ts", "vim", "vimscript", "vy", "yml", "zsh", "文言"];
 export default _default;

package/es/hooks/useHighlight.js

@@ -3,89 +3,67 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getHighlighter } from 'shikiji';
 import useSWR from 'swr';
 import { themeConfig } from "../Highlighter/theme";
-import languageMap from "./languageMap";
 export var FALLBACK_LANG = 'markdown';
-var FALLBACK_LANGS = ['ts', 'typescript', 'js', 'javascript', 'markdown', 'md'];
-var THEME = [themeConfig(true), themeConfig(false)];
+var FALLBACK_LANGS = [FALLBACK_LANG];
 var cacheHighlighter;
 var initHighlighter = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang) {
     var highlighter;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           highlighter = cacheHighlighter;
-          if (!highlighter) {
+          if (!(highlighter && FALLBACK_LANGS.includes(lang))) {
             _context.next = 5;
             break;
           }
           return _context.abrupt("return", highlighter);
         case 5:
-          _context.next = 7;
+          FALLBACK_LANGS.push(lang);
+          _context.next = 8;
           return getHighlighter({
             langs: FALLBACK_LANGS,
-            themes: THEME
+            themes: [themeConfig(true), themeConfig(false)]
           });
-        case 7:
+        case 8:
           highlighter = _context.sent;
           cacheHighlighter = highlighter;
           return _context.abrupt("return", highlighter);
-        case 10:
+        case 11:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
-  return function initHighlighter() {
+  return function initHighlighter(_x) {
     return _ref.apply(this, arguments);
   };
 }();
 export var useHighlight = function useHighlight(text, language, isDarkMode) {
   return useSWR([text, language, Number(isDarkMode)].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var theme, lang, highlighter, html;
+    var highlighter, html;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          theme = isDarkMode ? 'dark' : 'light';
-          lang = language;
-          _context2.prev = 2;
-          _context2.next = 5;
-          return initHighlighter();
-        case 5:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return initHighlighter(language);
+        case 3:
           highlighter = _context2.sent;
-          if (FALLBACK_LANGS.includes(lang)) {
-            _context2.next = 13;
-            break;
-          }
-          if (!languageMap.includes(lang)) {
-            _context2.next = 12;
-            break;
-          }
-          _context2.next = 10;
-          return highlighter === null || highlighter === void 0 ? void 0 : highlighter.loadLanguage(lang);
-        case 10:
-          _context2.next = 13;
-          break;
-        case 12:
-          lang = FALLBACK_LANG;
-        case 13:
-          _context2.next = 15;
-          return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
-            lang: lang,
-            theme: theme
+          html = highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+            lang: language,
+            theme: isDarkMode ? 'dark' : 'light'
           });
-        case 15:
-          html = _context2.sent;
           return _context2.abrupt("return", html);
-        case 19:
-          _context2.prev = 19;
-          _context2.t0 = _context2["catch"](2);
-          return _context2.abrupt("return", "<code>".concat(text, "</code>"));
-        case 22:
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](0);
+          return _context2.abrupt("return", "<pre><code>".concat(text, "</code></pre>"));
+        case 11:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 19]]);
+    }, _callee2, null, [[0, 8]]);
   })));
 };
 export { default as languageMap } from "./languageMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.94.5",
+  "version": "1.94.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",