@lobehub/ui 1.114.2 → 1.115.1

package/es/EmojiPicker/index.js

@@ -1,12 +1,12 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import data from '@emoji-mart/data';
-import defaultI18n from '@emoji-mart/data/i18n/en.json';
 import Picker from '@emoji-mart/react';
 import { Avatar } from "./..";
 import { Popover } from 'antd';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
+import useSWR from 'swr';
 import useMergeState from 'use-merge-value';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,44 +21,29 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
     locale = _ref$locale === void 0 ? 'en-US' : _ref$locale;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  var _useState = useState(defaultI18n),
-    _useState2 = _slicedToArray(_useState, 2),
-    i18n = _useState2[0],
-    setI18n = _useState2[1];
-  var _useMergeState = useMergeState('🤖', {
-      defaultValue: defaultAvatar,
-      onChange: onChange,
-      value: value
-    }),
-    _useMergeState2 = _slicedToArray(_useMergeState, 2),
-    ava = _useMergeState2[0],
-    setAva = _useMergeState2[1];
-  var getI18n = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(localeName) {
-      var i18n;
+  var _useSWR = useSWR(locale, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return import("@emoji-mart/data/i18n/".concat(localeName, ".json"));
+            return import("@emoji-mart/data/i18n/".concat(locale.split('-')[0], ".json"));
           case 2:
-            i18n = _context.sent;
-            setI18n(i18n);
-          case 4:
+            return _context.abrupt("return", _context.sent);
+          case 3:
           case "end":
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function getI18n(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  useEffect(function () {
-    if (locale === 'en-US') return;
-    var localeName = locale.split('-')[0];
-    getI18n(localeName);
-  }, [locale]);
+    }))),
+    i18n = _useSWR.data;
+  var _useMergeState = useMergeState('🤖', {
+      defaultValue: defaultAvatar,
+      onChange: onChange,
+      value: value
+    }),
+    _useMergeState2 = _slicedToArray(_useMergeState, 2),
+    ava = _useMergeState2[0],
+    setAva = _useMergeState2[1];
   return /*#__PURE__*/_jsx(Popover, {
     content: /*#__PURE__*/_jsx("div", {
       className: styles.picker,

package/es/LogoThree/Loading.js

@@ -1,20 +1,24 @@
-import { Html } from '@react-three/drei';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import Icon from "../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Loading = /*#__PURE__*/memo(function (_ref) {
-  var size = _ref.size;
-  return /*#__PURE__*/_jsx(Html, {
-    children: /*#__PURE__*/_jsx(Center, {
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: Loader2,
-        size: {
-          fontSize: size
-        },
-        spin: true
-      })
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size;
+  return /*#__PURE__*/_jsx(Center, {
+    height: '100%',
+    justify: 'center',
+    style: {
+      position: 'absolute'
+    },
+    width: '100%',
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: Loader2,
+      size: {
+        fontSize: size
+      },
+      spin: true
     })
   });
 });

package/es/LogoThree/LogoSpline.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export interface LogoSplineProps {
+    className?: string;
+    height?: number | string;
+    style?: CSSProperties;
+    width?: number | string;
+}
+declare const LogoSpline: import("react").NamedExoticComponent<LogoSplineProps>;
+export default LogoSpline;

package/es/LogoThree/LogoSpline.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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; }
+import { useThemeMode } from 'antd-style';
+import { Suspense, lazy, memo, useState } from 'react';
+import Loading from "./Loading";
+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 Spline = /*#__PURE__*/lazy(function () {
+  return import('@splinetool/react-spline');
+});
+var LIGHT = 'https://gw.alipayobjects.com/os/kitchen/J9jiHITGrs/scene.splinecode';
+var DARK = 'https://gw.alipayobjects.com/os/kitchen/CzQKKvSE8a/scene.splinecode';
+var LogoSpline = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    width = _ref.width,
+    height = _ref.height;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    style: _objectSpread({
+      height: height,
+      position: 'relative',
+      width: width
+    }, style),
+    children: /*#__PURE__*/_jsx(Suspense, {
+      fallback: /*#__PURE__*/_jsx(Loading, {}),
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx(Spline, {
+          onLoad: function onLoad() {
+            return setLoading(false);
+          },
+          scene: isDarkMode ? DARK : LIGHT
+        })]
+      })
+    })
+  });
+});
+export default LogoSpline;

package/es/LogoThree/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 export interface LogoThreeProps {
     className?: string;
-    size?: number;
+    size?: number | string;
     style?: CSSProperties;
 }
 declare const LogoThree: import("react").NamedExoticComponent<LogoThreeProps>;

package/es/LogoThree/index.js

@@ -1,42 +1,39 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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; }
-import { Canvas } from '@react-three/fiber';
-import { Suspense, memo } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import LobeHubLogo from "../Logo";
+import { Suspense, lazy, memo, useState } from 'react';
 import Loading from "./Loading";
-import Logo from "./Logo";
 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 Spline = /*#__PURE__*/lazy(function () {
+  return import('@splinetool/react-spline');
+});
 var LogoThree = /*#__PURE__*/memo(function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 320 : _ref$size,
+  var className = _ref.className,
     style = _ref.style,
-    className = _ref.className;
-  return /*#__PURE__*/_jsx(ErrorBoundary, {
-    fallback: /*#__PURE__*/_jsx(LobeHubLogo, {
-      size: size,
-      type: "3d"
-    }),
-    children: /*#__PURE__*/_jsx(Canvas, {
-      camera: {
-        fov: 16,
-        position: [10, 1, 0]
-      },
-      className: className,
-      style: size ? _objectSpread({
-        height: size,
-        maxHeight: size,
-        maxWidth: size,
-        width: size
-      }, style) : style,
-      children: /*#__PURE__*/_jsx(Suspense, {
-        fallback: /*#__PURE__*/_jsx(Loading, {
-          size: size / 2 > 48 ? 48 : size / 2
-        }),
-        children: /*#__PURE__*/_jsx(Logo, {
-          rotation: [0, 1.5, 0]
-        })
+    size = _ref.size;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    style: _objectSpread({
+      height: size,
+      position: 'relative',
+      width: size
+    }, style),
+    children: /*#__PURE__*/_jsx(Suspense, {
+      fallback: /*#__PURE__*/_jsx(Loading, {}),
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx(Spline, {
+          onLoad: function onLoad() {
+            return setLoading(false);
+          },
+          scene: 'https://gw.alipayobjects.com/os/kitchen/8LH7slSv3s/logo.splinecode'
+        })]
       })
     })
   });

package/es/index.d.ts

@@ -50,6 +50,7 @@ export { default as Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader,
 export { default as List, type ListItemProps } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as LogoThree, type LogoThreeProps } from './LogoThree';
+export { default as LogoSpline, type LogoSplineProps } from './LogoThree/LogoSpline';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';

package/es/index.js

@@ -49,6 +49,7 @@ export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSideba
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as LogoThree } from "./LogoThree";
+export { default as LogoSpline } from "./LogoThree/LogoSpline";
 export { default as Markdown } from "./Markdown";
 export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.114.2",
+  "version": "1.115.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -79,10 +79,8 @@
     "@giscus/react": "^2",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/emojilib": "latest",
-    "@react-spring/three": "^9",
     "@react-spring/web": "^9",
-    "@react-three/drei": "^9",
-    "@react-three/fiber": "^8",
+    "@splinetool/react-spline": "^2.2.6",
     "ahooks": "^3",
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
@@ -109,7 +107,6 @@
     "remark-math": "^5",
     "shikiji": "^0",
     "swr": "^2",
-    "three": "^0.157",
     "ts-md5": "^1",
     "url-join": "^5",
     "use-merge-value": "^1",
@@ -127,7 +124,6 @@
     "@types/query-string": "^6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/three": "^0.157",
     "@types/uuid": "^9",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",

package/es/LogoThree/Logo.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface LogoProps {
-    rotation?: [number, number, number];
-}
-declare const Logo: import("react").NamedExoticComponent<LogoProps>;
-export default Logo;

package/es/LogoThree/Logo.js

@@ -1,66 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
-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; }
-import { a, config, useSpring } from '@react-spring/three';
-import { useGLTF } from '@react-three/drei';
-import { useFrame } from '@react-three/fiber';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var NUM = 10;
-var Logo = /*#__PURE__*/memo(function (_ref) {
-  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  var ref = useRef(null);
-  var _useGLTF = useGLTF('https://gw.alipayobjects.com/os/kitchen/ygwdCZyaMZ/lobehub.gltf'),
-    scene = _useGLTF.scene;
-  // Hover state
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hovered = _useState2[0],
-    setHover = _useState2[1];
-  useEffect(function () {
-    return void (document.body.style.cursor = hovered ? 'pointer' : 'auto');
-  }, [hovered]);
-  // Events
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toggle = _useState4[0],
-    set = _useState4[1];
-  var _useSpring = useSpring({
-      config: config.wobbly,
-      x: toggle
-    }, [toggle]),
-    _useSpring2 = _slicedToArray(_useSpring, 1),
-    x = _useSpring2[0].x;
-  var onPointerOver = useCallback(function () {
-    return setHover(true);
-  }, []);
-  var onPointerOut = useCallback(function () {
-    return setHover(false);
-  }, []);
-  var onClick = useCallback(function () {
-    return set(function (toggle) {
-      return Number(!toggle);
-    });
-  }, [set]);
-  var rotation = x.to([0, 1], [0, Math.PI * 2]);
-  useFrame(function (state) {
-    var t = state.clock.getElapsedTime();
-    ref.current.rotation.set(Math.cos(t / 4) / NUM, Math.sin(t / 3) / NUM / 2, 0.15 + Math.sin(t / 2) / NUM);
-    ref.current.position.y = -0.2 + (0.8 + Math.cos(t / 2)) / 7;
-  });
-  return /*#__PURE__*/_jsx("group", {
-    ref: ref,
-    children: /*#__PURE__*/_jsx(a.group, {
-      onClick: onClick,
-      onPointerOut: onPointerOut,
-      onPointerOver: onPointerOver,
-      "rotation-y": rotation,
-      children: /*#__PURE__*/_jsx("primitive", _objectSpread({
-        object: scene
-      }, props))
-    })
-  });
-});
-export default Logo;