From 1023d79c64b7146df180cc07c474e688377a63fe Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 10 Feb 2025 12:51:59 -0500
Subject: added dictation buttons to chatbox

---
 src/client/views/DictationButton.tsx | 57 ++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/client/views/DictationButton.tsx

(limited to 'src/client/views/DictationButton.tsx')

diff --git a/src/client/views/DictationButton.tsx b/src/client/views/DictationButton.tsx
new file mode 100644
index 000000000..0ce586df4
--- /dev/null
+++ b/src/client/views/DictationButton.tsx
@@ -0,0 +1,57 @@
+import { IconButton, Type } from '@dash/components';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { BiMicrophone } from 'react-icons/bi';
+import { DictationManager } from '../util/DictationManager';
+import { SnappingManager } from '../util/SnappingManager';
+
+export interface DictationButtonProps {
+    setInput: (val: string) => void;
+    inputRef?: HTMLInputElement | null | undefined;
+}
+@observer
+export class DictationButton extends React.Component<DictationButtonProps> {
+    @observable private _isRecording = false;
+    constructor(props: DictationButtonProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    stopDictation = action(() => {
+        this._isRecording = false;
+        DictationManager.Controls.stop();
+    });
+
+    render() {
+        return (
+            <IconButton
+                type={Type.TERT}
+                color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
+                tooltip="Record"
+                icon={<BiMicrophone size="16px" />}
+                onClick={action(() => {
+                    if (!this._isRecording) {
+                        this._isRecording = true;
+                        DictationManager.Controls.listen({
+                            interimHandler: (value: string) => {
+                                this.props.setInput(value);
+                                if (this.props.inputRef) {
+                                    this.props.inputRef.focus();
+                                    this.props.inputRef.scrollLeft = 1000000;
+                                }
+                            },
+                            continuous: { indefinite: false },
+                        }).then(results => {
+                            if (results && [DictationManager.Controls.Infringed].includes(results)) {
+                                DictationManager.Controls.stop();
+                            }
+                        });
+                    } else {
+                        this.stopDictation();
+                    }
+                })}
+            />
+        );
+    }
+}
-- 
cgit v1.2.3-70-g09d2