example of SSE streaming

pages/chat/+Page.tsx

@@ -1,25 +1,33 @@
 import { Card, Textarea } from "@mantine/core";
 import { useState } from "react";
-import { useTRPC } from "../../trpc/client";
+import { useTRPCClient } from "../../trpc/client";
 
 export default function ChatPage() {
   const [inputMessage, setInputMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [outputMessage, setOutputMessage] = useState("");
-  const trpc = useTRPC();
+  const trpc = useTRPCClient();
 
   async function handleSendMessage() {
     setLoading(true);
-    const response = await trpc.chat.streamMessage.subscribe(
+
+    const subscription = trpc.chat.streamMessage.subscribe(
       {
         message: inputMessage,
       },
-      {}
+      {
+        onData(value) {
+          setOutputMessage((prevOutputMessage) => prevOutputMessage + value);
+        },
+        onError(error) {
+          console.error(error);
+        },
+        onComplete() {
+          subscription.unsubscribe();
+          setLoading(false);
+        },
+      }
     );
-    for await (const chunk of response) {
-      setOutputMessage(chunk);
-    }
-    setLoading(false);
   }
   return (
     <div>
@@ -33,6 +41,7 @@ export default function ChatPage() {
         onKeyDown={async (e) => {
           if (e.key === "Enter") {
             e.preventDefault();
+            handleSendMessage();
           }
         }}
       />