"Simple" form submission? (SourceList vs ObservableCollection)

[hhaynes-rower]

I've been trying to get a very basic Elmish loop for my chat window. You know the drill - simple CRUD - just adding to an existing structure and updating the display. I've been looking at the "Action list" and ObservableCollections that are in the Chart ViewModel - and neither seem to be behaving the way I expect. Can you help me get over the hump?

Eventually I'll be persisting this to an event store and doing the fully de-coupled CQRS thing - but right now I just want to understand what I'm missing "inside the UI loop". I've been banging my head against this and it seems like I'm missing something "obvious". Thanks again!

Recording.2023-12-15.191148.mp4

[JordanMarr]

The chat drawer is looking nice!

You should just be able to do this:

    member this.MessagesView = this.BindSourceList(local.Model.Messages)

[hhaynes-rower]

I worked through that a few times - maybe not in the right combination with other bits. The "rub" seems to be around resolving the the elements of the Messages that are mapped to those template variables - they won't resolve. I'm just not clear on how that have context to "map" into the properties of the Messages inside the SourceList.

namespace AidenDesktop.ViewModels

open Elmish
open ReactiveElmish
open ReactiveElmish.Avalonia
open DynamicData
open System.Collections.ObjectModel
open System

module Chat =
    type Message = { User: string; Text: string; Alignment: string; Color: string; BorderColor: string }

    type Model = { Messages: SourceList<Message> }

    type Msg =
        | SendMessage of string

    let init() =
        let initialMessages =
            [
                { User = "Aiden"; Text = "Anomaly detected in in-bound data. It mirrors a previous probe attack that has preceded a DDoS cycle by 20 minutes."
                  Alignment = "Left"; Color = "WhiteSmoke"; BorderColor = "Orange"  }
                { User = "Me"; Text = "Thanks I see it. Clear the alarm. Is there any news on the wire that this is hitting more than us?"
                  Alignment = "Right"; Color = "White"; BorderColor = "MidnightBlue"  }
            ]
        { Messages = SourceList.createFrom initialMessages}

    let update (msg: Msg) (model: Model) =
        match msg with
        | SendMessage text ->
            let msg = { User = "Me"; Text = text; Alignment = "Right"; Color = "White"; BorderColor = "MidnightBlue"  }
            printfn "Message: %A" msg
            {
                Messages = model.Messages |> SourceList.add msg
            }

open Chat

type ChatViewModel() as this =
    inherit ReactiveElmishViewModel()

    let local =
        Program.mkAvaloniaSimple init update
        |> Program.withErrorHandler (fun (_, ex) -> printfn "Error: %s" ex.Message)
        |> Program.mkStore

    member this.MessagesView = this.BindSourceList(local.Model.Messages)
    
    member this.SendMessage(message: string) =
        local.Dispatch (SendMessage message)
        
    static member DesignVM = new ChatViewModel()

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="700" d:DesignHeight="650"
             xmlns:local="clr-namespace:AidenDesktop"
             xmlns:vm="using:AidenDesktop.ViewModels"
             Design.DataContext="{x:Static vm:ChatViewModel.DesignVM}"
             x:DataType="vm:ChatViewModel"
             x:Class="AidenDesktop.Views.ChatView">
    <UserControl.Resources>
        <local:StringToMarginConverter x:Key="StringToMarginConverter" />
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="9*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        
        <!-- ListBox -->
        <ListBox x:Name="ChatWindow" ItemsSource="{Binding MessagesView}"
                 CornerRadius="10"
                 ScrollViewer.VerticalScrollBarVisibility="Auto"
                 Grid.Row="0">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Stretch">
                        <Border CornerRadius="10" Background="{Binding Color}" 
                                Padding="10" 
                                BorderBrush="{Binding BorderColor}"
                                BorderThickness="2"
                                Margin="{Binding Alignment, Converter={StaticResource StringToMarginConverter}}" >
                            <StackPanel>
                                <TextBlock FontWeight="Bold" Text="{Binding User}" />
                                <TextBlock TextWrapping="Wrap" Text="{Binding Text}" />
                            </StackPanel>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        
        <!-- Text input and button -->
        <Grid DockPanel.Dock="Bottom" Grid.Row="1" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <TextBox x:Name="MessageTextBox" Grid.Column="0" MinHeight="40" AcceptsReturn="True" BorderBrush="MidnightBlue"
                     BorderThickness="3" Background="White" CornerRadius="10" Margin="10, 10, 0, 10"
                     Watermark="Type your message here...">
            </TextBox>

            <Button Grid.Column="1" Width="45"
                    Margin="2,0,5,0"
                    CornerRadius="10"
                    VerticalAlignment="Center"
                    Command="{Binding SendMessage}"
                    CommandParameter="{Binding Text, ElementName=MessageTextBox}">
                <Image Source="avares://AidenDesktop/Assets/SpeakEZ.ico" VerticalAlignment="Center" />
            </Button>
        </Grid>
    </Grid>
