Customizing Search Result Grouping in AI Search to Differentiate Between Catalog Items and Knowledge

[SriRaghavB]

I am looking to customize the AI Search setup & in particular Typeahead search widget-search dropdown results to differentiate between various search sources, such as catalog items and knowledge-base articles (Inspired by the "Customized Search" screenshot/ Community LINK).

In Zing search, there's an Angular template sp-typeahead-popup.html that allows for grouping search results. By customizing this template, I successfully implemented a more organized display of search results in my PDI (screenshots attached / code attached).

<ul class="typeahead-popup dropdown-menu" aria-label="{{::$parent.c.options.title}} {{::$parent.c.data.searchSuggestionsMsg}}" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" role="listbox" aria-hidden="{{!isOpen()}}">
    <li role='option' aria-hidden='true' style='display: none'></li>    

    <!-- Grouping Service Catalog -->
    <div style="background-color: #f8f9fa; padding: 5px 10px;">
        <h5 style="font-weight: bold;">Service Catalog</h5> 
    </div>
    <li ng-repeat="match in matches | filter:{model: {type: 'sc'}} | limitTo: 5 track by $index" ng-class="{active: isActive($index) }" 
        ng-mouseenter="selectActive($index)" 
        ng-click="selectMatch($index, $event)" 
        role="option" id="{{::match.id}}"
        data-index="{{$index}}">
        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
    <li ng-if="!(matches | filter:{model: {type: 'sc'}}).length">
        <div style="padding: 5px 10px;">No results found. <i class="fa fa-search"></i> Search for more details.</div>
    </li>

    <!-- Grouping Knowledge Articles -->
    <div style="background-color: #f8f9fa; padding: 5px 10px;">
        <h5 style="font-weight: bold;">Knowledge Articles</h5> 
    </div>
    <li ng-repeat="match in matches | filter:{model: {type: 'kb'}} | limitTo: 5 track by $index" ng-class="{active: isActive($index) }" 
        ng-mouseenter="selectActive($index)" 
        ng-click="selectMatch($index, $event)" 
        role="option" id="{{::match.id}}"
        data-index="{{$index}}">
        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
    <li ng-if="!(matches | filter:{model: {type: 'kb'}}).length">
        <div style="padding: 20px 10px;">No results found. Use <i class="fa fa-search"></i> Search for more details.</div>
    </li>
</ul>

Is there a similar template or record in the AI Search setup that would allow for such customization? Any guidance or documentation on how to achieve this would be greatly appreciated.

FYI one of the attachments is our current Employee Center search widget screenshot and how it looks currently.

[SriRaghavB]

FYI attachments.