@nikcli-ai/app 0.0.6

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

@@ -0,0 +1,145 @@
+import { onCleanup, onMount } from "solid-js"
+import { showToast } from "@nikcli-ai/ui/toast"
+import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
+import { useLanguage } from "@/context/language"
+import { getCursorPosition } from "./editor-dom"
+
+export const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
+export const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
+
+type PromptAttachmentsInput = {
+  editor: () => HTMLDivElement | undefined
+  isFocused: () => boolean
+  isDialogActive: () => boolean
+  setDraggingType: (type: "image" | "@mention" | null) => void
+  focusEditor: () => void
+  addPart: (part: ContentPart) => void
+}
+
+export function createPromptAttachments(input: PromptAttachmentsInput) {
+  const prompt = usePrompt()
+  const language = useLanguage()
+
+  const addImageAttachment = async (file: File) => {
+    if (!ACCEPTED_FILE_TYPES.includes(file.type)) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const editor = input.editor()
+      if (!editor) return
+      const dataUrl = reader.result as string
+      const attachment: ImageAttachmentPart = {
+        type: "image",
+        id: crypto.randomUUID(),
+        filename: file.name,
+        mime: file.type,
+        dataUrl,
+      }
+      const cursorPosition = prompt.cursor() ?? getCursorPosition(editor)
+      prompt.set([...prompt.current(), attachment], cursorPosition)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const removeImageAttachment = (id: string) => {
+    const current = prompt.current()
+    const next = current.filter((part) => part.type !== "image" || part.id !== id)
+    prompt.set(next, prompt.cursor())
+  }
+
+  const handlePaste = async (event: ClipboardEvent) => {
+    if (!input.isFocused()) return
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const items = Array.from(clipboardData.items)
+    const fileItems = items.filter((item) => item.kind === "file")
+    const imageItems = fileItems.filter((item) => ACCEPTED_FILE_TYPES.includes(item.type))
+
+    if (imageItems.length > 0) {
+      for (const item of imageItems) {
+        const file = item.getAsFile()
+        if (file) await addImageAttachment(file)
+      }
+      return
+    }
+
+    if (fileItems.length > 0) {
+      showToast({
+        title: language.t("prompt.toast.pasteUnsupported.title"),
+        description: language.t("prompt.toast.pasteUnsupported.description"),
+      })
+      return
+    }
+
+    const plainText = clipboardData.getData("text/plain") ?? ""
+    if (!plainText) return
+    input.addPart({ type: "text", content: plainText, start: 0, end: 0 })
+  }
+
+  const handleGlobalDragOver = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    const hasFiles = event.dataTransfer?.types.includes("Files")
+    const hasText = event.dataTransfer?.types.includes("text/plain")
+    if (hasFiles) {
+      input.setDraggingType("image")
+    } else if (hasText) {
+      input.setDraggingType("@mention")
+    }
+  }
+
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+    if (!event.relatedTarget) {
+      input.setDraggingType(null)
+    }
+  }
+
+  const handleGlobalDrop = async (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    input.setDraggingType(null)
+
+    const plainText = event.dataTransfer?.getData("text/plain")
+    const filePrefix = "file:"
+    if (plainText?.startsWith(filePrefix)) {
+      const filePath = plainText.slice(filePrefix.length)
+      input.focusEditor()
+      input.addPart({ type: "file", path: filePath, content: "@" + filePath, start: 0, end: 0 })
+      return
+    }
+
+    const dropped = event.dataTransfer?.files
+    if (!dropped) return
+
+    for (const file of Array.from(dropped)) {
+      if (ACCEPTED_FILE_TYPES.includes(file.type)) {
+        await addImageAttachment(file)
+      }
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("dragover", handleGlobalDragOver)
+    document.addEventListener("dragleave", handleGlobalDragLeave)
+    document.addEventListener("drop", handleGlobalDrop)
+  })
+
+  onCleanup(() => {
+    document.removeEventListener("dragover", handleGlobalDragOver)
+    document.removeEventListener("dragleave", handleGlobalDragLeave)
+    document.removeEventListener("drop", handleGlobalDrop)
+  })
+
+  return {
+    addImageAttachment,
+    removeImageAttachment,
+    handlePaste,
+  }
+}

