@lobehub/ui 2.15.4 → 2.16.0

package/es/hooks/useHighlight.js

@@ -2,11 +2,27 @@
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
 import { useTheme, useThemeMode } from 'antd-style';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ShikiStreamTokenizer } from 'shiki-stream';
 import useSWR from 'swr';
 import { Md5 } from 'ts-md5';
 import { getCodeLanguageByInput } from "../Highlighter/const";
@@ -17,10 +33,15 @@ var MD5_LENGTH_THRESHOLD = 10000; // Use async MD5 for text exceeding this lengt
 // Color replacement mapping type
 
 // Lazy load shiki
-var loadShiki = function loadShiki() {
+var loadShikiModule = function loadShikiModule() {
   if (typeof window === 'undefined') return Promise.resolve(null);
-  return import('shiki').then(function (mod) {
-    return mod.codeToHtml;
+  return import('shiki');
+};
+var shikiModulePromise = loadShikiModule();
+var loadShiki = function loadShiki() {
+  return shikiModulePromise.then(function (mod) {
+    var _mod$codeToHtml;
+    return (_mod$codeToHtml = mod === null || mod === void 0 ? void 0 : mod.codeToHtml) !== null && _mod$codeToHtml !== void 0 ? _mod$codeToHtml : null;
   });
 };
 var shikiPromise = loadShiki();
@@ -29,12 +50,248 @@ var shikiPromise = loadShiki();
 var escapeHtml = function escapeHtml(str) {
   return str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
 };
+var tokensToLineTokens = function tokensToLineTokens(tokens) {
+  if (!tokens.length) return [[]];
+  var lines = [[]];
+  var currentLine = lines[0];
+  var startNewLine = function startNewLine() {
+    currentLine = [];
+    lines.push(currentLine);
+  };
+  tokens.forEach(function (token) {
+    var _token$content;
+    var content = (_token$content = token.content) !== null && _token$content !== void 0 ? _token$content : '';
+    if (content === '\n') {
+      startNewLine();
+      return;
+    }
+    if (!content.includes('\n')) {
+      currentLine.push(token);
+      return;
+    }
+    var segments = content.split('\n');
+    segments.forEach(function (segment, index) {
+      if (segment) {
+        currentLine.push(_objectSpread(_objectSpread({}, token), {}, {
+          content: segment
+        }));
+      }
+      if (index < segments.length - 1) {
+        startNewLine();
+      }
+    });
+  });
+  if (lines.length === 0) return [[]];
+  return lines;
+};
+var createPreStyle = function createPreStyle(bg, fg) {
+  if (!bg && !fg) return undefined;
+  return {
+    backgroundColor: bg,
+    color: fg
+  };
+};
+var useStreamingHighlighter = function useStreamingHighlighter(text, options) {
+  var colorReplacements = options.colorReplacements,
+    enabled = options.enabled,
+    language = options.language,
+    theme = options.theme;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    result = _useState2[0],
+    setResult = _useState2[1];
+  var tokenizerRef = useRef(null);
+  var previousTextRef = useRef('');
+  var latestTextRef = useRef(text);
+  var preStyleRef = useRef(undefined);
+  var colorReplacementsRef = useRef(colorReplacements);
+  var linesRef = useRef([[]]);
+  useEffect(function () {
+    latestTextRef.current = text;
+  }, [text]);
+  useEffect(function () {
+    colorReplacementsRef.current = colorReplacements;
+  }, [colorReplacements]);
+  var setStreamingResult = useCallback(function (rawLines) {
+    var previousLines = linesRef.current;
+    var mergedLines = rawLines.map(function (line, index) {
+      var previousLine = previousLines[index];
+      if (previousLine && previousLine.length === line.length && previousLine.every(function (token, tokenIndex) {
+        return token === line[tokenIndex];
+      })) {
+        return previousLine;
+      }
+      return line;
+    });
+    linesRef.current = mergedLines;
+    setResult({
+      colorReplacements: colorReplacementsRef.current,
+      lines: mergedLines,
+      preStyle: preStyleRef.current
+    });
+  }, []);
+  var updateTokens = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(nextText) {
+      var forceReset,
+        tokenizer,
+        previousText,
+        chunk,
+        canAppend,
+        mergedTokens,
+        _mergedTokens,
+        _args = arguments;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            forceReset = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
+            tokenizer = tokenizerRef.current;
+            if (tokenizer) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            if (forceReset) {
+              tokenizer.clear();
+              previousTextRef.current = '';
+            }
+            previousText = previousTextRef.current;
+            chunk = nextText;
+            canAppend = !forceReset && nextText.startsWith(previousText);
+            if (canAppend) {
+              chunk = nextText.slice(previousText.length);
+            } else if (!forceReset) {
+              tokenizer.clear();
+            }
+            previousTextRef.current = nextText;
+            if (chunk) {
+              _context.next = 14;
+              break;
+            }
+            mergedTokens = [].concat(_toConsumableArray(tokenizer.tokensStable), _toConsumableArray(tokenizer.tokensUnstable));
+            setStreamingResult(mergedTokens.length ? tokensToLineTokens(mergedTokens) : [[]]);
+            return _context.abrupt("return");
+          case 14:
+            _context.prev = 14;
+            _context.next = 17;
+            return tokenizer.enqueue(chunk);
+          case 17:
+            _mergedTokens = [].concat(_toConsumableArray(tokenizer.tokensStable), _toConsumableArray(tokenizer.tokensUnstable));
+            setStreamingResult(tokensToLineTokens(_mergedTokens));
+            _context.next = 24;
+            break;
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](14);
+            console.error('Streaming highlighting failed:', _context.t0);
+          case 24:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[14, 21]]);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [setStreamingResult]);
+  useEffect(function () {
+    if (!enabled) {
+      var _tokenizerRef$current;
+      (_tokenizerRef$current = tokenizerRef.current) === null || _tokenizerRef$current === void 0 || _tokenizerRef$current.clear();
+      tokenizerRef.current = null;
+      previousTextRef.current = '';
+      preStyleRef.current = undefined;
+      linesRef.current = [[]];
+      setResult(undefined);
+      return;
+    }
+    var cancelled = false;
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var mod, highlighter, tokenizer, themeInfo, currentText;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return shikiModulePromise;
+          case 2:
+            mod = _context2.sent;
+            if (!(!mod || cancelled)) {
+              _context2.next = 5;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 5:
+            _context2.prev = 5;
+            _context2.next = 8;
+            return mod.getSingletonHighlighter({
+              langs: language ? [language] : [],
+              themes: [theme]
+            });
+          case 8:
+            highlighter = _context2.sent;
+            if (!(!highlighter || cancelled)) {
+              _context2.next = 11;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 11:
+            tokenizer = new ShikiStreamTokenizer({
+              highlighter: highlighter,
+              lang: language,
+              theme: theme
+            });
+            tokenizerRef.current = tokenizer;
+            previousTextRef.current = '';
+            linesRef.current = [[]];
+            themeInfo = highlighter.getTheme(theme);
+            preStyleRef.current = createPreStyle(themeInfo === null || themeInfo === void 0 ? void 0 : themeInfo.bg, themeInfo === null || themeInfo === void 0 ? void 0 : themeInfo.fg);
+            currentText = latestTextRef.current;
+            if (!currentText) {
+              _context2.next = 23;
+              break;
+            }
+            _context2.next = 21;
+            return updateTokens(currentText, true);
+          case 21:
+            _context2.next = 24;
+            break;
+          case 23:
+            setStreamingResult([[]]);
+          case 24:
+            _context2.next = 29;
+            break;
+          case 26:
+            _context2.prev = 26;
+            _context2.t0 = _context2["catch"](5);
+            console.error('Streaming highlighter initialization failed:', _context2.t0);
+          case 29:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[5, 26]]);
+    }))();
+    return function () {
+      var _tokenizerRef$current2;
+      cancelled = true;
+      (_tokenizerRef$current2 = tokenizerRef.current) === null || _tokenizerRef$current2 === void 0 || _tokenizerRef$current2.clear();
+      tokenizerRef.current = null;
+      previousTextRef.current = '';
+    };
+  }, [enabled, language, setStreamingResult, theme, updateTokens]);
+  useEffect(function () {
+    if (!enabled) return;
+    if (!tokenizerRef.current) return;
+    updateTokens(text);
+  }, [enabled, text, updateTokens]);
+  return result;
+};
 
 // Main highlight component
