Assistant hold message (#3603)

zenoachtig · web-flow · commit 1edc5d622a90 · 2025-08-27T13:48:57.000Z
diff --git a/.changeset/friendly-geese-design.md b/.changeset/friendly-geese-design.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add "hold message" to Assistant
diff --git a/packages/gitbook/src/components/AIChat/AIChatMessages.tsx b/packages/gitbook/src/components/AIChat/AIChatMessages.tsx
@@ -1,3 +1,5 @@
+import { useLanguage } from '@/intl/client';
+import { tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
 import { AIMessageRole } from '@gitbook/api';
 import type React from 'react';
@@ -46,17 +48,9 @@ export function AIChatMessages(props: {
                         {message.content ? message.content : null}
 
                         {isLastMessage && chat.loading ? (
-                            <div className="flex w-full animate-fade-in-slow flex-wrap gap-2">
-                                {Array.from({ length: 7 }).map((_, index) => (
-                                    <div
-                                        key={index}
-                                        className="h-4 animate-[fadeIn_500ms_ease_both,pulse_1.5s_infinite] circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-4"
-                                        style={{
-                                            width: `calc(${(index % 4) * 20 + 10}% - 4px)`,
-                                            animationDelay: `${index * 0.1}s`,
-                                        }}
-                                    />
-                                ))}
+                            <div className="flex w-full animate-fade-in-slow flex-col gap-2">
+                                {!message.content ? <HoldMessage /> : null}
+                                <LoadingSkeleton />
                             </div>
                         ) : null}
 
@@ -86,3 +80,55 @@ export function AIChatMessages(props: {
         </>
     );
 }
+
+function HoldMessage() {
+    const language = useLanguage();
+
+    return (
+        <div className="animate-[heightIn_500ms_4500ms_ease_both] py-2 text-tint-subtle">
+            {tString(language, 'ai_chat_hold_message_1')
+                .split(' ')
+                .map((word, index) => (
+                    <span
+                        key={index}
+                        className="animate-fade-in-slow"
+                        style={{
+                            animationDelay: `${5000 + index * 200}ms`,
+                        }}
+                    >
+                        {word}{' '}
+                    </span>
+                ))}
+            {tString(language, 'ai_chat_hold_message_2')
+                .split(' ')
+                .map((word, index) => (
+                    <span
+                        key={index}
+                        className="animate-fade-in-slow"
+                        style={{
+                            animationDelay: `${10000 + index * 200}ms`,
+                        }}
+                    >
+                        {word}{' '}
+                    </span>
+                ))}
+        </div>
+    );
+}
+
+function LoadingSkeleton() {
+    return (
+        <div className="flex flex-wrap gap-2">
+            {Array.from({ length: 7 }).map((_, index) => (
+                <div
+                    key={index}
+                    className="h-4 animate-[fadeIn_500ms_ease_both,pulse_1.5s_infinite] circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-4"
+                    style={{
+                        width: `calc(${(index % 4) * 20 + 10}% - 4px)`,
+                        animationDelay: `${index * 0.1}s`,
+                    }}
+                />
+            ))}
+        </div>
+    );
+}
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -213,6 +213,7 @@
     :root {
         --scrollbar-width: calc(100vw - 100%);
         @apply leading-relaxed;
+        interpolate-size: allow-keywords; /* Opt-in for modern browsers to interpolate "auto" values in transitions/animations. */
     }
     body {
         @apply text-tint-strong antialiased;
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
@@ -82,6 +82,8 @@ export const de = {
     ai_chat_working: 'Arbeite...',
     ai_chat_context_badge: 'KI',
     ai_chat_error: 'Etwas ist schief gelaufen.',
+    ai_chat_hold_message_1: 'Überlege es mir durch…',
+    ai_chat_hold_message_2: 'Einen Moment…',
     ai_chat_context_title: 'Basierend auf Ihrem Kontext',
     ai_chat_context_description:
         'Der Assistent verwendet KI und Ihren Kontext, um Antworten zu generieren und Aktionen durchzuführen.',
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
@@ -79,6 +79,8 @@ export const en = {
     ai_chat_working: 'Working...',
     ai_chat_context_badge: 'AI',
     ai_chat_error: 'Something went wrong.',
+    ai_chat_hold_message_1: 'Thinking it through…',
+    ai_chat_hold_message_2: 'Just a moment…',
     ai_chat_context_title: 'Based on your context',
     ai_chat_context_description:
         'The assistant uses AI and your context to generate answers and perform actions.',
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
@@ -83,6 +83,8 @@ export const es: TranslationLanguage = {
     ai_chat_working: 'Trabajando...',
     ai_chat_context_badge: 'IA',
     ai_chat_error: 'Algo salió mal.',
+    ai_chat_hold_message_1: 'Pensándolo bien…',
+    ai_chat_hold_message_2: 'Un momento…',
     ai_chat_context_title: 'Basado en tu contexto',
     ai_chat_context_description:
         'El asistente usa IA y tu contexto para generar respuestas y realizar acciones.',
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
@@ -78,6 +78,8 @@ export const fr = {
     ai_chat_working: 'Traitement en cours…',
     ai_chat_context_badge: 'IA',
     ai_chat_error: 'Une erreur est survenue.',
+    ai_chat_hold_message_1: 'Je réfléchis…',
+    ai_chat_hold_message_2: 'Un instant…',
     ai_chat_context_title: 'En se basant sur votre contexte',
     ai_chat_context_description:
         'L’assistant utilise l’IA et votre contexte pour répondre et vous aider.',
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
@@ -81,6 +81,8 @@ export const ja: TranslationLanguage = {
     ai_chat_working: '作業中...',
     ai_chat_context_badge: 'AI',
     ai_chat_error: '何らかのエラーが発生しました。',
+    ai_chat_hold_message_1: '考え中…',
+    ai_chat_hold_message_2: '少々お待ちください…',
     ai_chat_context_title: 'あなたのコンテキストに基づいて',
     ai_chat_context_description:
         'アシスタントはAIとあなたのコンテキストを使用して回答を生成し、アクションを実行します。',
diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts
@@ -81,6 +81,8 @@ export const nl: TranslationLanguage = {
     ai_chat_working: 'Werkt...',
     ai_chat_context_badge: 'AI',
     ai_chat_error: 'Er is iets misgegaan.',
+    ai_chat_hold_message_1: 'Even nadenken…',
+    ai_chat_hold_message_2: 'Een momentje…',
     ai_chat_context_title: 'Gebaseerd op je context',
     ai_chat_context_description:
         'De assistent gebruikt AI en je context om antwoorden te genereren en acties uit te voeren.',
diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts
@@ -82,6 +82,8 @@ export const no: TranslationLanguage = {
     ai_chat_working: 'Arbeider...',
     ai_chat_context_badge: 'AI',
     ai_chat_error: 'Noe gikk galt.',
+    ai_chat_hold_message_1: 'Tenker det gjennom…',
+    ai_chat_hold_message_2: 'Et øyeblikk…',
     ai_chat_context_title: 'Basert på din kontekst',
     ai_chat_context_description:
         'Assistenten bruker AI og din kontekst til å generere svar og utføre handlinger.',
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
@@ -81,6 +81,8 @@ export const pt_br = {
     ai_chat_working: 'Trabalhando...',
     ai_chat_context_badge: 'IA',
     ai_chat_error: 'Algo deu errado.',
+    ai_chat_hold_message_1: 'Pensando sobre isso…',
+    ai_chat_hold_message_2: 'Um momento…',
     ai_chat_context_title: 'Baseado no seu contexto',
     ai_chat_context_description:
         'O assistente usa IA e seu contexto para gerar respostas e realizar ações.',
diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts
@@ -80,6 +80,8 @@ export const ru = {
     ai_chat_working: 'Работает…',
     ai_chat_context_badge: 'ИИ',
     ai_chat_error: 'Что-то пошло не так.',
+    ai_chat_hold_message_1: 'Обдумываю…',
+    ai_chat_hold_message_2: 'Минутку…',
     ai_chat_context_title: 'На основе вашего контекста',
     ai_chat_context_description:
         'Помощник использует ИИ и ваш контекст для генерации ответов и выполнения действий.',
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
@@ -79,6 +79,8 @@ export const zh: TranslationLanguage = {
     ai_chat_working: '工作中...',
     ai_chat_context_badge: 'AI',
     ai_chat_error: '出了些问题。',
+    ai_chat_hold_message_1: '正在思考…',
+    ai_chat_hold_message_2: '请稍等…',
     ai_chat_context_title: '基于您的上下文',
     ai_chat_context_description: '助手使用人工智能和您的上下文来生成答案并执行操作。',
     ai_chat_context_pages_youve_read: '您已阅读的页面',
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
@@ -318,11 +318,14 @@ const config: Config = {
                 'fadeIn-slow': 'fadeIn 500ms ease both',
                 fadeOut: 'fadeOut 200ms ease both',
                 'fadeOut-slow': 'fadeOut 500ms ease both',
+                appear: 'appear 200ms ease both allow-discrete',
 
                 enterFromLeft: 'enterFromLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
                 enterFromRight: 'enterFromRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
                 exitToLeft: 'exitToLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
                 exitToRight: 'exitToRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
+
+                heightIn: 'heightIn 200ms ease both',
             },
             keyframes: {
                 bounceSmall: {
@@ -356,6 +359,7 @@ const config: Config = {
                         opacity: '1',
                     },
                 },
+
                 present: {
                     from: {
                         opacity: '0',
@@ -487,6 +491,10 @@ const config: Config = {
                     from: { opacity: '1' },
                     to: { opacity: '0' },
                 },
+                heightIn: {
+                    from: { height: '0' },
+                    to: { height: 'max-content' },
+                },
             },
             boxShadow: {
                 thinbottom: '0px 1px 0px rgba(0, 0, 0, 0.05)',

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"gitbook": patch
 +---
++
 +Add "hold message" to Assistant
Original file line number	Diff line number	Diff line change
`@@ -213,6 +213,7 @@`
`213`	`213`	`:root {`
`214`	`214`	`--scrollbar-width: calc(100vw - 100%);`
`215`	`215`	`@apply leading-relaxed;`
	`216`	`+ interpolate-size: allow-keywords; /* Opt-in for modern browsers to interpolate "auto" values in transitions/animations. */`
`216`	`217`	`}`
`217`	`218`	`body {`
`218`	`219`	`@apply text-tint-strong antialiased;`