Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #747 from buster-so/devin/1755829561-auto-scroll-report-editor 

feat: integrate useAutoScroll hook with ReportEditor for streaming content
This commit is contained in:
Nate Kelley 2025-08-21 22:22:09 -06:00 committed by GitHub
parent 52aa0feb44 b29fb18a3c
commit 6b0e473da9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/controllers/ReasoningController/ReasoningScrollToBottom.tsx → apps/web/src/components/ui/buttons/ScrollToBottomButton.tsx
View File

@ -3,18 +3,20 @@ import { ChevronDown } from '@/components/ui/icons';
import { AppTooltip } from '@/components/ui/tooltip';
import { cn } from '@/lib/classMerge';
export const ReasoningScrollToBottom: React.FC<{
export const ScrollToBottomButton: React.FC<{
isAutoScrollEnabled: boolean;
scrollToBottom: () => void;
}> = React.memo(({ isAutoScrollEnabled, scrollToBottom }) => {
className?: string;
}> = React.memo(({ isAutoScrollEnabled, scrollToBottom, className }) => {
return (
<div
data-testid="reasoning-scroll-to-bottom"
data-testid="scroll-to-bottom-button"
className={cn(
'absolute right-4 bottom-4 z-10 duration-300',
isAutoScrollEnabled
? 'pointer-events-none scale-90 opacity-0'
: 'pointer-events-auto scale-100 cursor-pointer opacity-100'
: 'pointer-events-auto scale-100 cursor-pointer opacity-100',
className
)}>
<AppTooltip title="Stick to bottom" sideOffset={12} delayDuration={500}>
<button
@ -30,4 +32,4 @@ export const ReasoningScrollToBottom: React.FC<{
);
});
ReasoningScrollToBottom.displayName = 'ReasoningScrollToBottom';
ScrollToBottomButton.displayName = 'ScrollToBottomButton';

27
apps/web/src/components/ui/report/EditorContainer.tsx
View File

@ -1,6 +1,7 @@
import { cn } from '@/lib/utils';
import { PlateContainer } from 'platejs/react';
import { cva, type VariantProps } from 'class-variance-authority';
import React from 'react';
interface EditorContainerProps {
className?: string;
@ -37,22 +38,24 @@ const editorContainerVariants = cva(
}
);
export function EditorContainer({
className,
variant,
readOnly,
...props
}: React.ComponentProps<'div'> &
VariantProps<typeof editorContainerVariants> &
EditorContainerProps) {
export const EditorContainer = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> &
VariantProps<typeof editorContainerVariants> &
EditorContainerProps
>(({ className, variant, readOnly, children, ...htmlProps }, ref) => {
return (
<PlateContainer
<div
ref={ref}
className={cn(
'ignore-click-outside/toolbar',
editorContainerVariants({ variant, readOnly }),
className
)}
{...props}
/>
{...htmlProps}>
<PlateContainer>{children}</PlateContainer>
</div>
);
}
});
EditorContainer.displayName = 'EditorContainer';

34
apps/web/src/components/ui/report/ReportEditor.tsx
View File

@ -2,8 +2,9 @@
import type { Value, AnyPluginConfig } from 'platejs';
import { Plate, type TPlateEditor } from 'platejs/react';
import React, { useImperativeHandle, useRef } from 'react';
import React, { useEffect, useImperativeHandle, useRef } from 'react';
import { useDebounceFn, useMemoizedFn } from '@/hooks';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import { cn } from '@/lib/utils';
import { Editor } from './Editor';
import { EditorContainer } from './EditorContainer';
@ -12,6 +13,7 @@ import { useReportEditor } from './useReportEditor';
import type { ReportElementsWithIds, ReportElementWithId } from '@buster/server-shared/reports';
import { platejsToMarkdown } from './plugins/markdown-kit/platejs-conversions';
import { ShimmerText } from '@/components/ui/typography/ShimmerText';
import { ScrollToBottomButton } from '../buttons/ScrollToBottomButton';
interface ReportEditorProps {
// We accept the generic Value type but recommend using ReportTypes.Value for type safety
@ -29,7 +31,7 @@ interface ReportEditorProps {
onReady?: (editor: IReportEditor) => void;
id?: string;
mode?: 'export' | 'default';
children?: React.ReactNode;
preEditorChildren?: React.ReactNode;
postEditorChildren?: React.ReactNode;
}
@ -59,13 +61,21 @@ export const ReportEditor = React.memo(
useFixedToolbarKit = false,
readOnly = false,
isStreaming = false,
children,
preEditorChildren,
postEditorChildren
},
ref
) => {
// Initialize the editor instance using the custom useEditor hook
const isReady = useRef(false);
const editorContainerRef = useRef<HTMLDivElement>(null);
const { isAutoScrollEnabled, enableAutoScroll, disableAutoScroll, scrollToBottom } =
useAutoScroll(editorContainerRef, {
enabled: isStreaming,
bottomThreshold: 50,
observeSubTree: true
});
const editor = useReportEditor({
isStreaming,
@ -118,15 +128,24 @@ export const ReportEditor = React.memo(
wait: 1500
});
useEffect(() => {
if (isStreaming) {
enableAutoScroll();
} else {
disableAutoScroll();
}
}, [isStreaming]);
if (!editor) return null;
return (
<Plate editor={editor} onValueChange={onValueChangeDebounced}>
<EditorContainer
ref={editorContainerRef}
variant={variant}
readOnly={readOnly}
className={cn('editor-container relative overflow-auto', containerClassName)}>
{children}
{preEditorChildren}
<ThemeWrapper id={id}>
<Editor
style={style}
@ -137,6 +156,13 @@ export const ReportEditor = React.memo(
/>
</ThemeWrapper>
{postEditorChildren}
{isStreaming && (
<ScrollToBottomButton
isAutoScrollEnabled={isAutoScrollEnabled}
scrollToBottom={scrollToBottom}
className="fixed right-8 bottom-8 z-10"
/>
)}
</EditorContainer>
</Plate>
);

2
apps/web/src/components/ui/report/elements/StreamingText.tsx
View File

@ -15,7 +15,7 @@ export function StreamingText(props: PlateTextProps) {
<PlateText
className={cn(
'streaming-node',
isStreaming && ['animate-highlight-fade'],
isStreaming && 'animate-highlight-fade',
// Only show the animated dot on the last streaming text node
isLastStreamingText && [
'after:ml-1.5 after:inline-block after:h-3 after:w-3 after:animate-pulse after:rounded-full after:bg-purple-500 after:align-middle after:content-[""]'

4
apps/web/src/controllers/ReasoningController/ReasoningController.tsx
View File

@ -11,7 +11,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import { ReasoningMessageSelector } from './ReasoningMessages';
import { BlackBoxMessage } from './ReasoningMessages/ReasoningBlackBoxMessage';
import { ReasoningScrollToBottom } from './ReasoningScrollToBottom';
import { ScrollToBottomButton } from '@/components/ui/buttons/ScrollToBottomButton';
import type { BusterChatMessage, IBusterChat } from '@/api/asset_interfaces/chat';
interface ReasoningControllerProps {
@ -79,7 +79,7 @@ export const ReasoningController: React.FC<ReasoningControllerProps> = ({ chatId
</div>
</ScrollArea>
<ReasoningScrollToBottom
<ScrollToBottomButton
isAutoScrollEnabled={isAutoScrollEnabled}
scrollToBottom={scrollToBottom}
/>

21
apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx
View File

@ -10,9 +10,7 @@ import { type IReportEditor } from '@/components/ui/report/ReportEditor';
import { ReportEditorSkeleton } from '@/components/ui/report/ReportEditorSkeleton';
import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext';
import { useTrackAndUpdateReportChanges } from '@/api/buster-electric/reports/hooks';
import { ShimmerText } from '@/components/ui/typography/ShimmerText';
import { GeneratingContent } from './GeneratingContent';
import { useHotkeys } from 'react-hotkeys-hook';
export const ReportPageController: React.FC<{
reportId: string;
@ -73,19 +71,20 @@ export const ReportPageController: React.FC<{
mode={mode}
onReady={onReadyProp}
isStreaming={isStreamingMessage}
preEditorChildren={
<ReportPageHeader
name={report?.name}
updatedAt={report?.updated_at}
onChangeName={onChangeName}
className={commonClassName}
isStreaming={isStreamingMessage}
/>
}
postEditorChildren={
showGeneratingContent ? (
<GeneratingContent messageId={messageId} className={commonClassName} />
) : null
}>
<ReportPageHeader
name={report?.name}
updatedAt={report?.updated_at}
onChangeName={onChangeName}
className={commonClassName}
isStreaming={isStreamingMessage}
/>
</DynamicReportEditor>
}></DynamicReportEditor>
) : (
<ReportEditorSkeleton />
)}

11
apps/web/src/styles/tailwindAnimations.css
View File

@ -60,21 +60,16 @@
}
}
/*
highlightFade animation:
- Animates a highlight background and a bottom border only (no outline).
- The border is only on the bottom, not using outline.
*/
@keyframes highlightFade {
0% {
/* Use highlight background, fallback to brand, then yellow */
background-color: var(--color-highlight-background, var(--color-purple-100, yellow));
/* Only bottom border is visible at start */
border-bottom: 1px solid var(--color-highlight-border, var(--color-purple-200, yellow));
/* Use box-shadow instead of border - doesn't take up space */
box-shadow: 0 1.5px 0 0 var(--color-highlight-border, var(--color-purple-300, yellow));
}
100% {
background-color: var(--color-highlight-to-background, transparent);
border-bottom: 0px solid var(--color-highlight-to-border, transparent);
box-shadow: 0 0 0 0 var(--color-highlight-to-border, transparent);
}
}