@yuntijs/ui 1.0.0-beta.66 → 1.0.0-beta.68

package/es/LogViewer/index.js

@@ -35,10 +35,16 @@ export var LogViewer = function LogViewer(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    followAfterLoaded = _useState6[0],
+    setFollowAfterLoaded = _useState6[1];
   var setLoadingTimeout = useRef();
+  var setFollowAfterLoadedTimeout = useRef();
   useEffect(function () {
     return function () {
       clearTimeout(setLoadingTimeout.current);
+      clearTimeout(setFollowAfterLoadedTimeout.current);
     };
   }, []);
   useEffect(function () {
@@ -55,6 +61,9 @@ export var LogViewer = function LogViewer(_ref) {
     };
   }, [refreshInterval, urlFromProps, websocket]);
   var url = useMemo(function () {
+    if (!urlFromProps) {
+      return urlFromProps;
+    }
     // workaround for onLoad exec twice
     setLoadingTimeout.current = setTimeout(function () {
       setLoading(true);
@@ -63,11 +72,22 @@ export var LogViewer = function LogViewer(_ref) {
     return "".concat(urlFromProps, "#").concat(urlHash);
   }, [urlFromProps, urlHash]);
   var handleOnLoad = useCallback(function () {
+    // if has log line clear setLoading timeout
+    if (document.querySelector('.react-lazylog .log-line')) {
+      clearTimeout(setLoadingTimeout.current);
+    }
     setLoading(false);
+
+    // scroll to bottom
+    setFollowAfterLoaded(true);
+    setFollowAfterLoadedTimeout.current = setTimeout(function () {
+      return setFollowAfterLoaded(false);
+    }, 100);
     onLoad === null || onLoad === void 0 || onLoad();
   }, [onLoad]);
   var handleOnError = useCallback(function (error) {
     setLoading(false);
+    clearTimeout(setLoadingTimeout.current);
     onError === null || onError === void 0 || onError(error);
   }, [onError]);
   return /*#__PURE__*/_jsxs("div", {
@@ -84,7 +104,7 @@ export var LogViewer = function LogViewer(_ref) {
           url: url,
           websocket: websocket
         }, props), {}, {
-          follow: follow,
+          follow: followAfterLoaded || follow,
           height: height,
           iconFilterLines: /*#__PURE__*/_jsx(Icon, {
             className: styles.searchBarIcon,

package/es/index.d.ts

@@ -31,6 +31,7 @@ export * from './ChatItem';
 export * from './EditableMessage';
 export * from './Highlighter';
 export * from './styles';
+export * from './useSpeechSynthes';
 export { Affix, type AffixProps, Anchor, type AnchorProps, type MentionProps as AntdMentionProps, Mentions as AntdMentions, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, // @todo composed type
 type BadgeProps, Button, // @todo dependence unifiedLink. link type, hover primary color, back button
 type ButtonProps, Calendar, type CalendarProps, Carousel, type CarouselProps, Cascader, type CascaderProps, Checkbox, type CheckboxProps, Col, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColProps, // @todo center style

package/es/index.js

@@ -36,6 +36,9 @@ export * from "./EditableMessage";
 export * from "./Highlighter";
 export * from "./styles";
 
+// ~ custom @lobehub/tts
+export * from "./useSpeechSynthes";
+
 // ~ antd
 export { Affix, Anchor, Mentions as AntdMentions, AutoComplete, Avatar, BackTop, Badge // @todo composed type
 , Button // @todo dependence unifiedLink. link type, hover primary color, back button

package/es/useSpeechSynthes/const/polyfill.d.ts

@@ -0,0 +1,3 @@
+export declare const SpeechRecognition: any;
+export declare const SpeechSynthesis: any;
+export declare const SpeechSynthesisUtterance: any;

package/es/useSpeechSynthes/const/polyfill.js

@@ -0,0 +1,21 @@
+var getSpeechRecognition = function getSpeechRecognition() {
+  try {
+    var _window, _window2;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.SpeechRecognition) || ((_window = window) === null || _window === void 0 ? void 0 : _window.SpeechRecognition) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.webkitSpeechRecognition);
+  } catch (_unused) {}
+};
+var getSpeechSynthesis = function getSpeechSynthesis() {
+  try {
+    var _window3, _window4;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.speechSynthesis) || ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.speechSynthesis) || ((_window4 = window) === null || _window4 === void 0 ? void 0 : _window4.webkitSpeechSynthesis);
+  } catch (_unused2) {}
+};
+var getSpeechSynthesisUtterance = function getSpeechSynthesisUtterance() {
+  try {
+    var _window5, _window6;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.SpeechSynthesisUtterance) || ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.SpeechSynthesisUtterance) || ((_window6 = window) === null || _window6 === void 0 ? void 0 : _window6.webkitSpeechSynthesisUtterance);
+  } catch (_unused3) {}
+};
+export var SpeechRecognition = getSpeechRecognition();
+export var SpeechSynthesis = getSpeechSynthesis();
+export var SpeechSynthesisUtterance = getSpeechSynthesisUtterance();

package/es/useSpeechSynthes/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type SsmlOptions } from '@lobehub/tts/core/utils/genSSML';
+export interface SpeechSynthesOptions extends Pick<SsmlOptions, 'voice' | 'rate' | 'pitch'> {
+    onStart?: () => void;
+    onStop?: () => void;
+}
+export declare const useSpeechSynthes: (defaultText: string, { voice, rate, pitch, ...options }: SpeechSynthesOptions) => {
+    isLoading: boolean;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    start: () => void;
+    stop: () => void;
+};
+export default useSpeechSynthes;

package/es/useSpeechSynthes/index.js

@@ -0,0 +1,69 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["voice", "rate", "pitch"];
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SpeechSynthesis, SpeechSynthesisUtterance } from "./const/polyfill";
+export var useSpeechSynthes = function useSpeechSynthes(defaultText, _ref) {
+  var voice = _ref.voice,
+    rate = _ref.rate,
+    pitch = _ref.pitch,
+    options = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(SpeechSynthesis === null || SpeechSynthesis === void 0 ? void 0 : SpeechSynthesis.getVoices()),
+    _useState2 = _slicedToArray(_useState, 2),
+    voiceList = _useState2[0],
+    setVoiceList = _useState2[1];
+  var _useState3 = useState(defaultText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    text = _useState4[0],
+    setText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var speechSynthesisUtterance = useMemo(function () {
+    if (!SpeechSynthesisUtterance) return;
+    var utterance = new SpeechSynthesisUtterance(text);
+    utterance.voice = voiceList.find(function (item) {
+      return item.name === voice;
+    });
+    utterance.onstart = function () {
+      return setIsLoading(true);
+    };
+    utterance.onend = function () {
+      return setIsLoading(false);
+    };
+    if (pitch) utterance.pitch = pitch * 10;
+    if (rate) utterance.rate = rate * 10;
+    return utterance;
+  }, [text, voiceList, rate, pitch, voice]);
+  useEffect(function () {
+    if (!SpeechSynthesis) return;
+    SpeechSynthesis.onvoiceschanged = function () {
+      setVoiceList(SpeechSynthesis === null || SpeechSynthesis === void 0 ? void 0 : SpeechSynthesis.getVoices());
+    };
+    SpeechSynthesis.onstart = function () {
+      return setIsLoading(true);
+    };
+    SpeechSynthesis.onend = function () {
+      return setIsLoading(false);
+    };
+  }, []);
+  var handleStart = useCallback(function () {
+    var _options$onStart;
+    options === null || options === void 0 || (_options$onStart = options.onStart) === null || _options$onStart === void 0 || _options$onStart.call(options);
+    SpeechSynthesis === null || SpeechSynthesis === void 0 || SpeechSynthesis.speak(speechSynthesisUtterance);
+  }, [options, speechSynthesisUtterance]);
+  var handleStop = useCallback(function () {
+    var _options$onStop, _speechSynthesis;
+    options === null || options === void 0 || (_options$onStop = options.onStop) === null || _options$onStop === void 0 || _options$onStop.call(options);
+    (_speechSynthesis = speechSynthesis) === null || _speechSynthesis === void 0 || _speechSynthesis.cancel();
+    setIsLoading(false);
+  }, [options]);
+  return {
+    isLoading: isLoading,
+    setText: setText,
+    start: handleStart,
+    stop: handleStop
+  };
+};
+export default useSpeechSynthes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.66",
+  "version": "1.0.0-beta.68",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -86,6 +86,7 @@
     "@lexical/selection": "^0.16.1",
     "@lexical/text": "^0.16.1",
     "@lexical/utils": "^0.16.1",
+    "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.147.0",
     "@melloware/react-logviewer": "^5.2.0",
     "@monaco-editor/loader": "^1.4.0",
@@ -117,8 +118,8 @@
     "babel-plugin-antd-style": "latest",
     "commitlint": "^18",
     "dayjs": "^1.11.10",
-    "dumi": "^2.4.7",
-    "dumi-theme-yunti": "^1.1.8",
+    "dumi": "^2.4.9",
+    "dumi-theme-yunti": "^1.7.1",
     "eslint": "^8.56.0",
     "father": "^4.3.8",
     "husky": "^8",