vrr/SurfSense
2
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2025-09-02 10:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge commit 'db536fc845de65a1d8f8ed4171f5d26f04cdcc84' into dev

Browse source
This commit is contained in:
DESKTOP-RTLN3BA\$punk 2025-07-10 14:42:09 -07:00
commit 24587d796d
5 changed files with 2076 additions and 1671 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx
View file

@ -966,14 +966,14 @@ export default function PodcastsPageClient({
</Button> </Button>
</motion.div> </motion.div>
<div className="relative w-24"> <div className="relative w-full">
<Slider <Slider
value={[isMuted ? 0 : volume]} value={[isMuted ? 0 : volume]}
min={0} min={0}
max={1} max={1}
step={0.01} step={0.01}
onValueChange={handleVolumeChange} onValueChange={handleVolumeChange}
className="w-24" className="w-full"
disabled={isMuted} disabled={isMuted}
/> />
<motion.div <motion.div

3120
surfsense_web/app/dashboard/[search_space_id]/researcher/[chat_id]/page.tsx
View file

File diff suppressed because it is too large Load diff

42
surfsense_web/components/copy-button.tsx Normal file
View file

@ -0,0 +1,42 @@
"use client";
import { useEffect, useRef, useState } from "react";
import type { RefObject } from "react";
import { Button } from "./ui/button";
import { Copy, CopyCheck } from "lucide-react";
export default function CopyButton({
ref,
}: {
ref: RefObject<HTMLDivElement | null>;
}) {
const [copy, setCopy] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
const handleClick = () => {
if (ref.current) {
const text = ref.current.innerText;
navigator.clipboard.writeText(text);
setCopy(true);
timeoutRef.current = setTimeout(() => {
setCopy(false);
}, 2000);
}
};
return (
<div className="w-full flex justify-end">
<Button variant="ghost" onClick={handleClick}>
{copy ? <CopyCheck /> : <Copy />}
</Button>
</div>
);
}

573
surfsense_web/components/markdown-viewer.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo, useState, useEffect } from "react"; import React, { useMemo, useState, useEffect, useRef } from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw"; import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize"; import rehypeSanitize from "rehype-sanitize";
@ -7,267 +7,350 @@ import { cn } from "@/lib/utils";
import { Citation } from "./chat/Citation"; import { Citation } from "./chat/Citation";
import { Source } from "./chat/types"; import { Source } from "./chat/types";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneLight, oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import {
oneLight,
oneDark,
} from "react-syntax-highlighter/dist/cjs/styles/prism";
import { Check, Copy } from "lucide-react"; import { Check, Copy } from "lucide-react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import CopyButton from "./copy-button";
interface MarkdownViewerProps { interface MarkdownViewerProps {
content: string; content: string;
className?: string; className?: string;
getCitationSource?: (id: number) => Source | null; getCitationSource?: (id: number) => Source | null;
type?: "user" | "ai";
} }
export function MarkdownViewer({ content, className, getCitationSource }: MarkdownViewerProps) { export function MarkdownViewer({
// Memoize the markdown components to prevent unnecessary re-renders content,
const components = useMemo(() => { className,
return { getCitationSource,
// Define custom components for markdown elements type = "user",
p: ({node, children, ...props}: any) => { }: MarkdownViewerProps) {
// If there's no getCitationSource function, just render normally const ref = useRef<HTMLDivElement>(null);
if (!getCitationSource) { // Memoize the markdown components to prevent unnecessary re-renders
return <p className="my-2" {...props}>{children}</p>; const components = useMemo(() => {
} return {
// Define custom components for markdown elements
// Process citations within paragraph content p: ({ node, children, ...props }: any) => {
return <p className="my-2" {...props}>{processCitationsInReactChildren(children, getCitationSource)}</p>; // If there's no getCitationSource function, just render normally
}, if (!getCitationSource) {
a: ({node, children, ...props}: any) => { return (
// Process citations within link content if needed <p className="my-2" {...props}>
const processedChildren = getCitationSource {children}
? processCitationsInReactChildren(children, getCitationSource) </p>
: children; );
return <a className="text-primary hover:underline" {...props}>{processedChildren}</a>; }
},
li: ({node, children, ...props}: any) => {
// Process citations within list item content
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <li {...props}>{processedChildren}</li>;
},
ul: ({node, ...props}: any) => <ul className="list-disc pl-5 my-2" {...props} />,
ol: ({node, ...props}: any) => <ol className="list-decimal pl-5 my-2" {...props} />,
h1: ({node, children, ...props}: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <h1 className="text-2xl font-bold mt-6 mb-2" {...props}>{processedChildren}</h1>;
},
h2: ({node, children, ...props}: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <h2 className="text-xl font-bold mt-5 mb-2" {...props}>{processedChildren}</h2>;
},
h3: ({node, children, ...props}: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <h3 className="text-lg font-bold mt-4 mb-2" {...props}>{processedChildren}</h3>;
},
h4: ({node, children, ...props}: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <h4 className="text-base font-bold mt-3 mb-1" {...props}>{processedChildren}</h4>;
},
blockquote: ({node, ...props}: any) => <blockquote className="border-l-4 border-muted pl-4 italic my-2" {...props} />,
hr: ({node, ...props}: any) => <hr className="my-4 border-muted" {...props} />,
img: ({node, ...props}: any) => <img className="max-w-full h-auto my-4 rounded" {...props} />,
table: ({node, ...props}: any) => <div className="overflow-x-auto my-4"><table className="min-w-full divide-y divide-border" {...props} /></div>,
th: ({node, ...props}: any) => <th className="px-3 py-2 text-left font-medium bg-muted" {...props} />,
td: ({node, ...props}: any) => <td className="px-3 py-2 border-t border-border" {...props} />,
code: ({node, className, children, ...props}: any) => {
const match = /language-(\w+)/.exec(className || '');
const language = match ? match[1] : '';
const isInline = !match;
if (isInline) {
return <code className="bg-muted px-1 py-0.5 rounded text-xs" {...props}>{children}</code>;
}
// For code blocks, add syntax highlighting and copy functionality
return (
<CodeBlock language={language} {...props}>
{String(children).replace(/\n$/, '')}
</CodeBlock>
);
}
};
}, [getCitationSource]);
return ( // Process citations within paragraph content
<div className={cn("prose prose-sm dark:prose-invert max-w-none", className)}> return (
<ReactMarkdown <p className="my-2" {...props}>
rehypePlugins={[rehypeRaw, rehypeSanitize]} {processCitationsInReactChildren(children, getCitationSource)}
remarkPlugins={[remarkGfm]} </p>
components={components} );
> },
{content} a: ({ node, children, ...props }: any) => {
</ReactMarkdown> // Process citations within link content if needed
</div> const processedChildren = getCitationSource
); ? processCitationsInReactChildren(children, getCitationSource)
: children;
return (
<a className="text-primary hover:underline" {...props}>
{processedChildren}
</a>
);
},
li: ({ node, children, ...props }: any) => {
// Process citations within list item content
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return <li {...props}>{processedChildren}</li>;
},
ul: ({ node, ...props }: any) => (
<ul className="list-disc pl-5 my-2" {...props} />
),
ol: ({ node, ...props }: any) => (
<ol className="list-decimal pl-5 my-2" {...props} />
),
h1: ({ node, children, ...props }: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return (
<h1 className="text-2xl font-bold mt-6 mb-2" {...props}>
{processedChildren}
</h1>
);
},
h2: ({ node, children, ...props }: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return (
<h2 className="text-xl font-bold mt-5 mb-2" {...props}>
{processedChildren}
</h2>
);
},
h3: ({ node, children, ...props }: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return (
<h3 className="text-lg font-bold mt-4 mb-2" {...props}>
{processedChildren}
</h3>
);
},
h4: ({ node, children, ...props }: any) => {
const processedChildren = getCitationSource
? processCitationsInReactChildren(children, getCitationSource)
: children;
return (
<h4 className="text-base font-bold mt-3 mb-1" {...props}>
{processedChildren}
</h4>
);
},
blockquote: ({ node, ...props }: any) => (
<blockquote
className="border-l-4 border-muted pl-4 italic my-2"
{...props}
/>
),
hr: ({ node, ...props }: any) => (
<hr className="my-4 border-muted" {...props} />
),
img: ({ node, ...props }: any) => (
<img className="max-w-full h-auto my-4 rounded" {...props} />
),
table: ({ node, ...props }: any) => (
<div className="overflow-x-auto my-4">
<table className="min-w-full divide-y divide-border" {...props} />
</div>
),
th: ({ node, ...props }: any) => (
<th className="px-3 py-2 text-left font-medium bg-muted" {...props} />
),
td: ({ node, ...props }: any) => (
<td className="px-3 py-2 border-t border-border" {...props} />
),
code: ({ node, className, children, ...props }: any) => {
const match = /language-(\w+)/.exec(className || "");
const language = match ? match[1] : "";
const isInline = !match;
if (isInline) {
return (
<code className="bg-muted px-1 py-0.5 rounded text-xs" {...props}>
{children}
</code>
);
}
// For code blocks, add syntax highlighting and copy functionality
return (
<CodeBlock language={language} {...props}>
{String(children).replace(/\n$/, "")}
</CodeBlock>
);
},
};
}, [getCitationSource]);
return (
<div
className={cn("prose prose-sm dark:prose-invert max-w-none", className)}
ref={ref}
>
<ReactMarkdown
rehypePlugins={[rehypeRaw, rehypeSanitize]}
remarkPlugins={[remarkGfm]}
components={components}
>
{content}
</ReactMarkdown>
{type === "ai" && <CopyButton ref={ref} />}
</div>
);
} }
// Code block component with syntax highlighting and copy functionality // Code block component with syntax highlighting and copy functionality
const CodeBlock = ({ children, language }: { children: string, language: string }) => { const CodeBlock = ({
const [copied, setCopied] = useState(false); children,
const { resolvedTheme, theme } = useTheme(); language,
const [mounted, setMounted] = useState(false); }: {
children: string;
language: string;
}) => {
const [copied, setCopied] = useState(false);
const { resolvedTheme, theme } = useTheme();
const [mounted, setMounted] = useState(false);
// Prevent hydration issues // Prevent hydration issues
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true);
}, []); }, []);
const handleCopy = async () => { const handleCopy = async () => {
await navigator.clipboard.writeText(children); await navigator.clipboard.writeText(children);
setCopied(true); setCopied(true);
setTimeout(() => setCopied(false), 2000); setTimeout(() => setCopied(false), 2000);
}; };
// Choose theme based on current system/user preference // Choose theme based on current system/user preference
const isDarkTheme = mounted && (resolvedTheme === 'dark' || theme === 'dark'); const isDarkTheme = mounted && (resolvedTheme === "dark" || theme === "dark");
const syntaxTheme = isDarkTheme ? oneDark : oneLight; const syntaxTheme = isDarkTheme ? oneDark : oneLight;
return ( return (
<div className="relative my-4 group"> <div className="relative my-4 group">
<div className="absolute right-2 top-2 z-10"> <div className="absolute right-2 top-2 z-10">
<button <button
onClick={handleCopy} onClick={handleCopy}
className="p-1.5 rounded-md bg-background/80 hover:bg-background border border-border flex items-center justify-center transition-colors" className="p-1.5 rounded-md bg-background/80 hover:bg-background border border-border flex items-center justify-center transition-colors"
aria-label="Copy code" aria-label="Copy code"
> >
{copied ? {copied ? (
<Check size={14} className="text-green-500" /> : <Check size={14} className="text-green-500" />
<Copy size={14} className="text-muted-foreground" /> ) : (
} <Copy size={14} className="text-muted-foreground" />
</button> )}
</div> </button>
{mounted ? ( </div>
<SyntaxHighlighter {mounted ? (
language={language || 'text'} <SyntaxHighlighter
style={{ language={language || "text"}
...syntaxTheme, style={{
'pre[class*="language-"]': { ...syntaxTheme,
...syntaxTheme['pre[class*="language-"]'], 'pre[class*="language-"]': {
margin: 0, ...syntaxTheme['pre[class*="language-"]'],
border: 'none', margin: 0,
borderRadius: '0.375rem', border: "none",
background: 'var(--syntax-bg)' borderRadius: "0.375rem",
}, background: "var(--syntax-bg)",
'code[class*="language-"]': { },
...syntaxTheme['code[class*="language-"]'], 'code[class*="language-"]': {
border: 'none', ...syntaxTheme['code[class*="language-"]'],
background: 'var(--syntax-bg)' border: "none",
} background: "var(--syntax-bg)",
}} },
customStyle={{ }}
margin: 0, customStyle={{
borderRadius: '0.375rem', margin: 0,
fontSize: '0.75rem', borderRadius: "0.375rem",
lineHeight: '1.5rem', fontSize: "0.75rem",
backgroundColor: 'var(--syntax-bg)', lineHeight: "1.5rem",
border: 'none', backgroundColor: "var(--syntax-bg)",
}} border: "none",
codeTagProps={{ }}
className: "font-mono", codeTagProps={{
style: { className: "font-mono",
border: 'none', style: {
background: 'var(--syntax-bg)' border: "none",
} background: "var(--syntax-bg)",
}} },
showLineNumbers={false} }}
wrapLines={false} showLineNumbers={false}
lineProps={{ wrapLines={false}
style: { lineProps={{
wordBreak: 'break-all', style: {
whiteSpace: 'pre-wrap', wordBreak: "break-all",
border: 'none', whiteSpace: "pre-wrap",
borderBottom: 'none', border: "none",
paddingLeft: 0, borderBottom: "none",
paddingRight: 0, paddingLeft: 0,
margin: '0.25rem 0' paddingRight: 0,
} margin: "0.25rem 0",
}} },
PreTag="div" }}
> PreTag="div"
{children} >
</SyntaxHighlighter> {children}
) : ( </SyntaxHighlighter>
<div className="bg-muted p-4 rounded-md"> ) : (
<pre className="m-0 p-0 border-0"> <div className="bg-muted p-4 rounded-md">
<code className="text-xs font-mono border-0 leading-6">{children}</code> <pre className="m-0 p-0 border-0">
</pre> <code className="text-xs font-mono border-0 leading-6">
</div> {children}
)} </code>
</div> </pre>
); </div>
)}
</div>
);
}; };
// Helper function to process citations within React children // Helper function to process citations within React children
const processCitationsInReactChildren = (children: React.ReactNode, getCitationSource: (id: number) => Source | null): React.ReactNode => { const processCitationsInReactChildren = (
// If children is not an array or string, just return it children: React.ReactNode,
if (!children || (typeof children !== 'string' && !Array.isArray(children))) { getCitationSource: (id: number) => Source | null,
return children; ): React.ReactNode => {
} // If children is not an array or string, just return it
if (!children || (typeof children !== "string" && !Array.isArray(children))) {
// Handle string content directly - this is where we process citation references return children;
if (typeof children === 'string') { }
return processCitationsInText(children, getCitationSource);
} // Handle string content directly - this is where we process citation references
if (typeof children === "string") {
// Handle arrays of children recursively return processCitationsInText(children, getCitationSource);
if (Array.isArray(children)) { }
return React.Children.map(children, child => {
if (typeof child === 'string') { // Handle arrays of children recursively
return processCitationsInText(child, getCitationSource); if (Array.isArray(children)) {
} return React.Children.map(children, (child) => {
return child; if (typeof child === "string") {
}); return processCitationsInText(child, getCitationSource);
} }
return child;
return children; });
}
return children;
}; };
// Process citation references in text content // Process citation references in text content
const processCitationsInText = (text: string, getCitationSource: (id: number) => Source | null): React.ReactNode[] => { const processCitationsInText = (
// Use improved regex to catch citation numbers more reliably text: string,
// This will match patterns like [1], [42], etc. including when they appear at the end of a line or sentence getCitationSource: (id: number) => Source | null,
const citationRegex = /\[(\d+)\]/g; ): React.ReactNode[] => {
const parts: React.ReactNode[] = []; // Use improved regex to catch citation numbers more reliably
let lastIndex = 0; // This will match patterns like [1], [42], etc. including when they appear at the end of a line or sentence
let match; const citationRegex = /\[(\d+)\]/g;
let position = 0; const parts: React.ReactNode[] = [];
let lastIndex = 0;
while ((match = citationRegex.exec(text)) !== null) { let match;
// Add text before the citation let position = 0;
if (match.index > lastIndex) {
parts.push(text.substring(lastIndex, match.index)); while ((match = citationRegex.exec(text)) !== null) {
} // Add text before the citation
if (match.index > lastIndex) {
// Add the citation component parts.push(text.substring(lastIndex, match.index));
const citationId = parseInt(match[1], 10); }
const source = getCitationSource(citationId);
// Add the citation component
parts.push( const citationId = parseInt(match[1], 10);
<Citation const source = getCitationSource(citationId);
key={`citation-${citationId}-${position}`}
citationId={citationId} parts.push(
citationText={match[0]} <Citation
position={position} key={`citation-${citationId}-${position}`}
source={source} citationId={citationId}
/> citationText={match[0]}
); position={position}
source={source}
lastIndex = match.index + match[0].length; />,
position++; );
}
lastIndex = match.index + match[0].length;
// Add any remaining text after the last citation position++;
if (lastIndex < text.length) { }
parts.push(text.substring(lastIndex));
} // Add any remaining text after the last citation
if (lastIndex < text.length) {
return parts; parts.push(text.substring(lastIndex));
}; }
return parts;
};

