Function Prompt

frontend/src/components/Prompt.tsx:42–628

({
	isEditing,
	imageUploadRef
}: {
	isEditing: boolean
	imageUploadRef: React.RefObject<HTMLInputElement>
})

import { Textarea } from './ui/textarea'

export default function Prompt({
	isEditing,
	imageUploadRef
}: {
	isEditing: boolean
	imageUploadRef: React.RefObject<HTMLInputElement>
}) {
	const currentUI = useContext(CurrentUIContext)
	const params = useParams()
	const [searchParams, setSearchParams] = useSearchParams()

	const navigation = useNavigate()
	const id = params.id ?? 'new'
	const [item, setItem] = useAtom(historyAtomFamily({ id }))
	const wrappedItem = useMemo(
		() => new ItemWrapper(item, setItem),
		[item, setItem]
	)
	const [versionIdx, updateVersion] = useVersion(wrappedItem)
	const html = wrappedItem.pureHTML(versionIdx)

	const queryRef = useRef<HTMLTextAreaElement>(null)
	const nextExampleRef = useRef<NodeJS.Timeout>()
	const [screenshot, setScreenshot] = useAtom(screenshotAtom)
	const [inspectorEnabled, setInspectorEnabled] = useAtom(inspectorEnabledAtom)
	const [convertFramework, setConvertFramework] = useAtom(convertFrameworkAtom)
	const [sidebarState, setSidebarState] = useAtom(historySidebarStateAtom)
	const modelSupportsImages = useAtomValue(modelSupportsImagesAtom)
	const [comments, setComments] = useAtom(commentsAtom)
	const currentRender = useAtomValue(
		imageDB.item(`screenshot-${id}-${versionIdx}`)
	)
	const setImage = useSetAtom(imageDB.item(`image-${id}-${versionIdx}`))
	const uiState = useAtomValue(uiStateAtom)
	const dragging = useAtomValue(draggingAtom)
	const { rendering, annotatedHTML } = uiState
	const facets = useAtomValue(facetsAtom)

	const model = useAtomValue(modelAtom)
	const temperature = useAtomValue(temperatureAtom)
	const saveHistory = useSaveHistory()
	const [example, setExample] = useState<string>(EXAMPLES[0])
	const [bufferedExample, setBufferedExample] = useState<string>('')
	const setHistoryIds = useSetAtom(historyIdsAtom)
	const [liveMarkdown, setLiveMarkdown] = useState(item.markdown ?? '')
	const throttledMD = useThrottle(liveMarkdown)
	const newComponent = useCallback(
		(prompt: string, clear = true) => {
			// New state management
			const newId = nanoid()
			historyAtomFamily({ id: newId, prompt, createdAt: new Date() })
			setHistoryIds(prev => [newId, ...prev])
			navigation(`/ai/${newId}?gen=1&clear=${clear}`)
		},
		[navigation, setHistoryIds]
	)
	const [isFocused, setIsFocused] = useState(false)
	const [animate, setAnimate] = useState(false)