</UserControl>

[hhaynes-rower]

FYI - I added this to the AppCompositionRoot.fs to do the formatting of the "chat" windows in the ListBox. This was provided by our friendly neighborhood AI chat bot, and honestly I'm still kicking myself that I kept fiddling with it without doing more granular commits along the way. 😁

type StringToMarginConverter() =
    interface IValueConverter with
        member _.Convert(value : obj, targetType : System.Type, parameter : obj, culture : System.Globalization.CultureInfo) : obj =
            match value with
            | :? string as alignment ->
                if alignment = "Left" then new Thickness(10.0, 5.0, 50.0, 5.0)
                else new Thickness(50.0, 5.0, 10.0, 5.0)
            | _ -> new Thickness(0.0)
        member _.ConvertBack(value : obj, targetType : System.Type, parameter : obj, culture : System.Globalization.CultureInfo) : obj =
            null

[JordanMarr]

Looks like you found a bug with BindSourceList! I'll put out a quick patch to fix it.

[JordanMarr]

The StringToMarginConverter with the positional margin is a nice touch.

[JordanMarr]

ReactiveElmish.Avalonia v1.0.1 is released.

This should now properly resolve to ReadOnlyObservableCollection<Message> instead of ReadOnlyObservableCollection<obj> (which causes the Compiled Bindings to fail).

member this.Messages = this.BindSourceList(local.Model.Messages)

You should also be able to get rid of this line since you already registered the views.

[JordanMarr]

Just for fun, I replaced your custom IValueConverter with Avalonia conditional class/styles in the view:

View

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel HorizontalAlignment="Stretch">
	    <StackPanel.Styles>
                <Style Selector="Border">
                    <Setter Property="Margin" Value="10,5,50,5" />
                    <Setter Property="BorderBrush" Value="Orange" />
                    <Setter Property="Background" Value="WhiteSmoke" />
                </Style>
                <Style Selector="Border.isMe">
                    <Setter Property="Margin" Value="50,5,10,5" />
                    <Setter Property="BorderBrush" Value="MidnightBlue" />
                    <Setter Property="Background" Value="White" />
                </Style>							
            </StackPanel.Styles>
            <Border CornerRadius="10"
                    Padding="10" 
                    BorderThickness="2"
                    Classes.isMe="{Binding IsMe}">
                <StackPanel>
                    <TextBlock FontWeight="Bold" Text="{Binding User}" />
                    <TextBlock TextWrapping="Wrap" Text="{Binding Text}" />
                </StackPanel>
            </Border>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

View Model

module Chat =
    type Model = { Messages: SourceList<Message> }
    and Message = { User: string; Text: string; IsMe: bool }

    type Msg =
        | SendMessage of string

    let init() =
        let initialMessages =
            [
                { User = "Aiden"; IsMe = false; Text = "Anomaly detected in in-bound data. It mirrors a previous probe attack that has preceded a DDoS cycle by 20 minutes." }
                { User = "Me"; IsMe = true ; Text = "Thanks I see it. Clear the alarm. Is there any news on the wire that this is hitting more than us?" }
            ]
        { Messages = SourceList.createFrom initialMessages}

    let update (msg: Msg) (model: Model) =
        match msg with
        | SendMessage text ->
            {
                Messages = model.Messages |> SourceList.add { User = "Me"; IsMe = true; Text = text }
            }

[hhaynes-rower]

This is brilliant - thanks so much! There's definitely going to be more unpacking/leveraging of DataTemplates - which I used back in the aughts - and returned to for a cup of coffee with Xamarin. This is what happens you have just enough context of your own to guide an LLM to help remind you of 1 of the 3 or 4 ways to solve a UI challenge. When you see something you recognize you're like Captain America after getting out of the ice, "I get that reference!" 🙄 Now I know two ways to get myself into trouble. Hopefully I'll internalize them well enough that I can use them to get me out of trouble too. 😀