<!-- Generated by SpecStory, Markdown v2.1.0 -->

# 2025-05-02 21:46:35Z

<!-- VS Code Copilot IDE Session 3193d62e-104a-4d4b-aec3-960bc205c384 (2025-05-02 21:46:35Z) -->

_**User (2025-05-02 21:46:35Z)**_

within general.js you will find the textToSearch item. Do you see it?

---

_**Agent**_

I need to check for a `general.js` file in the provided input files, but it wasn't included in the files you shared. I don't see any reference to a `textToSearch` item in the files you provided.

Let me explain what I can determine from the files you did share:

1. In `search.js`, there's code to handle search functionality but no direct reference to a `textToSearch` element.

2. In `header.js`, there's a reference to `$('#textToSearch').val()` in the form submission handler, which shows that `textToSearch` is an input element ID used in the search form.

To help you further, I would need to see the `general.js` file or the HTML file where the search form and `textToSearch` element are defined. Would you like me to review those files as well?

---

_**User (2025-05-02 21:47:32Z)**_

ok, please check again

---

_**Agent**_

After examining the files you've provided, I can confirm that I found the `textToSearch` item in the general.js file. It appears in the header section where styles and classes are being applied to elements.

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

Here's where the `textToSearch` element is located in the general.js file:

````javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');
// ...existing code...
````

This code is applying CSS classes and setting attributes to the search input with the ID `textToSearch`. Specifically:
1. It adds the 'input' class to the element
2. It sets the placeholder text to "Search"

The same element is referenced in header.js in the search form submission handler, where its value is captured with `$('#textToSearch').val()` to get the search term entered by the user.

---

_**User (2025-05-02 21:48:23Z)**_

This input is part of a search feature within this and every page within the document pages. It is currently a full text search, but I need to incorporate two buttons (segmented control) on the end of the search, or preferably within the search control so that it shows ownership. These buttons would allow the user to select between the existing Full Text search and chatting with an AI Agent.

I want to have a conversation about how I can implement that

---

_**Agent**_

I understand your goal is to enhance the search functionality by adding a segmented control with two options: Full Text Search (current functionality) and AI Chat. Let's discuss how we can implement this effectively.

Based on the files you've provided, I see we have a search form with a text input element with id `textToSearch`. Here's how I'd approach the implementation:

### Implementation Strategy

1. **Modify the search input area** to include a segmented control
2. **Add toggle functionality** to switch between search modes
3. **Adjust the form submission behavior** to handle both types of searches

### Detailed Implementation Plan

#### 1. Modify the Search Control

We'll modify the search control in `general.js` to add the segmented control buttons right next to the search input field. The segmented control will be styled to appear as part of the search box.

#### 2. Add JavaScript for Toggle Functionality

We'll add functions to handle the switching between search modes and adjust the form submission behavior in `header.js`.

### Code Implementation

Here's how we can modify the files:

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Create segmented control for search modes
const searchModeControl = $(`
  <div class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" title="Full Text Search">
      <i class="bi bi-search"></i>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn" title="AI Chat">
      <i class="bi bi-chat-dots"></i>
    </button>
  </div>
`);

// Insert the segmented control into the search form
$('#searchForm div').append(searchModeControl);

// Add hidden input field to track the current search mode
$('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');

// Style the search mode control
$('.search-mode-control').css({
  'display': 'inline-flex',
  'border-left': '1px solid #ccc',
  'margin-left': '5px',
  'height': '100%'
});

$('.search-mode-btn').css({
  'background': 'none',
  'border': 'none',
  'padding': '0 10px',
  'cursor': 'pointer',
  'height': '100%',
  'color': '#555'
});

$('.search-mode-btn.active').css({
  'background-color': '#f0f0f0',
  'color': '#007ac3'
});

// move search form to header container
$('#searchForm').appendTo('.wh_header_flex_container');

$('#wh_top_menu_and_indexterms_link').insertAfter('.wh_header_flex_container');

// Styles
$('.divSearch').css({
  'display': 'inline-block !important',
});

$('.wh-tooltip').remove();

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
$(document).ready(function() {
    // Remove any existing submit handlers from the search form
    $('#searchForm').off('submit');
    
    // Handle search mode toggle
    $('#fullTextSearchBtn, #aiChatBtn').click(function() {
        // Remove active class from all buttons
        $('.search-mode-btn').removeClass('active').css({
            'background-color': '',
            'color': '#555'
        });
        
        // Add active class to clicked button
        $(this).addClass('active').css({
            'background-color': '#f0f0f0',
            'color': '#007ac3'
        });
        
        // Update search mode value
        const mode = $(this).attr('id') === 'fullTextSearchBtn' ? 'fullText' : 'aiChat';
        $('#searchMode').val(mode);
        
        // Update placeholder text based on the selected mode
        if (mode === 'fullText') {
            $('#textToSearch').attr('placeholder', 'Search');
        } else {
            $('#textToSearch').attr('placeholder', 'Ask AI a question...');
        }
    });

    // ...existing code...

    // Intercept the search form submission
    $('#searchForm').off('submit').on('submit', function(event) {
        console.log('searchForm submitted');
        
        // Get the current search mode
        const searchMode = $('#searchMode').val();
        
        // Capture the search term
        const searchTerm = $('#textToSearch').val();
        
        // Handle based on selected mode
        if (searchMode === 'fullText') {
            // Send the search term to the PHP file via AJAX for analytics
            $.ajax({
                type: 'POST',
                url: '/feedback/submit-search.php',
                data: { 
                    searchTerm: searchTerm,
                    searchMode: searchMode 
                },
                dataType: 'json',
                success: function(response) {
                    console.log('search term submitted');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error submitting search term:", textStatus, errorThrown);
                }
            });
            
            // Continue with default search form submission
            return true;
        } else {
            // Prevent the default form submission for AI chat
            event.preventDefault();
            
            // Handle AI chat functionality
            handleAIChatRequest(searchTerm);
        }
    });
    
    // Function to handle AI chat requests
    function handleAIChatRequest(query) {
        // Show a loading indicator
        const searchResultsContainer = $('.wh_search_results') || $('.wh_content_area');
        searchResultsContainer.html('<div class="ai-chat-loader">Consulting AI, please wait...</div>');
        
        // Send the query to your AI endpoint
        $.ajax({
            type: 'POST',
            url: '/ai-chat/query', // Replace with your actual AI endpoint
            data: { 
                query: query,
                context: window.location.pathname // Send current page context
            },
            dataType: 'json',
            success: function(response) {
                // Display AI response
                displayAIResponse(response, query);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("Error with AI chat:", textStatus, errorThrown);
                searchResultsContainer.html('<div class="error-message">Sorry, there was an error connecting to the AI service. Please try again later.</div>');
            }
        });
    }
    
    // Function to display AI chat response
    function displayAIResponse(response, originalQuery) {
        const searchResultsContainer = $('.wh_search_results') || $('.wh_content_area');
        
        // Create a chat-like UI for the response
        const chatUI = `
            <div class="ai-chat-container">
                <h2>AI Assistant Response</h2>
                <div class="chat-exchange">
                    <div class="user-query">
                        <strong>You asked:</strong>
                        <p>${originalQuery}</p>
                    </div>
                    <div class="ai-response">
                        <strong>AI response:</strong>
                        <div class="response-content">${response.answer}</div>
                    </div>
                </div>
                ${response.references ? `
                <div class="ai-references">
                    <h3>Related pages:</h3>
                    <ul>${response.references.map(ref => `<li><a href="${ref.url}">${ref.title}</a></li>`).join('')}</ul>
                </div>` : ''}
                <div class="ai-chat-footer">
                    <button class="btn btn-primary" id="newAiQuestion">Ask another question</button>
                    <button class="btn btn-secondary" id="switchToSearch">Switch to regular search</button>
                </div>
            </div>
        `;
        
        searchResultsContainer.html(chatUI);
        
        // Handle "Ask another question" button
        $('#newAiQuestion').click(function() {
            $('#textToSearch').focus().select();
        });
        
        // Handle "Switch to regular search" button
        $('#switchToSearch').click(function() {
            $('#fullTextSearchBtn').click();
            $('#searchForm').submit();
        });
    }
});
```

### Additional CSS for Search Control

You may want to create a new CSS file or add these styles to an existing one:

```css
/* AI Chat UI Styles */
.ai-chat-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.chat-exchange {
  margin-bottom: 20px;
}

