Replace literature toggle with 4-button consultation system

- Remove external literature toggle button from chat UI
- Add contextual 4-button literature consultation system that appears after agent responses
- Skip consultation buttons for first user query, show on subsequent queries
- Implement 4 consultation options: underlying paper, external literature, both sources, skip
- Add proper styling with color-coded buttons in 2x2 grid layout
- Generate synthetic user queries based on button selection
- Maintain compatibility with existing R server literature handling

chat_ui.R

@@ -1,73 +1,65 @@
-# chat_ui.R
-
-library(shiny)
-
-# Function to create the chat button UI
-chatButtonUI <- function() {
-  actionButton("toggleChatBtn", "Chat", icon = icon("comments"),
-               class = "btn-primary chat-toggle-button") # Added a class for styling
-}
-
-# Function to create the chat sidebar UI
-chatSidebarUI <- function() {
-  sidebar_id_to_use <- "chatSidebar"
-  print(paste("--- In chat_ui.R, chatSidebarUI IS DEFINING ID AS:", sidebar_id_to_use, "---")) # New print
-  
-  # Source the warning overlay code
-  source("warning_overlay.R", local = TRUE)
-  
-  tagList(
-    # Initialize shinyjs (used for disabling inputs and potentially other UI manipulations)
-    shinyjs::useShinyjs(), 
-    
-    # The old warningOverlayUI() and its specific JS are removed as we shift to chat messages.
-    # tags$script(HTML(warningOverlayJS)), # This JS was for the old overlay
-    
-    absolutePanel(
-      id = sidebar_id_to_use, # Use the variable here
-      class = "chat-sidebar", # Class for styling
-      top = 0, right = 0, width = "350px", height = "100%", # Initial position and size
-      draggable = FALSE,
-      fixed = TRUE, # Make it fixed position
-      style = "display: none; background-color: #f8f9fa; border-left: 1px solid #dee2e6; padding: 15px; box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 1050; position: fixed; right: 0; transition: width 0.1s ease-out; min-width: 250px; max-width: 800px;", # Ensure right overlay
-
-      # Resize handle on the left edge
-      div(
-        class = "resize-handle",
-        style = "position: absolute; left: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent; z-index: 1060;"
-      ),
-
-      h4("TaijiChat Assistant"),
-      hr(),
-      div(
-        id = "chatMessages",
-        class = "chat-messages-area", # For styling the message display
-        style = "height: calc(100vh - 200px); overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; background-color: white;"
-        # Placeholder for messages
-      ),
-      div(
-        class = "literature-toggle-container",
-        style = "margin: 5px 0;",
-        actionButton("literatureToggleBtn", 
-                     HTML('<i class="fa fa-search"></i> External Literature'),
-                     class = "btn btn-outline-info literature-toggle-btn",
-                     style = "width: 100%; font-size: 12px;")
-      ),
-      div(
-        class = "chat-input-area", # For styling input area
-        style = "display: flex; align-items: stretch;",
-        textInput("chatInput", NULL, placeholder = "Ask something...", width = "calc(100% - 80px)"),
-        actionButton("sendChatMsg", "Send", icon = icon("paper-plane"), class = "btn-success", style = "margin-left: 5px;")
-      ),
-      # Close button for the sidebar
-      tags$button(
-        id = "closeChatSidebarBtn",
-        type = "button",
-        class = "close", # Standard Bootstrap close button
-        `aria-label` = "Close",
-        style = "position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: #000; opacity: 0.5; background: transparent; border: 0;",
-        tags$span(`aria-hidden` = "true", HTML("&times;"))
-      )
-    )
-  )
+# chat_ui.R
+
+library(shiny)
+
+# Function to create the chat button UI
+chatButtonUI <- function() {
+  actionButton("toggleChatBtn", "Chat", icon = icon("comments"),
+               class = "btn-primary chat-toggle-button") # Added a class for styling
+}
+
+# Function to create the chat sidebar UI
+chatSidebarUI <- function() {
+  sidebar_id_to_use <- "chatSidebar"
+  print(paste("--- In chat_ui.R, chatSidebarUI IS DEFINING ID AS:", sidebar_id_to_use, "---")) # New print
+  
+  # Source the warning overlay code
+  source("warning_overlay.R", local = TRUE)
+  
+  tagList(
+    # Initialize shinyjs (used for disabling inputs and potentially other UI manipulations)
+    shinyjs::useShinyjs(), 
+    
+    # The old warningOverlayUI() and its specific JS are removed as we shift to chat messages.
+    # tags$script(HTML(warningOverlayJS)), # This JS was for the old overlay
+    
+    absolutePanel(
+      id = sidebar_id_to_use, # Use the variable here
+      class = "chat-sidebar", # Class for styling
+      top = 0, right = 0, width = "350px", height = "100%", # Initial position and size
+      draggable = FALSE,
+      fixed = TRUE, # Make it fixed position
+      style = "display: none; background-color: #f8f9fa; border-left: 1px solid #dee2e6; padding: 15px; box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 1050; position: fixed; right: 0; transition: width 0.1s ease-out; min-width: 250px; max-width: 800px;", # Ensure right overlay
+
+      # Resize handle on the left edge
+      div(
+        class = "resize-handle",
+        style = "position: absolute; left: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent; z-index: 1060;"
+      ),
+
+      h4("TaijiChat Assistant"),
+      hr(),
+      div(
+        id = "chatMessages",
+        class = "chat-messages-area", # For styling the message display
+        style = "height: calc(100vh - 200px); overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; background-color: white;"
+        # Placeholder for messages
+      ),
+      div(
+        class = "chat-input-area", # For styling input area
+        style = "display: flex; align-items: stretch;",
+        textInput("chatInput", NULL, placeholder = "Ask something...", width = "calc(100% - 80px)"),
+        actionButton("sendChatMsg", "Send", icon = icon("paper-plane"), class = "btn-success", style = "margin-left: 5px;")
+      ),
+      # Close button for the sidebar
+      tags$button(
+        id = "closeChatSidebarBtn",
+        type = "button",
+        class = "close", # Standard Bootstrap close button
+        `aria-label` = "Close",
+        style = "position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: #000; opacity: 0.5; background: transparent; border: 0;",
+        tags$span(`aria-hidden` = "true", HTML("&times;"))
+      )
+    )
+  )
 } 

www/chat_script.js

@@ -112,8 +112,64 @@ window.showFullImage = function(imagePath) {
   $('#fullImageModal').show();
 }
 
+// Global function to add literature consultation buttons
+window.addLiteratureConsultationButtons = function() {
+  console.log("Adding literature consultation buttons");
+  
+  var $chatMessages = $('#chatMessages');
+  if (!$chatMessages.length) {
+    console.error("Chat messages container not found");
+    return;
+  }
+  
+  // Add consultation message
+  var $consultationMsg = $('<div></div>').addClass('chat-message agent-message consultation-message');
+  $consultationMsg.text("Would you like to consult the underlying paper this website is based on, search external literature, try both sources, or skip additional research?");
+  $chatMessages.append($consultationMsg);
+  
+  // Add button container
+  var $buttonContainer = $('<div></div>').addClass('literature-consultation-buttons');
+  
+  // Create the 4 buttons
+  var $btnUnderlying = $('<button></button>')
+    .addClass('consultation-btn btn-underlying')
+    .text('Consult Underlying Paper')
+    .data('query-type', 'underlying');
+  
+  var $btnExternal = $('<button></button>')
+    .addClass('consultation-btn btn-external')
+    .text('Search External Literature')
+    .data('query-type', 'external');
+    
+  var $btnBoth = $('<button></button>')
+    .addClass('consultation-btn btn-both')
+    .text('Try Both Sources')
+    .data('query-type', 'both');
+    
+  var $btnSkip = $('<button></button>')
+    .addClass('consultation-btn btn-skip')
+    .text('Skip Additional Research')
+    .data('query-type', 'skip');
+  
+  // Add buttons to container in 2x2 grid
+  var $row1 = $('<div></div>').addClass('consultation-row');
+  var $row2 = $('<div></div>').addClass('consultation-row');
+  
+  $row1.append($btnUnderlying).append($btnExternal);
+  $row2.append($btnBoth).append($btnSkip);
+  
+  $buttonContainer.append($row1).append($row2);
+  $chatMessages.append($buttonContainer);
+  
+  // Scroll to bottom
+  $chatMessages.scrollTop($chatMessages[0].scrollHeight);
+  
+  console.log("Literature consultation buttons added successfully");
+}
+
 function initializeChatUI() {
   var isFirstChatOpenThisSession = true;
+  var isFirstUserQuery = true; // Track whether user has made their first actual query
   var isResizing = false;
   var startX;
   var startWidth;
@@ -306,6 +362,10 @@ function initializeChatUI() {
     var $chatMessages = $('#chatMessages');
 
     var $messageDiv = $('<div></div>').addClass('chat-message').addClass(messageClass);
+    
+    // Show consultation buttons after every non-thinking, non-disclaimer agent response, except for the first user query
+    var shouldShowConsultation = (messageType === 'agent' && !isThinkingMessage && !isDisclaimer && !isFirstUserQuery);
+    console.log("Message processing:", {messageType, isThinkingMessage, isDisclaimer, isFirstUserQuery, shouldShowConsultation});
 
     if (messageType === 'user') {
       // For user messages, just append the text directly without animation
@@ -378,6 +438,17 @@ function initializeChatUI() {
         }
         $messageDiv.html(messageText);
         $chatMessages.append($messageDiv);
+        
+        // Reset first user query flag after first agent response
+        if (isFirstUserQuery) {
+          console.log("First user query completed, enabling consultation buttons for future queries");
+          isFirstUserQuery = false;
+        }
+        
+        if (shouldShowConsultation) {
+          console.log("Triggering consultation buttons for HTML message");
+          window.addLiteratureConsultationButtons();
+        }
         if (autoScrollEnabled) {
             $chatMessages.scrollTop($chatMessages[0].scrollHeight);
         }
@@ -386,6 +457,16 @@ function initializeChatUI() {
         $chatMessages.append($messageDiv);
         var lines = messageText.split('\n');
         typeTextLines($messageDiv, lines, '', 5, function() {
+          // Reset first user query flag after first agent response
+          if (isFirstUserQuery) {
+            console.log("First user query completed, enabling consultation buttons for future queries");
+            isFirstUserQuery = false;
+          }
+          
+          if (shouldShowConsultation) {
+            console.log("Triggering consultation buttons for text message");
+            window.addLiteratureConsultationButtons();
+          }
           if (autoScrollEnabled) {
             $chatMessages.scrollTop($chatMessages[0].scrollHeight);
           }
@@ -402,6 +483,52 @@ function initializeChatUI() {
     }
   }
 
+
+  // Literature consultation button handler
+  $(document).off('click.consultationBtn').on('click.consultationBtn', '.consultation-btn', function() {
+    console.log("Consultation button clicked");
+    var $btn = $(this);
+    var queryType = $btn.data('query-type');
+    var queryText = '';
+    console.log("Button query type:", queryType);
+    
+    // Generate synthetic user query based on button selection
+    switch(queryType) {
+      case 'underlying':
+        queryText = 'Please provide more details from the underlying research paper that supports your previous response.';
+        break;
+      case 'external':
+        queryText = 'Please search external literature to provide additional context and validation for your previous response.';
+        break;
+      case 'both':
+        queryText = 'Please provide both details from the underlying paper and search external literature to give comprehensive context for your previous response.';
+        break;
+      case 'skip':
+        queryText = 'Thank you, no additional research needed.';
+        break;
+    }
+    
+    // Remove all consultation elements
+    $('.consultation-message').remove();
+    $('.literature-consultation-buttons').remove();
+    
+    // Add synthetic user message and trigger processing
+    if (queryType !== 'skip') {
+      addChatMessage(queryText, 'user');
+      
+      // Set literature preference based on button selection
+      var literatureEnabled = (queryType === 'external' || queryType === 'both');
+      Shiny.setInputValue("literature_search_enabled", literatureEnabled, {priority: "event"});
+      
+      // Send the query
+      Shiny.setInputValue("user_chat_message", queryText, {priority: "event"});
+      
+      // Disable input during processing
+      $('#chatInput').prop('disabled', true);
+      $('#sendChatMsg').prop('disabled', true);
+    }
+  });
+
   // Thought toggle handler
   $(document).off('click.thoughtToggle').on('click.thoughtToggle', '.thought-toggle-arrow', function() {
     var $arrow = $(this);
@@ -536,24 +663,4 @@ function initializeChatUI() {
   });
 
 
-  // Literature toggle handler
-  $(document).off('click.literatureToggle').on('click.literatureToggle', '#literatureToggleBtn', function() {
-    var $btn = $(this);
-    $btn.toggleClass('active');
-    
-    var isEnabled = $btn.hasClass('active');
-    Shiny.setInputValue("literature_search_enabled", isEnabled, {priority: "event"});
-    
-    // Update button text/icon based on state
-    if (isEnabled) {
-      $btn.html('<i class="fa fa-search"></i> External Literature (ON)');
-    } else {
-      $btn.html('<i class="fa fa-search"></i> External Literature (OFF)');
-    }
-  });
-
-  // Initialize button state (default: disabled)
-  setTimeout(function() {
-    Shiny.setInputValue("literature_search_enabled", false);
-  }, 100);
 }

www/chat_styles.css

@@ -169,29 +169,89 @@
   user-select: none;
 }
 
+/* Literature consultation styles */
+.consultation-message {
+  background-color: #f0f8ff !important;
+  border: 1px solid #87ceeb;
+  color: #2f4f4f;
+  font-style: italic;
+  margin-bottom: 5px !important;
+}
+
+.literature-consultation-buttons {
+  margin: 10px 0;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+  border: 1px solid #e0e0e0;
+  clear: both;
+}
+
+.consultation-row {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.consultation-row:last-child {
+  margin-bottom: 0;
+}
 
-/* Literature toggle button styles */
-.literature-toggle-btn {
+.consultation-btn {
+  flex: 1;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
   transition: all 0.3s ease;
-  border: 2px solid #17a2b8;
+  text-align: center;
+  min-height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.literature-toggle-btn.active {
-  background-color: #17a2b8 !important;
-  color: white !important;
-  border-color: #17a2b8;
+.btn-underlying {
+  background-color: #28a745;
+  color: white;
 }
 
-.literature-toggle-btn:not(.active) {
-  background-color: transparent;
-  color: #17a2b8;
+.btn-underlying:hover {
+  background-color: #218838;
+  transform: translateY(-2px);
 }
 
-.literature-toggle-btn:hover {
-  background-color: #17a2b8;
+.btn-external {
+  background-color: #007bff;
   color: white;
 }
 
-.literature-toggle-container {
-  margin: 5px 0;
-} 
+.btn-external:hover {
+  background-color: #0056b3;
+  transform: translateY(-2px);
+}
+
+.btn-both {
+  background-color: #ffc107;
+  color: #212529;
+}
+
+.btn-both:hover {
+  background-color: #e0a800;
+  transform: translateY(-2px);
+}
+
+.btn-skip {
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn-skip:hover {
+  background-color: #545b62;
+  transform: translateY(-2px);
+}
+
+
+