@nextclaw/ui 0.15.3 → 0.15.5

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

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+import "./workspace-docx-preview.css";
+
+function applyResponsiveDocxFallback(container: HTMLDivElement): void {
+  const pages = Array.from(
+    container.querySelectorAll<HTMLElement>(".docx-wrapper > section.docx"),
+  );
+  const needsFallback = pages.some(
+    (page) => !page.style.width && !page.style.padding,
+  );
+  container.classList.toggle("workspace-docx-preview--reflow", needsFallback);
+  if (!needsFallback) {
+    return;
+  }
+  for (const table of container.querySelectorAll<HTMLTableElement>("table")) {
+    if (table.querySelectorAll("col").length < 5) {
+      continue;
+    }
+    const scrollContainer = document.createElement("div");
+    scrollContainer.className = "workspace-docx-wide-table";
+    table.before(scrollContainer);
+    scrollContainer.append(table);
+  }
+}
+
+export function WorkspaceDocxPreview({ contentUrl }: { contentUrl: string }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [renderState, setRenderState] = useState<{
+    contentUrl: string;
+    status: "ready" | "error";
+  } | null>(null);
+  const renderStatus =
+    renderState?.contentUrl === contentUrl ? renderState.status : "loading";
+  const status =
+    fileBuffer.status === "ready" ? renderStatus : fileBuffer.status;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !fileBuffer.data) {
+      return undefined;
+    }
+    let disposed = false;
+    container.replaceChildren();
+    void import("docx-preview")
+      .then(async (docxPreview) => {
+        await docxPreview.renderAsync(
+          fileBuffer.data as ArrayBuffer,
+          container,
+          container,
+          {
+            breakPages: true,
+            inWrapper: true,
+            ignoreLastRenderedPageBreak: false,
+          },
+        );
+        if (!disposed) {
+          applyResponsiveDocxFallback(container);
+          setRenderState({ contentUrl, status: "ready" });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!disposed) {
+          console.error("Failed to render DOCX preview", error);
+          setRenderState({ contentUrl, status: "error" });
+        }
+      });
+
+    return () => {
+      disposed = true;
+      container.replaceChildren();
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div className="relative h-full overflow-auto bg-muted/40 p-4 custom-scrollbar">
+      <WorkspaceDocumentPreviewState status={status} />
+      <div
+        ref={containerRef}
+        className="workspace-docx-preview min-h-full"
+        data-testid="workspace-content-docx"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+
+export function WorkspacePresentationPreview({
+  contentUrl,
+}: {
+  contentUrl: string;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [renderState, setRenderState] = useState<{
+    contentUrl: string;
+    status: "ready" | "error";
+  } | null>(null);
+  const renderStatus =
+    renderState?.contentUrl === contentUrl ? renderState.status : "loading";
+  const status =
+    fileBuffer.status === "ready" ? renderStatus : fileBuffer.status;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !fileBuffer.data) {
+      return undefined;
+    }
+    const abortController = new AbortController();
+    let viewer: { destroy: () => void } | null = null;
+    container.replaceChildren();
+    void import("@aiden0z/pptx-renderer")
+      .then(async ({ PptxViewer, RECOMMENDED_ZIP_LIMITS }) => {
+        viewer = await PptxViewer.open(
+          fileBuffer.data as ArrayBuffer,
+          container,
+          {
+            renderMode: "list",
+            fitMode: "contain",
+            lazySlides: true,
+            lazyMedia: true,
+            pdfjs: false,
+            scrollContainer: container,
+            signal: abortController.signal,
+            zipLimits: RECOMMENDED_ZIP_LIMITS,
+            listOptions: {
+              windowed: true,
+              batchSize: 8,
+              initialSlides: 4,
+              overscanViewport: 1.5,
+            },
+          },
+        );
+        if (abortController.signal.aborted) {
+          viewer.destroy();
+          viewer = null;
+          return;
+        }
+        setRenderState({ contentUrl, status: "ready" });
+      })
+      .catch((error: unknown) => {
+        if (!abortController.signal.aborted) {
+          console.error("Failed to render presentation preview", error);
+          setRenderState({ contentUrl, status: "error" });
+        }
+      });
+
+    return () => {
+      abortController.abort();
+      viewer?.destroy();
+      container.replaceChildren();
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div className="relative h-full bg-muted/40">
+      <WorkspaceDocumentPreviewState status={status} />
+      <div
+        ref={containerRef}
+        className="h-full overflow-auto p-4 custom-scrollbar"
+        data-testid="workspace-content-presentation"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,180 @@
+import { useEffect, useState } from "react";
+import { useWorkspaceFileBuffer } from "./use-workspace-file-buffer";
+import { WorkspaceDocumentPreviewState } from "./workspace-document-preview-state";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const MAX_PREVIEW_ROWS = 500;
+const MAX_PREVIEW_COLUMNS = 100;
+
+type SpreadsheetSheet = {
+  name: string;
+  rows: string[][];
+  columnCount: number;
+  truncated: boolean;
+};
+
+type SpreadsheetState = {
+  contentUrl: string;
+  status: "ready" | "error";
+  sheets: SpreadsheetSheet[];
+};
+
+function spreadsheetColumnLabel(index: number): string {
+  let label = "";
+  let value = index + 1;
+  while (value > 0) {
+    value -= 1;
+    label = String.fromCharCode(65 + (value % 26)) + label;
+    value = Math.floor(value / 26);
+  }
+  return label;
+}
+
+export function WorkspaceSpreadsheetPreview({
+  contentUrl,
+}: {
+  contentUrl: string;
+}) {
+  const fileBuffer = useWorkspaceFileBuffer(contentUrl);
+  const [spreadsheetState, setSpreadsheetState] =
+    useState<SpreadsheetState | null>(null);
+  const [selectedSheetName, setSelectedSheetName] = useState("");
+  const currentState =
+    spreadsheetState?.contentUrl === contentUrl ? spreadsheetState : null;
+  const status =
+    fileBuffer.status === "ready"
+      ? (currentState?.status ?? "loading")
+      : fileBuffer.status;
+  const activeSheet =
+    currentState?.sheets.find((sheet) => sheet.name === selectedSheetName) ??
+    currentState?.sheets[0] ??
+    null;
+
+  useEffect(() => {
+    if (!fileBuffer.data) {
+      return undefined;
+    }
+    let disposed = false;
+    void import("xlsx")
+      .then((xlsx) => {
+        const workbook = xlsx.read(fileBuffer.data as ArrayBuffer, {
+          dense: true,
+          sheetRows: MAX_PREVIEW_ROWS + 1,
+        });
+        const sheets = workbook.SheetNames.map((name) => {
+          const worksheet = workbook.Sheets[name];
+          const allRows = worksheet
+            ? xlsx.utils.sheet_to_json<unknown[]>(worksheet, {
+                header: 1,
+                raw: false,
+                defval: "",
+                blankrows: false,
+              })
+            : [];
+          const rows = allRows
+            .slice(0, MAX_PREVIEW_ROWS)
+            .map((row) =>
+              row
+                .slice(0, MAX_PREVIEW_COLUMNS)
+                .map((cell) => String(cell ?? "")),
+            );
+          return {
+            name,
+            rows,
+            columnCount: Math.min(
+              MAX_PREVIEW_COLUMNS,
+              rows.reduce((maximum, row) => Math.max(maximum, row.length), 0),
+            ),
+            truncated:
+              allRows.length > MAX_PREVIEW_ROWS ||
+              allRows.some((row) => row.length > MAX_PREVIEW_COLUMNS),
+          };
+        });
+        if (!disposed) {
+          setSpreadsheetState({ contentUrl, status: "ready", sheets });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!disposed) {
+          console.error("Failed to render spreadsheet preview", error);
+          setSpreadsheetState({ contentUrl, status: "error", sheets: [] });
+        }
+      });
+    return () => {
+      disposed = true;
+    };
+  }, [contentUrl, fileBuffer.data]);
+
+  return (
+    <div
+      className="relative flex h-full min-h-0 flex-col bg-white"
+      data-testid="workspace-content-spreadsheet"
+    >
+      <WorkspaceDocumentPreviewState status={status} />
+      {currentState && currentState.sheets.length > 1 ? (
+        <div className="flex shrink-0 gap-1 overflow-x-auto border-b border-border px-2 py-1.5 custom-scrollbar">
+          {currentState.sheets.map((sheet) => (
+            <button
+              key={sheet.name}
+              type="button"
+              className={cn(
+                "h-7 shrink-0 rounded-md px-2.5 text-xs transition-colors",
+                sheet.name === activeSheet?.name
+                  ? "bg-accent font-medium text-accent-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+              onClick={() => setSelectedSheetName(sheet.name)}
+            >
+              {sheet.name}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {activeSheet ? (
+        <div className="min-h-0 flex-1 overflow-auto custom-scrollbar">
+          <table className="min-w-full border-collapse text-xs text-foreground">
+            <thead className="sticky top-0 z-[1] bg-muted">
+              <tr>
+                <th className="sticky left-0 z-[2] h-7 min-w-10 border border-border bg-muted px-2" />
+                {Array.from({ length: activeSheet.columnCount }, (_, index) => (
+                  <th
+                    key={index}
+                    className="h-7 min-w-24 border border-border px-2 text-center font-medium text-muted-foreground"
+                  >
+                    {spreadsheetColumnLabel(index)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {activeSheet.rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  <th className="sticky left-0 min-w-10 border border-border bg-muted px-2 text-right font-normal text-muted-foreground">
+                    {rowIndex + 1}
+                  </th>
+                  {Array.from(
+                    { length: activeSheet.columnCount },
+                    (_, columnIndex) => (
+                      <td
+                        key={columnIndex}
+                        className="max-w-80 whitespace-pre-wrap border border-border px-2 py-1.5 align-top"
+                      >
+                        {row[columnIndex] ?? ""}
+                      </td>
+                    ),
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+      {activeSheet?.truncated ? (
+        <div className="shrink-0 border-t border-border bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
+          {t("chatWorkspaceSpreadsheetPreviewTruncated")}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,191 @@
+import { WorkspaceDocxPreview } from "./file-content-preview/workspace-docx-preview";
+import { WorkspacePresentationPreview } from "./file-content-preview/workspace-presentation-preview";
+import { WorkspaceSpreadsheetPreview } from "./file-content-preview/workspace-spreadsheet-preview";
+import { t } from "@/shared/lib/i18n";
+
+export type WorkspaceFileContentKind =
+  | "image"
+  | "audio"
+  | "video"
+  | "pdf"
+  | "html"
+  | "docx"
+  | "spreadsheet"
+  | "presentation"
+  | "other";
+
+export function resolveWorkspaceFileContentKind(params: {
+  path: string;
+  mimeType?: string | null;
+}): WorkspaceFileContentKind {
+  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 ===
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+    path.endsWith(".docx")
+  ) {
+    return "docx";
+  }
+  if (
+    mime.includes("spreadsheet") ||
+    mime.includes("excel") ||
+    /\.(ods|xls|xlsb|xlsm|xlsx)$/i.test(path)
+  ) {
+    return "spreadsheet";
+  }
+  if (
+    mime ===
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation" ||
+    path.endsWith(".pptx")
+  ) {
+    return "presentation";
+  }
+  if (mime.includes("html") || /\.html?$/i.test(path)) {
+    return "html";
+  }
+  return "other";
+}
+
+function WorkspaceUnsupportedContent({
+  contentUrl,
+  label,
+}: {
+  contentUrl: string;
+  label: string;
+}) {
+  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>
+  );
+}
+
+export function WorkspaceFileContentPreview({
+  contentUrl,
+  kind,
+  label,
+}: {
+  contentUrl: string;
+  kind: WorkspaceFileContentKind;
+  label: string;
+}) {
+  if (kind === "image") {
+    return (
+      <div className="flex h-full items-center justify-center overflow-auto bg-white p-4 custom-scrollbar">
+        <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}
+      />
+    );
+  }
+  if (kind === "docx") {
+    return <WorkspaceDocxPreview contentUrl={contentUrl} />;
+  }
+  if (kind === "spreadsheet") {
+    return <WorkspaceSpreadsheetPreview contentUrl={contentUrl} />;
+  }
+  if (kind === "presentation") {
+    return <WorkspacePresentationPreview contentUrl={contentUrl} />;
+  }
+  return <WorkspaceUnsupportedContent contentUrl={contentUrl} label={label} />;
+}

package/src/features/chat/features/workspace/hooks/use-chat-conversation-workspace-state.ts

@@ -64,9 +64,6 @@ export function useChatConversationWorkspaceState(
     sessionCronJobs,
     showWorkspacePanel:
       snapshot.workspacePanelParentKey === sessionKey &&
-      (activeSideChatDraft !== null ||
-        childSessionTabs.length > 0 ||
-        workspaceFileTabs.length > 0 ||
-        sessionCronJobs.length > 0),
+      snapshot.activeWorkspacePanelKind != null,
   };
 }