# Files changed · PR \#22693 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22693/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): chat markdown links and file chips live in their own modules](https://git.cafe/pingdotgg/t3code/pull/22693.md) Version: 6 Head commit: e113e20a3ef097439956f98e500d23e65581c354 Base commit: a29a8ee9b496e3489fa3127b38f26a24acf88a64 Comparison base: a29a8ee9b496e3489fa3127b38f26a24acf88a64 Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/ChatMarkdown.tsx Status: modified; +7; −715 ```diff @@ -1,9 +1,4 @@ -import { formatFilePathForClipboard } from "@t3tools/client-runtime/media-actions"; -import { - buildFileLinkParentSuffixByPath, - fileLinkLabel, - splitFilePathPosition, -} from "@t3tools/shared/fileLinks"; +import { buildFileLinkParentSuffixByPath, fileLinkLabel } from "@t3tools/shared/fileLinks"; import { isWindowsDrivePathHref, normalizeMarkdownLinkDestination, @@ -51,12 +46,10 @@ type ServerProviderSkill, type ThreadPullRequestKey, } from "@t3tools/contracts"; -import { faviconUrlForOrigin } from "@t3tools/shared/favicon"; import { githubMediaFetchUrl } from "@t3tools/shared/githubMedia"; import { isAtomCommandInterrupted, squashAtomCommandFailure, - type AtomCommandResult, } from "@t3tools/client-runtime/state/runtime"; import { codexArtifactTemplatePresentationLabel, @@ -75,7 +68,6 @@ import * as Schema from "effect/Schema"; import { AsyncResult, Atom } from "effect/reactivity"; import React, { - Children, Suspense, type CSSProperties, type ComponentProps, @@ -120,8 +112,6 @@ import { MediaVideoPlayer } from "./media/MediaVideoPlayer"; import { MediaActions, type MediaActionSource } from "./media/MediaActions"; import { resolveProtocolRelativeMediaUrl } from "./media/mediaContent"; -import { WorkspaceEntryTooltip } from "./chat/WorkspaceEntryIcon"; -import { FileTagChipContent } from "./chat/FileTagChip"; import { revealInFileExplorerLabelForKind, revealInFileExplorerLabelForOs, @@ -132,7 +122,6 @@ } from "./chat/externalLinkContextMenu"; import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; import { Button } from "./ui/button"; -import { ContextChip } from "./ContextChip"; import { stackedThreadToast, toastManager } from "./ui/toast"; import { recordVisitForThread } from "../browserHistoryStore"; import { @@ -142,7 +131,6 @@ } from "../editorPreferences"; import { openInEditorMenuLabel } from "../editorLabels"; import { resolveDiffThemeName } from "../lib/diffRendering"; -import { GitHubIcon } from "./Icons"; import { RenderErrorBoundary } from "./RenderErrorBoundary"; import { useRenderedAppearance } from "../hooks/useTheme"; import { useClientSettings } from "../hooks/useSettings"; @@ -151,8 +139,6 @@ resolveInlineCodeFileLinkMeta, resolveMarkdownFileLinkMeta, rewriteMarkdownFileUriHref, - shouldOpenMarkdownFileLinkInBrowserByDefault, - shouldOpenMarkdownFileLinkInEditor, type MarkdownFileLinkMeta, } from "../markdown-links"; import { @@ -165,11 +151,7 @@ import { readLocalApi } from "../localApi"; import { useAssetUrlRefresh, useAssetUrlState } from "../assets/assetUrls"; import { cn } from "../lib/utils"; +import { resolveRemoteOpenState, useRemoteOpenResolution } from "../remoteOpen"; -import { - resolveRemoteOpenState, - useRemoteOpenResolution, - type RemoteOpenMode, -} from "../remoteOpen"; import { useRightPanelStore } from "../rightPanelStore"; import { readThreadShell, useProjects } from "../state/entities"; import { serverEnvironment } from "../state/server"; @@ -216,6 +198,11 @@ import { MarkdownMermaidCodeBlock } from "./chat/MarkdownMermaidCodeBlock"; import { MarkdownTable } from "./chat/MarkdownTable"; import { MarkdownDetails } from "./chat/MarkdownDetails"; +import { MarkdownExternalLinkContent } from "./chat/MarkdownExternalLink"; +import { MarkdownFileLink } from "./chat/MarkdownFileLink"; +import { canUseMarkdownFileShellActions } from "./chat/MarkdownFileLink.logic"; +import { handleMarkdownFragmentClick, rehypeHeadingIds } from "./chat/markdownFragments"; +import { hastHasText, hastPlainTextDeep, plainHastText } from "./chat/markdownHast.logic"; import { extractCodeBlock, extractFenceLanguage, @@ -261,60 +248,6 @@ label: string; } -export function canUseMarkdownFileShellActions( - environmentId: EnvironmentId | null, - remoteOpenMode: RemoteOpenMode, - isRemoteOpenResolved: boolean, -): boolean { - return environmentId !== null && isRemoteOpenResolved && remoteOpenMode === "local-exec"; -} - -function hasMarkdownFilePrimaryAction(input: { - canOpenInEditor: boolean; - canOpenInBrowser: boolean; - canOpenInPanel: boolean; - canOpenMedia?: boolean; -}): boolean { - return ( - input.canOpenInEditor || - input.canOpenInBrowser || - input.canOpenInPanel || - input.canOpenMedia === true - ); -} - -export function markdownFileCopyMenuItems({ - targetPath, - workspaceRelativePath, -}: Pick) { - const items = [ - { id: "copy-full", label: "Copy full path", value: targetPath, title: "Full path" }, - ]; - if (workspaceRelativePath !== null) { - const position = targetPath.slice(splitFilePathPosition(targetPath).path.length); - items.unshift({ - id: "copy-relative", - label: "Copy relative path", - value: `${workspaceRelativePath}${position}`, - title: "Relative path", - }); - } - return items; -} - -export function shouldUseMarkdownFileBrowserPrimaryAction(input: { - iconPath: string; - canOpenInEditor: boolean; - canOpenInBrowser: boolean; - canOpenInPanel: boolean; -}): boolean { - return ( - input.canOpenInBrowser && - (shouldOpenMarkdownFileLinkInBrowserByDefault(input.iconPath) || - (!input.canOpenInEditor && !input.canOpenInPanel)) - ); -} - const EMPTY_MARKDOWN_SKILLS: ReadonlyArray> = []; const EMPTY_REMARK_PLUGINS: NonNullable = []; @@ -439,30 +372,6 @@ }, }; -interface MarkdownFileLinkProps { - environmentId: EnvironmentId | null; - href: string; - targetPath: string; - iconPath: string; - workspaceRelativePath: string | null; - panelPath: string | null; - line?: number | undefined; - label: string; - copyMarkdown: string; - theme: "light" | "dark"; - threadRef?: ScopedThreadRef | undefined; - onOpen?: (() => Promise>) | undefined; - onOpenInPanel: (panelPath: string, line: number | undefined) => void; - resolveCopyPaths: () => Promise>; - openInEditorMenuLabel: string; - onOpenInBrowser?: (() => Promise>) | undefined; - onOpenMedia?: (() => void) | undefined; - onReveal?: (() => Promise>) | undefined; - revealLabel?: string | undefined; -} - -const MARKDOWN_FILE_LINK_CLASS_NAME = "chat-markdown-file-link"; - function normalizeMarkdownLinkHrefKey(href: string): string { const normalizedHref = normalizeMarkdownLinkDestination(href); const rewrittenHref = rewriteMarkdownFileUriHref(normalizedHref) ?? normalizedHref; @@ -471,45 +380,6 @@ : rewrittenHref; } -const MARKDOWN_LINK_FAVICON_CLASS_NAME = "block size-full shrink-0 select-none"; - -const failedFaviconHosts = new Set(); - -function isGitHubHost(host: string): boolean { - const hostname = host.toLowerCase(); - return hostname === "github.com" || hostname.endsWith(".github.com"); -} - -const MarkdownLinkFavicon = memo(function MarkdownLinkFavicon({ host }: { host: string }) { - const [failedHost, setFailedHost] = useState(null); - const brandIcon = isGitHubHost(host); - const faviconUrl = brandIcon ? null : faviconUrlForOrigin(`https://${host}`); - return ( - - {brandIcon ? ( - - ) : faviconUrl === null || failedHost === host || failedFaviconHosts.has(host) ? ( - - ) : ( - { - failedFaviconHosts.add(host); - setFailedHost(host); - }} - /> - )} - - ); -}); - const CHAT_MARKDOWN_MEDIA_MAX_WIDTH_CLASS_NAME = "max-w-[min(100%,30rem)]"; const CHAT_MARKDOWN_MEDIA_BOUNDS_CLASS_NAME = cn( "max-h-[30rem]", @@ -952,171 +822,6 @@ ); }); -function leadingExternalLinkTextLength(text: string): number { - const protocol = /^(?:https?:\/\/)/i.exec(text)?.[0]; - if (protocol) return protocol.length; - return Math.min(text.length, 1); -} - -function breakableExternalLinkText(text: string): ReactNode[] { - return Array.from(text, (character, index) => ( - - {character} - - - )); -} - -function plainHastText(node: unknown): string | null { - if (!node || typeof node !== "object" || !("children" in node) || !Array.isArray(node.children)) { - return null; - } - const parts = node.children.map((child) => { - if ( - child && - typeof child === "object" && - "type" in child && - child.type === "text" && - "value" in child && - typeof child.value === "string" - ) { - return child.value; - } - return null; - }); - return parts.every((part) => part !== null) ? parts.join("") : null; -} - -function hastPlainTextDeep(node: unknown): string { - if (!node || typeof node !== "object") return ""; - if ("type" in node && node.type === "text" && "value" in node && typeof node.value === "string") { - return node.value; - } - if (!("children" in node) || !Array.isArray(node.children)) return ""; - return node.children.map(hastPlainTextDeep).join(""); -} - -function hastHasText(node: unknown): boolean { - if (!node || typeof node !== "object") return false; - if ( - "type" in node && - node.type === "text" && - "value" in node && - typeof node.value === "string" && - node.value.trim().length > 0 - ) { - return true; - } - return "children" in node && Array.isArray(node.children) && node.children.some(hastHasText); -} - -const SANITIZED_FRAGMENT_PREFIX = "user-content-"; - -function decodeMarkdownFragmentId(href: string): string { - const encodedId = href.slice(1); - try { - return decodeURIComponent(encodedId); - } catch { - return encodedId; - } -} - -function normalizeSanitizedFragmentId(id: string): string { - let normalizedId = id; - while (normalizedId.startsWith(SANITIZED_FRAGMENT_PREFIX)) { - normalizedId = normalizedId.slice(SANITIZED_FRAGMENT_PREFIX.length); - } - return normalizedId; -} - -function findMarkdownFragmentTarget(anchor: HTMLAnchorElement, href: string): HTMLElement | null { - const decodedId = decodeMarkdownFragmentId(href); - const normalizedId = normalizeSanitizedFragmentId(decodedId); - const matchesFragment = (element: HTMLElement) => - element.id === decodedId || normalizeSanitizedFragmentId(element.id) === normalizedId; - const markdownRoot = anchor.closest(".chat-markdown"); - if (markdownRoot) { - const localTargets = Array.from(markdownRoot.querySelectorAll("[id]")); - const localTarget = localTargets.find(matchesFragment); - if (localTarget) return localTarget; - } - - return ( - document.getElementById(decodedId) ?? - Array.from(document.querySelectorAll("[id]")).find(matchesFragment) ?? - null - ); -} - -function handleMarkdownFragmentClick(event: ReactMouseEvent, href: string) { - if ( - event.defaultPrevented || - event.button !== 0 || - event.metaKey || - event.ctrlKey || - event.shiftKey || - event.altKey - ) { - return; - } - - // Never let the browser follow the fragment or write it to the URL: desktop keeps - // its route in the hash, so replacing the hash navigates away from the thread. - event.preventDefault(); - findMarkdownFragmentTarget(event.currentTarget, href)?.scrollIntoView({ block: "start" }); -} - -type HeadingHastNode = { - type?: string; - tagName?: string; - properties?: Record; - children?: HeadingHastNode[]; -}; - -function githubHeadingSlug(text: string): string { - return text - .trim() - .toLowerCase() - .replace(/[^\p{L}\p{M}\p{N}\p{Pc} -]/gu, "") - .replace(/ /g, "-"); -} - -/** - * Like the sanitizer's ids, they carry the `user-content-` prefix so they cannot clobber app - * element ids; fragment lookup strips it. - */ -function rehypeHeadingIds() { - return (tree: HeadingHastNode) => { - const taken = new Set(); - const collect = (node: HeadingHastNode) => { - const id = node.properties?.id; - if (typeof id === "string") taken.add(id); - node.children?.forEach(collect); - }; - collect(tree); - const nextSuffix = new Map(); - const visit = (node: HeadingHastNode) => { - if (node.type === "element" && node.tagName && /^h[1-6]$/.test(node.tagName)) { - const slug = githubHeadingSlug(hastPlainTextDeep(node)); - if (node.properties?.id === undefined && slug) { - let count = nextSuffix.get(slug) ?? 0; - let id = `${SANITIZED_FRAGMENT_PREFIX}${slug}`; - while (taken.has(id)) { - count += 1; - id = `${SANITIZED_FRAGMENT_PREFIX}${slug}-${count}`; - } - nextSuffix.set(slug, count); - taken.add(id); - node.properties = { ...node.properties, id }; - } - return; - } - node.children?.forEach(visit); - }; - visit(tree); - }; -} - // Heading ids are added after sanitizing, which would prefix them a second time. const CHAT_MARKDOWN_RENDER_REHYPE_PLUGINS = [ ...CHAT_MARKDOWN_REHYPE_PLUGINS, @@ -1127,419 +832,6 @@ ReactMarkdownOptions["rehypePlugins"] >; -function MarkdownExternalLinkContent({ - host, - plainText, - children, -}: { - host: string; - plainText: string | null; - children: ReactNode; -}) { - if (plainText) { - const leadingLength = leadingExternalLinkTextLength(plainText); - return ( - <> - - - {plainText.slice(0, leadingLength)} - - {breakableExternalLinkText(plainText.slice(leadingLength))} - - ); - } - - const childNodes = Children.toArray(children); - const firstChild = childNodes[0]; - - if (typeof firstChild === "string" && firstChild.length > 0) { - const leadingLength = leadingExternalLinkTextLength(firstChild); - return ( - <> - - - {firstChild.slice(0, leadingLength)} - - {breakableExternalLinkText(firstChild.slice(leadingLength))} - {childNodes.slice(1)} - - ); - } - - return ( - <> - - - {firstChild} - - {childNodes.slice(1)} - - ); -} - -const MarkdownFileLink = memo(function MarkdownFileLink({ - environmentId, - href, - targetPath, - iconPath, - workspaceRelativePath, - panelPath, - line, - label, - copyMarkdown, - theme, - threadRef, - onOpen, - onOpenInPanel, - openInEditorMenuLabel, - onOpenInBrowser, - onOpenMedia, - onReveal, - revealLabel, - resolveCopyPaths, -}: MarkdownFileLinkProps) { - const handleOpenInEditor = () => { - if (!onOpen) { - return; - } - void (async () => { - try { - const result = await onOpen(); - if (result._tag === "Success" || isAtomCommandInterrupted(result)) { - return; - } - reportMarkdownActionFailure( - { operation: "open-file-in-editor", target: targetPath }, - result.cause, - ); - const error = squashAtomCommandFailure(result); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to open file", - description: error instanceof Error ? error.message : "An error occurred.", - }), - ); - } catch (cause) { - reportMarkdownActionFailure( - { operation: "open-file-in-editor", target: targetPath }, - cause, - ); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to open file", - description: cause instanceof Error ? cause.message : "An error occurred.", - }), - ); - } - })(); - }; - - const handleOpenInFilePreview = () => { - if (threadRef && panelPath) { - onOpenInPanel(panelPath, line); - return; - } - if (onOpenMedia) { - onOpenMedia(); - return; - } - handleOpenInEditor(); - }; - - const handleOpenInBrowser = () => { - if (!onOpenInBrowser) { - return; - } - void (async () => { - try { - const result = await onOpenInBrowser(); - if (result._tag === "Success" || isAtomCommandInterrupted(result)) { - return; - } - reportMarkdownActionFailure( - { operation: "open-file-in-browser", target: targetPath }, - result.cause, - ); - const error = squashAtomCommandFailure(result); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to open file in browser", - description: error instanceof Error ? error.message : "An error occurred.", - }), - ); - } catch (cause) { - reportMarkdownActionFailure( - { operation: "open-file-in-browser", target: targetPath }, - cause, - ); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to open file in browser", - description: cause instanceof Error ? cause.message : "An error occurred.", - }), - ); - } - })(); - }; - - const handleRevealInFileManager = () => { - if (!onReveal) { - return; - } - void (async () => { - try { - const result = await onReveal(); - if (result._tag === "Success" || isAtomCommandInterrupted(result)) { - return; - } - reportMarkdownActionFailure( - { operation: "reveal-file-in-file-manager", target: targetPath }, - result.cause, - ); - const error = squashAtomCommandFailure(result); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to reveal file", - description: error instanceof Error ? error.message : "An error occurred.", - }), - ); - } catch (cause) { - reportMarkdownActionFailure( - { operation: "reveal-file-in-file-manager", target: targetPath }, - cause, - ); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Unable to reveal file", - description: cause instanceof Error ? cause.message : "An error occurred.", - }), - ); - } - })(); - }; - - const handleCopy = (resolveValue: () => Promise, title: string) => { - if (typeof window === "undefined" || !navigator.clipboard?.writeText) { - toastManager.add( - stackedThreadToast({ - type: "error", - title: `Failed to copy ${title.toLowerCase()}`, - description: "Clipboard API unavailable.", - }), - ); - return; - } - - const value = resolveValue().then((text) => formatFilePathForClipboard(text, targetPath)); - // Start the write before workspace lookup finishes so Safari retains the user gesture. - const write = - typeof navigator.clipboard.write === "function" && typeof ClipboardItem !== "undefined" - ? navigator.clipboard.write([ - new ClipboardItem({ - "text/plain": value.then((text) => new Blob([text], { type: "text/plain" })), - }), - ]) - : value.then((text) => navigator.clipboard.writeText(text)); - void Promise.all([write, value]).then( - ([, text]) => { - toastManager.add({ - type: "success", - title: `${title} copied`, - description: text, - }); - }, - (error) => { - reportMarkdownActionFailure( - { operation: "copy-file-path", target: targetPath, copyTarget: title }, - error, - ); - toastManager.add( - stackedThreadToast({ - type: "error", - title: `Failed to copy ${title.toLowerCase()}`, - description: error instanceof Error ? error.message : "An error occurred.", - }), - ); - }, - ); - }; - - const showFileContextMenu = async (position: { x: number; y: number }) => { - const api = readLocalApi(); - if (!api) return; - - try { - const copyItems = markdownFileCopyMenuItems({ targetPath, workspaceRelativePath }); - const clicked = await api.contextMenu.show( - [ - ...(onOpenMedia ? ([{ id: "preview-media", label: "Preview media" }] as const) : []), - ...(onOpen ? ([{ id: "open", label: openInEditorMenuLabel }] as const) : []), - ...(onOpenInBrowser - ? ([{ id: "open-in-browser", label: "Open in integrated browser" }] as const) - : []), - ...(onReveal && revealLabel ? ([{ id: "reveal", label: revealLabel }] as const) : []), - ...copyItems.map(({ id, label }) => ({ id, label })), - ] as const, - position, - ); - - if (clicked === "preview-media") { - onOpenMedia?.(); - return; - } - if (clicked === "open") { - handleOpenInEditor(); - return; - } - if (clicked === "open-in-browser") { - handleOpenInBrowser(); - return; - } - if (clicked === "reveal") { - handleRevealInFileManager(); - return; - } - if (clicked === "copy-relative" || clicked === "copy-full") { - handleCopy( - () => - resolveCopyPaths().then((paths) => - clicked === "copy-relative" ? paths.relativePath : paths.fullPath, - ), - clicked === "copy-relative" ? "Relative path" : "Full path", - ); - } - } catch (cause) { - reportMarkdownActionFailure( - { operation: "show-file-context-menu", target: targetPath }, - cause, - ); - } - }; - - const handleContextMenu = (event: ReactMouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - const position = - event.clientX === 0 && event.clientY === 0 - ? (() => { - const bounds = event.currentTarget.getBoundingClientRect(); - return { x: bounds.left, y: bounds.bottom }; - })() - : { x: event.clientX, y: event.clientY }; - void showFileContextMenu(position); - }; - - const canOpenInEditor = onOpen !== undefined; - const canOpenInBrowser = onOpenInBrowser !== undefined; - const canOpenInPanel = threadRef !== undefined && Boolean(panelPath); - const hasPrimaryAction = hasMarkdownFilePrimaryAction({ - canOpenInEditor, - canOpenInBrowser, - canOpenInPanel, - canOpenMedia: onOpenMedia !== undefined, - }); - const useBrowserPrimaryAction = shouldUseMarkdownFileBrowserPrimaryAction({ - iconPath, - canOpenInEditor, - canOpenInBrowser, - canOpenInPanel, - }); - - return ( - - } - className={MARKDOWN_FILE_LINK_CLASS_NAME} - data-markdown-copy={copyMarkdown} - onClick={(event) => { - event.preventDefault(); - event.stopPropagation(); - if (onOpen && shouldOpenMarkdownFileLinkInEditor(event)) { - handleOpenInEditor(); - return; - } - if (useBrowserPrimaryAction) { - handleOpenInBrowser(); - return; - } - handleOpenInFilePreview(); - }} - onContextMenu={handleContextMenu} - > - - - ) : ( - } - aria-label={`File options for ${label}`} - aria-haspopup="menu" - className={cn(MARKDOWN_FILE_LINK_CLASS_NAME, "select-text")} - data-markdown-copy={copyMarkdown} - onClick={handleContextMenu} - onContextMenu={handleContextMenu} - > - - - ) - } - /> - -
- -
- - - ); -}, areMarkdownFileLinkPropsEqual); - -function areMarkdownFileLinkPropsEqual( - previous: Readonly, - next: Readonly, -): boolean { - return ( - previous.href === next.href && - previous.targetPath === next.targetPath && - previous.iconPath === next.iconPath && - previous.environmentId === next.environmentId && - previous.workspaceRelativePath === next.workspaceRelativePath && - previous.panelPath === next.panelPath && - previous.line === next.line && - previous.label === next.label && - previous.copyMarkdown === next.copyMarkdown && - previous.theme === next.theme && - previous.threadRef === next.threadRef && - previous.onOpen === next.onOpen && - previous.onOpenInPanel === next.onOpenInPanel && - previous.openInEditorMenuLabel === next.openInEditorMenuLabel && - previous.onOpenInBrowser === next.onOpenInBrowser && - previous.onOpenMedia === next.onOpenMedia && - previous.onReveal === next.onReveal && - previous.resolveCopyPaths === next.resolveCopyPaths && - previous.revealLabel === next.revealLabel - ); -} - const NO_MARKDOWN_EDITORS: ReadonlyArray = []; type MarkdownServerConfigFields = ReturnType; ``` ## apps/web/src/components/chat/MarkdownExternalLink.tsx Status: added; +110; −0 ```diff @@ -1,0 +1,110 @@ +import { faviconUrlForOrigin } from "@t3tools/shared/favicon"; +import { GlobeIcon } from "lucide-react"; +import { Children, Fragment, memo, useState, type ReactNode } from "react"; + +import { cn } from "../../lib/utils"; +import { GitHubIcon } from "../Icons"; + +const MARKDOWN_LINK_FAVICON_CLASS_NAME = "block size-full shrink-0 select-none"; + +const failedFaviconHosts = new Set(); + +function isGitHubHost(host: string): boolean { + const hostname = host.toLowerCase(); + return hostname === "github.com" || hostname.endsWith(".github.com"); +} + +const MarkdownLinkFavicon = memo(function MarkdownLinkFavicon({ host }: { host: string }) { + const [failedHost, setFailedHost] = useState(null); + const brandIcon = isGitHubHost(host); + const faviconUrl = brandIcon ? null : faviconUrlForOrigin(`https://${host}`); + return ( + + {brandIcon ? ( + + ) : faviconUrl === null || failedHost === host || failedFaviconHosts.has(host) ? ( + + ) : ( + { + failedFaviconHosts.add(host); + setFailedHost(host); + }} + /> + )} + + ); +}); + +function leadingExternalLinkTextLength(text: string): number { + const protocol = /^(?:https?:\/\/)/i.exec(text)?.[0]; + if (protocol) return protocol.length; + return Math.min(text.length, 1); +} + +function breakableExternalLinkText(text: string): ReactNode[] { + return Array.from(text, (character, index) => ( + + {character} + + + )); +} + +export function MarkdownExternalLinkContent({ + host, + plainText, + children, +}: { + host: string; + plainText: string | null; + children: ReactNode; +}) { + if (plainText) { + const leadingLength = leadingExternalLinkTextLength(plainText); + return ( + <> + + + {plainText.slice(0, leadingLength)} + + {breakableExternalLinkText(plainText.slice(leadingLength))} + + ); + } + + const childNodes = Children.toArray(children); + const firstChild = childNodes[0]; + + if (typeof firstChild === "string" && firstChild.length > 0) { + const leadingLength = leadingExternalLinkTextLength(firstChild); + return ( + <> + + + {firstChild.slice(0, leadingLength)} + + {breakableExternalLinkText(firstChild.slice(leadingLength))} + {childNodes.slice(1)} + + ); + } + + return ( + <> + + + {firstChild} + + {childNodes.slice(1)} + + ); +} ``` ## apps/web/src/components/chat/MarkdownFileLink.logic.ts Status: added; +62; −0 ```diff @@ -1,0 +1,62 @@ +import type { EnvironmentId } from "@t3tools/contracts"; +import { splitFilePathPosition } from "@t3tools/shared/fileLinks"; + +import { + shouldOpenMarkdownFileLinkInBrowserByDefault, + type MarkdownFileLinkMeta, +} from "../../markdown-links"; +import type { RemoteOpenMode } from "../../remoteOpen"; + +export function canUseMarkdownFileShellActions( + environmentId: EnvironmentId | null, + remoteOpenMode: RemoteOpenMode, + isRemoteOpenResolved: boolean, +): boolean { + return environmentId !== null && isRemoteOpenResolved && remoteOpenMode === "local-exec"; +} + +export function hasMarkdownFilePrimaryAction(input: { + canOpenInEditor: boolean; + canOpenInBrowser: boolean; + canOpenInPanel: boolean; + canOpenMedia?: boolean; +}): boolean { + return ( + input.canOpenInEditor || + input.canOpenInBrowser || + input.canOpenInPanel || + input.canOpenMedia === true + ); +} + +export function markdownFileCopyMenuItems({ + targetPath, + workspaceRelativePath, +}: Pick) { + const items = [ + { id: "copy-full", label: "Copy full path", value: targetPath, title: "Full path" }, + ]; + if (workspaceRelativePath !== null) { + const position = targetPath.slice(splitFilePathPosition(targetPath).path.length); + items.unshift({ + id: "copy-relative", + label: "Copy relative path", + value: `${workspaceRelativePath}${position}`, + title: "Relative path", + }); + } + return items; +} + +export function shouldUseMarkdownFileBrowserPrimaryAction(input: { + iconPath: string; + canOpenInEditor: boolean; + canOpenInBrowser: boolean; + canOpenInPanel: boolean; +}): boolean { + return ( + input.canOpenInBrowser && + (shouldOpenMarkdownFileLinkInBrowserByDefault(input.iconPath) || + (!input.canOpenInEditor && !input.canOpenInPanel)) + ); +} ``` ## apps/web/src/components/chat/MarkdownFileLink.tsx Status: added; +411; −0 ```diff @@ -1,0 +1,411 @@ +import { formatFilePathForClipboard } from "@t3tools/client-runtime/media-actions"; +import { + isAtomCommandInterrupted, + squashAtomCommandFailure, + type AtomCommandResult, +} from "@t3tools/client-runtime/state/runtime"; +import type { EnvironmentId, ScopedThreadRef } from "@t3tools/contracts"; +import { memo, type MouseEvent as ReactMouseEvent } from "react"; + +import { readLocalApi } from "../../localApi"; +import { cn } from "../../lib/utils"; +import { shouldOpenMarkdownFileLinkInEditor } from "../../markdown-links"; +import type { markdownFileCopyPaths } from "../../markdownFileHostPath"; +import { ContextChip } from "../ContextChip"; +import { stackedThreadToast, toastManager } from "../ui/toast"; +import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { FileTagChipContent } from "./FileTagChip"; +import { + hasMarkdownFilePrimaryAction, + markdownFileCopyMenuItems, + shouldUseMarkdownFileBrowserPrimaryAction, +} from "./MarkdownFileLink.logic"; +import { reportMarkdownActionFailure } from "./markdownActionFailure"; +import { WorkspaceEntryTooltip } from "./WorkspaceEntryIcon"; + +interface MarkdownFileLinkProps { + environmentId: EnvironmentId | null; + href: string; + targetPath: string; + iconPath: string; + workspaceRelativePath: string | null; + panelPath: string | null; + line?: number | undefined; + label: string; + copyMarkdown: string; + theme: "light" | "dark"; + threadRef?: ScopedThreadRef | undefined; + onOpen?: (() => Promise>) | undefined; + onOpenInPanel: (panelPath: string, line: number | undefined) => void; + resolveCopyPaths: () => Promise>; + openInEditorMenuLabel: string; + onOpenInBrowser?: (() => Promise>) | undefined; + onOpenMedia?: (() => void) | undefined; + onReveal?: (() => Promise>) | undefined; + revealLabel?: string | undefined; +} + +const MARKDOWN_FILE_LINK_CLASS_NAME = "chat-markdown-file-link"; + +export const MarkdownFileLink = memo(function MarkdownFileLink({ + environmentId, + href, + targetPath, + iconPath, + workspaceRelativePath, + panelPath, + line, + label, + copyMarkdown, + theme, + threadRef, + onOpen, + onOpenInPanel, + openInEditorMenuLabel, + onOpenInBrowser, + onOpenMedia, + onReveal, + revealLabel, + resolveCopyPaths, +}: MarkdownFileLinkProps) { + const handleOpenInEditor = () => { + if (!onOpen) { + return; + } + void (async () => { + try { + const result = await onOpen(); + if (result._tag === "Success" || isAtomCommandInterrupted(result)) { + return; + } + reportMarkdownActionFailure( + { operation: "open-file-in-editor", target: targetPath }, + result.cause, + ); + const error = squashAtomCommandFailure(result); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to open file", + description: error instanceof Error ? error.message : "An error occurred.", + }), + ); + } catch (cause) { + reportMarkdownActionFailure( + { operation: "open-file-in-editor", target: targetPath }, + cause, + ); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to open file", + description: cause instanceof Error ? cause.message : "An error occurred.", + }), + ); + } + })(); + }; + + const handleOpenInFilePreview = () => { + if (threadRef && panelPath) { + onOpenInPanel(panelPath, line); + return; + } + if (onOpenMedia) { + onOpenMedia(); + return; + } + handleOpenInEditor(); + }; + + const handleOpenInBrowser = () => { + if (!onOpenInBrowser) { + return; + } + void (async () => { + try { + const result = await onOpenInBrowser(); + if (result._tag === "Success" || isAtomCommandInterrupted(result)) { + return; + } + reportMarkdownActionFailure( + { operation: "open-file-in-browser", target: targetPath }, + result.cause, + ); + const error = squashAtomCommandFailure(result); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to open file in browser", + description: error instanceof Error ? error.message : "An error occurred.", + }), + ); + } catch (cause) { + reportMarkdownActionFailure( + { operation: "open-file-in-browser", target: targetPath }, + cause, + ); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to open file in browser", + description: cause instanceof Error ? cause.message : "An error occurred.", + }), + ); + } + })(); + }; + + const handleRevealInFileManager = () => { + if (!onReveal) { + return; + } + void (async () => { + try { + const result = await onReveal(); + if (result._tag === "Success" || isAtomCommandInterrupted(result)) { + return; + } + reportMarkdownActionFailure( + { operation: "reveal-file-in-file-manager", target: targetPath }, + result.cause, + ); + const error = squashAtomCommandFailure(result); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to reveal file", + description: error instanceof Error ? error.message : "An error occurred.", + }), + ); + } catch (cause) { + reportMarkdownActionFailure( + { operation: "reveal-file-in-file-manager", target: targetPath }, + cause, + ); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Unable to reveal file", + description: cause instanceof Error ? cause.message : "An error occurred.", + }), + ); + } + })(); + }; + + const handleCopy = (resolveValue: () => Promise, title: string) => { + if (typeof window === "undefined" || !navigator.clipboard?.writeText) { + toastManager.add( + stackedThreadToast({ + type: "error", + title: `Failed to copy ${title.toLowerCase()}`, + description: "Clipboard API unavailable.", + }), + ); + return; + } + + const value = resolveValue().then((text) => formatFilePathForClipboard(text, targetPath)); + // Start the write before workspace lookup finishes so Safari retains the user gesture. + const write = + typeof navigator.clipboard.write === "function" && typeof ClipboardItem !== "undefined" + ? navigator.clipboard.write([ + new ClipboardItem({ + "text/plain": value.then((text) => new Blob([text], { type: "text/plain" })), + }), + ]) + : value.then((text) => navigator.clipboard.writeText(text)); + void Promise.all([write, value]).then( + ([, text]) => { + toastManager.add({ + type: "success", + title: `${title} copied`, + description: text, + }); + }, + (error) => { + reportMarkdownActionFailure( + { operation: "copy-file-path", target: targetPath, copyTarget: title }, + error, + ); + toastManager.add( + stackedThreadToast({ + type: "error", + title: `Failed to copy ${title.toLowerCase()}`, + description: error instanceof Error ? error.message : "An error occurred.", + }), + ); + }, + ); + }; + + const showFileContextMenu = async (position: { x: number; y: number }) => { + const api = readLocalApi(); + if (!api) return; + + try { + const copyItems = markdownFileCopyMenuItems({ targetPath, workspaceRelativePath }); + const clicked = await api.contextMenu.show( + [ + ...(onOpenMedia ? ([{ id: "preview-media", label: "Preview media" }] as const) : []), + ...(onOpen ? ([{ id: "open", label: openInEditorMenuLabel }] as const) : []), + ...(onOpenInBrowser + ? ([{ id: "open-in-browser", label: "Open in integrated browser" }] as const) + : []), + ...(onReveal && revealLabel ? ([{ id: "reveal", label: revealLabel }] as const) : []), + ...copyItems.map(({ id, label }) => ({ id, label })), + ] as const, + position, + ); + + if (clicked === "preview-media") { + onOpenMedia?.(); + return; + } + if (clicked === "open") { + handleOpenInEditor(); + return; + } + if (clicked === "open-in-browser") { + handleOpenInBrowser(); + return; + } + if (clicked === "reveal") { + handleRevealInFileManager(); + return; + } + if (clicked === "copy-relative" || clicked === "copy-full") { + handleCopy( + () => + resolveCopyPaths().then((paths) => + clicked === "copy-relative" ? paths.relativePath : paths.fullPath, + ), + clicked === "copy-relative" ? "Relative path" : "Full path", + ); + } + } catch (cause) { + reportMarkdownActionFailure( + { operation: "show-file-context-menu", target: targetPath }, + cause, + ); + } + }; + + const handleContextMenu = (event: ReactMouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + const position = + event.clientX === 0 && event.clientY === 0 + ? (() => { + const bounds = event.currentTarget.getBoundingClientRect(); + return { x: bounds.left, y: bounds.bottom }; + })() + : { x: event.clientX, y: event.clientY }; + void showFileContextMenu(position); + }; + + const canOpenInEditor = onOpen !== undefined; + const canOpenInBrowser = onOpenInBrowser !== undefined; + const canOpenInPanel = threadRef !== undefined && Boolean(panelPath); + const hasPrimaryAction = hasMarkdownFilePrimaryAction({ + canOpenInEditor, + canOpenInBrowser, + canOpenInPanel, + canOpenMedia: onOpenMedia !== undefined, + }); + const useBrowserPrimaryAction = shouldUseMarkdownFileBrowserPrimaryAction({ + iconPath, + canOpenInEditor, + canOpenInBrowser, + canOpenInPanel, + }); + + return ( + + } + className={MARKDOWN_FILE_LINK_CLASS_NAME} + data-markdown-copy={copyMarkdown} + onClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + if (onOpen && shouldOpenMarkdownFileLinkInEditor(event)) { + handleOpenInEditor(); + return; + } + if (useBrowserPrimaryAction) { + handleOpenInBrowser(); + return; + } + handleOpenInFilePreview(); + }} + onContextMenu={handleContextMenu} + > + + + ) : ( + } + aria-label={`File options for ${label}`} + aria-haspopup="menu" + className={cn(MARKDOWN_FILE_LINK_CLASS_NAME, "select-text")} + data-markdown-copy={copyMarkdown} + onClick={handleContextMenu} + onContextMenu={handleContextMenu} + > + + + ) + } + /> + +
+ +
+ + + ); +}, areMarkdownFileLinkPropsEqual); + +function areMarkdownFileLinkPropsEqual( + previous: Readonly, + next: Readonly, +): boolean { + return ( + previous.href === next.href && + previous.targetPath === next.targetPath && + previous.iconPath === next.iconPath && + previous.environmentId === next.environmentId && + previous.workspaceRelativePath === next.workspaceRelativePath && + previous.panelPath === next.panelPath && + previous.line === next.line && + previous.label === next.label && + previous.copyMarkdown === next.copyMarkdown && + previous.theme === next.theme && + previous.threadRef === next.threadRef && + previous.onOpen === next.onOpen && + previous.onOpenInPanel === next.onOpenInPanel && + previous.openInEditorMenuLabel === next.openInEditorMenuLabel && + previous.onOpenInBrowser === next.onOpenInBrowser && + previous.onOpenMedia === next.onOpenMedia && + previous.onReveal === next.onReveal && + previous.resolveCopyPaths === next.resolveCopyPaths && + previous.revealLabel === next.revealLabel + ); +} ``` ## apps/web/src/components/chat/markdownFragments.ts Status: added; +113; −0 ```diff @@ -1,0 +1,113 @@ +import type { MouseEvent as ReactMouseEvent } from "react"; + +import { hastPlainTextDeep } from "./markdownHast.logic"; + +const SANITIZED_FRAGMENT_PREFIX = "user-content-"; + +function decodeMarkdownFragmentId(href: string): string { + const encodedId = href.slice(1); + try { + return decodeURIComponent(encodedId); + } catch { + return encodedId; + } +} + +function normalizeSanitizedFragmentId(id: string): string { + let normalizedId = id; + while (normalizedId.startsWith(SANITIZED_FRAGMENT_PREFIX)) { + normalizedId = normalizedId.slice(SANITIZED_FRAGMENT_PREFIX.length); + } + return normalizedId; +} + +function findMarkdownFragmentTarget(anchor: HTMLAnchorElement, href: string): HTMLElement | null { + const decodedId = decodeMarkdownFragmentId(href); + const normalizedId = normalizeSanitizedFragmentId(decodedId); + const matchesFragment = (element: HTMLElement) => + element.id === decodedId || normalizeSanitizedFragmentId(element.id) === normalizedId; + const markdownRoot = anchor.closest(".chat-markdown"); + if (markdownRoot) { + const localTargets = Array.from(markdownRoot.querySelectorAll("[id]")); + const localTarget = localTargets.find(matchesFragment); + if (localTarget) return localTarget; + } + + return ( + document.getElementById(decodedId) ?? + Array.from(document.querySelectorAll("[id]")).find(matchesFragment) ?? + null + ); +} + +export function handleMarkdownFragmentClick( + event: ReactMouseEvent, + href: string, +) { + if ( + event.defaultPrevented || + event.button !== 0 || + event.metaKey || + event.ctrlKey || + event.shiftKey || + event.altKey + ) { + return; + } + + // Never let the browser follow the fragment or write it to the URL: desktop keeps + // its route in the hash, so replacing the hash navigates away from the thread. + event.preventDefault(); + findMarkdownFragmentTarget(event.currentTarget, href)?.scrollIntoView({ block: "start" }); +} + +type HeadingHastNode = { + type?: string; + tagName?: string; + properties?: Record; + children?: HeadingHastNode[]; +}; + +function githubHeadingSlug(text: string): string { + return text + .trim() + .toLowerCase() + .replace(/[^\p{L}\p{M}\p{N}\p{Pc} -]/gu, "") + .replace(/ /g, "-"); +} + +/** + * Like the sanitizer's ids, they carry the `user-content-` prefix so they cannot clobber app + * element ids; fragment lookup strips it. + */ +export function rehypeHeadingIds() { + return (tree: HeadingHastNode) => { + const taken = new Set(); + const collect = (node: HeadingHastNode) => { + const id = node.properties?.id; + if (typeof id === "string") taken.add(id); + node.children?.forEach(collect); + }; + collect(tree); + const nextSuffix = new Map(); + const visit = (node: HeadingHastNode) => { + if (node.type === "element" && node.tagName && /^h[1-6]$/.test(node.tagName)) { + const slug = githubHeadingSlug(hastPlainTextDeep(node)); + if (node.properties?.id === undefined && slug) { + let count = nextSuffix.get(slug) ?? 0; + let id = `${SANITIZED_FRAGMENT_PREFIX}${slug}`; + while (taken.has(id)) { + count += 1; + id = `${SANITIZED_FRAGMENT_PREFIX}${slug}-${count}`; + } + nextSuffix.set(slug, count); + taken.add(id); + node.properties = { ...node.properties, id }; + } + return; + } + node.children?.forEach(visit); + }; + visit(tree); + }; +} ``` ## apps/web/src/components/chat/markdownHast.logic.ts Status: added; +42; −0 ```diff @@ -1,0 +1,42 @@ +export function plainHastText(node: unknown): string | null { + if (!node || typeof node !== "object" || !("children" in node) || !Array.isArray(node.children)) { + return null; + } + const parts = node.children.map((child) => { + if ( + child && + typeof child === "object" && + "type" in child && + child.type === "text" && + "value" in child && + typeof child.value === "string" + ) { + return child.value; + } + return null; + }); + return parts.every((part) => part !== null) ? parts.join("") : null; +} + +export function hastPlainTextDeep(node: unknown): string { + if (!node || typeof node !== "object") return ""; + if ("type" in node && node.type === "text" && "value" in node && typeof node.value === "string") { + return node.value; + } + if (!("children" in node) || !Array.isArray(node.children)) return ""; + return node.children.map(hastPlainTextDeep).join(""); +} + +export function hastHasText(node: unknown): boolean { + if (!node || typeof node !== "object") return false; + if ( + "type" in node && + node.type === "text" && + "value" in node && + typeof node.value === "string" && + node.value.trim().length > 0 + ) { + return true; + } + return "children" in node && Array.isArray(node.children) && node.children.some(hastHasText); +} ```