I'm exploring useChat. I'm trying to return a simple 'hello world' from the backend without the invocation of any model so that it'll appear in the chat. It worked with the StreamingTextResponse function. However, it is deprecated in the latest version. I want to get this functionality with the new tools
This is the chat:
export default function ChatComponent() {
// Vercel AI SDK (ai package) useChat()
// useChat -> handles messages for us, user input, handling user submits, etc.
const { input, handleInputChange, handleSubmit, isLoading, messages } = useChat();
// messages -> [user asks a question, gpt-4 response, user asks again, gpt-4 responds]
console.log(messages);
console.log(input);
return (
<div>
{messages.map((message : Message) => {
return (
<div key={message.id}>
{/* Name of person talking */}
{
message.role === "assistant"
?
<h3 className="text-lg font-semibold mt-2">
GPT-4
</h3>
:
<h3 className="text-lg font-semibold mt-2">
User
</h3>
}
{/* Formatting the message */}
{message.content.split("\n").map((currentTextBlock: string, index : number) => {
if(currentTextBlock === "") {
return <p key={message.id + index}> </p> // " "
} else {
return <p key={message.id + index}>{currentTextBlock}</p> // "Cooper Codes is a YouTuber"
}
})}
{/*
Cooper Codes is a YouTuber
He makes software content
You should subscribe.
["Cooper Codes is a YouTuber", "", "He makes software content", "", "You should subscribe."]
*/}
</div>
)
})}
<form className="mt-12" onSubmit={handleSubmit}>
<p>User Message</p>
<textarea
className="mt-2 w-full bg-slate-600 p-2"
placeholder={"What are data structures and algorithims?"}
value={input}
onChange={handleInputChange}
/>
<button className="rounded-md bg-blue-600 p-2 mt-2">
Send message
</button>
</form>
</div>
)
}
this is the backend:
export async function POST(request: Request) {
const encoder = new TextEncoder()
const stream = new ReadableStream({
start(controller) {
controller.enqueue(encoder.encode("the world"))
controller.close()
}
})
return new StreamingTextResponse(stream)
}
StreamingTextResponse was depracated. How can I do it with the new ai version of vercel?