diff --git a/AGENTS.md b/AGENTS.md index 507cfea5..36a37713 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -14,3 +14,34 @@ ## Debugging - To test opencode in the `packages/opencode` directory you can run `bun dev` + +## Tool Calling + +- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE. Here is an example illustrating how to execute 3 parallel file reads in this chat environnement: + +json +{ + "recipient_name": "multi_tool_use.parallel", + "parameters": { + "tool_uses": [ + { + "recipient_name": "functions.read", + "parameters": { + "filePath": "path/to/file.tsx" + } + }, + { + "recipient_name": "functions.read", + "parameters": { + "filePath": "path/to/file.ts" + } + }, + { + "recipient_name": "functions.read", + "parameters": { + "filePath": "path/to/file.md" + } + } + ] + } +} diff --git a/packages/app/src/components/code.tsx b/packages/app/src/components/code.tsx index 63f527c4..40a40aa9 100644 --- a/packages/app/src/components/code.tsx +++ b/packages/app/src/components/code.tsx @@ -1,8 +1,11 @@ import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "shiki" import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js" import { useLocal, useShiki } from "@/context" +import type { TextSelection } from "@/context/local" import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils" +type DefinedSelection = Exclude + interface Props extends ComponentProps<"div"> { code: string path: string @@ -21,17 +24,66 @@ export function Code(props: Props) { let container: HTMLDivElement | undefined let isProgrammaticSelection = false - const [html] = createResource(async () => { - if (!highlighter.getLoadedLanguages().includes(lang())) { - await highlighter.loadLanguage(lang() as BundledLanguage) + const ranges = createMemo(() => { + const items = ctx.context.all() as Array<{ type: "file"; path: string; selection?: DefinedSelection }> + const result: DefinedSelection[] = [] + for (const item of items) { + if (item.path !== local.path) continue + const selection = item.selection + if (!selection) continue + result.push(selection) } - return highlighter.codeToHtml(local.code || "", { - lang: lang() && lang() in bundledLanguages ? lang() : "text", - theme: "opencode", - transformers: [transformerUnifiedDiff(), transformerDiffGroups()], - }) as string + return result }) + const createLineNumberTransformer = (selections: DefinedSelection[]): ShikiTransformer => { + const highlighted = new Set() + for (const selection of selections) { + const startLine = selection.startLine + const endLine = selection.endLine + const start = Math.max(1, Math.min(startLine, endLine)) + const end = Math.max(start, Math.max(startLine, endLine)) + const count = end - start + 1 + if (count <= 0) continue + const values = Array.from({ length: count }, (_, index) => start + index) + for (const value of values) highlighted.add(value) + } + return { + name: "line-number-highlight", + line(node, index) { + if (!highlighted.has(index)) return + this.addClassToHast(node, "line-number-highlight") + const children = node.children + if (!Array.isArray(children)) return + for (const child of children) { + if (!child || typeof child !== "object") continue + const element = child as { type?: string; properties?: { className?: string[] } } + if (element.type !== "element") continue + const className = element.properties?.className + if (!Array.isArray(className)) continue + const matches = className.includes("diff-oldln") || className.includes("diff-newln") + if (!matches) continue + if (className.includes("line-number-highlight")) continue + className.push("line-number-highlight") + } + }, + } + } + + const [html] = createResource( + () => ranges(), + async (activeRanges) => { + if (!highlighter.getLoadedLanguages().includes(lang())) { + await highlighter.loadLanguage(lang() as BundledLanguage) + } + return highlighter.codeToHtml(local.code || "", { + lang: lang() && lang() in bundledLanguages ? lang() : "text", + theme: "opencode", + transformers: [transformerUnifiedDiff(), transformerDiffGroups(), createLineNumberTransformer(activeRanges)], + }) as string + }, + ) + onMount(() => { if (!container) return @@ -283,7 +335,7 @@ export function Code(props: Props) { [&]:[counter-reset:line] [&_pre]:focus-visible:outline-none [&_pre]:overflow-x-auto [&_pre]:no-scrollbar - [&_code]:min-w-full [&_code]:inline-block [&_code]:pb-40 + [&_code]:min-w-full [&_code]:inline-block [&_.tab]:relative [&_.tab::before]:content['⇥'] [&_.tab::before]:absolute @@ -303,6 +355,9 @@ export function Code(props: Props) { [&_.line::before]:select-none [&_.line::before]:[counter-increment:line] [&_.line::before]:content-[counter(line)] + [&_.line-number-highlight]:bg-accent/20 + [&_.line-number-highlight::before]:bg-accent/40! + [&_.line-number-highlight::before]:text-background-panel! [&_code.code-diff_.line::before]:content-[''] [&_code.code-diff_.line::before]:w-0 [&_code.code-diff_.line::before]:pr-0 diff --git a/packages/app/src/components/editor-pane.tsx b/packages/app/src/components/editor-pane.tsx new file mode 100644 index 00000000..faf70811 --- /dev/null +++ b/packages/app/src/components/editor-pane.tsx @@ -0,0 +1,381 @@ +import { For, Match, Show, Switch, createSignal, splitProps } from "solid-js" +import { Tabs } from "@/ui/tabs" +import { FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui" +import { + DragDropProvider, + DragDropSensors, + DragOverlay, + SortableProvider, + closestCenter, + createSortable, + useDragDropContext, +} from "@thisbeyond/solid-dnd" +import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd" +import type { LocalFile } from "@/context/local" +import { Code } from "@/components/code" +import PromptForm from "@/components/prompt-form" +import { useLocal, useSDK, useSync } from "@/context" +import { getFilename } from "@/utils" +import type { JSX } from "solid-js" + +interface EditorPaneProps { + layoutKey: string + timelinePane: string + onFileClick: (file: LocalFile) => void + onOpenModelSelect: () => void + onInputRefChange: (element: HTMLTextAreaElement | null) => void +} + +export default function EditorPane(props: EditorPaneProps): JSX.Element { + const [localProps] = splitProps(props, [ + "layoutKey", + "timelinePane", + "onFileClick", + "onOpenModelSelect", + "onInputRefChange", + ]) + const local = useLocal() + const sdk = useSDK() + const sync = useSync() + const [activeItem, setActiveItem] = createSignal(undefined) + + const navigateChange = (dir: 1 | -1) => { + const active = local.file.active() + if (!active) return + const current = local.file.changeIndex(active.path) + const next = current === undefined ? (dir === 1 ? 0 : -1) : current + dir + local.file.setChangeIndex(active.path, next) + } + + const handleTabChange = (path: string) => { + local.file.open(path) + } + + const handleTabClose = (file: LocalFile) => { + local.file.close(file.path) + } + + const handlePromptSubmit = async (prompt: string) => { + const existingSession = local.layout.visible(localProps.layoutKey, localProps.timelinePane) + ? local.session.active() + : undefined + let session = existingSession + if (!session) { + const created = await sdk.session.create() + session = created.data ?? undefined + } + if (!session) return + local.session.setActive(session.id) + local.layout.show(localProps.layoutKey, localProps.timelinePane) + + await sdk.session.prompt({ + path: { id: session.id }, + body: { + agent: local.agent.current()!.name, + model: { + modelID: local.model.current()!.id, + providerID: local.model.current()!.provider.id, + }, + parts: [ + { + type: "text", + text: prompt, + }, + ...(local.context.active() + ? [ + { + type: "file" as const, + mime: "text/plain", + url: `file://${local.context.active()!.absolute}`, + filename: local.context.active()!.name, + source: { + type: "file" as const, + text: { + value: "@" + local.context.active()!.name, + start: 0, + end: 0, + }, + path: local.context.active()!.absolute, + }, + }, + ] + : []), + ...local.context.all().flatMap((file) => [ + { + type: "file" as const, + mime: "text/plain", + url: `file://${sync.absolute(file.path)}${file.selection ? `?start=${file.selection.startLine}&end=${file.selection.endLine}` : ""}`, + filename: getFilename(file.path), + source: { + type: "file" as const, + text: { + value: "@" + getFilename(file.path), + start: 0, + end: 0, + }, + path: sync.absolute(file.path), + }, + }, + ]), + ], + }, + }) + } + + const handleDragStart = (event: unknown) => { + const id = getDraggableId(event) + if (!id) return + setActiveItem(id) + } + + const handleDragOver = (event: DragEvent) => { + const { draggable, droppable } = event + if (draggable && droppable) { + const currentFiles = local.file.opened().map((file) => file.path) + const fromIndex = currentFiles.indexOf(draggable.id.toString()) + const toIndex = currentFiles.indexOf(droppable.id.toString()) + if (fromIndex !== toIndex) { + local.file.move(draggable.id.toString(), toIndex) + } + } + } + + const handleDragEnd = () => { + setActiveItem(undefined) + } + + return ( +
+ + + + + +
+ + file.path)}> + + {(file) => ( + + )} + + + +
+ + {(() => { + const activeFile = local.file.active()! + const view = local.file.view(activeFile.path) + return ( +
+ +
+ + navigateChange(-1)}> + + + + + navigateChange(1)}> + + + +
+ + + local.file.setView(activeFile.path, "raw")} + > + + + + + local.file.setView(activeFile.path, "diff-unified")} + > + + + + + local.file.setView(activeFile.path, "diff-split")} + > + + + +
+ ) + })()} + + + local.layout.toggle(localProps.layoutKey, localProps.timelinePane)} + > + + + +
+
+ + {(file) => ( + + {(() => { + const view = local.file.view(file.path) + const showRaw = view === "raw" || !file.content?.diff + const code = showRaw ? (file.content?.content ?? "") : (file.content?.diff ?? "") + return + })()} + + )} + + + + {(() => { + const id = activeItem() + if (!id) return null + const draggedFile = local.file.node(id) + if (!draggedFile) return null + return ( +
+ +
+ ) + })()} + + + localProps.onInputRefChange(element ?? null)} + /> +
+ ) +} + +function TabVisual(props: { file: LocalFile }): JSX.Element { + return ( +
+ + + {props.file.name} + + + + + M + + + A + + + D + + + +
+ ) +} + +function SortableTab(props: { + file: LocalFile + onTabClick: (file: LocalFile) => void + onTabClose: (file: LocalFile) => void +}): JSX.Element { + const sortable = createSortable(props.file.path) + + return ( + // @ts-ignore +
+ +
+ props.onTabClick(props.file)}> + + + props.onTabClose(props.file)} + > + + +
+ +
+ ) +} + +function ConstrainDragYAxis(): JSX.Element { + const context = useDragDropContext() + if (!context) return <> + const [, { onDragStart, onDragEnd, addTransformer, removeTransformer }] = context + const transformer: Transformer = { + id: "constrain-y-axis", + order: 100, + callback: (transform) => ({ ...transform, y: 0 }), + } + onDragStart((event) => { + const id = getDraggableId(event) + if (!id) return + addTransformer("draggables", id, transformer) + }) + onDragEnd((event) => { + const id = getDraggableId(event) + if (!id) return + removeTransformer("draggables", id, transformer.id) + }) + return <> +} + +const getDraggableId = (event: unknown): string | undefined => { + if (typeof event !== "object" || event === null) return undefined + if (!("draggable" in event)) return undefined + const draggable = (event as { draggable?: { id?: unknown } }).draggable + if (!draggable) return undefined + return typeof draggable.id === "string" ? draggable.id : undefined +} diff --git a/packages/app/src/components/file-tree.tsx b/packages/app/src/components/file-tree.tsx index 12d357dd..d31255ce 100644 --- a/packages/app/src/components/file-tree.tsx +++ b/packages/app/src/components/file-tree.tsx @@ -23,6 +23,30 @@ export default function FileTree(props: { [props.nodeClass ?? ""]: !!props.nodeClass, }} style={`padding-left: ${level * 10}px`} + draggable={true} + onDragStart={(e: any) => { + const evt = e as globalThis.DragEvent + evt.dataTransfer!.effectAllowed = "copy" + evt.dataTransfer!.setData("text/plain", `file:${p.node.path}`) + + // Create custom drag image without margins + const dragImage = document.createElement("div") + dragImage.className = + "flex items-center gap-x-2 px-2 py-1 bg-background-element rounded-md border border-border-1" + dragImage.style.position = "absolute" + dragImage.style.top = "-1000px" + + // Copy only the icon and text content without padding + const icon = e.currentTarget.querySelector("svg") + const text = e.currentTarget.querySelector("span") + if (icon && text) { + dragImage.innerHTML = icon.outerHTML + text.outerHTML + } + + document.body.appendChild(dragImage) + evt.dataTransfer!.setDragImage(dragImage, 0, 12) + setTimeout(() => document.body.removeChild(dragImage), 0) + }} {...p} > {p.children} @@ -51,6 +75,7 @@ export default function FileTree(props: { (open ? local.file.expand(node.path) : local.file.collapse(node.path))} diff --git a/packages/app/src/components/prompt-form.tsx b/packages/app/src/components/prompt-form.tsx new file mode 100644 index 00000000..9d7c45a3 --- /dev/null +++ b/packages/app/src/components/prompt-form.tsx @@ -0,0 +1,295 @@ +import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js" +import { Button, FileIcon, Icon, IconButton, Tooltip } from "@/ui" +import { Select } from "@/components/select" +import { useLocal } from "@/context" +import type { FileContext, LocalFile } from "@/context/local" +import { getFilename } from "@/utils" +import { createSpeechRecognition } from "@/utils/speech" + +interface PromptFormProps { + class?: string + classList?: Record + onSubmit: (prompt: string) => Promise | void + onOpenModelSelect: () => void + onInputRefChange?: (element: HTMLTextAreaElement | undefined) => void +} + +export default function PromptForm(props: PromptFormProps) { + const local = useLocal() + + const [prompt, setPrompt] = createSignal("") + const [isDragOver, setIsDragOver] = createSignal(false) + + const placeholderText = "Start typing or speaking..." + + const { + isSupported, + isRecording, + interim: interimTranscript, + start: startSpeech, + stop: stopSpeech, + } = createSpeechRecognition({ + onFinal: (text) => setPrompt((prev) => (prev && !prev.endsWith(" ") ? prev + " " : prev) + text), + }) + + let inputRef: HTMLTextAreaElement | undefined = undefined + let overlayContainerRef: HTMLDivElement | undefined = undefined + let shouldAutoScroll = true + + const promptContent = createMemo(() => { + const base = prompt() || "" + const interim = isRecording() ? interimTranscript() : "" + if (!base && !interim) { + return {placeholderText} + } + const needsSpace = base && interim && !base.endsWith(" ") && !interim.startsWith(" ") + return ( + <> + {base} + {interim && ( + + {needsSpace ? " " : ""} + {interim} + + )} + + ) + }) + + createEffect(() => { + prompt() + interimTranscript() + queueMicrotask(() => { + if (!inputRef) return + if (!overlayContainerRef) return + if (!shouldAutoScroll) { + overlayContainerRef.scrollTop = inputRef.scrollTop + return + } + scrollPromptToEnd() + }) + }) + + const handlePromptKeyDown = (event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => { + if (event.isComposing) return + if (event.key === "Enter" && !event.shiftKey) { + event.preventDefault() + inputRef?.form?.requestSubmit() + } + } + + const handlePromptScroll = (event: Event & { currentTarget: HTMLTextAreaElement }) => { + const target = event.currentTarget + shouldAutoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 4 + if (overlayContainerRef) overlayContainerRef.scrollTop = target.scrollTop + } + + const scrollPromptToEnd = () => { + if (!inputRef) return + const maxInputScroll = inputRef.scrollHeight - inputRef.clientHeight + const next = maxInputScroll > 0 ? maxInputScroll : 0 + inputRef.scrollTop = next + if (overlayContainerRef) overlayContainerRef.scrollTop = next + shouldAutoScroll = true + } + + const handleSubmit = async (event: SubmitEvent) => { + event.preventDefault() + const currentPrompt = prompt() + setPrompt("") + shouldAutoScroll = true + if (overlayContainerRef) overlayContainerRef.scrollTop = 0 + if (inputRef) { + inputRef.scrollTop = 0 + inputRef.blur() + } + + await props.onSubmit(currentPrompt) + } + + onCleanup(() => { + props.onInputRefChange?.(undefined) + }) + + return ( +
+
{ + const evt = event as unknown as globalThis.DragEvent + if (evt.dataTransfer?.types.includes("text/plain")) { + evt.preventDefault() + setIsDragOver(true) + } + }} + onDragLeave={(event) => { + if (event.currentTarget === event.target) { + setIsDragOver(false) + } + }} + onDragOver={(event) => { + const evt = event as unknown as globalThis.DragEvent + if (evt.dataTransfer?.types.includes("text/plain")) { + evt.preventDefault() + evt.dataTransfer.dropEffect = "copy" + } + }} + onDrop={(event) => { + const evt = event as unknown as globalThis.DragEvent + evt.preventDefault() + setIsDragOver(false) + + const data = evt.dataTransfer?.getData("text/plain") + if (data && data.startsWith("file:")) { + const filePath = data.slice(5) + const fileNode = local.file.node(filePath) + if (fileNode) { + local.context.add({ + type: "file", + path: filePath, + }) + } + } + }} + > + 0 || local.context.active()}> +
+ + local.context.removeActive()} /> + + + {(file) => local.context.remove(file.key)} />} + +
+ +
+ +
{ + overlayContainerRef = element ?? undefined + }} + class="pointer-events-none absolute inset-0 overflow-hidden" + > +
+ {promptContent()} +
+
+
+
+
+ (inputRef = el)} - type="text" - value={store.prompt} - onInput={(e) => setStore("prompt", e.currentTarget.value)} - placeholder="Placeholder text..." - class="w-full p-1 pb-4 text-text font-light placeholder-text-muted/70 text-sm focus:outline-none" - /> -
-
-