@neurocode-ai/session-ui 1.18.8

package/src/components/file-media.tsx

@@ -0,0 +1,291 @@
+import type { FileContent } from "@neurocode-ai/sdk/v2"
+import { createEffect, createMemo, Match, on, onCleanup, Show, Switch, untrack, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import {
+  dataUrlFromMediaValue,
+  hasMediaValue,
+  isBinaryContent,
+  mediaKindFromPath,
+  normalizeMimeType,
+  svgTextFromValue,
+} from "../pierre/media"
+
+export type FileMediaOptions = {
+  mode?: "auto" | "off"
+  path?: string
+  current?: unknown
+  before?: unknown
+  after?: unknown
+  deleted?: boolean
+  readFile?: (path: string) => Promise<FileContent | undefined>
+  onLoad?: () => void
+  onError?: (ctx: { kind: "image" | "audio" | "svg" }) => void
+}
+
+function mediaValue(cfg: FileMediaOptions, mode: "image" | "audio") {
+  if (cfg.current !== undefined) return cfg.current
+  if (mode === "image") return cfg.after ?? cfg.before
+  return cfg.after ?? cfg.before
+}
+
+export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX.Element }) {
+  const i18n = useI18n()
+  const [remote, setRemote] = createStore<{
+    key?: string
+    loading?: boolean
+    error?: boolean
+    src?: string
+    mime?: string
+  }>({})
+  const cfg = () => props.media
+  const kind = createMemo(() => {
+    const media = cfg()
+    if (!media || media.mode === "off") return
+    return mediaKindFromPath(media.path)
+  })
+
+  const isBinary = createMemo(() => {
+    const media = cfg()
+    if (!media || media.mode === "off") return false
+    if (kind()) return false
+    return isBinaryContent(media.current as any)
+  })
+
+  const onLoad = () => props.media?.onLoad?.()
+
+  const deleted = createMemo(() => {
+    const media = cfg()
+    const k = kind()
+    if (!media || !k) return false
+    if (media.deleted) return true
+    if (k === "svg") return false
+    if (media.current !== undefined) return false
+    return !hasMediaValue(media.after as any) && hasMediaValue(media.before as any)
+  })
+
+  const direct = createMemo(() => {
+    const media = cfg()
+    const k = kind()
+    if (!media || (k !== "image" && k !== "audio")) return
+    return dataUrlFromMediaValue(mediaValue(media, k), k)
+  })
+
+  const request = createMemo(() => {
+    const media = cfg()
+    const k = kind()
+    if (!media || (k !== "image" && k !== "audio")) return
+    if (media.current !== undefined) return
+    if (deleted()) return
+    if (direct()) return
+    if (!media.path || !media.readFile) return
+
+    return {
+      key: `${k}:${media.path}`,
+      kind: k,
+      path: media.path,
+      readFile: media.readFile,
+      onError: media.onError,
+    }
+  })
+
+  createEffect(() => {
+    const input = request()
+    if (!input) {
+      setRemote({ key: undefined, loading: false, error: false, src: undefined, mime: undefined })
+      return
+    }
+
+    let active = true
+    // Keep the previous media visible while re-reading the same file (e.g. a vcs
+    // diff refresh); only a key change resets to the loading placeholder.
+    if (untrack(() => remote.key) === input.key) setRemote({ loading: true, error: false })
+    else setRemote({ key: input.key, loading: true, error: false, src: undefined, mime: undefined })
+    void input.readFile(input.path).then(
+      (result) => {
+        if (!active) return
+        const src = dataUrlFromMediaValue(result as any, input.kind)
+        if (!src) {
+          input.onError?.({ kind: input.kind })
+          setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
+          return
+        }
+
+        setRemote({
+          key: input.key,
+          loading: false,
+          error: false,
+          src,
+          mime: input.kind === "audio" ? normalizeMimeType(result?.mimeType) : undefined,
+        })
+      },
+      () => {
+        if (!active) return
+        input.onError?.({ kind: input.kind })
+        setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
+      },
+    )
+
+    onCleanup(() => {
+      active = false
+    })
+  })
+
+  const src = createMemo(() => {
+    const input = request()
+    if (!input || remote.key !== input.key || remote.error) return direct()
+    return direct() ?? remote.src
+  })
+  const status = createMemo(() => {
+    if (direct()) return "ready" as const
+    const input = request()
+    if (!input) return "idle" as const
+    if (remote.key !== input.key || remote.loading) return "loading" as const
+    if (remote.error) return "error" as const
+    if (src()) return "ready" as const
+    return "idle" as const
+  })
+  const audioMime = createMemo(() => {
+    const input = request()
+    if (!input || remote.key !== input.key) return
+    return remote.mime
+  })
+
+  const svgSource = createMemo(() => {
+    const media = cfg()
+    if (!media || kind() !== "svg") return
+    return svgTextFromValue(media.current as any)
+  })
+  const svgSrc = createMemo(() => {
+    const media = cfg()
+    if (!media || kind() !== "svg") return
+    return dataUrlFromMediaValue(media.current as any, "svg")
+  })
+  const svgInvalid = createMemo(() => {
+    const media = cfg()
+    if (!media || kind() !== "svg") return
+    if (svgSource() !== undefined) return
+    if (!hasMediaValue(media.current as any)) return
+    return [media.path, media.current] as const
+  })
+
+  createEffect(
+    on(
+      svgInvalid,
+      (value) => {
+        if (!value) return
+        cfg()?.onError?.({ kind: "svg" })
+      },
+      { defer: true },
+    ),
+  )
+
+  const kindLabel = (value: "image" | "audio") =>
+    i18n.t(value === "image" ? "ui.fileMedia.kind.image" : "ui.fileMedia.kind.audio")
+
+  return (
+    <Switch>
+      <Match when={kind() === "image" || kind() === "audio"}>
+        <Show
+          when={src()}
+          fallback={(() => {
+            const media = cfg()
+            const k = kind()
+            if (!media || (k !== "image" && k !== "audio")) return props.fallback()
+            const label = kindLabel(k)
+
+            if (deleted()) {
+              return (
+                <div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
+                  {i18n.t("ui.fileMedia.state.removed", { kind: label })}
+                </div>
+              )
+            }
+            if (status() === "loading") {
+              return (
+                <div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
+                  {i18n.t("ui.fileMedia.state.loading", { kind: label })}
+                </div>
+              )
+            }
+            if (status() === "error") {
+              return (
+                <div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
+                  {i18n.t("ui.fileMedia.state.error", { kind: label })}
+                </div>
+              )
+            }
+            return (
+              <div class="flex min-h-40 items-center justify-center px-6 py-4 text-center text-text-weak">
+                {i18n.t("ui.fileMedia.state.unavailable", { kind: label })}
+              </div>
+            )
+          })()}
+        >
+          {(value) => {
+            const k = kind()
+            if (k !== "image" && k !== "audio") return props.fallback()
+            if (k === "image") {
+              return (
+                <div class="flex justify-center bg-background-stronger px-6 py-4">
+                  <img
+                    src={value()}
+                    alt={cfg()?.path}
+                    class="max-h-[60vh] max-w-full rounded border border-border-weak-base bg-background-base object-contain"
+                    onLoad={onLoad}
+                  />
+                </div>
+              )
+            }
+
+            return (
+              <div class="flex justify-center bg-background-stronger px-6 py-4">
+                <audio class="w-full max-w-xl" controls preload="metadata" onLoadedMetadata={onLoad}>
+                  <source src={value()} type={audioMime()} />
+                </audio>
+              </div>
+            )
+          }}
+        </Show>
+      </Match>
+      <Match when={kind() === "svg"}>
+        {(() => {
+          if (svgSource() === undefined && svgSrc() == null) return props.fallback()
+
+          return (
+            <div class="flex flex-col gap-4 px-6 py-4">
+              <Show when={svgSource() !== undefined}>{props.fallback()}</Show>
+              <Show when={svgSrc()}>
+                {(value) => (
+                  <div class="flex justify-center">
+                    <img
+                      src={value()}
+                      alt={cfg()?.path}
+                      class="max-h-[60vh] max-w-full rounded border border-border-weak-base bg-background-base object-contain"
+                      onLoad={onLoad}
+                    />
+                  </div>
+                )}
+              </Show>
+            </div>
+          )
+        })()}
+      </Match>
+      <Match when={isBinary()}>
+        <div class="flex min-h-56 flex-col items-center justify-center gap-2 px-6 py-10 text-center">
+          <div class="text-14-semibold text-text-strong">
+            {cfg()?.path?.split("/").pop() ?? i18n.t("ui.fileMedia.binary.title")}
+          </div>
+          <div class="text-14-regular text-text-weak">
+            {(() => {
+              const path = cfg()?.path
+              if (!path) return i18n.t("ui.fileMedia.binary.description.default")
+              return i18n.t("ui.fileMedia.binary.description.path", { path })
+            })()}
+          </div>
+        </div>
+      </Match>
+      <Match when={true}>{props.fallback()}</Match>
+    </Switch>
+  )
+}

