@neurocode-ai/session-ui 1.18.8

package/src/v2/components/line-comment-annotations-v2.tsx

@@ -0,0 +1,220 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+import { Show, type Accessor, type JSX } from "solid-js"
+import {
+  createLineCommentAnnotations,
+  createLineCommentGutterRenderer,
+  createLineCommentState,
+  createManagedLineCommentAnnotationRenderer,
+  type LineCommentShape,
+  type LineCommentStateProps,
+} from "../../components/line-comment-annotations"
+import { useI18n } from "@neurocode-ai/ui/context/i18n"
+import { cloneSelectedLineRange, formatSelectedLineLabel } from "../../pierre/selection-bridge"
+import { LineCommentEditorV2, LineCommentV2 } from "@neurocode-ai/ui/v2/line-comment-v2"
+import type { LineCommentEditorV2Mention } from "@neurocode-ai/ui/v2/line-comment-v2"
+
+type LineCommentControllerV2Props<T extends LineCommentShape> = {
+  comments: Accessor<T[]>
+  draftKey: Accessor<string>
+  label: string
+  state: LineCommentStateProps<string>
+  getSide: (range: SelectedLineRange) => "additions" | "deletions"
+  onSubmit: (input: { comment: string; selection: SelectedLineRange }) => void
+  onUpdate?: (input: { id: string; comment: string; selection: SelectedLineRange }) => void
+  onDelete?: (comment: T) => void
+  renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element
+  editSubmitLabel?: string
+  mention?: LineCommentEditorV2Mention
+}
+
+type CommentProps = {
+  id?: string
+  comment: JSX.Element
+  selection: JSX.Element
+  actions?: JSX.Element
+  editor?: DraftProps
+  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+  onMouseEnter?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+}
+
+type DraftProps = {
+  value: string
+  selection: JSX.Element
+  onInput: (value: string) => void
+  onCancel: VoidFunction
+  onSubmit: (value: string) => void
+  cancelLabel?: string
+  submitLabel?: string
+  mention?: LineCommentEditorV2Mention
+}
+
+function lineCommentElementV2(view: Accessor<CommentProps>) {
+  return (
+    <Show
+      when={view().editor}
+      fallback={
+        <div
+          data-prevent-autofocus=""
+          data-comment-id={view().id}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={view().onClick}
+          onMouseEnter={view().onMouseEnter}
+        >
+          <LineCommentV2 comment={view().comment} selection={view().selection} actions={view().actions} />
+        </div>
+      }
+    >
+      <div data-prevent-autofocus="" data-comment-id={view().id} onMouseDown={(event) => event.stopPropagation()}>
+        <LineCommentEditorV2
+          value={view().editor!.value}
+          selection={view().editor!.selection}
+          onInput={view().editor!.onInput}
+          onCancel={view().editor!.onCancel}
+          onSubmit={view().editor!.onSubmit}
+          cancelLabel={view().editor!.cancelLabel}
+          submitLabel={view().editor!.submitLabel}
+          mention={view().editor!.mention}
+        />
+      </div>
+    </Show>
+  )
+}
+
+function lineCommentDraftElementV2(view: Accessor<DraftProps>) {
+  return (
+    <div data-prevent-autofocus="" onMouseDown={(event) => event.stopPropagation()}>
+      <LineCommentEditorV2
+        value={view().value}
+        selection={view().selection}
+        onInput={view().onInput}
+        onCancel={view().onCancel}
+        onSubmit={view().onSubmit}
+        cancelLabel={view().cancelLabel}
+        submitLabel={view().submitLabel}
+        mention={view().mention}
+      />
+    </div>
+  )
+}
+
+export function createLineCommentControllerV2<T extends LineCommentShape>(props: LineCommentControllerV2Props<T>) {
+  const i18n = useI18n()
+  const note = createLineCommentState<string>(props.state)
+
+  const annotations = createLineCommentAnnotations({
+    comments: props.comments,
+    getCommentId: (comment) => comment.id,
+    getCommentSelection: (comment) => comment.selection,
+    draftRange: note.commenting,
+    draftKey: props.draftKey,
+    getSide: props.getSide,
+  })
+
+  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>({
+    annotations,
+    commentElement: lineCommentElementV2,
+    draftElement: lineCommentDraftElementV2,
+    renderComment: (comment) => {
+      const edit = () => note.openEditor(comment.id, comment.selection, comment.comment)
+      const remove = () => {
+        note.reset()
+        props.onDelete?.(comment)
+      }
+
+      return {
+        id: comment.id,
+        comment: comment.comment,
+        selection: formatSelectedLineLabel(comment.selection, i18n.t),
+        get actions() {
+          return props.renderCommentActions?.(comment, { edit, remove })
+        },
+        get editor() {
+          return note.isEditing(comment.id)
+            ? {
+                get value() {
+                  return note.draft()
+                },
+                selection: formatSelectedLineLabel(comment.selection, i18n.t),
+                onInput: note.setDraft,
+                onCancel: note.cancelDraft,
+                onSubmit: (value: string) => {
+                  props.onUpdate?.({
+                    id: comment.id,
+                    comment: value,
+                    selection: cloneSelectedLineRange(comment.selection),
+                  })
+                  note.cancelDraft()
+                },
+                cancelLabel: i18n.t("ui.lineComment.cancel"),
+                submitLabel: props.editSubmitLabel,
+                mention: props.mention,
+              }
+            : undefined
+        },
+        onMouseEnter: () => note.hoverComment(comment.selection),
+        onClick: () => {
+          if (note.isEditing(comment.id)) return
+          note.toggleComment(comment.id, comment.selection)
+        },
+      }
+    },
+    renderDraft: (range) => ({
+      get value() {
+        return note.draft()
+      },
+      selection: formatSelectedLineLabel(range, i18n.t),
+      onInput: note.setDraft,
+      onCancel: note.cancelDraft,
+      onSubmit: (comment) => {
+        props.onSubmit({ comment, selection: cloneSelectedLineRange(range) })
+        note.cancelDraft()
+      },
+      cancelLabel: i18n.t("ui.lineComment.cancel"),
+      submitLabel: i18n.t("ui.lineComment.submit"),
+      mention: props.mention,
+    }),
+  })
+
+  const renderGutterUtility = createLineCommentGutterRenderer({
+    label: props.label,
+    getSelectedRange: () => {
+      if (note.opened()) return null
+      return note.selected()
+    },
+    onOpenDraft: note.openDraft,
+  })
+
+  const onLineSelected = (range: SelectedLineRange | null) => {
+    if (!range) {
+      note.select(null)
+      note.cancelDraft()
+      return
+    }
+
+    note.select(range)
+  }
+
+  const onLineSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) {
+      note.cancelDraft()
+      return
+    }
+
+    note.openDraft(range)
+  }
+
+  const onLineNumberSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) return
+    note.openDraft(range)
+  }
+
+  return {
+    note,
+    annotations,
+    renderAnnotation,
+    renderGutterUtility,
+    onLineSelected,
+    onLineSelectionEnd,
+    onLineNumberSelectionEnd,
+  }
+}