-export var useHighlight = function useHighlight(text, _ref) {
-  var language = _ref.language,
-    enableTransformer = _ref.enableTransformer,
-    builtinTheme = _ref.theme;
+export var useHighlight = function useHighlight(text, _ref3) {
+  var language = _ref3.language,
+    enableTransformer = _ref3.enableTransformer,
+    builtinTheme = _ref3.theme,
+    streaming = _ref3.streaming;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var theme = useTheme();
@@ -88,23 +345,23 @@ export var useHighlight = function useHighlight(text, _ref) {
   }, [text, matchedLanguage, isDarkMode, builtinTheme]);
 
   // Use SWR to get highlighted HTML
-  return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  var response = useSWR(streaming ? null : cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
     var codeToHtml, html, _codeToHtml, _html, fallbackHtml;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context.prev = 0;
-          _context.next = 3;
+          _context3.prev = 0;
+          _context3.next = 3;
           return shikiPromise;
         case 3:
-          codeToHtml = _context.sent;
+          codeToHtml = _context3.sent;
           if (codeToHtml) {
-            _context.next = 6;
+            _context3.next = 6;
             break;
           }
-          return _context.abrupt("return", text);
+          return _context3.abrupt("return", text);
         case 6:
-          _context.next = 8;
+          _context3.next = 8;
           return codeToHtml(text, {
             colorReplacements: builtinTheme ? undefined : colorReplacements,
             lang: matchedLanguage,
@@ -112,42 +369,42 @@ export var useHighlight = function useHighlight(text, _ref) {
             transformers: transformers
           });
         case 8:
-          html = _context.sent;
-          return _context.abrupt("return", html);
+          html = _context3.sent;
+          return _context3.abrupt("return", html);
         case 12:
-          _context.prev = 12;
-          _context.t0 = _context["catch"](0);
-          console.error('Advanced rendering failed:', _context.t0);
-          _context.prev = 15;
-          _context.next = 18;
+          _context3.prev = 12;
+          _context3.t0 = _context3["catch"](0);
+          console.error('Advanced rendering failed:', _context3.t0);
+          _context3.prev = 15;
+          _context3.next = 18;
           return shikiPromise;
         case 18:
-          _codeToHtml = _context.sent;
+          _codeToHtml = _context3.sent;
           if (_codeToHtml) {
-            _context.next = 21;
+            _context3.next = 21;
             break;
           }
-          return _context.abrupt("return", text);
+          return _context3.abrupt("return", text);
         case 21:
-          _context.next = 23;
+          _context3.next = 23;
           return _codeToHtml(text, {
             lang: matchedLanguage,
             theme: isDarkMode ? 'dark-plus' : 'light-plus'
           });
         case 23:
-          _html = _context.sent;
-          return _context.abrupt("return", _html);
+          _html = _context3.sent;
+          return _context3.abrupt("return", _html);
         case 27:
-          _context.prev = 27;
-          _context.t1 = _context["catch"](15);
+          _context3.prev = 27;
+          _context3.t1 = _context3["catch"](15);
           // Fallback to plain text
           fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
-          return _context.abrupt("return", fallbackHtml);
+          return _context3.abrupt("return", fallbackHtml);
         case 31:
         case "end":
-          return _context.stop();
+          return _context3.stop();
       }
-    }, _callee, null, [[0, 12], [15, 27]]);
+    }, _callee3, null, [[0, 12], [15, 27]]);
   })), {
     dedupingInterval: 3000,
     // Only execute once for the same request within 3 seconds
@@ -156,5 +413,16 @@ export var useHighlight = function useHighlight(text, _ref) {
     revalidateOnFocus: false,
     revalidateOnReconnect: false
   });
