This is the error iam getting. Below is my server action here the SalesChart is a client component
"use server";

import { streamUI } from "ai/rsc";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { SalesCharts } from "@/components/widgets/sales-chart";
const LoadingComponent = () => (
<div className="animate-pulse p-4">getting weather...</div>
);

export async function streamComponent(textContent: string) {
const result = await streamUI({
model: openai("gpt-4o"),
prompt: You are an AI-powered analytics engine. The user will upload a document, and you must analyze its content to generate meaningful insights. Depending on the analysis, you should return either:Textual Analysis: Provide a detailed summary, key points, or insights derived from the documents content if the analysis is text-based in a markdown format.Graphical Data: If the analysis involves quantitative or categorical data, return structured data.following is the text content from the document ${textContent}.,
text: ({ content }) => (
<Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
),
tools: {
getSalesAnalytics: {
description:
"Get the graph data from the doc and a insights markdown which interpret the data",
parameters: z.object({
chartData: z.array(
z.object({
month: z.string(),
sales: z.number(),
})
),
insights: z.string(),
}),
generate: async function* ({ chartData, insights }) {
yield <LoadingComponent />;
return (
#Unknown Channel
<SalesCharts chartData={chartData} insights={insights} />
</>
);
},
},
},
});

return result.value;
}
rendering like this:
const [component, setComponent] = useState();
setComponent(await streamComponent(textContent));