diff options
| author | Mahesh Sanikommmu <[email protected]> | 2025-10-10 21:27:58 -0700 |
|---|---|---|
| committer | Mahesh Sanikommmu <[email protected]> | 2025-10-10 21:27:58 -0700 |
| commit | b3669a2675cc84a8aec402324fd52b435dac915a (patch) | |
| tree | 0b3953a1ffabc7d4630862dc9ce12a277575495f | |
| parent | feat: format memory dialog content in markdown (diff) | |
| download | supermemory-b3669a2675cc84a8aec402324fd52b435dac915a.tar.xz supermemory-b3669a2675cc84a8aec402324fd52b435dac915a.zip | |
removed unused code and lint issues
| -rw-r--r-- | apps/web/components/memories-utils/html-content-renderer.tsx | 148 |
1 files changed, 98 insertions, 50 deletions
diff --git a/apps/web/components/memories-utils/html-content-renderer.tsx b/apps/web/components/memories-utils/html-content-renderer.tsx index b64cad75..a8185f44 100644 --- a/apps/web/components/memories-utils/html-content-renderer.tsx +++ b/apps/web/components/memories-utils/html-content-renderer.tsx @@ -23,32 +23,10 @@ const isHTMLContent = (content: string): boolean => { return htmlPatterns.some((pattern) => pattern.test(content)) } -/** - * Detects if content is likely markdown based on common markdown patterns - */ -const isMarkdownContent = (content: string): boolean => { - // Check for markdown patterns like headers, links, code blocks, etc. - const markdownPatterns = [ - /^#{1,6}\s+/m, // Headers - /\[([^\]]+)\]\([^)]+\)/, // Links - /`{1,3}[^`]*`{1,3}/, // Inline code - /^\s*```[\s\S]*?```/m, // Code blocks - /^\s*[\-*+]\s+/m, // Lists - /^\s*\d+\.\s+/m, // Numbered lists - /\*\*([^*]+)\*\*/, // Bold - /_([^_]+)_/, // Italic - /https?:\/\/[^\s]+/, // URLs - /\*\s+|\-\s+/, // List markers - ] - - return markdownPatterns.some((pattern) => pattern.test(content)) -} - export const HTMLContentRenderer = memo( ({ content, className = "" }: HTMLContentRendererProps) => { const { isHTML, isMarkdown, processedContent } = useMemo(() => { const contentIsHTML = isHTMLContent(content) - const contentIsMarkdown = isMarkdownContent(content) if (contentIsHTML) { return { @@ -62,27 +40,31 @@ export const HTMLContentRenderer = memo( let processed = content // Handle terminal commands (lines starting with $) - if (content.includes('\n$ ')) { + if (content.includes("\n$ ")) { // Convert terminal commands to code blocks for better formatting - processed = content.replace(/^\$ (.*$)/gm, '```bash\n$ $1\n```') + processed = content.replace(/^\$ (.*$)/gm, "```bash\n$ $1\n```") } // Handle cases where content looks like JSON but isn't in code blocks - if (content.trim().startsWith('{') && content.includes('"') && content.includes(':')) { + if ( + content.trim().startsWith("{") && + content.includes('"') && + content.includes(":") + ) { // Check if it looks like JSON and wrap it in a code block - const lines = content.split('\n') + const lines = content.split("\n") let inJsonBlock = false - let jsonLines: string[] = [] - let otherLines: string[] = [] + const jsonLines: string[] = [] + const otherLines: string[] = [] for (const line of lines) { - if (line.trim() === '{' || line.trim() === '[') { + if (line.trim() === "{" || line.trim() === "[") { inJsonBlock = true } if (inJsonBlock) { jsonLines.push(line) - if (line.trim() === '}' || line.trim() === ']') { + if (line.trim() === "}" || line.trim() === "]") { inJsonBlock = false } } else { @@ -90,10 +72,15 @@ export const HTMLContentRenderer = memo( } } - if (jsonLines.length > 0 && jsonLines.join('\n').trim()) { - const jsonBlock = jsonLines.join('\n') - const otherContent = otherLines.join('\n') - processed = otherContent + (otherContent ? '\n\n' : '') + '```json\n' + jsonBlock + '\n```' + if (jsonLines.length > 0 && jsonLines.join("\n").trim()) { + const jsonBlock = jsonLines.join("\n") + const otherContent = otherLines.join("\n") + processed = + otherContent + + (otherContent ? "\n\n" : "") + + "```json\n" + + jsonBlock + + "\n```" } } @@ -117,25 +104,86 @@ export const HTMLContentRenderer = memo( if (isMarkdown) { try { const components: Components = { - h1: ({ children }) => <h1 className="text-foreground text-lg font-semibold mb-1.5">{children}</h1>, - h2: ({ children }) => <h2 className="text-foreground text-base font-semibold mb-1.5">{children}</h2>, - h3: ({ children }) => <h3 className="text-foreground text-sm font-semibold mb-1">{children}</h3>, - h4: ({ children }) => <h4 className="text-foreground text-sm font-medium mb-1">{children}</h4>, - h5: ({ children }) => <h5 className="text-foreground text-sm font-medium mb-1">{children}</h5>, - h6: ({ children }) => <h6 className="text-foreground text-sm font-medium mb-1">{children}</h6>, - p: ({ children }) => <p className="text-foreground text-sm leading-relaxed mb-1.5">{children}</p>, - strong: ({ children }) => <strong className="text-foreground font-semibold">{children}</strong>, - em: ({ children }) => <em className="text-foreground italic">{children}</em>, - code: ({ children, className }) => <code className={`text-foreground bg-muted px-1.5 py-0.5 rounded text-xs font-mono ${className || ''}`}>{children}</code>, + h1: ({ children }) => ( + <h1 className="text-foreground text-lg font-semibold mb-1.5"> + {children} + </h1> + ), + h2: ({ children }) => ( + <h2 className="text-foreground text-base font-semibold mb-1.5"> + {children} + </h2> + ), + h3: ({ children }) => ( + <h3 className="text-foreground text-sm font-semibold mb-1"> + {children} + </h3> + ), + h4: ({ children }) => ( + <h4 className="text-foreground text-sm font-medium mb-1"> + {children} + </h4> + ), + h5: ({ children }) => ( + <h5 className="text-foreground text-sm font-medium mb-1"> + {children} + </h5> + ), + h6: ({ children }) => ( + <h6 className="text-foreground text-sm font-medium mb-1"> + {children} + </h6> + ), + p: ({ children }) => ( + <p className="text-foreground text-sm leading-relaxed mb-1.5"> + {children} + </p> + ), + strong: ({ children }) => ( + <strong className="text-foreground font-semibold"> + {children} + </strong> + ), + em: ({ children }) => ( + <em className="text-foreground italic">{children}</em> + ), + code: ({ children, className }) => ( + <code + className={`text-foreground bg-muted px-1.5 py-0.5 rounded text-xs font-mono ${className || ""}`} + > + {children} + </code> + ), pre: ({ children }) => ( - <pre className="text-foreground bg-muted border border-border p-2 rounded text-xs overflow-x-auto mb-2 whitespace-pre font-mono text-xs leading-tight"> + <pre className="text-foreground bg-muted border border-border p-2 rounded text-xs overflow-x-auto mb-2 whitespace-pre font-mono leading-tight"> {children} </pre> ), - blockquote: ({ children }) => <blockquote className="text-muted-foreground border-l-4 border-muted-foreground pl-3 italic mb-2">{children}</blockquote>, - a: ({ children, href }) => <a href={href} className="text-primary hover:text-primary/80 underline" target="_blank" rel="noopener noreferrer">{children}</a>, - ul: ({ children }) => <ul className="text-foreground text-sm mb-2 ml-4 list-disc">{children}</ul>, - ol: ({ children }) => <ol className="text-foreground text-sm mb-2 ml-4 list-decimal">{children}</ol>, + blockquote: ({ children }) => ( + <blockquote className="text-muted-foreground border-l-4 border-muted-foreground pl-3 italic mb-2"> + {children} + </blockquote> + ), + a: ({ children, href }) => ( + <a + href={href} + className="text-primary hover:text-primary/80 underline" + target="_blank" + rel="noopener noreferrer" + > + {children} + </a> + ), + ul: ({ children }) => ( + <ul className="text-foreground text-sm mb-2 ml-4 list-disc"> + {children} + </ul> + ), + ol: ({ children }) => ( + <ol className="text-foreground text-sm mb-2 ml-4 list-decimal"> + {children} + </ol> + ), li: ({ children }) => <li className="mb-1">{children}</li>, } @@ -146,7 +194,7 @@ export const HTMLContentRenderer = memo( </ReactMarkdown> </div> ) - } catch (error) { + } catch { // Fallback to plain text if markdown parsing fails return ( <p |