package/src/components/file-search.tsx

@@ -0,0 +1,72 @@
+import { Portal } from "solid-js/web"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { Icon } from "@neurocode-ai/ui/icon"
+
+export function FileSearchBar(props: {
+  pos: () => { top: number; right: number }
+  query: () => string
+  index: () => number
+  count: () => number
+  setInput: (el: HTMLInputElement) => void
+  onInput: (value: string) => void
+  onKeyDown: (event: KeyboardEvent) => void
+  onClose: () => void
+  onPrev: () => void
+  onNext: () => void
+}) {
+  const i18n = useI18n()
+
+  return (
+    <Portal>
+      <div
+        class="fixed z-50 flex h-8 items-center gap-2 rounded-md border border-border-base bg-background-base px-3 shadow-md"
+        style={{
+          top: `${props.pos().top}px`,
+          right: `${props.pos().right}px`,
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <Icon name="magnifying-glass" size="small" class="text-text-weak shrink-0" />
+        <input
+          ref={props.setInput}
+          placeholder={i18n.t("ui.fileSearch.placeholder")}
+          value={props.query()}
+          class="w-40 bg-transparent outline-none text-14-regular text-text-strong placeholder:text-text-weak"
+          onInput={(e) => props.onInput(e.currentTarget.value)}
+          onKeyDown={(e) => props.onKeyDown(e as KeyboardEvent)}
+        />
+        <div class="shrink-0 text-12-regular text-text-weak tabular-nums text-right" style={{ width: "10ch" }}>
+          {props.count() ? `${props.index() + 1}/${props.count()}` : "0/0"}
+        </div>
+        <div class="flex items-center">
+          <button
+            type="button"
+            class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
+            disabled={props.count() === 0}
+            aria-label={i18n.t("ui.fileSearch.previousMatch")}
+            onClick={props.onPrev}
+          >
+            <Icon name="chevron-down" size="small" class="rotate-180" />
+          </button>
+          <button
+            type="button"
+            class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong disabled:opacity-40 disabled:pointer-events-none"
+            disabled={props.count() === 0}
+            aria-label={i18n.t("ui.fileSearch.nextMatch")}
+            onClick={props.onNext}
+          >
+            <Icon name="chevron-down" size="small" />
+          </button>
+        </div>
+        <button
+          type="button"
+          class="size-6 grid place-items-center rounded text-text-weak hover:bg-surface-base-hover hover:text-text-strong"
+          aria-label={i18n.t("ui.fileSearch.close")}
+          onClick={props.onClose}
+        >
+          <Icon name="close-small" size="small" />
+        </button>
+      </div>
+    </Portal>
+  )
+}

package/src/components/file-ssr.tsx

@@ -0,0 +1,197 @@
+import { DIFFS_TAG_NAME, FileDiff, VirtualizedFileDiff } from "@pierre/diffs"
+import { type PreloadFileDiffResult, type PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
+import { createEffect, onCleanup, onMount, Show, splitProps } from "solid-js"
+import { Dynamic, isServer } from "solid-js/web"
+import { useWorkerPool } from "@neurocode-ai/ui/context/worker-pool"
+import { createDefaultOptions, styleVariables } from "../pierre"
+import { markCommentedDiffLines } from "../pierre/commented-lines"
+import { fixDiffSelection } from "../pierre/diff-selection"
+import {
+  applyViewerScheme,
+  clearReadyWatcher,
+  createReadyWatcher,
+  notifyShadowReady,
+  observeViewerScheme,
+} from "../pierre/file-runtime"
+import { acquireVirtualizer, virtualMetrics } from "../pierre/virtualizer"
+import { File, type DiffFileProps, type FileProps } from "./file"
+
+type DiffPreload<T> = PreloadMultiFileDiffResult<T> | PreloadFileDiffResult<T>
+
+type SSRDiffFileProps<T> = DiffFileProps<T> & {
+  preloadedDiff: DiffPreload<T>
+}
+
+function DiffSSRViewer<T>(props: SSRDiffFileProps<T>) {
+  let container!: HTMLDivElement
+  let fileDiffRef!: HTMLElement
+  let fileDiffInstance: FileDiff<T> | undefined
+  let sharedVirtualizer: NonNullable<ReturnType<typeof acquireVirtualizer>> | undefined
+
+  const ready = createReadyWatcher()
+  const workerPool = useWorkerPool(props.diffStyle)
+
+  const [local, others] = splitProps(props, [
+    "mode",
+    "media",
+    "fileDiff",
+    "before",
+    "after",
+    "class",
+    "classList",
+    "annotations",
+    "selectedLines",
+    "commentedLines",
+    "onLineSelected",
+    "onLineSelectionEnd",
+    "onLineNumberSelectionEnd",
+    "onRendered",
+    "preloadedDiff",
+  ])
+
+  const getRoot = () => fileDiffRef?.shadowRoot ?? undefined
+
+  const getVirtualizer = () => {
+    if (sharedVirtualizer) return sharedVirtualizer.virtualizer
+    const result = acquireVirtualizer(container)
+    if (!result) return
+    sharedVirtualizer = result
+    return result.virtualizer
+  }
+
+  const setSelectedLines = (range: DiffFileProps<T>["selectedLines"], attempt = 0) => {
+    const diff = fileDiffInstance
+    if (!diff) return
+
+    const fixed = fixDiffSelection(getRoot(), range ?? null)
+    if (fixed === undefined) {
+      if (attempt >= 120) return
+      requestAnimationFrame(() => setSelectedLines(range ?? null, attempt + 1))
+      return
+    }
+
+    diff.setSelectedLines(fixed)
+  }
+
+  const notifyRendered = () => {
+    notifyShadowReady({
+      state: ready,
+      container,
+      getRoot,
+      isReady: (root) => root.querySelector("[data-line]") != null,
+      settleFrames: 1,
+      onReady: () => {
+        setSelectedLines(local.selectedLines ?? null)
+        local.onRendered?.()
+      },
+    })
+  }
+
+  onMount(() => {
+    if (isServer) return
+
+    onCleanup(observeViewerScheme(() => fileDiffRef))
+
+    const virtualizer = getVirtualizer()
+    const annotations = local.annotations ?? local.preloadedDiff.annotations ?? []
+    fileDiffInstance = virtualizer
+      ? new VirtualizedFileDiff<T>(
+          {
+            ...createDefaultOptions(props.diffStyle),
+            ...others,
+            ...local.preloadedDiff.options,
+          },
+          virtualizer,
+          virtualMetrics,
+          workerPool,
+        )
+      : new FileDiff<T>(
+          {
+            ...createDefaultOptions(props.diffStyle),
+            ...others,
+            ...local.preloadedDiff.options,
+          },
+          workerPool,
+        )
+
+    applyViewerScheme(fileDiffRef)
+
+    // @ts-expect-error private field required for hydration
+    fileDiffInstance.fileContainer = fileDiffRef
+    fileDiffInstance.hydrate(
+      local.fileDiff
+        ? {
+            fileDiff: local.fileDiff,
+            lineAnnotations: annotations,
+            fileContainer: fileDiffRef,
+            containerWrapper: container,
+            prerenderedHTML: local.preloadedDiff.prerenderedHTML,
+          }
+        : {
+            oldFile: local.before
+              ? { ...local.before, contents: typeof local.before.contents === "string" ? local.before.contents : "" }
+              : local.before,
+            newFile: local.after
+              ? { ...local.after, contents: typeof local.after.contents === "string" ? local.after.contents : "" }
+              : local.after,
+            lineAnnotations: annotations,
+            fileContainer: fileDiffRef,
+            containerWrapper: container,
+            prerenderedHTML: local.preloadedDiff.prerenderedHTML,
+          },
+    )
+
+    notifyRendered()
+  })
+
+  createEffect(() => {
+    const diff = fileDiffInstance
+    if (!diff) return
+    diff.setLineAnnotations(local.annotations ?? [])
+    diff.rerender()
+  })
+
+  createEffect(() => {
+    setSelectedLines(local.selectedLines ?? null)
+  })
+
+  createEffect(() => {
+    const ranges = local.commentedLines ?? []
+    requestAnimationFrame(() => {
+      const root = getRoot()
+      if (!root) return
+      markCommentedDiffLines(root, ranges)
+    })
+  })
+
+  onCleanup(() => {
+    clearReadyWatcher(ready)
+    fileDiffInstance?.cleanUp()
+    sharedVirtualizer?.release()
+    sharedVirtualizer = undefined
+  })
+
+  return (
+    <div
+      data-component="file"
+      data-mode="diff"
+      style={styleVariables}
+      class={local.class}
+      classList={local.classList}
+      ref={container}
+    >
+      <Dynamic component={DIFFS_TAG_NAME} ref={fileDiffRef} id="ssr-diff">
+        <Show when={isServer}>
+          <template shadowrootmode="open" innerHTML={local.preloadedDiff.prerenderedHTML} />
+        </Show>
+      </Dynamic>
+    </div>
+  )
+}
+
+export type FileSSRProps<T = {}> = FileProps<T>
+
+export function FileSSR<T>(props: FileSSRProps<T>) {
+  if (props.mode !== "diff" || !props.preloadedDiff) return File(props)
+  return DiffSSRViewer(props as SSRDiffFileProps<T>)
+}

package/src/components/file.css

@@ -0,0 +1,46 @@
+[data-component="file"] {
+  content-visibility: auto;
+}
+
+[data-timeline-row] [data-component="file"] {
+  content-visibility: visible;
+}
+
+[data-component="file"][data-mode="text"] {
+  overflow: hidden;
+}
+
+[data-component="file"][data-mode="diff"] {
+  [data-slot="diff-hunk-separator-line-number"] {
+    position: sticky;
+    left: 0;
+    background-color: var(--surface-diff-hidden-strong);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    [data-slot="diff-hunk-separator-line-number-icon"] {
+      aspect-ratio: 1;
+      width: 24px;
+      height: 24px;
+      color: var(--icon-strong-base);
+    }
+  }
+
+  [data-slot="diff-hunk-separator-content"] {
+    position: sticky;
+    background-color: var(--surface-diff-hidden-base);
+    color: var(--text-base);
+    width: var(--diffs-column-content-width);
+    left: var(--diffs-column-number-width);
+    padding-left: 8px;
+    user-select: none;
+    cursor: default;
+    text-align: left;
+
+    [data-slot="diff-hunk-separator-content-span"] {
+      mix-blend-mode: var(--text-mix-blend-mode);
+    }
+  }
+}