+  var effectiveTheme = builtinTheme || (isDarkMode ? 'slack-dark' : 'slack-ochin');
+  var streamingResult = useStreamingHighlighter(text, {
+    colorReplacements: builtinTheme ? undefined : colorReplacements[effectiveTheme],
+    enabled: streaming,
+    language: matchedLanguage,
+    theme: effectiveTheme
+  });
+  return _objectSpread(_objectSpread({}, response), {}, {
+    colorReplacements: colorReplacements,
+    streaming: streamingResult
+  });
 };
 export { escapeHtml, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };

package/es/icons/lucideExtra/DiscordIcon.js

@@ -1,17 +1,10 @@
 import { createLucideIcon } from 'lucide-react';
 var DiscordIcon = createLucideIcon('Discord', [['path', {
-  d: 'M19.277 4.946a17.317 17.317 0 00-4.274-1.326.065.065 0 00-.069.033c-.184.328-.389.756-.532 1.093a15.986 15.986 0 00-4.801 0 11.061 11.061 0 00-.54-1.093.067.067 0 00-.07-.033c-1.475.255-2.912.7-4.274 1.326a.061.061 0 00-.028.024c-2.722 4.068-3.468 8.035-3.102 11.953a.072.072 0 00.027.05 17.41 17.41 0 005.244 2.65.068.068 0 00.074-.024c.403-.552.764-1.134 1.072-1.745a.067.067 0 00-.013-.078.067.067 0 00-.023-.015 11.47 11.47 0 01-1.638-.78.068.068 0 01-.007-.112c.11-.083.22-.168.325-.255a.066.066 0 01.068-.01c3.437 1.57 7.158 1.57 10.554 0a.064.064 0 01.069.009c.105.087.215.173.326.256a.068.068 0 01.017.088.067.067 0 01-.023.023c-.523.306-1.072.567-1.639.78a.066.066 0 00-.043.066c0 .01.003.02.008.028.315.61.675 1.192 1.072 1.744a.067.067 0 00.073.025 17.356 17.356 0 005.252-2.65.067.067 0 00.028-.05c.437-4.53-.734-8.464-3.105-11.952a.054.054 0 00-.028-.025z',
+  d: 'M19.277 4.946C17.9157 4.32101 16.479 3.87529 15.003 3.62C14.9895 3.6175 14.9755 3.61935 14.9631 3.62528C14.9507 3.63121 14.9405 3.64091 14.934 3.653C14.75 3.981 14.545 4.409 14.402 4.746C12.8108 4.50432 11.1922 4.50432 9.601 4.746C9.44123 4.37202 9.26096 4.00713 9.061 3.653C9.05418 3.64093 9.04378 3.63128 9.03125 3.62537C9.01871 3.61946 9.00465 3.61758 8.991 3.62C7.516 3.875 6.079 4.32 4.717 4.946C4.70541 4.95092 4.69563 4.9593 4.689 4.97C1.967 9.038 1.221 13.005 1.587 16.923C1.58787 16.9327 1.59072 16.9422 1.59536 16.9508C1.6 16.9594 1.60634 16.9669 1.614 16.973C3.19925 18.147 4.97249 19.0431 6.858 19.623C6.87131 19.627 6.88554 19.6269 6.89877 19.6226C6.912 19.6183 6.9236 19.6101 6.932 19.599C7.335 19.047 7.696 18.465 8.004 17.854C8.01039 17.8413 8.01257 17.8269 8.01023 17.8129C8.0079 17.7989 8.00116 17.7859 7.991 17.776C7.98445 17.7695 7.97662 17.7644 7.968 17.761C7.40226 17.5447 6.85455 17.2838 6.33 16.981C6.32051 16.9753 6.31254 16.9674 6.30679 16.958C6.30103 16.9486 6.29766 16.9379 6.29697 16.9268C6.29628 16.9158 6.29829 16.9048 6.30283 16.8947C6.30736 16.8846 6.31429 16.8758 6.323 16.869C6.433 16.786 6.543 16.701 6.648 16.614C6.65732 16.6062 6.6686 16.6012 6.6806 16.5994C6.69259 16.5977 6.70484 16.5993 6.716 16.604C10.153 18.174 13.874 18.174 17.27 16.604C17.2811 16.5987 17.2936 16.5967 17.3058 16.5983C17.3181 16.5999 17.3296 16.605 17.339 16.613C17.444 16.7 17.554 16.786 17.665 16.869C17.678 16.8791 17.6869 16.8936 17.69 16.9098C17.6932 16.926 17.6903 16.9428 17.682 16.957C17.6763 16.9664 17.6684 16.9743 17.659 16.98C17.136 17.286 16.587 17.547 16.02 17.76C16.0067 17.7649 15.9953 17.774 15.9876 17.7859C15.9798 17.7978 15.9761 17.8118 15.977 17.826C15.977 17.836 15.98 17.846 15.985 17.854C16.3 18.464 16.66 19.046 17.057 19.598C17.0651 19.6092 17.0765 19.6176 17.0895 19.6221C17.1026 19.6265 17.1167 19.6269 17.13 19.623C19.0187 19.045 20.7949 18.1487 22.382 16.973C22.3901 16.9673 22.3968 16.9598 22.4016 16.9511C22.4065 16.9425 22.4093 16.9329 22.41 16.923C22.847 12.393 21.676 8.459 19.305 4.971C19.299 4.95959 19.289 4.95072 19.277 4.946Z',
   key: '1'
-}], ['circle', {
-  cx: '8.588',
-  cy: '12.41',
-  key: '2',
-  r: '.787'
-}], ['circle', {
-  cx: '15.412',
-  cy: '12.41',
-  key: '3',
-  r: '.787'
+}], ['path', {
+  d: 'M8.588 13.197C9.023 13.197 9.375 12.845 9.375 12.41 9.375 11.975 9.023 11.623 8.588 11.623 8.153 11.623 7.801 11.975 7.801 12.41 7.801 12.845 8.153 13.197 8.588 13.197ZM15.412 13.197C15.847 13.197 16.199 12.845 16.199 12.41 16.199 11.975 15.847 11.623 15.412 11.623 14.977 11.623 14.625 11.975 14.625 12.41 14.625 12.845 14.977 13.197 15.412 13.197Z',
+  key: '2'
 }]]);
 DiscordIcon.displayName = 'DiscordIcon';
 export default DiscordIcon;

