Skip to content

feat: introduce "Binding" field - WF-611 WF-612 - #980

Merged
madeindjs merged 3 commits into
devfrom
WF-611
Jun 27, 2025
Merged

feat: introduce "Binding" field - WF-611 WF-612#980
madeindjs merged 3 commits into
devfrom
WF-611

Conversation

@madeindjs

@madeindjs madeindjs commented Jun 26, 2025

Copy link
Copy Markdown
Collaborator
before after
image image

Summary by CodeRabbit

  • New Features

    • Introduced a new "Binding" field type for block configurations, allowing fields to reference variables or state bindings.
    • Added support for dynamic icon display in input fields when using the "Binding" type.
  • Improvements

    • Enhanced field descriptions and labels for clarity in several blocks.
    • Updated UI components to support and display the new "Binding" type.
    • Improved button visuals by replacing text with a material icon.
    • Streamlined component syntax and conditional rendering for better maintainability.
    • Replaced custom section title components with a new standardized title component for consistent styling.
    • Removed deprecated section title component to simplify the UI codebase.
    • Added a new standardized title component with consistent styling for section headers.

@madeindjs madeindjs self-assigned this Jun 26, 2025
@coderabbitai

coderabbitai Bot commented Jun 26, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

The changes introduce a new Binding field type across several backend block definitions and update the UI to distinguish between "template" and "state" (binding) fields. A new type prop is added to relevant Vue components, enabling conditional display of a "@" (now as a Material icon) prefix for state/binding fields, clarifying variable usage points in the interface.

Changes

File(s) Change Summary
src/ui/src/builder/settings/BuilderFieldsText.vue, src/ui/src/builder/settings/BuilderSettingsProperties.vue Added type prop to distinguish field types; updated component usage and conditional rendering for new types.
src/ui/src/builder/settings/BuilderTemplateInput.vue Added logic to show "alternate_email" icon as prefix when type is "state".
src/ui/src/builder/settings/BuilderSettings.vue Changed "@" button to Material icon for consistent visual cue.
src/ui/src/writerTypes.ts Added Binding to FieldType enum.
src/writer/blocks/addtostatelist.py, src/writer/blocks/setstate.py, src/writer/blocks/writeraddchatmessage.py, src/writer/blocks/writeraskkg.py, src/writer/blocks/writerchat.py, src/writer/blocks/writerchatreply.py Changed field metadata: updated field types from "Text" to "Binding", improved descriptions for clarity.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BuilderSettingsProperties.vue
    participant BuilderFieldsText.vue
    participant BuilderTemplateInput.vue

    User->>BuilderSettingsProperties.vue: Selects or edits a field
    BuilderSettingsProperties.vue->>BuilderFieldsText.vue: Renders with type ('state'/'template')
    BuilderFieldsText.vue->>BuilderTemplateInput.vue: Passes type prop
    BuilderTemplateInput.vue-->>User: Shows input with "@" icon if type is 'state'
Loading

Assessment against linked issues

Objective (Issue) Addressed Explanation
Add a @ prefix to all state input and binding fields (WF-611)

Poem

In fields where variables love to play,
A shiny "@" now leads the way!
Whether state or binding, clear and bright,
The icon hops in, a guiding light.
With every tweak, the UI sings—
Hooray for clarity, and all the joy it brings!
🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3cfed81 and 39e34e9.

