add more chat utils (retry, edit, delete)

frontend/src/components/CopyButton.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ClipboardSetText } from '../../wailsjs/runtime';
 import { ToolTipButton } from './ToolTipButton';
 
-export const CopyButton: FC<{ content: string }> = ({ content }) => {
+export const CopyButton: FC<{ content: string, showDelay?: number, }> = ({ content, showDelay = 0 }) => {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
 
@@ -19,7 +19,8 @@ export const CopyButton: FC<{ content: string }> = ({ content }) => {
   };
 
   return (
-    <ToolTipButton desc={t('Copy')} size="small" appearance="subtle" icon={copied ? <CheckIcon /> : <CopyIcon />}
+    <ToolTipButton desc={t('Copy')} size="small" appearance="subtle" showDelay={showDelay}
+      icon={copied ? <CheckIcon /> : <CopyIcon />}
       onClick={onClick} />
   );
 };

frontend/src/components/ReadButton.tsx

@@ -7,13 +7,28 @@ import { observer } from 'mobx-react-lite';
 
 const synth = window.speechSynthesis;
 
-export const ReadButton: FC<{ content: string }> = observer(({ content }) => {
+export const ReadButton: FC<{
+  content: string,
+  inSpeaking?: boolean,
+  showDelay?: number,
+  setSpeakingOuter?: (speaking: boolean) => void
+}> = observer(({
+  content,
+  inSpeaking = false,
+  showDelay = 0,
+  setSpeakingOuter
+}) => {
   const { t } = useTranslation();
-  const [speaking, setSpeaking] = useState(false);
+  const [speaking, setSpeaking] = useState(inSpeaking);
   let lang: string = commonStore.settings.language;
   if (lang === 'dev')
     lang = 'en';
 
+  const setSpeakingInner = (speaking: boolean) => {
+    setSpeakingOuter?.(speaking);
+    setSpeaking(speaking);
+  };
+
   const startSpeak = () => {
     synth.cancel();
 
@@ -31,22 +46,22 @@ export const ReadButton: FC<{ content: string }> = observer(({ content }) => {
     Object.assign(utterance, {
       rate: 1,
       volume: 1,
-      onend: () => setSpeaking(false),
-      onerror: () => setSpeaking(false),
+      onend: () => setSpeakingInner(false),
+      onerror: () => setSpeakingInner(false),
       voice: voice
     });
 
     synth.speak(utterance);
-    setSpeaking(true);
+    setSpeakingInner(true);
   };
 
   const stopSpeak = () => {
     synth.cancel();
-    setSpeaking(false);
+    setSpeakingInner(false);
   };
 
   return (
-    <ToolTipButton desc={t('Read Aloud')} size="small" appearance="subtle"
+    <ToolTipButton desc={t('Read Aloud')} size="small" appearance="subtle" showDelay={showDelay}
       icon={speaking ? <MuteIcon /> : <UnmuteIcon />}
       onClick={speaking ? stopSpeak : startSpeak} />
   );

frontend/src/components/ToolTipButton.tsx

@@ -11,6 +11,7 @@ export const ToolTipButton: FC<{
   appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
   disabled?: boolean,
   onClick?: MouseEventHandler
+  showDelay?: number,
 }> = ({
   text,
   desc,
@@ -20,10 +21,11 @@ export const ToolTipButton: FC<{
   shape,
   appearance,
   disabled,
-  onClick
+  onClick,
+  showDelay = 0
 }) => {
   return (
-    <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
+    <Tooltip content={desc} showDelay={showDelay} hideDelay={0} relationship="label">
       <Button className={className} disabled={disabled} icon={icon} onClick={onClick} size={size} shape={shape}
         appearance={appearance}>{text}</Button>
     </Tooltip>