package/es/icons/lucideExtra/GlobeOffIcon.js

@@ -1,25 +1,10 @@
 import { createLucideIcon } from 'lucide-react';
-var GlobeOffIcon = createLucideIcon('Discord', [['path', {
-  d: 'M8.42872 8.5C8.14613 9.63599 8 10.8107 8 12C8 15.7233 9.43223 19.3038 12 22C13.7235 20.1904 14.9354 17.9823 15.546 15.6',
+var GlobeOffIcon = createLucideIcon('GlobeOff', [['path', {
+  d: 'M8.429 8.5C8.146 9.636 8 10.811 8 12 8 15.723 9.432 19.304 12 22 13.724 20.19 14.935 17.982 15.546 15.6M10.112 4.463C10.648 3.584 11.279 2.757 12 2 14.182 4.291 15.544 7.222 15.904 10.335M22 12H17.5M12 12H2M2 2 22 22',
   key: '1'
 }], ['path', {
-  d: 'M10.1124 4.46344C10.6477 3.58353 11.2791 2.75691 12 2C14.1823 4.29141 15.5444 7.22163 15.9042 10.3353',
+  d: 'M8.35 2.69C10.161 1.983 12.138 1.819 14.041 2.218 15.943 2.617 17.688 3.562 19.062 4.937 20.436 6.312 21.379 8.057 21.777 9.96 22.174 11.863 22.009 13.84 21.3 15.65M19.08 19.08C18.15 20.01 17.047 20.747 15.832 21.25 14.617 21.754 13.315 22.013 12 22.013 10.685 22.013 9.383 21.754 8.168 21.25 6.954 20.747 5.85 20.01 4.92 19.08 3.99 18.15 3.253 17.046 2.75 15.832 2.246 14.617 1.987 13.315 1.987 12 1.987 10.685 2.246 9.383 2.75 8.168 3.253 6.953 3.99 5.85 4.92 4.92',
   key: '2'
-}], ['path', {
-  d: 'M22 12L17.5 12',
-  key: '3'
-}], ['path', {
-  d: 'M12 12L2 12',
-  key: '4'
-}], ['path', {
-  d: 'M2 2L22 22',
-  key: '5'
-}], ['path', {
-  d: 'M8.34998 2.69014C10.1606 1.98297 12.1381 1.81882 14.0405 2.21778C15.943 2.61675 17.6879 3.56153 19.0618 4.93655C20.4358 6.31157 21.3792 8.05722 21.7767 9.95997C22.1742 11.8627 22.0085 13.8401 21.3 15.6501',
-  key: '6'
-}], ['path', {
-  d: 'M19.0801 19.0799C18.1503 20.0097 17.0465 20.7472 15.8317 21.2504C14.6169 21.7536 13.3149 22.0126 12.0001 22.0126C10.6852 22.0126 9.38318 21.7536 8.16839 21.2504C6.9536 20.7472 5.84982 20.0097 4.92006 19.0799C3.9903 18.1502 3.25277 17.0464 2.74959 15.8316C2.24641 14.6168 1.98743 13.3148 1.98743 11.9999C1.98743 10.685 2.24641 9.38304 2.74959 8.16825C3.25277 6.95346 3.9903 5.84968 4.92006 4.91992',
-  key: '7'
 }]]);
 GlobeOffIcon.displayName = 'GlobeOffIcon';
 export default GlobeOffIcon;

package/es/icons/lucideExtra/LeftClickIcon.js

@@ -1,10 +1,9 @@
 import { createLucideIcon } from 'lucide-react';
-import { KeyMapEnum } from "../../Hotkey/const";
-var LeftClickIcon = createLucideIcon(KeyMapEnum.LeftClick, [['path', {
-  d: 'M19 10a7 7 0 10-14 0v4a7 7 0 1014 0v-4zM2 9.333C2 6.36 3.491 3.71 5.814 2',
+var LeftClickIcon = createLucideIcon('LeftClick', [['path', {
+  d: 'M2 9.333C2 6.36 3.491 3.71 5.814 2M19 10C19 9.08075 18.8189 8.1705 18.4672 7.32122C18.1154 6.47194 17.5998 5.70026 16.9497 5.05025C16.2997 4.40024 15.5281 3.88463 14.6788 3.53284C13.8295 3.18106 12.9193 3 12 3C11.0807 3 10.1705 3.18106 9.32122 3.53284C8.47194 3.88463 7.70026 4.40024 7.05025 5.05025C6.40024 5.70026 5.88463 6.47194 5.53284 7.32122C5.18106 8.1705 5 9.08075 5 10V14C5 14.9193 5.18106 15.8295 5.53284 16.6788C5.88463 17.5281 6.40024 18.2997 7.05025 18.9497C7.70026 19.5998 8.47194 20.1154 9.32122 20.4672C10.1705 20.8189 11.0807 21 12 21C12.9193 21 13.8295 20.8189 14.6788 20.4672C15.5281 20.1154 16.2997 19.5998 16.9497 18.9497C17.5998 18.2997 18.1154 17.5281 18.4672 16.6788C18.8189 15.8295 19 14.9193 19 14V10Z',
   key: '1'
 }], ['path', {
-  d: 'M12 4v7H6',
+  d: 'M12 4V11H6',
   key: '2'
 }]]);
 LeftClickIcon.displayName = 'LeftClickIcon';

package/es/icons/lucideExtra/LeftDoubleClickIcon.js

@@ -1,7 +1,6 @@
 import { createLucideIcon } from 'lucide-react';
-import { KeyMapEnum } from "../../Hotkey/const";
-var LeftDoubleClickIcon = createLucideIcon(KeyMapEnum.LeftDoubleClick, [['path', {
-  d: 'M19 10v4a7 7 0 11-14 0v-3m0 0v-1a7 7 0 017-7v8H5zM2 9.333C2 6.36 3.491 3.71 5.814 2M20.5 2h1.25c.69 0 1.25.56 1.25 1.25v0c0 .69-.56 1.25-1.25 1.25v0c-.69 0-1.25.56-1.25 1.25V7H23M15 4l3 3M18 4l-3 3',
+var LeftDoubleClickIcon = createLucideIcon('LeftDoubleClick', [['path', {
+  d: 'M19 10V14C19 14.9193 18.8189 15.8295 18.4672 16.6788C18.1154 17.5281 17.5998 18.2997 16.9497 18.9497C16.2997 19.5998 15.5281 20.1154 14.6788 20.4672C13.8295 20.8189 12.9193 21 12 21C11.0807 21 10.1705 20.8189 9.32122 20.4672C8.47194 20.1154 7.70026 19.5998 7.05025 18.9497C6.40024 18.2997 5.88463 17.5281 5.53284 16.6788C5.18106 15.8295 5 14.9193 5 14V11M5 11V10C5 8.14348 5.7375 6.36301 7.05025 5.05025C8.36301 3.7375 10.1435 3 12 3V11H5ZM2 9.333C2 6.36 3.491 3.71 5.814 2M20.5 2H21.75C22.44 2 23 2.56 23 3.25C23 3.94 22.44 4.5 21.75 4.5C21.06 4.5 20.5 5.06 20.5 5.75V7H23M15 4L18 7M18 4L15 7',
   key: '1'
 }]]);
 LeftDoubleClickIcon.displayName = 'LeftDoubleClickIcon';

package/es/icons/lucideExtra/RightClickIcon.js

@@ -1,10 +1,9 @@
 import { createLucideIcon } from 'lucide-react';
-import { KeyMapEnum } from "../../Hotkey/const";
-var RightClickIcon = createLucideIcon(KeyMapEnum.RightClick, [['path', {
-  d: 'M19 10a7 7 0 10-14 0v4a7 7 0 1014 0v-4zM22 9.333C22 6.36 20.509 3.71 18.186 2',
+var RightClickIcon = createLucideIcon('RightClick', [['path', {
+  d: 'M22 9.333C22 6.36 20.509 3.71 18.186 2M19 10C19 9.08075 18.8189 8.1705 18.4672 7.32122C18.1154 6.47194 17.5998 5.70026 16.9497 5.05025C16.2997 4.40024 15.5281 3.88463 14.6788 3.53284C13.8295 3.18106 12.9193 3 12 3C11.0807 3 10.1705 3.18106 9.32122 3.53284C8.47194 3.88463 7.70026 4.40024 7.05025 5.05025C6.40024 5.70026 5.88463 6.47194 5.53284 7.32122C5.18106 8.1705 5 9.08075 5 10V14C5 14.9193 5.18106 15.8295 5.53284 16.6788C5.88463 17.5281 6.40024 18.2997 7.05025 18.9497C7.70026 19.5998 8.47194 20.1154 9.32122 20.4672C10.1705 20.8189 11.0807 21 12 21C12.9193 21 13.8295 20.8189 14.6788 20.4672C15.5281 20.1154 16.2997 19.5998 16.9497 18.9497C17.5998 18.2997 18.1154 17.5281 18.4672 16.6788C18.8189 15.8295 19 14.9193 19 14V10Z',
   key: '1'
 }], ['path', {
-  d: 'M12 4v7h6',
+  d: 'M12 4V11H18',
   key: '2'
 }]]);
 RightClickIcon.displayName = 'RightClickIcon';

package/es/icons/lucideExtra/RightDoubleClickIcon.js

@@ -1,10 +1,9 @@
 import { createLucideIcon } from 'lucide-react';
-import { KeyMapEnum } from "../../Hotkey/const";
-var RightDoubleClickIcon = createLucideIcon(KeyMapEnum.RightDoubleClick, [['path', {
-  d: 'M12 3a7 7 0 017 7v4a7 7 0 11-14 0v-4',
+var RightDoubleClickIcon = createLucideIcon('RightDoubleClick', [['path', {
+  d: 'M12 3C13.8565 3 15.637 3.7375 16.9497 5.05025C18.2625 6.36301 19 8.14348 19 10V14C19 14.9193 18.8189 15.8295 18.4672 16.6788C18.1154 17.5281 17.5998 18.2997 16.9497 18.9497C16.2997 19.5998 15.5281 20.1154 14.6788 20.4672C13.8295 20.8189 12.9193 21 12 21C11.0807 21 10.1705 20.8189 9.32122 20.4672C8.47194 20.1154 7.70026 19.5998 7.05025 18.9497C6.40024 18.2997 5.88463 17.5281 5.53284 16.6788C5.18106 15.8295 5 14.9193 5 14V10',
   key: '1'
 }], ['path', {
-  d: 'M12 3v8h6.5M22 9.333C22 6.36 20.509 3.71 18.186 2M6.5 2h1.25C8.44 2 9 2.56 9 3.25v0c0 .69-.56 1.25-1.25 1.25v0c-.69 0-1.25.56-1.25 1.25V7H9M1 4l3 3M4 4L1 7',
+  d: 'M12 3V11H18.5M22 9.333C22 6.36 20.509 3.71 18.186 2M6.5 2H7.75C8.44 2 9 2.56 9 3.25C9 3.94 8.44 4.5 7.75 4.5C7.06 4.5 6.5 5.06 6.5 5.75V7H9M1 4L4 7M4 4L1 7',
   key: '2'
 }]]);
 RightDoubleClickIcon.displayName = 'RightDoubleClickIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.15.4",
+  "version": "2.16.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -59,6 +59,7 @@
     "@mdx-js/mdx": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@radix-ui/react-slot": "^1.2.4",
+    "@shikijs/core": "^3.15.0",
     "@shikijs/transformers": "^3.15.0",
     "@splinetool/runtime": "0.9.526",
     "ahooks": "^3.9.6",
@@ -102,6 +103,7 @@
     "remark-github": "^12.0.0",
     "remark-math": "^6.0.0",
     "shiki": "^3.15.0",
+    "shiki-stream": "^0.1.3",
     "swr": "^2.3.6",
     "ts-md5": "^2.0.1",
     "unified": "^11.0.5",

package/es/Highlighter/SyntaxHighlighter/Line.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const Line: import("react").NamedExoticComponent<{
-    children?: string | undefined;
-}>;
-export default Line;