@yuntijs/ui 1.0.0-beta.67 → 1.0.0-beta.69

package/es/index.d.ts

@@ -31,9 +31,11 @@ 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
 type CountdownProps, DatePicker, type DatePickerProps, Empty, type EmptyProps, Flex, type FlexProps, FloatButton, type GlobalToken, Grid, Image, type ImageProps, Input, InputNumber, type InputNumberProps, type InputProps, type InputRef, Layout, type LayoutProps, List, type ListProps, type MappingAlgorithm, Menu, type MenuItemProps, type MenuProps, type MenuRef, type MenuTheme, message, type MessageArgsProps, Pagination, type PaginationProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, type QRPropsCanvas, type QRPropsSvg, Rate, type RateProps, type RefSelectProps, Result, type ResultProps, Row, type RowProps, Segmented, type SegmentedProps, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderSingleProps, Space, type SpaceProps, Spin, type SpinProps, Statistic, type StatisticProps, type StepProps, Steps, type StepsProps, type SubMenuProps, Switch, type SwitchProps, type TabPaneProps, Tabs, type TabsProps, Tag, type TagProps, type TagType, theme, Timeline, type TimelineItemProps, type TimelineProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, Tooltip, type TooltipProps, Tour, type TourProps, type TourStepProps, Transfer, type TransferProps, Tree, type TreeDataNode, type TreeNodeProps, type TreeProps, TreeSelect, type TreeSelectProps, Upload, type UploadFile, type UploadProps, version, Watermark, type WatermarkProps, } from 'antd';
 export { Markdown, type MarkdownProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from '@lobehub/ui';
+export { SpeechSynthesisTTS } from '@lobehub/tts';
 export { useResponsive, useTheme, useThemeMode } from 'antd-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
@@ -47,5 +50,8 @@ export { Affix, Anchor, Mentions as AntdMentions, AutoComplete, Avatar, BackTop,
 // ~ @lobehub/ui
 export { Markdown, SyntaxHighlighter } from '@lobehub/ui';
 
+// @lobehub/tts
+export { SpeechSynthesisTTS } from '@lobehub/tts';
+
 // ~ antd-style
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';

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.67",
+  "version": "1.0.0-beta.69",
   "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",