gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #37 from langflow-ai/feat/md

Browse source 
feat: add Markdown support
This commit is contained in:
Sebastián Estévez 2025-09-12 12:40:40 -04:00 • committed by GitHub
commit 05a394a805
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 3017 additions and 594 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/components/code-component.tsx Normal file
View file

@ -0,0 +1,56 @@
import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { Button } from "./ui/button";
type CodeComponentProps = {
code: string;
language: string;
};
export default function CodeComponent({ code, language }: CodeComponentProps) {
const [isCopied, setIsCopied] = useState<boolean>(false);
const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
}
navigator.clipboard.writeText(code).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 2000);
});
};
return (
<div
className="mt-2 relative flex w-full flex-col overflow-hidden rounded-md text-left dark"
data-testid="chat-code-tab"
>
<Button
variant="ghost"
size="icon"
className="text-muted-foreground hover:bg-card absolute top-2 right-2"
data-testid="copy-code-button"
onClick={copyToClipboard}
>
{isCopied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
<SyntaxHighlighter
language={language.toLowerCase()}
style={tomorrow}
className="!mt-0 h-full w-full overflow-scroll !rounded-b-md !rounded-t-none border border-border text-left !custom-scroll !text-sm"
>
{code}
</SyntaxHighlighter>
</div>
);
}

142
frontend/components/markdown-renderer.tsx Normal file
View file

@ -0,0 +1,142 @@
import Markdown from "react-markdown";
import rehypeMathjax from "rehype-mathjax";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";
import { cn } from "@/lib/utils";
import CodeComponent from "./code-component";
type MarkdownRendererProps = {
chatMessage: string;
};
const preprocessChatMessage = (text: string): string => {
// Handle <think> tags
let processed = text
.replace(/<think>/g, "`<think>`")
.replace(/<\/think>/g, "`</think>`");
// Clean up tables if present
if (isMarkdownTable(processed)) {
processed = cleanupTableEmptyCells(processed);
}
return processed;
};
export const isMarkdownTable = (text: string): boolean => {
if (!text?.trim()) return false;
// Single regex to detect markdown table with header separator
return /\|.*\|.*\n\s*\|[\s\-:]+\|/m.test(text);
};
export const cleanupTableEmptyCells = (text: string): string => {
return text
.split("\n")
.filter((line) => {
const trimmed = line.trim();
// Keep non-table lines
if (!trimmed.includes("|")) return true;
// Keep separator rows (contain only |, -, :, spaces)
if (/^\|[\s\-:]+\|$/.test(trimmed)) return true;
// For data rows, check if any cell has content
const cells = trimmed.split("|").slice(1, -1); // Remove delimiter cells
return cells.some((cell) => cell.trim() !== "");
})
.join("\n");
};
export const MarkdownRenderer = ({ chatMessage }: MarkdownRendererProps) => {
// Process the chat message to handle <think> tags and clean up tables
const processedChatMessage = preprocessChatMessage(chatMessage);
return (
<div
className={cn(
"markdown prose flex w-full max-w-full flex-col items-baseline text-base font-normal word-break-break-word dark:prose-invert",
!chatMessage ? "text-muted-foreground" : "text-primary",
)}
>
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeMathjax, rehypeRaw]}
linkTarget="_blank"
components={{
p({ node, ...props }) {
return <p className="w-fit max-w-full">{props.children}</p>;
},
ol({ node, ...props }) {
return <ol className="max-w-full">{props.children}</ol>;
},
h1({ node, ...props }) {
return <h1 className="mb-6 mt-4">{props.children}</h1>;
},
h2({ node, ...props }) {
return <h2 className="mb-4 mt-4">{props.children}</h2>;
},
h3({ node, ...props }) {
return <h3 className="mb-2 mt-4">{props.children}</h3>;
},
hr({ node, ...props }) {
return <hr className="w-full mt-4 mb-8" />;
},
ul({ node, ...props }) {
return <ul className="max-w-full mb-2">{props.children}</ul>;
},
pre({ node, ...props }) {
return <>{props.children}</>;
},
table: ({ node, ...props }) => {
return (
<div className="max-w-full overflow-hidden rounded-md border bg-muted">
<div className="max-h-[600px] w-full overflow-auto p-4">
<table className="!my-0 w-full">{props.children}</table>
</div>
</div>
);
},
code: ({ node, className, inline, children, ...props }) => {
let content = children as string;
if (
Array.isArray(children) &&
children.length === 1 &&
typeof children[0] === "string"
) {
content = children[0] as string;
}
if (typeof content === "string") {
if (content.length) {
if (content[0] === "▍") {
return <span className="form-modal-markdown-span"></span>;
}
// Specifically handle <think> tags that were wrapped in backticks
if (content === "<think>" || content === "</think>") {
return <span>{content}</span>;
}
}
const match = /language-(\w+)/.exec(className || "");
return !inline ? (
<CodeComponent
language={(match && match[1]) || ""}
code={String(content).replace(/\n$/, "")}
/>
) : (
<code className={className} {...props}>
{content}
</code>
);
}
},
}}
>
{processedChatMessage}
</Markdown>
</div>
);
};

