@nextclaw/ui 0.15.3 → 0.15.5

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -2,7 +2,6 @@ import { useMemo } from "react";
 import type {
   ChatFileOpenActionViewModel,
   ChatFileOperationBlockViewModel,
-  ChatFilePreviewViewer,
 } from "@nextclaw/agent-chat-ui";
 import {
   ChatMessageMarkdown,
@@ -11,6 +10,11 @@ import {
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { ChatSessionWorkspaceDirectoryBrowser } from "./chat-session-workspace-directory-browser";
 import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
+import {
+  resolveWorkspaceFileContentKind,
+  WorkspaceFileContentPreview,
+  type WorkspaceFileContentKind,
+} from "./workspace-file-content-preview";
 import { useServerPathBrowse } from "@/shared/hooks/use-server-path-browse";
 import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
@@ -21,6 +25,7 @@ import {
 import { t } from "@/shared/lib/i18n";
 import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";
+import { resolveWorkspaceFileViewer } from "@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils";
 
 function inferPreviewKind(params: {
   path: string;
@@ -32,40 +37,10 @@ function inferPreviewKind(params: {
   return /\.mdx?$/i.test(params.path) ? "markdown" : "text";
 }
 
-function resolveFilePreviewViewer(params: {
-  path: string;
-  viewer?: ChatFilePreviewViewer | null;
-}): "source" | "rendered" {
-  return params.viewer === "rendered" && /\.html?$/i.test(params.path) ? "rendered" : "source";
-}
-
-type ContentUrlPreviewKind = "image" | "audio" | "video" | "pdf" | "html" | "other";
-
-function resolveContentUrlPreviewKind(params: {
-  path: string;
-  mimeType?: string | null;
-}): ContentUrlPreviewKind {
-  const mime = params.mimeType?.trim().toLowerCase() ?? "";
-  const path = params.path.trim().toLowerCase();
-  if (mime.startsWith("image/") || /\.(avif|bmp|gif|heic|heif|ico|jpe?g|png|svg|tiff?|webp)$/i.test(path)) {
-    return "image";
-  }
-  if (mime.startsWith("audio/") || /\.(aac|flac|m4a|mp3|ogg|opus|wav|weba)$/i.test(path)) {
-    return "audio";
-  }
-  if (mime.startsWith("video/") || /\.(avi|m4v|mkv|mov|mp4|webm|wmv)$/i.test(path)) {
-    return "video";
-  }
-  if (mime.includes("pdf") || path.endsWith(".pdf")) {
-    return "pdf";
-  }
-  if (mime.includes("html") || /\.html?$/i.test(path)) {
-    return "html";
-  }
-  return "other";
-}
-
-function appendPreviewRefreshVersion(url: string, refreshVersion: number): string {
+function appendPreviewRefreshVersion(
+  url: string,
+  refreshVersion: number,
+): string {
   if (refreshVersion <= 0) {
     return url;
   }
@@ -76,10 +51,10 @@ function buildPreviewBlock(params: {
   path: string;
   text: string;
   languageHint?: string | null;
-  line?: number | null;
+  startLine?: number | null;
 }): ChatFileOperationBlockViewModel {
-  const { languageHint, line, path, text } = params;
-  const startLine = line ?? 1;
+  const { languageHint, path, startLine, text } = params;
+  const normalizedStartLine = startLine ?? 1;
   return {
     key: `preview:${path}`,
     path,
@@ -87,13 +62,13 @@ function buildPreviewBlock(params: {
     lines: buildPreviewLines({
       text,
       kind: "context",
-      oldStartLine: startLine,
-      newStartLine: startLine,
+      oldStartLine: normalizedStartLine,
+      newStartLine: normalizedStartLine,
     }),
     rawText: text,
     languageHint: languageHint ?? null,
-    oldStartLine: startLine,
-    newStartLine: startLine,
+    oldStartLine: normalizedStartLine,
+    newStartLine: normalizedStartLine,
   };
 }
 
@@ -179,122 +154,21 @@ function WorkspaceDiffBody({
 
 function WorkspaceCodeSurface({
   block,
+  targetColumn,
+  targetLine,
 }: {
   block: ChatFileOperationBlockViewModel;
-}) {
-  return <div className="h-full overflow-auto custom-scrollbar bg-white"><FileOperationCodeSurface block={block} layout="workspace" /></div>;
-}
-
-function WorkspaceHtmlRenderedPreview({
-  src,
-}: {
-  src: string;
+  targetColumn?: number | null;
+  targetLine?: number | null;
 }) {
   return (
-    <iframe
-      allowFullScreen
-      className="h-full w-full border-0 bg-white"
-      data-testid="workspace-html-preview"
-      src={src}
-      title={t("chatWorkspaceHtmlPreviewTitle")}
-    />
-  );
-}
-
-function WorkspaceContentUrlPreview({
-  contentUrl,
-  kind,
-  label,
-}: {
-  contentUrl: string;
-  kind: ContentUrlPreviewKind;
-  label: string;
-}) {
-  if (kind === "image") {
-    return (
-      <div className="flex h-full items-center justify-center overflow-auto custom-scrollbar bg-white p-4">
-        <img
-          src={contentUrl}
-          alt={label}
-          className="max-h-full max-w-full object-contain"
-          data-testid="workspace-content-image"
-        />
-      </div>
-    );
-  }
-  if (kind === "audio") {
-    return (
-      <div className="flex h-full items-center justify-center bg-white px-6">
-        <audio
-          controls
-          preload="metadata"
-          aria-label={label}
-          className="w-full max-w-xl"
-          data-testid="workspace-content-audio"
-          src={contentUrl}
-        />
-      </div>
-    );
-  }
-  if (kind === "video") {
-    return (
-      <div className="flex h-full items-center justify-center bg-black">
-        <video
-          controls
-          playsInline
-          preload="metadata"
-          aria-label={label}
-          className="max-h-full max-w-full"
-          data-testid="workspace-content-video"
-          src={contentUrl}
-        />
-      </div>
-    );
-  }
-  if (kind === "pdf" || kind === "html") {
-    return (
-      <iframe
-        allowFullScreen
-        className="h-full w-full border-0 bg-white"
-        data-testid={kind === "pdf" ? "workspace-content-pdf" : "workspace-html-preview"}
-        src={contentUrl}
-        title={label}
+    <div className="h-full overflow-auto custom-scrollbar bg-white">
+      <FileOperationCodeSurface
+        block={block}
+        layout="workspace"
+        targetColumn={targetColumn}
+        targetLine={targetLine}
       />
-    );
-  }
-  return (
-    <div
-      className="flex h-full flex-col items-center justify-center gap-4 px-6 text-center"
-      data-testid="workspace-content-unsupported"
-    >
-      <div className="max-w-sm space-y-1.5">
-        <p className="truncate text-sm font-medium text-foreground" title={label}>
-          {label}
-        </p>
-        <p className="text-sm text-muted-foreground">
-          {t("chatWorkspacePreviewUnsupported")}
-        </p>
-        <p className="text-xs leading-5 text-muted-foreground/80">
-          {t("chatWorkspacePreviewUnsupportedHint")}
-        </p>
-      </div>
-      <div className="flex flex-wrap items-center justify-center gap-2">
-        <a
-          href={contentUrl}
-          download={label}
-          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted"
-        >
-          {t("chatWorkspacePreviewDownload")}
-        </a>
-        <a
-          href={contentUrl}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-        >
-          {t("chatWorkspacePreviewOpenExternally")}
-        </a>
-      </div>
     </div>
   );
 }
@@ -304,29 +178,33 @@ function WorkspacePreviewBody({
   contentUrlKind,
   contentLabel,
   directoryQuery,
+  fileBasePath,
   onFileOpen,
   previewBlock,
   previewKind,
+  previewViewer,
   previewQuery,
   previewText,
-  previewUrl,
-  previewViewer,
+  targetColumn,
+  targetLine,
 }: {
   contentUrl: string | null;
-  contentUrlKind: ContentUrlPreviewKind | null;
+  contentUrlKind: WorkspaceFileContentKind | null;
   contentLabel: string;
   directoryQuery: ReturnType<typeof useServerPathBrowse> | null | undefined;
+  fileBasePath: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: "text" | "markdown" | "binary";
+  previewViewer: "source" | "rendered" | null;
   previewQuery: ReturnType<typeof useServerPathRead> | null | undefined;
   previewText: string | null;
-  previewUrl: string | null;
-  previewViewer: "source" | "rendered";
+  targetColumn?: number | null;
+  targetLine?: number | null;
 }) {
   if (contentUrl && contentUrlKind) {
     return (
-      <WorkspaceContentUrlPreview
+      <WorkspaceFileContentPreview
         contentUrl={contentUrl}
         kind={contentUrlKind}
         label={contentLabel}
@@ -375,11 +253,7 @@ function WorkspacePreviewBody({
     );
   }
 
-  if (previewViewer === "rendered" && previewUrl) {
-    return <WorkspaceHtmlRenderedPreview src={previewUrl} />;
-  }
-
-  if (previewKind === "markdown" && previewText) {
+  if (previewKind === "markdown" && previewViewer !== "source" && previewText) {
     return (
       <div className="h-full overflow-auto custom-scrollbar px-5 py-4">
         <ChatMessageMarkdown
@@ -390,13 +264,22 @@ function WorkspacePreviewBody({
             copiedCodeLabel: t("chatCodeCopied"),
           }}
           onFileOpen={onFileOpen}
+          resolveFileContentUrl={(action) =>
+            buildServerPathContentUrl(action.path, fileBasePath)
+          }
         />
       </div>
     );
   }
 
   if (previewBlock) {
-    return <WorkspaceCodeSurface block={previewBlock} />;
+    return (
+      <WorkspaceCodeSurface
+        block={previewBlock}
+        targetColumn={targetColumn}
+        targetLine={targetLine}
+      />
+    );
   }
 
   return <WorkspaceFilePreviewStatus text={t("chatWorkspacePreviewEmpty")} />;
@@ -407,6 +290,7 @@ type ChatSessionWorkspaceFilePreviewProps = {
   refreshVersion?: number;
   sessionProjectRoot: string | null;
   sessionWorkingDir: string | null;
+  showBreadcrumbs?: boolean;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
 };
 
@@ -415,14 +299,16 @@ export function ChatSessionWorkspaceFilePreview({
   refreshVersion = 0,
   sessionProjectRoot,
   sessionWorkingDir,
+  showBreadcrumbs = true,
   onFileOpen,
 }: ChatSessionWorkspaceFilePreviewProps) {
   const isPreviewMode = file.viewMode === "preview";
-  const contentUrl = file.contentUrl?.trim() || null;
-  const usesServerPath = isPreviewMode && !contentUrl;
+  const suppliedContentUrl = file.contentUrl?.trim() || null;
+  const usesServerPath = isPreviewMode && !suppliedContentUrl;
   const previewQuery = useServerPathRead({
     path: file.path,
     basePath: sessionWorkingDir,
+    line: file.line,
     enabled: usesServerPath,
   });
   const directoryQuery = useServerPathBrowse({
@@ -435,14 +321,15 @@ export function ChatSessionWorkspaceFilePreview({
     () => (file.viewMode === "diff" ? buildDiffBlock(file) : null),
     [file],
   );
-  const previewText =
-    isPreviewMode ? previewQuery?.data?.text ?? file.rawText ?? null : null;
+  const previewText = isPreviewMode
+    ? (previewQuery?.data?.text ?? file.rawText ?? null)
+    : null;
   const previewKind = inferPreviewKind({
     path: previewQuery?.data?.resolvedPath ?? file.path,
     serverKind: previewQuery?.data?.kind,
   });
-  const contentUrlKind = contentUrl
-    ? resolveContentUrlPreviewKind({
+  const suppliedContentKind = suppliedContentUrl
+    ? resolveWorkspaceFileContentKind({
         path: file.path,
         mimeType: file.mimeType,
       })
@@ -452,17 +339,32 @@ export function ChatSessionWorkspaceFilePreview({
     previewQuery?.data?.resolvedPath ??
     file.path;
   const previewPathKind = directoryQuery?.data ? "directory" : "file";
-  const previewViewer = resolveFilePreviewViewer({
+  const previewViewer = resolveWorkspaceFileViewer(
+    resolvedPath,
+    file.previewViewer,
+  );
+  const localContentKind = resolveWorkspaceFileContentKind({
     path: resolvedPath,
-    viewer: file.previewViewer,
   });
-  const previewUrl =
-    previewViewer === "rendered" && previewQuery?.data?.resolvedPath
-      ? appendPreviewRefreshVersion(
-          buildServerPathContentUrl(previewQuery.data.resolvedPath),
-          refreshVersion,
-        )
+  const localContentUrlCandidate = buildServerPathContentUrl(
+    file.path,
+    sessionWorkingDir,
+  );
+  const shouldRenderLocalContent = Boolean(
+    !suppliedContentUrl &&
+    isPreviewMode &&
+    localContentUrlCandidate &&
+    file.previewViewer !== "source" &&
+    localContentKind !== "other" &&
+    (localContentKind !== "html" || previewViewer === "rendered"),
+  );
+  const localContentUrl =
+    shouldRenderLocalContent && localContentUrlCandidate
+      ? appendPreviewRefreshVersion(localContentUrlCandidate, refreshVersion)
       : null;
+  const contentUrl = suppliedContentUrl ?? localContentUrl;
+  const contentUrlKind =
+    suppliedContentKind ?? (localContentUrl ? localContentKind : null);
   const previewBlock = useMemo(() => {
     if (!isPreviewMode || !previewText || contentUrl) {
       return null;
@@ -471,18 +373,18 @@ export function ChatSessionWorkspaceFilePreview({
       path: previewQuery?.data?.resolvedPath ?? file.path,
       text: previewText,
       languageHint: previewQuery?.data?.languageHint ?? null,
-      line: file.line,
+      startLine: previewQuery?.data?.startLine ?? 1,
     });
   }, [
     contentUrl,
-    file.line,
     file.path,
     isPreviewMode,
     previewQuery?.data?.languageHint,
     previewQuery?.data?.resolvedPath,
+    previewQuery?.data?.startLine,
     previewText,
   ]);
-  const isTruncated = Boolean(previewQuery?.data?.truncated);
+  const isTextPreviewTruncated = !contentUrl && Boolean(previewQuery?.data?.truncated);
   const breadcrumbBasePath = sessionProjectRoot ?? sessionWorkingDir;
   const breadcrumb = useMemo(
     () =>
@@ -490,15 +392,11 @@ export function ChatSessionWorkspaceFilePreview({
         path: resolvedPath,
         kind: previewPathKind,
         sessionProjectRoot: breadcrumbBasePath,
-        line: file.line,
-        column: file.column,
-        truncated: isTruncated,
+        truncated: isTextPreviewTruncated,
       }),
     [
       breadcrumbBasePath,
-      file.column,
-      file.line,
-      isTruncated,
+      isTextPreviewTruncated,
       previewPathKind,
       resolvedPath,
     ],
@@ -506,10 +404,12 @@ export function ChatSessionWorkspaceFilePreview({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-white">
-      <ChatSessionWorkspaceFileBreadcrumbs
-        breadcrumb={breadcrumb}
-        onFileOpen={onFileOpen}
-      />
+      {showBreadcrumbs ? (
+        <ChatSessionWorkspaceFileBreadcrumbs
+          breadcrumb={breadcrumb}
+          onFileOpen={onFileOpen}
+        />
+      ) : null}
 
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === "diff" ? (
@@ -520,13 +420,15 @@ export function ChatSessionWorkspaceFilePreview({
             contentUrlKind={contentUrlKind}
             contentLabel={file.label?.trim() || resolvedPath}
             directoryQuery={directoryQuery}
+            fileBasePath={sessionWorkingDir}
             onFileOpen={onFileOpen}
             previewBlock={previewBlock}
             previewKind={previewKind}
+            previewViewer={previewViewer}
             previewQuery={previewQuery}
             previewText={previewText}
-            previewUrl={previewUrl}
-            previewViewer={previewViewer}
+            targetColumn={file.column}
+            targetLine={file.line}
           />
         )}
       </div>