.user-query, .ai-response {
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.user-query {
  background-color: #f0f7ff;
  border-left: 4px solid #007ac3;
}

.ai-response {
  background-color: #f9f9f9;
  border-left: 4px solid #85bc20;
}

.ai-references {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.ai-chat-loader {
  text-align: center;
  padding: 50px;
  font-size: 1.2em;
  color: #555;
}

.ai-chat-footer {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
```

### Implementation Considerations

1. **AI Endpoint**: You'll need to set up an actual AI endpoint to handle the chat requests. The code above uses a placeholder URL `/ai-chat/query`.

2. **Backend Integration**: The AI chat functionality would need a backend service that can:
   - Receive the user query
   - Process it through your AI service
   - Return a formatted response

3. **Response Format**: The AI service should return JSON with at least:
   - `answer`: The AI's response text
   - `references`: Optional array of relevant documentation pages

4. **Graceful Fallback**: If the AI service is unavailable, there should be an option to fall back to regular search.

5. **UI/UX Considerations**: The segmented control should be intuitive, making it clear which search mode is active.

Would you like me to elaborate on any specific aspect of this implementation?

---

_**User (2025-05-02 21:58:13Z)**_

I do not see the buttons in the page. How can I troubleshoot?

---

_**Agent**_

# Troubleshooting Missing Search Mode Buttons

To troubleshoot the missing search mode buttons, let's implement several checks and fixes:

## Step-by-Step Solution

1. Add debugging code to verify element creation and insertion
2. Check for missing Bootstrap Icons (bi) CSS
3. Add console logging to track when the buttons should be appearing
4. Fix potential timing issues with jQuery document ready handlers
5. Add more explicit styling to make the buttons visible

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Debug check for search form existence
console.log('Search form exists:', $('#searchForm').length > 0);
console.log('Search form div exists:', $('#searchForm div').length > 0);

// Create segmented control for search modes - with more visible styles
const searchModeControl = $(`
  <div class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" title="Full Text Search">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn" title="AI Chat">
      <span class="search-btn-text">Ask AI</span>
    </button>
  </div>
`);

// Debugging log
console.log('Created search mode control');

// Ensure Bootstrap Icons are loaded
if (!document.querySelector('link[href*="bootstrap-icons"]')) {
  console.warn('Bootstrap Icons CSS not detected. Adding it dynamically.');
  $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">');
}

// Insert the segmented control into the search form - with explicit log
$('#searchForm div').append(searchModeControl);
console.log('Appended search mode control. Element count after append:', $('#searchForm .search-mode-control').length);

// Add hidden input field to track the current search mode
$('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');

// Style the search mode control - with more noticeable styles
$('.search-mode-control').css({
  'display': 'inline-flex',
  'border-left': '1px solid #ccc',
  'margin-left': '5px',
  'height': '100%',
  'min-width': '120px',  // Ensure minimum width
  'visibility': 'visible'  // Force visibility
});

$('.search-mode-btn').css({
  'background': '#eaeaea',  // Light gray background
  'border': '1px solid #ccc',  // Add border
  'border-radius': '4px',  // Rounded corners
  'padding': '5px 10px',
  'margin': '0 2px',
  'cursor': 'pointer',
  'height': '100%',
  'color': '#333',
  'font-weight': 'bold',
  'min-width': '60px',  // Minimum width for button
  'text-align': 'center',
  'display': 'flex',
  'align-items': 'center',
  'justify-content': 'center'
});

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// Use setTimeout to ensure styles are applied after DOM updates
setTimeout(function() {
  console.log('Checking if search mode buttons are visible:');
  console.log('- Button count:', $('.search-mode-btn').length);
  console.log('- Button visibility:', $('.search-mode-btn').is(':visible'));
  console.log('- Button dimensions:', 
              'Width=' + $('.search-mode-btn').width() + 
              ', Height=' + $('.search-mode-btn').height());
}, 1000);

// move search form to header container
// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Ensure the search mode toggle handlers are executed at the right time
$(document).ready(function() {
    console.log("Document ready in header.js");
    
    // Check if buttons exist
    console.log('Search mode buttons found:', $('#fullTextSearchBtn, #aiChatBtn').length);
    
    // Force re-creation of the buttons if they don't exist
    if ($('#fullTextSearchBtn, #aiChatBtn').length === 0) {
        console.warn('Search mode buttons not found! Re-creating them...');
        
        // Try to re-create the buttons
        const searchModeControl = $(`
          <div class="search-mode-control">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" title="Full Text Search">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn" title="AI Chat">
              <span class="search-btn-text">Ask AI</span>
            </button>
          </div>
        `);
        
        // Try to insert again
        $('#searchForm div').append(searchModeControl);
        
        // Style them
        $('.search-mode-control').css({
          'display': 'inline-flex',
          'border-left': '1px solid #ccc',
          'margin-left': '5px',
          'height': '100%',
          'min-width': '120px'
        });
        
        $('.search-mode-btn').css({
          'background': '#eaeaea',
          'border': '1px solid #ccc',
          'border-radius': '4px',
          'padding': '5px 10px',
          'margin': '0 2px',
          'cursor': 'pointer',
          'height': '100%',
          'color': '#333',
          'font-weight': 'bold',
          'min-width': '60px',
          'text-align': 'center'
        });
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
    }
    
    // ...existing code for handle search mode toggle...
});

// Additional document ready handler for the search function - in case of timing issues
$(window).on('load', function() {
    console.log("Window loaded - last chance to find buttons");
    console.log('Search mode buttons found (window.load):', $('#fullTextSearchBtn, #aiChatBtn').length);
    
    // Reattach event handlers to be safe
    $('#fullTextSearchBtn, #aiChatBtn').off('click').on('click', function() {
        console.log('Button clicked:', $(this).attr('id'));
        // Remove active class from all buttons
        $('.search-mode-btn').removeClass('active').css({
            'background-color': '#eaeaea',
            'color': '#333'
        });
        
        // Add active class to clicked button
        $(this).addClass('active').css({
            'background-color': '#007ac3',
            'color': 'white'
        });
        
        // Update search mode value
        const mode = $(this).attr('id') === 'fullTextSearchBtn' ? 'fullText' : 'aiChat';
        $('#searchMode').val(mode);
        
        // Update placeholder text based on the selected mode
        if (mode === 'fullText') {
            $('#textToSearch').attr('placeholder', 'Search');
        } else {
            $('#textToSearch').attr('placeholder', 'Ask AI a question...');
        }
    });
    
    // ...existing code...
});
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\css\search-buttons.css

Let's also create a new CSS file to make the buttons more visible:

```css
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\css\search-buttons.css
/* Search mode buttons styling */
.search-mode-control {
  display: inline-flex !important;
  border-left: 1px solid #ccc;
  margin-left: 5px;
  height: 34px;
  min-width: 140px;
  z-index: 100;
  position: relative;
  visibility: visible;
}

.search-mode-btn {
  background: #eaeaea;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 0 2px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
  min-width: 70px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-mode-btn.active {
  background-color: #007ac3;
  color: white;
  border-color: #005999;
}

.search-mode-btn:hover {
  background-color: #d8d8d8;
}

.search-mode-btn.active:hover {
  background-color: #0069a9;
}

.search-btn-text {
  display: inline-block;
  margin: 0 4px;
}
```

## Additional Troubleshooting Steps

If the buttons still don't appear after these changes, here are additional troubleshooting steps you can take:

1. **Inspect the DOM**: Open your browser's developer tools (F12) and look at the DOM structure. Check if the buttons are being created but hidden by CSS.

2. **Check for JavaScript errors**: Look at the browser console for any JavaScript errors that might prevent the buttons from being created.

3. **Try adding the buttons directly to the HTML**: If the issue persists, you might need to modify the HTML template to include the buttons directly rather than adding them with JavaScript.

4. **Check CSS conflicts**: Make sure there's no CSS that might be hiding or affecting the visibility of the buttons.

5. **Delay the execution**: If there's a timing issue, try wrapping the button creation code in a setTimeout to delay execution.

6. **Verify jQuery version**: Make sure you're not experiencing jQuery compatibility issues.

7. **Test in different browsers**: Try different browsers to see if the issue is browser-specific.

8. **Check if the buttons are being removed**: Some other code might be removing the buttons after they're added.

If after implementing these changes and following the troubleshooting steps you still don't see the buttons, please let me know the results of your debugging (especially the console logs) so I can provide more targeted assistance.

---

_**User (2025-05-02 22:04:19Z)**_

this is the rendered html:
<div class="divSearch input-group"><input type="search" placeholder="Search" class="wh_search_textfield ui-autocomplete-input input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off"><button type="submit" class="wh_search_button" aria-label="Search"><span class="search_input_text">Search</span></button></div>

---

_**Agent**_

I see the issue now. The search button structure in the rendered HTML is different from what we expected. The buttons are being inserted into the search form's div, but they're not being properly positioned or displayed due to the HTML structure.

Let's make the necessary adjustments:

### [general.js](file://zusscgrcprodwebhelp.file.core.windows.net/webhelp/dev/resources/webhelp/js/general.js)

```javascript


---

_**User (2025-05-02 22:07:42Z)**_

did you finish?

---

_**Agent**_

I did finish the modifications for the two JavaScript files. Here's a summary of the changes I made:

1. In `general.js`, I added:
   - Debug logging for the search form structure
   - A hidden input field to track search mode
   - A search mode wrapper and buttons with text labels
   - Proper styling for the buttons
   - Logging to verify button existence and visibility

2. In `header.js`, I added:
   - Logic to check and recreate search mode buttons if they don't exist
   - Event delegation for button clicks to ensure the handlers work
   - Updated search form submission handling for both search modes
   - Added CSS styles directly to the head for better visibility and compatibility

The main approach is positioning the search mode buttons after the search input div and using CSS to make them clearly visible. The implementation uses both inline styles and a style tag injection to maximize compatibility.

Would you like me to make any adjustments to the implementation or is there something specific about the solution you'd like me to clarify?

---

_**User (2025-05-02 22:15:02Z)**_

ok, I'm seeintg it 4 times:
<form id="searchForm" method="get" role="search" action="search.html"><div class="divSearch input-group" style="margin-right: 10px;"><input type="search" placeholder="Search" class="wh_search_textfield ui-autocomplete-input input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off"><button type="submit" class="wh_search_button" aria-label="Search"><span class="search_input_text">Search</span></button></div><div class="search-mode-wrapper"><div class="search-mode-control" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden;">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Ask AI</span>
    </button>
  </div></div><div class="search-mode-wrapper divSearch input-group" style="display: flex; align-items: center; margin-left: 10px; height: 34px; margin-right: 10px;"><div class="search-mode-control divSearch input-group" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden; margin-right: 10px;">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;">
              <span class="search-btn-text">Ask AI</span>
            </button>
          </div><div class="search-mode-wrapper" style="display: flex; align-items: center; margin-left: 10px; height: 34px;"><div class="search-mode-control" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden;">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Ask AI</span>
    </button>
  </div></div></div><div class="search-mode-wrapper"><div class="search-mode-control" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden;">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;">
      <span class="search-btn-text">Ask AI</span>
    </button>
  </div></div><button type="button" class="btn btn-secondary" id="moreButton" aria-label="More options" style="position: absolute; top: 20px; right: 20px; font-size: x-large; color: rgb(255, 255, 255); background-color: rgb(133, 188, 32); border: none;"><i class="bi bi-three-dots-vertical"></i></button><input type="hidden" id="searchMode" name="searchMode" value="fullText"></form></div><div class="wh_top_menu_and_indexterms_link collapse navbar-collapse" id="wh_top_menu_and_indexterms_link">
                <!-- <form id="searchForm" method="get" role="search" action="search.html" display="inline-flex">
    <div>
        <input type="search" placeholder="Search " class="wh_search_textfield ui-autocomplete-input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off">
    </div>
</form>

---

_**Agent**_

It looks like we have multiple instances of the search mode buttons being created, which is causing duplication in the DOM. Let's fix this by adding checks to prevent multiple additions and by cleaning up our code.

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Debug check for search form existence
console.log('Search form structure:', {
  form: $('#searchForm').length,
  div: $('#searchForm div').length,
  input: $('#textToSearch').length,
  button: $('#searchForm button').length
});

// Check if our search mode controls already exist and remove duplicates
if ($('.search-mode-wrapper').length > 0) {
  // Keep only the first instance and remove others
  $('.search-mode-wrapper:gt(0)').remove();
  console.log('Removed duplicate search mode wrappers');
} else {
  console.log('No search mode wrappers found, creating now');
  
  // Add hidden input field to track the current search mode (if not already present)
  if ($('#searchMode').length === 0) {
    $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
  }
  
  // Create the search-mode-wrapper to contain our buttons
  const searchModeWrapper = $('<div class="search-mode-wrapper"></div>');
  
  // Create segmented control for search modes
  const searchModeControl = $(`
    <div class="search-mode-control">
      <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
        <span class="search-btn-text">Search</span>
      </button>
      <button type="button" class="search-mode-btn" id="aiChatBtn">
        <span class="search-btn-text">Ask AI</span>
      </button>
    </div>
  `);
  
  // Insert the wrapper after the search form's div
  searchModeWrapper.append(searchModeControl);
  $('#searchForm div:first').after(searchModeWrapper);
  
  // Style the wrapper and control
  searchModeWrapper.css({
    'display': 'flex',
    'align-items': 'center',
    'margin-left': '10px',
    'height': '34px'
  });
  
  $('.search-mode-control').css({
    'display': 'flex',
    'border': '1px solid #ccc',
    'border-radius': '4px',
    'overflow': 'hidden'
  });
  
  $('.search-mode-btn').css({
    'background': '#eaeaea',
    'border': 'none',
    'border-right': '1px solid #ccc',
    'padding': '6px 12px',
    'cursor': 'pointer',
    'height': '100%',
    'color': '#333',
    'font-weight': 'normal',
    'min-width': '70px',
    'text-align': 'center'
  });
  
  // Remove the right border from the last button
  $('.search-mode-btn:last-child').css('border-right', 'none');
  
  $('.search-mode-btn.active').css({
    'background-color': '#007ac3',
    'color': 'white'
  });
}

// Ensure Bootstrap Icons are loaded
if (!document.querySelector('link[href*="bootstrap-icons"]')) {
  console.warn('Bootstrap Icons CSS not detected. Adding it dynamically.');
  $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">');
}

// Add some spacing for the search container
$('.wh_search_input').css({
  'display': 'flex',
  'flex-direction': 'row',
  'align-items': 'center'
});

// move search form to header container
$('#searchForm').appendTo('.wh_header_flex_container');

$('#wh_top_menu_and_indexterms_link').insertAfter('.wh_header_flex_container');

// Styles
$('.divSearch').css({
  'display': 'inline-block !important',
  'margin-right': '10px'
});

$('.wh-tooltip').remove();

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// $('#searchForm div').addClass('divSearch');

$(document).ready(function() {
    // Remove any existing submit handlers from the search form
    $('#searchForm').off('submit');

    //#region More button and menu
    // ...existing code...

    // Append the button to the right side of the header
    $('#searchForm').append(moreButton); // Append button to the flex container
    //#endregion

    // Check for duplicate search mode wrappers and clean up
    if ($('.search-mode-wrapper').length > 1) {
        console.warn(`Found ${$('.search-mode-wrapper').length} search mode wrappers. Cleaning up duplicates.`);
        $('.search-mode-wrapper:gt(0)').remove();
    }
    
    // Only create search mode buttons if none exist
    if ($('.search-mode-wrapper').length === 0) {
        console.log('No search mode wrapper found in header.js, creating one');
        
        // Create wrapper and buttons
        const searchModeWrapper = $('<div class="search-mode-wrapper"></div>');
        const searchModeControl = $(`
          <div class="search-mode-control">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn">
              <span class="search-btn-text">Ask AI</span>
            </button>
          </div>
        `);
        
        // Insert the wrapper after the search form's div
        searchModeWrapper.append(searchModeControl);
        $('#searchForm div:first').after(searchModeWrapper);
        
        // Apply styles
        searchModeWrapper.css({
          'display': 'flex',
          'align-items': 'center',
          'margin-left': '10px',
          'height': '34px'
        });
        
        $('.search-mode-control').css({
          'display': 'flex',
          'border': '1px solid #ccc',
          'border-radius': '4px',
          'overflow': 'hidden'
        });
        
        $('.search-mode-btn').css({
          'background': '#eaeaea',
          'border': 'none',
          'border-right': '1px solid #ccc',
          'padding': '6px 12px',
          'cursor': 'pointer',
          'height': '100%',
          'color': '#333',
          'font-weight': 'normal',
          'min-width': '70px',
          'text-align': 'center'
        });
        
        $('.search-mode-btn:last-child').css('border-right', 'none');
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
        
        // Add hidden input field to track the current search mode (if not already present)
        if ($('#searchMode').length === 0) {
            $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
        }
    } else {
        console.log('Search mode wrapper already exists');
    }
    
    // Handle search mode toggle with event delegation - only set up once
    $(document).off('click', '.search-mode-btn').on('click', '.search-mode-btn', function() {
        console.log('Search mode button clicked:', $(this).attr('id'));
        
        // Remove active class from all buttons
        $('.search-mode-btn').removeClass('active').css({
            'background-color': '#eaeaea',
            'color': '#333'
        });
        
        // Add active class to clicked button
        $(this).addClass('active').css({
            'background-color': '#007ac3',
            'color': 'white'
        });
        
        // Update search mode value
        const mode = $(this).attr('id') === 'fullTextSearchBtn' ? 'fullText' : 'aiChat';
        $('#searchMode').val(mode);
        
        // Update placeholder text based on the selected mode
        if (mode === 'fullText') {
            $('#textToSearch').attr('placeholder', 'Search');
        } else {
            $('#textToSearch').attr('placeholder', 'Ask AI a question...');
        }
    });

    // ...existing code...
});

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-mode-wrapper {
                    display: flex !important;
                    align-items: center;
                    margin-left: 10px;
                    height: 34px;
                }
                
                .search-mode-control {
                    display: flex !important;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    overflow: hidden;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 6px 12px;
                    cursor: pointer;
                    color: #333;
                    font-weight: normal;
                    min-width: 70px;
                    text-align: center;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                .search-mode-btn:hover {
                    background-color: #d8d8d8;
                }
                
                .search-mode-btn.active:hover {
                    background-color: #0069a9;
                }
                
                .wh_search_input {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                }
                
                /* Fix search form layout */
                #searchForm {
                    display: flex;
                    align-items: center;
                }
            </style>
        `);
    }
    
    // Clean up duplicates one more time
    if ($('.search-mode-wrapper').length > 1) {
        console.warn('Cleaning up duplicate search mode wrappers on window load');
        $('.search-mode-wrapper:gt(0)').remove();
    }
    
    console.log('Search mode buttons found (window.load):', $('.search-mode-btn').length);
});
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\afterbody.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\afterbody.js
//afterbody.js
// 
// TODO:
// - 
// 

// $(window).on("load", function () {
// 		//Get the browser and version. Alert if unsupported.
// 		$.getScript("/resources/webhelp-includes/modules/browser-version.js"); 
// });

$(document).ready(function() {

  // Load variables.js first
  $.getScript('/resources/webhelp/js/variables.js')
    .done(function() {
      // Now load the other scripts after variables.js is loaded
      return $.when(
        $.getScript('/resources/webhelp/js/toolbar-buttons.min.js'),
        $.getScript('/resources/webhelp/js/dynamic-profiling.js'),
        $.getScript('/resources/webhelp/js/changelog.min.js'),
        // $.getScript('/resources/webhelp/js/header.min.js'),
        $.getScript('/resources/webhelp/js/header.js')
      ).then(function() {
        // After header.js is loaded, load remaining scripts
        return $.when(
          $.getScript('/resources/webhelp/js/documentation-links.min.js'),
          $.getScript('/resources/webhelp/js/sts.min.js'),
          $.getScript('/resources/webhelp/js/permission-mapping.min.js'),
          $.getScript('/resources/webhelp/js/server-maintenance.min.js'),
          // $.getScript('/resources/webhelp/js/general.min.js'),
          $.getScript('/resources/webhelp/js/general.js'),
          $.getScript('/resources/webhelp/js/search.min.js'),
          $.getScript('/resources/webhelp/js/footer.min.js'),
          $.getScript('/resources/webhelp/js/remove-from-dom.js')
        );
      });
    })
    .done(function() {
      // All scripts have been loaded and executed
      // console.log("All scripts loaded successfully.");
      
      // Clean up duplicate search mode wrappers after all scripts are loaded
      if ($('.search-mode-wrapper').length > 1) {
        console.warn('Final cleanup of duplicate search mode wrappers');
        $('.search-mode-wrapper:gt(0)').remove();
      }
    })
    .fail(function(jqxhr, settings, exception) {
        console.error("Failed to load scripts: ", exception);
    });

  // #region FAVICON
  // ...existing code...
```

These changes will:

1. Add checks to prevent duplicate creation of search mode wrappers
2. Remove duplicate wrappers if they're created
3. Ensure event handlers are only attached once
4. Fix script loading order in afterbody.js to ensure proper sequencing
5. Add final cleanup after all scripts are loaded

This should resolve the issue of multiple search mode buttons appearing in the DOM.

---

_**User (2025-05-02 22:19:32Z)**_

that places the buttons in a new div:
<form id="searchForm" method="get" role="search" action="search.html"><div class="divSearch input-group" style="margin-right: 10px;"><input type="search" placeholder="Search" class="wh_search_textfield ui-autocomplete-input input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off"><button type="submit" class="wh_search_button" aria-label="Search"><span class="search_input_text">Search</span></button></div><div class="search-mode-wrapper divSearch input-group" style="display: flex; align-items: center; margin-left: 10px; height: 34px; margin-right: 10px;"><div class="search-mode-control divSearch input-group" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden; margin-right: 10px;">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;">
              <span class="search-btn-text">Ask AI</span>
            </button>
          </div></div><button type="button" class="btn btn-secondary" id="moreButton" aria-label="More options" style="position: absolute; top: 20px; right: 20px; font-size: x-large; color: rgb(255, 255, 255); background-color: rgb(133, 188, 32); border: none;"><i class="bi bi-three-dots-vertical"></i></button><input type="hidden" id="searchMode" name="searchMode" value="fullText"></form>

          I need te buttons to appear in this div:

_**User (2025-05-02 22:20:33Z)**_

<form id="searchForm" method="get" role="search" action="search.html"><div class="divSearch input-group" style="margin-right: 10px;"><input type="search" placeholder="Search" class="wh_search_textfield ui-autocomplete-input input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off"><button type="submit" class="wh_search_button" aria-label="Search"><span class="search_input_text">Search</span></button></div><div class="search-mode-wrapper divSearch input-group" style="display: flex; align-items: center; margin-left: 10px; height: 34px; margin-right: 10px;"><div class="search-mode-control divSearch input-group" style="display: flex; border: 1px solid rgb(204, 204, 204); border-radius: 4px; overflow: hidden; margin-right: 10px;"> <button type="button" class="search-mode-btn active" id="fullTextSearchBtn" style="background: rgb(0, 122, 195); border-top: none; border-right: 1px solid rgb(204, 204, 204); border-bottom: none; border-left: none; border-image: initial; padding: 6px 12px; cursor: pointer; height: 100%; color: white; font-weight: normal; min-width: 70px; text-align: center;"> <span class="search-btn-text">Search</span> </button> <button type="button" class="search-mode-btn" id="aiChatBtn" style="background: rgb(234, 234, 234); border: none; padding: 6px 12px; cursor: pointer; height: 100%; color: rgb(51, 51, 51); font-weight: normal; min-width: 70px; text-align: center;"> <span class="search-btn-text">Ask AI</span> </button> </div></div><button type="button" class="btn btn-secondary" id="moreButton" aria-label="More options" style="position: absolute; top: 20px; right: 20px; font-size: x-large; color: rgb(255, 255, 255); background-color: rgb(133, 188, 32); border: none;"><i class="bi bi-three-dots-vertical"></i></button><input type="hidden" id="searchMode" name="searchMode" value="fullText"></form>

I need te buttons to appear in this div:
<div class="divSearch input-group" style="margin-right: 10px;"><input type="search" placeholder="Search" class="wh_search_textfield ui-autocomplete-input input" id="textToSearch" name="searchQuery" aria-label="Search query" required="required" autocomplete="off"><button type="submit" class="wh_search_button" aria-label="Search"><span class="search_input_text">Search</span></button></div>


---

_**Agent**_

Let me update the code to place the search mode buttons directly inside the search input div rather than after it. Here's how we'll modify both files:

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Debug check for search form existence
console.log('Search form structure:', {
  form: $('#searchForm').length,
  div: $('#searchForm div').length,
  input: $('#textToSearch').length,
  button: $('#searchForm button').length
});

// Remove any existing search mode buttons
$('.search-mode-wrapper').remove();

// Add hidden input field to track the current search mode (if not already present)
if ($('#searchMode').length === 0) {
  $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
}

// Create segmented control for search modes
const searchModeControl = $(`
  <span class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn">
      <span class="search-btn-text">Ask AI</span>
    </button>
  </span>
`);

// Insert control directly inside the divSearch input-group
$('#searchForm div.divSearch').append(searchModeControl);

console.log('Added search mode control inside divSearch');

// Style the control and buttons
$('.search-mode-control').css({
  'display': 'inline-flex',
  'border-left': '1px solid #ccc',
  'margin-left': '5px',
  'height': '100%'
});

$('.search-mode-btn').css({
  'background': '#eaeaea',
  'border': 'none',
  'border-right': '1px solid #ccc',
  'padding': '6px 12px',
  'cursor': 'pointer',
  'height': '100%',
  'color': '#333',
  'font-weight': 'normal',
  'min-width': '70px',
  'text-align': 'center'
});

// Remove the right border from the last button
$('.search-mode-btn:last-child').css('border-right', 'none');

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// Ensure Bootstrap Icons are loaded
if (!document.querySelector('link[href*="bootstrap-icons"]')) {
  console.warn('Bootstrap Icons CSS not detected. Adding it dynamically.');
  $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">');
}

// Move search form to header container
$('#searchForm').appendTo('.wh_header_flex_container');

$('#wh_top_menu_and_indexterms_link').insertAfter('.wh_header_flex_container');

// Style the search form input group
$('.divSearch').css({
  'display': 'flex !important',
  'align-items': 'center',
  'margin-right': '10px'
});

// Remove any tooltips
$('.wh-tooltip').remove();

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

$(document).ready(function() {
    // Remove any existing submit handlers from the search form
    $('#searchForm').off('submit');

    //#region More button and menu
    // ...existing code...

    // Append the button to the right side of the header
    $('#searchForm').append(moreButton); // Append button to the flex container
    //#endregion

    // Check if search mode controls exist, if not create them
    if ($('.search-mode-control').length === 0) {
        console.log('No search mode controls found in header.js, creating them');
        
        // Create segmented control for search modes
        const searchModeControl = $(`
          <span class="search-mode-control">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn">
              <span class="search-btn-text">Ask AI</span>
            </button>
          </span>
        `);
        
        // Insert control directly inside the divSearch input-group
        $('#searchForm div.divSearch').append(searchModeControl);
        
        // Style the control
        $('.search-mode-control').css({
          'display': 'inline-flex',
          'border-left': '1px solid #ccc',
          'margin-left': '5px',
          'height': '100%'
        });
        
        $('.search-mode-btn').css({
          'background': '#eaeaea',
          'border': 'none',
          'border-right': '1px solid #ccc',
          'padding': '6px 12px',
          'cursor': 'pointer',
          'height': '100%',
          'color': '#333',
          'font-weight': 'normal',
          'min-width': '70px',
          'text-align': 'center'
        });
        
        $('.search-mode-btn:last-child').css('border-right', 'none');
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
        
        // Add hidden input field to track the current search mode (if not already present)
        if ($('#searchMode').length === 0) {
            $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
        }
    }
    
    // Handle search mode toggle with event delegation - only set up once
    $(document).off('click', '.search-mode-btn').on('click', '.search-mode-btn', function() {
        console.log('Search mode button clicked:', $(this).attr('id'));
        
        // Remove active class from all buttons
        $('.search-mode-btn').removeClass('active').css({
            'background-color': '#eaeaea',
            'color': '#333'
        });
        
        // Add active class to clicked button
        $(this).addClass('active').css({
            'background-color': '#007ac3',
            'color': 'white'
        });
        
        // Update search mode value
        const mode = $(this).attr('id') === 'fullTextSearchBtn' ? 'fullText' : 'aiChat';
        $('#searchMode').val(mode);
        
        // Update placeholder text based on the selected mode
        if (mode === 'fullText') {
            $('#textToSearch').attr('placeholder', 'Search');
        } else {
            $('#textToSearch').attr('placeholder', 'Ask AI a question...');
        }
    });

    // ...existing code...

    // Intercept the search form submission
    $('#searchForm').off('submit').on('submit', function(event) {
        console.log('searchForm submitted');
        
        // Get the current search mode
        const searchMode = $('#searchMode').val();
        
        // Capture the search term
        const searchTerm = $('#textToSearch').val();
        
        // Handle based on selected mode
        if (searchMode === 'fullText' || !searchMode) {
            // Send the search term to the PHP file via AJAX for analytics
            $.ajax({
                type: 'POST',
                url: '/feedback/submit-search.php',
                data: { 
                    searchTerm: searchTerm,
                    searchMode: 'fullText' 
                },
                dataType: 'json',
                success: function(response) {
                    console.log('search term submitted');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error submitting search term:", textStatus, errorThrown);
                }
            });
            
            // Continue with default search form submission
            return true;
        } else {
            // Prevent the default form submission for AI chat
            event.preventDefault();
            
            // Handle AI chat functionality
            handleAIChatRequest(searchTerm);
        }
    });
    
    // ...existing code...
});

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-mode-control {
                    display: inline-flex !important;
                    border-left: 1px solid #ccc;
                    margin-left: 5px;
                    height: 100%;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 6px 12px;
                    cursor: pointer;
                    color: #333;
                    font-weight: normal;
                    min-width: 70px;
                    text-align: center;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                .search-mode-btn:hover {
                    background-color: #d8d8d8;
                }
                
                .search-mode-btn.active:hover {
                    background-color: #0069a9;
                }
                
                /* Fix search form layout */
                #searchForm {
                    display: flex;
                    align-items: center;
                }
                
                .divSearch.input-group {
                    display: flex !important;
                    align-items: center;
                }
            </style>
        `);
    }
    
    // Remove any duplicate search mode controls
    if ($('.search-mode-control').length > 1) {
        console.warn('Cleaning up duplicate search mode controls');
        $('.search-mode-control:gt(0)').remove();
    }
    
    console.log('Search mode buttons found (window.load):', $('.search-mode-btn').length);
});
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\afterbody.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\afterbody.js
// ...existing code...

$(document).ready(function() {

  // Load variables.js first
  $.getScript('/resources/webhelp/js/variables.js')
    .done(function() {
      // Load header.js first to establish the DOM structure
      return $.getScript('/resources/webhelp/js/header.js');
    })
    .then(function() {
      // Once header.js is loaded, then load general.js next
      return $.getScript('/resources/webhelp/js/general.js');
    })
    .then(function() {
      // After general.js is loaded, load the remaining scripts
      return $.when(
        $.getScript('/resources/webhelp/js/toolbar-buttons.min.js'),
        $.getScript('/resources/webhelp/js/dynamic-profiling.js'),
        $.getScript('/resources/webhelp/js/changelog.min.js'),
        $.getScript('/resources/webhelp/js/documentation-links.min.js'),
        $.getScript('/resources/webhelp/js/sts.min.js'),
        $.getScript('/resources/webhelp/js/permission-mapping.min.js'),
        $.getScript('/resources/webhelp/js/server-maintenance.min.js'),
        $.getScript('/resources/webhelp/js/search.min.js'),
        $.getScript('/resources/webhelp/js/footer.min.js'),
        $.getScript('/resources/webhelp/js/remove-from-dom.js')
      );
    })
    .done(function() {
      // All scripts have been loaded and executed
      console.log("All scripts loaded successfully.");
      
      // Final cleanup - remove any duplicate search controls
      if ($('.search-mode-control').length > 1) {
        $('.search-mode-control:gt(0)').remove();
        console.log('Final cleanup - removed duplicate search controls');
      }
    })
    .fail(function(jqxhr, settings, exception) {
        console.error("Failed to load scripts: ", exception);
    });

  // ...existing code...
```

The key changes I've made:

1. Changed the approach to insert the search mode controls directly inside the search input div rather than after it
2. Changed from using a wrapper div to using a span for the search mode control
3. Simplified the structure to avoid nesting issues
4. Modified the styling to work better within the existing divSearch element
5. Updated the script loading order in afterbody.js to ensure the DOM structure is built properly before modifications
6. Added more cleanup code to remove duplicates

These changes should place the buttons directly inside the search input div as requested.

---

_**User (2025-05-02 22:24:36Z)**_

can we place those segment buttons within the textToSearch input and right-aligned?

---

_**Agent**_

To place the segmented search mode buttons within the search input and right-aligned, we'll need to modify both files. This is a bit more complex since we'll need to adjust the positioning and styling.

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Debug check for search form existence
console.log('Search form structure:', {
  form: $('#searchForm').length,
  div: $('#searchForm div').length,
  input: $('#textToSearch').length,
  button: $('#searchForm button').length
});

// Remove any existing search mode buttons
$('.search-mode-control').remove();

// Add hidden input field to track the current search mode (if not already present)
if ($('#searchMode').length === 0) {
  $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
}

// Modify the textToSearch input to add padding for our buttons
$('#textToSearch').css({
  'padding-right': '150px' // Make room for the segmented buttons
});

// Create a wrapper for the search box to allow absolute positioning
$('#textToSearch').wrap('<div class="search-input-wrapper"></div>');
$('.search-input-wrapper').css({
  'position': 'relative',
  'display': 'inline-block',
  'width': '100%'
});

// Create segmented control for search modes
const searchModeControl = $(`
  <span class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn">
      <span class="search-btn-text">AI</span>
    </button>
  </span>
`);

// Insert control inside the search input wrapper
$('.search-input-wrapper').append(searchModeControl);

console.log('Added search mode control inside search input');

// Style the control and buttons for in-input positioning
$('.search-mode-control').css({
  'position': 'absolute',
  'display': 'inline-flex',
  'right': '5px', 
  'top': '50%',
  'transform': 'translateY(-50%)',
  'height': 'calc(100% - 10px)',
  'z-index': '10',
  'background-color': 'white',
  'border-radius': '4px',
  'overflow': 'hidden',
  'border': '1px solid #ccc'
});

$('.search-mode-btn').css({
  'background': '#eaeaea',
  'border': 'none',
  'border-right': '1px solid #ccc',
  'padding': '2px 8px',
  'cursor': 'pointer',
  'height': '100%',
  'color': '#333',
  'font-weight': 'normal',
  'min-width': '50px',
  'font-size': '12px',
  'text-align': 'center'
});

// Remove the right border from the last button
$('.search-mode-btn:last-child').css('border-right', 'none');

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// Ensure Bootstrap Icons are loaded
if (!document.querySelector('link[href*="bootstrap-icons"]')) {
  console.warn('Bootstrap Icons CSS not detected. Adding it dynamically.');
  $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">');
}

// Move search form to header container
$('#searchForm').appendTo('.wh_header_flex_container');

$('#wh_top_menu_and_indexterms_link').insertAfter('.wh_header_flex_container');

// Style the search form input group
$('.divSearch').css({
  'display': 'flex !important',
  'align-items': 'center',
  'margin-right': '10px'
});

// Remove any tooltips
$('.wh-tooltip').remove();

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

$(document).ready(function() {
    // Remove any existing submit handlers from the search form
    $('#searchForm').off('submit');

    //#region More button and menu
    // ...existing code...
    
    // Append the button to the right side of the header
    $('#searchForm').append(moreButton); // Append button to the flex container
    //#endregion

    // Check if search mode controls exist, if not create them
    if ($('.search-mode-control').length === 0) {
        console.log('No search mode controls found in header.js, creating them');
        
        // Modify the textToSearch input to add padding for our buttons
        $('#textToSearch').css({
          'padding-right': '150px' // Make room for the segmented buttons
        });

        // Create a wrapper for the search box to allow absolute positioning
        if (!$('#textToSearch').parent().hasClass('search-input-wrapper')) {
            $('#textToSearch').wrap('<div class="search-input-wrapper"></div>');
        }
        
        $('.search-input-wrapper').css({
          'position': 'relative',
          'display': 'inline-block',
          'width': '100%'
        });
        
        // Create segmented control for search modes
        const searchModeControl = $(`
          <span class="search-mode-control">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn">
              <span class="search-btn-text">AI</span>
            </button>
          </span>
        `);
        
        // Insert control inside the search input wrapper
        $('.search-input-wrapper').append(searchModeControl);
        
        // Style the control for in-input positioning
        $('.search-mode-control').css({
          'position': 'absolute',
          'display': 'inline-flex',
          'right': '5px', 
          'top': '50%',
          'transform': 'translateY(-50%)',
          'height': 'calc(100% - 10px)',
          'z-index': '10',
          'background-color': 'white',
          'border-radius': '4px',
          'overflow': 'hidden',
          'border': '1px solid #ccc'
        });
        
        $('.search-mode-btn').css({
          'background': '#eaeaea',
          'border': 'none',
          'border-right': '1px solid #ccc',
          'padding': '2px 8px',
          'cursor': 'pointer',
          'height': '100%',
          'color': '#333',
          'font-weight': 'normal',
          'min-width': '50px',
          'font-size': '12px',
          'text-align': 'center'
        });
        
        $('.search-mode-btn:last-child').css('border-right', 'none');
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
        
        // Add hidden input field to track the current search mode (if not already present)
        if ($('#searchMode').length === 0) {
            $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
        }
    }
    
    // Handle search mode toggle with event delegation - only set up once
    $(document).off('click', '.search-mode-btn').on('click', '.search-mode-btn', function() {
        console.log('Search mode button clicked:', $(this).attr('id'));
        
        // Remove active class from all buttons
        $('.search-mode-btn').removeClass('active').css({
            'background-color': '#eaeaea',
            'color': '#333'
        });
        
        // Add active class to clicked button
        $(this).addClass('active').css({
            'background-color': '#007ac3',
            'color': 'white'
        });
        
        // Update search mode value
        const mode = $(this).attr('id') === 'fullTextSearchBtn' ? 'fullText' : 'aiChat';
        $('#searchMode').val(mode);
        
        // Update placeholder text based on the selected mode
        if (mode === 'fullText') {
            $('#textToSearch').attr('placeholder', 'Search');
        } else {
            $('#textToSearch').attr('placeholder', 'Ask AI a question...');
        }
    });

    // ...existing code...
});

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-input-wrapper {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }
                
                .search-mode-control {
                    position: absolute;
                    display: inline-flex;
                    right: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    height: calc(100% - 10px);
                    z-index: 10;
                    background-color: white;
                    border-radius: 4px;
                    overflow: hidden;
                    border: 1px solid #ccc;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 2px 8px;
                    cursor: pointer;
                    height: 100%;
                    color: #333;
                    font-weight: normal;
                    min-width: 50px;
                    font-size: 12px;
                    text-align: center;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                .search-mode-btn:hover {
                    background-color: #d8d8d8;
                }
                
                .search-mode-btn.active:hover {
                    background-color: #0069a9;
                }
                
                /* Fix search form layout */
                #searchForm {
                    display: flex;
                    align-items: center;
                }
                
                .divSearch.input-group {
                    display: flex !important;
                    align-items: center;
                }
                
                /* Add padding to make room for the buttons */
                #textToSearch {
                    padding-right: 150px;
                }
            </style>
        `);
    }
    
    // Remove any duplicate search mode controls
    if ($('.search-mode-control').length > 1) {
        console.warn('Cleaning up duplicate search mode controls');
        $('.search-mode-control:gt(0)').remove();
    }
    
    console.log('Search mode buttons found (window.load):', $('.search-mode-btn').length);
});
```

This solution:

1. Wraps the search input in a relative-positioned wrapper to act as a positioning context
2. Places the segmented control as an absolutely positioned element inside the input
3. Right-aligns the buttons within the input by setting `right: 5px`
4. Adds padding to the right side of the input to make room for the buttons
5. Makes the buttons more compact to fit inside the input
6. Adds CSS to ensure the buttons stay visible and properly styled
7. Adds z-index to ensure the buttons appear above the input

With this implementation, the buttons will appear inside the input field at the right side, providing a more integrated appearance.

---

_**User (2025-05-02 22:28:22Z)**_

great. now let's make sure there is no space on the top or bottoms of the buttons

---

_**Agent**_

Let's adjust the styling of the buttons to ensure there's no space on the top or bottom. I'll update both files to improve the button alignment.

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
$('#searchForm div').addClass('divSearch');
$('#searchForm div').addClass('input-group');
$('#textToSearch').addClass('input');
$('#textToSearch').attr('placeholder', 'Search');

// Debug check for search form existence
// ...existing code...

// Remove any existing search mode buttons
$('.search-mode-control').remove();

// Add hidden input field to track the current search mode (if not already present)
if ($('#searchMode').length === 0) {
  $('#searchForm').append('<input type="hidden" id="searchMode" name="searchMode" value="fullText">');
}

// Modify the textToSearch input to add padding for our buttons
$('#textToSearch').css({
  'padding-right': '120px' // Adjusted padding to prevent overflow
});

// Create a wrapper for the search box to allow absolute positioning
$('#textToSearch').wrap('<div class="search-input-wrapper"></div>');
$('.search-input-wrapper').css({
  'position': 'relative',
  'display': 'inline-block',
  'width': '100%'
});

// Create segmented control for search modes
const searchModeControl = $(`
  <span class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn">
      <span class="search-btn-text">AI</span>
    </button>
  </span>
`);

// Insert control inside the search input wrapper
$('.search-input-wrapper').append(searchModeControl);

// Style the control and buttons for in-input positioning with improved alignment
$('.search-mode-control').css({
  'position': 'absolute',
  'display': 'inline-flex',
  'right': '5px', 
  'top': '50%',
  'transform': 'translateY(-50%)',
  'height': '80%', // Slightly reduced height for better fit
  'z-index': '10',
  'background-color': 'white',
  'border-radius': '3px',
  'overflow': 'hidden',
  'border': '1px solid #ccc',
  'box-sizing': 'border-box',
  'margin': '0', // Remove any margin
  'padding': '0' // Remove any padding
});

$('.search-mode-btn').css({
  'background': '#eaeaea',
  'border': 'none',
  'border-right': '1px solid #ccc',
  'padding': '0 8px', // Removed vertical padding
  'margin': '0', // Remove any margin
  'cursor': 'pointer',
  'height': '100%',
  'color': '#333',
  'font-weight': 'normal',
  'min-width': '50px',
  'font-size': '12px',
  'text-align': 'center',
  'display': 'flex',
  'align-items': 'center',
  'justify-content': 'center',
  'box-sizing': 'border-box'
});

// Remove the right border from the last button
$('.search-mode-btn:last-child').css('border-right', 'none');

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// Ensure the button text is centered and doesn't have extra space
$('.search-btn-text').css({
  'display': 'inline-block',
  'line-height': '1',
  'padding': '0',
  'margin': '0'
});

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

$(document).ready(function() {
    // ...existing code...

    // Check if search mode controls exist, if not create them
    if ($('.search-mode-control').length === 0) {
        console.log('No search mode controls found in header.js, creating them');
        
        // Modify the textToSearch input to add padding for our buttons
        $('#textToSearch').css({
          'padding-right': '120px' // Adjusted padding to prevent overflow
        });

        // Create a wrapper for the search box to allow absolute positioning
        if (!$('#textToSearch').parent().hasClass('search-input-wrapper')) {
            $('#textToSearch').wrap('<div class="search-input-wrapper"></div>');
        }
        
        $('.search-input-wrapper').css({
          'position': 'relative',
          'display': 'inline-block',
          'width': '100%'
        });
        
        // Create segmented control for search modes
        const searchModeControl = $(`
          <span class="search-mode-control">
            <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
              <span class="search-btn-text">Search</span>
            </button>
            <button type="button" class="search-mode-btn" id="aiChatBtn">
              <span class="search-btn-text">AI</span>
            </button>
          </span>
        `);
        
        // Insert control inside the search input wrapper
        $('.search-input-wrapper').append(searchModeControl);
        
        // Style the control for in-input positioning with improved alignment
        $('.search-mode-control').css({
          'position': 'absolute',
          'display': 'inline-flex',
          'right': '5px', 
          'top': '50%',
          'transform': 'translateY(-50%)',
          'height': '80%', // Slightly reduced height for better fit
          'z-index': '10',
          'background-color': 'white',
          'border-radius': '3px',
          'overflow': 'hidden',
          'border': '1px solid #ccc',
          'box-sizing': 'border-box',
          'margin': '0', // Remove any margin
          'padding': '0' // Remove any padding
        });
        
        $('.search-mode-btn').css({
          'background': '#eaeaea',
          'border': 'none',
          'border-right': '1px solid #ccc',
          'padding': '0 8px', // Removed vertical padding
          'margin': '0', // Remove any margin
          'cursor': 'pointer',
          'height': '100%',
          'color': '#333',
          'font-weight': 'normal',
          'min-width': '50px',
          'font-size': '12px',
          'text-align': 'center',
          'display': 'flex',
          'align-items': 'center',
          'justify-content': 'center',
          'box-sizing': 'border-box'
        });
        
        $('.search-mode-btn:last-child').css('border-right', 'none');
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
        
        // Ensure the button text is centered and doesn't have extra space
        $('.search-btn-text').css({
          'display': 'inline-block',
          'line-height': '1',
          'padding': '0',
          'margin': '0'
        });
        
        // ...existing code...
    }
    
    // ...existing code...
});

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-input-wrapper {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }
                
                .search-mode-control {
                    position: absolute;
                    display: inline-flex;
                    right: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 80%;
                    z-index: 10;
                    background-color: white;
                    border-radius: 3px;
                    overflow: hidden;
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 0 8px;
                    margin: 0;
                    cursor: pointer;
                    height: 100%;
                    color: #333;
                    font-weight: normal;
                    min-width: 50px;
                    font-size: 12px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                .search-mode-btn:hover {
                    background-color: #d8d8d8;
                }
                
                .search-mode-btn.active:hover {
                    background-color: #0069a9;
                }
                
                .search-btn-text {
                    display: inline-block;
                    line-height: 1;
                    padding: 0;
                    margin: 0;
                }
                
                /* Fix search form layout */
                #searchForm {
                    display: flex;
                    align-items: center;
                }
                
                .divSearch.input-group {
                    display: flex !important;
                    align-items: center;
                }
                
                /* Add padding to make room for the buttons */
                #textToSearch {
                    padding-right: 120px;
                }
            </style>
        `);
    }
    
    // ...existing code...
});
```

The key improvements I've made:

1. Changed the height of the control to 80% of the input field height for better vertical fit
2. Removed all vertical padding and margins from the buttons and text
3. Used `display: flex` with `align-items: center` and `justify-content: center` for perfect centering
4. Added `box-sizing: border-box` to ensure padding doesn't affect dimensions
5. Set `line-height: 1` on the text to prevent extra vertical space
6. Reduced the right padding on the search input to 120px (from 150px) to prevent overflow
7. Reduced the border-radius from 4px to 3px for a tighter appearance

These changes should ensure the buttons have no extra space at the top or bottom and fit neatly within the input field.

---

_**User (2025-05-02 22:36:45Z)**_

can we increase the rounded right borders on the AI button?

---

_**Agent**_

Let's modify the CSS for the rounded right borders specifically for the AI button in both files:

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
// ...existing code...

// Style the control and buttons for in-input positioning with improved alignment
$('.search-mode-control').css({
  'position': 'absolute',
  'display': 'inline-flex',
  'right': '5px', 
  'top': '50%',
  'transform': 'translateY(-50%)',
  'height': '80%', // Slightly reduced height for better fit
  'z-index': '10',
  'background-color': 'white',
  'border-radius': '3px',
  'overflow': 'hidden',
  'border': '1px solid #ccc',
  'box-sizing': 'border-box',
  'margin': '0', // Remove any margin
  'padding': '0' // Remove any padding
});

$('.search-mode-btn').css({
  'background': '#eaeaea',
  'border': 'none',
  'border-right': '1px solid #ccc',
  'padding': '0 8px', // Removed vertical padding
  'margin': '0', // Remove any margin
  'cursor': 'pointer',
  'height': '100%',
  'color': '#333',
  'font-weight': 'normal',
  'min-width': '50px',
  'font-size': '12px',
  'text-align': 'center',
  'display': 'flex',
  'align-items': 'center',
  'justify-content': 'center',
  'box-sizing': 'border-box'
});

// Remove the right border from the last button and increase its right border radius
$('.search-mode-btn:last-child').css({
  'border-right': 'none',
  'border-top-right-radius': '6px',
  'border-bottom-right-radius': '6px'
});

// Also add a left border radius to the first button for symmetry
$('.search-mode-btn:first-child').css({
  'border-top-left-radius': '6px',
  'border-bottom-left-radius': '6px'
});

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

$(document).ready(function() {
    // ...existing code...

    // Check if search mode controls exist, if not create them
    if ($('.search-mode-control').length === 0) {
        // ...existing code...
        
        $('.search-mode-btn:last-child').css({
            'border-right': 'none',
            'border-top-right-radius': '6px',
            'border-bottom-right-radius': '6px'
        });
        
        // Also add a left border radius to the first button for symmetry
        $('.search-mode-btn:first-child').css({
            'border-top-left-radius': '6px',
            'border-bottom-left-radius': '6px'
        });
        
        $('.search-mode-btn.active').css({
          'background-color': '#007ac3',
          'color': 'white'
        });
        
        // ...existing code...
    }
    
    // ...existing code...
});

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-input-wrapper {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }
                
                .search-mode-control {
                    position: absolute;
                    display: inline-flex;
                    right: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 80%;
                    z-index: 10;
                    background-color: white;
                    border-radius: 3px;
                    overflow: hidden;
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 0 8px;
                    margin: 0;
                    cursor: pointer;
                    height: 100%;
                    color: #333;
                    font-weight: normal;
                    min-width: 50px;
                    font-size: 12px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                }
                
                .search-mode-btn:first-child {
                    border-top-left-radius: 6px;
                    border-bottom-left-radius: 6px;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                .search-mode-btn:hover {
                    background-color: #d8d8d8;
                }
                
                .search-mode-btn.active:hover {
                    background-color: #0069a9;
                }
                
                /* ...existing code... */
            </style>
        `);
    }
    
    // ...existing code...
});
```

These changes will:

1. Increase the border-radius specifically on the right side of the AI button (the last button) to 6px
2. Add a matching border-radius to the left side of the first button (Search) for visual symmetry
3. Maintain all other styling as it was
4. Apply these changes in both JavaScript files for consistency

The border radius has been increased from 3px to 6px, which should create a more noticeable rounded effect on both buttons.

---

_**User (2025-05-02 22:43:27Z)**_

keep the buttons at 100% height and give the Search button squared left corners and the AI button rounded right corners 

---

_**Agent**_

Let's make these adjustments to keep the buttons at 100% height while giving the Search button squared left corners and the AI button rounded right corners.

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// Header
// ...existing code...

// Style the control and buttons for in-input positioning with improved alignment
$('.search-mode-control').css({
  'position': 'absolute',
  'display': 'inline-flex',
  'right': '5px', 
  'top': '50%',
  'transform': 'translateY(-50%)',
  'height': '100%', // Keep at 100% height
  'z-index': '10',
  'background-color': 'white',
  'border-radius': '0', // Remove border radius from container
  'overflow': 'hidden',
  'border': '1px solid #ccc',
  'box-sizing': 'border-box',
  'margin': '0',
  'padding': '0'
});

$('.search-mode-btn').css({
  'background': '#eaeaea',
  'border': 'none',
  'border-right': '1px solid #ccc',
  'padding': '0 8px',
  'margin': '0',
  'cursor': 'pointer',
  'height': '100%', // Ensure 100% height
  'color': '#333',
  'font-weight': 'normal',
  'min-width': '50px',
  'font-size': '12px',
  'text-align': 'center',
  'display': 'flex',
  'align-items': 'center',
  'justify-content': 'center',
  'box-sizing': 'border-box',
  'border-radius': '0' // Reset border radius for all buttons
});

// Keep left corners of Search button squared, but round right corners of AI button
$('.search-mode-btn:first-child').css({
  'border-radius': '0' // Square corners for first button
});

// Make right corners of AI button rounded
$('.search-mode-btn:last-child').css({
  'border-right': 'none',
  'border-top-right-radius': '6px',
  'border-bottom-right-radius': '6px'
});

$('.search-mode-btn.active').css({
  'background-color': '#007ac3',
  'color': 'white'
});

// ...existing code...
```

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Check if search mode controls exist, if not create them
if ($('.search-mode-control').length === 0) {
    console.log('No search mode controls found in header.js, creating them');
    
    // ...existing code...
    
    // Style the control for in-input positioning with improved alignment
    $('.search-mode-control').css({
      'position': 'absolute',
      'display': 'inline-flex',
      'right': '5px', 
      'top': '50%',
      'transform': 'translateY(-50%)',
      'height': '100%', // Keep at 100% height
      'z-index': '10',
      'background-color': 'white',
      'border-radius': '0', // Remove border radius from container
      'overflow': 'hidden',
      'border': '1px solid #ccc',
      'box-sizing': 'border-box',
      'margin': '0',
      'padding': '0'
    });
    
    $('.search-mode-btn').css({
      'background': '#eaeaea',
      'border': 'none',
      'border-right': '1px solid #ccc',
      'padding': '0 8px',
      'margin': '0',
      'cursor': 'pointer',
      'height': '100%', // Ensure 100% height
      'color': '#333',
      'font-weight': 'normal',
      'min-width': '50px',
      'font-size': '12px',
      'text-align': 'center',
      'display': 'flex',
      'align-items': 'center',
      'justify-content': 'center',
      'box-sizing': 'border-box',
      'border-radius': '0' // Reset border radius for all buttons
    });
    
    // Keep left corners of Search button squared
    $('.search-mode-btn:first-child').css({
      'border-radius': '0' // Square corners for first button
    });
    
    // Make right corners of AI button rounded
    $('.search-mode-btn:last-child').css({
      'border-right': 'none',
      'border-top-right-radius': '6px',
      'border-bottom-right-radius': '6px'
    });
    
    $('.search-mode-btn.active').css({
      'background-color': '#007ac3',
      'color': 'white'
    });
    
    // ...existing code...
}

// ...existing code...

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                .search-input-wrapper {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }
                
                .search-mode-control {
                    position: absolute;
                    display: inline-flex;
                    right: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 100%;
                    z-index: 10;
                    background-color: white;
                    border-radius: 0;
                    overflow: hidden;
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }
                
                .search-mode-btn {
                    background: #eaeaea;
                    border: none;
                    border-right: 1px solid #ccc;
                    padding: 0 8px;
                    margin: 0;
                    cursor: pointer;
                    height: 100%;
                    color: #333;
                    font-weight: normal;
                    min-width: 50px;
                    font-size: 12px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    border-radius: 0;
                }
                
                .search-mode-btn:first-child {
                    border-radius: 0;
                }
                
                .search-mode-btn:last-child {
                    border-right: none;
                    border-top-right-radius: 6px;
                    border-bottom-right-radius: 6px;
                }
                
                .search-mode-btn.active {
                    background-color: #007ac3;
                    color: white;
                }
                
                /* ...existing code... */
            </style>
        `);
    }
    
    // ...existing code...
});
```

These changes will:

1. Keep the buttons at 100% height
2. Ensure the Search button (first button) has square corners by explicitly setting `border-radius: 0`
3. Give the AI button (last button) rounded right corners with `border-top-right-radius: 6px` and `border-bottom-right-radius: 6px`
4. Remove any border-radius from the container itself to ensure the left side remains squared

This will create the asymmetrical appearance you're looking for with the Search button having squared left corners and the AI button having rounded right corners.

---

_**User (2025-05-03 21:05:05Z)**_

enough for now

---

_**Agent**_

I understand that we've completed the implementation of the search mode toggle functionality with the Search and AI buttons. The changes look good with:

1. Search button having squared left corners 
2. AI button having rounded right corners
3. Buttons maintaining 100% height
4. Proper styles and positioning within the search input

Let me know if you'd like to make any other adjustments in the future!

---

_**User (2025-05-06 13:04:43Z)**_

ther appear to be two sets of Search and AI buttons. Check the open files and see where that may be happening. Only locate it for now - no changes yet.

---

_**Agent**_

# Search Mode Buttons Duplication Investigation

After reviewing the code in the provided files, I can identify the source of the duplication:

## Root Causes

The duplication happens because the search mode buttons are being created in both JavaScript files:

1. In `general.js`: 
   - Around lines 16-34: Creates and appends the search mode control
   - The buttons are added to the search input wrapper

2. In `header.js`: 
   - Around lines 154-191: Has similar code that checks if search mode controls exist
   - If they don't exist, it creates them again and adds them to the search input wrapper

## Specific Code Locations

### general.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\general.js
// ...existing code...

// Create segmented control for search modes
const searchModeControl = $(`
  <span class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn">
      <span class="search-btn-text">AI</span>
    </button>
  </span>
