I have a Blazor Server application. With this application, I am "talking" with MistralAI. This REST API endpoint has a streaming token you can set that will allow it to "stream" responses to you.
In my application, I have a service that contacts MistralAI for this conversation. I have implemented the Observer pattern so that I can update my .RAZOR page whenever I get a response from MistralAI:
MyService.cs:
public class MyService { private List<Reader> readers = new List<Reader>(); private AIResponse response; public async Task<AIResponse> myTask(){ Reader newReader = new MyPage(); readers.Add(newReader); // Send requests to and receive responses from MistralAI addWord(receivedJSONString); notifyReaders(); } public void notifyReaders() { foreach (var reader in readers) { reader.updateWords(response); } } public void addWord(AIResponse newResponse) { response = newResponse; }}public interface Reader { void updateResponses(AIResponse newResponse);}MyPage.razor
@implements Reader<div> @foreach(var newResponse in responses){ @newResponse }</div>@code { private List<AIResponse> responses { get; set; } = new List<AIResponse>(); private async Task QueryAI(){ AIResponse streamingAIResponse = await myService.myTask(someString); } public void updateResponses(AIResponse newResponse){ responses.Add(newResponse); Console.Write(newResponse); StateHasChanged(); }}I can successfully get the responses to my .RAZOR page, I can see them in the console when I Console.Write, but I cannot update the UI with the new content; I keep getting the error The render handle is not yet assigned.
So, how can I use the StateHasChanged() from within my implemented interface?
Or, how can I update my UI with the new content?
UPDATES:
@code { [Inject] public IMyService myService { get; set; } private String queryString { get; set; } = null; private List<AIResponse> responses { get; set; } = new List<AIResponse>(); private Conversation conversation { get; set; } private ElementReference aiQuery; protected override void OnInitialized() { if (conversation == null) { conversation = new onversation(); conversation.messages = new List<Message>(); } } private async Task QueryAI() { Message message = new Message("user", queryString); conversation.messages.Add(message); StreamingQueryResponse streamingAIResponse = await myService.getStreamingAIResponseAsync(conversation); } public void updateWords(StreamingQueryResponse newResponse) { responses.Add(newResponse); Console.Write(newResponse); }}