reverted chat send to use dash component Button, and dictation to use Toggle. Reverted Dropdown to use trigger of CLICK (hover doesn't work well). got rid of currentuserutil button references in infoUI & replaced with info-specific button descriptions. fixed up a bunch of lint/typing errors

1 files changed, 24 insertions, 29 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 8ed3e8e30..48cab9c7b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,16 +3,24 @@ import { IReactionDisposer, action, makeObservable, observable, reaction } from
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
+import { ButtonType } from '../../nodes/FontIconBox/FontIconBox';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
-import { Button } from '../../../util/CurrentUserUtils';
+export interface InfoButton {
+    targetState?: infoState;
+    // DocumentOptions fields a button can set
+    title?: string;
+    toolTip?: string;
+    btnType?: ButtonType;
 
+    // fields that do not correspond to DocumentOption fields
+    scripts?: { script?: string; onClick?: string; onDoubleClick?: string };
+}
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
  * The second array element is a function that will be invoked when the first test function
  * returns a truthy value
  */
-// eslint-disable-next-line no-use-before-define
 export type infoArc = [() => unknown, (res?: unknown) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
@@ -22,19 +30,13 @@ export const StateMessageButton = Symbol('StateMessageButton');
 export class infoState {
     [StateMessage]: string = '';
     [StateMessageGIF]?: string = '';
-    [StateMessageButton]?: Button[]; 
+    [StateMessageButton]?: InfoButton[];
     [StateEntryFunc]?: () => unknown;
     [key: string]: infoArc;
 
-    constructor(
-        message: string, 
-        arcs: { [key: string]: infoArc }, 
-        messageGif?: string, 
-        buttons?: Button[], 
-        entryFunc?: () => unknown
-    ) {
+    constructor(message: string, arcs?: { [key: string]: infoArc }, messageGif?: string, buttons?: InfoButton[], entryFunc?: () => unknown) {
         this[StateMessage] = message;
-        Object.assign(this, arcs);
+        Object.assign(this, arcs ?? {});
         this[StateMessageGIF] = messageGif;
         this[StateEntryFunc] = entryFunc;
         this[StateMessageButton] = buttons;
@@ -53,9 +55,9 @@ export class infoState {
  */
 export function InfoState(
     msg: string, //
-    arcs: { [key: string]: infoArc },
+    arcs?: { [key: string]: infoArc },
     gif?: string,
-    button?: Button[],
+    button?: InfoButton[],
     entryFunc?: () => unknown
 ) {
     return new infoState(msg, arcs, gif, button, entryFunc);
@@ -63,7 +65,7 @@ export function InfoState(
 
 export interface CollectionFreeFormInfoStateProps {
     infoState: infoState;
-    next: (state: infoState) => unknown;  // Ensure it's properly defined
+    next: (state: infoState) => unknown; // Ensure it's properly defined
     close: () => void;
 }
 
@@ -114,8 +116,8 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     render() {
         const gif = this.State?.[StateMessageGIF];
         const buttons = this.State?.[StateMessageButton];
-        console.log("Rendering CollectionFreeFormInfoState with state:", this.props.infoState);
-        console.log(buttons)
+        console.log('Rendering CollectionFreeFormInfoState with state:', this.props.infoState);
+        console.log(buttons);
         return (
             <div className="collectionFreeform-infoUI">
                 <p className="collectionFreeform-infoUI-msg">
@@ -129,11 +131,11 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                         {this._expanded ? 'Less...' : 'More...'}
                     </button>
                 </p>
-                
+
                 <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
                     <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
-    
+
                 {/* Render the buttons for skipping */}
                 <div className={'collectionFreeform-' + (!buttons || buttons.length === 0 ? 'hidden' : 'infoUI-button-container')}>
                     {buttons?.map((button, index) => (
@@ -142,23 +144,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                             type="button"
                             className="collectionFreeform-infoUI-skip-button"
                             onClick={action(() => {
-                                console.log("Attempting transition to:", button.targetState);
+                                console.log('Attempting transition to:', button.targetState);
                                 this.props.next(button.targetState as infoState); // ✅ Use the prop instead
-                              })}>
+                            })}>
                             {button.title}
                         </button>
                     ))}
                 </div>
-    
+
                 <div className="collectionFreeform-infoUI-close">
-                    <IconButton
-                        icon="x"
-                        color={SettingsManager.userColor}
-                        size={Size.XSMALL}
-                        type={Type.TERT}
-                        background={SettingsManager.userBackgroundColor}
-                        onClick={action(() => this.props.close())}
-                    />
+                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(() => this.props.close())} />
                 </div>
             </div>
         );