Improve AI Search branding

.changeset/metal-apples-rule.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve AI Search branding

packages/gitbook/src/components/AI/useAI.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { CustomizationAIMode } from '@gitbook/api';
-import { Icon, type IconName, IconStyle } from '@gitbook/icons';
+import { Icon, type IconName } from '@gitbook/icons';
 import * as React from 'react';
 import type { ReactNode } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 import type { GitBookAssistant } from '@gitbook/browser-types';
 import { useAIChatController, useAIChatState } from '.';
-import { AIChatIcon, getAIChatName } from '../AIChat';
+import { AIChatIcon, AISearchIcon, getAIChatName } from '../AIChat';
 import { useIntegrationAssistants } from '../Integrations';
 import { useSearch } from '../Search/useSearch';
 
@@ -104,16 +104,7 @@ export function useAI(): AIContext {
         assistants.push({
             id: 'gitbook-ai-search',
             label: tString(language, 'ai_chat_context_badge'),
-            icon: (
-                <div className="relative">
-                    <Icon icon="search" className="size-4" />
-                    <Icon
-                        icon="sparkle"
-                        iconStyle={IconStyle.Solid}
-                        className="absolute top-[2.5px] left-[2.6px] size-2"
-                    />
-                </div>
-            ),
+            icon: <AISearchIcon />,
             open: (query?: string) => {
                 if (query) {
                     setSearchState((prev) =>

packages/gitbook/src/components/AIChat/AIChatIcon.tsx

@@ -1,5 +1,5 @@
 import { tcls } from '@/lib/tailwind';
-import { Icon } from '@gitbook/icons';
+import { Icon, IconStyle } from '@gitbook/icons';
 import type React from 'react';
 
 interface AIChatIconProps extends React.SVGProps<SVGSVGElement> {
@@ -9,17 +9,18 @@ interface AIChatIconProps extends React.SVGProps<SVGSVGElement> {
     trademark?: boolean;
 }
 
-export const AIChatIcon = ({
+export function AIChatIcon({
     className = 'size-4',
     size,
     trademark = true,
     state = 'default',
     ...props
-}: AIChatIconProps) => {
+}: AIChatIconProps) {
     if (!trademark) {
         return (
             <Icon
                 icon="sparkle"
+                {...props}
                 className={tcls(
                     className,
                     (state === 'thinking' || state === 'working') &&
@@ -163,4 +164,36 @@ export const AIChatIcon = ({
             </g>
         </svg>
     );
-};
+}
+
+export function AISearchIcon({
+    className = 'size-4',
+    state = 'default',
+}: Pick<AIChatIconProps, 'className' | 'state'>) {
+    return (
+        <div
+            className={tcls(
+                'relative',
+                state === 'intro' && 'animate-[fadeIn_1s_both,orbit_1s_cubic-bezier(0.16,1,0.3,1)]',
+                state === 'thinking' || state === 'working'
+                    ? 'animate-[fadeIn_1s_both,orbit_1s_ease-out,orbit_2s_1s_infinite_forwards_linear]'
+                    : ''
+            )}
+        >
+            <Icon icon="search" className={className} />
+            <Icon
+                icon="sparkle"
+                iconStyle={IconStyle.Solid}
+                className={tcls(
+                    'absolute top-[15.7%] left-[15.6%] size-[50%]',
+                    state === 'thinking' || state === 'working'
+                        ? 'animate-[spin_2s_infinite_forwards_cubic-bezier(0.16,1,0.3,1)]'
+                        : '',
+                    state === 'intro'
+                        ? 'animate-[spin_2s_.5s_forwards_cubic-bezier(0.16,1,0.3,1)]'
+                        : ''
+                )}
+            />
+        </div>
+    );
+}

packages/gitbook/src/components/AIChat/AIChatMessages.tsx

@@ -81,11 +81,19 @@ export function AIChatMessages(props: {
     );
 }
 
-function HoldMessage() {
+export function HoldMessage({
+    breakLines = false,
+    className = '',
+}: { breakLines?: boolean; className?: string }) {
     const language = useLanguage();
 
     return (
-        <div className="animate-[heightIn_500ms_4500ms_ease_both] py-2 text-tint-subtle">
+        <div
+            className={tcls(
+                'animate-[heightIn_500ms_4500ms_ease_both] overflow-hidden py-2 text-tint-subtle',
+                className
+            )}
+        >
             {tString(language, 'ai_chat_hold_message_1')
                 .split(' ')
                 .map((word, index) => (
@@ -99,6 +107,7 @@ function HoldMessage() {
                         {word}{' '}
                     </span>
                 ))}
+            {breakLines ? <br /> : null}
             {tString(language, 'ai_chat_hold_message_2')
                 .split(' ')
                 .map((word, index) => (

packages/gitbook/src/components/Search/SearchAskAnswer.tsx

@@ -1,21 +1,20 @@
 'use client';
 
-import { Icon } from '@gitbook/icons';
-import { readStreamableValue } from 'ai/rsc';
-import React from 'react';
-
-import { Loading } from '@/components/primitives';
 import { useLanguage } from '@/intl/client';
-import { t } from '@/intl/translate';
+import { t, tString } from '@/intl/translate';
 import type { TranslationLanguage } from '@/intl/translations';
 import { tcls } from '@/lib/tailwind';
+import { Icon } from '@gitbook/icons';
+import { readStreamableValue } from 'ai/rsc';
+import React from 'react';
 
-import { AIResponseFeedback } from '../AIChat';
+import { AIResponseFeedback, AISearchIcon } from '../AIChat';
+import { HoldMessage } from '../AIChat/AIChatMessages';
 import { useTrackEvent } from '../Insights';
-import { Link } from '../primitives';
+import { Button, Link } from '../primitives';
 import { useSearchAskContext } from './SearchAskContext';
 import { type AskAnswerResult, type AskAnswerSource, streamAskQuestion } from './server-actions';
-import { useSearchLink } from './useSearch';
+import { useSearch, useSearchLink } from './useSearch';
 
 export type SearchAskState =
     | {
@@ -84,8 +83,11 @@ export function SearchAskAnswer(props: { query: string }) {
     }, [setAskState]);
 
     const loading = (
-        <div className="flex grow items-center justify-center">
-            <Loading className={tcls('size-6', 'text-tint/6')} />
+        <div className="flex grow flex-col items-center justify-center">
+            <div className="relative">
+                <AISearchIcon state="thinking" className="size-6 text-tint/6" />
+            </div>
+            <HoldMessage breakLines={true} className="text-center" />
         </div>
     );
 
@@ -129,8 +131,29 @@ function TransitionAnswerBody(props: {
         });
     }, [answer]);
 
+    const language = useLanguage();
+    const [, setSearchState] = useSearch();
+
     return display ? (
-        <div className={tcls('w-full')}>
+        <div className={tcls('flex w-full flex-col gap-4')}>
+            <div className="-mt-2 -mr-2 relative flex items-center gap-2">
+                <Button
+                    icon="chevron-left"
+                    variant="blank"
+                    iconOnly
+                    label={tString(language, 'search_back')}
+                    className="-ml-2 starting:-mr-2 starting:ml-0 starting:w-0 starting:px-0 starting:opacity-0 transition-[all,margin,padding,width,opacity] transition-discrete delay-[0s,2s,2s,2s,2.5s] duration-[.3s,1s,1s,1s,.5s]"
+                    onClick={() => {
+                        setSearchState((prev) =>
+                            prev ? { ...prev, query: prev.ask, ask: null } : null
+                        );
+                    }}
+                />
+                <AISearchIcon state="intro" className="size-4 text-tint/6" />
+                <span className="animate-[fadeIn_1s_.5s_both] font-semibold text-tint">
+                    {t(language, 'ai_answer')}
+                </span>
+            </div>
             <AnswerBody query={query} answer={display} />
         </div>
     ) : (
@@ -144,7 +167,7 @@ function AnswerBody(props: { query: string; answer: AskAnswerResult }) {
 
     return (
         <>
-            <div data-testid="search-ask-answer" className="text-tint-strong">
+            <div data-testid="search-ask-answer" className="animate-fade-in-slow text-tint-strong">
                 {answer.body ?? t(language, 'search_ask_no_answer')}
                 {answer.sources.length > 0 ? (
                     // @TODO: Add responseId once search uses new AI endpoint

packages/gitbook/src/intl/translations/de.ts

@@ -6,6 +6,7 @@ export const de = {
     switch_to_light_theme: 'Zum hellen Modus wechseln',
     switch_to_system_theme: 'Zum Systemmodus wechseln',
     search: 'Suche',
+    search_back: 'Zurück zu den Suchergebnissen',
     search_or_ask: 'Fragen oder Suchen',
     search_input_placeholder: 'Inhalt durchsuchen',
     search_ask_input_placeholder: 'Inhalt durchsuchen oder eine Frage stellen',
@@ -77,6 +78,7 @@ export const de = {
     link_tooltip_email: 'E-Mail senden an',
     link_tooltip_page_anchor: 'Zum Abschnitt springen',
     open_in_new_tab: 'In neuem Tab öffnen',
+    ai_answer: 'KI-Antwort',
     ai_chat_assistant_name: 'GitBook-Assistent',
     ai_chat_assistant_name_unbranded: 'KI-Assistent',
     ai_chat_assistant_description: 'Ich helfe Ihnen bei der Dokumentation.',

packages/gitbook/src/intl/translations/en.ts

@@ -6,6 +6,7 @@ export const en = {
     switch_to_light_theme: 'Switch to light theme',
     switch_to_system_theme: 'Switch to system theme',
     search: 'Search',
+    search_back: 'Back to search results',
     search_or_ask: 'Ask or search',
     search_input_placeholder: 'Search content',
     search_ask_input_placeholder: 'Search content or ask a question',
@@ -74,6 +75,7 @@ export const en = {
     link_tooltip_email: 'Send an email to',
     link_tooltip_page_anchor: 'Jump to section',
     open_in_new_tab: 'Open in new tab',
+    ai_answer: 'AI Answer',
     ai_chat_assistant_name: 'GitBook Assistant',
     ai_chat_assistant_name_unbranded: 'AI Assistant',
     ai_chat_assistant_description: "I'm here to help you with the docs.",

packages/gitbook/src/intl/translations/es.ts

@@ -8,6 +8,7 @@ export const es: TranslationLanguage = {
     switch_to_light_theme: 'Cambiar a tema claro',
     switch_to_system_theme: 'Cambiar a tema del sistema',
     search: 'Buscar',
+    search_back: 'Volver a los resultados de búsqueda',
     search_or_ask: 'Preguntar o Buscar',
     search_input_placeholder: 'Buscar contenido',
     search_ask_input_placeholder: 'Buscar contenido o hacer una pregunta',
@@ -78,6 +79,7 @@ export const es: TranslationLanguage = {
     link_tooltip_email: 'Enviar un correo electrónico a',
     link_tooltip_page_anchor: 'Saltar a la sección',
     open_in_new_tab: 'Abrir en una nueva pestaña',
+    ai_answer: 'Respuesta de IA',
     ai_chat_assistant_name: 'Asistente de GitBook',
     ai_chat_assistant_name_unbranded: 'Asistente de IA',
     ai_chat_assistant_description: 'Estoy aquí para ayudarte con la documentación.',

packages/gitbook/src/intl/translations/fr.ts

@@ -6,6 +6,7 @@ export const fr = {
     switch_to_light_theme: 'Activer le thème clair',
     switch_to_system_theme: 'Utiliser le thème du système',
     search: 'Rechercher',
+    search_back: 'Retour aux résultats de recherche',
     search_or_ask: 'Rechercher',
     search_input_placeholder: 'Rechercher dans le contenu',
     search_ask_input_placeholder: 'Rechercher ou poser une question',
@@ -73,6 +74,7 @@ export const fr = {
     link_tooltip_email: 'Envoyer un e-mail à',
     link_tooltip_page_anchor: 'Aller à la section',
     open_in_new_tab: 'Ouvrir dans un nouvel onglet',
+    ai_answer: 'Réponse IA',
     ai_chat_assistant_name: 'Assistant GitBook',
     ai_chat_assistant_name_unbranded: 'Assistant IA',
     ai_chat_assistant_description: 'Je suis là pour vous aider avec la documentation.',

packages/gitbook/src/intl/translations/it.ts

@@ -8,6 +8,7 @@ export const it: TranslationLanguage = {
     switch_to_light_theme: 'Passa al tema chiaro',
     switch_to_system_theme: 'Passa al tema di sistema',
     search: 'Cerca',
+    search_back: 'Torna ai risultati di ricerca',
     search_or_ask: 'Chiedi o cerca',
     search_input_placeholder: 'Cerca contenuti',
     search_ask_input_placeholder: 'Cerca contenuti o fai una domanda',
@@ -77,6 +78,7 @@ export const it: TranslationLanguage = {
     link_tooltip_email: "Invia un'email a",
     link_tooltip_page_anchor: 'Vai alla sezione',
     open_in_new_tab: 'Apri in una nuova scheda',
+    ai_answer: 'Risposta AI',
     ai_chat_assistant_name: 'Assistente GitBook',
     ai_chat_assistant_name_unbranded: 'Assistente AI',
     ai_chat_assistant_description: 'Sono qui per aiutarti con la documentazione.',

packages/gitbook/src/intl/translations/ja.ts

@@ -8,6 +8,7 @@ export const ja: TranslationLanguage = {
     switch_to_light_theme: 'ライトテーマに切り替え',
     switch_to_system_theme: 'システムのテーマに切り替え',
     search: '検索',
+    search_back: '検索結果に戻る',
     search_or_ask: '質問または検索',
     search_input_placeholder: 'コンテンツを検索',
     search_ask_input_placeholder: 'コンテンツを検索するか質問をする',
@@ -76,6 +77,7 @@ export const ja: TranslationLanguage = {
     link_tooltip_email: 'メールを送信',
     link_tooltip_page_anchor: 'ページ内リンク先',
     open_in_new_tab: '新しいタブで開く',
+    ai_answer: 'AI回答',
     ai_chat_assistant_name: 'GitBookアシスタント',
     ai_chat_assistant_name_unbranded: 'AIアシスタント',
     ai_chat_assistant_description: 'ドキュメントについてお手伝いします。',

packages/gitbook/src/intl/translations/nl.ts

@@ -8,6 +8,7 @@ export const nl: TranslationLanguage = {
     switch_to_light_theme: 'Schakel over naar lichte modus',
     switch_to_system_theme: 'Schakel over naar systeemmodus',
     search: 'Zoeken',
+    search_back: 'Terug naar zoekresultaten',
     search_or_ask: 'Zoek of vraag',
     search_input_placeholder: 'Zoek inhoud',
     search_ask_input_placeholder: 'Zoek inhoud of stel een vraag',
@@ -76,6 +77,7 @@ export const nl: TranslationLanguage = {
     link_tooltip_email: 'E-mail versturen naar',
     link_tooltip_page_anchor: 'Spring naar sectie',
     open_in_new_tab: 'Open in nieuw tabblad',
+    ai_answer: 'AI-antwoord',
     ai_chat_assistant_name: 'GitBook Assistent',
     ai_chat_assistant_name_unbranded: 'AI Assistent',
     ai_chat_assistant_description: 'Ik help je met de documentatie.',

packages/gitbook/src/intl/translations/no.ts

@@ -8,6 +8,7 @@ export const no: TranslationLanguage = {
     switch_to_light_theme: 'Bytt til lyst tema',
     switch_to_system_theme: 'Bytt til systemtema',
     search: 'Søk',
+    search_back: 'Tilbake til søkeresultater',
     search_or_ask: 'Spør eller søk',
     search_input_placeholder: 'Søk i innhold',
     search_ask_input_placeholder: 'Søk i innhold eller still et spørsmål',
@@ -77,6 +78,7 @@ export const no: TranslationLanguage = {
     link_tooltip_email: 'Send e-post til',
     link_tooltip_page_anchor: 'Hopp til seksjon',
     open_in_new_tab: 'Åpne i ny fane',
+    ai_answer: 'AI-svar',
     ai_chat_assistant_name: 'GitBook-assistent',
     ai_chat_assistant_name_unbranded: 'AI-assistent',
     ai_chat_assistant_description: 'Jeg er her for å hjelpe deg med docs.',

packages/gitbook/src/intl/translations/pt-br.ts

@@ -6,6 +6,7 @@ export const pt_br = {
     switch_to_light_theme: 'Mudar para modo claro',
     switch_to_system_theme: 'Mudar para configuração do sistema',
     search: 'Busca',
+    search_back: 'Voltar aos resultados da busca',
     search_or_ask: 'Perguntar ou buscar',
     search_input_placeholder: 'Buscar conteúdo',
     search_ask_input_placeholder: 'Buscar conteúdo ou fazer uma pergunta',
@@ -76,6 +77,7 @@ export const pt_br = {
     link_tooltip_email: 'Enviar e-mail para',
     link_tooltip_page_anchor: 'Pular para a seção',
     open_in_new_tab: 'Abrir em uma nova guia',
+    ai_answer: 'Resposta de IA',
     ai_chat_assistant_name: 'Assistente do GitBook',
     ai_chat_assistant_name_unbranded: 'Assistente de IA',
     ai_chat_assistant_description: 'Estou aqui para ajudá-lo com a documentação.',

packages/gitbook/src/intl/translations/ru.ts

@@ -6,6 +6,7 @@ export const ru = {
     switch_to_light_theme: 'Переключиться на светлую тему',
     switch_to_system_theme: 'Переключиться на системную тему',
     search: 'Поиск',
+    search_back: 'Вернуться к результатам поиска',
     search_or_ask: 'Найти или спросить',
     search_input_placeholder: 'Поиск по содержимому',
     search_ask_input_placeholder: 'Найти в содержимом или задать вопрос',
@@ -75,6 +76,7 @@ export const ru = {
     link_tooltip_email: 'Отправить письмо на',
     link_tooltip_page_anchor: 'Перейти к разделу',
     open_in_new_tab: 'Открыть в новой вкладке',
+    ai_answer: 'ИИ-ответ',
     ai_chat_assistant_name: 'GitBook-помощник',
     ai_chat_assistant_name_unbranded: 'ИИ-помощник',
     ai_chat_assistant_description: 'Я здесь, чтобы помочь вам с базой знаний.',

packages/gitbook/src/intl/translations/zh.ts

@@ -8,6 +8,7 @@ export const zh: TranslationLanguage = {
     switch_to_light_theme: '切换到浅色主题',
     switch_to_system_theme: '切换到系统主题',
     search: '搜索',
+    search_back: '返回搜索结果',
     search_or_ask: '询问或搜索',
     search_input_placeholder: '搜索内容',
     search_ask_input_placeholder: '搜索内容或提问',
@@ -74,6 +75,7 @@ export const zh: TranslationLanguage = {
     link_tooltip_email: '发送邮件到',
     link_tooltip_page_anchor: '跳转到页面',
     open_in_new_tab: '在新标签页中打开',
+    ai_answer: 'AI 回答',
     ai_chat_assistant_name: 'GitBook 助手',
     ai_chat_assistant_name_unbranded: 'AI 助手',
     ai_chat_assistant_description: '我在这里帮助您了解文档。',