[#19] Add error handling in InferPage

Author: sgdevnet

src/MaIN.InferPage/Components/Pages/Home.razor

@@ -13,6 +13,23 @@
 
 <PageTitle>MaIN Infer</PageTitle>
 
+<div class="error-notification-wrapper">
+    @if (!string.IsNullOrEmpty(_errorMessage))
+    {
+        <div class="error-shake">
+            <FluentMessageBar @key="_errorMessage" 
+                              Intent="@MessageIntent.Error"
+                              AllowDismiss="true"
+                              Multiline="true"
+                              OnDismiss="@(() => _errorMessage = null)"
+                              Class="high-alert-error">
+                <Title>Error</Title>
+                @_errorMessage
+            </FluentMessageBar>
+        </div>
+    }
+</div>
+
 <FluentGrid>
     <FluentGridItem sm="1" xs="1" lg="1"></FluentGridItem>
     <FluentGridItem sm="10" xs="10" lg="10" Style="align-self: center; align-items: center">
@@ -183,6 +200,7 @@
     private bool _isLoading;
     private bool _isThinking;
     private bool _reasoning;
+    private string? _errorMessage;
     private string? _incomingMessage = null;
     private string? _incomingReasoning = null;
     private readonly string? _displayName = Utils.Model;
@@ -249,44 +267,61 @@
             _prompt = string.Empty;
             StateHasChanged();
             bool wasAtBottom = await JS.InvokeAsync<bool>("scrollManager.isAtBottom", "messages-container");
-            await ctx!.WithMessage(msg)
-                .CompleteAsync(changeOfValue: async message =>
-                {
-                    if (message?.Type == TokenType.Reason)
-                    {
-                        _isThinking = true;
-                        _incomingReasoning += message.Text;
-                    }
-                    else if (message?.Type == TokenType.Message)
-                    {
-                        _isThinking = false;
-                        _incomingMessage += message.Text;
-                    }
 
-                    StateHasChanged();
-                    if (wasAtBottom)
+            try
+            {
+                await ctx!.WithMessage(msg)
+                    .CompleteAsync(changeOfValue: async message =>
                     {
-                        await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", _bottomElement);
-                    }
-                });
+                        if (message?.Type == TokenType.Reason)
+                        {
+                            _isThinking = true;
+                            _incomingReasoning += message.Text;
+                        }
+                        else if (message?.Type == TokenType.Message)
+                        {
+                            _isThinking = false;
+                            _incomingMessage += message.Text;
+                        }
+
+                        StateHasChanged();
+                        if (wasAtBottom)
+                        {
+                            await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", _bottomElement);
+                        }
+                    });
+                
+                _isLoading = false;
+                var currentChat = (await ctx.GetCurrentChat());
+                Chat.Messages.Add(currentChat.Messages.Last());
+                Messages = Chat.Messages.Select(x => new MessageExt()
+                {
+                    Message = x
+                }).ToList();
+                _incomingReasoning = null;
+                _incomingMessage = null;
+                await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", _bottomElement);
+                StateHasChanged();
 
-            _isLoading = false;
-            var currentChat = (await ctx.GetCurrentChat());
-            Chat.Messages.Add(currentChat.Messages.Last());
-            Messages = Chat.Messages.Select(x => new MessageExt()
+            }
+            catch (Exception ex)
             {
-                Message = x
-            }).ToList();
-            _incomingReasoning = null;
-            _incomingMessage = null;
-            await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", _bottomElement);
-            StateHasChanged();
+                _errorMessage = null;
+                StateHasChanged();
+                
+                _errorMessage = $"{ex.Message}";
+            }
+            finally
+            {
+                _isLoading = false;
+                _isThinking = false;
+                StateHasChanged();
+            }
         }
     }
 
     private void Callback(ChangeEventArgs obj)
     {
         _prompt = obj.Value?.ToString()!;
     }
-
 }

src/MaIN.InferPage/wwwroot/home.css

@@ -57,4 +57,45 @@
 
 .message-card p {
     margin: 0;
+}
+
+.error-notification-wrapper {
+    position: fixed;
+    top: 30px;
+    right: 30px;
+    z-index: 9999;
+    width: 550px;
+    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
+    pointer-events: none;
+}
+
+.error-notification-wrapper > div {
+    pointer-events: auto;
+}
+
+.high-alert-error {
+    background-color: #d32f2f !important;
+    color: #ffffff !important;
+    border: none !important;
+    font-size: 1.1rem !important;
+}
+
+.high-alert-error * {
+    color: #ffffff !important;
+    fill: #ffffff !important;
+}
+
+.high-alert-error .content {
+    padding: 16px !important;
+}
+
+.error-shake {
+    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+@keyframes shake {
+    10%, 90% { transform: translate3d(-1px, 0, 0); }
+    20%, 80% { transform: translate3d(2px, 0, 0); }
+    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+    40%, 60% { transform: translate3d(4px, 0, 0); }
 }