feat: Add smooth streaming utility for message parts and introduce a new shimmer CSS utility.

Author: arnaudpfu

apps/mobile/components/ai-chat/markdown-text.tsx

@@ -7,25 +7,32 @@ import {
   type RenderersMap,
   MarkdownTextPrimitive,
 } from "@creatorem/ai-react-native/markdown";
+import * as MessagePartPrimitive from "@creatorem/ai-chat/primitives/message-part";
 import Clipboard from "@react-native-clipboard/clipboard";
 import { Text } from "../ui/text";
 import { View } from "react-native";
 import { Button } from "../ui/button";
 import { Icon } from "../ui/icon";
 import { cn } from "~/utils/cn";
 import { useCSSVariable } from "uniwind";
+// import { ShimmerText } from "../shimmer-text";
 
 const MarkdownTextImpl = () => {
   const textColor = useCSSVariable("--color-foreground");
   const textSecondaryColor = useCSSVariable("--color-secondary");
 
   return (
-    <MarkdownTextPrimitive
-      textColor={textColor}
-      textSecondaryColor={textSecondaryColor}
-      className="aui-md"
-      renderers={defaultComponents as unknown as Partial<RenderersMap>}
-    />
+    <>
+      <MarkdownTextPrimitive
+        textColor={textColor}
+        textSecondaryColor={textSecondaryColor}
+        className="aui-md"
+        renderers={defaultComponents as unknown as Partial<RenderersMap>}
+      />
+      {/* <MessagePartPrimitive.BeforeStream>
+        <ShimmerText text="Typing ..." />
+      </MessagePartPrimitive.BeforeStream> */}
+    </>
   );
 };
 

apps/nextjs-example/app/test2/markdown-text.tsx

@@ -1,27 +1,32 @@
 "use client";
 
-import "@creatorem/ai-assistant-react-markdown/styles/dot.css";
+import "@creatorem/ai-react/shimmer.css";
 
-import remarkGfm from "remark-gfm";
-import { type FC, memo, useState } from "react";
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-import { TooltipIconButton } from "@/components/ai-chat/tooltip-icon-button";
-import { cn } from "@/lib/utils";
+import * as MessagePartPrimitive from "@creatorem/ai-chat/primitives/message-part";
 import {
 	type CodeHeaderProps,
 	MarkdownTextPrimitive,
 	unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
 	useIsMarkdownCodeBlock,
 } from "@creatorem/ai-react/markdown";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { type FC, memo, useState } from "react";
+import remarkGfm from "remark-gfm";
+import { TooltipIconButton } from "@/components/ai-chat/tooltip-icon-button";
+import { cn } from "@/lib/utils";
 
 const MarkdownTextImpl = () => {
 	return (
-		<MarkdownTextPrimitive
-			remarkPlugins={[remarkGfm]}
-			className="aui-md"
-			components={defaultComponents}
-		/>
+		<>
+			<MarkdownTextPrimitive
+				remarkPlugins={[remarkGfm]}
+				className="aui-md"
+				components={defaultComponents}
+			/>
+			{/* <MessagePartPrimitive.BeforeStream>
+				<span className="shimmer text-foreground/60">Typing ...</span>
+			</MessagePartPrimitive.BeforeStream> */}
+		</>
 	);
 };
 

apps/nextjs-example/components/assistant-ui/markdown-text.tsx

@@ -9,6 +9,7 @@ import {
   useIsMarkdownCodeBlock,
 } from "@creatorem/ai-assistant-react-markdown";
 import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
 import { type FC, memo, useState } from "react";
 import { CheckIcon, CopyIcon } from "lucide-react";
 
@@ -19,6 +20,7 @@ const MarkdownTextImpl = () => {
   return (
     <MarkdownTextPrimitive
       remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeHighlight]}
       className="aui-md"
       components={defaultComponents}
     />

apps/nextjs-example/package.json

@@ -39,6 +39,7 @@
     "next": "16.1.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",

packages-test-3/ai-chat/src/component-types.ts

