1 files changed, 57 insertions, 0 deletions
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();
+                    }
+                })}
+            />
+        );
+    }
+}