3261
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
frontend/package.json
View file

@ -36,6 +36,11 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.6.1",
"rehype-mathjax": "^4.0.3",
"rehype-raw": "^6.1.1",
"remark-gfm": "3.0.1",
"sonner": "^2.0.6",
"tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7",

147
frontend/src/app/chat/page.tsx
View file

@ -1,12 +1,5 @@
"use client";
import { ProtectedRoute } from "@/components/protected-route";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/auth-context";
import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context";
import {
AtSign,
Bot,
@ -22,8 +15,16 @@ import {
Zap,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
import { MarkdownRenderer } from "@/components/markdown-renderer";
import { ProtectedRoute } from "@/components/protected-route";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/auth-context";
import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context";
import { useLoadingStore } from "@/stores/loadingStore";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
import Nudges from "./nudges";
interface Message {
@ -193,7 +194,7 @@ function ChatPage() {
"Upload failed with status:",
response.status,
"Response:",
errorText
errorText,
);
throw new Error("Failed to process document");
}
@ -447,7 +448,7 @@ function ChatPage() {
console.log(
"Loading conversation with",
conversationData.messages.length,
"messages"
"messages",
);
// Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map(
@ -575,7 +576,7 @@ function ChatPage() {
) === "string"
? toolCall.function?.arguments || toolCall.arguments
: JSON.stringify(
toolCall.function?.arguments || toolCall.arguments
toolCall.function?.arguments || toolCall.arguments,
),
result: toolCall.result,
status: "completed",
@ -594,7 +595,7 @@ function ChatPage() {
}
return message;
}
},
);
setMessages(convertedMessages);
@ -683,7 +684,7 @@ function ChatPage() {
console.log(
"Chat page received file upload error event:",
filename,
error
error,
);
// Replace the last message with error message
@ -697,37 +698,37 @@ function ChatPage() {
window.addEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener
handleFileUploadStart as EventListener,
);
window.addEventListener(
"fileUploaded",
handleFileUploaded as EventListener
handleFileUploaded as EventListener,
);
window.addEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener
handleFileUploadComplete as EventListener,
);
window.addEventListener(
"fileUploadError",
handleFileUploadError as EventListener
handleFileUploadError as EventListener,
);
return () => {
window.removeEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener
handleFileUploadStart as EventListener,
);
window.removeEventListener(
"fileUploaded",
handleFileUploaded as EventListener
handleFileUploaded as EventListener,
);
window.removeEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener
handleFileUploadComplete as EventListener,
);
window.removeEventListener(
"fileUploadError",
handleFileUploadError as EventListener
handleFileUploadError as EventListener,
);
};
}, [endpoint, setPreviousResponseIds]);
@ -754,7 +755,7 @@ function ChatPage() {
}, [isFilterDropdownOpen]);
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
previousResponseIds[endpoint]
previousResponseIds[endpoint],
);
const handleSSEStream = async (userMessage: Message) => {
@ -859,7 +860,7 @@ function ChatPage() {
console.log(
"Received chunk:",
chunk.type || chunk.object,
chunk
chunk,
);
// Extract response ID if present
@ -875,14 +876,14 @@ function ChatPage() {
if (chunk.delta.function_call) {
console.log(
"Function call in delta:",
chunk.delta.function_call
chunk.delta.function_call,
);
// Check if this is a new function call
if (chunk.delta.function_call.name) {
console.log(
"New function call:",
chunk.delta.function_call.name
chunk.delta.function_call.name,
);
const functionCall: FunctionCall = {
name: chunk.delta.function_call.name,
@ -898,7 +899,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) {
console.log(
"Function call arguments delta:",
chunk.delta.function_call.arguments
chunk.delta.function_call.arguments,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -910,14 +911,14 @@ function ChatPage() {
chunk.delta.function_call.arguments;
console.log(
"Accumulated arguments:",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
// Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -925,7 +926,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Arguments not yet complete or invalid JSON:",
e
e,
);
}
}
@ -958,7 +959,7 @@ function ChatPage() {
else if (toolCall.function.arguments) {
console.log(
"Tool call arguments delta:",
toolCall.function.arguments
toolCall.function.arguments,
);
const lastFunctionCall =
currentFunctionCalls[
@ -972,7 +973,7 @@ function ChatPage() {
toolCall.function.arguments;
console.log(
"Accumulated tool arguments:",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
// Try to parse arguments if they look complete
@ -981,7 +982,7 @@ function ChatPage() {
) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -989,7 +990,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Tool arguments not yet complete or invalid JSON:",
e
e,
);
}
}
@ -1021,7 +1022,7 @@ function ChatPage() {
console.log(
"Error parsing function call on finish:",
fc,
e
e,
);
}
}
@ -1037,12 +1038,12 @@ function ChatPage() {
console.log(
"🟢 CREATING function call (added):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name
chunk.item.tool_name || chunk.item.name,
);
// Try to find an existing pending call to update (created by earlier deltas)
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id
(fc) => fc.id === chunk.item.id,
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -1051,7 +1052,7 @@ function ChatPage() {
(fc) =>
fc.status === "pending" &&
!fc.id &&
fc.name === (chunk.item.tool_name || chunk.item.name)
fc.name === (chunk.item.tool_name || chunk.item.name),
);
}
@ -1064,7 +1065,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments;
console.log(
"🟢 UPDATED existing pending function call with id:",
existing.id
existing.id,
);
} else {
const functionCall: FunctionCall = {
@ -1082,7 +1083,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
}))
})),
);
}
}
@ -1093,7 +1094,7 @@ function ChatPage() {
) {
console.log(
"Function args delta (Realtime API):",
chunk.delta
chunk.delta,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -1104,7 +1105,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || "";
console.log(
"Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
}
}
@ -1115,26 +1116,26 @@ function ChatPage() {
) {
console.log(
"Function args done (Realtime API):",
chunk.arguments
chunk.arguments,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) {
try {
lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}"
chunk.arguments || "{}",
);
lastFunctionCall.status = "completed";
console.log(
"Parsed function arguments (Realtime API):",
lastFunctionCall.arguments
lastFunctionCall.arguments,
);
} catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error";
console.log(
"Error parsing function arguments (Realtime API):",
e
e,
);
}
}
@ -1148,14 +1149,14 @@ function ChatPage() {
console.log(
"🔵 UPDATING function call (done):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name
chunk.item.tool_name || chunk.item.name,
);
console.log(
"🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
}))
})),
);
// Find existing function call by ID or name
@ -1163,14 +1164,14 @@ function ChatPage() {
(fc) =>
fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name
fc.name === chunk.item.name,
);
if (functionCall) {
console.log(
"🔵 FOUND existing function call, updating:",
functionCall.id,
functionCall.name
functionCall.name,
);
// Update existing function call with completion data
functionCall.status =
@ -1193,7 +1194,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:",
chunk.item.id,
chunk.item.tool_name,
chunk.item.name
chunk.item.name,
);
}
}
@ -1214,7 +1215,7 @@ function ChatPage() {
fc.name === chunk.item.name ||
fc.name === chunk.item.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name)
chunk.item.type.includes(fc.name),
);
if (functionCall) {
@ -1258,12 +1259,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name,
chunk.item.type
chunk.item.type,
);
// Dedupe by id or pending with same name
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id
(fc) => fc.id === chunk.item.id,
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -1275,7 +1276,7 @@ function ChatPage() {
fc.name ===
(chunk.item.tool_name ||
chunk.item.name ||
chunk.item.type)
chunk.item.type),
);
}
@ -1291,7 +1292,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments;
console.log(
"🟡 UPDATED existing pending tool call with id:",
existing.id
existing.id,
);
} else {
const functionCall = {
@ -1312,7 +1313,7 @@ function ChatPage() {
id: fc.id,
name: fc.name,
type: fc.type,
}))
})),
);
}
}
@ -1590,7 +1591,7 @@ function ChatPage() {
const handleForkConversation = (
messageIndex: number,
event?: React.MouseEvent
event?: React.MouseEvent,
) => {
// Prevent any default behavior and stop event propagation
if (event) {
@ -1655,7 +1656,7 @@ function ChatPage() {
const renderFunctionCalls = (
functionCalls: FunctionCall[],
messageIndex?: number
messageIndex?: number,
) => {
if (!functionCalls || functionCalls.length === 0) return null;
@ -2023,11 +2024,9 @@ function ChatPage() {
<div className="flex-1 min-w-0">
{renderFunctionCalls(
message.functionCalls || [],
index
index,
)}
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
{message.content}
</p>
<MarkdownRenderer chatMessage={message.content} />
</div>
{endpoint === "chat" && (
<div className="flex-shrink-0 ml-2">
@ -2054,12 +2053,12 @@ function ChatPage() {
<div className="flex-1">
{renderFunctionCalls(
streamingMessage.functionCalls,
messages.length
messages.length,
)}
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
{streamingMessage.content}
<span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
</p>
<MarkdownRenderer
chatMessage={streamingMessage.content}
/>
<span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
</div>
</div>
)}
@ -2197,7 +2196,7 @@ function ChatPage() {
const filteredFilters = availableFilters.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
);
if (e.key === "Escape") {
@ -2215,7 +2214,7 @@ function ChatPage() {
if (e.key === "ArrowDown") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev < filteredFilters.length - 1 ? prev + 1 : 0
prev < filteredFilters.length - 1 ? prev + 1 : 0,
);
return;
}
@ -2223,7 +2222,7 @@ function ChatPage() {
if (e.key === "ArrowUp") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev > 0 ? prev - 1 : filteredFilters.length - 1
prev > 0 ? prev - 1 : filteredFilters.length - 1,
);
return;
}
@ -2241,7 +2240,7 @@ function ChatPage() {
) {
e.preventDefault();
handleFilterSelect(
filteredFilters[selectedFilterIndex]
filteredFilters[selectedFilterIndex],
);
return;
}
@ -2260,7 +2259,7 @@ function ChatPage() {
) {
e.preventDefault();
handleFilterSelect(
filteredFilters[selectedFilterIndex]
filteredFilters[selectedFilterIndex],
);
return;
}
@ -2340,7 +2339,7 @@ function ChatPage() {
.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
)
.map((filter, index) => (
<button
@ -2366,7 +2365,7 @@ function ChatPage() {
{availableFilters.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
).length === 0 &&
filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground">