Refactor TextGeneration.tsx to handle input state locally

components/app/TextGeneration.tsx

@@ -5,12 +5,18 @@ import { useChat } from '@ai-sdk/react';
 
 export default function TextGeneration() {
   const [model, setModel] = useState('alias-code');
-  const { messages, handleInputChange, handleSubmit } = useChat({
+  const [inputValue, setInputValue] = useState('');
+  const { messages, handleSubmit } = useChat({
     api: '/api/text-generation',
     body: {
       model,
     },
+    initialInput: inputValue,
   });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
   
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
@@ -40,7 +46,7 @@ export default function TextGeneration() {
       <form onSubmit={handleSubmit} className="flex-shrink-0">
         <input
           className="w-full max-w-md p-2 border border-gray-300 rounded shadow-xl"
-          value={input}
+          value={inputValue}
           placeholder="Say something..."
           onChange={handleInputChange}
         />