@lobehub/ui 1.112.0 → 1.114.0

package/es/Avatar/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background", "onClick", "style"];
+var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background", "style"];
 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 { Avatar as AntAvatar } from 'antd';
@@ -20,7 +20,6 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'rgba(0,0,0,0)' : _ref$background,
-    onClick = _ref.onClick,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
@@ -38,18 +37,18 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var text = String(isImage ? title : avatar);
-  var avatarProps = {
+  var avatarProps = _objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,
     size: size,
-    style: onClick ? style : _objectSpread({
+    style: props !== null && props !== void 0 && props.onClick ? style : _objectSpread({
       cursor: 'default'
     }, style)
-  };
-  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
+  }, props);
+  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     src: isBase64 ? avatar : undefined,
     srcSet: isBase64 ? undefined : avatar
-  }, avatarProps), props)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread(_objectSpread({}, avatarProps), props), {}, {
+  }, avatarProps)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
     children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: size * 0.8,

package/es/ChatList/Item.d.ts

@@ -5,7 +5,8 @@ import { ChatMessage } from "../types/chatMessage";
 import { LLMRoleType } from "../types/llm";
 import { type ActionsBarProps } from './ActionsBar';
 export type OnMessageChange = (id: string, content: string) => void;
-export type OnActionClick = (action: ActionEvent, message: ChatMessage) => void;
+export type OnActionsClick = (action: ActionEvent, message: ChatMessage) => void;
+export type OnAvatatsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
 export type RenderRole = LLMRoleType | 'default' | string;
 export type RenderItem = FC<{
     key: string;
@@ -22,7 +23,8 @@ export interface ListItemProps {
     /**
      * @description 点击操作按钮的回调函数
      */
-    onActionsClick?: OnActionClick;
+    onActionsClick?: OnActionsClick;
+    onAvatarsClick?: OnAvatatsClick;
     /**
      * @description 消息变化的回调函数
      */

package/es/ChatList/Item.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["renderMessagesExtra", "showTitle", "onActionsClick", "onMessageChange", "type", "text", "renderMessages", "renderErrorMessages", "renderActions", "loading", "groupNav", "renderItems"];
+var _excluded = ["renderMessagesExtra", "showTitle", "onActionsClick", "onAvatarsClick", "onMessageChange", "type", "text", "renderMessages", "renderErrorMessages", "renderActions", "loading", "groupNav", "renderItems"];
 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 { App } from 'antd';
@@ -15,6 +15,7 @@ var Item = /*#__PURE__*/memo(function (props) {
   var renderMessagesExtra = props.renderMessagesExtra,
     showTitle = props.showTitle,
     onActionsClick = props.onActionsClick,
+    onAvatarsClick = props.onAvatarsClick,
     onMessageChange = props.onMessageChange,
     type = props.type,
     text = props.text,
@@ -123,6 +124,7 @@ var Item = /*#__PURE__*/memo(function (props) {
     messageExtra: /*#__PURE__*/_jsx(MessageExtra, {
       data: item
     }),
+    onAvatarClick: onAvatarsClick === null || onAvatarsClick === void 0 ? void 0 : onAvatarsClick(item.role),
     onChange: function onChange(value) {
       return onMessageChange === null || onMessageChange === void 0 ? void 0 : onMessageChange(item.id, value);
     },

package/es/ChatList/index.d.ts

@@ -10,6 +10,6 @@ export interface ChatListProps extends DivProps, ListItemProps {
     historyCount?: number;
     loadingId?: string;
 }
-export type { OnActionClick, OnMessageChange, RenderAction, RenderErrorMessage, RenderItem, RenderMessage, RenderMessageExtra, } from './Item';
+export type { OnActionsClick, OnAvatatsClick, OnMessageChange, RenderAction, RenderErrorMessage, RenderItem, RenderMessage, RenderMessageExtra, } from './Item';
 declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;
 export default ChatList;

package/es/EmojiPicker/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface EmojiPickerProps {
+    backgroundColor?: string;
+    defaultAvatar?: string;
+    locale?: string;
+    onChange?: (emoji: string) => void;
+    value?: string;
+}
+declare const EmojiPicker: import("react").NamedExoticComponent<EmojiPickerProps>;
+export default EmojiPicker;

package/es/EmojiPicker/index.js

@@ -0,0 +1,92 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 useMergeState from 'use-merge-value';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    _ref$defaultAvatar = _ref.defaultAvatar,
+    defaultAvatar = _ref$defaultAvatar === void 0 ? '🤖' : _ref$defaultAvatar,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'rgba(0,0,0,0)' : _ref$backgroundColor,
+    onChange = _ref.onChange,
+    _ref$locale = _ref.locale,
+    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;
+      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"));
+          case 2:
+            i18n = _context.sent;
+            setI18n(i18n);
+          case 4:
+          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]);
+  return /*#__PURE__*/_jsx(Popover, {
+    content: /*#__PURE__*/_jsx("div", {
+      className: styles.picker,
+      children: /*#__PURE__*/_jsx(Picker, {
+        data: data,
+        i18n: i18n,
+        locale: locale.split('-')[0],
+        onEmojiSelect: function onEmojiSelect(e) {
+          return setAva(e.native);
+        },
+        skinTonePosition: 'none',
+        theme: 'auto'
+      })
+    }),
+    placement: 'left',
+    rootClassName: styles.popover,
+    trigger: 'click',
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.avatar,
+      style: {
+        width: 'fit-content'
+      },
+      children: /*#__PURE__*/_jsx(Avatar, {
+        avatar: ava,
+        background: backgroundColor,
+        size: 44
+      })
+    })
+  });
+});
+export default EmojiPicker;

