chore: Enable telegram support channel, add join link button #7472
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThis update modifies the team settings UI to enhance the dedicated support channel card. It enables Telegram as a selectable platform, updates the dropdown placeholder, and adds a "Join channel" button with an external link if available. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamSettingsUI
participant API
User->>TeamSettingsUI: View Team Settings
TeamSettingsUI->>API: Fetch Team Data
API-->>TeamSettingsUI: Return TeamResponse (with dedicatedSupportChannel.link)
TeamSettingsUI->>User: Display support channel card
alt dedicatedSupportChannel.link exists
User->>TeamSettingsUI: Click "Join channel"
TeamSettingsUI->>User: Open link in new tab
end
Possibly related PRs
✨ 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 (
|
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. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7472 +/- ##
=======================================
Coverage 51.92% 51.92%
=======================================
Files 949 949
Lines 64149 64149
Branches 4228 4228
=======================================
Hits 33312 33312
Misses 30731 30731
Partials 106 106
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx(5 hunks)packages/service-utils/src/core/api.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
List of files the instruction was applied to:
packages/service-utils/src/core/api.tsapps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx
🧠 Learnings (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx (9)
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:27:16.172Z
Learning: Next.js Link component supports external URLs without throwing errors. When used with absolute URLs (like https://...), it behaves like a regular anchor tag without client-side routing, but does not cause runtime crashes or errors as previously believed.
Learnt from: jnsdls
PR: thirdweb-dev/js#7365
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx:16-17
Timestamp: 2025-06-18T04:30:04.326Z
Learning: Next.js Link component fully supports both internal and external URLs and works appropriately with all standard anchor attributes including target="_blank", rel="noopener noreferrer", etc. Using Link for external URLs is completely appropriate and recommended.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use React Query ('@tanstack/react-query') for all client-side data fetching to leverage caching and query management.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wrap client-side data fetching calls in React Query and use descriptive, stable queryKeys for cache hits.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use NavLink for internal navigation to automatically handle active states.
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
packages/service-utils/src/core/api.ts (1)
153-153: LGTM!The addition of the optional
linkproperty to thededicatedSupportChannelobject is correctly typed and follows the existing pattern for nullable string fields.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx (5)
3-4: LGTM!The imports are correctly added to support the new external link functionality.
21-21: LGTM!Removing "Coming Soon" from the Telegram option correctly reflects its current availability.
62-62: LGTM!The
channelLinkextraction correctly accesses the new optionallinkproperty with proper null-safe chaining.
167-167: LGTM!The placeholder text "Select platform" is more user-friendly and accurate than the previous "Select Channel Type".
171-171: LGTM!Adding the
keyprop toSelectItemfollows React best practices for list rendering.
| <div className="space-y-3"> | ||
| <div className="rounded-lg border bg-muted/50 p-4"> | ||
| <div className="flex items-center justify-between"> | ||
| <div> | ||
| <p className="font-bold">{channelName}</p> | ||
| <p className="text-muted-foreground text-sm"> | ||
| {CHANNEL_TYPES[channelType]} channel | ||
| </p> | ||
| </div> | ||
| {channelLink && ( | ||
| <Link | ||
| className="inline-flex items-center gap-2 rounded-md border border-input px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors" | ||
| href={channelLink} | ||
| target="_blank" | ||
| > | ||
| Join channel | ||
| <ExternalLinkIcon className="size-4" /> | ||
| </Link> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security attributes to external link.
The UI restructuring looks great with proper styling and conditional rendering. However, the external link should include security attributes for safety.
Apply this diff to add security attributes:
{channelLink && (
<Link
className="inline-flex items-center gap-2 rounded-md border border-input px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
href={channelLink}
target="_blank"
+ rel="noopener noreferrer"
>
Join channel
<ExternalLinkIcon className="size-4" />
</Link>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="space-y-3"> | |
| <div className="rounded-lg border bg-muted/50 p-4"> | |
| <div className="flex items-center justify-between"> | |
| <div> | |
| <p className="font-bold">{channelName}</p> | |
| <p className="text-muted-foreground text-sm"> | |
| {CHANNEL_TYPES[channelType]} channel | |
| </p> | |
| </div> | |
| {channelLink && ( | |
| <Link | |
| className="inline-flex items-center gap-2 rounded-md border border-input px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors" | |
| href={channelLink} | |
| target="_blank" | |
| > | |
| Join channel | |
| <ExternalLinkIcon className="size-4" /> | |
| </Link> | |
| )} | |
| </div> | |
| </div> | |
| </div> | |
| <div className="space-y-3"> | |
| <div className="rounded-lg border bg-muted/50 p-4"> | |
| <div className="flex items-center justify-between"> | |
| <div> | |
| <p className="font-bold">{channelName}</p> | |
| <p className="text-muted-foreground text-sm"> | |
| {CHANNEL_TYPES[channelType]} channel | |
| </p> | |
| </div> | |
| {channelLink && ( | |
| <Link | |
| className="inline-flex items-center gap-2 rounded-md border border-input px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors" | |
| href={channelLink} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| Join channel | |
| <ExternalLinkIcon className="size-4" /> | |
| </Link> | |
| )} | |
| </div> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx
around lines 79 to 100, the external link rendered with the Link component lacks
security attributes. To fix this, add rel="noopener noreferrer" to the Link
component that has target="_blank" to prevent security vulnerabilities related
to opening external links in a new tab.
size-limit report 📦
|
[Dashboard] Feature: Enable Telegram Support for Dedicated Support Channels
Screenshot after TG is added.
Notes for the reviewer
This PR enables Telegram as a fully supported channel type for dedicated support, removing the "Coming Soon" label. It also enhances the UI for displaying existing support channels by adding a "Join channel" button that links directly to the channel when available.
How to test
AI/ML Systems
Summary by CodeRabbit
New Features
User Interface