${this._renderPillsList()}
${this.modelItems && this.modelItems.length > 0
? html`
`
: ""}
${this.voice
? html`
${attachmentsArray.map((attachment) => {
// Prefer a local object URL for an instant preview, then the uploaded
// blob URL once it lands; only images get a thumbnail.
const dataType =
(attachment.data instanceof File || attachment.data instanceof Blob)
? attachment.data.type
: "";
const isImage = (attachment.mediaType || dataType || "")
.startsWith("image/");
const thumb = attachment.previewUrl ??
(isImage ? attachment.url : undefined);
return html`
${attachment.uploading
? html`
⏳
`
: ""}${attachment
.error
? html`
⚠️
`
: ""}${attachment.name} ${thumb
? html`
`
: html`
${this._getAttachmentIcon(
attachment.type,
)}
`}
`;
})}
`;
}
/**
* Handle voice transcription complete - append text to textarea
*/
private _handleTranscription(e: CustomEvent) {
const text = e.detail?.transcription?.text;
if (!text) return;
const textarea = this._textareaElement as HTMLTextAreaElement;
if (!textarea) return;
this.value = this.value + (this.value ? " " : "") + text;
textarea.value = this.value;
// Auto-resize and notify
if (this.autoResize) {
textarea.style.height = "auto";
textarea.style.height = `${
Math.min(
textarea.scrollHeight,
parseFloat(
getComputedStyle(this).getPropertyValue(
"--cf-prompt-input-max-height",
) || "12rem",
) * 16,
)
}px`;
}
this.emit("cf-input", { value: this.value });
textarea.focus();
}
/**
* Handle file upload button click
*/
private _handleUploadClick() {
const fileInput = this.shadowRoot?.querySelector(
'input[type="file"]',
) as HTMLInputElement;
fileInput?.click();
}
/**
* Handle file selection
*/
private _handleFileSelect(event: Event) {
const input = event.target as HTMLInputElement;
const files = input.files;
if (!files || files.length === 0) return;
for (const file of Array.from(files)) {
const id = this._generateAttachmentId();
const attachment: PromptAttachment = {
id,
name: file.name,
type: "file",
data: file,
};
this.addAttachment(attachment);
}
// Reset the input so the same file can be selected again
input.value = "";
}
/**
* Handle model selection change
*/
private _handleModelChange(event: Event) {
const select = event.target as HTMLSelectElement;
const newValue = select.value;
this._modelController.setValue(newValue);
// When model is a plain string (not bound to Cell), update it directly
if (typeof this.model === "string") {
this.model = newValue;
}
}
/**
* Apply the current model value to the DOM select element
* This ensures the select element shows the correct selected option
*/
private _applyModelValueToDom() {
// Re-query if we don't have a reference (e.g., model picker appeared after first render)
if (!this._modelSelectElement) {
this._modelSelectElement = this.shadowRoot?.querySelector(
".model-select",
) as HTMLSelectElement;
}
if (!this._modelSelectElement) return;
const currentValue = this._modelController.getValue();
if (currentValue != null) {
this._modelSelectElement.value = String(currentValue);
}
}
/**
* Mount the mentions overlay in the document body
*/
private _mountMentionsOverlay() {
if (this._mentionsOverlay) return;
const el = document.createElement("div");
el.style.position = "fixed";
el.style.inset = "0 auto auto 0";
el.style.zIndex = "1000";
el.style.pointerEvents = "auto";
el.dataset.cfPromptInputMentionsOverlay = "";
document.body.appendChild(el);
this._mentionsOverlay = el;
applyThemeToElement(el, this.theme ?? defaultTheme);
}
/**
* Unmount the mentions overlay from the document body
*/
private _unmountMentionsOverlay() {
if (this._mentionsOverlay) {
render(nothing, this._mentionsOverlay);
this._mentionsOverlay.remove();
this._mentionsOverlay = null;
}
if (this._raf) cancelAnimationFrame(this._raf);
this._raf = undefined;
}
/**
* Render the mentions dropdown into the overlay
*/
private _renderMentionsOverlay() {
if (!this._mentionsOverlay) return;
const filteredMentions = this.mentionController.getFilteredMentions();
if (filteredMentions.length === 0) {
this._unmountMentionsOverlay();
return;
}
// Inline styles so overlay has its own styling
const tpl = html`
${filteredMentions.map((mentionCell, index) =>
html`
`
)}
`;
render(tpl, this._mentionsOverlay);
}
/**
* Position the mentions overlay relative to the textarea
*/
private _positionMentionsOverlay() {
if (!this._mentionsOverlay) return;
const dropdown = this._mentionsOverlay.querySelector(
".mentions-dropdown",
) as HTMLElement | null;
if (!dropdown) return;
const textarea = this._textareaElement as HTMLTextAreaElement;
if (!textarea) return;
const rect = textarea.getBoundingClientRect();
// Start below the textarea
let top = rect.bottom + 2;
let left = rect.left;
// Temporarily set position for measurement
dropdown.style.top = `${Math.round(top)}px`;
dropdown.style.left = `${Math.round(left)}px`;
dropdown.style.right = "auto";
dropdown.style.bottom = "auto";
// Next frame, measure and adjust to viewport
if (this._raf) cancelAnimationFrame(this._raf);
this._raf = requestAnimationFrame(() => {
const vw = globalThis.innerWidth;
const vh = globalThis.innerHeight;
const dr = dropdown.getBoundingClientRect();
// Horizontal clamping
if (dr.right > vw - 8) {
left = Math.max(8, vw - dr.width - 8);
}
if (left < 8) left = 8;
// Vertical flip if overflow bottom
if (dr.bottom > vh - 8) {
const above = rect.top - dr.height - 2;
if (above >= 8) top = above; // place above if space
else top = Math.max(8, vh - dr.height - 8); // clamp
}
dropdown.style.top = `${Math.round(top)}px`;
dropdown.style.left = `${Math.round(left)}px`;
});
}
/**
* Reposition the mentions overlay (for resize/scroll)
*/
private _repositionMentionsOverlay() {
this._positionMentionsOverlay();
}
/**
* Focus the textarea programmatically
*/
override focus(): void {
(this._textareaElement as any)?.focus?.();
}
/**
* Clear the textarea value
*/
clear(): void {
const textarea = this._textareaElement as any;
if (textarea) {
textarea.value = "";
this.value = "";
}
}
/**
* Check if the input has content
*/
get hasContent(): boolean {
return !!this.value?.trim();
}
}
${mentionCell.get()?.[NAME]}