feat(chat): improve shared chats opengraph image

[amelitoalcuitas]

Summary by CodeRabbit

• New Features

  • Share previews now display extracted images from conversations.
  • Enhanced preview layouts with improved visual components for image and text content.

• Bug Fixes

  • Fixed share dialog appearing when comparing chats.

[coderabbitai]

Walkthrough

The PR adds OpenGraph image preview support to the share endpoint by extracting image URLs from message data and refactoring the OG rendering into reusable text and image layout components. It also suppresses the share dialog in the chat header during comparison mode.

Changes

OpenGraph image preview rendering

Layer / File(s)	Summary
Image data model and extraction logic apps/playground/src/app/share/[shareId]/opengraph-image.tsx	StoredImagePart and SharePreview types model the image data and OG preview. Runtime JSON parsing extracts the first valid image URL from messages[*].images, prioritizing assistant-role images, then falling back to all messages. getPreview(...) derives clipped title, prompt, response, model, and imageUrl with text clipping adjusted by image presence.
Reusable preview components apps/playground/src/app/share/[shareId]/opengraph-image.tsx	BrandHeader, ModelBadge, and Footer are extracted as standalone reusable components. TextPreview renders prompt and optional response. ImagePreview renders the same content as an overlay on a background image with gradient and ornament elements.
ShareOgImage orchestration apps/playground/src/app/share/[shareId]/opengraph-image.tsx	Fetches share data, builds preview via getPreview, and selects between ImagePreview or TextPreview based on whether preview.imageUrl exists. Existing error fallback behavior is preserved.

ChatHeader comparison mode UI

Layer / File(s)	Summary
Share dialog visibility during comparison apps/playground/src/components/playground/chat-header.tsx	ShareChatDialog is now hidden when comparisonEnabled is true, in addition to existing checks for temporary chat and missing chat ID.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• theopenco/llmgateway#2388: Both PRs modify chat-header.tsx to hide UI elements based on comparison mode state.
• theopenco/llmgateway#2240: Affects when the ShareChatDialog component (updated in PR #2240) is rendered by controlling its visibility during comparison mode.

Suggested reviewers

• smakosh

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving the OpenGraph image for shared chats by adding image preview support and refactoring the rendering logic.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/playground/src/app/share/[shareId]/opengraph-image.tsx (1)

424-424: 💤 Low value

Consider using non-null assertion for type clarity.

Since ImagePreview only renders when preview.imageUrl is truthy (Line 501), the nullish coalescing to empty string is defensive but creates an impossible state where src="". Consider using preview.imageUrl! or asserting non-null in the component signature for better type safety.

♻️ Clearer type expression

-function ImagePreview({ preview }: { preview: SharePreview }) {
+function ImagePreview({ preview }: { preview: SharePreview & { imageUrl: string } }) {
	return (
		<div
			style={{
...
-				src={preview.imageUrl ?? ""}
+				src={preview.imageUrl}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/playground/src/app/share/`[shareId]/opengraph-image.tsx at line 424,
Replace the defensive nullish-coalescing src assignment with a non-null
assertion to reflect that ImagePreview only renders when preview.imageUrl is
truthy: locate the ImagePreview rendering and change the src prop usage from
preview.imageUrl ?? "" to using preview.imageUrl! (or update the ImagePreview
prop type to require a non-null imageUrl) so the component type reflects the
guaranteed presence of the URL and avoids an impossible src="" state.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/playground/src/app/share/`[shareId]/opengraph-image.tsx:
- Line 424: Replace the defensive nullish-coalescing src assignment with a
non-null assertion to reflect that ImagePreview only renders when
preview.imageUrl is truthy: locate the ImagePreview rendering and change the src
prop usage from preview.imageUrl ?? "" to using preview.imageUrl! (or update the
ImagePreview prop type to require a non-null imageUrl) so the component type
reflects the guaranteed presence of the URL and avoids an impossible src=""
state.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1fa8cc15-77cb-46b2-936a-96881f15c826

📥 Commits

Reviewing files that changed from the base of the PR and between 0e3b6d4 and c01a284.

📒 Files selected for processing (2)

• apps/playground/src/app/share/[shareId]/opengraph-image.tsx
• apps/playground/src/components/playground/chat-header.tsx