aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMahesh Sanikommmu <[email protected]>2025-10-10 21:27:58 -0700
committerMahesh Sanikommmu <[email protected]>2025-10-10 21:27:58 -0700
commitb3669a2675cc84a8aec402324fd52b435dac915a (patch)
tree0b3953a1ffabc7d4630862dc9ce12a277575495f
parentfeat: format memory dialog content in markdown (diff)
downloadsupermemory-b3669a2675cc84a8aec402324fd52b435dac915a.tar.xz
supermemory-b3669a2675cc84a8aec402324fd52b435dac915a.zip
removed unused code and lint issues
-rw-r--r--apps/web/components/memories-utils/html-content-renderer.tsx148
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