| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Files | Object | - |
\[]
|
A list of files to be uploaded to the Writer platform. You can use files uploaded via the File Input component or specify dictionaries with data, type and name. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | File successfully uploaded. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Graph Id | Graph Id | - | - | The id for an existing knowledge graph. It has a UUID format. | - | Format: uuid |
| Files | Object | - |
\[]
|
A list of files to be uploaded and added to the knowledge graph. You can use files uploaded via the File Input component or specify dictionaries with data, type and name. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the execution was successful. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| State element | Text | - | - | - | - | - |
| Value | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| App Id | App Id | - | - | The agent id can be found in the agent's URL. It has a UUID format. | - | Format: uuid |
| App inputs | Key-Value | - |
{"{}"}
|
- | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the execution was successful. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Question | Text | - | - | The natural language question to ask. | - | - |
| Use streaming | Text | - |
yes
|
- |
|
Allowed values: yes, no |
| State Element | Text | - | - | State variable to store or stream the response into. Reference the state element directly, i.e. use "my\_var" instead of "@{my_var_0}". | - | - |
| Graph Ids | Graph Ids | - |
\[]
|
IDs of the graphs to query. | - | - |
| Use subqueries | Text | - |
no
|
Enables LLM to ask follow-up questions to the knowledge graph. This improves answers, but may be slower. |
|
Allowed values: yes, no |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | Successfully streamed the answer. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Page key | Text | - | - | The identifying key of the target page. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The page change was successful. |
| Error | - | error | The event handler execution wasn't successful. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Conversation state element | Text | - | - | Where the conversation will be stored | - | - |
| System prompt | Text | Textarea |
""
|
A system prompt to set the context for the conversation. Can be left empty if conversation is already initialized in state. | - | - |
| Message | Object | - | - | The message to add to the conversation. Must be an object including role and content. | - | - |
| Initial model | Model Id | - |
palmyra-x5
|
- | - | - |
| Initial temperature | Number | - |
0.7
|
- | - | Range: 0 to 1 |
| Initial max tokens | Number | - |
1024
|
- | - | Range: 1 to 16384 |
| Use streaming | Text | - |
yes
|
If set to 'yes', the block will stream the reply as it is generated. If set to 'no', it will wait for the entire reply to be generated before returning. |
|
- |
| Tools | Tools | - |
{"{}"}
|
- | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Tools | tools | dynamic | Run associated tools. |
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Text | Text | - | - | The text you want to classify. | - | - |
| Categories | Key-Value | - |
{"{}"}
|
The keys should be the categories you want to classify the text in, for example 'valid' and 'invalid', and the values the criteria for each category. Category names should contain only letters of the English alphabet, digits, underscores and spaces. | - | - |
| Additional context | Text | Textarea | - | Any additional information that might help the AI in making the classification decision. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| - | categories | dynamic | - |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Items | Object | Textarea |
\[]
|
The item value will be passed in the execution environment and will be available at @{item_0}, its id at @{itemId_0}. You can use either a list or a dictionary. | - | - |
| Prefix | Text | - | - | If set, the item will be available at @{prefix_item_0} and the item id at @{prefix_itemId_0}. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Loop | - | dynamic | Connect the branch that you'd like to loop on. The branch plugged in here will be executed once per item. |
| Success | - | success | The branch referenced executed successfully for each item. |
| Error | - | error | The branch referenced has failed for at least one of the items. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Method | Text | - |
GET
|
- |
|
Allowed values: GET, POST, PUT, PATCH, DELETE |
| URL | Text | Textarea | - | - | - | Format: uri |
| Headers | Key-Value | - |
{"{}"}
|
- | - | - |
| Body type | Text | - |
text
|
- |
|
- |
| Body | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The request was successful. |
| Response error | - | error | The connection was established successfully but an error response code was received or the response was invalid. |
| Connection error | - | error | The connection couldn't be established. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Type | Text | - |
info
|
- |
|
- |
| Message | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The request was successful. |
| Error | - | error | The blueprint was executed successfully. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Plain text | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The request was successful. |
| Error | - | error | The text provided couldn't be parsed. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| File | Text | - |
""
|
UUID of a file object in Files API. | - | Format: uuid |
| Use Markdown | Text | - |
yes
|
- |
|
- |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the execution was successful. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Code | Code | Textarea | - | The code to be executed. | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The event handler execution was successful. |
| Error | - | error | The event handler execution wasn't successful. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Value | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Blueprint Key | Blueprint Key | - | - | - | - | Format: writer#blueprintKey |
| Payload | Text | Textarea |
{"{}"}
|
The value specified will be available using the template syntax i.e. @{payload_0} | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | The request was successful. |
| Error | - | error | The blueprint was executed successfully. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| State element | Text | - | - | The name of the state element. If set to 'my\_var' the value will be available at @{my_var_0} when using as part of a template. | - | - |
| Value type | Text | - |
text
|
- |
|
- |
| Value | Text | Textarea | - | - | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Prompt | Text | Textarea | - | Description of a JSON object to be created. | - | - |
| Model | Model Id | - |
palmyra-x5
|
- | - | - |
| JSON Schema | JSON | - |
{"{}"}
|
JSON schema that defines the structure of the response. For example, `{"type": "object", "properties": {...}, "required": [...]}`. | - | - |
| Max output tokens | Number | - |
1024
|
- | - | Range: 1 to 16384 |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Prompt | Text | Textarea | - | - | - | - |
| Model | Model Id | - |
palmyra-x5
|
- | - | - |
| Temperature | Number | - |
0.7
|
- | - | Range: 0 to 1 |
| Max output tokens | Number | - |
1024
|
- | - | Range: 1 to 16384 |
| Name | Field | Type | Description |
|---|---|---|---|
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Prompt | Text | Textarea | - | The task that needs to be carried out. | - | - |
| Model | Model Id | - |
palmyra-x5
|
- | - | - |
| Max iterations | Number | - |
10
|
- | - | - |
| Tools | Tools | - |
{"{}"}
|
- | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Tools | tools | dynamic | Run associated tools. |
| Success | - | success | If the function doesn't raise an Exception. |
| Error | - | error | If the function raises an Exception. |
| Name | Type | Control | Default | Description | Options | Validation |
|---|---|---|---|---|---|---|
| Component Id | Component Id | - | - | The id of the component that will trigger this branch. | uiComponentsWithEvents | - |
| Event type | Component Event Type | - | - | The type of the event that will trigger this branch. For example, wf-click. | eventTypes | - |
| Default result | Code | - | - | The result that is used when the blueprint is triggered from the "Run blueprint" button | - | - |
| Name | Field | Type | Description |
|---|---|---|---|
| Trigger | - | success | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Annotated text | Object | Value array with text/annotations. Must be a JSON string or a state reference to an array. | - |
| Reference | Color | The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation. | - |
| Seed value | Number | Choose a different value to reshuffle colours. | - |
| Rotate hue | Boolean | If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used. |
|
| Use Markdown | Boolean | If active, the output will be sanitized; unsafe elements will be removed. |
|
| Copy buttons | Boolean | If active, adds a control bar with both copy text and JSON buttons. |
|
| Button | Color | - | - |
| Button text | Color | - | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Name | Text | - | - |
| Image source | Text | A valid URL. Alternatively, you can provide a state reference to a packed file. | - |
| Caption | Text | Add an optional caption under the name, such as the person's job title. | - |
| Size | Text | - |
|
| Orientation | Text | - |
|
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Writer Framework uses Material Symbols to display icons. To include an icon, check [https://fonts.google.com/icons](https://fonts.google.com/icons), find the icon's id (such as `arrow_forward`) and it to your *Button*.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Text | Text | - | - |
| Disabled | Boolean | Disables all event handlers. |
|
| Button | Color | - | - |
| Button text | Color | - | - |
| Icon | Text | A Material Symbols id, such as "arrow\_forward". | - |
| Button shadow | Shadow | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Connect it to an LLM by handling the `wf-chatbot-message` event, which is triggered every time the user sends a message.
You can add `actions` to messages, which are buttons that trigger the `wf-chatbot-action-click`.
See the stubs for more details.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Conversation | Object | An array with messages or a writer.ai.Conversation object. | - |
| Assistant initials | Text | - | - |
| User initials | Text | - | - |
| Use Markdown | Boolean | If active, the output will be sanitized; unsafe elements will be removed. |
|
| Enable file upload | Text | - |
|
| Placeholder | Text | - | - |
| Assistant role | Color | - | - |
| User role | Color | - | - |
| Avatar | Color | - | - |
| Avatar text | Color | - | - |
| Accent | Color | - | - |
| Container background | Color | - | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Separator | Color | - | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Options | Key-Value | Key-value object with options. Must be a JSON string or a state reference to a dictionary. | - |
| Orientation | Text | Specify how to lay out the options. |
|
| Primary text | Color | - | - |
| Accent | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Color List | Object | List of predefined colors | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Title | Text | - | - |
| Width (factor) | Number | Relative size when compared to other columns in the same container. A column of width 2 will be double the width of one with width 1. | - |
| Sticky | Boolean | - |
|
| Collapsible | Boolean | - |
|
| Start collapsed | Boolean | Only applied when the column is collapsible. |
|
| Separator | Color | - | - |
| Padding | Padding | - | - |
| Content alignment (H) | Align (H) | - | - |
| Content alignment (V) | Align (V) | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Data | Text | Must be a state reference to a Pandas dataframe or PyArrow table. Alternatively, a URL for an Arrow IPC file. | - |
| Show index | Boolean | Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index. |
|
| Enable search | Boolean | - |
|
| Enable adding a record | Boolean | - |
|
| Enable updating a record | Boolean | - |
|
| Enable download | Boolean | Allows the user to download the data as CSV. |
|
| Actions | Key-Value | Define rows actions | - |
| Use Markdown | Boolean | If active, the output will be sanitized; unsafe elements will be removed. |
|
| Display row count | Number | Specifies how many rows to show simultaneously. | - |
| Wrap text | Boolean | Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields. |
|
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Accent | Color | - | - |
| Separator | Color | - | - |
| Background | Color | - | - |
| Font style | Text | - |
|
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Options | Key-Value | Key-value object with options. Must be a JSON string or a state reference to a dictionary. | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Allowed file types | Text | Provides hints for browsers to select the correct file types. You can specify extensions and MIME types separated by comma, or leave empty to accept any file. | - |
| Allow multiple files | Boolean | - |
|
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| API Key | Text | API Key from Google Cloud Console. | - |
| Map ID | Text | ID of map from Google Cloud Console, needed for markers. | - |
| Map type | Text | One of 'roadmap', 'satellite', 'hybrid' or 'terrain'. |
|
| Zoom | Number | - | - |
| Latitude | Number | - | - |
| Longitude | Number | - | - |
| Markers | Object | Markers data | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Text | Text | - | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Text | Text | Add text directly, or reference state elements with @{my_text_0}. | - |
| Heading type | Text | - |
|
| Alignment | Text | - |
|
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Padding | Padding | - | - |
| Content alignment (H) | Align (H) | - | - |
| Content alignment (V) | Align (V) | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
You can configure the element type, styles, and attributes to fit your design requirements. You can link them to state for advanced use cases, such as custom animations.
All valid HTML tags are supported, including tags such as `iframe`, allowing you to embed external sites.
Take into account the potential risks of adding custom HTML to your app, including XSS. Be specially careful when injecting user-generated data.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Element | Text | Set the type of HTML element to create, e.g., 'div', 'section', 'span', etc. | - |
| Styles | Object | Define the CSS styles to apply to the HTML element using a JSON object or a state reference to a dictionary. | - |
| Attributes | Object | Set additional HTML attributes for the element using a JSON object or a dictionary via a state reference. | - |
| HTML inside | Text | Define custom HTML to be used inside the element. It will be wrapped in a div and rendered after children components. | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Writer Framework uses Material Symbols to display icons. To include an icon, check [https://fonts.google.com/icons](https://fonts.google.com/icons), find the icon's id (such as `arrow_forward`) and it to your \_Icon.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Icon | Text | A Material Symbols id, such as "arrow\_forward". | - |
| Icon size | Number | Icon size in px | - |
| Icon color | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Source | Text | A valid URL | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Use your app's static folder to serve images directly. For example, `static/my_image.png`.
Alternatively, pass a Matplotlib figure via state.
`state["my_fig"] = fig` and then setting the *Image* source to `@{fig}`
You can also use packed files or bytes:
`state["img_b"] = wf.pack_bytes(img_bytes, "image/png")`
`state["img_f"] = wf.pack_file(img_file, "image/png")`
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Source | Text | A valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file. | - |
| Caption | Text | Leave blank to hide. | - |
| Max width (px) | Number | - | - |
| Max height (px) | Number | - | - |
| Secondary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Data | Object | - | - |
| Initial depth | Number | Sets the initial viewing depth of the JSON tree hierarchy. Use -1 to display the full hierarchy. | - |
| Hide root | Boolean | Don't show the type of the root node when it's an Object or an Array. |
|
| Copy | Boolean | If active, adds a control bar with copy JSON button. |
|
| JSON indentation | Width | - | - |
| Secondary text | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| URL | Text | Specify a URL or choose a page. Keep in mind that you can only link to pages for which a key has been specified. | - |
| Target | Text | Specifies where to open the linked document. |
|
| Rel | Text | Specifies the relationship between the current document and the linked document. | - |
| Text | Text | The text to display in the link. | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
For this component you need Mapbox access token: [https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes](https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes)
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Access Token | Text | Access token from Mapbox | - |
| Map style | Text | Map style URL | - |
| Zoom | Number | - | - |
| Latitude | Number | - | - |
| Longitude | Number | - | - |
| Markers | Object | - | - |
| Controls visible | Boolean | Show map controls |
|
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
When working with operations that can succeed or fail, *Message* can be useful. You can reserve a state element to be used for the outcome of the operation; empty messages aren't shown, so you can initialise it empty.
Then, assign a message when the operation is completed.
```python
state["msg"] = ""
if is_ok:
state["msg"] = "+It worked!"
else:
state["msg"] = "-It failed"
```
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Message | Text | Prefix with '+' for a success message, with '-' for error, '!' for warning, '%' for loading. No prefix for info. Leave empty to hide. | - |
| Success | Color | - | - |
| Error | Color | - | - |
| Warning | Color | - | - |
| Info | Color | - | - |
| Loading | Color | - | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Name | Text | - | - |
| Value | Text | The main value to be displayed. It's not limited to numbers. | - |
| Description | Text | - | - |
| Note | Text | Prefix with '+' for a positive message, with '-' for a negative message. | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Positive | Color | - | - |
| Neutral | Color | - | - |
| Negative | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Options | Key-Value | Key-value object with options. Must be a JSON string or a state reference to a dictionary. | - |
| Placeholder | Text | Text to show when no options are selected. | - |
| Maximum count | Number | The maximum allowable number of selected options. Set to zero for unlimited. | - |
| Accent | Color | The colour of the chips created for each selected option. | - |
| Chip text | Color | The colour of the text in the chips. | - |
| Primary text | Color | - | - |
| Container background | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Placeholder | Text | - | - |
| Minimum value | Number | - | - |
| Max value | Number | - | - |
| Step | Number | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Page | Number | The current page number. | - |
| Page Size | Number | The number of items per page. | - |
| Total Items | Number | The total number of items | - |
| Page Size Options | Text | A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option. | - |
| Show All Option | Boolean | Show an option to show all records. |
|
| Jump To | Boolean | Show an option to jump to a specific page. |
|
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| PDF source | Text | A valid URL. Alternatively, you can provide a state reference to a packed PDF file. | - |
| Highlights | Object | A list of highlights to be applied to the PDF as a JSON array of strings. | - |
| Selected highlight match | Number | The index of the selected highlight match. | - |
| Page | Number | The page to be displayed. | - |
| Controls | Boolean | Show controls to navigate the PDF. |
|
| Container background | Color | - | - |
| Separator | Color | - | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
You can listen to events triggered by Plotly.js and add interactivity to your charts.
For example, implement cross-filtering.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Graph specification | Object | Plotly graph specification. Pass it using state, e.g. @{fig_0}, or paste a JSON specification. | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Value | Number | - | - |
| Minimum value | Number | - | - |
| Maximum value | Number | - | - |
| Display percentage | Boolean | - |
|
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Options | Key-Value | Key-value object with options. Must be a JSON string or a state reference to a dictionary. | - |
| Orientation | Text | Specify how to lay out the options. |
|
| Primary text | Color | - | - |
| Accent | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Minimum value | Number | - | - |
| Maximum value | Number | - | - |
| Step size | Number | - | - |
| Accent | Color | - | - |
| Popover color | Color | - | - |
| Popover background | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Feedback | Text | - |
|
| Minimum value | Number | Valid values are 0 and 1. | - |
| Max value | Number | Valid values are between 2 and 11. | - |
| Step | Number | Valid values are between 0.25 and 1. | - |
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Repeater object | Object | Include a state reference to the dictionary used for repeating the child components. Alternatively, specify a JSON object. | - |
| Key variable name | Text | Set the name of the variable that will store the key of the current repeater object entry. | - |
| Value variable name | Text | Set the name of the variable that will store the value of the current repeater object entry. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Component id | Text | The id of the component to reuse. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Title | Text | Leave blank to hide. | - |
| Collapsible | Boolean | - |
|
| Start collapsed | Boolean | Only applied when the component is collapsible. |
|
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Container background | Color | - | - |
| Container shadow | Shadow | - | - |
| Separator | Color | - | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Button shadow | Shadow | - | - |
| Padding | Padding | - | - |
| Content alignment (H) | Align (H) | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Options | Key-Value | Key-value object with options. Must be a JSON string or a state reference to a dictionary. | - |
| Placeholder | Text | Text to show when no options are selected. | - |
| Maximum count | Number | The maximum allowable number of selected options. Set to zero for unlimited. | - |
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Container background | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
*Separator* components are used to separate layout elements. They can be used in most containers, including *Column Container* to separate columns.
If the container flows horizontally (like a *Horizontal Stack* or a *Column Container*) the *Separator* will be a vertical line. Otherwise, it'll be a horizontal line.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Start collapsed | Boolean | - |
|
| Background | Color | - | - |
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Container background | Color | - | - |
| Container shadow | Shadow | - | - |
| Separator | Color | - | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Button shadow | Shadow | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Minimum value | Number | - | - |
| Maximum value | Number | - | - |
| Step size | Number | - | - |
| Accent | Color | - | - |
| Popover color | Color | - | - |
| Popover background | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Name | Text | - | - |
| Padding | Padding | - | - |
| Completed | Boolean | Use a state reference to dynamically mark this step as complete. |
|
| Content alignment (H) | Align (H) | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Container background | Color | - | - |
| Container shadow | Shadow | - | - |
| Separator | Color | - | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Button shadow | Shadow | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Name | Text | - | - |
| Padding | Padding | - | - |
| Content alignment (H) | Align (H) | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Accent | Color | - | - |
| Primary text | Color | - | - |
| Secondary text | Color | - | - |
| Container background | Color | - | - |
| Container shadow | Shadow | - | - |
| Separator | Color | - | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Button shadow | Shadow | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Tags | Key-Value | Key-value object with tags. Must be a JSON string or a state reference to a dictionary. | - |
| Reference | Color | The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation. | - |
| Seed value | Number | Choose a different value to reshuffle colours. | - |
| Rotate hue | Boolean | If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used. |
|
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Text | Text | Add text directly, or reference state elements with @{my_text_0}. | - |
| Use Markdown | Boolean | The Markdown output will be sanitised; unsafe elements will be removed. |
|
| Alignment | Text | - |
|
| Primary text | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Placeholder | Text | - | - |
| Rows | Number | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Placeholder | Text | - | - |
| Password mode | Boolean | - |
|
| Accent | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Label | Text | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Interval (ms) | Number | How much time to wait between ticks. A tick is considered finished when its event is handled. | - |
| Active | Boolean | Whether the timer should trigger tick events. |
|
| Accent | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Generate a chart using Altair and pass it via state; it'll be converted to Vega-Lite specification.
`state["my_chart"] = chart`
Afterwards, you can reference the chart in the specification using the syntax `@{my_chart}`.
Alternatively, you can work with Vega-Lite directly.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Chart specification | Object | Vega-Lite chart specification. Pass a Vega Altair chart using state or paste a JSON specification. | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
Use your app's static folder to serve videos directly. For example, `static/my_video.mp4`.
Alternatively, you can pack bytes or files in state:
`state["vid_b"] = wf.pack_bytes(vid_bytes, "video/mp4")`
`state["vid_f"] = wf.pack_file(vid_file, "video/mp4")`
Afterwards, you can reference the video using the syntax `@{vid_f}`.
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Source | Text | The URL of the video file. Alternatively, you can pass a file via state. | - |
| Controls | Boolean | Display video player controls. |
|
| Autoplay | Boolean | Autoplay the video when the component is loaded. |
|
| Loop | Boolean | Loop the video when it reaches the end. |
|
| Muted | Boolean | Mute the video by default. |
|
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
## Fields
| Name | Type | Description | Options |
|---|---|---|---|
| Refresh rate (ms) | Number | Set to 0 for manual capture. | - |
| Button | Color | - | - |
| Button text | Color | - | - |
| Button shadow | Shadow | - | - |
| Separator | Color | - | - |
| Custom CSS classes | Text | CSS classes, separated by spaces. You can define classes in custom stylesheets. | - |
### App static assets
Static assets in your application are inaccessible. You can use the `app_static_public` parameter to allow their usage.
When `app_static_public` is set to `True`, the static assets in your application are accessible without authentication.
```python
oidc = writer.auth.Auth0(
client_id="xxxxxxx",
client_secret="xxxxxxxxxxxxx",
domain="xxx-xxxxx.eu.auth0.com",
host_url=os.getenv('HOST_URL', "http://localhost:5000"),
app_static_public=True
)
```
## User information in event handler
When the `user_info` route is configured, user information will be accessible
in the event handler through the `session` argument.
```python
def on_page_load(state, session):
email = session['userinfo'].get('email', None)
state['email'] = email
```
## Unauthorize access
It is possible to reject a user who, for example, does not have the correct email address.
| Parameter | Description |
| ------------ | ---------------------- |
| status\_code | HTTP status code |
| message | Error message |
| more\_info | Additional information |
## Modify user info
User info can be modified in the callback.
```python
from fastapi import Request
import writer.serve
import writer.auth
oidc = ...
def callback(request: Request, session_id: str, userinfo: dict):
userinfo['group'] = []
if userinfo['email'] in ['fabien@example.com']:
userinfo['group'].append('admin')
userinfo['group'].append('user')
else:
userinfo['group'].append('user')
writer.serve.register_auth(oidc, callback=callback)
```
## Custom unauthorized page
You can customize the access denial page using your own template.
```python
import os
from fastapi import Request, Response
from fastapi.templating import Jinja2Templates
import writer.serve
import writer.auth
oidc = ...
def unauthorized(request: Request, exc: writer.auth.Unauthorized) -> Response:
templates = Jinja2Templates(directory=os.path.join(os.path.dirname(__file__), "templates"))
return templates.TemplateResponse(request=request, name="unauthorized.html", status_code=exc.status_code, context={
"status_code": exc.status_code,
"message": exc.message,
"more_info": exc.more_info
})
writer.serve.register_auth(oidc, unauthorized_action=unauthorized)
```
## Enable in edit mode
Authentication is disabled in edit mode. To activate it, you must trigger the loading of the server\_setup module in edition mode.
```bash
writer edit --enable-server-setup
```
# Backend-driven UI
Source: https://dev.writer.com/framework/backend-driven-ui
Framework facilitates backend-initiated user interface modifications. These changes are made possible through **Code-Managed Components** (CMCs), distinct from the *Builder-Managed Components* (BMCs).
CMCs, unlike BMCs, are dynamically created and modified via back-end code, and cannot be edited (but still can be viewed) within the application builder. It's important to also note that CMCs do not persist in your application's files and exist only during the application runtime, supporting dynamic UI adjustments.
Welcome to the App Hub
""") uvicorn.run(root_asgi_app, host="0.0.0.0", port=5328, log_level="warning", ws_max_size=writer.serve.MAX_WEBSOCKET_MESSAGE_SIZE) ``` # Dataframe Source: https://dev.writer.com/framework/dataframe ## DataFrames If your application needs to present data as a table, it should use a **DataFrame**. DataFrames provide a simple way to present data in a grid format, require only a couple of lines of code to set up, and provide an interface that users expect from modern data applications.  DataFrames built-in features that users expect, such as headers that can be clicked to change the sort order and resizable columns...  ...and with the simple change of a parameter, you can enable features such as the Search field, which lets the user find the data they’re looking for (or filter out unwanted data), and the Download button, which downloads the data currently being displayed as a .csv file:  You can find the full list of DataFrame properties and fields on the [*DataFrame* component page](/components/dataframe). ### “DataFrame” has multiple meanings **Writer Framework has two objects with the name *DataFrame*:** 1. **UI DataFrame:** In Writer Framework's UI, "DataFrame" refers to a ***user interface component*** that displays data in rows and columns in a way similar to a spreadsheet or SQL table. 2. **Code Dataframe:** In code that you write for a Writer Framework application, `DataFrame` refers to a ***data structure*** that stores data in rows and columns in a way similar to a spreadsheet or SQL table. To present a data table in Writer Framework, you create a `DataFrame` data structure in your code and then bind it to a UI Dataframe. ## Displaying a static DataFrame A static DataFrame is one whose content does not change. The user can change its sort order, but the data within the DataFrame remains constant.
csv table
" }, "step2": { "release-notes": None, "completed": "no", "formatted-release-notes": "notes should go here" }, }) ```[Build with No-code](/no-code/introduction) →
[Build with Agent Builder](/agent-builder/quickstart) →
[Build with API and SDKs](/home/quickstart) →
-
{capabilities_0} output -
{contextWindow_0} context window -
**Input**: \${inputPrice_0} → **Output**: \${outputPrice_0}
-
{capabilities_1} output -
{contextWindow_1} context window -
**Input**: \${inputPrice_1} → **Output**: \${outputPrice_1}
-
{capabilities_2} output -
{contextWindow_2} context window -
**Input**: \${inputPrice_2} → **Output**: \${outputPrice_2}
-
{capabilities_0} output -
{contextWindow_0} context window -
**Input**: \${inputPrice_0} → **Output**: \${outputPrice_0}
-
{capabilities_1} output -
{contextWindow_1} context window -
**Input**: \${inputPrice_1} → **Output**: \${outputPrice_1}
-
{capabilities_2} output -
{contextWindow_2} context window -
**Input**: \${inputPrice_2} → **Output**: \${outputPrice_2}
{prompt}
### Instruction ###
Write a poem in the style of
Robert Frost.
### Question ###
What's the poem about?
Provide a list of idioms in English, along with their meanings and example
sentences.
Here is an example for the output:
An idiom: 'Break a leg'
Meaning: Good luck
Example sentence: 'I'm sure you'll do great in your interview.
Break a leg!'
System instruction: Create a product detail page for a
fictional innovative smartphone by a retailer known as "TechTrend
Electronics."
Prompt 1: Start by describing the unique features of the smartphone,
such as its solar-powered battery, triple-lens camera system, and foldable
screen technology.
Prompt 2: Next, outline the benefits of these features
for users, like extended battery life, exceptional photo quality, and
enhanced device portability.
Prompt 3: Conclude with crafting compelling product descriptions
and a call-to-action that entices customers to make a purchase during the upcoming
holiday sale.
Summarize a series of healthcare claims documents for a fictional
healthcare company, 'HealthFirst Solutions', using the following delimiter `\n`
to separate different sections of the summary:
Claim Number: 123456789 `\n`
Date of Service: January 1, 2024 `\n`
Diagnosis: Acute sinusitis `\n`
Total Claimed: \$300 `\n`
Status: Pending review `\n`
{prompt}