Fix: css for markdown shouldn't affect inline components (#115)

* Fix: css for markdown shouldn't affect inline components

* Create real-ghosts-melt.md

* fix format

* fix format

* fix: remove dead css

.changeset/real-ghosts-melt.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/chat-ui': patch
+---
+
+Fix: css for markdown shouldn't affect inline components

examples/nextjs/app/globals.css

@@ -244,116 +244,5 @@
   }
   body {
     @apply bg-background text-foreground antialiased;
-    font-feature-settings: 'cv11', 'ss01';
-    font-variation-settings: 'opsz' 32;
-  }
-
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* Custom scrollbar */
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
-  }
-
-  /* Selection styling */
-  ::selection {
-    background: rgba(186, 186, 233, 0.3);
-    color: inherit;
-  }
-
-  ::-moz-selection {
-    background: rgba(186, 186, 233, 0.3);
-    color: inherit;
-  }
-
-  /* Utility classes for animations */
-  .animate-fade-in {
-    animation: var(--animate-fade-in);
-  }
-
-  .animate-fade-in-up {
-    animation: var(--animate-fade-in-up);
-  }
-
-  .animate-scale-in {
-    animation: var(--animate-scale-in);
-  }
-
-  .animate-slide-in-right {
-    animation: var(--animate-slide-in-right);
-  }
-
-  .animate-pulse-glow {
-    animation: var(--animate-pulse-glow);
-  }
-
-  .animate-float {
-    animation: var(--animate-float);
-  }
-
-  /* Glass morphism utilities */
-  .glass {
-    background: var(--glass-gradient);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .glass-border {
-    border: 1px solid;
-    border-image: var(--glass-border) 1;
-  }
-
-  /* Shimmer effect */
-  .shimmer {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.1) 50%,
-      rgba(255, 255, 255, 0) 100%
-    );
-    background-size: 1000px 100%;
-    animation: var(--animate-shimmer);
-  }
-
-  /* Text gradient utilities */
-  .text-gradient-purple {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  .text-gradient-rainbow {
-    background: linear-gradient(
-      90deg,
-      #ff006e,
-      #8338ec,
-      #3a86ff,
-      #06ffa5,
-      #ffbe0b,
-      #fb5607
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    background-size: 300% 100%;
-    animation: var(--animate-shimmer);
   }
 }

examples/nextjs/components/custom-wiki.tsx

@@ -21,40 +21,77 @@ export function WikiCard({ data }: { data: WikiData }) {
     music: '🎵',
   }
 
+  const getCategoryColor = (category: string) => {
+    const colors: Record<string, string> = {
+      science: 'from-blue-50 to-blue-100 border-blue-200 text-blue-900',
+      history: 'from-amber-50 to-amber-100 border-amber-200 text-amber-900',
+      technology:
+        'from-purple-50 to-purple-100 border-purple-200 text-purple-900',
+      biology: 'from-green-50 to-green-100 border-green-200 text-green-900',
+      geography: 'from-teal-50 to-teal-100 border-teal-200 text-teal-900',
+      literature:
+        'from-indigo-50 to-indigo-100 border-indigo-200 text-indigo-900',
+      art: 'from-pink-50 to-pink-100 border-pink-200 text-pink-900',
+      music: 'from-violet-50 to-violet-100 border-violet-200 text-violet-900',
+    }
+    return (
+      colors[category.toLowerCase()] ||
+      'from-gray-50 to-gray-100 border-gray-200 text-gray-900'
+    )
+  }
+
+  const categoryColorClass = getCategoryColor(data.category)
+
   return (
-    <div className="my-4 rounded-lg border border-green-200 bg-green-50 p-4">
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-          <span className="text-2xl">
+    <div
+      className={`my-6 rounded-xl border bg-gradient-to-br p-6 shadow-sm transition-all duration-200 hover:shadow-md ${categoryColorClass}`}
+    >
+      <div className="flex items-start gap-4">
+        <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-white/50 shadow-sm backdrop-blur-sm">
+          <span className="text-3xl">
             {iconMap[data.category.toLowerCase()] || '📖'}
           </span>
         </div>
-        <div className="flex-1">
-          <h3 className="my-0! font-semibold text-green-900">{data.title}</h3>
-          <div className="text-sm text-green-700">
-            <p className="mt-1 whitespace-pre-wrap">{data.summary}</p>
-          </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="mb-2 text-xl font-bold leading-tight">{data.title}</h3>
+          <p className="mb-4 text-base leading-relaxed opacity-80">
+            {data.summary}
+          </p>
         </div>
       </div>
-      <div className="mt-3 grid grid-cols-2 gap-4 text-sm text-green-600">
+
+      <div className="mt-4 flex flex-wrap items-center gap-4 text-sm opacity-70">
         <div className="flex items-center gap-2">
-          <span>📂 Category:</span>
-          <span className="font-medium">{data.category}</span>
+          <span className="font-medium">📂</span>
+          <span className="capitalize">{data.category}</span>
         </div>
         <div className="flex items-center gap-2">
-          <span>📅 Updated:</span>
-          <span className="font-medium">{data.lastUpdated}</span>
+          <span className="font-medium">📅</span>
+          <span>{data.lastUpdated}</span>
         </div>
       </div>
-      <div className="mt-3">
+
+      <div className="border-current/10 mt-4 border-t pt-4">
         <a
           href={data.url}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 text-sm text-green-700 underline hover:text-green-900"
+          className="inline-flex items-center gap-2 rounded-lg bg-white/30 px-4 py-2 text-sm font-medium transition-all duration-200 hover:bg-white/50 hover:shadow-sm"
         >
           📖 Read full article
-          <span>↗</span>
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
         </a>
       </div>
     </div>

packages/chat-ui/src/styles/markdown.css

@@ -1,86 +1,90 @@
 @import 'highlight.js/styles/atom-one-light.css';
 @import 'katex/dist/katex.min.css';
 
-.custom-markdown ul {
+/* 
+* CSS for markdown component
+* they shouldn't affect inline components under custom-renderer class 
+*/
+.custom-markdown ul:not(.custom-renderer *) {
   list-style-type: disc;
   margin-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-.custom-markdown ol {
+.custom-markdown ol:not(.custom-renderer *) {
   list-style-type: decimal;
   margin-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-.custom-markdown li {
+.custom-markdown li:not(.custom-renderer *) {
   margin-bottom: 5px;
 }
 
-.custom-markdown ol ol {
+.custom-markdown ol ol:not(.custom-renderer *) {
   list-style: lower-alpha;
 }
 
-.custom-markdown ul ul,
-.custom-markdown ol ol {
+.custom-markdown ul ul:not(.custom-renderer *),
+.custom-markdown ol ol:not(.custom-renderer *) {
   margin-left: 20px;
 }
 
-.custom-markdown img {
+.custom-markdown img:not(.custom-renderer *) {
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin: 10px 0;
 }
 
-.custom-markdown a {
+.custom-markdown a:not(.custom-renderer *) {
   text-decoration: underline;
   color: #007bff;
 }
 
-.custom-markdown h1,
-.custom-markdown h2,
-.custom-markdown h3,
-.custom-markdown h4,
-.custom-markdown h5,
-.custom-markdown h6 {
+.custom-markdown h1:not(.custom-renderer *),
+.custom-markdown h2:not(.custom-renderer *),
+.custom-markdown h3:not(.custom-renderer *),
+.custom-markdown h4:not(.custom-renderer *),
+.custom-markdown h5:not(.custom-renderer *),
+.custom-markdown h6:not(.custom-renderer *) {
   font-weight: bold;
   margin-bottom: 20px;
   margin-top: 20px;
 }
 
-.custom-markdown h6 {
+.custom-markdown h6:not(.custom-renderer *) {
   font-size: 16px;
 }
 
-.custom-markdown h5 {
+.custom-markdown h5:not(.custom-renderer *) {
   font-size: 18px;
 }
 
-.custom-markdown h4 {
+.custom-markdown h4:not(.custom-renderer *) {
   font-size: 20px;
 }
 
-.custom-markdown h3 {
+.custom-markdown h3:not(.custom-renderer *) {
   font-size: 22px;
 }
 
-.custom-markdown h2 {
+.custom-markdown h2:not(.custom-renderer *) {
   font-size: 24px;
 }
 
-.custom-markdown h1 {
+.custom-markdown h1:not(.custom-renderer *) {
   font-size: 26px;
 }
 
-.custom-markdown hr {
+.custom-markdown hr:not(.custom-renderer *) {
   border: 0;
   border-top: 1px solid #e1e4e8;
   margin: 20px 0;
 }
 
-.custom-markdown table {
+.custom-markdown table:not(.custom-renderer *) {
   width: 100%;
   margin: 20px 0;
   overflow-x: auto;
@@ -89,18 +93,18 @@
   font-size: 14px;
 }
 
-.custom-markdown table caption {
+.custom-markdown table caption:not(.custom-renderer *) {
   margin-top: 16px;
   font-size: 14px;
   color: #666;
   text-align: left;
 }
 
-.custom-markdown thead {
+.custom-markdown thead:not(.custom-renderer *) {
   border-bottom: 1px solid #e1e4e8;
 }
 
-.custom-markdown th {
+.custom-markdown th:not(.custom-renderer *) {
   height: 48px;
   padding: 16px;
   text-align: left;
@@ -109,26 +113,43 @@
   color: #666;
 }
 
-.custom-markdown td {
+.custom-markdown td:not(.custom-renderer *) {
   padding: 16px;
   vertical-align: middle;
   border-bottom: 1px solid #e1e4e8;
 }
 
-.custom-markdown tr {
+.custom-markdown tr:not(.custom-renderer *) {
   transition: background-color 0.2s;
 }
 
-.custom-markdown tr:hover {
+.custom-markdown tr:hover:not(.custom-renderer *) {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-.custom-markdown tfoot {
+.custom-markdown tfoot:not(.custom-renderer *) {
   border-top: 1px solid #e1e4e8;
   background-color: rgba(0, 0, 0, 0.03);
   font-weight: 500;
 }
 
+/* 
+* Reset CSS for inline components under custom-renderer class
+*/
+.custom-renderer {
+  white-space: initial;
+  font-family: var(--font-sans);
+}
+pre:has(.custom-renderer) {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: inherit;
+}
+
+/* 
+* Custom CSS for code editor
+*/
 .ProseMirror:focus-visible {
   outline: none;
-}
+}

packages/chat-ui/src/widgets/markdown.tsx

@@ -169,7 +169,7 @@ export function Markdown({
               if (annotationRenderers?.[annotation.type]) {
                 const CustomRenderer = annotationRenderers[annotation.type]
                 return (
-                  <div className="my-4">
+                  <div className="custom-renderer my-4">
                     <CustomRenderer data={annotation.data} />
                   </div>
                 )