package/src/components/prompt-input/build-request-parts.test.ts

@@ -0,0 +1,277 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import { buildRequestParts } from "./build-request-parts"
+
+describe("buildRequestParts", () => {
+  test("builds typed request and optimistic parts without cast path", () => {
+    const prompt: Prompt = [
+      { type: "text", content: "hello", start: 0, end: 5 },
+      {
+        type: "file",
+        path: "src/foo.ts",
+        content: "@src/foo.ts",
+        start: 5,
+        end: 16,
+        selection: { startLine: 4, startChar: 1, endLine: 6, endChar: 1 },
+      },
+      { type: "agent", name: "planner", content: "@planner", start: 16, end: 24 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [{ key: "ctx:1", type: "file", path: "src/bar.ts", comment: "check this" }],
+      images: [
+        { type: "image", id: "img_1", filename: "a.png", mime: "image/png", dataUrl: "data:image/png;base64,AAA" },
+      ],
+      text: "hello @src/foo.ts @planner",
+      messageID: "msg_1",
+      sessionID: "ses_1",
+      sessionDirectory: "/repo",
+    })
+
+    expect(result.requestParts[0]?.type).toBe("text")
+    expect(result.requestParts.some((part) => part.type === "agent")).toBe(true)
+    expect(
+      result.requestParts.some((part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts")),
+    ).toBe(true)
+    expect(result.requestParts.some((part) => part.type === "text" && part.synthetic)).toBe(true)
+
+    expect(result.optimisticParts).toHaveLength(result.requestParts.length)
+    expect(result.optimisticParts.every((part) => part.sessionID === "ses_1" && part.messageID === "msg_1")).toBe(true)
+  })
+
+  test("deduplicates context files when prompt already includes same path", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/foo.ts", content: "@src/foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:dup", type: "file", path: "src/foo.ts" },
+        { key: "ctx:comment", type: "file", path: "src/foo.ts", comment: "focus here" },
+      ],
+      images: [],
+      text: "@src/foo.ts",
+      messageID: "msg_2",
+      sessionID: "ses_2",
+      sessionDirectory: "/repo",
+    })
+
+    const fooFiles = result.requestParts.filter(
+      (part) => part.type === "file" && part.url.startsWith("file:///repo/src/foo.ts"),
+    )
+    const synthetic = result.requestParts.filter((part) => part.type === "text" && part.synthetic)
+
+    expect(fooFiles).toHaveLength(2)
+    expect(synthetic).toHaveLength(1)
+  })
+
+  test("handles Windows paths correctly (simulated on macOS)", () => {
+    const prompt: Prompt = [{ type: "file", path: "src\\foo.ts", content: "@src\\foo.ts", start: 0, end: 11 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\foo.ts",
+      messageID: "msg_win_1",
+      sessionID: "ses_win_1",
+      sessionDirectory: "D:\\projects\\myapp", // Windows path
+    })
+
+    // Should create valid file URLs
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should not have encoded backslashes in wrong place
+      expect(filePart.url).not.toContain("%5C")
+      // Should have normalized to forward slashes
+      expect(filePart.url).toContain("/src/foo.ts")
+    }
+  })
+
+  test("handles Windows absolute path with special characters", () => {
+    const prompt: Prompt = [{ type: "file", path: "file#name.txt", content: "@file#name.txt", start: 0, end: 14 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@file#name.txt",
+      messageID: "msg_win_2",
+      sessionID: "ses_win_2",
+      sessionDirectory: "C:\\Users\\test\\Documents", // Windows path
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Special chars should be encoded
+      expect(filePart.url).toContain("file%23name.txt")
+      // Should have Windows drive letter properly encoded
+      expect(filePart.url).toMatch(/file:\/\/\/[A-Z]%3A/)
+    }
+  })
+
+  test("handles Linux absolute paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "src/app.ts", content: "@src/app.ts", start: 0, end: 10 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src/app.ts",
+      messageID: "msg_linux_1",
+      sessionID: "ses_linux_1",
+      sessionDirectory: "/home/user/project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///home/user/project/src/app.ts")
+    }
+  })
+
+  test("handles macOS paths correctly", () => {
+    const prompt: Prompt = [{ type: "file", path: "README.md", content: "@README.md", start: 0, end: 9 }]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@README.md",
+      messageID: "msg_mac_1",
+      sessionID: "ses_mac_1",
+      sessionDirectory: "/Users/kelvin/Projects/nikcli",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // URL should be parseable
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should be a normal Unix path
+      expect(filePart.url).toBe("file:///Users/kelvin/Projects/nikcli/README.md")
+    }
+  })
+
+  test("handles context files with Windows paths", () => {
+    const prompt: Prompt = []
+
+    const result = buildRequestParts({
+      prompt,
+      context: [
+        { key: "ctx:1", type: "file", path: "src\\utils\\helper.ts" },
+        { key: "ctx:2", type: "file", path: "test\\unit.test.ts", comment: "check tests" },
+      ],
+      images: [],
+      text: "test",
+      messageID: "msg_win_ctx",
+      sessionID: "ses_win_ctx",
+      sessionDirectory: "D:\\workspace\\app",
+    })
+
+    const fileParts = result.requestParts.filter((part) => part.type === "file")
+    expect(fileParts).toHaveLength(2)
+
+    // All file URLs should be valid
+    fileParts.forEach((part) => {
+      if (part.type === "file") {
+        expect(() => new URL(part.url)).not.toThrow()
+        expect(part.url).not.toContain("%5C") // No encoded backslashes
+      }
+    })
+  })
+
+  test("handles absolute Windows paths (user manually specifies full path)", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "D:\\other\\project\\file.ts", content: "@D:\\other\\project\\file.ts", start: 0, end: 25 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@D:\\other\\project\\file.ts",
+      messageID: "msg_abs",
+      sessionID: "ses_abs",
+      sessionDirectory: "C:\\current\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should handle absolute path that differs from sessionDirectory
+      expect(() => new URL(filePart.url)).not.toThrow()
+      expect(filePart.url).toContain("/D%3A/other/project/file.ts")
+    }
+  })
+
+  test("handles selection with query parameters on Windows", () => {
+    const prompt: Prompt = [
+      {
+        type: "file",
+        path: "src\\App.tsx",
+        content: "@src\\App.tsx",
+        start: 0,
+        end: 11,
+        selection: { startLine: 10, startChar: 0, endLine: 20, endChar: 5 },
+      },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@src\\App.tsx",
+      messageID: "msg_sel",
+      sessionID: "ses_sel",
+      sessionDirectory: "C:\\project",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should have query parameters
+      expect(filePart.url).toContain("?start=10&end=20")
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Query params should parse correctly
+      const url = new URL(filePart.url)
+      expect(url.searchParams.get("start")).toBe("10")
+      expect(url.searchParams.get("end")).toBe("20")
+    }
+  })
+
+  test("handles file paths with dots and special segments on Windows", () => {
+    const prompt: Prompt = [
+      { type: "file", path: "..\\..\\shared\\util.ts", content: "@..\\..\\shared\\util.ts", start: 0, end: 21 },
+    ]
+
+    const result = buildRequestParts({
+      prompt,
+      context: [],
+      images: [],
+      text: "@..\\..\\shared\\util.ts",
+      messageID: "msg_dots",
+      sessionID: "ses_dots",
+      sessionDirectory: "C:\\projects\\myapp\\src",
+    })
+
+    const filePart = result.requestParts.find((part) => part.type === "file")
+    expect(filePart).toBeDefined()
+    if (filePart?.type === "file") {
+      // Should be valid URL
+      expect(() => new URL(filePart.url)).not.toThrow()
+      // Should preserve .. segments (backend normalizes)
+      expect(filePart.url).toContain("/..")
+    }
+  })
+})