`);

// Insert control inside the search input wrapper
$('.search-input-wrapper').append(searchModeControl);
```

### header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Check if search mode controls exist, if not create them
if ($('.search-mode-control').length === 0) {
    console.log('No search mode controls found in header.js, creating them');
    
    // ...existing code...
    
    // Create segmented control for search modes
    const searchModeControl = $(`
      <span class="search-mode-control">
        <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
          <span class="search-btn-text">Search</span>
        </button>
        <button type="button" class="search-mode-btn" id="aiChatBtn">
          <span class="search-btn-text">AI</span>
        </button>
      </span>
    `);
    
    // Insert control inside the search input wrapper
    $('.search-input-wrapper').append(searchModeControl);
    
    // ...existing code...
}
```

## Loading Sequence Issue

The duplication likely happens because:

1. `afterbody.js` loads both scripts, but checking the script loading order:
```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\afterbody.js
// ...existing code...

// First loads header.js
$.getScript('/resources/webhelp/js/header.js')
.then(function() {
  // Then loads general.js
  return $.when(
    // ...other scripts...
    $.getScript('/resources/webhelp/js/general.js'),
    // ...other scripts...
  );
});
```

2. Even though the scripts load in sequence (header.js then general.js), both create the buttons without adequate checks for existing buttons.

3. The cleanup code in the window.load event doesn't sufficiently prevent the duplication:
```javascript
// Both files have cleanup logic but it's not preventing initial duplication
if ($('.search-mode-control').length > 1) {
  console.warn('Cleaning up duplicate search mode controls');
  $('.search-mode-control:gt(0)').remove();
}
```

This is where the duplication is happening. The fix would involve modifying either `general.js` or `header.js` to prevent creating the buttons if they already exist, but you asked only to locate the issue for now.

---

_**User (2025-05-06 13:18:08Z)**_

I need to give aiChatBtn an icon. Is there a suitable icon for that?

---

_**Agent**_

I can add an AI icon to the aiChatBtn using Bootstrap Icons, which are already being loaded in your code. Here's how to update the buttons with an appropriate icon:

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Check if search mode controls exist, if not create them
if ($('.search-mode-control').length === 0) {
    console.log('No search mode controls found in header.js, creating them');
    
    // ...existing code...
    
    // Create segmented control for search modes
    const searchModeControl = $(`
      <span class="search-mode-control">
        <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
          <span class="search-btn-text">Search</span>
        </button>
        <button type="button" class="search-mode-btn" id="aiChatBtn">
          <i class="bi bi-robot"></i>
          <span class="search-btn-text">AI</span>
        </button>
      </span>
    `);
    
    // ...existing code...
    
    // Style the AI button icon
    $('#aiChatBtn i.bi').css({
      'margin-right': '4px',
      'font-size': '14px'
    });
    
    // ...existing code...
}

// ...existing code...

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                // ...existing code...
                
                /* Style for the AI icon */
                .search-mode-btn i.bi {
                    margin-right: 4px;
                    font-size: 14px;
                }
                
                /* Adjust padding for the AI button to accommodate the icon */
                #aiChatBtn {
                    padding: 0 6px;
                }
                
                // ...existing code...
            </style>
        `);
    }
    
    // ...existing code...
});
```

Bootstrap Icons has several AI-related icons you could use:
- `bi-robot` (a robot face, good for AI)
- `bi-cpu` (for more technical AI representation)
- `bi-chat-dots` (for a chat-focused AI)
- `bi-magic` (for AI as a magical/smart feature)

I've chosen `bi-robot` as it clearly represents AI, but you could replace it with any of the other options based on preference. The icon will appear to the left of the "AI" text, making the button more visually distinct while maintaining its compact size.

---

_**User (2025-05-06 13:28:29Z)**_

I want to create my own. I ahve a png image that is 96x96 and a trnasparent background. What would be the best format to use for this button?

---

_**Agent**_

For creating your own AI button with a custom PNG image, I recommend the following approach:

### \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Create segmented control for search modes
const searchModeControl = $(`
  <span class="search-mode-control">
    <button type="button" class="search-mode-btn active" id="fullTextSearchBtn">
      <span class="search-btn-text">Search</span>
    </button>
    <button type="button" class="search-mode-btn" id="aiChatBtn">
      <img src="/resources/webhelp/img/ai-icon.png" class="ai-button-icon" alt="AI" />
      <span class="search-btn-text">AI</span>
    </button>
  </span>
