|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useState, useEffect, useMemo } from "react"; |
| 4 | +import { useTheme } from "next-themes"; |
| 5 | +import { HugeiconsIcon } from "@hugeicons/react"; |
| 6 | +import { Cancel01Icon, Copy01Icon, Tick01Icon, Loading02Icon } from "@hugeicons/core-free-icons"; |
| 7 | +import { Button } from "@/components/ui/button"; |
| 8 | +import { Light as SyntaxHighlighter } from "react-syntax-highlighter"; |
| 9 | +import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; |
| 10 | +import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs"; |
| 11 | +import { Streamdown } from "streamdown"; |
| 12 | +import { cjk } from "@streamdown/cjk"; |
| 13 | +import { code } from "@streamdown/code"; |
| 14 | +import { math } from "@streamdown/math"; |
| 15 | +import { mermaid } from "@streamdown/mermaid"; |
| 16 | +import type { FilePreview as FilePreviewType } from "@/types"; |
| 17 | + |
| 18 | +const streamdownPlugins = { cjk, code, math, mermaid }; |
| 19 | + |
| 20 | +type ViewMode = "source" | "rendered"; |
| 21 | + |
| 22 | +interface DocPreviewProps { |
| 23 | + filePath: string; |
| 24 | + viewMode: ViewMode; |
| 25 | + onViewModeChange: (mode: ViewMode) => void; |
| 26 | + onClose: () => void; |
| 27 | + width: number; |
| 28 | +} |
| 29 | + |
| 30 | +/** Extensions that support a rendered preview */ |
| 31 | +const RENDERABLE_EXTENSIONS = new Set([".md", ".mdx", ".html", ".htm"]); |
| 32 | + |
| 33 | +function getExtension(filePath: string): string { |
| 34 | + const dot = filePath.lastIndexOf("."); |
| 35 | + return dot >= 0 ? filePath.slice(dot).toLowerCase() : ""; |
| 36 | +} |
| 37 | + |
| 38 | +function isRenderable(filePath: string): boolean { |
| 39 | + return RENDERABLE_EXTENSIONS.has(getExtension(filePath)); |
| 40 | +} |
| 41 | + |
| 42 | +function isHtml(filePath: string): boolean { |
| 43 | + const ext = getExtension(filePath); |
| 44 | + return ext === ".html" || ext === ".htm"; |
| 45 | +} |
| 46 | + |
| 47 | +export function DocPreview({ |
| 48 | + filePath, |
| 49 | + viewMode, |
| 50 | + onViewModeChange, |
| 51 | + onClose, |
| 52 | + width, |
| 53 | +}: DocPreviewProps) { |
| 54 | + const { resolvedTheme } = useTheme(); |
| 55 | + const isDark = resolvedTheme === "dark"; |
| 56 | + const [preview, setPreview] = useState<FilePreviewType | null>(null); |
| 57 | + const [loading, setLoading] = useState(true); |
| 58 | + const [error, setError] = useState<string | null>(null); |
| 59 | + const [copied, setCopied] = useState(false); |
| 60 | + |
| 61 | + useEffect(() => { |
| 62 | + let cancelled = false; |
| 63 | + |
| 64 | + async function loadPreview() { |
| 65 | + setLoading(true); |
| 66 | + setError(null); |
| 67 | + try { |
| 68 | + const res = await fetch( |
| 69 | + `/api/files/preview?path=${encodeURIComponent(filePath)}&maxLines=500` |
| 70 | + ); |
| 71 | + if (!res.ok) { |
| 72 | + const data = await res.json(); |
| 73 | + throw new Error(data.error || "Failed to load file"); |
| 74 | + } |
| 75 | + const data = await res.json(); |
| 76 | + if (!cancelled) { |
| 77 | + setPreview(data.preview); |
| 78 | + } |
| 79 | + } catch (err) { |
| 80 | + if (!cancelled) { |
| 81 | + setError(err instanceof Error ? err.message : "Failed to load file"); |
| 82 | + } |
| 83 | + } finally { |
| 84 | + if (!cancelled) { |
| 85 | + setLoading(false); |
| 86 | + } |
| 87 | + } |
| 88 | + } |
| 89 | + |
| 90 | + loadPreview(); |
| 91 | + return () => { |
| 92 | + cancelled = true; |
| 93 | + }; |
| 94 | + }, [filePath]); |
| 95 | + |
| 96 | + const handleCopyPath = async () => { |
| 97 | + await navigator.clipboard.writeText(filePath); |
| 98 | + setCopied(true); |
| 99 | + setTimeout(() => setCopied(false), 2000); |
| 100 | + }; |
| 101 | + |
| 102 | + const fileName = filePath.split("/").pop() || filePath; |
| 103 | + |
| 104 | + // Build breadcrumb — show last 3 segments |
| 105 | + const breadcrumb = useMemo(() => { |
| 106 | + const segments = filePath.split("/").filter(Boolean); |
| 107 | + const display = segments.slice(-3); |
| 108 | + const prefix = display.length < segments.length ? ".../" : ""; |
| 109 | + return prefix + display.join("/"); |
| 110 | + }, [filePath]); |
| 111 | + |
| 112 | + const canRender = isRenderable(filePath); |
| 113 | + |
| 114 | + return ( |
| 115 | + <div |
| 116 | + className="hidden h-full shrink-0 flex-col overflow-hidden border-l border-border/40 bg-background lg:flex" |
| 117 | + style={{ width }} |
| 118 | + > |
| 119 | + {/* Header */} |
| 120 | + <div className="flex h-10 shrink-0 items-center gap-2 px-3"> |
| 121 | + <div className="min-w-0 flex-1"> |
| 122 | + <p className="truncate text-sm font-medium">{fileName}</p> |
| 123 | + </div> |
| 124 | + |
| 125 | + {canRender && ( |
| 126 | + <ViewModeToggle value={viewMode} onChange={onViewModeChange} /> |
| 127 | + )} |
| 128 | + |
| 129 | + <Button variant="ghost" size="icon-sm" onClick={handleCopyPath}> |
| 130 | + {copied ? ( |
| 131 | + <HugeiconsIcon icon={Tick01Icon} className="h-3.5 w-3.5 text-green-500" /> |
| 132 | + ) : ( |
| 133 | + <HugeiconsIcon icon={Copy01Icon} className="h-3.5 w-3.5" /> |
| 134 | + )} |
| 135 | + <span className="sr-only">Copy path</span> |
| 136 | + </Button> |
| 137 | + |
| 138 | + <Button variant="ghost" size="icon-sm" onClick={onClose}> |
| 139 | + <HugeiconsIcon icon={Cancel01Icon} className="h-3.5 w-3.5" /> |
| 140 | + <span className="sr-only">Close preview</span> |
| 141 | + </Button> |
| 142 | + </div> |
| 143 | + |
| 144 | + {/* Breadcrumb + language — subtle, no border */} |
| 145 | + <div className="flex shrink-0 items-center gap-2 px-3 pb-2"> |
| 146 | + <p className="min-w-0 flex-1 truncate text-[11px] text-muted-foreground/60"> |
| 147 | + {breadcrumb} |
| 148 | + </p> |
| 149 | + {preview && ( |
| 150 | + <span className="shrink-0 text-[10px] text-muted-foreground/50"> |
| 151 | + {preview.language} |
| 152 | + </span> |
| 153 | + )} |
| 154 | + </div> |
| 155 | + |
| 156 | + {/* Content */} |
| 157 | + <div className="flex-1 min-h-0 overflow-auto"> |
| 158 | + {loading ? ( |
| 159 | + <div className="flex items-center justify-center py-12"> |
| 160 | + <HugeiconsIcon |
| 161 | + icon={Loading02Icon} |
| 162 | + className="h-5 w-5 animate-spin text-muted-foreground" |
| 163 | + /> |
| 164 | + </div> |
| 165 | + ) : error ? ( |
| 166 | + <div className="px-4 py-8 text-center"> |
| 167 | + <p className="text-sm text-destructive">{error}</p> |
| 168 | + </div> |
| 169 | + ) : preview ? ( |
| 170 | + viewMode === "rendered" && canRender ? ( |
| 171 | + <RenderedView content={preview.content} filePath={filePath} /> |
| 172 | + ) : ( |
| 173 | + <SourceView preview={preview} isDark={isDark} /> |
| 174 | + ) |
| 175 | + ) : null} |
| 176 | + </div> |
| 177 | + </div> |
| 178 | + ); |
| 179 | +} |
| 180 | + |
| 181 | +/** Capsule toggle for Source / Preview view mode */ |
| 182 | +function ViewModeToggle({ |
| 183 | + value, |
| 184 | + onChange, |
| 185 | +}: { |
| 186 | + value: ViewMode; |
| 187 | + onChange: (v: ViewMode) => void; |
| 188 | +}) { |
| 189 | + return ( |
| 190 | + <div className="flex h-6 items-center rounded-full bg-muted p-0.5 text-[11px]"> |
| 191 | + <button |
| 192 | + className={`rounded-full px-2 py-0.5 font-medium transition-colors ${ |
| 193 | + value === "source" |
| 194 | + ? "bg-background text-foreground shadow-sm" |
| 195 | + : "text-muted-foreground hover:text-foreground" |
| 196 | + }`} |
| 197 | + onClick={() => onChange("source")} |
| 198 | + > |
| 199 | + Source |
| 200 | + </button> |
| 201 | + <button |
| 202 | + className={`rounded-full px-2 py-0.5 font-medium transition-colors ${ |
| 203 | + value === "rendered" |
| 204 | + ? "bg-background text-foreground shadow-sm" |
| 205 | + : "text-muted-foreground hover:text-foreground" |
| 206 | + }`} |
| 207 | + onClick={() => onChange("rendered")} |
| 208 | + > |
| 209 | + Preview |
| 210 | + </button> |
| 211 | + </div> |
| 212 | + ); |
| 213 | +} |
| 214 | + |
| 215 | +/** Source code view using react-syntax-highlighter */ |
| 216 | +function SourceView({ preview, isDark }: { preview: FilePreviewType; isDark: boolean }) { |
| 217 | + return ( |
| 218 | + <div className="text-xs"> |
| 219 | + <SyntaxHighlighter |
| 220 | + language={preview.language} |
| 221 | + style={isDark ? atomOneDark : atomOneLight} |
| 222 | + showLineNumbers |
| 223 | + customStyle={{ |
| 224 | + margin: 0, |
| 225 | + padding: "8px", |
| 226 | + borderRadius: 0, |
| 227 | + fontSize: "11px", |
| 228 | + lineHeight: "1.5", |
| 229 | + background: "transparent", |
| 230 | + }} |
| 231 | + lineNumberStyle={{ |
| 232 | + minWidth: "2.5em", |
| 233 | + paddingRight: "8px", |
| 234 | + color: isDark ? "#636d83" : "#9ca3af", |
| 235 | + userSelect: "none", |
| 236 | + }} |
| 237 | + > |
| 238 | + {preview.content} |
| 239 | + </SyntaxHighlighter> |
| 240 | + </div> |
| 241 | + ); |
| 242 | +} |
| 243 | + |
| 244 | +/** Rendered view for markdown / HTML files */ |
| 245 | +function RenderedView({ |
| 246 | + content, |
| 247 | + filePath, |
| 248 | +}: { |
| 249 | + content: string; |
| 250 | + filePath: string; |
| 251 | +}) { |
| 252 | + if (isHtml(filePath)) { |
| 253 | + return ( |
| 254 | + <iframe |
| 255 | + srcDoc={content} |
| 256 | + sandbox="" |
| 257 | + className="h-full w-full border-0" |
| 258 | + title="HTML Preview" |
| 259 | + /> |
| 260 | + ); |
| 261 | + } |
| 262 | + |
| 263 | + // Markdown / MDX |
| 264 | + return ( |
| 265 | + <div className="p-4 overflow-x-hidden break-words"> |
| 266 | + <Streamdown |
| 267 | + className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0" |
| 268 | + plugins={streamdownPlugins} |
| 269 | + > |
| 270 | + {content} |
| 271 | + </Streamdown> |
| 272 | + </div> |
| 273 | + ); |
| 274 | +} |
0 commit comments