package/src/components/prompt-input/build-request-parts.ts

@@ -0,0 +1,190 @@
+import { getFilename } from "@nikcli-ai/util/path"
+import { type AgentPartInput, type FilePartInput, type Part, type TextPartInput } from "@nikcli-ai/sdk/v2/client"
+import type { FileSelection } from "@/context/file"
+import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
+import { Identifier } from "@/utils/id"
+
+type PromptRequestPart = (TextPartInput | FilePartInput | AgentPartInput) & { id: string }
+
+type ContextFile = {
+  key: string
+  type: "file"
+  path: string
+  selection?: FileSelection
+  comment?: string
+  commentID?: string
+  commentOrigin?: "review" | "file"
+  preview?: string
+}
+
+type BuildRequestPartsInput = {
+  prompt: Prompt
+  context: ContextFile[]
+  images: ImageAttachmentPart[]
+  text: string
+  messageID: string
+  sessionID: string
+  sessionDirectory: string
+}
+
+const absolute = (directory: string, path: string) =>
+  path.startsWith("/") ? path : (directory + "/" + path).replace("//", "/")
+
+const encodeFilePath = (filepath: string): string => {
+  // Normalize Windows paths: convert backslashes to forward slashes
+  let normalized = filepath.replace(/\\/g, "/")
+
+  // Handle Windows absolute paths (D:/path -> /D:/path for proper file:// URLs)
+  if (/^[A-Za-z]:/.test(normalized)) {
+    normalized = "/" + normalized
+  }
+
+  // Encode each path segment (preserving forward slashes as path separators)
+  return normalized
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/")
+}
+
+const fileQuery = (selection: FileSelection | undefined) =>
+  selection ? `?start=${selection.startLine}&end=${selection.endLine}` : ""
+
+const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
+const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"
+
+const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => {
+  const start = selection ? Math.min(selection.startLine, selection.endLine) : undefined
+  const end = selection ? Math.max(selection.startLine, selection.endLine) : undefined
+  const range =
+    start === undefined || end === undefined
+      ? "this file"
+      : start === end
+        ? `line ${start}`
+        : `lines ${start} through ${end}`
+  return `The user made the following comment regarding ${range} of ${path}: ${comment}`
+}
+
+const toOptimisticPart = (part: PromptRequestPart, sessionID: string, messageID: string): Part => {
+  if (part.type === "text") {
+    return {
+      id: part.id,
+      type: "text",
+      text: part.text,
+      synthetic: part.synthetic,
+      ignored: part.ignored,
+      time: part.time,
+      metadata: part.metadata,
+      sessionID,
+      messageID,
+    }
+  }
+  if (part.type === "file") {
+    return {
+      id: part.id,
+      type: "file",
+      mime: part.mime,
+      filename: part.filename,
+      url: part.url,
+      source: part.source,
+      sessionID,
+      messageID,
+    }
+  }
+  return {
+    id: part.id,
+    type: "agent",
+    name: part.name,
+    source: part.source,
+    sessionID,
+    messageID,
+  }
+}
+
+export function buildRequestParts(input: BuildRequestPartsInput) {
+  const requestParts: PromptRequestPart[] = [
+    {
+      id: Identifier.ascending("part"),
+      type: "text",
+      text: input.text,
+    },
+  ]
+
+  const files = input.prompt.filter(isFileAttachment).map((attachment) => {
+    const path = absolute(input.sessionDirectory, attachment.path)
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url: `file://${encodeFilePath(path)}${fileQuery(attachment.selection)}`,
+      filename: getFilename(attachment.path),
+      source: {
+        type: "file",
+        text: {
+          value: attachment.content,
+          start: attachment.start,
+          end: attachment.end,
+        },
+        path,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const agents = input.prompt.filter(isAgentAttachment).map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "agent",
+      name: attachment.name,
+      source: {
+        value: attachment.content,
+        start: attachment.start,
+        end: attachment.end,
+      },
+    } satisfies PromptRequestPart
+  })
+
+  const used = new Set(files.map((part) => part.url))
+  const context = input.context.flatMap((item) => {
+    const path = absolute(input.sessionDirectory, item.path)
+    const url = `file://${encodeFilePath(path)}${fileQuery(item.selection)}`
+    const comment = item.comment?.trim()
+    if (!comment && used.has(url)) return []
+    used.add(url)
+
+    const filePart = {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: "text/plain",
+      url,
+      filename: getFilename(item.path),
+    } satisfies PromptRequestPart
+
+    if (!comment) return [filePart]
+
+    return [
+      {
+        id: Identifier.ascending("part"),
+        type: "text",
+        text: commentNote(item.path, item.selection, comment),
+        synthetic: true,
+      } satisfies PromptRequestPart,
+      filePart,
+    ]
+  })
+
+  const images = input.images.map((attachment) => {
+    return {
+      id: Identifier.ascending("part"),
+      type: "file",
+      mime: attachment.mime,
+      url: attachment.dataUrl,
+      filename: attachment.filename,
+    } satisfies PromptRequestPart
+  })
+
+  requestParts.push(...files, ...context, ...agents, ...images)
+
+  return {
+    requestParts,
+    optimisticParts: requestParts.map((part) => toOptimisticPart(part, input.sessionID, input.messageID)),
+  }
+}