8
surfsense_web/pnpm-lock.yaml generated
View file

@ -4354,8 +4354,8 @@ packages:
tailwind-merge@3.2.0: tailwind-merge@3.2.0:
resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==} resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
tailwind-merge@3.3.0: tailwind-merge@3.3.1:
resolution: {integrity: sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==} resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
tailwindcss-animate@1.0.7: tailwindcss-animate@1.0.7:
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
@ -6869,7 +6869,7 @@ snapshots:
react: 19.0.0 react: 19.0.0
react-dom: 19.0.0(react@19.0.0) react-dom: 19.0.0(react@19.0.0)
react-easy-sort: 1.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) react-easy-sort: 1.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
tailwind-merge: 3.3.0 tailwind-merge: 3.3.1
tsup: 6.7.0(postcss@8.5.3)(typescript@5.8.2) tsup: 6.7.0(postcss@8.5.3)(typescript@5.8.2)
transitivePeerDependencies: transitivePeerDependencies:
- '@swc/core' - '@swc/core'
@ -9411,7 +9411,7 @@ snapshots:
tailwind-merge@3.2.0: {} tailwind-merge@3.2.0: {}
tailwind-merge@3.3.0: {} tailwind-merge@3.3.1: {}
tailwindcss-animate@1.0.7(tailwindcss@4.0.9): tailwindcss-animate@1.0.7(tailwindcss@4.0.9):
dependencies: dependencies: