@nuasite/cms 0.19.1 → 0.20.2

package/src/editor/components/ai-tooltip.tsx

@@ -1,180 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
-import { Z_INDEX } from '../constants'
-
-export interface AITooltipCallbacks {
-	onPromptSubmit: (prompt: string, elementId: string) => void
-}
-
-export interface AITooltipProps {
-	callbacks: AITooltipCallbacks
-	visible: boolean
-	elementId: string | null
-	rect: DOMRect | null
-	processing: boolean
-}
-
-export function AITooltip({ callbacks, visible, elementId, rect, processing }: AITooltipProps) {
-	const [isExpanded, setIsExpanded] = useState(false)
-	const [prompt, setPrompt] = useState('')
-	const inputRef = useRef<HTMLInputElement>(null)
-
-	useEffect(() => {
-		if (!visible) {
-			setIsExpanded(false)
-			setPrompt('')
-		}
-	}, [visible])
-
-	useEffect(() => {
-		if (isExpanded && inputRef.current) {
-			setTimeout(() => inputRef.current?.focus(), 50)
-		}
-	}, [isExpanded])
-
-	if (!visible || !rect || !elementId) {
-		return null
-	}
-
-	// Don't show empty tooltip when not expanded and not processing
-	// (the content for this state is not yet implemented)
-	if (!isExpanded && !processing) {
-		return null
-	}
-
-	// Calculate position
-	const tooltipWidth = 200
-	const tooltipHeight = 50
-	let left = rect.left + rect.width / 2 - tooltipWidth / 2
-	let top = rect.top - tooltipHeight - 8
-
-	const padding = 10
-	const maxLeft = window.innerWidth - tooltipWidth - padding
-	const minLeft = padding
-
-	left = Math.max(minLeft, Math.min(left, maxLeft))
-
-	if (top < padding) {
-		top = rect.bottom + 8
-	}
-
-	const maxTop = window.innerHeight - tooltipHeight - padding
-	top = Math.min(top, maxTop)
-
-	const handleExpand = (e: MouseEvent) => {
-		e.preventDefault()
-		e.stopPropagation()
-		if (!isExpanded && elementId) {
-			setIsExpanded(true)
-		}
-	}
-
-	const handleCancel = (e: MouseEvent) => {
-		e.preventDefault()
-		e.stopPropagation()
-		setIsExpanded(false)
-	}
-
-	const handleSubmit = (e: Event) => {
-		e.preventDefault()
-		e.stopPropagation()
-		if (prompt.trim() && elementId) {
-			callbacks.onPromptSubmit(prompt.trim(), elementId)
-			setIsExpanded(false)
-			setPrompt('')
-		}
-	}
-
-	const handleMouseDown = (e: MouseEvent) => {
-		// Stop propagation to prevent the click-outside handler from hiding the tooltip
-		e.stopPropagation()
-	}
-
-	return (
-		<div
-			data-cms-ui
-			onMouseDown={handleMouseDown}
-			onClick={(e: MouseEvent) => e.stopPropagation()}
-			style={{
-				position: 'fixed',
-				left: `${left}px`,
-				top: `${top}px`,
-				zIndex: Z_INDEX.OVERLAY,
-				fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
-				fontSize: '12px',
-			}}
-		>
-			<div
-				class={`tooltip ${isExpanded ? 'expanded' : ''} ${
-					processing ? 'processing' : ''
-				} bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.3)] border border-white/10 text-white cursor-pointer transition-all duration-200 pointer-events-auto select-none rounded-cms-lg`}
-				onClick={handleExpand}
-				onMouseDown={handleMouseDown}
-				style={{
-					padding: isExpanded ? '16px' : '10px 14px',
-					minWidth: isExpanded ? '280px' : 'auto',
-					maxWidth: isExpanded ? '320px' : 'auto',
-				}}
-			>
-				{
-					// TODO: Implement AI tooltip
-					/*{!isExpanded && !processing && (
-					<div class="flex items-center gap-1.5 text-cms-secondary">
-						<svg
-							width="14"
-							height="14"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2.5"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" />
-						</svg>
-						<span class="font-medium">Ask AI to edit</span>
-					</div>
-				)}*/
-				}
-				{processing && (
-					<div class="flex items-center gap-2 text-white/70">
-						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="animate-spin">
-							<path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
-						</svg>
-						<span class="font-medium">Processing...</span>
-					</div>
-				)}
-				{isExpanded && !processing && (
-					<form class="prompt-form flex flex-col gap-3" onSubmit={handleSubmit}>
-						<label class="text-[11px] text-white/50 font-medium">What would you like to change?</label>
-						<input
-							ref={inputRef}
-							type="text"
-							placeholder="e.g., make it shorter..."
-							value={prompt}
-							onInput={(e) => setPrompt((e.target as HTMLInputElement).value)}
-							onMouseDown={(e) => e.stopPropagation()}
-							class="w-full px-3 py-2 border border-white/20 bg-white/10 text-white text-xs font-sans outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-all rounded-cms-sm placeholder:text-white/40"
-						/>
-						<div class="flex gap-2 justify-end">
-							<button
-								type="button"
-								onClick={handleCancel}
-								onMouseDown={(e) => e.stopPropagation()}
-								class="px-3 py-1.5 text-[11px] font-medium cursor-pointer transition-all bg-white/10 text-white/80 hover:bg-white/20 hover:text-white rounded-cms-pill"
-							>
-								Cancel
-							</button>
-							<button
-								type="submit"
-								onMouseDown={(e) => e.stopPropagation()}
-								class="px-3 py-1.5 text-[11px] font-medium cursor-pointer transition-all bg-cms-primary text-cms-primary-text hover:bg-cms-primary-hover rounded-cms-pill"
-							>
-								Apply
-							</button>
-						</div>
-					</form>
-				)}
-			</div>
-		</div>
-	)
-}

package/src/editor/components/mdx-props-editor.tsx

@@ -1,94 +0,0 @@
-import { useEffect, useState } from 'preact/hooks'
-import { clampPanelPosition, Z_INDEX } from '../constants'
-import { getComponentDefinition } from '../manifest'
-import { closeMdxPropsEditor, manifest, mdxPropsEditorState } from '../signals'
-import { MdxComponentIcon } from './mdx-block-view'
-import { CancelButton, CloseButton } from './modal-shell'
-import { PropEditor } from './prop-editor'
-
-export function MdxPropsEditor({
-	onUpdateProps,
-}: {
-	onUpdateProps: (nodePos: number, props: Record<string, string>) => void
-}) {
-	const state = mdxPropsEditorState.value
-	const isVisible = state.isOpen && state.componentName !== null && state.nodePos !== null
-
-	const definition = isVisible ? getComponentDefinition(manifest.value, state.componentName!) : undefined
-	const [propValues, setPropValues] = useState<Record<string, string>>(state.props)
-
-	useEffect(() => {
-		if (isVisible) setPropValues(state.props)
-	}, [state.nodePos, state.componentName, state.props, isVisible])
-
-	if (!isVisible) return null
-
-	const panelStyle = state.cursorPos ? clampPanelPosition(state.cursorPos, 360) : {}
-
-	const handleSave = () => {
-		if (state.nodePos !== null) {
-			onUpdateProps(state.nodePos, propValues)
-			closeMdxPropsEditor()
-		}
-	}
-
-	return (
-		<>
-			<div
-				data-cms-ui
-				onClick={closeMdxPropsEditor}
-				style={{ zIndex: Z_INDEX.SELECTION }}
-				class="fixed inset-0"
-			/>
-
-			<div
-				data-cms-ui
-				onClick={(e: MouseEvent) => e.stopPropagation()}
-				class="fixed w-90 bg-cms-dark shadow-[0_8px_32px_rgba(0,0,0,0.4)] font-sans text-sm overflow-hidden flex flex-col rounded-cms-xl border border-white/10"
-				style={{ ...panelStyle, zIndex: Z_INDEX.MODAL }}
-			>
-				<div class="px-5 py-4 flex justify-between items-center border-b border-white/10">
-					<div class="flex items-center gap-2">
-						<MdxComponentIcon />
-						<span class="font-semibold text-white">{state.componentName}</span>
-					</div>
-					<CloseButton onClick={closeMdxPropsEditor} />
-				</div>
-
-				<div class="p-5 overflow-y-auto flex-1">
-					{definition
-						? (
-							definition.props.map((prop) => (
-								<PropEditor
-									key={prop.name}
-									prop={prop}
-									value={propValues[prop.name] || ''}
-									onChange={(value) => setPropValues((prev) => ({ ...prev, [prop.name]: value }))}
-								/>
-							))
-						)
-						: (
-							<div class="text-white/50 text-[13px]">
-								<div class="mb-3">Unknown component — props not editable.</div>
-								<div class="font-mono text-[11px] text-white/30 bg-white/5 p-3 rounded-cms-md break-all">
-									{Object.entries(propValues).map(([k, v]) => <div key={k}>{k}="{v}"</div>)}
-								</div>
-							</div>
-						)}
-				</div>
-
-				{definition && (
-					<div class="px-5 py-4 border-t border-white/10 flex gap-2 justify-end">
-						<CancelButton onClick={closeMdxPropsEditor} />
-						<button
-							onClick={handleSave}
-							class="px-4 py-2.5 bg-cms-primary text-cms-primary-text rounded-cms-pill cursor-pointer hover:bg-cms-primary-hover transition-all font-medium"
-						>
-							Save
-						</button>
-					</div>
-				)}
-			</div>
-		</>
-	)
-}

package/src/editor/hooks/useAIHandlers.ts

@@ -1,345 +0,0 @@
-import { useCallback, useMemo, useRef } from 'preact/hooks'
-import { AIService, type CmsAiAction } from '../ai'
-import { getChatHistory } from '../api'
-import { getEditableTextFromElement, logDebug } from '../dom'
-import { handleElementChange } from '../editor'
-import { getComponentDefinition, getComponentInstance, getManifestEntry } from '../manifest'
-import * as signals from '../signals'
-import type { AIStatusType, ChatMessage, CmsConfig } from '../types'
-
-export interface AIHandlersOptions {
-	config: CmsConfig
-	showToast: (message: string, type?: 'info' | 'success' | 'error') => void
-	onTooltipHide: () => void
-	onUIUpdate?: () => void
-}
-
-// Counter for generating unique message IDs
-let messageIdCounter = 0
-function nextMessageId(prefix: string): string {
-	return `${prefix}-${Date.now()}-${++messageIdCounter}`
-}
-
-/**
- * Hook providing AI-related handlers for the CMS editor.
- * Uses signals directly for state management.
- */
-export function useAIHandlers({
-	config,
-	showToast,
-	onTooltipHide,
-	onUIUpdate,
-}: AIHandlersOptions) {
-	// Create AI service instance - memoized to avoid recreation on each render
-	const aiService = useMemo(() => new AIService(config), [config])
-
-	// Guard against stale chat history responses
-	const historyRequestRef = useRef(0)
-
-	/**
-	 * Toggle AI chat visibility
-	 */
-	const handleAIChatToggle = useCallback(async () => {
-		if (signals.isChatOpen.value) {
-			signals.setAIChatOpen(false)
-		} else {
-			signals.setAIChatOpen(true)
-			const currentId = signals.currentEditingId.value
-			if (currentId) {
-				signals.setChatContextElement(currentId)
-			}
-
-			// Load chat history when opening
-			const requestId = ++historyRequestRef.current
-			try {
-				const history = await getChatHistory(config.apiBase)
-				// Discard if a newer request has been made
-				if (requestId !== historyRequestRef.current) return
-				if (history.messages && history.messages.length > 0) {
-					// Convert API messages to ChatMessage format
-					const chatMessages: ChatMessage[] = history.messages
-						.filter((msg) => {
-							// Skip tool-role messages that may have slipped through
-							if (msg.role === 'tool') return false
-							const content = msg.content?.trim() || ''
-							// Skip empty messages
-							if (!content) return false
-							return true
-						})
-						.map((msg) => ({
-							id: msg.id,
-							role: msg.role as 'user' | 'assistant',
-							content: msg.content || '',
-							timestamp: new Date(msg.created_at).getTime(),
-						}))
-					signals.setChatMessages(chatMessages)
-				}
-			} catch (error) {
-				logDebug(config.debug, 'Failed to load chat history:', error)
-			}
-		}
-	}, [config])
-
-	/**
-	 * Close AI chat
-	 */
-	const handleChatClose = useCallback(() => {
-		signals.setAIChatOpen(false)
-	}, [])
-
-	/**
-	 * Cancel in-progress AI request
-	 */
-	const handleChatCancel = useCallback(() => {
-		aiService.abort()
-		signals.setAIProcessing(false)
-		signals.clearAIStatus()
-		// Clean up empty assistant message
-		const messages = signals.chatMessages.value
-		const lastMsg = messages[messages.length - 1]
-		if (lastMsg?.role === 'assistant' && !lastMsg.content.trim()) {
-			signals.setChatMessages(messages.filter((m) => m.id !== lastMsg.id))
-		}
-	}, [aiService])
-
-	/**
-	 * Handle AI prompt submission from tooltip
-	 */
-	const handleTooltipPromptSubmit = useCallback(
-		async (prompt: string, elementId: string) => {
-			const change = signals.getPendingChange(elementId)
-			if (!change) {
-				showToast('Element not found', 'error')
-				return
-			}
-
-			const currentContent = getEditableTextFromElement(change.element)
-			const manifest = signals.manifest.value
-
-			signals.setAIProcessing(true)
-
-			logDebug(
-				config.debug,
-				'Tooltip AI request for element:',
-				elementId,
-				'prompt:',
-				prompt,
-			)
-
-			try {
-				await aiService.streamRequest(
-					{
-						prompt,
-						elementId,
-						currentContent,
-						context: getManifestEntry(manifest, elementId)?.sourcePath,
-					},
-					{
-						onToken: (_token, fullText) => {
-							change.element.textContent = fullText
-						},
-						onComplete: (finalText) => {
-							logDebug(config.debug, 'Tooltip AI completed:', finalText)
-							change.element.textContent = finalText
-							handleElementChange(
-								config,
-								elementId,
-								change.element,
-								onUIUpdate,
-							)
-
-							signals.setAIProcessing(false)
-							onTooltipHide()
-							showToast('AI edit applied', 'success')
-						},
-						onError: (error) => {
-							logDebug(config.debug, 'Tooltip AI error:', error)
-							signals.setAIProcessing(false)
-							showToast(`AI error: ${error.message}`, 'error')
-						},
-					},
-				)
-			} catch (error) {
-				signals.setAIProcessing(false)
-				showToast('AI request failed', 'error')
-			}
-		},
-		[config, aiService, showToast, onTooltipHide, onUIUpdate],
-	)
-
-	/**
-	 * Handle chat message send
-	 */
-	const handleChatSend = useCallback(
-		async (message: string, elementId?: string) => {
-			const userMessage: ChatMessage = {
-				id: nextMessageId('user'),
-				role: 'user',
-				content: message,
-				elementId,
-				timestamp: Date.now(),
-			}
-			signals.addChatMessage(userMessage)
-
-			const assistantMessageId = nextMessageId('assistant')
-			const assistantMessage: ChatMessage = {
-				id: assistantMessageId,
-				role: 'assistant',
-				content: '',
-				elementId,
-				timestamp: Date.now(),
-			}
-
-			signals.setAIProcessing(true)
-			signals.clearAIStatus()
-
-			const manifest = signals.manifest.value
-			const componentInstance = elementId ? getComponentInstance(manifest, elementId) : null
-
-			let currentContent: string | undefined
-			let context: string | undefined
-
-			if (componentInstance) {
-				// Component context: send component name, props, and source file
-				currentContent = JSON.stringify({
-					component: componentInstance.componentName,
-					props: componentInstance.props,
-				})
-				context = componentInstance.file
-			} else {
-				const entry = elementId ? getManifestEntry(manifest, elementId) : null
-				const parentComponent = entry?.parentComponentId
-					? getComponentInstance(manifest, entry.parentComponentId)
-					: null
-
-				const change = elementId ? signals.getPendingChange(elementId) : null
-				currentContent = change
-					? getEditableTextFromElement(change.element)
-					: undefined
-				// Use the entry's source file, or fall back to parent component's file
-				context = entry?.sourcePath
-					?? parentComponent?.file
-					?? undefined
-			}
-
-			const handleAction = (action: CmsAiAction) => {
-				logDebug(config.debug, 'AI action received:', action)
-				if (action.name === 'preview' && action.url) {
-					// Open preview in new tab
-					window.open(action.url, '_blank')
-				} else if (action.name === 'refresh') {
-					// Refresh the current page to show new content
-					window.location.reload()
-				}
-			}
-
-			let hasStarted = false
-
-			try {
-				await aiService.streamRequest(
-					{
-						prompt: message,
-						elementId: elementId || '',
-						currentContent: currentContent || '',
-						context,
-					},
-					{
-						onStart: () => {
-							if (!hasStarted) {
-								signals.addChatMessage(assistantMessage)
-								hasStarted = true
-							}
-						},
-						onToken: (_token, fullText) => {
-							if (!hasStarted) {
-								signals.addChatMessage(assistantMessage)
-								hasStarted = true
-							}
-							// Update the message content using the new helper
-							signals.updateChatMessage(assistantMessageId, fullText)
-						},
-						onStatus: (status, statusMessage) => {
-							// Map SSE status strings to AIStatusType
-							const statusMap: Record<string, AIStatusType> = {
-								thinking: 'thinking',
-								coding: 'coding',
-								building: 'building',
-								deploying: 'deploying',
-								complete: 'complete',
-							}
-							const mappedStatus = statusMap[status] ?? null
-							signals.setAIStatus(mappedStatus, statusMessage)
-						},
-						onAction: handleAction,
-						onComplete: (finalText) => {
-							if (hasStarted && !finalText.trim()) {
-								// Remove empty assistant message instead of leaving an empty bubble
-								signals.setChatMessages(
-									signals.chatMessages.value.filter((m) => m.id !== assistantMessageId),
-								)
-							} else {
-								signals.updateChatMessage(assistantMessageId, finalText)
-							}
-							signals.setAIProcessing(false)
-							signals.clearAIStatus()
-						},
-						onError: (error) => {
-							// Remove empty assistant message, keep if it has partial content
-							const msg = signals.chatMessages.value.find((m) => m.id === assistantMessageId)
-							if (msg && !msg.content.trim()) {
-								signals.setChatMessages(
-									signals.chatMessages.value.filter((m) => m.id !== assistantMessageId),
-								)
-							}
-							signals.setAIProcessing(false)
-							signals.clearAIStatus()
-							showToast(`AI error: ${error.message}`, 'error')
-						},
-					},
-				)
-			} catch (error) {
-				if (hasStarted) {
-					// Remove the empty assistant message if no content was received
-					const msg = signals.chatMessages.value.find((m) => m.id === assistantMessageId)
-					if (msg && !msg.content.trim()) {
-						signals.setChatMessages(
-							signals.chatMessages.value.filter((m) => m.id !== assistantMessageId),
-						)
-					}
-				}
-				signals.setAIProcessing(false)
-				signals.clearAIStatus()
-				showToast('AI request failed', 'error')
-			}
-		},
-		[config, aiService, showToast],
-	)
-
-	/**
-	 * Apply chat content to an element
-	 */
-	const handleApplyToElement = useCallback(
-		(content: string, elementId: string) => {
-			const change = signals.getPendingChange(elementId)
-			if (!change) {
-				showToast('Element not found', 'error')
-				return
-			}
-
-			change.element.textContent = content
-			handleElementChange(config, elementId, change.element, onUIUpdate)
-			showToast('Content applied to element', 'success')
-		},
-		[config, showToast, onUIUpdate],
-	)
-
-	return {
-		aiService,
-		handleAIChatToggle,
-		handleChatClose,
-		handleChatCancel,
-		handleTooltipPromptSubmit,
-		handleChatSend,
-		handleApplyToElement,
-	}
-}