Merge branch 'agent-paper-main' into lanyi-expanded-agent-paper-main

1 files changed, 45 insertions, 6 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 437888ef2..48cab9c7b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -3,30 +3,43 @@ 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';
+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');
 export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
+export const StateMessageButton = Symbol('StateMessageButton');
 export class infoState {
     [StateMessage]: string = '';
     [StateMessageGIF]?: string = '';
+    [StateMessageButton]?: InfoButton[];
     [StateEntryFunc]?: () => unknown;
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, 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;
     }
 }
 
@@ -42,16 +55,17 @@ export class infoState {
  */
 export function InfoState(
     msg: string, //
-    arcs: { [key: string]: infoArc },
+    arcs?: { [key: string]: infoArc },
     gif?: string,
+    button?: InfoButton[],
     entryFunc?: () => unknown
 ) {
-    return new infoState(msg, arcs, gif, entryFunc);
+    return new infoState(msg, arcs, gif, button, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
     infoState: infoState;
-    next: (state: infoState) => unknown;
+    next: (state: infoState) => unknown; // Ensure it's properly defined
     close: () => void;
 }
 
@@ -68,6 +82,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     get State() {
         return this._props.infoState;
     }
+
+    set State(value: infoState) {
+        this._props.infoState = value;
+    }
     get Arcs() {
         return Object.keys(this.State ?? []).map(key => this.State?.[key]);
     }
@@ -97,6 +115,9 @@ 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);
         return (
             <div className="collectionFreeform-infoUI">
                 <p className="collectionFreeform-infoUI-msg">
@@ -110,9 +131,27 @@ 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) => (
+                        <button
+                            key={index}
+                            type="button"
+                            className="collectionFreeform-infoUI-skip-button"
+                            onClick={action(() => {
+                                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())} />
                 </div>