change the order of Copilot Search references (#55716)

Author: Ebonsignori

data/ui.yml

@@ -47,7 +47,7 @@ search:
     privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy"><u>GitHub Privacy Statement</u></a> to review how GitHub collects and uses your data.
   ai:
     disclaimer: <a href="https://docs.github.com/en/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-copilot-chat-in-githubcom"}>Copilot</a> uses AI. Check for mistakes.
-    references: Additional docs
+    references: Copilot Sources
     loading_status_message: Loading Copilot response...
     done_loading_status_message: Done loading Copilot response
     copy_answer: Copy answer

src/fixtures/fixtures/data/ui.yml

@@ -47,7 +47,7 @@ search:
     privacy_disclaimer: For product and service improvement purposes, the GitHub Docs team will retain questions and answers generated in the Docs search function. Please see the <a href="https://docs.github.com/privacy"><u>GitHub Privacy Statement</u></a> to review how GitHub collects and uses your data.
   ai:
     disclaimer: <a href="https://docs.github.com/en/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-copilot-chat-in-githubcom"}>Copilot</a> uses AI. Check for mistakes.
-    references: Additional docs
+    references: Copilot Sources
     loading_status_message: Loading Copilot response...
     done_loading_status_message: Done loading Copilot response
     copy_answer: Copy answer

src/search/components/input/AskAIResults.tsx

@@ -4,7 +4,14 @@ import { executeAISearch } from '../helpers/execute-search-actions'
 import { useRouter } from 'next/router'
 import { useTranslation } from '@/languages/components/useTranslation'
 import { ActionList, IconButton, Spinner } from '@primer/react'
-import { CheckIcon, CopyIcon, FileIcon, ThumbsdownIcon, ThumbsupIcon } from '@primer/octicons-react'
+import {
+  CheckIcon,
+  CopilotIcon,
+  CopyIcon,
+  FileIcon,
+  ThumbsdownIcon,
+  ThumbsupIcon,
+} from '@primer/octicons-react'
 import { announce } from '@primer/live-region-element'
 import { useAISearchLocalStorageCache } from '../hooks/useAISearchLocalStorageCache'
 import { UnrenderedMarkdownContent } from '@/frame/components/ui/MarkdownContent/UnrenderedMarkdownContent'
@@ -334,6 +341,64 @@ export function AskAIResults({
 
   return (
     <div className={styles.container}>
+      {!aiCouldNotAnswer && references && references.length > 0 ? (
+        <>
+          <ActionList className={styles.referencesList} showDividers>
+            <ActionList.Group>
+              <ActionList.GroupHeading
+                as="h3"
+                aria-label={t('search.ai.references')}
+                className={styles.referencesTitle}
+              >
+                {t('search.ai.references')}
+              </ActionList.GroupHeading>
+              {references
+                .map((source, index) => {
+                  if (index >= MAX_REFERENCES_TO_SHOW) {
+                    return null
+                  }
+                  const refIndex = index + referencesIndexOffset
+                  return (
+                    <ActionList.Item
+                      sx={{
+                        marginLeft: '0px',
+                      }}
+                      key={`reference-${index}`}
+                      id={`search-option-reference-${index + referencesIndexOffset}`}
+                      role="option"
+                      tabIndex={-1}
+                      onSelect={() => {
+                        referenceOnSelect(source.url)
+                      }}
+                      active={refIndex === selectedIndex}
+                      ref={(element) => {
+                        if (listElementsRef.current) {
+                          listElementsRef.current[refIndex] = element
+                        }
+                      }}
+                    >
+                      <ActionList.LeadingVisual aria-hidden="true">
+                        <FileIcon />
+                      </ActionList.LeadingVisual>
+                      {source.title}
+                    </ActionList.Item>
+                  )
+                })
+                .filter(Boolean)}
+            </ActionList.Group>
+            <ActionList.Divider aria-hidden="true" />
+          </ActionList>
+        </>
+      ) : null}
+      <ActionList.GroupHeading
+        key="ai-heading"
+        as="h3"
+        tabIndex={-1}
+        aria-label={t('search.overlay.ai_suggestions_list_aria_label')}
+      >
+        <CopilotIcon className="mr-1" />
+        {t('search.overlay.ai_autocomplete_list_heading')}
+      </ActionList.GroupHeading>
       {initialLoading ? (
         <div className={styles.loadingContainer} role="status">
           <Spinner />
@@ -423,55 +488,6 @@ export function AskAIResults({
           ></IconButton>
         </div>
       ) : null}
-      {!aiCouldNotAnswer && references && references.length > 0 ? (
-        <>
-          <ActionList.Divider aria-hidden="true" />
-          <ActionList className={styles.referencesList} showDividers>
-            <ActionList.Group>
-              <ActionList.GroupHeading
-                as="h3"
-                aria-label={t('search.ai.references')}
-                className={styles.referencesTitle}
-              >
-                {t('search.ai.references')}
-              </ActionList.GroupHeading>
-              {references
-                .map((source, index) => {
-                  if (index >= MAX_REFERENCES_TO_SHOW) {
-                    return null
-                  }
-                  const refIndex = index + referencesIndexOffset
-                  return (
-                    <ActionList.Item
-                      sx={{
-                        marginLeft: '0px',
-                      }}
-                      key={`reference-${index}`}
-                      id={`search-option-reference-${index + referencesIndexOffset}`}
-                      role="option"
-                      tabIndex={-1}
-                      onSelect={() => {
-                        referenceOnSelect(source.url)
-                      }}
-                      active={refIndex === selectedIndex}
-                      ref={(element) => {
-                        if (listElementsRef.current) {
-                          listElementsRef.current[refIndex] = element
-                        }
-                      }}
-                    >
-                      <ActionList.LeadingVisual aria-hidden="true">
-                        <FileIcon />
-                      </ActionList.LeadingVisual>
-                      {source.title}
-                    </ActionList.Item>
-                  )
-                })
-                .filter(Boolean)}
-            </ActionList.Group>
-          </ActionList>
-        </>
-      ) : null}
       <div
         aria-live="assertive"
         style={{

src/search/components/input/SearchOverlay.tsx

@@ -879,23 +879,10 @@ function renderSearchGroups(
 ) {
   const groups = []
 
-  const askAIGroupHeading = (
-    <ActionList.GroupHeading
-      key="ai-heading"
-      as="h3"
-      tabIndex={-1}
-      aria-label={t('search.overlay.ai_suggestions_list_aria_label')}
-    >
-      <CopilotIcon className="mr-1" />
-      {t('search.overlay.ai_autocomplete_list_heading')}
-    </ActionList.GroupHeading>
-  )
-
   let isInAskAIState = askAIState?.isAskAIState && !askAIState.aiSearchError
   if (isInAskAIState) {
     groups.push(
       <ActionList.Group key="ai" data-testid="ask-ai">
-        {askAIGroupHeading}
         <AskAIResults
           query={askAIState.aiQuery}
           debug={askAIState.debug}