{paths.map((filePath, i) => {
const category = getCategoryFromPath(filePath);
const src = category === "image"
? `/api/workspace/raw-file?path=${encodeURIComponent(filePath)}`
: `/api/workspace/thumbnail?path=${encodeURIComponent(filePath)}&size=200`;
const ext = filePath.split(".").pop()?.toUpperCase() ?? "";
return (
{ (e.currentTarget as HTMLImageElement).style.display = "none"; }}
/>
{category !== "image" && (
{ext}
)}
);
})}
);
}
/* ─── File path detection for clickable inline code ─── */
/**
* Detect whether an inline code string looks like a local file/directory path.
* Matches anything starting with:
* ~/ (home-relative)
* / (absolute)
* ./ (current-dir-relative)
* ../ (parent-dir-relative)
* Must contain at least one `/` separator to distinguish from plain commands.
*/
function looksLikeFilePath(text: string): boolean {
const t = text.trim();
if (!t || t.length < 3 || t.length > 500) {return false;}
// Full path prefix
if (t.startsWith("~/") || t.startsWith("/") || t.startsWith("./") || t.startsWith("../")) {
const afterPrefix = t.startsWith("~/") ? t.slice(2) :
t.startsWith("../") ? t.slice(3) :
t.startsWith("./") ? t.slice(2) :
t.slice(1);
return afterPrefix.includes("/") || afterPrefix.includes(".");
}
// Bare filename with a known extension (e.g. "Rachapoom-Passport.pdf")
const fileExtPattern = /\.(pdf|docx?|xlsx?|pptx?|csv|txt|rtf|pages|numbers|key|md|json|yaml|yml|toml|xml|html?|css|jsx?|tsx?|py|rb|go|rs|java|cpp|c|h|sh|sql|swift|kt|png|jpe?g|gif|webp|svg|bmp|ico|heic|tiff|mp[34]|webm|mov|avi|mkv|flv|wav|ogg|aac|flac|m4a|zip|tar|gz|dmg)$/i;
if (fileExtPattern.test(t) && !t.includes(" ")) {
return true;
}
return false;
}
/** Check if text looks like a filename (allows spaces, used for bold text). */
function looksLikeFileName(text: string): boolean {
const t = text.trim();
if (!t || t.length < 3 || t.length > 300) {return false;}
const fileExtPattern = /\.(pdf|docx?|xlsx?|pptx?|csv|txt|rtf|pages|numbers|key|md|json|yaml|yml|toml|xml|html?|css|jsx?|tsx?|py|rb|go|rs|java|cpp|c|h|sh|sql|swift|kt|png|jpe?g|gif|webp|svg|bmp|ico|heic|tiff|mp[34]|webm|mov|avi|mkv|flv|wav|ogg|aac|flac|m4a|zip|tar|gz|dmg)$/i;
return fileExtPattern.test(t);
}
/** Open a file path using the system default application. */
async function openFilePath(path: string, reveal = false) {
try {
const res = await fetch("/api/workspace/open-file", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ path, reveal }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
console.error("Failed to open file:", data);
}
} catch (err) {
console.error("Failed to open file:", err);
}
}
type FilePathClickHandler = (
path: string,
) => Promise
{children}
);
}
/* ─── Markdown component overrides for chat ─── */
function createMarkdownComponents(
onFilePathClick?: FilePathClickHandler,
): Components {
return {
// Open external links in new tab; intercept local file-path links
a: ({ href, children, ...props }) => {
const rawHref = typeof href === "string" ? href : "";
const normalizedHref = normalizePathReference(rawHref);
const isExternal =
rawHref && (rawHref.startsWith("http://") || rawHref.startsWith("https://") || rawHref.startsWith("//"));
const isWorkspaceAppLink = rawHref.startsWith("/workspace");
const isLocalPathLink =
!isWorkspaceAppLink &&
(Boolean(rawHref.startsWith("file://")) ||
looksLikeFilePath(normalizedHref));
return (
{
if (!isLocalPathLink || !onFilePathClick) {return;}
e.preventDefault();
void onFilePathClick(normalizedHref);
}}
>
{children}
);
},
// Route local image paths through raw-file API so workspace images render
img: ({ src, alt, ...props }) => {
const resolvedSrc = typeof src === "string" && !src.startsWith("http://") && !src.startsWith("https://") && !src.startsWith("data:")
? `/api/workspace/raw-file?path=${encodeURIComponent(src)}`
: src;
return (
// eslint-disable-next-line @next/next/no-img-element
{lang}
{children};
},
// Inline code — detect file paths and make them clickable
code: ({ children, className, ...props }) => {
// If this code has a language class, it's inside a and
// will be handled by the pre override above. Just return raw.
if (className?.startsWith("language-")) {
return (
{children}
);
}
// Check if the inline code content looks like a file path
const text = typeof children === "string" ? children : "";
const normalizedText = normalizePathReference(text);
if (normalizedText && looksLikeFilePath(normalizedText)) {
return (
{children}
);
}
// Regular inline code
return {children};
},
// Bold text — detect filenames and make them clickable
strong: ({ children, ...props }) => {
const text = typeof children === "string" ? children
: Array.isArray(children) ? children.filter((c) => typeof c === "string").join("")
: "";
if (text && looksLikeFileName(text)) {
return (
{children}
);
}
return {children};
},
};
}
/* ─── Chat message ─── */
export const ChatMessage = memo(function ChatMessage({ message, isStreaming, onSubagentClick, onFilePathClick }: { message: UIMessage; isStreaming?: boolean; onSubagentClick?: (task: string) => void; onFilePathClick?: FilePathClickHandler }) {
const isUser = message.role === "user";
const segments = groupParts(message.parts);
const markdownComponents = useMemo(
() => createMarkdownComponents(onFilePathClick),
[onFilePathClick],
);
if (isUser) {
// User: right-aligned subtle pill
const textContent = segments
.filter(
(s): s is { type: "text"; text: string } =>
s.type === "text",
)
.map((s) => s.text)
.join("\n");
// Parse attachment prefix from sent messages
const attachmentInfo = parseAttachments(textContent);
if (attachmentInfo) {
return (
{/* Attachment previews — standalone above the text bubble */}
{attachmentInfo.message}
)}
);
}
return (
{textContent}
);
}
// Find the last text segment index for streaming optimization
const lastTextIdx = isStreaming
? segments.reduce((acc, s, i) => (s.type === "text" ? i : acc), -1)
: -1;
// Assistant: free-flowing text, left-aligned, NO bubble
return (
{segments.map((segment, index) => {
if (segment.type === "text") {
// Detect agent error messages
const errorMatch = segment.text.match(
/^\[error\]\s*([\s\S]*)$/,
);
if (errorMatch) {
return (
{errorMatch[1].trim()}
);
}
// During streaming, render the active text as plain text
// to avoid expensive ReactMarkdown re-parses on every token.
// Switch to full markdown once streaming ends.
if (index === lastTextIdx) {
return (
{segment.text}
);
}
return (
{segment.text}
);
}
if (segment.type === "report-artifact") {
return (
);
}
if (segment.type === "diff-artifact") {
return (
);
}
if (segment.type === "subagent-card") {
const truncatedTask = segment.task.length > 80 ? segment.task.slice(0, 80) + "..." : segment.task;
const isRunning = segment.status === "running";
return (
);
}
return (
);
})}
);
});