File size: 5,112 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | import React, { createContext, useContext } from "react";
import type { ExtraProps } from "react-markdown";
import ConversationService from "#/api/conversation-service/conversation-service.api";
import { useOptionalConversationId } from "#/hooks/use-conversation-id";
import { useWorkspaceFiles } from "#/hooks/query/use-workspace-files";
import { openWorkspaceFile } from "#/services/canvas-ui";
import { looksLikeWorkspaceFilePath, toFilesTabPath } from "#/utils/path-utils";
import { cn } from "#/utils/utils";
import { code as defaultCode } from "../markdown/code";
import { anchor as defaultAnchor } from "../markdown/anchor";
/** True while rendering Markdown descendants of an existing `<a>`. */
const InMarkdownLinkContext = createContext(false);
/**
* Workspace paths available for chat Markdown linking. Absent outside
* ChatInterface (e.g. unit tests) so ChatCode never requires QueryClient.
*/
export const WorkspaceFilesForChatContext = createContext<string[] | undefined>(
undefined,
);
/** Fetches workspace files once for the chat tree and exposes them to path links. */
export function WorkspaceFilesForChatProvider({
children,
}: {
children: React.ReactNode;
}) {
const { data } = useWorkspaceFiles();
return (
<WorkspaceFilesForChatContext.Provider value={data}>
{children}
</WorkspaceFilesForChatContext.Provider>
);
}
type CodeProps = React.ClassAttributes<HTMLElement> &
React.HTMLAttributes<HTMLElement> &
ExtraProps;
type AnchorProps = React.ClassAttributes<HTMLAnchorElement> &
React.AnchorHTMLAttributes<HTMLAnchorElement> &
ExtraProps;
type StrongProps = React.ClassAttributes<HTMLElement> &
React.HTMLAttributes<HTMLElement> &
ExtraProps;
/** Flatten React children to plain text, or null if mixed nodes. */
function getPlainText(children: React.ReactNode): string | null {
if (children == null || typeof children === "boolean") return "";
if (typeof children === "string" || typeof children === "number") {
return String(children);
}
if (Array.isArray(children)) {
const parts = children.map(getPlainText);
if (parts.some((part) => part === null)) return null;
return parts.join("");
}
return null;
}
/**
* Only link paths that currently exist in the conversation workspace.
* workingDir comes from ConversationService — same source as navigate_to_file.
*/
function useExistingWorkspacePath(candidate: string): string | null {
const files = useContext(WorkspaceFilesForChatContext);
if (!files?.length || !looksLikeWorkspaceFilePath(candidate)) return null;
const workingDir =
ConversationService.getCurrentConversation()?.workspace?.working_dir;
const normalized = toFilesTabPath(candidate, workingDir);
if (!normalized) return null;
return files.includes(normalized) ? normalized : null;
}
function ChatMarkdownPathLink({
path,
className,
children,
}: {
path: string;
className?: string;
children: React.ReactNode;
}) {
const { conversationId } = useOptionalConversationId();
return (
<button
type="button"
data-testid="markdown-file-path-link"
title={path}
className={cn(
className,
"cursor-pointer rounded border border-surface-raised bg-surface-raised px-[0.4em] py-[0.2em] font-mono text-foreground hover:underline",
)}
onClick={(event) => {
event.stopPropagation();
openWorkspaceFile(path, conversationId);
}}
>
{children}
</button>
);
}
/**
* Chat-only inline code: existing workspace paths become Files-drawer buttons.
* Nested under an existing Markdown link → stay plain `<code>`.
*/
export function ChatCode(props: CodeProps) {
const { children, className } = props;
const inLink = useContext(InMarkdownLinkContext);
const match = /language-(\w+)/.exec(className || "");
const codeString = String(children).replace(/\n$/, "");
const isMultiline = String(children).includes("\n");
const existingPath = useExistingWorkspacePath(
!match && !isMultiline && !inLink ? codeString : "",
);
if (existingPath) {
return (
<ChatMarkdownPathLink path={existingPath} className={className}>
{children}
</ChatMarkdownPathLink>
);
}
return defaultCode(props);
}
/**
* Agents often emphasize paths with `**file.md**` instead of backticks.
* Link those only when the whole strong span is an existing workspace file.
*/
export function ChatStrong(props: StrongProps) {
const { children } = props;
const inLink = useContext(InMarkdownLinkContext);
const text = getPlainText(children)?.trim() ?? "";
const existingPath = useExistingWorkspacePath(!inLink ? text : "");
if (existingPath) {
return (
<ChatMarkdownPathLink path={existingPath}>
{children}
</ChatMarkdownPathLink>
);
}
return <strong>{children}</strong>;
}
/** Marks descendants so nested path tokens are not turned into a button. */
export function ChatAnchor(props: AnchorProps) {
return (
<InMarkdownLinkContext.Provider value>
{defaultAnchor(props)}
</InMarkdownLinkContext.Provider>
);
}
|