import { Show, createSignal, onMount, onCleanup } from "solid-js"; import type { Component } from "solid-js"; import type { CompletionViewProps } from "../../types.js"; import { FEEDBACK_DURATION_MS, FADE_DURATION_MS, IME_COMPOSING_KEY_CODE, TEXTAREA_MAX_HEIGHT_PX, } from "../../constants.js"; import { autoResizeTextarea } from "../../utils/auto-resize-textarea.js"; import { confirmationFocusManager } from "../../utils/confirmation-focus-manager.js"; import { isKeyboardEventTriggeredByInput } from "../../utils/is-keyboard-event-triggered-by-input.js"; import { IconReply } from "../icons/icon-reply.jsx"; import { IconReturn } from "../icons/icon-return.jsx"; import { IconSubmit } from "../icons/icon-submit.jsx"; import { IconEllipsis } from "../icons/icon-ellipsis.jsx"; import { cn } from "../../utils/cn.js"; import { IconCheck } from "../icons/icon-check.jsx"; import { BottomSection } from "./bottom-section.js"; interface MoreOptionsButtonProps { onClick: () => void; } const MoreOptionsButton: Component = (props) => { return ( ); }; export const CompletionView: Component = (props) => { const instanceId = Symbol(); let inputRef: HTMLTextAreaElement | undefined; let fadeTimeoutId: number | undefined; let dismissTimeoutId: number | undefined; const [didCopy, setDidCopy] = createSignal(false); const [isFading, setIsFading] = createSignal(false); const displayStatusText = () => (didCopy() ? "Copied" : props.statusText); const [followUpInput, setFollowUpInput] = createSignal(""); const handleShowContextMenu = () => { if (fadeTimeoutId !== undefined) window.clearTimeout(fadeTimeoutId); if (dismissTimeoutId !== undefined) window.clearTimeout(dismissTimeoutId); setIsFading(true); props.onFadingChange?.(true); props.onShowContextMenu?.(); }; const handleAccept = () => { if (didCopy()) return; setDidCopy(true); props.onCopyStateChange?.(); fadeTimeoutId = window.setTimeout(() => { setIsFading(true); props.onFadingChange?.(true); dismissTimeoutId = window.setTimeout(() => { props.onDismiss?.(); }, FADE_DURATION_MS); }, FEEDBACK_DURATION_MS - FADE_DURATION_MS); }; const handleFollowUpSubmit = () => { const prompt = followUpInput().trim(); if (prompt && props.onFollowUpSubmit) { props.onFollowUpSubmit(prompt); } }; const handleInputKeyDown = (event: KeyboardEvent) => { if (event.isComposing || event.keyCode === IME_COMPOSING_KEY_CODE) { return; } const isUndoRedo = event.code === "KeyZ" && (event.metaKey || event.ctrlKey); const isEnterWithoutShift = event.code === "Enter" && !event.shiftKey; const isEscape = event.code === "Escape"; if (!isUndoRedo) { event.stopImmediatePropagation(); } if (isEnterWithoutShift) { event.preventDefault(); const prompt = followUpInput().trim(); if (prompt) { handleFollowUpSubmit(); } else { handleAccept(); } } else if (isEscape) { event.preventDefault(); props.onDismiss?.(); } }; const handleKeyDown = (event: KeyboardEvent) => { if (!confirmationFocusManager.isActive(instanceId)) return; const isUndo = event.code === "KeyZ" && (event.metaKey || event.ctrlKey) && !event.shiftKey; const isEnter = event.code === "Enter"; const isEscape = event.code === "Escape"; if (isUndo && props.supportsUndo && props.onUndo) { event.preventDefault(); event.stopPropagation(); props.onUndo(); return; } if (isKeyboardEventTriggeredByInput(event)) return; if (isEnter) { event.preventDefault(); event.stopPropagation(); handleAccept(); } else if (isEscape) { event.preventDefault(); event.stopPropagation(); props.onDismiss?.(); } }; const handleFocus = () => { confirmationFocusManager.claim(instanceId); }; onMount(() => { confirmationFocusManager.claim(instanceId); window.addEventListener("keydown", handleKeyDown, { capture: true }); if (props.supportsFollowUp && props.onFollowUpSubmit && inputRef) { inputRef.focus(); } }); onCleanup(() => { confirmationFocusManager.release(instanceId); window.removeEventListener("keydown", handleKeyDown, { capture: true }); if (fadeTimeoutId !== undefined) window.clearTimeout(fadeTimeoutId); if (dismissTimeoutId !== undefined) window.clearTimeout(dismissTimeoutId); }); return (

{displayStatusText()}

{props.previousPrompt}