From 25eb95b8b6cbb2348e16243f89855ee23bc6d768 Mon Sep 17 00:00:00 2001
From: Rockford lhotka <rocky@lhotka.net>
Date: Tue, 31 Mar 2026 11:58:24 -0500
Subject: [PATCH] Add view modal for saved responses

Saved response list items now have a view button (eye icon) that
opens the full content rendered as markdown in a scrollable panel
without inserting into chat. From the view, users can go Back to
the list or Insert into chat. Clicking the item label still inserts
directly as before. Light and dark mode styles included.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/RockBot.UserProxy.Blazor/Pages/Chat.razor | 80 +++++++++++++++----
 .../wwwroot/css/app.css                       | 31 +++++++
 2 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/src/RockBot.UserProxy.Blazor/Pages/Chat.razor b/src/RockBot.UserProxy.Blazor/Pages/Chat.razor
index 2e43d23..7db3a48 100644
--- a/src/RockBot.UserProxy.Blazor/Pages/Chat.razor
+++ b/src/RockBot.UserProxy.Blazor/Pages/Chat.razor
@@ -231,29 +231,49 @@
     {
         <div class="modal-overlay" @onclick="ToggleSavedModal">
             <div class="saved-modal" @onclick:stopPropagation="true">
-                <h5>Saved Responses</h5>
-                @if (_savedItems is null)
+                @if (_viewingItem is not null)
                 {
-                    <p>Loading...</p>
-                }
-                else if (_savedItems.Count == 0)
-                {
-                    <p class="text-muted">No saved responses yet.</p>
+                    <div class="saved-view-header">
+                        <h5>@_viewingItem.Label</h5>
+                        <small class="saved-item-meta">@_viewingItem.AgentName — @TimeZoneInfo.ConvertTime(_viewingItem.SavedAt, _displayZone).ToString("MMM d, yyyy h:mm tt")</small>
+                    </div>
+                    <div class="saved-view-content">
+                        @((MarkupString)Markdig.Markdown.ToHtml(_viewingItem.Content, MarkdownPipeline))
+                    </div>
+                    <div class="d-flex gap-2 mt-2">
+                        <button class="btn btn-sm btn-secondary" @onclick="BackToSavedList">Back</button>
+                        <button class="btn btn-sm btn-primary" @onclick="() => InsertViewedItem()">Insert into chat</button>
+                    </div>
                 }
                 else
                 {
-                    @foreach (var item in _savedItems)
+                    <h5>Saved Responses</h5>
+                    @if (_savedItems is null)
+                    {
+                        <p>Loading...</p>
+                    }
+                    else if (_savedItems.Count == 0)
+                    {
+                        <p class="text-muted">No saved responses yet.</p>
+                    }
+                    else
                     {
-                        <div class="saved-item d-flex justify-content-between align-items-center p-2 mb-1 rounded">
-                            <div class="saved-item-info" @onclick="() => LoadSavedItem(item.Id)" style="cursor:pointer;">
-                                <strong>@item.Label</strong>
-                                <small class="saved-item-meta d-block">@item.AgentName — @TimeZoneInfo.ConvertTime(item.SavedAt, _displayZone).ToString("MMM d, yyyy h:mm tt")</small>
+                        @foreach (var item in _savedItems)
+                        {
+                            <div class="saved-item d-flex justify-content-between align-items-center p-2 mb-1 rounded">
+                                <div class="saved-item-info" @onclick="() => LoadSavedItem(item.Id)" style="cursor:pointer;" title="Insert into chat">
+                                    <strong>@item.Label</strong>
+                                    <small class="saved-item-meta d-block">@item.AgentName — @TimeZoneInfo.ConvertTime(item.SavedAt, _displayZone).ToString("MMM d, yyyy h:mm tt")</small>
+                                </div>
+                                <div class="d-flex gap-1">
+                                    <button class="btn btn-sm btn-outline-secondary" @onclick="() => ViewSavedItem(item.Id)" title="View">👁️</button>
+                                    <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteSavedItem(item.Id)" title="Delete">🗑️</button>
+                                </div>
                             </div>
-                            <button class="btn btn-sm btn-outline-danger" @onclick="() => DeleteSavedItem(item.Id)">🗑️</button>
-                        </div>
+                        }
                     }
+                    <button class="btn btn-sm btn-secondary mt-2" @onclick="ToggleSavedModal">Close</button>
                 }
-                <button class="btn btn-sm btn-secondary mt-2" @onclick="ToggleSavedModal">Close</button>
             </div>
         </div>
     }