package/src/components/prompt-input/context-items.tsx

@@ -0,0 +1,82 @@
+import { Component, For, Show } from "solid-js"
+import { FileIcon } from "@nikcli-ai/ui/file-icon"
+import { IconButton } from "@nikcli-ai/ui/icon-button"
+import { Tooltip } from "@nikcli-ai/ui/tooltip"
+import { getDirectory, getFilename, getFilenameTruncated } from "@nikcli-ai/util/path"
+import type { ContextItem } from "@/context/prompt"
+
+type PromptContextItem = ContextItem & { key: string }
+
+type ContextItemsProps = {
+  items: PromptContextItem[]
+  active: (item: PromptContextItem) => boolean
+  openComment: (item: PromptContextItem) => void
+  remove: (item: PromptContextItem) => void
+  t: (key: string) => string
+}
+
+export const PromptContextItems: Component<ContextItemsProps> = (props) => {
+  return (
+    <Show when={props.items.length > 0}>
+      <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
+        <For each={props.items}>
+          {(item) => (
+            <Tooltip
+              value={
+                <span class="flex max-w-[300px]">
+                  <span class="text-text-invert-base truncate-start [unicode-bidi:plaintext] min-w-0">
+                    {getDirectory(item.path)}
+                  </span>
+                  <span class="shrink-0">{getFilename(item.path)}</span>
+                </span>
+              }
+              placement="top"
+              openDelay={2000}
+            >
+              <div
+                classList={{
+                  "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                  "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID && !props.active(item),
+                  "cursor-pointer bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover":
+                    props.active(item),
+                  "bg-background-stronger": !props.active(item),
+                }}
+                onClick={() => props.openComment(item)}
+              >
+                <div class="flex items-center gap-1.5">
+                  <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                  <div class="flex items-center text-11-regular min-w-0 font-medium">
+                    <span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 14)}</span>
+                    <Show when={item.selection}>
+                      {(sel) => (
+                        <span class="text-text-weak whitespace-nowrap shrink-0">
+                          {sel().startLine === sel().endLine
+                            ? `:${sel().startLine}`
+                            : `:${sel().startLine}-${sel().endLine}`}
+                        </span>
+                      )}
+                    </Show>
+                  </div>
+                  <IconButton
+                    type="button"
+                    icon="close-small"
+                    variant="ghost"
+                    class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      props.remove(item)
+                    }}
+                    aria-label={props.t("prompt.context.removeFile")}
+                  />
+                </div>
+                <Show when={item.comment}>
+                  {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                </Show>
+              </div>
+            </Tooltip>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}