AI on Windows: Chat with Phi Silica

by

In the past two posts we covered connecting to Phi Silica and then getting progress response to provide a more real time experience. The next step is to improve the layout of the application to display the prior message history. In this post we’ll cover updating the UI to include a list of prior messages. We’ll also cover extending the Phi Silica prompt to include the prior history, providing more context to the model.

We’ll start by amending the MainViewModel to include a collection of the prior messages. In addition, the prior messages are concatenated with the message entered by the user to build the prompt that’s sent to Phi Silica.

    public ObservableCollection<PhiMessage> Messages { get; } = new();

    [ObservableProperty]
    private string _response = string.Empty;

    [RelayCommand]
    public async Task SendMessage(string message)
    {
        Messages.Add(new PhiMessage("User",message));
#if WINDOWS

        if (!LanguageModel.IsAvailable())
        {
            var op = await LanguageModel.MakeAvailableAsync();
        }

        var prompt = string.Join(Environment.NewLine, (from m in Messages
                                                       select m.ToString()));


        using LanguageModel languageModel = await LanguageModel.CreateAsync();
        var progressTask = languageModel.GenerateResponseWithProgressAsync(prompt);
        progressTask.Progress +=
            (s, progress) => Dispatch(() => Response += progress);

        var result = await progressTask;
        Response = result.Response;
#else
        Response = "Design-time response....";
        await Task.Delay(1000);
        Response = "Design-time response....(updating)";
        await Task.Delay(1000);
        Response = "Final design-time response";
#endif
        Messages.Add(new PhiMessage("Assistant",Response));
        Response = string.Empty;
    }

    public class PhiMessage(string user, string message)
    {
        public string User { get; } = user;
        public string Message { get; } = message;

        public override string ToString()
            => $"{User}:\r\n{Message}";
    }

Here’s a quick video of how to update the UI using the Uno Platform Hot Design tool.

In summary we started with a basic Grid and added:

  • ListView – bound to the Messages property, to show the history of messages
  • TextBlock – bound to the Response property, to show the current progressive response
  • TextBox – the InputText textbox for user input
  • Button – the Send button bound to the SendMessageCommand, passing the InputText.Text in as a parameter

Here’s the app running:

And there you have it, we’ve stepped up our simple Phi Silica app to be a chat app capable of a multi-step interaction with Phi Silica.

Leave a comment