lancommander-ref/LANCommander
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style chat component

Browse source
This commit is contained in:
Pat Hartl 2026-01-02 02:10:42 -06:00
parent b54ef115ab
commit 81685f2da7
9 changed files with 57 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

24
LANCommander.UI/Components/Chat/Chat.razor
View file

@ -4,19 +4,17 @@
@inject ModalService ModalService
@namespace LANCommander.UI.Components
<Button OnClick="StartThread">New Thread</Button>
<SplitPane>
<Pane>
<ChatList Threads="_threads" @bind-SelectedThread="_thread" />
</Pane>
<Pane>
@if (_thread != null)
{
<ChatThread Id="_thread.Id"/>
}
</Pane>
</SplitPane>
<Flex Class="chat">
<Flex Direction="FlexDirection.Vertical" Class="chat-list">
<Button OnClick="StartThread">New Thread</Button>
<Divider />
<ChatList Threads="_threads" @bind-SelectedThread="_thread"/>
</Flex>
<ChatThread Id="_thread?.Id" />
</Flex>
@code {
IEnumerable<SDK.Models.ChatThread> _threads = [];

3
LANCommander.UI/Components/Chat/Chat.razor.scss Normal file
View file

@ -0,0 +1,3 @@
.chat {
height: 100%;
}

8
LANCommander.UI/Components/Chat/ChatList.razor.scss Normal file
View file

@ -0,0 +1,8 @@
.chat-list {
padding: 1em;
padding-top: 0;
.ant-divider-horizontal {
margin: 1em 0;
}
}

4
LANCommander.UI/Components/Chat/ChatListThread.razor.scss
View file

@ -1,7 +1,3 @@
.chat-list-thread {
margin: .5em;
}
.chat-list-thread-title {
flex-grow: 1;
}

7
LANCommander.UI/Components/Chat/ChatMessageInput.razor
View file

@ -7,13 +7,16 @@
<EasyMdeEditor
@bind-Value="_message"
Class="chat-message-input"
InterceptKeys="_keys"
OnKey="HandleKey"
ReadOnly="_readonly"
ReadOnly="_sendingMessage"
Placeholder="@Placeholder"
Options="_options" />
@code {
[Parameter] public Guid? ThreadId { get; set; }
[Parameter] public string? Placeholder { get; set; }
string _message = string.Empty;
bool _sendingMessage;
@ -21,8 +24,6 @@
string _errorMessage = string.Empty;
FormValidateStatus _validateStatus => _hasError ? FormValidateStatus.Error : FormValidateStatus.Default;
bool _hasError => !string.IsNullOrWhiteSpace(_errorMessage);
EasyMdeReadOnly _readonly => _sendingMessage ? EasyMdeReadOnly.Disabled : EasyMdeReadOnly.Default;
readonly EasyMdeOptions _options = new()
{

8
LANCommander.UI/Components/Chat/ChatMessageInput.razor.scss Normal file
View file

@ -0,0 +1,8 @@
.chat-message-input {
.EasyMDEContainer .CodeMirror {
margin: .5em;
border: none;
border-radius: 0;
background: #1f1f1f;
}
}

18
LANCommander.UI/Components/Chat/ChatThread.razor
View file

@ -4,8 +4,8 @@
@inject IChatClient ChatClient
@namespace LANCommander.UI.Components
<Flex Direction="FlexDirection.Vertical">
<div style="flex-grow: 1;">
<Flex Direction="FlexDirection.Vertical" Class="chat-thread">
<Flex Direction="FlexDirection.Vertical" Class="chat-thread-messages">
@if (_thread != null)
{
<Virtualize Items="_thread.MessageGroups" Context="messageGroup">
@ -16,30 +16,30 @@
StartedOn="@messageGroup.StartedOn.LocalDateTime">
@foreach (var message in messageGroup.Messages)
{
<ChatMessage Id="@message.Id" Content="@message.Content" SentOn="@message.SentOn"/>
<ChatMessage Id="@message.Id" Content="@message.Content" SentOn="@message.SentOn"/>
}
</ChatMessageGroup>
</Virtualize>
}
</div>
</Flex>
<ChatMessageInput ThreadId="@Id" />
<ChatMessageInput ThreadId="@Id" Placeholder="@($"Message {_thread?.Title}")" />
</Flex>
@code {
[Parameter] public Guid Id { get; set; }
[Parameter] public Guid? Id { get; set; }
SDK.Models.ChatThread? _thread;
protected override async Task OnParametersSetAsync()
{
if (_thread == null || _thread.Id != Id)
if ((_thread == null || _thread.Id != Id) && Id.HasValue)
{
_thread = await ChatClient.GetThreadAsync(Id);
_thread = await ChatClient.GetThreadAsync(Id.Value);
_thread.MessageGroups.CollectionChanged += MessageGroupsOnCollectionChanged;
await ChatClient.GetMessagesAsync(Id);
await ChatClient.GetMessagesAsync(Id.Value);
}
}

10
LANCommander.UI/Components/Chat/ChatThread.razor.scss Normal file
View file

@ -0,0 +1,10 @@
.chat-thread {
height: 100%;
flex-grow: 1;
background: #141414;
}
.chat-thread-messages {
flex-grow: 1;
padding: 1em;
}

4
LANCommander.UI/_Imports.razor.scss
View file

@ -5,8 +5,12 @@
@forward 'Styles/_pdf-reader';
@forward 'Styles/_markdown-editor';
@forward 'Styles/_authentication-provider';
@forward 'Components/Chat/Chat.razor';
@forward 'Components/Chat/ChatList.razor';
@forward 'Components/Chat/ChatListThread.razor';
@forward 'Components/Chat/ChatMessage.razor';
@forward 'Components/Chat/ChatMessageInput.razor';
@forward 'Components/Chat/ChatThread.razor';
@forward 'Components/ChunkUploader/ChunkUploader.razor';
@forward 'Components/DataList/DataList.razor';
@forward 'Components/DataTable/DataTable.razor';