siwa updates and new article #7197
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughThis update introduces a new feedback feature for the AI chat in the portal, allowing users to rate assistant responses with thumbs up or down. The chat API payloads in both dashboard and portal apps now include a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PortalUI
participant ChatAPI
User->>PortalUI: Clicks "Ask AI" button
PortalUI->>PortalUI: Navigate to /chat
User->>PortalUI: Sends chat message
PortalUI->>ChatAPI: POST /v1/chat { message, sessionId, source: "portal" }
ChatAPI-->>PortalUI: Returns assistant response and conversationId
PortalUI-->>User: Displays assistant response
User->>PortalUI: Clicks thumbs up/down on assistant message
PortalUI->>ChatAPI: POST /v1/chat/feedback { conversationId, feedbackRating }
ChatAPI-->>PortalUI: Acknowledges feedback
PortalUI-->>User: Updates message feedback UI
Possibly related PRs
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
Dashboard
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7197 +/- ##
=======================================
Coverage 55.62% 55.62%
=======================================
Files 908 908
Lines 58570 58570
Branches 4133 4133
=======================================
Hits 32577 32577
Misses 25886 25886
Partials 107 107
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![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 (3)
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx (1)
5-5: Consider using "number of tokens" for better grammar.The phrase "amount of tokens" should be "number of tokens" since tokens are countable items. This improves the grammatical correctness of the documentation.
-The "ERC20: transfer amount exceeds allowance" error occurs when trying to transfer ERC20 tokens beyond the allowed limit set by the token owner. ERC20 tokens use an allowance system that grants specific addresses permission to transfer a certain amount of tokens on behalf of the owner. +The "ERC20: transfer amount exceeds allowance" error occurs when trying to transfer ERC20 tokens beyond the allowed limit set by the token owner. ERC20 tokens use an allowance system that grants specific addresses permission to transfer a certain number of tokens on behalf of the owner.🧰 Tools
🪛 LanguageTool
[uncategorized] ~5-~5: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...resses permission to transfer a certain amount of tokens on behalf of the owner. ## H...(AMOUNTOF_TO_NUMBEROF)
apps/portal/src/components/AI/chat.tsx (2)
162-175: Fix unused variable in catch block.The feedback function is well-implemented, but the unused variable in the catch block should be prefixed with an underscore to indicate it's intentionally unused.
- } catch (e) { + } catch (_e) { // Optionally handle error }🧰 Tools
🪛 Biome (1.9.4)
[error] 172-172: This variable is unused.
Unused variables usually are result of incomplete refactoring, typos and other source of bugs.
Unsafe fix: If this is intentional, prepend e with an underscore.(lint/correctness/noUnusedVariables)
213-234: Fix accessibility and code quality issues in feedback UI.The feedback UI implementation is good, but needs some improvements for accessibility and code consistency.
{!message.feedback && ( <> <button + type="button" aria-label="Thumbs up" - className="hover:text-green-500 transition-colors text-muted-foreground" + className="text-muted-foreground transition-colors hover:text-green-500" onClick={() => handleFeedback(message.id, 1)} > <ThumbsUpIcon className="size-5" /> </button> <button + type="button" aria-label="Thumbs down" - className="hover:text-red-500 transition-colors text-muted-foreground" + className="text-muted-foreground transition-colors hover:text-red-500" onClick={() => handleFeedback(message.id, -1)} > <ThumbsDownIcon className="size-5" /> </button> </> )} - <div className="flex gap-2 mt-2"> + <div className="mt-2 flex gap-2">Changes:
- Added
type="button"to prevent form submission- Sorted CSS classes for consistency
- Fixed CSS class order in the container div
🧰 Tools
🪛 Biome (1.9.4)
[error] 214-214: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 219-219: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 226-226: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 217-221: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 224-228: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/portal/src/icons/siwa-icon.pngis excluded by!**/*.png
📒 Files selected for processing (6)
apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx(1 hunks)apps/portal/src/app/knowledge-base/sidebar.tsx(1 hunks)apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx(1 hunks)apps/portal/src/app/page.tsx(3 hunks)apps/portal/src/components/AI/api.ts(2 hunks)apps/portal/src/components/AI/chat.tsx(6 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/portal/src/components/AI/chat.tsx (1)
apps/portal/src/components/AI/api.ts (1)
sendFeedback(46-74)
🪛 LanguageTool
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx
[uncategorized] ~5-~5: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...resses permission to transfer a certain amount of tokens on behalf of the owner. ## H...
(AMOUNTOF_TO_NUMBEROF)
[grammar] ~10-~10: The word ‘approve’ is not a noun. Did you mean “approval”?
Context: ...oo low, the token owner should call the approve function to increase it. 3. Transfer to...
(PREPOSITION_VERB)
🪛 Biome (1.9.4)
apps/portal/src/components/AI/chat.tsx
[error] 172-172: This variable is unused.
Unused variables usually are result of incomplete refactoring, typos and other source of bugs.
Unsafe fix: If this is intentional, prepend e with an underscore.
(lint/correctness/noUnusedVariables)
[error] 214-214: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 219-219: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 226-226: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
[error] 217-221: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 224-228: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Size
🔇 Additional comments (10)
apps/portal/src/components/AI/api.ts (2)
14-14: LGTM: Source identifier added for analytics/tracking.The addition of the
source: "portal"field helps identify the origin of chat requests, which aligns with the similar change in the dashboard app.
46-74: Well-implemented feedback function with proper error handling.The
sendFeedbackfunction is well-structured with:
- Clear TypeScript typing using union type for
feedbackRating: 1 | -1- Consistent HTTP request pattern matching
getChatResponse- Proper error handling with try-catch and logging
- Boolean return type for success/failure indication
The implementation follows good practices and maintains consistency with the existing codebase.
apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx (1)
105-105: LGTM: Source identifier added for request tracking.The addition of
source: "dashboard-support"provides proper request origin identification, consistent with the portal implementation. This change enhances analytics and debugging capabilities.apps/portal/src/app/page.tsx (2)
18-19: LGTM: Proper imports for new UI components.The imports for
ButtonandMessageCircleIconare correctly added to support the new AI assistant entry point.
46-51: Excellent UX enhancement with proper accessibility.The AI assistant button provides:
- Clear visual hierarchy with icon and descriptive text
- Proper navigation using Next.js Link component
- Good accessibility with meaningful button text
- Consistent styling using the Button component
This creates an intuitive entry point for users to access the AI chat functionality.
apps/portal/src/app/knowledge-base/sidebar.tsx (1)
73-76: LGTM: Well-structured knowledge base entry addition.The new sidebar entry for "Transfer Amount Exceeds Allowance" follows the established pattern with:
- Descriptive title that clearly indicates the content
- Proper href structure pointing to the troubleshooting documentation
- Consistent formatting with other contract-related entries
This enhancement improves the discoverability of ERC20 troubleshooting resources.
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx (1)
1-15: Well-structured and technically accurate documentation.The documentation clearly explains the ERC20 allowance error and provides a logical three-step resolution process. The technical terminology is correct and the content will be helpful for users troubleshooting this common issue.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~5-~5: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...resses permission to transfer a certain amount of tokens on behalf of the owner. ## H...(AMOUNTOF_TO_NUMBEROF)
[grammar] ~10-~10: The word ‘approve’ is not a noun. Did you mean “approval”?
Context: ...oo low, the token owner should call the approve function to increase it. 3. Transfer to...(PREPOSITION_VERB)
apps/portal/src/components/AI/chat.tsx (3)
8-8: Good import additions for the feedback feature.The new imports properly support the feedback functionality with thumbs up/down icons and the SIWA branding update.
Also applies to: 18-19
26-26: Well-designed feedback field addition.The optional feedback field with explicit numeric values (1 | -1) provides clear typing and aligns with the API expectations.
136-147: Improved scroll behavior with proper cleanup.The delayed scroll with timeout provides smoother UX, and the cleanup function properly prevents memory leaks. The "end" block positioning is more appropriate for chat messages.
🧰 Tools
🪛 Biome (1.9.4)
[error] 136-136: This hook specifies more dependencies than necessary: messages
This dependency can be removed from the list.
(lint/correctness/useExhaustiveDependencies)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/portal/src/components/AI/chat.tsx (1)
162-175: Consider improving error handling for feedback submission.The feedback functionality is well implemented with proper state updates. However, silently catching all errors might make debugging harder in production.
Consider adding optional error logging or user notification:
} catch (_e) { - // Optionally handle error + console.error("Failed to send feedback:", _e); + // Optionally show user notification that feedback failed }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/portal/src/app/knowledge-base/sidebar.tsx(1 hunks)apps/portal/src/app/page.tsx(2 hunks)apps/portal/src/components/AI/api.ts(2 hunks)apps/portal/src/components/AI/chat.tsx(6 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/knowledge-base/sidebar.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/portal/src/app/page.tsx
- apps/portal/src/components/AI/api.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/portal/src/components/AI/chat.tsx (1)
apps/portal/src/components/AI/api.ts (1)
sendFeedback(46-72)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/portal/src/components/AI/chat.tsx (6)
7-7: LGTM: Icon import added.The import of the custom SIWA icon is properly implemented.
9-9: LGTM: Feedback icon imports added.The ThumbsUp and ThumbsDown icons are correctly imported for the feedback functionality.
19-19: LGTM: Feedback API import added.The
sendFeedbackfunction is correctly imported from the API module.
26-26: LGTM: Message interface extended for feedback.The optional
feedbackproperty correctly supports the rating values (1 for positive, -1 for negative).
41-41: LGTM: Icon replacement implemented correctly.The change from
BotIconto the custom SIWA icon with proper img element and styling is well implemented.
207-237: LGTM: Feedback UI implementation is excellent.The feedback button implementation is well thought out:
- Only shows for assistant messages that aren't loading
- Hides buttons after feedback is given
- Proper accessibility labels
- Good hover states with color transitions
- Clean conditional rendering logic
Merge activity
You must have a Graphite account in order to use the merge queue. Create an account and try again using this link
|
graphite-app
bot
removed
the
merge-queue
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the chat functionality within the application by adding a feedback system, updating icons, and improving the knowledge base content related to ERC20 token transfers.
### Detailed summary
- Added a new knowledge base entry for "Transfer Amount Exceeds Allowance".
- Updated `Header` and `Hero` components to replace `BotIcon` with `MessageCircleIcon`.
- Introduced `sendFeedback` function to handle user feedback on chat messages.
- Modified `Chat` component to include feedback buttons (thumbs up/down) for messages.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced feedback buttons (thumbs up/down) for assistant messages in the AI chat, allowing users to rate responses.
- Added a new "Ask AI" button on the main page, providing quick access to the chat assistant.
- Added a new knowledge base article explaining the "ERC20: transfer amount exceeds allowance" error and its resolution.
- **Improvements**
- Enhanced chat message payloads with source identifiers for better context.
- Updated sidebar navigation with a new troubleshooting entry for ERC20 transfer allowance issues.
- Updated chat and header icons to use a consistent message circle icon for AI-related features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
yash/siwa-updates
branch
from
d9abfcb to
0639d0d
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx (3)
3-6: Clarify the allowance mechanism descriptionConsider rephrasing for clarity and consistency. For example:
“ERC20 tokens use an allowance system that grants an address permission to transfer up to a specified number of tokens on behalf of the owner.”This refines “certain amount” to “up to a specified number,” aligning with common ERC20 terminology.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~5-~5: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...resses permission to transfer a certain amount of tokens on behalf of the owner. ## H...(AMOUNTOF_TO_NUMBEROF)
7-12: Enhance the fix steps with links or code examplesThe resolution steps are well-structured. You may want to add direct links or inline code examples for:
- Navigating to the allowance section in the thirdweb Dashboard.
- Calling the
approvefunction (e.g., via web3 or ethers.js).- Using
transferFromortransferwith a snippet.This will help users follow the steps more easily.
🧰 Tools
🪛 LanguageTool
[grammar] ~10-~10: The word ‘approve’ is not a noun. Did you mean “approval”?
Context: ...oo low, the token owner should call the approve function to increase it. 3. Transfer to...(PREPOSITION_VERB)
13-14: Emphasize the concluding guidanceThe statement “Ensure the allowance covers the transfer amount before initiating.” is clear. Optionally, you can emphasize this with bold text or an alert callout to draw attention.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/portal/src/icons/siwa-icon.pngis excluded by!**/*.png
📒 Files selected for processing (7)
apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx(1 hunks)apps/portal/src/app/Header.tsx(3 hunks)apps/portal/src/app/knowledge-base/sidebar.tsx(1 hunks)apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx(1 hunks)apps/portal/src/app/page.tsx(2 hunks)apps/portal/src/components/AI/api.ts(2 hunks)apps/portal/src/components/AI/chat.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
- apps/portal/src/app/Header.tsx
- apps/portal/src/app/page.tsx
- apps/portal/src/app/knowledge-base/sidebar.tsx
- apps/portal/src/components/AI/chat.tsx
- apps/portal/src/components/AI/api.ts
🧰 Additional context used
🪛 LanguageTool
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx
[uncategorized] ~5-~5: ‘Amount of’ should usually only be used with uncountable or mass nouns. Consider using “number” if this is not the case.
Context: ...resses permission to transfer a certain amount of tokens on behalf of the owner. ## H...
(AMOUNTOF_TO_NUMBEROF)
[grammar] ~10-~10: The word ‘approve’ is not a noun. Did you mean “approval”?
Context: ...oo low, the token owner should call the approve function to increase it. 3. Transfer to...
(PREPOSITION_VERB)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx (2)
1-2: Title is clear and conciseThe page title accurately reflects the error and follows the existing naming conventions in the knowledge base. Great job!
15-15: Support link is appropriateThe support link is formatted correctly and directs users to the right resource. No changes needed here.
graphite-app
bot
removed
the
merge-queue
PR-Codex overview
This PR focuses on enhancing the chat functionality and knowledge base in the application. It introduces new features for sending feedback on chat messages and adds a new troubleshooting section for ERC20 token transfers.
Detailed summary
/chatpage inpage.tsx.BotIconwithMessageCircleIconinHeader.tsx.sendFeedbackfunction inapi.tsfor chat feedback.chat.tsx.erc20-transfer-allowance/page.mdx.Summary by CodeRabbit