`);

// ...existing code...

// Style the AI button icon
$('.ai-button-icon').css({
  'height': '16px',
  'width': '16px',
  'margin-right': '4px',
  'vertical-align': 'middle'
});

// ...existing code...
```

### Add to CSS styles:

```javascript
// filepath: \\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\js\header.js
// ...existing code...

// Add styles directly to the head, but only once
$(window).on('load', function() {
    // Check if our styles are already added
    if (!$('#search-mode-styles').length) {
        $('head').append(`
            <style id="search-mode-styles">
                // ...existing code...
                
                /* Style for the AI custom icon */
                .ai-button-icon {
                    height: 16px;
                    width: 16px;
                    margin-right: 4px;
                    vertical-align: middle;
                }
                
                /* Adjust padding for the AI button to accommodate the icon */
                #aiChatBtn {
                    padding: 0 6px;
                }
                
                // ...existing code...
            </style>
        `);
    }
    
    // ...existing code...
});
```

### Also create a new directory for your image:

You would need to place your 96x96 PNG image at:
`\\zusscgrcprodwebhelp.file.core.windows.net\webhelp\dev\resources\webhelp\img\ai-icon.png`

This approach:
1. Uses an image tag instead of an icon font
2. Preserves your PNG with transparent background
3. Scales it down to 16x16 pixels for the button (you can adjust this size)
4. Maintains proper alignment with the text

The original 96x96 resolution is good as it provides high-quality for high-DPI displays, while the CSS scales it appropriately for the button.