@@ -311,6 +331,7 @@
     private string _saveLabel = string.Empty;
     private bool _showSavedModal;
     private IReadOnlyList<SavedResponseSummary>? _savedItems;
+    private GetSavedResponseResponse? _viewingItem;
 
     private static readonly MarkdownPipeline MarkdownPipeline = new MarkdownPipelineBuilder()
         .UseAdvancedExtensions()
@@ -583,6 +604,7 @@
     private async Task ToggleSavedModal()
     {
         _showSavedModal = !_showSavedModal;
+        _viewingItem = null;
         if (_showSavedModal)
         {
             _savedItems = null;
@@ -602,6 +624,7 @@
     private async Task LoadSavedItem(string id)
     {
         _showSavedModal = false;
+        _viewingItem = null;
         try
         {
             var response = await ProxyService.GetSavedResponseAsync(id);
@@ -614,6 +637,33 @@
         }
     }
 
+    private async Task ViewSavedItem(string id)
+    {
+        try
+        {
+            var response = await ProxyService.GetSavedResponseAsync(id);
+            if (response is not null && response.Found)
+                _viewingItem = response;
+        }
+        catch (Exception ex)
+        {
+            ChatState.AddError($"Could not load saved response: {ex.Message}");
+        }
+    }
+
+    private void BackToSavedList()
+    {
+        _viewingItem = null;
+    }
+
+    private void InsertViewedItem()
+    {
+        if (_viewingItem is null) return;
+        ChatState.AddSavedReference(_viewingItem.Id, _viewingItem.Label, _viewingItem.Content, _viewingItem.AgentName);
+        _viewingItem = null;
+        _showSavedModal = false;
+    }
+
     private async Task DeleteSavedItem(string id)
     {
         try
diff --git a/src/RockBot.UserProxy.Blazor/wwwroot/css/app.css b/src/RockBot.UserProxy.Blazor/wwwroot/css/app.css
index 03eaa87..ff807cb 100644
--- a/src/RockBot.UserProxy.Blazor/wwwroot/css/app.css
+++ b/src/RockBot.UserProxy.Blazor/wwwroot/css/app.css
@@ -668,6 +668,27 @@ body.dark-mode .chevron-indicator {
     color: #6b7280;
 }
 
+.saved-view-header {
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.saved-view-header h5 {
+    margin-bottom: 0.25rem;
+}
+
+.saved-view-content {
+    max-height: 50vh;
+    overflow-y: auto;
+    padding: 0.75rem;
+    background: #f9fafb;
+    border-radius: 0.375rem;
+    border: 1px solid #e5e7eb;
+    font-size: 0.9rem;
+    line-height: 1.6;
+}
+
 /* ── Dark mode: saved reference ─────────────────────────────────────── */
 
 body.dark-mode .saved-reference-bubble {
@@ -697,6 +718,16 @@ body.dark-mode .saved-item-meta {
     color: #9ca3af;
 }
 
+body.dark-mode .saved-view-header {
+    border-bottom-color: #4b5563;
+}
+
+body.dark-mode .saved-view-content {
+    background: #1f2937;
+    border-color: #4b5563;
+    color: #e5e7eb;
+}
+
 body.dark-mode .save-label-input {
     border-top-color: rgba(255, 255, 255, 0.1);
 }