feat(wren-ui): Add Question-SQL Pairs guide#1387
Conversation
WalkthroughThe changes introduce two new interactive guides for creating and saving Question-SQL pairs in the learning module. New guide functions are added with asynchronous behavior and dynamic DOM observation. A styled icon component is introduced to enhance visual elements. The router-based control flow for playing guides is refactored using a mapping object. Additionally, new enum entries are defined for guide types, and several UI components are updated with data attributes for guide identification. A new route for thread handling is also added to the path enum. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant Controller as Learning Guide Controller
participant Guide as Guide Function
participant Driver
participant UI
User->>Router: Navigate to a new route
Router->>Controller: Notify route change
Controller->>Guide: Look up and trigger guide function based on path
Guide->>Driver: Verify driver initialization and state
Guide->>UI: Render popover with guide instructions
UI-->>User: Display dynamic guide elements (managed by observers)
Suggested labels
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ 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
CodeRabbit Configuration File (
|
fredalai
force-pushed
the
feature/sql-pairs-ui
branch
2 times, most recently
from
cac40e2 to
0bffbcc
Compare
fredalai
force-pushed
the
feature/sql-pairs-guide
branch
from
e8fbd30 to
37acd9b
Compare
fredalai
force-pushed
the
feature/sql-pairs-guide
branch
from
37acd9b to
e01f2b7
Compare
fredalai
force-pushed
the
feature/sql-pairs-guide
branch
from
e01f2b7 to
dd305db
Compare
![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 (2)
wren-ui/src/components/learning/guide/stories.tsx (2)
367-416:playQuestionSQLPairsGuideflow is straightforward and helpful.Your approach to presenting an overview popover with relevant images and instructions looks good.
However, at lines 410-411, consider optional chains for more concise code:- dispatcher?.onDone && dispatcher.onDone(); + dispatcher?.onDone?.();🧰 Tools
🪛 Biome (1.9.4)
[error] 410-411: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
418-536:playSaveToKnowledgeGuideeffectively uses observers to handle dynamic DOM.This advanced setup to wait for elements in the viewport is well-crafted.
At lines 466-467, likewise, you could switch to an optional chain:- dispatcher?.onDone && dispatcher.onDone(); + dispatcher?.onDone?.();🧰 Tools
🪛 Biome (1.9.4)
[error] 466-467: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
wren-ui/public/images/learning/question-sql-pairs.pngis excluded by!**/*.png
📒 Files selected for processing (7)
wren-ui/src/components/learning/guide/stories.tsx(4 hunks)wren-ui/src/components/learning/guide/utils.ts(1 hunks)wren-ui/src/components/learning/index.tsx(2 hunks)wren-ui/src/components/pages/home/promptThread/AnswerResult.tsx(1 hunks)wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx(1 hunks)wren-ui/src/components/pages/home/promptThread/index.tsx(1 hunks)wren-ui/src/utils/enum/path.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
wren-ui/src/components/learning/guide/stories.tsx
[error] 410-411: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 466-467: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (go)
🔇 Additional comments (10)
wren-ui/src/components/pages/home/promptThread/AnswerResult.tsx (1)
276-276: Excellent addition of data-guideid attribute for interactive guide integrationThe
data-guideid="save-to-knowledge"attribute has been added to the "Save to Knowledge" button, providing a targeted anchor point for the new Question-SQL Pairs guide functionality. This allows the guide system to specifically identify and highlight this button when instructing users how to save question-SQL pairs.wren-ui/src/utils/enum/path.ts (1)
4-4: New path enum entry for thread routesThe addition of
Thread = '/home/[id]'to the Path enum properly extends the application's routing system to handle dynamic thread paths. This change supports the new Question-SQL Pairs guide by enabling navigation to specific thread instances.wren-ui/src/components/pages/home/promptThread/TextBasedAnswer.tsx (1)
180-183: Appropriate data-guideid for preview data elementAdding the
data-guideid="text-answer-preview-data"attribute to this div enables the guide system to reference and highlight the preview data section when explaining how to interpret query results in the Question-SQL Pairs guide.wren-ui/src/components/pages/home/promptThread/index.tsx (1)
101-104: Smart conditional guideid implementation for last answer resultThe conditional
data-guideidattribute that only applies to the last answer in a thread (isLastThreadResponse ? "last-answer-result" : undefined) is a clever approach. This allows the guide to specifically target the most recent answer when demonstrating the Question-SQL Pairs functionality, while ignoring previous answers in the thread.wren-ui/src/components/learning/guide/utils.ts (1)
25-29: Enum extension looks good.Adding these enumerations under the new "// knowledge" section cleanly organizes the guide types. No issues found.
wren-ui/src/components/learning/index.tsx (2)
265-317: Router-based guide playback is well-structured.Using an object to map paths to async functions keeps the code clean and extensible. Consider verifying any partial route matches if sub-routes need to support these guides in the future.
Also applies to: 319-319
335-360: Good job enhancing the Learning UI section.The collapsing UI pattern for the learning sidebar is readable and helps users see their learning progress. The approach is straightforward and consistent with the rest of the code.
wren-ui/src/components/learning/guide/stories.tsx (3)
5-7: Imports align well with new components.Bringing in both
styled-componentsandRobotSVGfreshens up the guide's visuals effectively.
24-26: Use ofnextTickis appropriate.Delaying guide playback helps ensure UI elements render before steps begin, preventing errors.
53-57: New case forQUESTION_SQL_PAIRS_GUIDEis correct.This aligns with the newly added enum value and ties in cleanly with the
makeStoriesPlayer()architecture.
2 participants
Description
UI screenshots/video
2025-03-12.11.59.46.mov
2025-03-12.12.01.12.mov
Manage Question-SQL Pairs
Save to Knowledge
Summary by CodeRabbit
New Features
Refactor