Merge pull request #735 from buster-so/nate/report-hot-fix

Nate/report hot fix

apps/web/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "next dev --turbo",
-    "dev:fast": "make start-fast",
+    "dev:fast": "make fast",
     "build": "next build",
     "start": "next start",
     "lint": "next lint && npx prettier --write . '!src/components/ui/icons/**' --log-level error",

apps/web/src/components/ui/report/ReportEditor.tsx

@@ -64,6 +64,9 @@ export const ReportEditor = React.memo(
       // Initialize the editor instance using the custom useEditor hook
       const isReady = useRef(false);
 
+      // readOnly = true;
+      // isStreaming = true;
+
       const editor = useReportEditor({
         isStreaming,
         mode,
@@ -127,12 +130,12 @@ export const ReportEditor = React.memo(
               variant={variant}
               readonly={readOnly}
               disabled={disabled}
-              className={containerClassName}>
+              className={cn('pb-[20vh]', containerClassName)}>
               <Editor
                 style={style}
                 placeholder={placeholder}
                 disabled={disabled}
-                className={cn('pb-[20vh]', className)}
+                className={className}
                 autoFocus
               />
             </EditorContainer>

apps/web/src/components/ui/report/elements/StreamingText.tsx

@@ -15,10 +15,7 @@ export function StreamingText(props: PlateTextProps) {
     <PlateText
       className={cn(
         'streaming-node',
-        isStreaming && [
-          'bg-brand/4 border-b-brand/10 border-b-2',
-          'transition-all duration-200 ease-in-out'
-        ],
+        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-[""]'

apps/web/src/components/ui/report/plugins/stream-content-plugin.ts

@@ -53,14 +53,19 @@ export const StreamContentPlugin = createPlatePlugin({
       }
 
       // Prevent undo/redo and defer normalization for performance
-      editor.tf.withScrolling(() => {
-        editor.tf.withoutSaving(() => {
-          editor.tf.withoutNormalizing(() => {
-            const operations = buildUpdateOperations(editor, chunks);
-            executeOperations(operations);
+      editor.tf.withScrolling(
+        () => {
+          editor.tf.withoutSaving(() => {
+            editor.tf.withoutNormalizing(() => {
+              const operations = buildUpdateOperations(editor, chunks);
+              executeOperations(operations);
+            });
           });
-        });
-      });
+        },
+        {
+          scrollOptions: { behavior: 'smooth' }
+        }
+      );
     }
   }
 }));

apps/web/src/styles/tailwindAnimations.css

@@ -60,6 +60,28 @@
   }
 }
 
+/* 
+  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-200, yellow));
+    /* Only bottom border is visible at start */
+    border-bottom: 1px solid 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);
+  }
+}
+
+.animate-highlight-fade {
+  animation: highlightFade var(--tw-duration, 3s) ease-out forwards;
+}
+
 .fade-in {
   animation-name: fade-in;
   animation-duration: var(--tw-duration, 0.7s);