From 6bb5a813042dd7537067fe6e871b3e2ad781dc2b Mon Sep 17 00:00:00 2001
From: Petaflops <wangzw@outlook.com>
Date: Thu, 18 May 2023 09:15:08 +0800
Subject: [PATCH] feat: added a ReadButton to convert the text output from GPT
 into voice and read it out loud

---
 src/components/ConversationItem/index.jsx |  4 ++
 src/components/ReadButton/index.jsx       | 58 +++++++++++++++++++++++
 src/components/index.mjs                  |  1 +
 3 files changed, 63 insertions(+)
 create mode 100644 src/components/ReadButton/index.jsx

diff --git a/src/components/ConversationItem/index.jsx b/src/components/ConversationItem/index.jsx
index cd492e4..1d1cff2 100644
--- a/src/components/ConversationItem/index.jsx
+++ b/src/components/ConversationItem/index.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { ChevronDownIcon, XCircleIcon, SyncIcon } from '@primer/octicons-react'
 import CopyButton from '../CopyButton'
+import ReadButton from '../ReadButton'
 import PropTypes from 'prop-types'
 import MarkdownRender from '../MarkdownRender/markdown.jsx'
 import { useTranslation } from 'react-i18next'
@@ -73,6 +74,9 @@ export function ConversationItem({ type, content, session, done, port, onRetry }
               {session && (
                 <CopyButton contentFn={() => content.replace(/\n<hr\/>$/, '')} size={14} />
               )}
+              {session && (
+                <ReadButton contentFn={() => content.replace(/\n<hr\/>$/, '')} size={14} />
+              )}
               {!collapsed ? (
                 <span
                   title={t('Collapse')}
diff --git a/src/components/ReadButton/index.jsx b/src/components/ReadButton/index.jsx
new file mode 100644
index 0000000..39990fa
--- /dev/null
+++ b/src/components/ReadButton/index.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { UnmuteIcon, MuteIcon } from '@primer/octicons-react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+ReadButton.propTypes = {
+  contentFn: PropTypes.func.isRequired,
+  size: PropTypes.number.isRequired,
+  className: PropTypes.string,
+}
+
+function ReadButton({ className, contentFn, size }) {
+  const { t } = useTranslation()
+  const [speaking, setSpeaking] = useState(false)
+
+  const startSpeak = () => {
+    speechSynthesis.cancel()
+
+    let text = contentFn()
+
+    const utterance = new SpeechSynthesisUtterance(text)
+    Object.assign(utterance, {
+      // lang: 'zh-CN',
+      rate: 0.9,
+      volume: 1,
+      onend: () => setSpeaking(false),
+      onerror: () => setSpeaking(false),
+    })
+
+    let supportedVoices = speechSynthesis.getVoices()
+    for (let i = 0; i < supportedVoices.length; i++) {
+      if (supportedVoices[i].lang.indexOf(text[0]) >= 0) {
+        utterance.voice = supportedVoices[i]
+        break
+      }
+    }
+
+    speechSynthesis.speak(utterance)
+    setSpeaking(true)
+  }
+
+  const stopSpeak = () => {
+    speechSynthesis.cancel()
+    setSpeaking(false)
+  }
+
+  return (
+    <span
+      title={t('Read')}
+      className={`gpt-util-icon ${className ? className : ''}`}
+      onClick={speaking ? stopSpeak : startSpeak}
+    >
+      {speaking ? <MuteIcon size={size} /> : <UnmuteIcon size={size} />}
+    </span>
+  )
+}
+
+export default ReadButton
diff --git a/src/components/index.mjs b/src/components/index.mjs
index 2d93741..32d0754 100644
--- a/src/components/index.mjs
+++ b/src/components/index.mjs
@@ -7,3 +7,4 @@ export * from './DeleteButton'
 export * from './FeedbackForChatGPTWeb'
 export * from './FloatingToolbar'
 export * from './InputBox'
+export * from './ReadButton'