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

add better streaming handler

This commit is contained in:
Nate Kelley 2025-09-10 13:54:24 -06:00
parent f885bf29ff
commit ece8e329da
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/ui/card/CollapisbleFileCard.tsx
View File

@ -223,11 +223,9 @@ const CollapseContent = ({
className="group relative overflow-hidden"
initial={{
height: isCollapsed ? collapsedHeight : 'auto',
filter: 'blur(0px)',
}}
animate={{
height: isCollapsed ? collapsedHeight : 'auto',
filter: 'blur(0px)',
}}
transition={{
duration: isInitialMount ? 0 : 0.25,

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

@ -1,23 +1,22 @@
import type { PlateTextProps } from 'platejs/react';
import { PlateText, usePluginOption } from 'platejs/react';
import React from 'react';
import { cn } from '@/lib/utils';
import { StreamContentPlugin } from '../plugins/stream-content-plugin';
export function StreamingText(props: PlateTextProps) {
const isStreaming = usePluginOption(StreamContentPlugin, 'isStreaming');
const isStreaming = props.editor.getPlugin(StreamContentPlugin).api.streamContent.isStreaming();
const isLastStreamingText = isStreaming && false;
// const isLastStreamingText = isStreaming && false;
return (
<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-[""]',
]
// 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-[""]',
// ]
)}
{...props}
/>

1
apps/web/src/components/ui/report/plugins/stream-content-kit.tsx
View File

@ -1,3 +1,2 @@
import { StreamContentPlugin } from './stream-content-plugin';
import { StreamContentPluginColored } from './stream-content-plugin-colored';
export const StreamContentKit = [StreamContentPluginColored];

1
apps/web/src/components/ui/report/useReportEditor.tsx
View File

@ -79,6 +79,7 @@ const useEditorServerUpdates = ({
const { run: throttleStreamUpdate } = useThrottleFn(
(v: string) => {
const streamContentPlugin = editor.getPlugin(StreamContentPlugin);
streamContentPlugin.api.streamContent.start();
markdownToPlatejs(editor, v).then((elements) => {
streamContentPlugin.api.streamContent.streamFull(elements);

2
apps/web/src/styles/tailwind.css
View File

@ -6,7 +6,7 @@
@source '../**/*.{ts,tsx}';
/*@import "./tailwindAnimations.css";
/*
@plugin 'tailwind-scrollbar-hide'; */

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

@ -60,6 +60,23 @@
}
}
@keyframes highlightFade {
0% {
/* Use highlight background, fallback to brand, then yellow */
background-color: var(--color-highlight-background, var(--color-purple-50, yellow));
/* Use box-shadow instead of border - doesn't take up space */
box-shadow: 0 1px 0 0 var(--color-highlight-border, var(--color-purple-200, yellow));
}
100% {
background-color: var(--color-highlight-to-background, transparent);
box-shadow: 0 0 0 0 var(--color-highlight-to-border, transparent);
}
}
.animate-highlight-fade {
animation: highlightFade var(--tw-duration, 2s) ease-out forwards;
}
.fade-in {
animation-name: fade-in;
animation-duration: var(--tw-duration, 0.7s);