react-craft-ai-operations-history
OperationHistory
is a React component aiming at displaying the context operations of a craft ai agent.
Demo
Usage
A very basic usage looks like that
<OperationsHistory agentConfiguration=myAgentConfiguration initialOperations=myAgentOperations/>
Where myAgentConfiguration
and myAgentOperations
are data structures that can be retrieved from the craft ai API.
The component can be used with load as you scroll strategy using the following props
<OperationsHistory agentConfiguration=myAgentConfiguration from=myAgentfirstTimestamp to=myAgentlastTimestamp onRequestOperations= { /* ... */ return operations // The retrieved operations from // The first timestamp that was requested to // The last timestamp that was requested initialState // If `requestInitialState` is true, the full state of the agent at `from` ; }/>
Props reference
agentConfiguration
(required)
The configuration of the agent.
onRequestOperations
A function taking three parameters:
requestedFrom
the desired operations timestamp lower bound,requestedTo
the desired operations timestamp upper bound,requestInitialState
a boolean telling if the full state atfrom
is needed.
This function can return a promise and returns an object having the following properties:
operations
the retrieved operations as an array,from
the first timestamp that was requested (can be different fromrequestedFrom
, because of page alignment for example),to
the last timestamp that was requested (can be different fromrequestedTo
, because of page alignment for example),initialState
, ifrequestInitialState
is true, the full state of the agent atfrom
.
rowHeight
(default is 45)
The height, in pixels, of the rows.
height
(default is 600)
The height, in pixels, of the full table.
width
(default is undefined
)
The width, in pixels, of the full table, if undefined
the table will take the full available width.
initialOperations
Array of already loaded operations.
to
The agent's operations timestamp upper bound.
from
The agent's operations timestamp lower bound.
focus
The timestamp that should be highlighted.