chat utils

frontend/src/components/CopyButton.tsx

@@ -0,0 +1,25 @@
+import {FC, useState} from 'react';
+import {CheckIcon, CopyIcon} from '@primer/octicons-react';
+import {useTranslation} from 'react-i18next';
+import {ClipboardSetText} from '../../wailsjs/runtime';
+import {ToolTipButton} from './ToolTipButton';
+
+export const CopyButton: FC<{ content: string }> = ({content}) => {
+  const {t} = useTranslation();
+  const [copied, setCopied] = useState(false);
+
+  const onClick = () => {
+    ClipboardSetText(content)
+      .then(() => setCopied(true))
+      .then(() =>
+        setTimeout(() => {
+          setCopied(false);
+        }, 600)
+      );
+  };
+
+  return (
+    <ToolTipButton desc={t('Copy')} size="small" appearance="subtle" icon={copied ? <CheckIcon/> : <CopyIcon/>}
+                   onClick={onClick}/>
+  );
+};

frontend/src/components/ReadButton.tsx

@@ -0,0 +1,52 @@
+import {FC, useState} from 'react';
+import {MuteIcon, UnmuteIcon} from '@primer/octicons-react';
+import {useTranslation} from 'react-i18next';
+import {ToolTipButton} from './ToolTipButton';
+import commonStore from '../stores/commonStore';
+import {observer} from 'mobx-react-lite';
+
+const synth = window.speechSynthesis;
+
+export const ReadButton: FC<{ content: string }> = observer(({content}) => {
+  const {t} = useTranslation();
+  const [speaking, setSpeaking] = useState(false);
+  let lang: string = commonStore.settings.language;
+  if (lang === 'dev')
+    lang = 'en';
+
+  const startSpeak = () => {
+    synth.cancel();
+
+    const utterance = new SpeechSynthesisUtterance(content);
+    const voices = synth.getVoices();
+
+    let voice;
+    if (lang === 'en')
+      voice = voices.find((v) => v.name.toLowerCase().includes('microsoft aria'));
+    else if (lang === 'zh')
+      voice = voices.find((v) => v.name.toLowerCase().includes('xiaoyi'));
+    if (!voice) voice = voices.find((v) => v.lang.substring(0, 2) === lang);
+    if (!voice) voice = voices.find((v) => v.lang === navigator.language);
+
+    Object.assign(utterance, {
+      rate: 1,
+      volume: 1,
+      onend: () => setSpeaking(false),
+      onerror: () => setSpeaking(false),
+      voice: voice
+    });
+
+    synth.speak(utterance);
+    setSpeaking(true);
+  };
+
+  const stopSpeak = () => {
+    synth.cancel();
+    setSpeaking(false);
+  };
+
+  return (
+    <ToolTipButton desc={t('Read Aloud')} size="small" appearance="subtle" icon={speaking ? <MuteIcon/> : <UnmuteIcon/>}
+                   onClick={speaking ? stopSpeak : startSpeak}/>
+  );
+});