Tweaks to AIChatButton and AIChatInput (#3539)

Author: zenoachtig

.changeset/honest-eagles-judge.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Tweaks to AIChatButton and AIChatInput

packages/gitbook/e2e/internal.spec.ts

@@ -227,7 +227,7 @@ const searchTestCases: Test[] = [
         }),
         screenshot: false,
         run: async (page) => {
-            await page.keyboard.press('ControlOrMeta+J');
+            await page.keyboard.press('ControlOrMeta+I');
             await expect(page.getByTestId('ai-chat')).toBeVisible();
             await expect(page.getByTestId('ai-chat-input')).toBeFocused();
         },

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

@@ -9,7 +9,7 @@ import {
     type AIChatState,
     useAIChatController,
     useAIChatState,
-} from '../AI/useAIChat';
+} from '../AI';
 import { useNow } from '../hooks';
 import { Button } from '../primitives';
 import { DropdownMenu, DropdownMenuItem } from '../primitives/DropdownMenu';
@@ -24,7 +24,7 @@ export function AIChat(props: { trademark: boolean }) {
     const chatController = useAIChatController();
 
     useHotkeys(
-        'mod+j',
+        'mod+i',
         (e) => {
             e.preventDefault();
             chatController.open();

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

@@ -2,7 +2,7 @@
 import { useLanguage } from '@/intl/client';
 import { t } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
-import { useAIChatController, useAIChatState } from '../AI/useAIChat';
+import { useAIChatController } from '../AI';
 import { Button } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 import { getAIChatName } from './AIChat';
@@ -14,7 +14,6 @@ import { AIChatIcon } from './AIChatIcon';
 export function AIChatButton(props: { trademark: boolean }) {
     const { trademark } = props;
     const chatController = useAIChatController();
-    const chat = useAIChatState();
     const language = useLanguage();
 
     return (
@@ -28,15 +27,11 @@ export function AIChatButton(props: { trademark: boolean }) {
             label={
                 <div className="flex items-center gap-2">
                     {t(language, 'ai_chat_ask', getAIChatName(trademark))}
-                    <KeyboardShortcut keys={['mod', 'j']} className="border-tint-11 text-tint-1" />
+                    <KeyboardShortcut keys={['mod', 'i']} className="border-tint-11 text-tint-1" />
                 </div>
             }
             onClick={() => {
-                if (chat.opened) {
-                    chatController.close();
-                } else {
-                    chatController.open();
-                }
+                chatController.open();
             }}
         />
     );

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

@@ -45,7 +45,7 @@ export function AIChatInput(props: {
     }, [disabled, loading]);
 
     useHotkeys(
-        'mod+j',
+        'mod+i',
         (e) => {
             e.preventDefault();
             inputRef.current?.focus();
@@ -54,7 +54,7 @@ export function AIChatInput(props: {
     );
 
     return (
-        <div className="relative flex flex-col overflow-hidden circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-base/9 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base">
+        <div className="depth-subtle:has-[textarea:focus]:-translate-y-px relative flex flex-col overflow-hidden circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-base/9 depth-subtle:shadow-sm shadow-tint/6 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:shadow-primary-subtle has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base dark:shadow-tint-1">
             <textarea
                 ref={inputRef}
                 disabled={disabled || loading}
@@ -99,10 +99,12 @@ export function AIChatInput(props: {
                     }
                 }}
             />
-            <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
-                <KeyboardShortcut keys={['mod', 'j']} />
-            </div>
-            <div className="absolute inset-x-0 bottom-0 flex items-center px-2 py-2">
+            {!disabled ? (
+                <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
+                    <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
+                </div>
+            ) : null}
+            <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2">
                 <Tooltip
                     label={
                         <div className="flex flex-col gap-3 p-2">
@@ -126,11 +128,11 @@ export function AIChatInput(props: {
                     }
                     arrow
                 >
-                    <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2 py-1 text-tint/7 text-xs transition-all hover:bg-tint">
+                    <div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2.5 py-1.5 text-tint/7 text-xs transition-all hover:bg-tint">
                         <span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
                             {t(language, 'ai_chat_context_badge')}
                         </span>{' '}
-                        <span>{t(language, 'ai_chat_context_title')}</span>
+                        <span className="leading-none">{t(language, 'ai_chat_context_title')}</span>
                     </div>
                 </Tooltip>
                 <Button

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

@@ -1,7 +1,7 @@
 import { tcls } from '@/lib/tailwind';
 import { AIMessageRole } from '@gitbook/api';
 import type React from 'react';
-import type { AIChatController, AIChatState } from '../AI/useAIChat';
+import type { AIChatController, AIChatState } from '../AI';
 import { AIResponseFeedback } from './AIResponseFeedback';
 import { AIChatFollowupSuggestions } from './AiChatFollowupSuggestions';
 

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

@@ -1,5 +1,5 @@
 import { tString, useLanguage } from '@/intl/client';
-import type { AIChatController } from '../AI/useAIChat';
+import type { AIChatController } from '../AI';
 import { Button } from '../primitives';
 
 export default function AIChatSuggestedQuestions(props: { chatController: AIChatController }) {

packages/gitbook/src/components/primitives/Button.tsx

@@ -31,16 +31,16 @@ export const variantClasses = {
         'hover:text-contrast-primary-solid-hover',
         'border-0',
         'contrast-more:border',
-        'disabled:bg-tint',
-        'disabled:text-tint/8',
+        'disabled:bg-primary-subtle',
+        'disabled:text-primary/8',
     ],
     blank: [
         'bg-transparent',
         'text-tint',
         'border-0',
         'shadow-none!',
-        'hover:bg-primary-hover',
-        'hover:text-primary-strong',
+        'hover:bg-tint-hover',
+        'hover:text-tint-strong',
         'contrast-more:bg-tint-subtle',
         'hover:depth-subtle:translate-y-0',
         'disabled:text-tint/8',
@@ -52,7 +52,7 @@ export const variantClasses = {
         'text-tint',
         'hover:bg-tint-hover',
         'hover:depth-flat:bg-tint-hover',
-        'hover:text-primary',
+        'hover:text-tint',
         'contrast-more:bg-tint-subtle',
         'disabled:bg-transparent',
         'disabled:text-tint/8',