Log in
In the past three posts about working with AI on Windows, we covered connecting to Phi Silica, getting progress response, and building a chat experience. In this post we’re going to improve the styling of the chat by using data templates and including a system message to setup the chat interaction.
At the end of the previous post, the layout was relatively basic, with the formatting of each item in the ListView being the ToString representation of the PhiMessage object.
To make it easier to distinguish between User input and the Assistant response, we’ll use two data templates that simply align the text to the left, for the Assistant, or the right, for the User. This will use a data template selector to pick which template to use based on the User property on the PhiMessage.
In the following video we create an ItemTemplate for the ListView, which will show the User and Message for the PhiMessage. We’ll also create a HeaderTemplate that will be data bound to a SystemMessage. For this, we’ll update the MainViewModel to include the SytemMessage property, which will be combined with the message history in forming the Phi Silica prompt.
[ObservableProperty]
private string _systemMessage = "You are an assistant for a 5 year old child";
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 sysMessage = new PhiMessage("System", SystemMessage);
var prompt = string.Join(Environment.NewLine, [sysMessage.ToString(), ..(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;
}
And now the video for creating the ItemTemplate and HeaderTemplate.
Now that we have an ItemTemplate, we can duplicate the template for the User template where the text is right aligned. In order to use these templates we’ll need a template selector.
public class MessageTypeSelector : DataTemplateSelector
{
public DataTemplate UserTemplate { get; set; }
public DataTemplate AssistantTemplate { get; set; }
public DataTemplate SystemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item is PhiMessage message)
{
return message.User switch
{
"System" => SystemTemplate,
"Assistant" => AssistantTemplate,
_ => UserTemplate,
};
}
return base.SelectTemplateCore(item, container);
}
}
The two templates and an instance of the template selector, which references the two templates, need to be added to the Resources of the page.
<Page.Resources>
<DataTemplate x:Key="UserDataTemplate">
<Grid>
<StackPanel>
<TextBlock Style="{StaticResource CaptionTextBlockStyle}"
Text="{Binding User}"
TextAlignment="Right" />
<TextBlock Style="{StaticResource BaseTextBlockStyle}"
Text="{Binding Message}"
TextAlignment="Right" />
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="AssistanctDataTemplate">
<Grid>
<StackPanel>
<TextBlock Style="{StaticResource CaptionTextBlockStyle}"
Text="{Binding User}" />
<TextBlock Style="{StaticResource BaseTextBlockStyle}"
Text="{Binding Message}" />
</StackPanel>
</Grid>
</DataTemplate>
<local:MessageTypeSelector x:Key="MessageTypeSelector"
UserTemplate="{StaticResource UserDataTemplate}"
AssistantTemplate="{StaticResource AssistanctDataTemplate}" />
</Page.Resources>
Using Hot Design, we can update the ListView to remove the locally defined ItemTemplate and select the MessageTypeSelector resource.
Now when we run the application on Window, we can customize the system message in order to change how Phi Silica responds.
The post AI on Windows: Chat Styling appeared first on Nick's .NET Travels.
