Skip to content

Commit b0c534f

Browse files
zenoachtigzenoachtig
authored
Tweaks to AI Chat and AI Actions Dropdown (#3495)
1 parent 250c194 commit b0c534f

File tree

21 files changed

+72
-24
lines changed

21 files changed

+72
-24
lines changed

‎.changeset/thick-deers-mix.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"gitbook": patch
3+
---
4+
5+
Tweaks to AI Chat and AI Actions Dropdown

‎packages/gitbook/src/components/AI/server-actions/AIMessageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function AIMessageView(
2323
<div
2424
key={index}
2525
className={tcls(
26-
'flex animate-[fadeIn_500ms_both] flex-col gap-2',
26+
'flex animate-fadeIn-slow flex-col gap-2',
2727
step.content.nodes.length > 0 ? 'has-content' : ''
2828
)}
2929
>

‎packages/gitbook/src/components/AI/server-actions/AIToolCallsSummary.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function ToolCallSummary(props: { toolCall: AIToolCall; context: GitBookSiteCont
3838
const { toolCall, context } = props;
3939

4040
return (
41-
<div className="flex origin-left animate-[scaleIn_500ms_500ms_both] items-start gap-2 text-sm text-tint-subtle">
41+
<div className="flex origin-left animate-scaleIn-slow items-start gap-2 text-sm text-tint-subtle">
4242
<Icon
4343
icon={getIconForToolCall(toolCall)}
4444
className="mt-1 size-3 shrink-0 text-tint-subtle/8"
@@ -151,13 +151,13 @@ async function DescriptionForSearchToolCall(props: {
151151
<details className={tcls('-ml-5 group flex w-full flex-col', hasResults ? 'gap-2' : '')}>
152152
<summary
153153
className={tcls(
154-
'-mx-2 flex list-none items-center gap-2 rounded-corners:rounded-md pr-4 pl-7 transition-colors marker:hidden',
154+
'-mx-2 flex list-none items-center gap-2 circular-corners:rounded-2xl rounded-corners:rounded-md pr-4 pl-7 transition-colors marker:hidden',
155155
hasResults ? '-my-2 cursor-pointer py-2 hover:bg-primary-hover' : ''
156156
)}
157157
>
158-
<div className="flex flex-col">
158+
<div className="flex flex-col leading-snug">
159159
<p>{t(language, 'searched_for', <strong>{toolCall.query}</strong>)}</p>
160-
<p className="text-tint-subtle text-xs">
160+
<p className="mt-0.5 text-tint-subtle text-xs">
161161
{hasResults
162162
? t(language, 'search_results_count', toolCall.results.length)
163163
: t(language, 'search_no_results')}
@@ -175,12 +175,12 @@ async function DescriptionForSearchToolCall(props: {
175175
) : null}
176176
</summary>
177177
{hasResults ? (
178-
<div className="max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all duration-500 [transition-behavior:allow-discrete] group-open:max-h-96 group-open:opacity-11">
178+
<div className="mt-1 max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all duration-500 [transition-behavior:allow-discrete] group-open:max-h-96 group-open:opacity-11">
179179
<ol className="space-y-1">
180180
{searchResultsWithHrefs.map((result, index) => (
181181
<li
182182
key={`${result.pageId}-${index}`}
183-
className="animate-fadeIn"
183+
className="animate-fadeIn-slow"
184184
style={{
185185
animationDelay: `${index * 25}ms`,
186186
}}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export function AIChatWindow(props: {
112112
ref={containerRef}
113113
>
114114
<div className="relative flex h-full grow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint-base text-sm text-tint depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">
115-
<div className="flex items-center gap-2 border-tint-subtle border-b bg-tint-subtle px-4 py-2 text-tint-strong">
115+
<div className="flex select-none items-center gap-2 border-tint-subtle border-b bg-tint-subtle px-4 py-2 text-tint-strong">
116116
<AIChatIcon
117117
className="size-5 text-tint"
118118
trademark={trademark}
@@ -149,7 +149,7 @@ export function AIChatWindow(props: {
149149
onClick={() => {}}
150150
iconOnly
151151
icon="ellipsis"
152-
label={tString(language, 'more')}
152+
label={tString(language, 'actions')}
153153
className="!px-2"
154154
variant="blank"
155155
size="default"
@@ -162,7 +162,10 @@ export function AIChatWindow(props: {
162162
}}
163163
disabled={isEmpty}
164164
>
165-
<Icon icon="broom-wide" className="size-3 text-tint-subtle" />
165+
<Icon
166+
icon="broom-wide"
167+
className="size-3 shrink-0 text-tint-subtle"
168+
/>
166169
{t(language, 'ai_chat_clear_conversation')}
167170
</DropdownMenuItem>
168171
</DropdownMenu>
@@ -186,7 +189,7 @@ export function AIChatWindow(props: {
186189
>
187190
{isEmpty ? (
188191
<div className="flex min-h-full w-full shrink-0 flex-col items-center justify-center gap-6 py-4">
189-
<div className="flex size-32 animate-[fadeIn_500ms_both] items-center justify-center rounded-full bg-tint-subtle">
192+
<div className="flex size-32 animate-fadeIn-slow items-center justify-center rounded-full bg-tint-subtle">
190193
<AIChatIcon
191194
state="intro"
192195
trademark={trademark}
@@ -215,7 +218,7 @@ export function AIChatWindow(props: {
215218
</div>
216219
<div
217220
ref={inputRef}
218-
className="absolute inset-x-0 bottom-0 mr-2 flex flex-col gap-4 bg-gradient-to-b from-transparent to-50% to-tint-base/9 p-4 pr-2"
221+
className="absolute inset-x-0 bottom-0 mr-2 flex select-none flex-col gap-4 bg-gradient-to-b from-transparent to-50% to-tint-base/9 p-4 pr-2"
219222
>
220223
{/* Display an error banner when something went wrong. */}
221224
{chat.error ? <AIChatError chatController={chatController} /> : null}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function AIChatMessages(props: {
2424
<div
2525
ref={isLastUserMessage ? lastUserMessageRef : undefined}
2626
className={tcls(
27-
message.content ? 'animate-[fadeIn_500ms_both]' : '',
27+
message.content ? 'animate-fadeIn-slow' : '',
2828
'shrink-0',
2929
'last:min-h-[calc(100%-5rem)]',
3030
'scroll-mt-36',
@@ -43,11 +43,11 @@ export function AIChatMessages(props: {
4343
{message.content ? message.content : null}
4444

4545
{isLastMessage && chat.loading ? (
46-
<div className="flex w-full animate-[fadeIn_500ms_both] flex-wrap gap-2 group-has-[.has-content]/message:hidden">
46+
<div className="flex w-full animate-fadeIn-slow flex-wrap gap-2 group-has-[.has-content]/message:hidden">
4747
{Array.from({ length: 7 }).map((_, index) => (
4848
<div
4949
key={index}
50-
className="h-4 animate-[fadeIn_0.5s_ease_both,pulse_1.5s_infinite] rounded-md bg-tint-4"
50+
className="h-4 animate-[fadeIn_500ms_ease_both,pulse_1.5s_infinite] circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-4"
5151
style={{
5252
width: `calc(${(index % 4) * 20 + 10}% - 4px)`,
5353
animationDelay: `${index * 0.1}s`,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ export function AIResponseFeedback(props: {
5959
/>
6060
{rating !== null ? (
6161
<span
62-
className="ml-2 animate-fadeIn text-tint-subtle"
63-
style={{ animationDelay: '.3s', animationDuration: '.5s' }}
62+
className="ml-2 animate-fadeIn-slow text-tint-subtle"
63+
style={{ animationDelay: '.3s' }}
6464
>
6565
{t(language, 'was_this_helpful_thank_you')}
6666
</span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function AIChatFollowupSuggestions(props: {
2323
chatController.postMessage({ message: suggestion });
2424
}}
2525
label={suggestion}
26-
className="max-w-[80%] animate-[present_500ms_both] whitespace-normal text-left ring-1 ring-tint-subtle"
26+
className="animate-[present_500ms_both] whitespace-normal text-left ring-1 ring-tint-subtle"
2727
size="medium"
2828
variant="blank"
2929
style={{

‎packages/gitbook/src/components/PageAside/PageAside.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,9 @@ export function PageAside(props: {
9595
'page-api-block:xl:max-2xl:dark:hover:shadow-tint-1/1',
9696
'page-api-block:xl:max-2xl:rounded-md',
9797
'page-api-block:xl:max-2xl:h-auto',
98-
'page-api-block:xl:max-2xl:my-4',
99-
'page-api-block:p-2'
98+
'page-api-block:xl:max-2xl:my-9',
99+
'page-api-block:px-2',
100+
'page-api-block:py-1.5'
100101
)}
101102
>
102103
{page.layout.outline ? (

‎packages/gitbook/src/components/PageBody/PageHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export async function PageHeader(props: {
4545
(withAIChat || pageActions.markdown || pageActions.externalAI) ? (
4646
<div
4747
className={tcls(
48-
'float-right mb-2 ml-4',
48+
'float-right mb-2 ml-4 page-api-block:xl:max-2xl:mr-[14.5rem]',
4949
ancestors.length > 0 ? '-mt-2' : 'xs:mt-2'
5050
)}
5151
>

‎packages/gitbook/src/components/primitives/Tooltip.tsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
'use client';
2+
13
import { tcls } from '@/lib/tailwind';
24
import * as RadixTooltip from '@radix-ui/react-tooltip';
5+
import { useState } from 'react';
6+
import { useIsMobile } from '../hooks/useIsMobile';
37

48
export function Tooltip(props: {
59
children: React.ReactNode;
@@ -22,10 +26,24 @@ export function Tooltip(props: {
2226
className,
2327
} = props;
2428

29+
const isMobile = useIsMobile();
30+
const [open, setOpen] = useState(false);
31+
2532
return (
2633
<RadixTooltip.Provider delayDuration={300} {...providerProps}>
27-
<RadixTooltip.Root {...rootProps}>
28-
<RadixTooltip.Trigger asChild {...triggerProps}>
34+
<RadixTooltip.Root open={open} onOpenChange={(e) => setOpen(e)} {...rootProps}>
35+
<RadixTooltip.Trigger
36+
asChild
37+
onClick={(event) => {
38+
event.preventDefault();
39+
if (isMobile) {
40+
setOpen(true);
41+
}
42+
setOpen(true);
43+
}}
44+
onPointerDown={(event) => event.preventDefault()}
45+
{...triggerProps}
46+
>
2947
{children}
3048
</RadixTooltip.Trigger>
3149
<RadixTooltip.Portal>
@@ -35,6 +53,12 @@ export function Tooltip(props: {
3553
'z-50 max-w-xs animate-scaleIn circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint-12 px-2 py-1 text-contrast-tint-12 text-sm',
3654
className
3755
)}
56+
onPointerDownOutside={(event) => {
57+
event.preventDefault();
58+
if (isMobile) {
59+
setOpen(false);
60+
}
61+
}}
3862
{...contentProps}
3963
>
4064
{label}

0 commit comments

Comments
 (0)