Implemented text chunks

This commit is contained in:
Thorsten Sommer 2025-03-29 21:07:17 +01:00
parent 6e253db69f
commit a682302b6b
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
4 changed files with 59 additions and 1 deletions

View File

@ -13,7 +13,12 @@
</MudButton>
<InnerScrolling>
<ChildContent>
@foreach (var chunk in this.chunks)
{
<MudJustifiedText Typo="Typo.body1" Class="ma-3 write-mode-chunk">
@chunk.Content
</MudJustifiedText>
}
</ChildContent>
<FooterContent>
@if (this.isStreaming)

View File

@ -28,6 +28,7 @@ public partial class Writer : MSGComponentBase, IAsyncDisposable
private ChatThread? chatThread;
private bool isStreaming;
private string userInput = string.Empty;
private List<WriterChunk> chunks = new();
private string userDirection = string.Empty;
private string suggestion = string.Empty;
@ -74,6 +75,26 @@ public partial class Writer : MSGComponentBase, IAsyncDisposable
var text = await File.ReadAllTextAsync(result.SelectedFilePath, Encoding.UTF8);
this.userInput = text;
this.ChunkText();
}
private void ChunkText()
{
this.chunks.Clear();
var startIndex = 0;
var contentSpan = this.userInput.AsSpan();
for (var index = 0; index < contentSpan.Length; index++)
{
if (contentSpan[index] is '\n')
{
var endIndex = index;
var lineMemory = this.userInput.AsMemory(startIndex..endIndex);
this.chunks.Add(new WriterChunk(lineMemory, false, false));
startIndex = endIndex + 1;
}
}
this.StateHasChanged();
}
private async Task InputKeyEvent(KeyboardEventArgs keyEvent)

View File

@ -0,0 +1,10 @@
namespace AIStudio.Tools;
public sealed class WriterChunk(ReadOnlyMemory<char> content, bool isSelected, bool isProcessing)
{
public ReadOnlyMemory<char> Content = content;
public bool IsSelected = isSelected;
public bool IsProcessing = isProcessing;
}

View File

@ -35,6 +35,28 @@
margin-top: 4px;
}
.write-mode-chunk {
font-size: large;
padding-left: 1.5em;
position: relative;
}
.write-mode-chunk::before {
content: "";
position: absolute;
left: 0;
top: 10%;
height: 80%;
width: 0.8em;
background-color: transparent;
border-radius: 0.4em;
transition: background-color 0.5s ease;
}
.write-mode-chunk:hover::before {
background-color: #5894f3; /* Balkenfarbe im hover-Zustand */
}
.plugin-icon-container {
width: var(--mud-icon-size-large);
height: var(--mud-icon-size-large);