📒 Files selected for processing (1)
  • src/ui/src/builder/settings/BuilderTemplateInput.vue (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/ui/src/builder/settings/BuilderTemplateInput.vue
⏰ Context from checks skipped due to timeout of 90000ms (15)
  • GitHub Check: build (3.12)
  • GitHub Check: build (3.10)
  • GitHub Check: build (3.11)
  • GitHub Check: build (3.13)
  • GitHub Check: build (3.9)
  • GitHub Check: build (3.11)
  • GitHub Check: build (3.12)
  • GitHub Check: build (3.13)
  • GitHub Check: build (3.9)
  • GitHub Check: build (3.10)
  • GitHub Check: tests (firefox)
  • GitHub Check: tests (webkit)
  • GitHub Check: tests (chromium)
  • GitHub Check: Analyze (python)
  • GitHub Check: Analyze (javascript-typescript)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@hackerone-code hackerone-code Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ This pull request was succesfully scanned and it was determined that it does not contain any changes that present immediate security concerns. If you would still like for it to be reviewed by an expert from our reviewer community, you can submit it manually via the HackerOne PullRequest dashboard.

⏱️ Latest scan covered changes up to commit 3b6ca07 (latest)

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
src/writer/blocks/writerchatreply.py (2)

22-23: Tighten wording in the description.

Minor language polish improves clarity.

-            "desc": "The variable that has your conversation object.",
+            "desc": "Variable that contains your conversation object.",

38-38: Fix grammar in message field description.

Current sentence is slightly confusing.

-            "desc": "An array with messages or a variable to contain save your conversation as an object. ",
+            "desc": "An array of messages, or a variable that stores the conversation object.",
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7ff51b0 and 3b6ca07.

📒 Files selected for processing (11)
  • src/ui/src/builder/settings/BuilderFieldsText.vue (3 hunks)
  • src/ui/src/builder/settings/BuilderSettings.vue (1 hunks)
  • src/ui/src/builder/settings/BuilderSettingsProperties.vue (2 hunks)
  • src/ui/src/builder/settings/BuilderTemplateInput.vue (1 hunks)
  • src/ui/src/writerTypes.ts (1 hunks)
  • src/writer/blocks/addtostatelist.py (1 hunks)
  • src/writer/blocks/setstate.py (1 hunks)
  • src/writer/blocks/writeraddchatmessage.py (1 hunks)
  • src/writer/blocks/writeraskkg.py (1 hunks)
  • src/writer/blocks/writerchat.py (1 hunks)
  • src/writer/blocks/writerchatreply.py (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (13)
  • GitHub Check: build (3.13)
  • GitHub Check: build (3.12)
  • GitHub Check: build (3.9)
  • GitHub Check: build (3.11)
  • GitHub Check: build (3.10)
  • GitHub Check: build (3.13)
  • GitHub Check: build (3.10)
  • GitHub Check: build (3.12)
  • GitHub Check: build (3.9)
  • GitHub Check: build (3.11)
  • GitHub Check: tests (webkit)
  • GitHub Check: tests (firefox)
  • GitHub Check: tests (chromium)
🔇 Additional comments (14)
src/ui/src/writerTypes.ts (1)

140-140: ```shell
#!/bin/bash

Re-run FieldType integration checks with proper file globs

echo "=== 1. Searching for all FieldType references ==="
rg -g '.ts' -g '.tsx' -g '*.vue' -A5 -B5 "FieldType."

echo "=== 2. Looking specifically for Binding usage ==="
rg -g '.ts' -g '.tsx' -g '*.vue' -A5 -B5 "FieldType.Binding"

echo "=== 3. Checking switch-case handling for Binding ==="
rg -g '.ts' -g '.tsx' -g '.vue' -A3 -B3 "case\sFieldType.Binding"

echo "=== 4. Checking if-statements handling for Binding ==="
rg -g '.ts' -g '.tsx' -g '*.vue' -A3 -B3 "FieldType.Binding"

echo "=== 5. Checking for hardcoded FieldType lists/arrays ==="
rg -g '.ts' -g '.tsx' -g '*.vue' -A3 -B3 "[(.FieldType.\w+.)]"


</details>
<details>
<summary>src/ui/src/builder/settings/BuilderSettings.vue (1)</summary>

`55-57`: **Excellent UI improvement with semantic icon choice.**

Replacing the plain "@" text with the `alternate_email` material icon enhances visual consistency and provides better semantic meaning for binding/state references.

</details>
<details>
<summary>src/ui/src/builder/settings/BuilderTemplateInput.vue (2)</summary>

`15-15`: **Well-implemented conditional icon display.**

The conditional rendering of the `alternate_email` icon for state-type fields provides clear visual distinction and aligns with the overall UI design.

---

`109-113`: ```shell
#!/bin/bash
# Description: Check for dynamic binding of the `type` prop via shorthand and v-bind syntax.

echo "=== Shorthand binding (:type) occurrences ==="
rg -n "<BuilderTemplateInput[^>]*:[Tt]ype=" -g "*.vue" || echo "No shorthand bindings found."

echo
echo "=== v-bind binding (v-bind:type) occurrences ==="
rg -n "<BuilderTemplateInput[^>]*v-bind:type" -g "*.vue" || echo "No v-bind:type usages found."
src/writer/blocks/setstate.py (1)

20-23: Metadata updates align well with the new binding field type.

The changes improve clarity with "Link Variable" as a more descriptive name and properly categorize the field as a Binding type. The updated description better reflects the field's purpose.

Verify that the field retrieval logic in the run method works correctly with the new Binding field type:

#!/bin/bash
# Description: Check if _get_field method handles Binding field type correctly.

# Search for _get_field method implementation
echo "=== Checking _get_field method implementation ==="
ast-grep --pattern 'def _get_field($$$) { $$$ }'

# Search for any field type-specific handling
echo "=== Checking field type handling in base classes ==="
rg -A 5 -B 5 "field.*type" src/writer/blocks/
src/writer/blocks/writeraskkg.py (1)

40-40: Consistent field type update for state binding.

Changing the field type from Text to Binding correctly categorizes this field's purpose as a state variable reference, aligning with the broader system updates.

src/writer/blocks/addtostatelist.py (1)

20-20: LGTM! Semantic improvement for state element field.

The change from "Text" to "Binding" correctly reflects that this field represents a state variable reference rather than plain text. The runtime logic already handles this appropriately with evaluator.evaluate_expression().

src/writer/blocks/writerchat.py (1)

22-23: LGTM! Improved clarity for conversation state element.

Both the description and type changes enhance semantic clarity:

  • The new description better explains the field's purpose
  • The "Binding" type correctly reflects that this is a variable reference, not plain text

The runtime logic appropriately handles this with evaluator.evaluate_expression().

src/ui/src/builder/settings/BuilderSettingsProperties.vue (2)

45-52: LGTM! Stylistic improvement with self-closing tags.

The conversion to self-closing Vue component tags improves code conciseness without affecting functionality.


62-78: LGTM! Excellent consolidation of field type handling.

The consolidation of multiple field types (Text, Boolean, Number, Binding, IdKey) into a single conditional block improves maintainability. The conditional type prop assignment correctly maps:

  • FieldType.Binding'state'
  • All others → 'template'

This semantic distinction aligns perfectly with the new binding field type introduction.

src/ui/src/builder/settings/BuilderFieldsText.vue (2)

54-58: LGTM! Well-implemented type distinction prop.

The new optional type prop with "state" | "template" values and default "template" enables proper semantic distinction for binding fields while maintaining backward compatibility.


14-17: LGTM! Proper prop passing to BuilderTemplateInput.

The explicit binding of the type prop ensures the semantic distinction is correctly passed down to the input component.

src/writer/blocks/writeraddchatmessage.py (1)

21-22: LGTM! Consistent improvement across writer blocks.

The description and type changes match those in writerchat.py, ensuring consistency across blocks that handle conversation state elements. The "Binding" type correctly reflects that this is a variable reference.

Let me verify that this pattern is consistently applied across all writer blocks with conversation state elements:

#!/bin/bash
# Description: Verify consistent use of Binding type for conversation state elements
# Expected: All conversation state elements should use "Binding" type

echo "=== Searching for conversationStateElement fields ==="
rg -A 3 '"conversationStateElement"' --type py

echo -e "\n=== Searching for fields with 'conversation' in description ==="  
rg -A 3 -B 1 '"desc".*[Cc]onversation' --type py

echo -e "\n=== Checking for any remaining Text type fields that might need to be Binding ==="
rg -A 2 -B 2 '"type": "Text"' src/writer/blocks/ --type py
src/writer/blocks/writerchatreply.py (1)

22-26: Confirm downstream handling of the new Binding type.

Switching conversationStateElement from "Text" to "Binding" changes the runtime contract. Please make sure that:

  1. _get_field() (and any JSON-schema validation) accepts "Binding" the same way it previously accepted "Text".
  2. Existing blueprints serialized with the old "Text" type are migrated or continue to load without validation errors.

If these concerns are already covered in the related UI / migration code, feel free to ignore.

@hackerone-code hackerone-code Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ This pull request was succesfully scanned and it was determined that it does not contain any changes that present immediate security concerns. If you would still like for it to be reviewed by an expert from our reviewer community, you can submit it manually via the HackerOne PullRequest dashboard.

⏱️ Latest scan covered changes up to commit 3cfed81 (latest)

@madeindjs madeindjs changed the title feat: introduce "Binding" field - WF-611 feat: introduce "Binding" field - WF-611 WF-612 Jun 26, 2025

@hackerone-code hackerone-code Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ This pull request was succesfully scanned and it was determined that it does not contain any changes that present immediate security concerns. If you would still like for it to be reviewed by an expert from our reviewer community, you can submit it manually via the HackerOne PullRequest dashboard.

⏱️ Latest scan covered changes up to commit 39e34e9 (latest)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant