844 lines
29 KiB
TypeScript
844 lines
29 KiB
TypeScript
import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
|
|
import UnifiedPicker from "./unified-picker"
|
|
import { addToHistory, getHistory } from "../stores/message-history"
|
|
import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments"
|
|
import { getPromptValue, setPromptValue, clearPromptValue } from "../stores/prompt-state"
|
|
import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment"
|
|
import type { Attachment } from "../types/attachment"
|
|
import Kbd from "./kbd"
|
|
import HintRow from "./hint-row"
|
|
import { getActiveInstance } from "../stores/instances"
|
|
import { agents } from "../stores/sessions"
|
|
|
|
interface PromptInputProps {
|
|
instanceId: string
|
|
instanceFolder: string
|
|
sessionId: string
|
|
onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
|
|
disabled?: boolean
|
|
escapeInDebounce?: boolean
|
|
}
|
|
|
|
export default function PromptInput(props: PromptInputProps) {
|
|
const [prompt, setPromptInternal] = createSignal("")
|
|
const [history, setHistory] = createSignal<string[]>([])
|
|
const [historyIndex, setHistoryIndex] = createSignal(-1)
|
|
const [isFocused, setIsFocused] = createSignal(false)
|
|
const [showPicker, setShowPicker] = createSignal(false)
|
|
const [searchQuery, setSearchQuery] = createSignal("")
|
|
const [atPosition, setAtPosition] = createSignal<number | null>(null)
|
|
const [isDragging, setIsDragging] = createSignal(false)
|
|
const [ignoredAtPositions, setIgnoredAtPositions] = createSignal<Set<number>>(new Set<number>())
|
|
const [pasteCount, setPasteCount] = createSignal(0)
|
|
const [imageCount, setImageCount] = createSignal(0)
|
|
let textareaRef: HTMLTextAreaElement | undefined
|
|
let containerRef: HTMLDivElement | undefined
|
|
|
|
const MAX_TEXTAREA_HEIGHT = 200
|
|
const MIN_TEXTAREA_LINES = 4
|
|
|
|
function adjustTextareaHeight(textarea: HTMLTextAreaElement | undefined) {
|
|
if (!textarea) return
|
|
|
|
const computedStyle = window.getComputedStyle(textarea)
|
|
const fontSizeValue = parseFloat(computedStyle.fontSize)
|
|
const fallbackFontSize = Number.isFinite(fontSizeValue) && fontSizeValue > 0 ? fontSizeValue : 16
|
|
const lineHeightValue = parseFloat(computedStyle.lineHeight)
|
|
const lineHeight = Number.isFinite(lineHeightValue) && lineHeightValue > 0 ? lineHeightValue : fallbackFontSize * 1.5
|
|
const minHeight = lineHeight * MIN_TEXTAREA_LINES
|
|
|
|
textarea.style.height = "auto"
|
|
const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), MAX_TEXTAREA_HEIGHT)
|
|
textarea.style.height = newHeight + "px"
|
|
}
|
|
|
|
const attachments = () => getAttachments(props.instanceId, props.sessionId)
|
|
const instanceAgents = () => agents().get(props.instanceId) || []
|
|
|
|
const setPrompt = (value: string) => {
|
|
setPromptInternal(value)
|
|
setPromptValue(props.instanceId, props.sessionId, value)
|
|
}
|
|
|
|
const clearPrompt = () => {
|
|
clearPromptValue(props.instanceId, props.sessionId)
|
|
setPromptInternal("")
|
|
}
|
|
|
|
function syncAttachmentCounters(currentPrompt: string, sessionAttachments: Attachment[]) {
|
|
let highestPaste = 0
|
|
let highestImage = 0
|
|
|
|
for (const match of currentPrompt.matchAll(/\[pasted #(\d+)\]/g)) {
|
|
const value = Number.parseInt(match[1], 10)
|
|
if (!Number.isNaN(value)) {
|
|
highestPaste = Math.max(highestPaste, value)
|
|
}
|
|
}
|
|
|
|
for (const attachment of sessionAttachments) {
|
|
if (attachment.source.type === "text") {
|
|
const placeholderMatch = attachment.display.match(/pasted #(\d+)/)
|
|
if (placeholderMatch) {
|
|
const value = Number.parseInt(placeholderMatch[1], 10)
|
|
if (!Number.isNaN(value)) {
|
|
highestPaste = Math.max(highestPaste, value)
|
|
}
|
|
}
|
|
}
|
|
if (attachment.source.type === "file" && attachment.mediaType.startsWith("image/")) {
|
|
const imageMatch = attachment.display.match(/Image #(\d+)/)
|
|
if (imageMatch) {
|
|
const value = Number.parseInt(imageMatch[1], 10)
|
|
if (!Number.isNaN(value)) {
|
|
highestImage = Math.max(highestImage, value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const match of currentPrompt.matchAll(/\[Image #(\d+)\]/g)) {
|
|
const value = Number.parseInt(match[1], 10)
|
|
if (!Number.isNaN(value)) {
|
|
highestImage = Math.max(highestImage, value)
|
|
}
|
|
}
|
|
|
|
setPasteCount(highestPaste)
|
|
setImageCount(highestImage)
|
|
}
|
|
|
|
createEffect(
|
|
on(
|
|
() => `${props.instanceId}:${props.sessionId}`,
|
|
() => {
|
|
const instanceId = props.instanceId
|
|
const sessionId = props.sessionId
|
|
|
|
onCleanup(() => {
|
|
setPromptValue(instanceId, sessionId, prompt())
|
|
})
|
|
|
|
const storedPrompt = getPromptValue(instanceId, sessionId)
|
|
const currentAttachments = untrack(() => getAttachments(instanceId, sessionId))
|
|
|
|
setPromptInternal(storedPrompt)
|
|
setPromptValue(instanceId, sessionId, storedPrompt)
|
|
setHistoryIndex(-1)
|
|
setIgnoredAtPositions(new Set<number>())
|
|
setShowPicker(false)
|
|
setAtPosition(null)
|
|
setSearchQuery("")
|
|
syncAttachmentCounters(storedPrompt, currentAttachments)
|
|
|
|
queueMicrotask(() => {
|
|
adjustTextareaHeight(textareaRef)
|
|
})
|
|
},
|
|
{ defer: true },
|
|
),
|
|
)
|
|
|
|
function handleRemoveAttachment(attachmentId: string) {
|
|
const currentAttachments = attachments()
|
|
const attachment = currentAttachments.find((a) => a.id === attachmentId)
|
|
|
|
removeAttachment(props.instanceId, props.sessionId, attachmentId)
|
|
|
|
if (attachment) {
|
|
const currentPrompt = prompt()
|
|
let newPrompt = currentPrompt
|
|
|
|
if (attachment.source.type === "file") {
|
|
if (attachment.mediaType.startsWith("image/")) {
|
|
const imageMatch = attachment.display.match(/\[Image #(\d+)\]/)
|
|
if (imageMatch) {
|
|
const placeholder = `[Image #${imageMatch[1]}]`
|
|
newPrompt = currentPrompt.replace(placeholder, "").replace(/\s+/g, " ").trim()
|
|
}
|
|
} else {
|
|
const filename = attachment.filename
|
|
newPrompt = currentPrompt.replace(`@${filename}`, "").replace(/\s+/g, " ").trim()
|
|
}
|
|
} else if (attachment.source.type === "agent") {
|
|
const agentName = attachment.filename
|
|
newPrompt = currentPrompt.replace(`@${agentName}`, "").replace(/\s+/g, " ").trim()
|
|
} else if (attachment.source.type === "text") {
|
|
const placeholderMatch = attachment.display.match(/pasted #(\d+)/)
|
|
if (placeholderMatch) {
|
|
const placeholder = `[pasted #${placeholderMatch[1]}]`
|
|
newPrompt = currentPrompt.replace(placeholder, "").replace(/\s+/g, " ").trim()
|
|
}
|
|
}
|
|
|
|
setPrompt(newPrompt)
|
|
|
|
adjustTextareaHeight(textareaRef)
|
|
}
|
|
}
|
|
|
|
async function handlePaste(e: ClipboardEvent) {
|
|
const items = e.clipboardData?.items
|
|
if (!items) return
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i]
|
|
|
|
if (item.type.startsWith("image/")) {
|
|
e.preventDefault()
|
|
|
|
const blob = item.getAsFile()
|
|
if (!blob) continue
|
|
|
|
const count = imageCount() + 1
|
|
setImageCount(count)
|
|
|
|
const reader = new FileReader()
|
|
reader.onload = () => {
|
|
const base64Data = (reader.result as string).split(",")[1]
|
|
const display = `[Image #${count}]`
|
|
const filename = `image-${count}.png`
|
|
|
|
const attachment = createFileAttachment(
|
|
filename,
|
|
filename,
|
|
"image/png",
|
|
new TextEncoder().encode(base64Data),
|
|
props.instanceFolder,
|
|
)
|
|
attachment.url = `data:image/png;base64,${base64Data}`
|
|
attachment.display = display
|
|
addAttachment(props.instanceId, props.sessionId, attachment)
|
|
|
|
const textarea = textareaRef
|
|
if (textarea) {
|
|
const start = textarea.selectionStart
|
|
const end = textarea.selectionEnd
|
|
const currentText = prompt()
|
|
const placeholder = `[Image #${count}]`
|
|
const newText = currentText.substring(0, start) + placeholder + currentText.substring(end)
|
|
setPrompt(newText)
|
|
|
|
setTimeout(() => {
|
|
const newCursorPos = start + placeholder.length
|
|
textarea.setSelectionRange(newCursorPos, newCursorPos)
|
|
adjustTextareaHeight(textarea)
|
|
textarea.focus()
|
|
}, 0)
|
|
}
|
|
}
|
|
reader.readAsDataURL(blob)
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
const pastedText = e.clipboardData?.getData("text/plain")
|
|
if (!pastedText) return
|
|
|
|
const lineCount = pastedText.split("\n").length
|
|
const charCount = pastedText.length
|
|
|
|
const isLongPaste = charCount > 150 || lineCount > 3
|
|
|
|
if (isLongPaste) {
|
|
e.preventDefault()
|
|
|
|
const count = pasteCount() + 1
|
|
setPasteCount(count)
|
|
|
|
const summary = lineCount > 1 ? `${lineCount} lines` : `${charCount} chars`
|
|
const display = `pasted #${count} (${summary})`
|
|
const filename = `paste-${count}.txt`
|
|
|
|
const attachment = createTextAttachment(pastedText, display, filename)
|
|
addAttachment(props.instanceId, props.sessionId, attachment)
|
|
|
|
const textarea = textareaRef
|
|
if (textarea) {
|
|
const start = textarea.selectionStart
|
|
const end = textarea.selectionEnd
|
|
const currentText = prompt()
|
|
const placeholder = `[pasted #${count}]`
|
|
const newText = currentText.substring(0, start) + placeholder + currentText.substring(end)
|
|
setPrompt(newText)
|
|
|
|
setTimeout(() => {
|
|
const newCursorPos = start + placeholder.length
|
|
textarea.setSelectionRange(newCursorPos, newCursorPos)
|
|
adjustTextareaHeight(textarea)
|
|
textarea.focus()
|
|
}, 0)
|
|
}
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
|
const activeElement = document.activeElement as HTMLElement
|
|
|
|
const isInputElement =
|
|
activeElement?.tagName === "INPUT" ||
|
|
activeElement?.tagName === "TEXTAREA" ||
|
|
activeElement?.tagName === "SELECT" ||
|
|
activeElement?.isContentEditable
|
|
|
|
if (isInputElement) return
|
|
|
|
const isModifierKey = e.ctrlKey || e.metaKey || e.altKey
|
|
if (isModifierKey) return
|
|
|
|
const isSpecialKey =
|
|
e.key === "Tab" || e.key === "Enter" || e.key.startsWith("Arrow") || e.key === "Backspace" || e.key === "Delete"
|
|
if (isSpecialKey) return
|
|
|
|
if (e.key.length === 1 && textareaRef && !props.disabled) {
|
|
textareaRef.focus()
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keydown", handleGlobalKeyDown)
|
|
|
|
onCleanup(() => {
|
|
document.removeEventListener("keydown", handleGlobalKeyDown)
|
|
})
|
|
|
|
void (async () => {
|
|
const loaded = await getHistory(props.instanceFolder)
|
|
setHistory(loaded)
|
|
})()
|
|
})
|
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
const textarea = textareaRef
|
|
if (!textarea) return
|
|
|
|
if (e.key === "Backspace" || e.key === "Delete") {
|
|
const cursorPos = textarea.selectionStart
|
|
const text = prompt()
|
|
|
|
const pastePlaceholderRegex = /\[pasted #(\d+)\]/g
|
|
let pasteMatch
|
|
|
|
while ((pasteMatch = pastePlaceholderRegex.exec(text)) !== null) {
|
|
const placeholderStart = pasteMatch.index
|
|
const placeholderEnd = pasteMatch.index + pasteMatch[0].length
|
|
const pasteNumber = pasteMatch[1]
|
|
|
|
const isDeletingFromEnd = e.key === "Backspace" && cursorPos === placeholderEnd
|
|
const isDeletingFromStart = e.key === "Delete" && cursorPos === placeholderStart
|
|
const isSelected =
|
|
textarea.selectionStart <= placeholderStart &&
|
|
textarea.selectionEnd >= placeholderEnd &&
|
|
textarea.selectionStart !== textarea.selectionEnd
|
|
|
|
if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
|
|
e.preventDefault()
|
|
|
|
const currentAttachments = attachments()
|
|
const attachment = currentAttachments.find(
|
|
(a) => a.source.type === "text" && a.display.includes(`pasted #${pasteNumber}`),
|
|
)
|
|
|
|
if (attachment) {
|
|
removeAttachment(props.instanceId, props.sessionId, attachment.id)
|
|
}
|
|
|
|
const newText = text.substring(0, placeholderStart) + text.substring(placeholderEnd)
|
|
setPrompt(newText)
|
|
|
|
setTimeout(() => {
|
|
textarea.setSelectionRange(placeholderStart, placeholderStart)
|
|
adjustTextareaHeight(textarea)
|
|
}, 0)
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
const imagePlaceholderRegex = /\[Image #(\d+)\]/g
|
|
let imageMatch
|
|
|
|
while ((imageMatch = imagePlaceholderRegex.exec(text)) !== null) {
|
|
const placeholderStart = imageMatch.index
|
|
const placeholderEnd = imageMatch.index + imageMatch[0].length
|
|
const imageNumber = imageMatch[1]
|
|
|
|
const isDeletingFromEnd = e.key === "Backspace" && cursorPos === placeholderEnd
|
|
const isDeletingFromStart = e.key === "Delete" && cursorPos === placeholderStart
|
|
const isSelected =
|
|
textarea.selectionStart <= placeholderStart &&
|
|
textarea.selectionEnd >= placeholderEnd &&
|
|
textarea.selectionStart !== textarea.selectionEnd
|
|
|
|
if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
|
|
e.preventDefault()
|
|
|
|
const currentAttachments = attachments()
|
|
const attachment = currentAttachments.find(
|
|
(a) =>
|
|
a.source.type === "file" &&
|
|
a.mediaType.startsWith("image/") &&
|
|
a.display.includes(`Image #${imageNumber}`),
|
|
)
|
|
|
|
if (attachment) {
|
|
removeAttachment(props.instanceId, props.sessionId, attachment.id)
|
|
}
|
|
|
|
const newText = text.substring(0, placeholderStart) + text.substring(placeholderEnd)
|
|
setPrompt(newText)
|
|
|
|
setTimeout(() => {
|
|
textarea.setSelectionRange(placeholderStart, placeholderStart)
|
|
adjustTextareaHeight(textarea)
|
|
}, 0)
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
const mentionRegex = /@(\S+)/g
|
|
let mentionMatch
|
|
|
|
while ((mentionMatch = mentionRegex.exec(text)) !== null) {
|
|
const mentionStart = mentionMatch.index
|
|
const mentionEnd = mentionMatch.index + mentionMatch[0].length
|
|
const name = mentionMatch[1]
|
|
|
|
const isDeletingFromEnd = e.key === "Backspace" && cursorPos === mentionEnd
|
|
const isDeletingFromStart = e.key === "Delete" && cursorPos === mentionStart
|
|
const isSelected =
|
|
textarea.selectionStart <= mentionStart &&
|
|
textarea.selectionEnd >= mentionEnd &&
|
|
textarea.selectionStart !== textarea.selectionEnd
|
|
|
|
if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
|
|
const currentAttachments = attachments()
|
|
const attachment = currentAttachments.find(
|
|
(a) => (a.source.type === "file" || a.source.type === "agent") && a.filename === name,
|
|
)
|
|
|
|
if (attachment) {
|
|
e.preventDefault()
|
|
|
|
removeAttachment(props.instanceId, props.sessionId, attachment.id)
|
|
|
|
setIgnoredAtPositions((prev) => {
|
|
const next = new Set(prev)
|
|
next.delete(mentionStart)
|
|
return next
|
|
})
|
|
|
|
const newText = text.substring(0, mentionStart) + text.substring(mentionEnd)
|
|
setPrompt(newText)
|
|
|
|
setTimeout(() => {
|
|
textarea.setSelectionRange(mentionStart, mentionStart)
|
|
adjustTextareaHeight(textarea)
|
|
}, 0)
|
|
|
|
return
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault()
|
|
if (showPicker()) {
|
|
handlePickerClose()
|
|
}
|
|
handleSend()
|
|
return
|
|
}
|
|
|
|
const atStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0
|
|
const currentHistory = history()
|
|
|
|
if (e.key === "ArrowUp" && !showPicker() && atStart && currentHistory.length > 0) {
|
|
e.preventDefault()
|
|
const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, currentHistory.length - 1)
|
|
setHistoryIndex(newIndex)
|
|
setPrompt(currentHistory[newIndex])
|
|
setTimeout(() => {
|
|
adjustTextareaHeight(textarea)
|
|
}, 0)
|
|
return
|
|
}
|
|
|
|
if (e.key === "ArrowDown" && !showPicker() && historyIndex() >= 0) {
|
|
e.preventDefault()
|
|
const newIndex = historyIndex() - 1
|
|
if (newIndex >= 0) {
|
|
setHistoryIndex(newIndex)
|
|
setPrompt(currentHistory[newIndex])
|
|
} else {
|
|
setHistoryIndex(-1)
|
|
setPrompt("")
|
|
}
|
|
setTimeout(() => {
|
|
adjustTextareaHeight(textarea)
|
|
}, 0)
|
|
return
|
|
}
|
|
}
|
|
|
|
async function handleSend() {
|
|
const text = prompt().trim()
|
|
const currentAttachments = attachments()
|
|
if (!text || props.disabled) return
|
|
|
|
clearPrompt()
|
|
clearAttachments(props.instanceId, props.sessionId)
|
|
setIgnoredAtPositions(new Set<number>())
|
|
setPasteCount(0)
|
|
setImageCount(0)
|
|
|
|
adjustTextareaHeight(textareaRef)
|
|
|
|
try {
|
|
await addToHistory(props.instanceFolder, text)
|
|
|
|
const updated = await getHistory(props.instanceFolder)
|
|
setHistory(updated)
|
|
setHistoryIndex(-1)
|
|
|
|
await props.onSend(text, currentAttachments)
|
|
} catch (error) {
|
|
console.error("Failed to send message:", error)
|
|
alert("Failed to send message: " + (error instanceof Error ? error.message : String(error)))
|
|
} finally {
|
|
textareaRef?.focus()
|
|
}
|
|
}
|
|
|
|
function handleInput(e: Event) {
|
|
const target = e.target as HTMLTextAreaElement
|
|
const value = target.value
|
|
setPrompt(value)
|
|
setHistoryIndex(-1)
|
|
|
|
adjustTextareaHeight(target)
|
|
|
|
const cursorPos = target.selectionStart
|
|
const textBeforeCursor = value.substring(0, cursorPos)
|
|
const lastAtIndex = textBeforeCursor.lastIndexOf("@")
|
|
|
|
const previousAtPosition = atPosition()
|
|
|
|
if (lastAtIndex === -1) {
|
|
setIgnoredAtPositions(new Set<number>())
|
|
} else if (previousAtPosition !== null && lastAtIndex !== previousAtPosition) {
|
|
setIgnoredAtPositions((prev) => {
|
|
const next = new Set(prev)
|
|
next.delete(previousAtPosition)
|
|
return next
|
|
})
|
|
}
|
|
|
|
if (lastAtIndex !== -1) {
|
|
const textAfterAt = value.substring(lastAtIndex + 1, cursorPos)
|
|
const hasSpace = textAfterAt.includes(" ") || textAfterAt.includes("\n")
|
|
|
|
if (!hasSpace && cursorPos === lastAtIndex + textAfterAt.length + 1) {
|
|
if (!ignoredAtPositions().has(lastAtIndex)) {
|
|
setAtPosition(lastAtIndex)
|
|
setSearchQuery(textAfterAt)
|
|
setShowPicker(true)
|
|
}
|
|
return
|
|
}
|
|
}
|
|
|
|
setShowPicker(false)
|
|
setAtPosition(null)
|
|
}
|
|
|
|
function handlePickerSelect(item: { type: "agent"; agent: any } | { type: "file"; file: any }) {
|
|
if (item.type === "agent") {
|
|
const agentName = item.agent.name
|
|
const existingAttachments = attachments()
|
|
const alreadyAttached = existingAttachments.some(
|
|
(att) => att.source.type === "agent" && att.source.name === agentName,
|
|
)
|
|
|
|
if (!alreadyAttached) {
|
|
const attachment = createAgentAttachment(agentName)
|
|
addAttachment(props.instanceId, props.sessionId, attachment)
|
|
}
|
|
|
|
const currentPrompt = prompt()
|
|
const pos = atPosition()
|
|
const cursorPos = textareaRef?.selectionStart || 0
|
|
|
|
if (pos !== null) {
|
|
const before = currentPrompt.substring(0, pos)
|
|
const after = currentPrompt.substring(cursorPos)
|
|
const attachmentText = `@${agentName}`
|
|
const newPrompt = before + attachmentText + " " + after
|
|
setPrompt(newPrompt)
|
|
|
|
setTimeout(() => {
|
|
if (textareaRef) {
|
|
const newCursorPos = pos + attachmentText.length + 1
|
|
textareaRef.setSelectionRange(newCursorPos, newCursorPos)
|
|
adjustTextareaHeight(textareaRef)
|
|
}
|
|
}, 0)
|
|
}
|
|
} else if (item.type === "file") {
|
|
const path = item.file.path
|
|
const isFolder = path.endsWith("/")
|
|
const filename = path.split("/").pop() || path
|
|
|
|
if (isFolder) {
|
|
const currentPrompt = prompt()
|
|
const pos = atPosition()
|
|
const cursorPos = textareaRef?.selectionStart || 0
|
|
|
|
if (pos !== null) {
|
|
const before = currentPrompt.substring(0, pos + 1)
|
|
const after = currentPrompt.substring(cursorPos)
|
|
const newPrompt = before + path + after
|
|
setPrompt(newPrompt)
|
|
setSearchQuery(path)
|
|
|
|
setTimeout(() => {
|
|
if (textareaRef) {
|
|
const newCursorPos = pos + 1 + path.length
|
|
textareaRef.setSelectionRange(newCursorPos, newCursorPos)
|
|
adjustTextareaHeight(textareaRef)
|
|
textareaRef.focus()
|
|
}
|
|
}, 0)
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
const existingAttachments = attachments()
|
|
const alreadyAttached = existingAttachments.some((att) => att.source.type === "file" && att.source.path === path)
|
|
|
|
if (!alreadyAttached) {
|
|
const attachment = createFileAttachment(path, filename, "text/plain", undefined, props.instanceFolder)
|
|
addAttachment(props.instanceId, props.sessionId, attachment)
|
|
}
|
|
|
|
const currentPrompt = prompt()
|
|
const pos = atPosition()
|
|
const cursorPos = textareaRef?.selectionStart || 0
|
|
|
|
if (pos !== null) {
|
|
const before = currentPrompt.substring(0, pos)
|
|
const after = currentPrompt.substring(cursorPos)
|
|
const attachmentText = `@${filename}`
|
|
const newPrompt = before + attachmentText + " " + after
|
|
setPrompt(newPrompt)
|
|
|
|
setTimeout(() => {
|
|
if (textareaRef) {
|
|
const newCursorPos = pos + attachmentText.length + 1
|
|
textareaRef.setSelectionRange(newCursorPos, newCursorPos)
|
|
adjustTextareaHeight(textareaRef)
|
|
}
|
|
}, 0)
|
|
}
|
|
}
|
|
|
|
setShowPicker(false)
|
|
setAtPosition(null)
|
|
setSearchQuery("")
|
|
textareaRef?.focus()
|
|
}
|
|
|
|
function handlePickerClose() {
|
|
const pos = atPosition()
|
|
if (pos !== null) {
|
|
setIgnoredAtPositions((prev) => new Set(prev).add(pos))
|
|
}
|
|
setShowPicker(false)
|
|
setAtPosition(null)
|
|
setSearchQuery("")
|
|
setTimeout(() => textareaRef?.focus(), 0)
|
|
}
|
|
|
|
function handleDragOver(e: DragEvent) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsDragging(true)
|
|
}
|
|
|
|
function handleDragLeave(e: DragEvent) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsDragging(false)
|
|
}
|
|
|
|
function handleDrop(e: DragEvent) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsDragging(false)
|
|
|
|
const files = e.dataTransfer?.files
|
|
if (!files || files.length === 0) return
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i]
|
|
const path = (file as any).path || file.name
|
|
const filename = file.name
|
|
const mime = file.type || "text/plain"
|
|
|
|
const attachment = createFileAttachment(path, filename, mime, undefined, props.instanceFolder)
|
|
addAttachment(props.instanceId, props.sessionId, attachment)
|
|
}
|
|
|
|
textareaRef?.focus()
|
|
}
|
|
|
|
const canSend = () => (prompt().trim().length > 0 || attachments().length > 0) && !props.disabled
|
|
|
|
const instance = () => getActiveInstance()
|
|
|
|
return (
|
|
<div class="prompt-input-container">
|
|
<div
|
|
ref={containerRef}
|
|
class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
|
|
style={isDragging() ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);" : ""}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
>
|
|
<Show when={showPicker() && instance()}>
|
|
<UnifiedPicker
|
|
open={showPicker()}
|
|
onClose={handlePickerClose}
|
|
onSelect={handlePickerSelect}
|
|
agents={instanceAgents()}
|
|
instanceClient={instance()!.client}
|
|
searchQuery={searchQuery()}
|
|
textareaRef={textareaRef}
|
|
workspaceFolder={props.instanceFolder}
|
|
/>
|
|
</Show>
|
|
|
|
<div class="flex flex-1 flex-col">
|
|
<Show when={attachments().length > 0}>
|
|
<div class="flex flex-wrap gap-1.5 border-b pb-2" style="border-color: var(--border-base);">
|
|
<For each={attachments()}>
|
|
{(attachment) => {
|
|
const isImage = attachment.mediaType.startsWith("image/")
|
|
return (
|
|
<div class="attachment-chip">
|
|
<Show
|
|
when={isImage}
|
|
fallback={
|
|
<Show
|
|
when={attachment.source.type === "text"}
|
|
fallback={
|
|
<Show
|
|
when={attachment.source.type === "agent"}
|
|
fallback={
|
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
}
|
|
>
|
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
</Show>
|
|
}
|
|
>
|
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
</Show>
|
|
}
|
|
>
|
|
<img src={attachment.url} alt={attachment.filename} class="h-5 w-5 rounded object-cover" />
|
|
</Show>
|
|
<span>{attachment.source.type === "text" ? attachment.display : attachment.filename}</span>
|
|
<button
|
|
onClick={() => handleRemoveAttachment(attachment.id)}
|
|
class="attachment-remove"
|
|
aria-label="Remove attachment"
|
|
>
|
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)
|
|
}}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
<textarea
|
|
ref={textareaRef}
|
|
class="prompt-input"
|
|
placeholder="Type your message, @file, @agent, or paste images and text..."
|
|
value={prompt()}
|
|
onInput={handleInput}
|
|
onKeyDown={handleKeyDown}
|
|
onPaste={handlePaste}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
disabled={props.disabled}
|
|
rows={1}
|
|
style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
|
|
spellcheck={false}
|
|
/>
|
|
</div>
|
|
|
|
<button class="send-button" onClick={handleSend} disabled={!canSend()} aria-label="Send message">
|
|
<span class="send-icon">▶</span>
|
|
</button>
|
|
</div>
|
|
<div class="prompt-input-hints">
|
|
<div class="flex justify-end">
|
|
<HintRow>
|
|
<Show
|
|
when={props.escapeInDebounce}
|
|
fallback={
|
|
<>
|
|
<Kbd>Enter</Kbd> for new line • <Kbd shortcut="cmd+enter" /> to send • <Kbd>@</Kbd> for files/agents •{" "}
|
|
<Kbd>↑↓</Kbd> for history
|
|
<Show when={attachments().length > 0}>
|
|
<span class="ml-2 text-xs" style="color: var(--text-muted);">• {attachments().length} file(s) attached</span>
|
|
</Show>
|
|
</>
|
|
}
|
|
>
|
|
<span class="font-medium" style="color: var(--status-warning);">
|
|
Press <Kbd>Esc</Kbd> again to abort session
|
|
</span>
|
|
</Show>
|
|
</HintRow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|