Refactor TextGeneration.tsx to remove useChat and handle state manually

components/app/TextGeneration.tsx

@@ -1,23 +1,50 @@
 'use client';
 
 import { useState } from 'react';
-import { useChat } from '@ai-sdk/react';
+import { type CoreMessage } from 'ai';
 
 export default function TextGeneration() {
   const [model, setModel] = useState('alias-code');
-  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);
+  const [messages, setMessages] = useState<CoreMessage[]>([]);
+  const [input, setInput] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!input) return;
+
+    const newMessages: CoreMessage[] = [...messages, { role: 'user', content: input }];
+    setMessages(newMessages);
+    setInput('');
+
+    const response = await fetch('/api/text-generation', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        prompt: input,
+        model,
+      }),
+    });
+
+    if (!response.body) {
+      return;
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let done = false;
+
+    let fullResponse = '';
+    while (!done) {
+      const { value, done: readerDone } = await reader.read();
+      done = readerDone;
+      const chunkValue = decoder.decode(value);
+      fullResponse += chunkValue;
+      setMessages([...newMessages, { role: 'assistant', content: fullResponse }]);
+    }
   };
-  
+
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
       <div className="flex justify-between items-center mb-4">
@@ -35,10 +62,10 @@ export default function TextGeneration() {
         </select>
       </div>
       <div className="flex-grow overflow-y-auto mb-4">
-        {messages.map(m => (
-          <div key={m.id} className="whitespace-pre-wrap p-4 border-b border-gray-200">
+        {messages.map((m, i) => (
+          <div key={i} className="whitespace-pre-wrap p-4 border-b border-gray-200">
             <strong>{m.role === 'user' ? 'User: ' : 'AI: '}</strong>
-            {m.content}
+            {m.content as string}
           </div>
         ))}
       </div>
@@ -46,9 +73,9 @@ 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={inputValue}
+          value={input}
           placeholder="Say something..."
-          onChange={handleInputChange}
+          onChange={e => setInput(e.target.value)}
         />
       </form>
     </div>