kotalk/src/PhysOn.Desktop/Views/ConversationWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:PhysOn.Desktop.ViewModels"
        x:Class="PhysOn.Desktop.Views.ConversationWindow"
        x:DataType="vm:ConversationWindowViewModel"
        Width="404"
        Height="748"
        MinWidth="340"
        MinHeight="520"
        Background="#F7F3EE"
        Title="{Binding ConversationTitle}">

    <Window.Styles>
        <Style Selector="Border.surface">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FFFFFF" />
            <Setter Property="BorderBrush" Value="#E8DDD2" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.muted">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Background" Value="#FBF7F2" />
            <Setter Property="BorderBrush" Value="#ECE1D6" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Border.bubble">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="9,7" />
            <Setter Property="Margin" Value="0,0,0,6" />
            <Setter Property="Background" Value="#FBF7F2" />
            <Setter Property="BorderBrush" Value="#E6D8CC" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>
        <Style Selector="Border.bubble.mine">
            <Setter Property="Background" Value="#F0E5D8" />
            <Setter Property="HorizontalAlignment" Value="Right" />
        </Style>
        <Style Selector="Button.icon">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="8,6" />
            <Setter Property="Background" Value="#FBF7F2" />
            <Setter Property="BorderBrush" Value="#DCCFC4" />
            <Setter Property="BorderThickness" Value="1" />
        </Style>
        <Style Selector="Button.primary">
            <Setter Property="CornerRadius" Value="2" />
            <Setter Property="Padding" Value="11,8" />
            <Setter Property="Background" Value="#394350" />
            <Setter Property="Foreground" Value="#FFFFFF" />
        </Style>
        <Style Selector="TextBlock.caption">
            <Setter Property="FontSize" Value="11.5" />
            <Setter Property="Foreground" Value="#82766D" />
        </Style>
        <Style Selector="TextBlock.body">
            <Setter Property="FontSize" Value="13" />
            <Setter Property="Foreground" Value="#20242B" />
        </Style>
    </Window.Styles>

    <Grid Margin="10" RowDefinitions="Auto,Auto,*,Auto" RowSpacing="8">
        <Border Classes="surface" Padding="10">
            <Grid ColumnDefinitions="40,*,Auto,Auto" ColumnSpacing="10">
                <Border Width="40" Height="40" Classes="muted">
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Text="{Binding ConversationGlyph}"
                               FontWeight="SemiBold"
                               Foreground="#20242B" />
                </Border>

                <StackPanel Grid.Column="1" Spacing="2">
                    <TextBlock Text="{Binding ConversationTitle}"
                               FontSize="14.5"
                               FontWeight="SemiBold"
                               Foreground="#20242B"
                               TextTrimming="CharacterEllipsis" />
                    <TextBlock Text="{Binding ConversationSubtitle}"
                               Classes="caption"
                               TextTrimming="CharacterEllipsis" />
                </StackPanel>

                <Border Grid.Column="2" Classes="muted" Padding="8,4">
                    <TextBlock Text="{Binding StatusText}" Classes="caption" />
                </Border>

                <Button Grid.Column="3"
                        Classes="icon"
                        Command="{Binding ReloadCommand}"
                        Content="↻" />
            </Grid>
        </Border>

        <Border Grid.Row="1"
                Classes="surface"
                Padding="9"
                IsVisible="{Binding HasErrorText}">
            <TextBlock Text="{Binding ErrorText}"
                       Foreground="#C9573C"
                       Classes="caption"
                       TextWrapping="Wrap" />
        </Border>

        <Border Grid.Row="2" Classes="surface" Padding="8">
            <ScrollViewer Name="MessagesScrollViewer" MaxWidth="360" HorizontalAlignment="Center">
                <ItemsControl ItemsSource="{Binding Messages}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="vm:MessageRowViewModel">
                            <Border Classes="bubble"
                                    Classes.mine="{Binding IsMine}">
                                <StackPanel Spacing="4">
                                    <TextBlock Text="{Binding SenderName}"
                                               Classes="caption"
                                               FontWeight="SemiBold"
                                               IsVisible="{Binding ShowSenderName}" />
                                    <TextBlock Text="{Binding Text}"
                                               Classes="body"
                                               TextWrapping="Wrap" />
                                    <TextBlock Text="{Binding MetaText}" Classes="caption" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Border>

        <Border Grid.Row="3" Classes="muted" Padding="8" MaxWidth="360" HorizontalAlignment="Center">
            <Grid ColumnDefinitions="*,Auto" ColumnSpacing="10">
                <TextBox Name="ComposerTextBox"
                         PlaceholderText="메시지"
                         AcceptsReturn="True"
                         TextWrapping="Wrap"
                         MinHeight="44"
                         Text="{Binding ComposerText}"
                         KeyDown="ComposerTextBox_OnKeyDown" />
                <Button Grid.Column="1"
                        Classes="primary"
                        MinWidth="72"
                        Command="{Binding SendMessageCommand}"
                        Content="보내기" />
            </Grid>
        </Border>
    </Grid>
</Window>