perf(playground): optimize rendering and bundle imports

[smakosh]

Summary

• Add optimizePackageImports for lucide-react, radix-ui/react-icons, and date-fns to speed up dev server boot (15-70% faster)
• Add content-visibility: auto CSS for deferred off-screen rendering of message lists (10x faster initial render for long conversations)
• Memoize AssistantMessage and UserMessage components to prevent unnecessary re-renders during streaming
• Extract message parts in a single pass instead of multiple filter() calls
• Redesign provider OG image with cleaner, centered layout and inline SVG logo

Test plan

• Verify playground dev server starts faster
• Test chat UI performance with long message threads
• Confirm message rendering and streaming still work correctly
• Check provider OG images render correctly at /providers/[id]

🤖 Generated with Claude Code

Summary by CodeRabbit

• Performance

  • Improved overall application load times and responsiveness
  • Enhanced message rendering performance for smoother interactions during longer conversations

• Style

  • Redesigned provider error page with a minimalist dark theme and improved visual hierarchy
  • Updated layout with centered content presentation and refined typography

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR introduces performance optimizations and UI refinements. It adds Next.js package import optimization configuration, CSS rendering performance rules for message lists, refactors chat message rendering with memoized components, and redesigns the provider OpenGraph image with a simplified, centered layout.

Changes

Cohort / File(s)	Summary
Configuration & Performance Optimization apps/playground/next.config.ts, apps/playground/src/app/globals.css	Added Next.js experimental config with optimizePackageImports for three packages (lucide-react, @radix-ui/react-icons, date-fns); added .message-item CSS rule with content-visibility: auto and contain-intrinsic-size for deferred off-screen rendering in message lists.
Chat UI Refactoring apps/playground/src/components/playground/chat-ui.tsx	Introduced ExtractedParts interface and extractMessageParts() utility for single-pass extraction of text, images, tools, reasoning, and sources. Created memoized AssistantMessage and UserMessage components to replace inline extraction logic, reducing re-renders and consolidating message rendering concerns (reasoning blocks, tool blocks, images, sources, actions).
Provider Card Redesign apps/ui/src/app/providers/[id]/opengraph-image.tsx	Redesigned provider not-found visual with darker background (#000000), horizontal header layout with inline SVG logo, centered provider icon/initial display (160x160 container), and simplified content showing only a models-available badge instead of detailed capability sections.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat(playground): update dependencies and enhance chat UI #948: Overlaps with chat message rendering enhancements and extraction logic in chat-ui.tsx
• feat(playground): add group chat functionality and turbopack support #1078: Modifies the same experimental block in next.config.ts with different optimization settings
• feat(chat): upgraded next and added support for image gen #1005: Adds image-part handling in chat-ui.tsx that interacts with the new message extraction refactor

Suggested reviewers

• steebchen

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes across all modified files: performance optimizations through bundle import optimization, CSS rendering improvements, component memoization, and OG image redesign.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

apps/playground/src/components/playground/chat-ui.tsx (2)

177-217: Consider replacing any types with more specific types.

Per coding guidelines, any should be avoided unless absolutely necessary. The ExtractedParts interface and extractMessageParts function use any[] extensively.

Since message.parts comes from the UIMessage type in the ai library, consider using the library's part types or defining a union type that matches the expected part shapes:

♻️ Suggested improvement

-interface ExtractedParts {
-	textParts: string[];
-	imageParts: any[];
-	toolParts: any[];
-	reasoningContent: string;
-	sourceParts: any[];
-}
-
-function extractMessageParts(parts: any[]): ExtractedParts {
+import type { UIMessage } from "ai";
+
+type MessagePart = UIMessage["parts"][number];
+
+interface ExtractedParts {
+	textParts: string[];
+	imageParts: MessagePart[];
+	toolParts: MessagePart[];
+	reasoningContent: string;
+	sourceParts: MessagePart[];
+}
+
+function extractMessageParts(parts: MessagePart[]): ExtractedParts {

Alternatively, if the ai library types don't expose the specific part types cleanly, you could define explicit interfaces matching the expected shapes for better type safety.

---

219-328: Verify memoization effectiveness and consider using ChatStatus type.

Two observations:

1. Type safety: The status prop is typed as string (line 229), but ChatStatus is already imported on line 78. Using the proper type improves consistency and catches type errors.

2. Memoization during streaming: The status prop changes frequently during streaming (e.g., "submitted" → "streaming" → "ready"). Since status is a direct prop, AssistantMessage will re-render on every status change for all messages, not just the last one. Consider whether isLastMessage && status or a more selective approach could reduce unnecessary re-renders for non-last messages.

♻️ Suggested type fix

 const AssistantMessage = memo(
 	({
 		message,
 		isLastMessage,
 		status,
 		regenerate,
 	}: {
 		message: UIMessage;
 		isLastMessage: boolean;
-		status: string;
+		status: ChatStatus;
 		regenerate: () => void;
 	}) => {

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 583aa65 and 214132b.

📒 Files selected for processing (4)

• apps/playground/next.config.ts
• apps/playground/src/app/globals.css
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Never use any or as any unless absolutely necessary in TypeScript code
For database reads: Use db().query.<table>.findMany() or db().query.<table>.findFirst()

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

**/*.{ts,tsx,js,jsx,json,md}

📄 CodeRabbit inference engine (CLAUDE.md)

Always use tabs for indentation

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js,jsx}: Always use top-level import, never use require or dynamic imports
No unnecessary code comments

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

apps/{ui,playground}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{ui,playground}/**/*.{ts,tsx}: Use cookies for user-settings which are not saved in the database to ensure SSR works
Use Next.js App Router with React Server Components for frontend development

Use cookies for user-settings which are not saved in the database to ensure SSR works

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Always use top-level import, never use require or dynamic imports

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

apps/{ui,playground,docs}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use next/link for links and next/navigation's router for programmatic navigation

Files:

• apps/playground/next.config.ts
• apps/playground/src/components/playground/chat-ui.tsx
• apps/ui/src/app/providers/[id]/opengraph-image.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-03T12:42:14.219Z

Learnt from: CR
Repo: theopenco/llmgateway PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-03T12:42:14.219Z
Learning: Applies to apps/{ui,playground}/**/*.{ts,tsx} : Use Next.js App Router with React Server Components for frontend development

Applied to files:

• apps/playground/next.config.ts

📚 Learning: 2025-12-03T12:42:26.162Z

Learnt from: CR
Repo: theopenco/llmgateway PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T12:42:26.162Z
Learning: Applies to apps/{ui,playground,docs}/**/*.{ts,tsx} : Use `next/link` for links and `next/navigation`'s router for programmatic navigation

Applied to files:

• apps/playground/next.config.ts

🧬 Code graph analysis (1)

apps/ui/src/app/providers/[id]/opengraph-image.tsx (1)

packages/db/src/schema.ts (1)

• provider (638-670)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: autofix
• GitHub Check: generate / run
• GitHub Check: build / run
• GitHub Check: lint / run
• GitHub Check: test / run

🔇 Additional comments (10)

apps/ui/src/app/providers/[id]/opengraph-image.tsx (6)

27-50: LGTM!

The fallback "Provider Not Found" image is cleanly implemented with consistent dark theming.

---

78-119: LGTM!

The inline SVG approach is the correct pattern for Next.js ImageResponse since external image imports aren't well-supported in this context. The header layout is clean and properly structured.

---

121-158: LGTM!

The centered provider icon with fallback to the first letter initial is well-implemented. The conditional rendering handles both cases cleanly.

---

160-215: LGTM!

The simplified layout with provider name and model count badge is cleaner than the previous version with streaming/cancellation indicators. The pluralization logic handles edge cases correctly.

---

217-230: LGTM!

The footer provides clear attribution with the provider ID and website URL in a clean layout.

---

235-259: LGTM!

The error fallback gracefully handles failures and maintains consistent dark theming.

apps/playground/next.config.ts (1)

13-21: LGTM! Good performance optimization for dev server.

The optimizePackageImports configuration is appropriate for these barrel-heavy packages. This should help reduce dev server cold-start times.

Note: The comment on lines 13-14 provides useful context, though coding guidelines suggest avoiding unnecessary code comments. Consider whether this documentation belongs in a PR description or commit message instead.

apps/playground/src/app/globals.css (1)

127-135: Good use of content-visibility for rendering optimization.

The content-visibility: auto property with contain-intrinsic-size is an effective technique for improving initial render performance of long lists. The 120px height estimate is reasonable for typical message items.

Note that this relies on modern browser support (Chrome 85+, Edge 85+, Firefox 125+). Older browsers will gracefully ignore the property without breaking functionality.

apps/playground/src/components/playground/chat-ui.tsx (2)

330-378: LGTM with same type note as AssistantMessage.

The UserMessage component follows the same memoization pattern. The same recommendation applies: use ChatStatus instead of string for the status prop type (line 339).

---

553-573: LGTM! Clean integration of memoized components.

The refactored message rendering correctly delegates to the new memoized components with appropriate props. Using m.id as the key is correct for stable list rendering.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}