diff --git a/next.config.js b/next.config.js index a843cbe..cb1bc28 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - reactStrictMode: true, + reactStrictMode: false, // creates problems for chat } module.exports = nextConfig diff --git a/src/pages/forms/fill.tsx b/src/pages/forms/fill.tsx index 7095948..40a265d 100644 --- a/src/pages/forms/fill.tsx +++ b/src/pages/forms/fill.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { ChatMessage, LLMRequest, LLMResponse } from '@/types'; import { FAKE_SCHEMA, PROMPT_FILL } from '@/prompts'; import { MessageUI } from '@/components/chat'; @@ -9,34 +9,50 @@ export default function CreateForm() { const schema = FAKE_SCHEMA; // TODO hydrate from route after page loads const systemPrompt = PROMPT_FILL(schema); const [messages, setMessages] = useState([ - { - role: "assistant", - content: "What kind of form can I help you with?" - } + // { + // role: "assistant", + // content: "What kind of form can I help you with?" + // } ]); const [inputValue, setInputValue] = useState(''); const [isWaiting, setIsWaiting] = useState(false); + const inputRef = useRef(null); // Initialize the ref - const handleSubmit = async () => { - if (inputValue.trim()) { - const userMessage = { - role: "user" as const, - content: inputValue.trim() - }; - setMessages([...messages, userMessage]); - setInputValue(''); - setIsWaiting(true); - const assistantResponse = await callLLM(systemPrompt, [...messages, userMessage]); - setMessages(prev => [...prev, assistantResponse]); - setIsWaiting(false); - } + const handleSubmit = async (userMessage?: string) => { + const messagesToSend = userMessage && userMessage.trim() ? [...messages, { + role: "user" as const, + content: userMessage.trim() + }] : messages; + setMessages(messagesToSend); + setInputValue(''); + setIsWaiting(true); + const assistantResponse = await callLLM(systemPrompt, messagesToSend); + setMessages(prev => [...prev, assistantResponse]); + setIsWaiting(false); }; const handleCancel = () => { setIsWaiting(false); }; + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !isWaiting) { + handleSubmit(inputValue); + } + }; + useEffect(() => { + if (!isWaiting && inputRef.current) { + // Ensure the input gets focus when isWaiting transitions to false + inputRef.current.focus(); + } + }, [isWaiting]); // Track changes to the isWaiting state + + useEffect(() => { + if (messages.length === 0) { + handleSubmit(); + } + }, []); // The empty array ensures this effect runs only once on mount return ( -
+

Fill a form

{messages.map((message, index) => ( @@ -49,10 +65,12 @@ export default function CreateForm() { value={inputValue} onChange={e => setInputValue(e.target.value)} disabled={isWaiting} + onKeyPress={handleKeyPress} + ref={inputRef} />