@@ -13,6 +13,8 @@ import { getCategoryIcon } from '@badaitech/chaingraph-nodes'
1313import { PortDirection } from '@badaitech/chaingraph-types'
1414import { ChevronDown , ChevronRight } from 'lucide-react'
1515import { useMemo , useState } from 'react'
16+ import Markdown from 'react-markdown'
17+ import remarkGfm from 'remark-gfm'
1618import { useTheme } from '@/components/theme'
1719import {
1820 Badge ,
@@ -175,19 +177,58 @@ export function NodeDocTooltipContent({
175177 < div className = "flex-1 min-h-0 overflow-hidden" >
176178 < ScrollArea className = "h-full w-full" >
177179 < div className = "p-4 space-y-3" >
180+
181+ { /* Description */ }
182+ { node . metadata . description && (
183+ < div className = "space-y-1" >
184+ < div className = "text-xs font-medium text-muted-foreground" > Description</ div >
185+ < div className = "text-xs text-muted-foreground" >
186+ { /* {formatDescription(node.metadata.description)} */ }
187+
188+ < div
189+ className = "prose prose-xs dark:prose-invert max-w-none space-y-1 text-xs text-muted-foreground border-l-2 pl-2"
190+ // className=""
191+ style = { { borderColor : style . primary } }
192+ >
193+ < Markdown
194+ remarkPlugins = { [ remarkGfm ] }
195+ components = { {
196+ p : ( { children } ) => < p className = "my-1 leading-relaxed" > { children } </ p > ,
197+ ul : ( { children } ) => < ul className = "my-1 ml-4 list-disc" > { children } </ ul > ,
198+ ol : ( { children } ) => < ol className = "my-1 ml-4 list-decimal" > { children } </ ol > ,
199+ li : ( { children } ) => < li className = "my-0.5" > { children } </ li > ,
200+ h1 : ( { children } ) => < h1 className = "text-sm font-semibold my-1" > { children } </ h1 > ,
201+ h2 : ( { children } ) => < h2 className = "text-xs font-semibold my-1" > { children } </ h2 > ,
202+ h3 : ( { children } ) => < h3 className = "text-xs font-medium my-1" > { children } </ h3 > ,
203+ code : ( { children } ) => < code className = "px-1 py-0.5 rounded bg-muted text-[10px]" > { children } </ code > ,
204+ pre : ( { children } ) => < pre className = "my-1 p-2 rounded bg-muted overflow-x-auto" > { children } </ pre > ,
205+ } }
206+ >
207+ { node . metadata . description }
208+ </ Markdown >
209+ </ div >
210+ </ div >
211+ </ div >
212+ ) }
213+
214+ { /* Delimiter: */ }
215+ < hr className = "border-t border-border" />
216+
178217 { /* Node ID */ }
179218 { node . id && (
180219 < div className = "space-y-1" >
181220 < div className = "text-xs font-medium text-muted-foreground" > Node ID</ div >
182- < div className = "text-xs text-muted-foreground" > { node . id } </ div >
221+ < Badge variant = "outline" className = "px-1.5 py-0 font-mono" >
222+ { node . id }
223+ </ Badge >
183224 </ div >
184225 ) }
185226
186227 { /* Node Type */ }
187228 { node . metadata . type && (
188229 < div className = "space-y-1" >
189230 < div className = "text-xs font-medium text-muted-foreground" > Node Type</ div >
190- < div className = "text-xs text-muted-foreground " > { node . metadata . type } </ div >
231+ < Badge variant = "outline" className = "px-1.5 py-0 font-mono " > { node . metadata . type } </ Badge >
191232 </ div >
192233 ) }
193234
@@ -196,27 +237,21 @@ export function NodeDocTooltipContent({
196237 < div className = "space-y-2" >
197238 < div className = "text-xs font-medium text-muted-foreground" > Category</ div >
198239 { /* badge and description on separate rows */ }
240+
241+ < Badge variant = "outline" className = "px-1.5 py-0 font-mono" >
242+ { node . metadata . category }
243+ </ Badge >
199244 < div className = "flex flex-col gap-1" >
200- < Badge variant = "secondary" className = "text-[10px] px-1.5 py-0 w-fit" >
201- { node . metadata . category }
202- </ Badge >
203- < div className = "text-xs text-muted-foreground" >
245+ < div
246+ className = "text-xs text-muted-foreground border-l-2 pl-2"
247+ style = { { borderColor : style . primary } }
248+ >
204249 { categoryMetadata . description }
205250 </ div >
206251 </ div >
207252 </ div >
208253 ) }
209254
210- { /* Description */ }
211- { node . metadata . description && (
212- < div className = "space-y-1" >
213- < div className = "text-xs font-medium text-muted-foreground" > Description</ div >
214- < div className = "text-xs text-muted-foreground" >
215- { formatDescription ( node . metadata . description ) }
216- </ div >
217- </ div >
218- ) }
219-
220255 { /* Ports Section - Collapsible */ }
221256 { ( inputs . length > 0 || passthroughs . length > 0 || outputs . length > 0 || systemPorts . length > 0 ) && (
222257 < div className = "border rounded-md" >
0 commit comments