Skip to content

Commit

Permalink
move css to separated files
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeepBeepBopBop
BeepBeepBopBop committed Dec 19, 2024
1 parent 110f644 commit c1a5a2b
Show file tree
Hide file tree
Showing 9 changed files with 413 additions and 419 deletions.
228 changes: 40 additions & 188 deletions LM-Kit-Maestro/UI/Razor/Components/Chat.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,46 @@
<div id="container">
<div id="conversation-container">
<div id="conversation-content"
class="chat-element dark @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
class="chat-element dark @(ViewModel.ConversationListViewModel.CurrentConversation is { IsEmpty: true } ? "centered-container" : "top-align-container")">
@if (ViewModel?.ConversationListViewModel.CurrentConversation != null)
{
if (ViewModel.ConversationListViewModel.CurrentConversation.IsEmpty)
{
<div id="empty-conversation" class="vertical-stack small">
<div class="vertical-stack spacing-4">
<div class="welcome-message">Hello, human.</div>
<div class="welcome-message">
It is likely that similar software programs are now assuming professional tasks that
were
previously your responsibility.
</div>
<div class="welcome-message">
Developers and other software programs are working to enhance my
ability to assist you in the process of making sense about this, or to generate witty
jokes
involving robots and humans.
</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>
</div>
<div id="empty-conversation" class="vertical-stack small">
<div class="vertical-stack spacing-4">
<div class="welcome-message">Hello, human.</div>
<div class="welcome-message">
It is likely that similar software programs are now assuming professional tasks that
were
previously your responsibility.
</div>
<div class="welcome-message">
Developers and other software programs are working to enhance my
ability to assist you in the process of making sense about this, or to generate witty
jokes
involving robots and humans.
</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>
</div>
}
else
{
<div id="message-list">
<div id="message-list">
@foreach (var message in ViewModel.ConversationListViewModel.CurrentConversation.Messages)
{
<ChatMessage MessageViewModel="message"/>
<ChatMessage MessageViewModel="message" />
}
</div>
</div>
}
}
</div>
Expand All @@ -58,179 +58,31 @@
<div id="scroll-to-end">
@if (!IsScrolledToEnd)
{
<button @onclick="OnScrollToEndButtonClicked"
class="material-icons round-button scroll-to-end-button">
arrow_downward
</button>
<button @onclick="OnScrollToEndButtonClicked"
class="material-icons round-button scroll-to-end-button">
arrow_downward
</button>
}
</div>
</div>
</div>

<div id="user-input" class="chat-element">
<UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation"/>
<UserInput ViewModel="ViewModel!.ConversationListViewModel.CurrentConversation" />
</div>

<div id="bottom-space" class="chat-element">
<div id="bottom-space" class="chat-element">
@if (ViewModel?.ConversationListViewModel?.CurrentConversation?.LMKitConversation?.ContextSize > 0)
{
<text>
Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
Tokens: @ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace /
@ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize
(@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
(@CalculateUsagePercentage(ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextUsedSpace,
ViewModel.ConversationListViewModel.CurrentConversation.LMKitConversation.ContextSize)%)
</text>
}
</div>
</div>
</div>

<style>
#container {
color: white;
width: 100vw;
height: 100vh;
overflow: hidden;
grid-template-rows: 1fr auto auto;
padding-inline: 8px;
padding-block: 8px;
display: grid;
}
#conversation-container {
display: flex;
flex-direction: column;
position: relative;
/* display: flex;
flex-direction: column;
*/
overflow-y: hidden;
scrollbar-gutter: both-edges stable;
}
#conversation-container:hover {
overflow-y: scroll; /* Show the scrollbar on hover */
}
#conversation-container::-webkit-scrollbar {
width: 8px;
}
#conversation-container::-webkit-scrollbar-thumb {
background-color: var(--Surface);
border-radius: 4px;
border: 10px solid transparent;
}
#conversation-container::-webkit-scrollbar-track {
background-color: transparent;
}
#conversation-container::-webkit-scrollbar-thumb:hover {
background-color: var(--Surface3);
}
#conversation-content {
}
#user-input {
overflow: hidden;
}
#bottom-space {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin-block: 8px;
}
.chat-element {
padding-inline: 8px;
width: 100%;
justify-content: center;
align-self: center;
margin-left: auto;
margin-right: auto;
}
body.windows .chat-element {
max-width: 800px;
}
body.mac .chat-element {
max-width: 1000px;
}
.top-align-container {
align-items: flex-start;
}
.centered-container {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
}
#message-list {
margin: auto;
display: flex;
flex-direction: column;
}
#empty-conversation {
flex-direction: column;
gap: 32px;
display: flex;
}
#chat-info {
position: sticky;
display: flex;
bottom: 8px;
height: 100px;
}
.scroll-to-end-button {
color: var(--OnSurface);
background-color: var(--Surface4);
display: flex;
border: none;
align-self: center;
}
body.windows .scroll-to-end-button {
margin-top: -32px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
}
body.mac .scroll-to-end-button {
margin-top: -40px; /* Setting negative margin to the height of the button so that it does not add height to parent containers. */
}
.vertical-stack {
gap: 8px;
display: flex;
flex-direction: column;
}
.welcome-message {
color: var(--Outline);
text-align: center;
}
.shortcut-instruction {
padding: 12px;
border: 1px solid;
display: flex;
flex-direction: row;
border-radius: 0;
border-color: var(--Surface4);
color: var(--Outline);
}
</style>

<script>
function initializeScrollHandler(dotNetHelper) {
Expand Down
Loading

0 comments on commit c1a5a2b

Please sign in to comment.