package/src/v2/components/prompt-input/attachments.ts

@@ -0,0 +1,266 @@
+import { onMount } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import type { PromptInputV2Attachment, PromptInputV2Prompt } from "./types"
+
+const accepted = [
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "application/pdf",
+  "text/*",
+  "application/json",
+  "application/ld+json",
+  "application/toml",
+  "application/x-toml",
+  "application/x-yaml",
+  "application/xml",
+  "application/yaml",
+  ".c",
+  ".cc",
+  ".cjs",
+  ".conf",
+  ".cpp",
+  ".css",
+  ".csv",
+  ".cts",
+  ".env",
+  ".go",
+  ".gql",
+  ".graphql",
+  ".h",
+  ".hh",
+  ".hpp",
+  ".htm",
+  ".html",
+  ".ini",
+  ".java",
+  ".js",
+  ".json",
+  ".jsx",
+  ".log",
+  ".md",
+  ".mdx",
+  ".mjs",
+  ".mts",
+  ".py",
+  ".rb",
+  ".rs",
+  ".sass",
+  ".scss",
+  ".sh",
+  ".sql",
+  ".toml",
+  ".ts",
+  ".tsx",
+  ".txt",
+  ".xml",
+  ".yaml",
+  ".yml",
+  ".zsh",
+]
+
+type PromptTarget = {
+  current: () => PromptInputV2Prompt
+  cursor: () => number | undefined
+  set: (prompt: PromptInputV2Prompt, cursor?: number) => void
+}
+
+export type PromptInputV2AttachmentConfig = {
+  picker?: (
+    options: { defaultPath?: string; multiple?: boolean; accept?: string[] },
+    onFile: (file: File) => Promise<unknown>,
+  ) => Promise<void>
+  directory: () => string
+  isDialogActive: () => boolean
+  warn: () => void
+  onError: (error: unknown) => void
+  readClipboardImage?: () => Promise<File | null>
+  getPathForFile?: (file: File) => string
+}
+
+export function createPromptInputV2Attachments(
+  input: PromptInputV2AttachmentConfig & {
+    capture: () => PromptTarget
+    editor: () => HTMLElement | undefined
+    focusEditor: () => void
+    addPart: (part: PromptInputV2Prompt[number]) => boolean
+    setDraggingType: (type: "image" | "@mention" | null) => void
+  },
+) {
+  const capture = () => {
+    const prompt = input.capture()
+    const editor = input.editor()
+    if (!editor) return
+    return { prompt, cursor: prompt.cursor() ?? cursorPosition(editor) }
+  }
+  const add = async (file: File, toast = true, target = capture()) => {
+    if (!target) return false
+    const mime = await attachmentMime(file)
+    if (!mime) {
+      if (toast) input.warn()
+      return false
+    }
+    const url = await dataUrl(file, mime)
+    if (!url) return false
+    const attachment: PromptInputV2Attachment = {
+      type: "image",
+      id: globalThis.crypto?.randomUUID?.() ?? Math.random().toString(16).slice(2),
+      filename: file.name,
+      sourcePath: input.getPathForFile?.(file) || undefined,
+      mime,
+      dataUrl: url,
+    }
+    target.prompt.set([...target.prompt.current(), attachment], target.cursor)
+    return true
+  }
+  const addAttachments = async (files: File[], toast = true, target = capture()) => {
+    const found = await files.reduce(async (result, file) => {
+      const previous = await result
+      return (await add(file, false, target)) || previous
+    }, Promise.resolve(false))
+    if (!found && files.length > 0 && toast) input.warn()
+    return found
+  }
+  const handlePaste = async (event: ClipboardEvent) => {
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+    const target = capture()
+    if (!target) return
+    event.preventDefault()
+    event.stopPropagation()
+    const files = Array.from(clipboardData.items).flatMap((item) => {
+      if (item.kind !== "file") return []
+      const file = item.getAsFile()
+      return file ? [file] : []
+    })
+    if (files.length > 0) {
+      await addAttachments(files, true, target)
+      return
+    }
+    const plainText = clipboardData.getData("text/plain") ?? ""
+    if (input.readClipboardImage && !plainText) {
+      const file = await input.readClipboardImage()
+      if (file && (await add(file, true, target))) return
+    }
+    if (!plainText) return
+    const text = plainText.includes("\r") ? plainText.replace(/\r\n?/g, "\n") : plainText
+    const put = () => {
+      if (input.addPart({ type: "text", content: text, start: 0, end: 0 })) return true
+      input.focusEditor()
+      return input.addPart({ type: "text", content: text, start: 0, end: 0 })
+    }
+    if (text.includes("\n") || largePaste(text)) {
+      put()
+      return
+    }
+    if (typeof document.execCommand === "function" && document.execCommand("insertText", false, text)) return
+    put()
+  }
+  const handleDrop = async (event: DragEvent) => {
+    if (input.isDialogActive()) return
+    event.preventDefault()
+    input.setDraggingType(null)
+    const plainText = event.dataTransfer?.getData("text/plain")
+    if (plainText?.startsWith("file:")) {
+      const path = plainText.slice("file:".length)
+      input.focusEditor()
+      input.addPart({ type: "file", path, content: `@${path}`, start: 0, end: 0 })
+      return
+    }
+    const files = event.dataTransfer?.files
+    if (files) await addAttachments(Array.from(files))
+  }
+
+  onMount(() => {
+    makeEventListener(document, "dragover", (event) => {
+      if (input.isDialogActive()) return
+      event.preventDefault()
+      if (event.dataTransfer?.types.includes("Files")) input.setDraggingType("image")
+      else if (event.dataTransfer?.types.includes("text/plain")) input.setDraggingType("@mention")
+    })
+    makeEventListener(document, "dragleave", (event) => {
+      if (!input.isDialogActive() && !event.relatedTarget) input.setDraggingType(null)
+    })
+    makeEventListener(document, "drop", handleDrop)
+  })
+
+  return {
+    addAttachments,
+    handlePaste,
+    handleDrop,
+    pick(fallback: () => void) {
+      if (!input.picker) {
+        fallback()
+        return
+      }
+      void input
+        .picker({ defaultPath: input.directory(), multiple: true, accept: accepted }, (file) => add(file))
+        .catch(input.onError)
+    },
+  }
+}
+
+function dataUrl(file: File, mime: string) {
+  return new Promise<string>((resolve) => {
+    const reader = new FileReader()
+    reader.addEventListener("error", () => resolve(""))
+    reader.addEventListener("load", () => {
+      const value = typeof reader.result === "string" ? reader.result : ""
+      const index = value.indexOf(",")
+      resolve(index === -1 ? value : `data:${mime};base64,${value.slice(index + 1)}`)
+    })
+    reader.readAsDataURL(file)
+  })
+}
+
+const imageMimes = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"])
+const imageExtensions = new Map([
+  ["gif", "image/gif"],
+  ["jpeg", "image/jpeg"],
+  ["jpg", "image/jpeg"],
+  ["png", "image/png"],
+  ["webp", "image/webp"],
+])
+const textMimes = new Set([
+  "application/json",
+  "application/ld+json",
+  "application/toml",
+  "application/x-toml",
+  "application/x-yaml",
+  "application/xml",
+  "application/yaml",
+])
+
+async function attachmentMime(file: File) {
+  const type = file.type.split(";", 1)[0]?.trim().toLowerCase() ?? ""
+  if (imageMimes.has(type) || type === "application/pdf") return type
+  const index = file.name.lastIndexOf(".")
+  const suffix = index === -1 ? "" : file.name.slice(index + 1).toLowerCase()
+  const fallback = imageExtensions.get(suffix) ?? (suffix === "pdf" ? "application/pdf" : undefined)
+  if ((!type || type === "application/octet-stream") && fallback) return fallback
+  if (type.startsWith("text/") || textMimes.has(type) || type.endsWith("+json") || type.endsWith("+xml")) {
+    return "text/plain"
+  }
+  const bytes = new Uint8Array(await file.slice(0, 4096).arrayBuffer())
+  if (bytes.some((byte) => byte === 0)) return
+  const control = bytes.filter((byte) => byte < 9 || (byte > 13 && byte < 32)).length
+  if (bytes.length > 0 && control / bytes.length > 0.3) return
+  return "text/plain"
+}
+
+function cursorPosition(editor: HTMLElement) {
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return 0
+  const range = selection.getRangeAt(0)
+  if (!editor.contains(range.startContainer)) return 0
+  const before = range.cloneRange()
+  before.selectNodeContents(editor)
+  before.setEnd(range.startContainer, range.startOffset)
+  return before.toString().replace(/\u200B/g, "").length
+}
+
+function largePaste(text: string) {
+  if (text.length >= 8000) return true
+  return text.split("\n").length - 1 >= 120
+}