@@ -25,6 +25,7 @@ type Event = {
 export interface RuntimeComponents {
   Box: ComponentType<BaseComponentPropsWithChildren>
   Text: ComponentType<BaseComponentPropsWithChildren>
+  Shimmering: ComponentType<BaseComponentPropsWithChildren>
   Form: ComponentType<BaseComponentPropsWithChildren & { onSubmit?: (e: Event) => void; }>
   Button: ButtonComponent
   ScrollArea: ComponentType<BaseComponentPropsWithChildren>

packages-test-3/ai-chat/src/primitives/message-part/index.ts

@@ -1,5 +1,6 @@
 export { MessagePartPrimitiveText as Text } from "./message-part-text";
 export { MessagePartPrimitiveImage as Image } from "./message-part-image";
+// export { MessagePartPrimitiveBeforeStream as BeforeStream, useIsSmoothStreamingMessagePart } from "./message-part-before-stream";
 export { MessagePartPrimitiveInProgress as InProgress } from "./message-part-in-progress";
 
 export * from "./use-message-part-text";

packages-test-3/ai-chat/src/primitives/message-part/message-part-before-stream.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { FC, PropsWithChildren, useMemo } from "react";
+import { useMessagePartText } from "./use-message-part-text";
+import { useThread } from "../thread";
+
+export namespace MessagePartPrimitiveBeforeStream {
+  export type Props = PropsWithChildren;
+}
+
+const SMOOTH_START_MIN_CHARS = 100;
+
+export const useIsSmoothStreamingMessagePart = () => {
+  const messagePartText = useMessagePartText();
+  const {isRunning} = useThread();
+  
+  return useMemo(
+    () =>
+      isRunning &&
+    messagePartText.text.length >= SMOOTH_START_MIN_CHARS,
+    [messagePartText, isRunning],
+  );
+}
+
+export const MessagePartPrimitiveBeforeStream: FC<
+MessagePartPrimitiveBeforeStream.Props
+> = ({ children }) => {
+  const {isRunning} = useThread();
+  const messagePartText = useMessagePartText();
+
+  return isRunning && messagePartText.text.length < SMOOTH_START_MIN_CHARS ?  children: null;
+};
+

packages-test-3/ai-chat/src/primitives/message-part/message-part-text.tsx

@@ -8,6 +8,7 @@ import {
 import { useMessagePartText } from "./use-message-part-text";
 import { useRuntime } from "@creatorem/ai-chat/runtime";
 import type { RuntimeComponents } from "@creatorem/ai-chat/component-types";
+import { useSmoothStream } from "../../utils/smooth-stream";
 
 export namespace MessagePartPrimitiveText {
   export type Element = ComponentRef<RuntimeComponents['Text'] >;
@@ -44,8 +45,7 @@ export const MessagePartPrimitiveText = forwardRef<
   MessagePartPrimitiveText.Element,
   MessagePartPrimitiveText.Props
 >(({ smooth = true, ...rest }, forwardedRef) => {
-  // const { text, status } = useSmooth(useMessagePartText(), smooth);
-  const { text, status } = useMessagePartText();
+  const { text, status } = useSmoothStream(useMessagePartText(), smooth);
   const { components: { Text } } = useRuntime();
 
   return (

packages-test-3/ai-chat/src/primitives/message/message-parts.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import { MessagePartPrimitiveText } from "../message-part/message-part-text";
 import { MessagePartPrimitiveImage } from "../message-part/message-part-image";
-import { MessagePartPrimitiveInProgress } from "../message-part/message-part-in-progress";
+// import { MessagePartPrimitiveInProgress } from "../message-part/message-part-before-stream";
 import { PartByIndexProvider, usePart } from "../message-part/part-by-index-provider";
 import { TextMessagePartProvider } from "./text-message-part-provider";
 import { useMessage } from "./message-by-index-provider";
@@ -28,6 +28,7 @@ import type {
 } from "../../types/message-part-component-types";
 import { MessagePartStatus } from "../../types/assistant-types";
 import { useRuntime } from "@creatorem/ai-chat/runtime";
+import { MessagePartPrimitiveInProgress } from "../message-part/message-part-in-progress";
 
 type MessagePartRange =
   | { type: "single"; index: number }

packages-test-3/ai-chat/src/utils/index.ts

@@ -6,4 +6,5 @@ export * from './create-context-store-hook';
 export * from './id-utils';
 export * from './message-repository';
 export * from './readonly-store';
-export * from './require-at-least-one';
+export * from './require-at-least-one';
+export * from './smooth-stream'