Skip to content

Commit

Permalink
cc
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeepBeepBopBop
BeepBeepBopBop committed Jan 15, 2025
1 parent f030d85 commit 08f6445
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 69 deletions.
106 changes: 52 additions & 54 deletions LM-Kit-Maestro/UI/Razor/Components/Chat.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@inherits MvvmComponentBase<ChatPageViewModel>

<div id="chat-container">
<div id="chats-sidebar"class="@(ViewModel.ChatsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">
<div id="chats-sidebar" class="@(ViewModel.ChatsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">

<div id="conversation-list">

Expand All @@ -26,64 +26,62 @@
</div>

<div id="chat-content">
<div id="chat-messages"
class="@(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
@if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
@if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
{
if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
{
if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
{
<div id="empty-conversation" class="chat-element vertical-stack">
<div class="vertical-stack spacing-4">
<div class="welcome-message"><b>Maestro</b> at your service—let’s orchestrate something
amazing!
</div>
<div class="welcome-message">
Feel free to ask questions, explore ideas, or engage in meaningful conversations.

</div>
<div class="welcome-message">
Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
help.
<div id="empty-conversation" class="chat-element vertical-stack">
<div class="vertical-stack spacing-4">
<div class="welcome-message"><b>Maestro</b> at your service—let’s orchestrate something
amazing!
</div>
<div class="welcome-message">
Feel free to ask questions, explore ideas, or engage in meaningful conversations.

</div>
</div>
<div class="welcome-message">
Whether you need assistance, inspiration, or just some lighthearted chat, I'm here to
help.

</div>

<div class="vertical-stack" style="gap:12px;">
<div class="shortcut-instruction">
Press Enter to send a new message
</div>
</div>

<div class="vertical-stack" style="gap:12px;">
<div class="shortcut-instruction">
Press Enter to send a new message
</div>

<div class="shortcut-instruction">
Hold Shift + Enter to insert a new line
</div>
<div class="shortcut-instruction">
Hold Shift + Enter to insert a new line
</div>
</div>
}
else
{
<div id="message-list" class="chat-element">
@foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
{
<ChatMessage MessageViewModel="message"/>
}
</div>
}
</div>
}

<div id="chat-info" class="chat-element">
<div id="scroll-to-end">
@if (!IsScrolledToEnd)
else
{
<div id="chat-messages" class="chat-element">
@foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
{
<button @onclick="OnScrollToEndButtonClicked" class="round-button scroll-to-end-button">
<span>
<i class="fas fa-arrow-down"></i>
</span>
</button>
<ChatMessage MessageViewModel="message"/>
}

<div id="chat-info" class="chat-element">
<div id="scroll-to-end">
@if (!IsScrolledToEnd)
{
<button @onclick="OnScrollToEndButtonClicked" class="round-button scroll-to-end-button">
<span>
<i class="fas fa-arrow-down"></i>
</span>
</button>
}
</div>
</div>
</div>
</div>
</div>
}
}


<div id="user-input" class="chat-element">
<UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation"/>
Expand All @@ -92,17 +90,17 @@
<div id="bottom-space">
@if (ViewModel?.ConversationListViewModel?.CurrentConversation?.LMKitConversation?.ContextSize > 0)
{
<MudText Align="Align.Center" Typo="Typo.caption">
Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
@ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
(@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
</MudText>
<MudText Align="Align.Center" Typo="Typo.caption">
Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
@ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
(@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
</MudText>
}
</div>
</div>

@* <div id="settings-sidebar"
@* <div id="settings-sidebar"
class="@(ViewModel.SettingsSidebarIsToggled ? "sidebar-show" : "sidebar-hide")">
<ChatSettings/>
</div> *@
Expand Down
23 changes: 13 additions & 10 deletions LM-Kit-Maestro/UI/Razor/Components/Chat.razor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
height: 100%;
width: 100%;
scrollbar-gutter: both-edges stable;
margin: auto;
display: flex;
flex-direction: column;
}

#chat-messages::-webkit-scrollbar {
Expand Down Expand Up @@ -79,16 +82,17 @@ body.mac .chat-element {
justify-content: center;
}

#message-list {
margin: auto;
display: flex;
flex-direction: column;
}

#empty-conversation {
flex-direction: column;
gap: 32px;
height: 100%;
/* gap: 32px;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
background-color: red;
margin-inline: 0 auto;
width: 100%;
text-align: center;*/
}

#chat-info {
Expand Down Expand Up @@ -133,13 +137,12 @@ body.mac .chat-element {
}

.sidebar-hide {
visibility: collapse;
display: none;
}

.sidebar-show {
overflow-y: auto;
background-color: var(--Surface);
visibility: visible;
width: 300px;
min-width: 300px;
max-width: 300px;
Expand Down
13 changes: 8 additions & 5 deletions LM-Kit-Maestro/wwwroot/js/lmkitmaestro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,14 @@ function setUserInputFocus() {
}

function scrollToEnd(smooth) {
const container = document.getElementById('chat-messages');
container.scrollTo({
top: container.scrollHeight,
behavior: smooth ? 'smooth' : 'auto'
});
const element = document.getElementById('chat-messages');

if (element != null) {
element.scrollTo({
top: element.scrollHeight,
behavior: smooth ? 'smooth' : 'auto'
});
}
}


Expand Down

0 comments on commit 08f6445

Please sign in to comment.