From 4d29a04be1d6fdd37620051c184317cb6f564811 Mon Sep 17 00:00:00 2001 From: ankushchhabradelta4infotech-ai Date: Fri, 13 Feb 2026 15:03:42 +0530 Subject: [PATCH 1/3] fix: infinite scroll and link dialog issues --- .../composed/chat/default-message.tsx | 2 +- .../src/ui/components/ui/chat-container.tsx | 2 +- .../src/ui/components/ui/message.tsx | 6 ++- packages/copilot-sdk/src/ui/styles/base.css | 39 +++++++++++++++++++ 4 files changed, 45 insertions(+), 4 deletions(-) diff --git a/packages/copilot-sdk/src/ui/components/composed/chat/default-message.tsx b/packages/copilot-sdk/src/ui/components/composed/chat/default-message.tsx index 75025d0..9ec715d 100644 --- a/packages/copilot-sdk/src/ui/components/composed/chat/default-message.tsx +++ b/packages/copilot-sdk/src/ui/components/composed/chat/default-message.tsx @@ -122,7 +122,7 @@ export function DefaultMessage({ showUserAvatar ? "justify-end" : "justify-end", )} > -
+
{/* Text content */} {message.content && ( { const classNames = cn( - "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-none leading-relaxed", + "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-hidden", // Typography - simple Tailwind utilities (no prose) "[&_p]:my-1 [&_p]:leading-relaxed", "[&_ul]:my-1 [&_ul]:pl-4 [&_ul]:list-disc [&_ul]:list-outside", @@ -93,7 +93,9 @@ const MessageContent = ({ "[&_li]:my-0.5 [&_li]:pl-0", "[&_pre]:my-2 [&_blockquote]:my-2 [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-current/30", "[&_code]:bg-current/10 [&_code]:px-1 [&_code]:rounded [&_code]:text-[0.9em]", - "[&_a]:underline", + "[&_a]:underline [&_a]:!text-blue-600 dark:[&_a]:!text-blue-400 [&_a]:break-all", + "[&_button[data-streamdown='link']]:underline [&_button[data-streamdown='link']]:!text-blue-600 dark:[&_button[data-streamdown='link']]:!text-blue-400 [&_button[data-streamdown='link']]:break-all [&_button[data-streamdown='link']]:font-medium", + "[&_.text-primary]:!text-blue-600 dark:[&_.text-primary]:!text-blue-400", "[&_strong]:font-semibold", textSizeMap[size], className, diff --git a/packages/copilot-sdk/src/ui/styles/base.css b/packages/copilot-sdk/src/ui/styles/base.css index 08e12eb..531e705 100644 --- a/packages/copilot-sdk/src/ui/styles/base.css +++ b/packages/copilot-sdk/src/ui/styles/base.css @@ -149,3 +149,42 @@ .csdk-loader-loading-dots { animation: csdk-loading-dots 1.4s infinite; } + +/* Streamdown Link Dialog - Force correct text colors */ +/* Title: "Open external link?" */ +[data-streamdown="link-safety-modal"] .font-semibold { + color: rgb(250, 250, 250) !important; +} + +/* Subtitle: "You're about to visit an external website." */ +[data-streamdown="link-safety-modal"] .text-muted-foreground { + color: rgb(160, 160, 160) !important; +} + +/* URL display box */ +[data-streamdown="link-safety-modal"] .font-mono { + color: rgb(250, 250, 250) !important; +} + +/* Copy link button text */ +[data-streamdown="link-safety-modal"] button.bg-background { + color: rgb(250, 250, 250) !important; +} + +/* Light mode overrides */ +:root:not(.dark) [data-streamdown="link-safety-modal"] .font-semibold { + color: rgb(10, 10, 10) !important; +} + +:root:not(.dark) [data-streamdown="link-safety-modal"] .text-muted-foreground { + color: rgb(100, 100, 100) !important; +} + +:root:not(.dark) [data-streamdown="link-safety-modal"] .font-mono { + color: rgb(10, 10, 10) !important; +} + +:root:not(.dark) [data-streamdown="link-safety-modal"] button.bg-background { + color: rgb(10, 10, 10) !important; +} + From 34ede71f6cf2abc890d541e91649086f32a64b3f Mon Sep 17 00:00:00 2001 From: ankushchhabradelta4infotech-ai Date: Fri, 13 Feb 2026 16:14:01 +0530 Subject: [PATCH 2/3] removed important --- packages/copilot-sdk/src/ui/styles/base.css | 62 ++++++++++++--------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/packages/copilot-sdk/src/ui/styles/base.css b/packages/copilot-sdk/src/ui/styles/base.css index 531e705..69075f3 100644 --- a/packages/copilot-sdk/src/ui/styles/base.css +++ b/packages/copilot-sdk/src/ui/styles/base.css @@ -150,41 +150,53 @@ animation: csdk-loading-dots 1.4s infinite; } -/* Streamdown Link Dialog - Force correct text colors */ -/* Title: "Open external link?" */ -[data-streamdown="link-safety-modal"] .font-semibold { - color: rgb(250, 250, 250) !important; -} - -/* Subtitle: "You're about to visit an external website." */ -[data-streamdown="link-safety-modal"] .text-muted-foreground { - color: rgb(160, 160, 160) !important; +/* Streamdown Link Dialog - Fix CSS variable inheritance from parent message context + * Users can override these by defining --csdk-dialog-foreground and --csdk-dialog-muted-foreground at :root level + */ +[data-streamdown="link-safety-modal"] > div { + /* Reset to root-level CSS variables, breaking inheritance from parent message */ + --foreground: var(--csdk-dialog-foreground, 0 0% 98%); + --muted-foreground: var(--csdk-dialog-muted-foreground, 0 0% 62.7%); } -/* URL display box */ -[data-streamdown="link-safety-modal"] .font-mono { - color: rgb(250, 250, 250) !important; -} +/* Streamdown link-safety-modal has backdrop blur on the modal wrapper itself */ +/* The modal wrapper div has: bg-background/50 backdrop-blur-sm */ +/* Ensure it covers the full viewport, not constrained by parent containers */ +[data-streamdown="link-safety-modal"] { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; -/* Copy link button text */ -[data-streamdown="link-safety-modal"] button.bg-background { - color: rgb(250, 250, 250) !important; + /* Center the actual dialog content */ + display: flex; + align-items: center; + justify-content: center; } -/* Light mode overrides */ -:root:not(.dark) [data-streamdown="link-safety-modal"] .font-semibold { - color: rgb(10, 10, 10) !important; +/* The actual dialog content card should be constrained, not the backdrop wrapper */ +[data-streamdown="link-safety-modal"] > div { + max-width: min(500px, 90vw); + margin: 0; + width: 100%; } -:root:not(.dark) [data-streamdown="link-safety-modal"] .text-muted-foreground { - color: rgb(100, 100, 100) !important; +:root:not(.dark) [data-streamdown="link-safety-modal"] > div { + --foreground: var(--csdk-dialog-foreground, 240 10% 3.9%); + --muted-foreground: var(--csdk-dialog-muted-foreground, 240 3.8% 46.1%); } -:root:not(.dark) [data-streamdown="link-safety-modal"] .font-mono { - color: rgb(10, 10, 10) !important; +/* Apply the reset variables to specific elements inside the dialog card */ +[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)); } -:root:not(.dark) [data-streamdown="link-safety-modal"] button.bg-background { - color: rgb(10, 10, 10) !important; +[data-streamdown="link-safety-modal"] > div .text-muted-foreground { + color: hsl(var(--muted-foreground)); } From fa8984aaf5ab306c457265fa3e9efd6f2b364e21 Mon Sep 17 00:00:00 2001 From: ankushchhabradelta4infotech-ai Date: Mon, 23 Feb 2026 16:15:44 +0530 Subject: [PATCH 3/3] fix: infinite scroll and link dialog issues --- .../src/ui/components/ui/message.tsx | 8 ++-- packages/copilot-sdk/src/ui/styles/base.css | 45 +++++++------------ .../src/ui/styles/themes/catppuccin.css | 2 + .../src/ui/styles/themes/claude.css | 2 + .../src/ui/styles/themes/linear.css | 2 + .../src/ui/styles/themes/modern-minimal.css | 2 + .../src/ui/styles/themes/posthog.css | 2 + .../src/ui/styles/themes/supabase.css | 2 + .../src/ui/styles/themes/twitter.css | 2 + .../src/ui/styles/themes/vercel.css | 2 + 10 files changed, 36 insertions(+), 33 deletions(-) diff --git a/packages/copilot-sdk/src/ui/components/ui/message.tsx b/packages/copilot-sdk/src/ui/components/ui/message.tsx index d08f66d..34793f1 100644 --- a/packages/copilot-sdk/src/ui/components/ui/message.tsx +++ b/packages/copilot-sdk/src/ui/components/ui/message.tsx @@ -85,7 +85,7 @@ const MessageContent = ({ ...props }: MessageContentProps) => { const classNames = cn( - "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-hidden", + "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-x-auto overflow-y-hidden", // Typography - simple Tailwind utilities (no prose) "[&_p]:my-1 [&_p]:leading-relaxed", "[&_ul]:my-1 [&_ul]:pl-4 [&_ul]:list-disc [&_ul]:list-outside", @@ -93,9 +93,9 @@ const MessageContent = ({ "[&_li]:my-0.5 [&_li]:pl-0", "[&_pre]:my-2 [&_blockquote]:my-2 [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-current/30", "[&_code]:bg-current/10 [&_code]:px-1 [&_code]:rounded [&_code]:text-[0.9em]", - "[&_a]:underline [&_a]:!text-blue-600 dark:[&_a]:!text-blue-400 [&_a]:break-all", - "[&_button[data-streamdown='link']]:underline [&_button[data-streamdown='link']]:!text-blue-600 dark:[&_button[data-streamdown='link']]:!text-blue-400 [&_button[data-streamdown='link']]:break-all [&_button[data-streamdown='link']]:font-medium", - "[&_.text-primary]:!text-blue-600 dark:[&_.text-primary]:!text-blue-400", + "[&_a]:underline [&_a]:text-[var(--csdk-link-color)] [&_a]:[overflow-wrap:anywhere]", + "[&_button[data-streamdown='link']]:underline [&_button[data-streamdown='link']]:text-[var(--csdk-link-color)] [&_button[data-streamdown='link']]:[overflow-wrap:anywhere] [&_button[data-streamdown='link']]:font-medium", + "[&_.text-primary]:text-[var(--csdk-link-color)]", "[&_strong]:font-semibold", textSizeMap[size], className, diff --git a/packages/copilot-sdk/src/ui/styles/base.css b/packages/copilot-sdk/src/ui/styles/base.css index 69075f3..247c545 100644 --- a/packages/copilot-sdk/src/ui/styles/base.css +++ b/packages/copilot-sdk/src/ui/styles/base.css @@ -33,6 +33,7 @@ --input: hsl(240 5.9% 90%); --ring: hsl(240 5.9% 10%); --radius: 0.5rem; + --csdk-link-color: #2563eb; } .dark { @@ -55,6 +56,7 @@ --border: hsl(240 3.7% 15.9%); --input: hsl(240 3.7% 15.9%); --ring: hsl(240 4.9% 83.9%); + --csdk-link-color: #60a5fa; } } @@ -150,50 +152,35 @@ animation: csdk-loading-dots 1.4s infinite; } -/* Streamdown Link Dialog - Fix CSS variable inheritance from parent message context - * Users can override these by defining --csdk-dialog-foreground and --csdk-dialog-muted-foreground at :root level +/* Streamdown link-safety-modal (targets streamdown@^2.1.0 internal structure) + * Fixes CSS variable inheritance from parent message context. + * Users can override via --csdk-dialog-foreground and --csdk-dialog-muted-foreground at :root level. */ -[data-streamdown="link-safety-modal"] > div { - /* Reset to root-level CSS variables, breaking inheritance from parent message */ - --foreground: var(--csdk-dialog-foreground, 0 0% 98%); - --muted-foreground: var(--csdk-dialog-muted-foreground, 0 0% 62.7%); -} -/* Streamdown link-safety-modal has backdrop blur on the modal wrapper itself */ -/* The modal wrapper div has: bg-background/50 backdrop-blur-sm */ -/* Ensure it covers the full viewport, not constrained by parent containers */ +/* Backdrop: cover full viewport, center the dialog */ [data-streamdown="link-safety-modal"] { position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100vw; - height: 100vh; - - /* Center the actual dialog content */ + inset: 0; display: flex; align-items: center; justify-content: center; } -/* The actual dialog content card should be constrained, not the backdrop wrapper */ +/* Dialog card: reset CSS variables to light defaults, constrain width, apply foreground color */ [data-streamdown="link-safety-modal"] > div { + --foreground: var(--csdk-dialog-foreground, 240 10% 3.9%); + --muted-foreground: var(--csdk-dialog-muted-foreground, 240 3.8% 46.1%); max-width: min(500px, 90vw); margin: 0; width: 100%; + color: hsl(var(--foreground)); } -:root:not(.dark) [data-streamdown="link-safety-modal"] > div { - --foreground: var(--csdk-dialog-foreground, 240 10% 3.9%); - --muted-foreground: var(--csdk-dialog-muted-foreground, 240 3.8% 46.1%); -} - -/* Apply the reset variables to specific elements inside the dialog card */ -[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)); +/* Dark mode override */ +.dark [data-streamdown="link-safety-modal"] > div, +:root.dark [data-streamdown="link-safety-modal"] > div { + --foreground: var(--csdk-dialog-foreground, 0 0% 98%); + --muted-foreground: var(--csdk-dialog-muted-foreground, 0 0% 62.7%); } [data-streamdown="link-safety-modal"] > div .text-muted-foreground { diff --git a/packages/copilot-sdk/src/ui/styles/themes/catppuccin.css b/packages/copilot-sdk/src/ui/styles/themes/catppuccin.css index 1984038..52c8c90 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/catppuccin.css +++ b/packages/copilot-sdk/src/ui/styles/themes/catppuccin.css @@ -30,6 +30,7 @@ --border: hsl(225 14% 77%); --input: hsl(223 16% 83%); --ring: hsl(267 84% 58%); + --csdk-link-color: hsl(220 83% 58%); --radius: 0.35rem; } @@ -66,4 +67,5 @@ --border: hsl(237 16% 23%); --input: hsl(237 16% 23%); --ring: hsl(267 83% 80%); + --csdk-link-color: hsl(220 83% 75%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/claude.css b/packages/copilot-sdk/src/ui/styles/themes/claude.css index 5df4787..e0f18c1 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/claude.css +++ b/packages/copilot-sdk/src/ui/styles/themes/claude.css @@ -29,6 +29,7 @@ --border: hsl(45 8% 84%); --input: hsl(47 6% 69%); --ring: hsl(16 56% 52%); + --csdk-link-color: hsl(210 70% 45%); --radius: 0.5rem; } @@ -65,4 +66,5 @@ --border: hsl(55 5% 23%); --input: hsl(52 5% 31%); --ring: hsl(14 62% 60%); + --csdk-link-color: hsl(210 70% 65%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/linear.css b/packages/copilot-sdk/src/ui/styles/themes/linear.css index 66da176..8f4fd18 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/linear.css +++ b/packages/copilot-sdk/src/ui/styles/themes/linear.css @@ -29,6 +29,7 @@ --border: hsl(260 12% 90%); --input: hsl(260 12% 90%); --ring: hsl(260 75% 50%); + --csdk-link-color: hsl(195 70% 40%); --radius: 0.5rem; } @@ -65,4 +66,5 @@ --border: hsl(260 22% 18%); --input: hsl(260 22% 18%); --ring: hsl(260 65% 58%); + --csdk-link-color: hsl(195 55% 60%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/modern-minimal.css b/packages/copilot-sdk/src/ui/styles/themes/modern-minimal.css index e7297d7..175fce3 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/modern-minimal.css +++ b/packages/copilot-sdk/src/ui/styles/themes/modern-minimal.css @@ -29,6 +29,7 @@ --border: hsl(220 13% 91%); --input: hsl(220 13% 91%); --ring: hsl(217 91% 60%); + --csdk-link-color: hsl(217 91% 60%); --radius: 0.375rem; } @@ -65,4 +66,5 @@ --border: hsl(0 0% 25%); --input: hsl(0 0% 25%); --ring: hsl(217 91% 60%); + --csdk-link-color: hsl(217 91% 65%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/posthog.css b/packages/copilot-sdk/src/ui/styles/themes/posthog.css index 6cca155..92fe247 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/posthog.css +++ b/packages/copilot-sdk/src/ui/styles/themes/posthog.css @@ -31,6 +31,7 @@ --border: hsl(30 15% 20%); --input: hsl(30 15% 20%); --ring: hsl(37 92% 50%); + --csdk-link-color: hsl(37 92% 40%); --radius: 0.625rem; } @@ -67,6 +68,7 @@ --border: hsl(40 30% 65%); --input: hsl(40 30% 65%); --ring: hsl(40 85% 55%); + --csdk-link-color: hsl(40 85% 55%); } /* ═══════════════════════════════════════════════════════════ diff --git a/packages/copilot-sdk/src/ui/styles/themes/supabase.css b/packages/copilot-sdk/src/ui/styles/themes/supabase.css index 2e4b8dc..96c7cb9 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/supabase.css +++ b/packages/copilot-sdk/src/ui/styles/themes/supabase.css @@ -29,6 +29,7 @@ --border: hsl(0 0% 87%); --input: hsl(0 0% 96%); --ring: hsl(153 70% 67%); + --csdk-link-color: hsl(153 60% 38%); --radius: 0.5rem; } @@ -65,4 +66,5 @@ --border: hsl(0 0% 16%); --input: hsl(0 0% 14%); --ring: hsl(142 69% 58%); + --csdk-link-color: hsl(153 70% 50%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/twitter.css b/packages/copilot-sdk/src/ui/styles/themes/twitter.css index 4f03992..58f5c31 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/twitter.css +++ b/packages/copilot-sdk/src/ui/styles/themes/twitter.css @@ -29,6 +29,7 @@ --border: hsl(199 35% 92%); --input: hsl(200 20% 97%); --ring: hsl(204 88% 53%); + --csdk-link-color: hsl(201 89% 43%); --radius: 1.25rem; } @@ -65,4 +66,5 @@ --border: hsl(216 5% 15%); --input: hsl(202 58% 18%); --ring: hsl(204 88% 53%); + --csdk-link-color: hsl(201 89% 63%); } diff --git a/packages/copilot-sdk/src/ui/styles/themes/vercel.css b/packages/copilot-sdk/src/ui/styles/themes/vercel.css index fa383fd..f80f18d 100644 --- a/packages/copilot-sdk/src/ui/styles/themes/vercel.css +++ b/packages/copilot-sdk/src/ui/styles/themes/vercel.css @@ -29,6 +29,7 @@ --border: hsl(0 0% 90%); --input: hsl(0 0% 90%); --ring: hsl(0 0% 0%); + --csdk-link-color: #2563eb; --radius: 0.375rem; } @@ -65,4 +66,5 @@ --border: hsl(0 0% 20%); --input: hsl(0 0% 20%); --ring: hsl(0 0% 100%); + --csdk-link-color: #60a5fa; }