bump: chat-ui and tailwind v4 #509
Conversation
🦋 Changeset detectedLatest commit: 4c67434 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis PR introduces a new changeset file ( Changes
Sequence Diagram(s)(No sequence diagram generated as the changes do not alter the control flow.) Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (45)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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
|
![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)
templates/types/streaming/nextjs/app/globals.css (1)
64-73: Consider leveraging built-in container classes
Tailwind ships with a default.containerutility. This custom rule is fine, but you could reduce complexity by extending Tailwind’s native container in your config.templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx (1)
148-155: Consider updating useMemo dependencies.The
useMemodependency array only includesmessage.annotations. Consider using the entiremessageobject as a dependency to ensure the state is recalculated if other relevant parts of the message change.}, [message.annotations]); + }, [message]);
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
templates/types/streaming/nextjs/app/components/header.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/button.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/card.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx(2 hunks)templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx(2 hunks)templates/types/streaming/nextjs/app/components/ui/input.tsx(1 hunks)templates/types/streaming/nextjs/app/components/ui/select.tsx(2 hunks)templates/types/streaming/nextjs/app/components/ui/tabs.tsx(2 hunks)templates/types/streaming/nextjs/app/components/ui/textarea.tsx(1 hunks)templates/types/streaming/nextjs/app/globals.css(1 hunks)templates/types/streaming/nextjs/package.json(2 hunks)templates/types/streaming/nextjs/postcss.config.js(1 hunks)templates/types/streaming/nextjs/tailwind.config.ts(0 hunks)
💤 Files with no reviewable changes (1)
- templates/types/streaming/nextjs/tailwind.config.ts
✅ Files skipped from review due to trivial changes (4)
- templates/types/streaming/nextjs/app/components/ui/card.tsx
- templates/types/streaming/nextjs/app/components/ui/textarea.tsx
- templates/types/streaming/nextjs/app/components/ui/chat/chat-avatar.tsx
- templates/types/streaming/nextjs/app/components/header.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- templates/types/streaming/nextjs/package.json
- templates/types/streaming/nextjs/app/components/ui/chat/tools/chat-tools.tsx
🧰 Additional context used
📓 Path-based instructions (1)
`templates/**`: For files under the `templates` folder, do n...
templates/**: For files under thetemplatesfolder, do not report 'Missing Dependencies Detected' errors.
templates/types/streaming/nextjs/app/components/ui/button.tsxtemplates/types/streaming/nextjs/app/components/ui/select.tsxtemplates/types/streaming/nextjs/app/components/ui/input.tsxtemplates/types/streaming/nextjs/app/components/ui/tabs.tsxtemplates/types/streaming/nextjs/postcss.config.jstemplates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsxtemplates/types/streaming/nextjs/app/globals.csstemplates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx
⏰ Context from checks skipped due to timeout of 90000ms (45)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, express, --llamacloud)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, express, --example-file)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, express, --no-files)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, nextjs, --llamacloud)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, nextjs, --example-file)
- GitHub Check: typescript (20, 3.11, ubuntu-22.04, nextjs, --no-files)
- GitHub Check: typescript (20, 3.11, windows-latest, express, --llamacloud)
- GitHub Check: typescript (20, 3.11, windows-latest, express, --example-file)
- GitHub Check: typescript (20, 3.11, windows-latest, express, --no-files)
- GitHub Check: typescript (20, 3.11, windows-latest, nextjs, --llamacloud)
- GitHub Check: typescript (20, 3.11, windows-latest, nextjs, --example-file)
- GitHub Check: typescript (20, 3.11, windows-latest, nextjs, --no-files)
- GitHub Check: typescript (20, 3.11, macos-latest, express, --llamacloud)
- GitHub Check: typescript (20, 3.11, macos-latest, express, --example-file)
- GitHub Check: typescript (20, 3.11, macos-latest, express, --no-files)
- GitHub Check: typescript (20, 3.11, macos-latest, nextjs, --llamacloud)
- GitHub Check: typescript (20, 3.11, macos-latest, nextjs, --example-file)
- GitHub Check: typescript (20, 3.11, macos-latest, nextjs, --no-files)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, express, --llamacloud)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, express, --example-file)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, express, --no-files)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, nextjs, --llamacloud)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, nextjs, --example-file)
- GitHub Check: typescript (18, 3.11, ubuntu-22.04, nextjs, --no-files)
- GitHub Check: typescript (18, 3.11, windows-latest, express, --llamacloud)
- GitHub Check: typescript (18, 3.11, windows-latest, express, --example-file)
- GitHub Check: typescript (18, 3.11, windows-latest, express, --no-files)
- GitHub Check: typescript (18, 3.11, windows-latest, nextjs, --llamacloud)
- GitHub Check: python (20, 3.11, ubuntu-22.04, fastapi, --llamacloud)
- GitHub Check: typescript (18, 3.11, windows-latest, nextjs, --example-file)
- GitHub Check: python (20, 3.11, ubuntu-22.04, fastapi, --example-file)
- GitHub Check: typescript (18, 3.11, windows-latest, nextjs, --no-files)
- GitHub Check: python (20, 3.11, ubuntu-22.04, fastapi, --no-files)
- GitHub Check: typescript (18, 3.11, macos-latest, express, --llamacloud)
- GitHub Check: python (20, 3.11, windows-latest, fastapi, --llamacloud)
- GitHub Check: typescript (18, 3.11, macos-latest, express, --example-file)
- GitHub Check: python (20, 3.11, windows-latest, fastapi, --example-file)
- GitHub Check: typescript (18, 3.11, macos-latest, express, --no-files)
- GitHub Check: python (20, 3.11, windows-latest, fastapi, --no-files)
- GitHub Check: typescript (18, 3.11, macos-latest, nextjs, --llamacloud)
- GitHub Check: python (20, 3.11, macos-latest, fastapi, --llamacloud)
- GitHub Check: typescript (18, 3.11, macos-latest, nextjs, --example-file)
- GitHub Check: python (20, 3.11, macos-latest, fastapi, --example-file)
- GitHub Check: typescript (18, 3.11, macos-latest, nextjs, --no-files)
- GitHub Check: python (20, 3.11, macos-latest, fastapi, --no-files)
🔇 Additional comments (16)
templates/types/streaming/nextjs/app/components/ui/input.tsx (1)
14-14:✅ Verification successful
Verify the validity of the
outline-hiddenclass in Tailwind v4.The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenappears to be related to the Tailwind v4 upgrade. Let's verify if this is a valid class name in the new version.
🌐 Web query:
Does Tailwind CSS v4 support the `outline-hidden` class? What are the valid outline utility classes in Tailwind CSS?💡 Result:
Yes, Tailwind CSS v4 introduces
outline-hiddenas a replacement utility class foroutline-nonefrom v3[1][4][7]. Here's how these utilities work in v4:Key changes to outline utilities:
outline-hidden: Replacesoutline-nonebehavior from v3 (visually hides while maintaining accessibility)outline-none: Now completely removes outlines (including from forced colors mode)Valid outline utility classes in Tailwind CSS v4:
outline-hidden /* Replaces v3's outline-none behavior */ outline-none /* Now actually removes all outlines */ outline /* Default 1px solid currentColor */ outline-dashed outline-dotted outline-double outline-{width} (e.g., outline-2) outline-offset-{n} (e.g., outline-offset-2) outline-{color} (e.g., outline-blue-500)Migration example from v3 → v4:
<!-- v3 --> <input class="focus:outline-none"> <!-- v4 --> <input class="focus:outline-hidden">The change ensures proper accessibility support while clarifying intent:
- Use
outline-hiddenwhen you want to hide focus rings visually but keep them accessible- Use
outline-noneonly when completely removing outlines (not recommended for interactive elements)[4][9]Other notable changes affecting outlines:
- Default ring width changed from 3px → 1px (use
ring-3to maintain previous size)[1][4]- Outline transitions now include color changes by default[4]
- Forced colors mode support requires explicit color definitions[9]
Always test interactive elements after upgrading to ensure proper focus visibility for accessibility compliance[7][9].
Citations:
- 1: https://blog.logrocket.com/getting-ready-tailwind-v4/
- 2: https://dev.to/kasenda/whats-new-and-migration-guide-tailwind-css-v40-3kag
- 3: https://tailwind.build/classes
- 4: https://tailwindcss.com/docs/upgrade-guide
- 5: https://www.youtube.com/watch?v=6biMWgD6_JY
- 6: https://tailwindcss.com/docs/hover-focus-and-other-states
- 7: https://forum.devtalk.com/t/agile-web-development-with-rails-8-tailwind-4-minor-breaking-changes-whole-book-beta-3/186378
- 8: https://tailwindcss.com/docs/styling-with-utility-classes
- 9: `outline-style: auto` support tailwindlabs/tailwindcss#10321
- 10: https://www.codecademy.com/article/what-are-the-utility-classes-in-tailwind-css
Tailwind v4 Outline Utility Validated
The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenis correct according to Tailwind CSS v4 migration guidelines. In v4,outline-hiddenreplaces the previousoutline-nonebehavior, ensuring that the element maintains accessibility while visually hiding the outline.No further changes are required in this snippet.
templates/types/streaming/nextjs/app/components/ui/button.tsx (1)
8-8: Consistent change with input component.The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenmatches the similar change in the input component, maintaining consistency across UI components.templates/types/streaming/nextjs/postcss.config.js (1)
3-3:✅ Verification successful
Verify PostCSS configuration for Tailwind v4.
The change consolidates the plugins under
@tailwindcss/postcss. Let's verify if this is the correct configuration for Tailwind v4.
🌐 Web query:
What is the correct PostCSS configuration for Tailwind CSS v4? Is @tailwindcss/postcss the recommended plugin?💡 Result:
For Tailwind CSS v4, @tailwindcss/postcss is indeed the recommended PostCSS plugin. Here's how to configure it:
Key Changes in Tailwind CSS v4
- Dedicated PostCSS Package: The PostCSS integration moved from
tailwindcssto@tailwindcss/postcss[3][10].- Simpler Configuration: No need for
postcss-importorautoprefixerin most cases[3][9].Step-by-Step Configuration
Install Dependencies:
npm install tailwindcss @tailwindcss/postcss postcssPostCSS Config (
postcss.config.mjs):export default { plugins: { "@tailwindcss/postcss": {}, }, };This replaces the older
tailwindcss: {}syntax used in v3[3][10].Import Tailwind CSS:
Add this to your main CSS file:@import "tailwind";Migration Notes
- Remove
autoprefixerfrom your configuration unless you need it for legacy browser support[3][9].- If migrating from v3:
// Old (v3) - plugins: { tailwindcss: {}, autoprefixer: {} } // New (v4) + plugins: { "@tailwindcss/postcss": {} }Framework-Specific Recommendations
For Vite users, Tailwind now recommends their dedicated Vite plugin instead of PostCSS:
// vite.config.js import tailwind from '@tailwindjs/vite'; export default defineConfig({ plugins: [tailwind()] });This provides better performance and developer experience[3][9].
The official documentation confirms this configuration approach as standard for Next.js, Angular, and other PostCSS-based setups[10].
Citations:
- 1: https://v3.tailwindcss.com/docs/installation/using-postcss
- 2: https://dev.to/zev/how-do-postcss-tailwind-work-part-1-shrinking-the-build-4a0d
- 3: https://tailwindcss.com/docs/upgrade-guide
- 4: https://rsbuild.dev/guide/basic/tailwindcss
- 5: https://egghead.io/lessons/tailwind-set-up-tailwind-and-postcss
- 6: https://rsbuild.dev/guide/basic/tailwindcss-v3
- 7: https://dev.to/manthanank/setting-up-tailwind-css-40-in-angular-v191-a-step-by-step-guide-258m
- 8: https://gist.github.com/xpharsh/929e39f23b2d005c966aa795b6013b02
- 9: https://blog.logrocket.com/getting-ready-tailwind-v4/
- 10: https://tailwindcss.com/docs/installation/using-postcss
Tailwind v4 PostCSS configuration verified.
- The code in
templates/types/streaming/nextjs/postcss.config.jscorrectly uses@tailwindcss/postcssas recommended for Tailwind CSS v4.- The web query confirms that consolidating the configuration under
@tailwindcss/postcssreplaces the older combination oftailwindcssandautoprefixer.No further changes are necessary.
templates/types/streaming/nextjs/app/components/ui/tabs.tsx (2)
31-31: Consistent outline change with other components.The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenmaintains consistency with similar changes in other UI components.The change from
shadowtoshadow-smreduces the shadow depth, making it more subtle.
46-46: Consistent outline change in TabsContent.The change from
focus-visible:outline-nonetofocus-visible:outline-hiddenmaintains consistency with the TabsTrigger component and other UI components.templates/types/streaming/nextjs/app/components/ui/select.tsx (2)
21-21: Confirm validity of 'focus:outline-hidden'
Tailwind v4 does not provide this utility out of the box. If it's a custom utility class, please ensure it's properly configured or documented to avoid confusion.
120-120: Likewise, confirm 'outline-hidden'
Similar to the above, verify that this custom utility is recognized in your Tailwind v4 setup or plugin configuration.templates/types/streaming/nextjs/app/components/ui/chat/chat-message-content.tsx (2)
1-1: Check updated import
Ensure@llamaindex/chat-uiis correctly resolved in your build, especially if switching to a local file reference or different version.
7-17: Static subcomponent composition looks good
Rendering a fixed set of child components is simpler. Nice improvement.templates/types/streaming/nextjs/app/globals.css (5)
1-1: Adopting @import for Tailwind
This approach is compatible with Tailwind v4. No concerns here.
3-3: Verify usage of @source
If this directive is a custom or plugin-specific feature, confirm it's recognized in your current configuration to properly scope styles from '@llamaindex/chat-ui'.
5-5: Check for dark mode conflicts
If you also rely on Tailwind’s built-in dark mode, verify that this custom@custom-variant dark (&:is(.dark *));does not produce overlapping or conflicting rules.
7-62: Robust custom theme
Defining variables via@themeis a flexible approach. Looks well-structured.
75-91: Border color compatibility layer
Good practice for maintaining consistent visuals while upgrading to Tailwind v4. Keep track of elements that rely on the old default.templates/types/streaming/nextjs/app/components/ui/chat/custom/deep-research-card.tsx (2)
3-3: LGTM! Import changes align with the component refactoring.The updated imports correctly reflect the new dependencies needed after removing the
messageprop.
145-147: LGTM! Clean refactoring using the chat hook.The use of
useChatMessagehook improves the component's design by centralizing message access and reducing prop drilling.
Summary by CodeRabbit
chat-uiandtailwindto version 4.DeepResearchCardcomponent by removing external dependencies and simplifying state management.chat-uiand updates totailwindcss.