fix: infinite scroll and link dialog issues

[ankushchhabradelta4infotech-ai]

Description

Fixes infinite scroll issue during agent thinking state and link dialog styling inconsistencies between user and AI messages.

Changes

• Fixed infinite scroll beyond messages during loading state by simplifying ChatContainerRoot className handling to use min-h-0 constraint
• Fixed link dialog text colors (title, subtitle, URL, copy button) using absolute RGB values to prevent CSS variable inheritance issues
• Fixed link visibility in messages by adding blue colors for both <a> tags and Streamdown link buttons
• Fixed message container wrapping by adding min-w-0 to user message wrapper and max-w-full to message content

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Refactoring (no functional changes)

Testing

• I've tested this locally
• I've added/updated tests
• All existing tests pass

Tested scenarios:

1. ✅ Link dialog from user messages (light & dark mode) - all text clearly visible
2. ✅ Link dialog from AI messages (light & dark mode) - consistent styling
3. ✅ Link visibility in message content - blue and underlined in both user/AI messages
4. ✅ Long URL wrapping - no overflow issues
5. ✅ Infinite scroll during loading - fixed, no phantom scrollable space
6. ✅ Auto-scroll functionality - working correctly

Checklist

• My code follows the project's style guidelines
• I've updated the documentation (if needed)
• I've added tests that prove my fix/feature works
• New and existing tests pass locally

Screenshots (if applicable)

[vercel]

@ankushchhabradelta4infotech-ai is attempting to deploy a commit to the Delta4 Infotech Team on Vercel.

A member of the Team first needs to authorize it.

[ankushchhabradelta4infotech-ai]

i was getting same issues in customgpt while using copilot packages

[Sahil5963]

Code Review - @ankushchhabradelta4infotech-ai

Thanks for fixing these UI issues! The infinite scroll and link visibility problems are real pain points. A few concerns to consider:

---

🟡 Potential Breaking Change - CSS Classes Removed

chat-container.tsx:50 changed from:

className={cn("flex overflow-y-auto", className)}

to:

className={cn("min-h-0", className)}

Removing flex and overflow-y-auto from ChatContainerRoot could break layouts that depend on these classes being present. Users who have customized their chat container styling may experience unexpected layout changes.

Recommendation: Test with various integration scenarios to ensure this doesn't break existing implementations.

---

🟡 Hardcoded Colors May Break Theming

message.tsx:96-98 uses hardcoded Tailwind colors with !important:

"[&_a]:!text-blue-600 dark:[&_a]:!text-blue-400"
"[&_button[data-streamdown='link']]:!text-blue-600 dark:[&_button[data-streamdown='link']]:!text-blue-400"

Issues:

1. Using !important (via Tailwind's ! prefix) makes future styling changes difficult
2. Hardcoded blue colors override any custom theme colors users may have set
3. Users with brand colors other than blue can't customize link appearance

Recommendation: Consider using CSS custom properties like var(--csdk-link-color, #2563eb) to allow theming while providing sensible defaults.

---

🟡 Fragile CSS Selectors for Streamdown

base.css has very specific selectors:

[data-streamdown="link-safety-modal"] > div .font-semibold,
[data-streamdown="link-safety-modal"] > div .font-mono,
[data-streamdown="link-safety-modal"] > div button.bg-background {
  color: hsl(var(--foreground));
}

These selectors depend on Streamdown's internal DOM structure. If the Streamdown library updates its markup, these styles could silently break.

Recommendation: Consider if there's a more robust way to style this, or document that these styles target Streamdown internals.

---

🟡 Content Clipping Concern

message.tsx:87 changed from max-w-none to max-w-full overflow-hidden:

// Before
"csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-none leading-relaxed"

// After  
"csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-hidden"

Adding overflow-hidden could clip content that previously displayed correctly (e.g., code blocks, tables, or other wide content).

---

✅ What Looks Good

• Link visibility fix with blue underlined links - much better UX
• min-w-0 on user message wrapper - proper flex child behavior
• Long URL wrapping with break-all - prevents overflow
• Modal positioning fix - ensures proper centering
• Light/dark mode handling for dialog - good attention to both themes

---

Overall the fixes address real issues - just want to make sure we don't introduce regressions in the process. Let me know your thoughts!

[ankushchhabradelta4infotech-ai]

Thanks for the thorough review! I've addressed all the concerns. Here's the status of each point:

1. CSS Classes Removed from ChatContainerRoot — ✅ Non-breaking

Verified that use-stick-to-bottom@1.1.1 internally applies overflow: auto on its scroll ref div. The flex class isn't needed either — the scroll button overlay uses absolute positioning, not flex layout. min-h-0 is the only class needed to prevent flex children from overflowing.

2. Hardcoded Colors / !important — ✅ Fixed

Replaced all !text-blue-600 / !text-blue-400 with var(--csdk-link-color) — no more !important. Added --csdk-link-color to base.css defaults (light: #2563eb, dark: #60a5fa) and to all 8 theme files with brand-appropriate colors that contrast against each theme's --primary background.

3. Fragile Streamdown Selectors — ✅ Simplified

Removed the 3 fragile child selectors (.font-semibold, .font-mono, button.bg-background) and instead set color: hsl(var(--foreground)) on the dialog card > div — CSS inheritance handles all children. Only .text-muted-foreground needs an explicit override. Added a version comment (streamdown@^2.1.0). Also merged the duplicate > div rule blocks and fixed the dark/light default ordering (was dark-first, now correctly light-first with .dark override).

4. Content Clipping — ✅ Fixed

Changed overflow-hidden to overflow-x-auto overflow-y-hidden so wide content (code blocks, tables) gets horizontal scrolling instead of being clipped.

Additional fixes made during review:

• break-all → overflow-wrap: anywhere — prevents readable link text like "Click here" from breaking mid-word while still wrapping long URLs
• inset: 0 replaces verbose top/left/right/bottom: 0; width: 100vw; height: 100vh (also avoids scrollbar-related width issues with 100vw)
• Fixed dark mode --csdk-link-color in base.css (was accidentally same as light mode)

All changes are non-breaking and safe to merge. ✅