feat: add jsfunction resp viz #39697
Conversation
WalkthroughThe changes update the visualization workflow in the Plugin Action Editor and enhance response rendering in the JSResponseView. In the Visualization component, the old properties have been replaced with new ones, refactoring how visualization data and responses are handled. In the PromptInput component, the form wrapper has been removed and submission now triggers on the Enter key, simplifying the flow. Additionally, the JSResponseView now conditionally introduces an "AI Response Visualizer" tab when function calling is enabled, integrating the Visualization component accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PromptInput
participant EditorForm
User->>PromptInput: Types input and presses Enter
PromptInput-->>PromptInput: Detect Enter key press
PromptInput->>EditorForm: Trigger onSubmit event
EditorForm-->>User: Submit input data
sequenceDiagram
participant User
participant JSResponseView
participant FunctionChecker as getReleaseFnCallingEnabled
participant VisualizationComponent
User->>JSResponseView: Open response tabs
JSResponseView->>FunctionChecker: Check if function calling enabled
FunctionChecker-->>JSResponseView: Return enabled status
alt Function Calling Enabled
JSResponseView->>VisualizationComponent: Render "AI Response Visualizer" with props
else Not Enabled
JSResponseView->>VisualizationComponent: Render standard response view
end
VisualizationComponent-->>User: Display appropriate tab
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
AI Agents
| actionResponse?: ActionResponse; | ||
| entityId: string; | ||
| visualizationElements?: VisualizationElements; | ||
| response?: string | Record<string, unknown>[]; |
There was a problem hiding this comment.
Made it more generic so it can be used with actions and jsfunctions
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
app/client/src/components/editorComponents/JSResponseView.tsx (1)
271-271: Don't forget to update dependencies arrayThe dependencies array for the useMemo hook doesn't include
isFnCallingEnabledwhich is now used in the tab creation logic.- }, [JSResponseTab, errorCount, ideType, ideViewMode]); + }, [JSResponseTab, errorCount, ideType, ideViewMode, isFnCallingEnabled]);
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/Visualization.tsx(1 hunks)app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/PromptInput.tsx(3 hunks)app/client/src/components/editorComponents/JSResponseView.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: build
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (11)
app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/components/PromptInput.tsx (3)
16-17: Good improvement with form removalThe comment clearly explains why the form was removed - preventing nested forms which can cause submission issues. This simplifies the component structure and avoids potential DOM validation errors.
21-25: Good implementation of keyboard-based submissionAdding the Enter key handler provides a better user experience by allowing keyboard submission, which is a standard pattern for input fields. The implementation is clean and focused.
35-35: Simplified click handlerDirect connection to the onSubmit function is cleaner than the previous implementation. This change aligns with the form removal and simplifies the control flow.
app/client/src/components/editorComponents/JSResponseView.tsx (4)
45-46: New imports support the visualization featureThese imports correctly bring in the necessary selector for feature flag checking and the Visualization component that will be conditionally rendered in the new tab.
217-217: Feature flag usage is appropriateUsing a feature flag selector is the right approach for controlling access to the new functionality. This enables gradual rollout and testing of the visualization feature.
222-242: Well-structured conditional tab additionThe implementation correctly:
- Creates a base tabs array with the standard response tab
- Conditionally adds the visualization tab based on the feature flag
- Passes appropriate props from the current function to the Visualization component
This approach maintains backward compatibility while cleanly introducing the new functionality.
244-246: Clean tabs constructionUsing the spread operator to combine the response tabs with other tabs is a clean approach that supports the conditional addition of the visualization tab.
app/client/src/PluginActionEditor/components/PluginActionResponse/components/Visualization/Visualization.tsx (4)
2-3: Good addition of error handling and type importAdding the ErrorBoundary from Sentry will provide graceful failure handling for visualization rendering issues. The specific type import for VisualizationElements improves type safety.
13-17: Props interface is now more focusedThe props interface has been improved by:
- Using a direct entityId string instead of requiring the full action object
- Making the visualization elements and response optional and more specifically typed
- Supporting both string and structured data responses
This makes the component more reusable and less coupled to specific data structures.
22-28: Simpler props usageThe component now directly uses the specific props needed rather than extracting values from action objects. This simplifies the code and makes the data flow more explicit.
97-106: ErrorBoundary implementation adds robustnessThe visualization rendering is now wrapped in an ErrorBoundary component, which will prevent the entire UI from crashing if there's an issue with the visualization. The fallback message is clear and actionable for users.
Description
Fixes #39684
Automation
/ok-to-test tags="@tag.Sanity"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/13814379506
Commit: 6718758
Cypress dashboard.
Tags:
@tag.SanitySpec:
Wed, 12 Mar 2025 15:32:41 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Refactor