package/es/EmojiPicker/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    avatar: import("antd-style").SerializedStyles;
+    picker: import("antd-style").SerializedStyles;
+    popover: import("antd-style").SerializedStyles;
+}>;

package/es/EmojiPicker/style.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import chroma from 'chroma-js';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    transition:\n      scale 400ms ", ",\n      box-shadow 100ms ", ";\n\n    &:hover {\n      box-shadow: 0 0 0 3px ", ";\n    }\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut, token.motionEaseOut, token.colorText),
+    picker: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    em-emoji-picker {\n      --rgb-accent: ", ";\n      --shadow: none;\n    }\n  "])), chroma(token.colorPrimary).rgb().join(',')),
+    popover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", "-popover-inner {\n      padding: 0;\n    }\n  "])), prefixCls)
+  };
+});

package/es/index.d.ts

@@ -7,7 +7,7 @@ export { default as ChatHeader, type ChatHeaderProps } from './ChatHeader';
 export { default as ChatHeaderTitle, type ChatHeaderTitleProps, } from './ChatHeader/ChatHeaderTitle';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
-export type { ChatListProps, OnActionClick, OnMessageChange, RenderAction, RenderErrorMessage, RenderItem, RenderMessage, RenderMessageExtra, } from './ChatList';
+export type { ChatListProps, OnActionsClick, OnAvatatsClick, OnMessageChange, RenderAction, RenderErrorMessage, RenderItem, RenderMessage, RenderMessageExtra, } from './ChatList';
 export { default as ChatList } from './ChatList';
 export { default as ActionsBar, type ActionsBarProps } from './ChatList/ActionsBar';
 export { default as CodeEditor, type CodeEditorProps } from './CodeEditor';
@@ -23,6 +23,7 @@ export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
+export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
 export { default as EmptyCard, type EmptyCardProps } from './EmptyCard';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';

package/es/index.js

@@ -22,6 +22,7 @@ export { default as DraggablePanelHeader } from "./DraggablePanel/components/Dra
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
+export { default as EmojiPicker } from "./EmojiPicker";
 export { default as EmptyCard } from "./EmptyCard";
 export { default as Features } from "./Features";
 export { default as FluentEmoji } from "./FluentEmoji";

package/es/useTTS/hooks/{usePressSpeechRecognition.d.ts → usePersistedSpeechRecognition.d.ts}

@@ -1,4 +1,4 @@
-export declare const usePressSpeechRecognition: (locale: string) => {
+export declare const usePersistedSpeechRecognition: (locale: string) => {
     isLoading: boolean;
     start: () => void;
     stop: () => void;

package/es/useTTS/hooks/{usePressSpeechRecognition.js → usePersistedSpeechRecognition.js}

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect, useState } from 'react';
 import { useSpeechRecognition } from "./useSpeechRecognition";
-export var usePressSpeechRecognition = function usePressSpeechRecognition(locale) {
+export var usePersistedSpeechRecognition = function usePersistedSpeechRecognition(locale) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     texts = _useState2[0],
@@ -17,12 +17,11 @@ export var usePressSpeechRecognition = function usePressSpeechRecognition(locale
     _start = _useSpeechRecognition.start,
     isLoading = _useSpeechRecognition.isLoading;
   useEffect(function () {
-    if (!isLoading && text && texts.at(-1) !== text) {
-      setTexts([].concat(_toConsumableArray(texts), [text]));
-      _stop();
+    if (isGLobalLoading && !isLoading) {
+      if (text) setTexts([].concat(_toConsumableArray(texts), [text]));
       _start();
     }
-  }, [isLoading, texts, text]);
+  }, [isLoading, texts, text, _start, isGLobalLoading]);
   return {
     isLoading: isGLobalLoading,
     start: function start() {

package/es/useTTS/hooks/useSpeechRecognition.d.ts

@@ -1,6 +1,6 @@
 export declare const useSpeechRecognition: (locale: string) => {
     isLoading: boolean;
-    start: () => any;
+    start: () => void;
     stop: () => void;
     text: string;
 };

package/es/useTTS/hooks/useSpeechRecognition.js

@@ -1,49 +1,70 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _window;
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 var SpeechRecognition = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.SpeechRecognition) || ((_window = window) === null || _window === void 0 ? void 0 : _window.webkitSpeechRecognition);
 export var useSpeechRecognition = function useSpeechRecognition(locale) {
-  var _useState = useState(''),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var _useState3 = useState(false),
+    recognition = _useState2[0],
+    setRecognition = _useState2[1];
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    setIsLoading = _useState4[1];
+    text = _useState4[0],
+    setText = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    finalStop = _useState6[0],
-    setFinalStop = _useState6[1];
-  var recognition = new SpeechRecognition();
-  recognition.lang = locale;
-  recognition.interimResults = true;
-  recognition.continuous = true;
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    finalStop = _useState8[0],
+    setFinalStop = _useState8[1];
+  useEffect(function () {
+    if (recognition) return;
+    try {
+      var speechRecognition = new SpeechRecognition();
+      speechRecognition.interimResults = true;
+      speechRecognition.continuous = true;
+      speechRecognition.onstart = function () {
+        setFinalStop(false);
+        setIsLoading(true);
+      };
+      speechRecognition.onend = function () {
+        setIsLoading(false);
+        setFinalStop(true);
+      };
+      speechRecognition.onresult = function (_ref) {
+        var _result$;
+        var results = _ref.results;
+        if (!results) return;
+        var result = results[0];
+        if (!finalStop && result !== null && result !== void 0 && (_result$ = result[0]) !== null && _result$ !== void 0 && _result$.transcript) setText(result[0].transcript);
+        if (result.isFinal) {
+          speechRecognition.abort();
+          setIsLoading(false);
+        }
+      };
+      setRecognition(speechRecognition);
+    } catch (error) {
+      console.error(error);
+    }
+  }, []);
+  useEffect(function () {
+    if (recognition) recognition.lang = locale;
+  }, [locale, recognition]);
   var handleStop = function handleStop() {
-    recognition.abort();
+    try {
+      recognition.abort();
+    } catch (_unused) {}
     setIsLoading(false);
   };
-  recognition.onstart = function () {
-    setFinalStop(false);
-    setIsLoading(true);
-    setText('');
-  };
-  recognition.onend = function () {
-    setIsLoading(false);
-    setFinalStop(true);
-  };
-  recognition.onresult = function (_ref) {
-    var _result$;
-    var results = _ref.results;
-    if (!results) return;
-    var result = results[0];
-    if (!finalStop && result !== null && result !== void 0 && (_result$ = result[0]) !== null && _result$ !== void 0 && _result$.transcript) setText(result[0].transcript);
-    if (result.isFinal) handleStop();
-  };
   return {
     isLoading: isLoading,
     start: function start() {
-      return recognition.start();
+      try {
+        setText('');
+        recognition.start();
+      } catch (_unused2) {}
     },
     stop: function stop() {
       return handleStop();

package/es/useTTS/index.d.ts

@@ -1,7 +1,7 @@
 export { useAzureSpeech } from './hooks/useAzureSpeech';
 export { useEdgeSpeech } from './hooks/useEdgeSpeech';
 export { useMicrosoftSpeech } from './hooks/useMicrosoftSpeech';
-export { usePressSpeechRecognition } from './hooks/usePressSpeechRecognition';
+export { usePersistedSpeechRecognition } from './hooks/usePersistedSpeechRecognition';
 export { useSpeechRecognition } from './hooks/useSpeechRecognition';
 export { useSpeechSynthes } from './hooks/useSpeechSynthes';
 export { getAzureVoiceList, getEdgeVoiceList, getSpeechSynthesVoiceList, } from './utils/getVoiceList';

package/es/useTTS/index.js

@@ -1,7 +1,7 @@
 export { useAzureSpeech } from "./hooks/useAzureSpeech";
 export { useEdgeSpeech } from "./hooks/useEdgeSpeech";
 export { useMicrosoftSpeech } from "./hooks/useMicrosoftSpeech";
-export { usePressSpeechRecognition } from "./hooks/usePressSpeechRecognition";
+export { usePersistedSpeechRecognition } from "./hooks/usePersistedSpeechRecognition";
 export { useSpeechRecognition } from "./hooks/useSpeechRecognition";
 export { useSpeechSynthes } from "./hooks/useSpeechSynthes";
 export { getAzureVoiceList, getEdgeVoiceList, getSpeechSynthesVoiceList } from "./utils/getVoiceList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.112.0",
+  "version": "1.114.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -73,6 +73,8 @@
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
+    "@emoji-mart/data": "^1",
+    "@emoji-mart/react": "^1",
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
     "@lobehub/chat-plugin-sdk": "latest",