633 lines
18 KiB
TypeScript
633 lines
18 KiB
TypeScript
import type { Message } from "@langchain/langgraph-sdk";
|
|
import { FileIcon, Loader2Icon } from "lucide-react";
|
|
import {
|
|
memo,
|
|
useCallback,
|
|
useContext,
|
|
useMemo,
|
|
type AnchorHTMLAttributes,
|
|
type ImgHTMLAttributes,
|
|
} from "react";
|
|
import rehypeKatex from "rehype-katex";
|
|
|
|
import { Loader } from "@/components/ai-elements/loader";
|
|
import {
|
|
Message as AIElementMessage,
|
|
MessageContent as AIElementMessageContent,
|
|
MessageResponse as AIElementMessageResponse,
|
|
MessageToolbar,
|
|
} from "@/components/ai-elements/message";
|
|
import {
|
|
Reasoning,
|
|
ReasoningContent,
|
|
ReasoningTrigger,
|
|
} from "@/components/ai-elements/reasoning";
|
|
import { Task, TaskTrigger } from "@/components/ai-elements/task";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { resolveArtifactURL } from "@/core/artifacts/utils";
|
|
import { getBackendBaseURL } from "@/core/config";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import {
|
|
extractContentFromMessage,
|
|
extractReasoningContentFromMessage,
|
|
parseUploadedFiles,
|
|
stripArtifactTag,
|
|
stripUploadedFilesTag,
|
|
type FileInMessage,
|
|
} from "@/core/messages/utils";
|
|
import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
|
|
import {
|
|
applyInlineCitations,
|
|
type RuntimeDisplaySource,
|
|
} from "@/core/skill-display/runtime";
|
|
import { humanMessagePlugins } from "@/core/streamdown";
|
|
import { desensitize } from "@/lib/desensitize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { CitationLink } from "../citations/citation-link";
|
|
import { CopyButton } from "../copy-button";
|
|
import { SkillDisplayBlock } from "../skill-display-block";
|
|
import { ThreadContext } from "./context";
|
|
import { DownloadWordButton } from "./download-word-button";
|
|
import { MarkdownContent, type MarkdownContentProps } from "./markdown-content";
|
|
import { MessageTokenUsage } from "./message-token-usage";
|
|
|
|
/**
|
|
* Resolve an in-conversation file path to a fetchable URL.
|
|
*
|
|
* On a public read-only share (`ThreadContext.publicShareCode` set) artifact
|
|
* URLs point at the unauthenticated `/api/public/shares/{code}/files/...`
|
|
* endpoint; otherwise they use the normal auth-gated thread artifact route.
|
|
*/
|
|
function useArtifactResolver(threadId: string): (path: string) => string {
|
|
const publicShareCode = useContext(ThreadContext)?.publicShareCode;
|
|
return useCallback(
|
|
(path: string) => {
|
|
if (publicShareCode) {
|
|
const normalized = path.startsWith("/") ? path : `/${path}`;
|
|
return `${getBackendBaseURL()}/api/public/shares/${encodeURIComponent(
|
|
publicShareCode,
|
|
)}/files${normalized}`;
|
|
}
|
|
return resolveArtifactURL(path, threadId);
|
|
},
|
|
[publicShareCode, threadId],
|
|
);
|
|
}
|
|
|
|
export function MessageListItem({
|
|
className,
|
|
message,
|
|
isLoading,
|
|
threadId,
|
|
tokenUsageEnabled = false,
|
|
displaySources = [],
|
|
}: {
|
|
className?: string;
|
|
message: Message;
|
|
isLoading?: boolean;
|
|
threadId: string;
|
|
tokenUsageEnabled?: boolean;
|
|
displaySources?: RuntimeDisplaySource[];
|
|
}) {
|
|
const isHuman = message.type === "human";
|
|
const messageMarkdown =
|
|
extractContentFromMessage(message) ??
|
|
extractReasoningContentFromMessage(message) ??
|
|
"";
|
|
return (
|
|
<AIElementMessage
|
|
className={cn("group/conversation-message relative w-full", className)}
|
|
from={isHuman ? "user" : "assistant"}
|
|
>
|
|
<MessageContent
|
|
className={isHuman ? "w-fit" : "w-full"}
|
|
message={message}
|
|
isLoading={isLoading}
|
|
threadId={threadId}
|
|
tokenUsageEnabled={tokenUsageEnabled}
|
|
displaySources={displaySources}
|
|
/>
|
|
{!isLoading && (
|
|
<MessageToolbar
|
|
className={cn(
|
|
isHuman ? "-bottom-9 justify-end" : "-bottom-8",
|
|
"absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
|
|
)}
|
|
>
|
|
<div className="flex gap-1">
|
|
<CopyButton clipboardData={messageMarkdown} />
|
|
{!isHuman && messageMarkdown && (
|
|
<DownloadWordButton
|
|
markdown={messageMarkdown}
|
|
fileName="message"
|
|
/>
|
|
)}
|
|
</div>
|
|
</MessageToolbar>
|
|
)}
|
|
</AIElementMessage>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Custom image component that handles artifact URLs
|
|
*/
|
|
function MessageImage({
|
|
src,
|
|
alt,
|
|
threadId,
|
|
maxWidth = "90%",
|
|
...props
|
|
}: React.ImgHTMLAttributes<HTMLImageElement> & {
|
|
threadId: string;
|
|
maxWidth?: string;
|
|
}) {
|
|
const resolveArtifact = useArtifactResolver(threadId);
|
|
if (!src) return null;
|
|
|
|
const imgClassName = cn("overflow-hidden rounded-lg", `max-w-[${maxWidth}]`);
|
|
|
|
if (typeof src !== "string") {
|
|
return <img className={imgClassName} src={src} alt={alt} {...props} />;
|
|
}
|
|
|
|
const url = src.startsWith("/mnt/") ? resolveArtifact(src) : src;
|
|
|
|
return (
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
<img className={imgClassName} src={url} alt={alt} {...props} />
|
|
</a>
|
|
);
|
|
}
|
|
|
|
function MessageContent_({
|
|
className,
|
|
message,
|
|
isLoading = false,
|
|
threadId,
|
|
tokenUsageEnabled = false,
|
|
displaySources = [],
|
|
}: {
|
|
className?: string;
|
|
message: Message;
|
|
isLoading?: boolean;
|
|
threadId: string;
|
|
tokenUsageEnabled?: boolean;
|
|
displaySources?: RuntimeDisplaySource[];
|
|
}) {
|
|
const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
|
|
const isHuman = message.type === "human";
|
|
const resolveArtifact = useArtifactResolver(threadId);
|
|
const components = useMemo(
|
|
() => ({
|
|
img: (props: ImgHTMLAttributes<HTMLImageElement>) => (
|
|
<MessageImage {...props} threadId={threadId} maxWidth="90%" />
|
|
),
|
|
a: ({ href, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) => {
|
|
if (typeof props.children === "string" && /^citation:/i.test(props.children)) {
|
|
return <CitationLink href={href} {...props} />;
|
|
}
|
|
if (href?.startsWith("/mnt/")) {
|
|
const url = resolveArtifact(href);
|
|
return (
|
|
<a
|
|
{...props}
|
|
href={url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
/>
|
|
);
|
|
}
|
|
return <a {...props} href={href} />;
|
|
},
|
|
}),
|
|
[threadId, resolveArtifact],
|
|
);
|
|
|
|
const rawContent = extractContentFromMessage(message);
|
|
const reasoningContent = extractReasoningContentFromMessage(message);
|
|
|
|
const files = useMemo(() => {
|
|
const files = message.additional_kwargs?.files;
|
|
if (!Array.isArray(files) || files.length === 0) {
|
|
if (rawContent.includes("<uploaded_files>")) {
|
|
// If the content contains the <uploaded_files> tag, we return the parsed files from the content for backward compatibility.
|
|
return parseUploadedFiles(rawContent);
|
|
}
|
|
return null;
|
|
}
|
|
return files as FileInMessage[];
|
|
}, [message.additional_kwargs?.files, rawContent]);
|
|
|
|
const contentToDisplay = useMemo(() => {
|
|
if (isHuman) {
|
|
return rawContent ? stripArtifactTag(stripUploadedFilesTag(rawContent)) : "";
|
|
}
|
|
return applyInlineCitations(rawContent ?? "", displaySources);
|
|
}, [rawContent, isHuman, displaySources]);
|
|
|
|
const filesList =
|
|
files && files.length > 0 ? (
|
|
<RichFilesList files={files} threadId={threadId} />
|
|
) : null;
|
|
|
|
// Uploading state: mock AI message shown while files upload
|
|
if (message.additional_kwargs?.element === "task") {
|
|
return (
|
|
<AIElementMessageContent className={className}>
|
|
<Task defaultOpen={false}>
|
|
<TaskTrigger title="">
|
|
<div className="text-muted-foreground flex w-full cursor-default items-center gap-2 text-sm select-none">
|
|
<Loader className="size-4" />
|
|
<span>{desensitize(contentToDisplay)}</span>
|
|
</div>
|
|
</TaskTrigger>
|
|
</Task>
|
|
</AIElementMessageContent>
|
|
);
|
|
}
|
|
|
|
// Reasoning-only AI message (no main response content yet)
|
|
if (!isHuman && reasoningContent && !rawContent) {
|
|
return (
|
|
<AIElementMessageContent className={className}>
|
|
<Reasoning isStreaming={isLoading}>
|
|
<ReasoningTrigger />
|
|
<ReasoningContent>{desensitize(reasoningContent)}</ReasoningContent>
|
|
</Reasoning>
|
|
<MessageTokenUsage
|
|
enabled={tokenUsageEnabled}
|
|
isLoading={isLoading}
|
|
message={message}
|
|
/>
|
|
</AIElementMessageContent>
|
|
);
|
|
}
|
|
|
|
if (isHuman) {
|
|
const messageResponse = contentToDisplay ? (
|
|
<AIElementMessageResponse
|
|
remarkPlugins={humanMessagePlugins.remarkPlugins}
|
|
rehypePlugins={humanMessagePlugins.rehypePlugins}
|
|
components={components}
|
|
parseIncompleteMarkdown={false}
|
|
>
|
|
{desensitize(contentToDisplay)}
|
|
</AIElementMessageResponse>
|
|
) : null;
|
|
return (
|
|
<div className={cn("ml-auto flex flex-col gap-2", className)}>
|
|
{filesList}
|
|
{messageResponse && (
|
|
<AIElementMessageContent className="w-fit">
|
|
{messageResponse}
|
|
</AIElementMessageContent>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AIElementMessageContent className={className}>
|
|
{filesList}
|
|
<AssistantDisplayContent
|
|
content={contentToDisplay}
|
|
displaySources={displaySources}
|
|
isLoading={isLoading}
|
|
rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
|
|
components={components}
|
|
/>
|
|
<MessageTokenUsage
|
|
enabled={tokenUsageEnabled}
|
|
isLoading={isLoading}
|
|
message={message}
|
|
/>
|
|
</AIElementMessageContent>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get file extension and check helpers
|
|
*/
|
|
const getFileExt = (filename: string) =>
|
|
filename.split(".").pop()?.toLowerCase() ?? "";
|
|
|
|
const FILE_TYPE_MAP: Record<string, string> = {
|
|
json: "JSON",
|
|
csv: "CSV",
|
|
txt: "TXT",
|
|
md: "Markdown",
|
|
py: "Python",
|
|
js: "JavaScript",
|
|
ts: "TypeScript",
|
|
tsx: "TSX",
|
|
jsx: "JSX",
|
|
html: "HTML",
|
|
css: "CSS",
|
|
xml: "XML",
|
|
yaml: "YAML",
|
|
yml: "YAML",
|
|
pdf: "PDF",
|
|
png: "PNG",
|
|
jpg: "JPG",
|
|
jpeg: "JPEG",
|
|
gif: "GIF",
|
|
svg: "SVG",
|
|
zip: "ZIP",
|
|
tar: "TAR",
|
|
gz: "GZ",
|
|
};
|
|
|
|
const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"];
|
|
|
|
function getFileTypeLabel(filename: string): string {
|
|
const ext = getFileExt(filename);
|
|
return FILE_TYPE_MAP[ext] ?? (ext.toUpperCase() || "FILE");
|
|
}
|
|
|
|
function isImageFile(filename: string): boolean {
|
|
return IMAGE_EXTENSIONS.includes(getFileExt(filename));
|
|
}
|
|
|
|
/**
|
|
* Format bytes to human-readable size string
|
|
*/
|
|
function formatBytes(bytes: number): string {
|
|
if (bytes === 0) return "—";
|
|
const kb = bytes / 1024;
|
|
if (kb < 1024) return `${kb.toFixed(1)} KB`;
|
|
return `${(kb / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
/**
|
|
* List of files from additional_kwargs.files (with optional upload status)
|
|
*/
|
|
function RichFilesList({
|
|
files,
|
|
threadId,
|
|
}: {
|
|
files: FileInMessage[];
|
|
threadId: string;
|
|
}) {
|
|
if (files.length === 0) return null;
|
|
return (
|
|
<div className="mb-2 flex flex-wrap justify-end gap-2">
|
|
{files.map((file, index) => (
|
|
<RichFileCard
|
|
key={`${file.filename}-${index}`}
|
|
file={file}
|
|
threadId={threadId}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Single file card that handles FileInMessage (supports uploading state)
|
|
*/
|
|
function RichFileCard({
|
|
file,
|
|
threadId,
|
|
}: {
|
|
file: FileInMessage;
|
|
threadId: string;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const resolveArtifact = useArtifactResolver(threadId);
|
|
const isUploading = file.status === "uploading";
|
|
const isImage = isImageFile(file.filename);
|
|
|
|
if (isUploading) {
|
|
return (
|
|
<div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 opacity-60 shadow-sm">
|
|
<div className="flex items-start gap-2">
|
|
<Loader2Icon className="text-muted-foreground mt-0.5 size-4 shrink-0 animate-spin" />
|
|
<span
|
|
className="text-foreground truncate text-sm font-medium"
|
|
title={file.filename}
|
|
>
|
|
{file.filename}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Badge
|
|
variant="secondary"
|
|
className="rounded px-1.5 py-0.5 text-[10px] font-normal"
|
|
>
|
|
{getFileTypeLabel(file.filename)}
|
|
</Badge>
|
|
<span className="text-muted-foreground text-[10px]">
|
|
{t.uploads.uploading}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!file.path) return null;
|
|
|
|
const fileUrl = resolveArtifact(file.path);
|
|
|
|
if (isImage) {
|
|
return (
|
|
<a
|
|
href={fileUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group border-border/40 relative block overflow-hidden rounded-lg border"
|
|
>
|
|
<img
|
|
src={fileUrl}
|
|
alt={file.filename}
|
|
className="h-32 w-auto max-w-60 object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 shadow-sm">
|
|
<div className="flex items-start gap-2">
|
|
<FileIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
|
|
<span
|
|
className="text-foreground truncate text-sm font-medium"
|
|
title={file.filename}
|
|
>
|
|
{file.filename}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Badge
|
|
variant="secondary"
|
|
className="rounded px-1.5 py-0.5 text-[10px] font-normal"
|
|
>
|
|
{getFileTypeLabel(file.filename)}
|
|
</Badge>
|
|
<span className="text-muted-foreground text-[10px]">
|
|
{formatBytes(file.size)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const MessageContent = memo(MessageContent_);
|
|
|
|
function AssistantDisplayContent({
|
|
content,
|
|
displaySources,
|
|
isLoading,
|
|
rehypePlugins,
|
|
components,
|
|
}: {
|
|
content: string;
|
|
displaySources: RuntimeDisplaySource[];
|
|
isLoading: boolean;
|
|
rehypePlugins: MarkdownContentProps["rehypePlugins"];
|
|
components: MarkdownContentProps["components"];
|
|
}) {
|
|
const { parts, placedKeys } = useMemo(
|
|
() => splitSkillDisplayPlaceholders(content, displaySources),
|
|
[content, displaySources],
|
|
);
|
|
const fallbackBlocks = useMemo(() => {
|
|
return groupDisplaySources(displaySources).filter(
|
|
(group) => group.mode !== "citation" && !placedKeys.has(group.key),
|
|
);
|
|
}, [displaySources, placedKeys]);
|
|
|
|
return (
|
|
<>
|
|
{parts.map((part, index) =>
|
|
part.type === "markdown" ? (
|
|
<MarkdownContent
|
|
key={`markdown-${index}`}
|
|
content={part.content}
|
|
isLoading={isLoading}
|
|
rehypePlugins={rehypePlugins}
|
|
className="my-3"
|
|
components={components}
|
|
/>
|
|
) : (
|
|
<SkillDisplayBlock
|
|
key={`display-${index}`}
|
|
mode={part.mode}
|
|
sources={part.sources}
|
|
/>
|
|
),
|
|
)}
|
|
{fallbackBlocks.map((group) => (
|
|
<SkillDisplayBlock
|
|
key={`fallback-${group.key}`}
|
|
mode={group.mode}
|
|
sources={group.sources}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
type DisplayPart =
|
|
| { type: "markdown"; content: string }
|
|
| {
|
|
type: "display";
|
|
key: string;
|
|
mode: RuntimeDisplaySource["mode"];
|
|
sources: RuntimeDisplaySource[];
|
|
};
|
|
|
|
function splitSkillDisplayPlaceholders(
|
|
content: string,
|
|
displaySources: RuntimeDisplaySource[],
|
|
): { parts: DisplayPart[]; placedKeys: Set<string> } {
|
|
const pattern = /<skill-display\s+([^>]*?)\/>/g;
|
|
const parts: DisplayPart[] = [];
|
|
const placedKeys = new Set<string>();
|
|
let cursor = 0;
|
|
for (const match of content.matchAll(pattern)) {
|
|
const start = match.index ?? 0;
|
|
const before = content.slice(cursor, start);
|
|
if (before.trim()) {
|
|
parts.push({ type: "markdown", content: before });
|
|
}
|
|
const attrs = parseDisplayAttrs(match[1] ?? "");
|
|
const group = findDisplayGroup(displaySources, attrs.tool, attrs.mode);
|
|
if (group) {
|
|
parts.push({
|
|
type: "display",
|
|
key: group.key,
|
|
mode: group.mode,
|
|
sources: group.sources,
|
|
});
|
|
placedKeys.add(group.key);
|
|
}
|
|
cursor = start + match[0].length;
|
|
}
|
|
const rest = content.slice(cursor);
|
|
if (rest.trim() || parts.length === 0) {
|
|
parts.push({ type: "markdown", content: rest });
|
|
}
|
|
return { parts, placedKeys };
|
|
}
|
|
|
|
function parseDisplayAttrs(raw: string): { tool?: string; mode?: RuntimeDisplaySource["mode"] } {
|
|
const attrs: Record<string, string> = {};
|
|
for (const match of raw.matchAll(/([a-zA-Z][\w-]*)="([^"]*)"/g)) {
|
|
attrs[match[1]!] = match[2]!;
|
|
}
|
|
return {
|
|
tool: attrs.tool || attrs.skill || attrs.name,
|
|
mode: attrs.mode as RuntimeDisplaySource["mode"] | undefined,
|
|
};
|
|
}
|
|
|
|
function findDisplayGroup(
|
|
sources: RuntimeDisplaySource[],
|
|
tool?: string,
|
|
mode?: RuntimeDisplaySource["mode"],
|
|
) {
|
|
return groupDisplaySources(sources).find((group) => {
|
|
if (mode && group.mode !== mode) {
|
|
return false;
|
|
}
|
|
if (!tool) {
|
|
return true;
|
|
}
|
|
const left = normalizeName(group.skillName);
|
|
const right = normalizeName(tool);
|
|
return left === right || left.includes(right) || right.includes(left);
|
|
});
|
|
}
|
|
|
|
function groupDisplaySources(sources: RuntimeDisplaySource[]) {
|
|
const groups = new Map<
|
|
string,
|
|
{
|
|
key: string;
|
|
skillName: string;
|
|
mode: RuntimeDisplaySource["mode"];
|
|
sources: RuntimeDisplaySource[];
|
|
}
|
|
>();
|
|
for (const source of sources) {
|
|
const key = `${source.skillName}:${source.mode}`;
|
|
const group =
|
|
groups.get(key) ??
|
|
{
|
|
key,
|
|
skillName: source.skillName,
|
|
mode: source.mode,
|
|
sources: [],
|
|
};
|
|
group.sources.push(source);
|
|
groups.set(key, group);
|
|
}
|
|
return [...groups.values()];
|
|
}
|
|
|
|
function normalizeName(name: string) {
|
|
return name.toLowerCase().replace(/[^a-z0-9]+/g, "");
|
|
}
|