@dust-tt/sparkle 0.2.637 → 0.2.638-rc-1

package/src/components/streaming/StreamingParagraph.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+
+import { ParagraphBlock } from "@sparkle/components/markdown/ParagraphBlock";
+import { BlockStreamer } from "@sparkle/components/streaming/BlockStreamer";
+import type { ComponentProps } from "@sparkle/components/streaming/types";
+import {
+  getElementProps,
+  isReactElementWithProps,
+  keyOf,
+} from "@sparkle/components/streaming/utils";
+
+interface StreamingParagraphProps extends ComponentProps {
+  isStreaming: boolean;
+  animationName: string;
+  animationDuration: string;
+  animationTimingFunction: string;
+  textColor?: string;
+  forcedTextSize?: string;
+  sizes: Record<string, string>;
+}
+
+export function StreamingParagraph({
+  node,
+  isStreaming,
+  animationName,
+  animationDuration,
+  animationTimingFunction,
+  textColor,
+  forcedTextSize,
+  sizes,
+  ...props
+}: StreamingParagraphProps) {
+  const bk = keyOf(node, "p");
+
+  // Process children to handle mixed content (text, bold, italic, etc.).
+  const processChildren = (children: React.ReactNode): React.ReactNode => {
+    if (!children) {return null;}
+
+    // If it's just a string, stream it.
+    if (typeof children === "string") {
+      //   return createBlockStreamer(children);
+      return (
+        <BlockStreamer
+          text={children}
+          animate={isStreaming}
+          animationName={animationName}
+          animationDuration={animationDuration}
+          animationTimingFunction={animationTimingFunction}
+        />
+      );
+    }
+
+    // If it's an array, process each child.
+    if (Array.isArray(children)) {
+      return children.map((child, idx) => {
+        if (typeof child === "string") {
+          return (
+            <BlockStreamer
+              key={idx}
+              text={child}
+              animate={isStreaming}
+              animationName={animationName}
+              animationDuration={animationDuration}
+              animationTimingFunction={animationTimingFunction}
+            />
+          );
+        }
+
+        // React elements (strong, em, code, etc.) - recursively process their children.
+        if (isReactElementWithProps(child)) {
+          const childProps = getElementProps(child);
+          return React.cloneElement(
+            child,
+            { ...childProps, key: idx },
+            processChildren(childProps.children)
+          );
+        }
+
+        return child;
+      });
+    }
+
+    if (isReactElementWithProps(children)) {
+      const childProps = getElementProps(children);
+      return React.cloneElement(
+        children,
+        childProps,
+        processChildren(childProps.children)
+      );
+    }
+
+    return children;
+  };
+
+  return (
+    <ParagraphBlock
+      key={bk}
+      textColor={textColor || ""}
+      textSize={forcedTextSize || sizes.p}
+    >
+      {processChildren(props.children)}
+    </ParagraphBlock>
+  );
+}

package/src/components/streaming/index.ts

@@ -0,0 +1,2 @@
+export { StreamingMarkdown } from "./StreamingMarkdown";
+export type { StreamingMarkdownProps } from "./types";

package/src/components/streaming/markdownComponents.tsx

@@ -0,0 +1,270 @@
+import React from "react";
+import type { Components } from "react-markdown";
+
+import { BlockquoteBlock } from "@sparkle/components/markdown/BlockquoteBlock";
+import { CodeBlockWithExtendedSupport } from "@sparkle/components/markdown/CodeBlockWithExtendedSupport";
+import { OlBlock, UlBlock } from "@sparkle/components/markdown/List";
+import {
+  HrBlock,
+  ImgBlock,
+  Input,
+  LinkBlock,
+  StrongBlock,
+} from "@sparkle/components/markdown/Markdown";
+import { PreBlock } from "@sparkle/components/markdown/PreBlock";
+import {
+  TableBlock,
+  TableBodyBlock,
+  TableDataBlock,
+  TableHeadBlock,
+  TableHeaderBlock,
+} from "@sparkle/components/markdown/TableBlock";
+import { StreamingParagraph } from "@sparkle/components/streaming/StreamingParagraph";
+import { cn } from "@sparkle/lib/utils";
+
+import { BlockStreamer } from "./BlockStreamer";
+import { StreamingListItem } from "./StreamingListItem";
+import type { ComponentProps, ProcessChildrenContext } from "./types";
+import { MARKDOWN_TEXT_SIZES } from "./types";
+import { flatten, keyOf } from "./utils";
+
+interface CreateMarkdownComponentsParams {
+  textColor: string;
+  forcedTextSize?: string;
+  additionalMarkdownComponents?: Components;
+  processContext: ProcessChildrenContext;
+}
+
+export function createMarkdownComponents({
+  textColor,
+  forcedTextSize,
+  additionalMarkdownComponents,
+  processContext,
+}: CreateMarkdownComponentsParams): Components {
+  const {
+    isStreaming,
+    animationName,
+    animationDuration,
+    animationTimingFunction,
+  } = processContext;
+  const sizes = MARKDOWN_TEXT_SIZES;
+
+  return {
+    // Let parent blocks handle animation to keep identity stable
+    text: ({ ...props }: ComponentProps) => props.children,
+
+    h1: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h1
+          key={keyOf(node, "h1")}
+          className={cn("s-pb-2 s-pt-4", forcedTextSize || sizes.h1, textColor)}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h1>
+      );
+    },
+
+    h2: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h2
+          key={keyOf(node, "h2")}
+          className={cn("s-pb-2 s-pt-4", forcedTextSize || sizes.h2, textColor)}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h2>
+      );
+    },
+
+    h3: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h3
+          key={keyOf(node, "h3")}
+          className={cn("s-pb-2 s-pt-4", forcedTextSize || sizes.h3, textColor)}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h3>
+      );
+    },
+
+    h4: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h4
+          key={keyOf(node, "h4")}
+          className={cn("s-pb-2 s-pt-3", forcedTextSize || sizes.h4, textColor)}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h4>
+      );
+    },
+
+    h5: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h5
+          key={keyOf(node, "h5")}
+          className={cn(
+            "s-pb-1.5 s-pt-2.5",
+            forcedTextSize || sizes.h5,
+            textColor
+          )}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h5>
+      );
+    },
+
+    h6: ({ node, ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <h6
+          key={keyOf(node, "h6")}
+          className={cn(
+            "s-pb-1.5 s-pt-2.5",
+            forcedTextSize || sizes.h6,
+            textColor
+          )}
+          {...props}
+        >
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </h6>
+      );
+    },
+
+    p: ({ ...props }: ComponentProps) => (
+      <StreamingParagraph
+        {...props}
+        isStreaming={isStreaming}
+        animationName={animationName}
+        animationDuration={animationDuration}
+        animationTimingFunction={animationTimingFunction}
+        textColor={textColor}
+        forcedTextSize={forcedTextSize}
+        sizes={sizes}
+      />
+    ),
+    blockquote: ({ ...props }: ComponentProps) => (
+      <BlockquoteBlock>{props.children}</BlockquoteBlock>
+    ),
+
+    ul: ({ ...props }: ComponentProps) => (
+      <UlBlock textColor={textColor} textSize={forcedTextSize || sizes.p}>
+        {props.children}
+      </UlBlock>
+    ),
+
+    ol: ({ start, ...props }: ComponentProps & { start?: number }) => (
+      <OlBlock
+        start={start}
+        textColor={textColor}
+        textSize={forcedTextSize || sizes.p}
+      >
+        {props.children}
+      </OlBlock>
+    ),
+
+    li: (
+      props: ComponentProps & {
+        ordered?: boolean;
+        index?: number;
+        checked?: boolean | null;
+      }
+    ) => (
+      <StreamingListItem
+        {...props}
+        isStreaming={isStreaming}
+        animationName={animationName}
+        animationDuration={animationDuration}
+        animationTimingFunction={animationTimingFunction}
+        textColor={textColor}
+        forcedTextSize={forcedTextSize}
+        sizes={sizes}
+      />
+    ),
+
+    a: ({ ...props }: ComponentProps & { href?: string }) => (
+      <LinkBlock href={props.href}>{props.children}</LinkBlock>
+    ),
+
+    strong: ({ ...props }: ComponentProps) => (
+      <StrongBlock>{props.children}</StrongBlock>
+    ),
+
+    em: ({ ...props }: ComponentProps) => <em {...props}>{props.children}</em>,
+
+    pre: ({ children }: { children?: React.ReactNode }) => (
+      <PreBlock>{children}</PreBlock>
+    ),
+
+    code: CodeBlockWithExtendedSupport,
+
+    hr: HrBlock,
+
+    img: ImgBlock,
+
+    table: TableBlock,
+    thead: TableHeadBlock,
+    tbody: TableBodyBlock,
+    th: TableHeaderBlock,
+    td: ({ ...props }: ComponentProps) => {
+      const text = flatten(props.children);
+      return (
+        <TableDataBlock>
+          <BlockStreamer
+            text={text}
+            animate={isStreaming}
+            animationName={animationName}
+            animationDuration={animationDuration}
+            animationTimingFunction={animationTimingFunction}
+          />
+        </TableDataBlock>
+      );
+    },
+    input: Input,
+    ...additionalMarkdownComponents,
+  };
+}

package/src/components/streaming/types.ts

@@ -0,0 +1,72 @@
+import type React from "react";
+import type { Components } from "react-markdown";
+import type { PluggableList } from "react-markdown/lib/react-markdown";
+
+export interface StreamingMarkdownProps {
+  content: string;
+  animationName?: string;
+  animationDuration?: string;
+  animationTimingFunction?: string;
+  animationCurve?: "linear" | "accelerate" | "accelerate-fast" | "custom";
+  animationSteps?: Array<{ percent: number; opacity: number }>;
+  codeStyle?: React.CSSProperties;
+  isStreaming?: boolean;
+  isLastMessage?: boolean;
+  textColor?: string;
+  forcedTextSize?: string;
+  additionalMarkdownComponents?: Components;
+  additionalMarkdownPlugins?: PluggableList;
+}
+
+export interface DirectiveNode {
+  type: string;
+  name?: string;
+  value?: string;
+  children?: Array<{ value?: string }>;
+}
+
+export interface MarkdownNode {
+  position?: {
+    start?: {
+      line: number;
+      column: number;
+    };
+  };
+}
+
+export interface MdastNode {
+  type: string;
+  value?: string;
+  children?: MdastNode[];
+}
+
+export type ComponentProps = {
+  node?: MarkdownNode;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+};
+
+export interface BlockStreamerProps {
+  text: string;
+  animate?: boolean;
+  animationName: string;
+  animationDuration: string;
+  animationTimingFunction: string;
+}
+
+export interface ProcessChildrenContext {
+  isStreaming: boolean;
+  animationName: string;
+  animationDuration: string;
+  animationTimingFunction: string;
+}
+
+export const MARKDOWN_TEXT_SIZES = {
+  p: "s-copy-sm @sm:s-text-base @sm:s-leading-7",
+  h1: "s-heading-2xl",
+  h2: "s-heading-xl",
+  h3: "s-heading-lg",
+  h4: "s-text-base s-font-semibold",
+  h5: "s-text-sm s-font-semibold",
+  h6: "s-text-sm s-font-regular s-italic",
+} as const;

package/src/components/streaming/utils.ts

@@ -0,0 +1,126 @@
+import type { Root } from "hast";
+import React from "react";
+import { visit } from "unist-util-visit";
+
+import { CodeBlockWithExtendedSupport } from "@sparkle/components/markdown/CodeBlockWithExtendedSupport";
+import { OlBlock, UlBlock } from "@sparkle/components/markdown/List";
+import { PreBlock } from "@sparkle/components/markdown/PreBlock";
+import {
+  TableBlock,
+  TableBodyBlock,
+  TableDataBlock,
+  TableHeadBlock,
+  TableHeaderBlock,
+} from "@sparkle/components/markdown/TableBlock";
+
+import type { DirectiveNode, MarkdownNode, MdastNode } from "./types";
+
+export function isDirectiveNode(node: unknown): node is DirectiveNode {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    "type" in node &&
+    typeof (node as Record<string, unknown>).type === "string"
+  );
+}
+
+export function isReactElementWithProps(
+  el: unknown
+): el is React.ReactElement<{ children?: React.ReactNode }> {
+  return React.isValidElement(el);
+}
+
+export function getElementProps(
+  el: React.ReactElement
+): { children?: React.ReactNode } & Record<string, unknown> {
+  return el.props as { children?: React.ReactNode } & Record<string, unknown>;
+}
+
+export function isListElement(el: unknown): boolean {
+  return (
+    React.isValidElement(el) &&
+    (el.type === "ul" ||
+      el.type === "ol" ||
+      el.type === UlBlock ||
+      el.type === OlBlock)
+  );
+}
+
+export function isTableElement(el: unknown): boolean {
+  return (
+    React.isValidElement(el) &&
+    (el.type === "table" ||
+      el.type === TableBlock ||
+      el.type === "thead" ||
+      el.type === TableHeadBlock ||
+      el.type === "tbody" ||
+      el.type === TableBodyBlock ||
+      el.type === "th" ||
+      el.type === TableHeaderBlock ||
+      el.type === "td" ||
+      el.type === TableDataBlock ||
+      el.type === "tr")
+  );
+}
+
+export function isCodeElement(el: unknown): boolean {
+  return (
+    React.isValidElement(el) &&
+    (el.type === "code" ||
+      el.type === CodeBlockWithExtendedSupport ||
+      el.type === "pre" ||
+      el.type === PreBlock)
+  );
+}
+
+export function showUnsupportedDirective() {
+  return (tree: Root) => {
+    visit(tree, ["textDirective"], (node: unknown) => {
+      if (isDirectiveNode(node) && node.type === "textDirective") {
+        node.type = "text";
+        node.value = `:${node.name}${
+          node.children ? node.children.map((c) => c.value).join("") : ""
+        }`;
+      }
+    });
+  };
+}
+
+export function keyOf(
+  node: MarkdownNode | undefined,
+  fallback: string
+): string {
+  return node?.position?.start
+    ? `${node.position.start.line}:${node.position.start.column}`
+    : fallback;
+}
+
+export function flatten(child: React.ReactNode): string {
+  if (typeof child === "string") {return child;}
+  if (Array.isArray(child)) {return child.map((c) => flatten(c)).join("");}
+  if (isReactElementWithProps(child)) {
+    const props = getElementProps(child);
+    return flatten(props.children);
+  }
+  return "";
+}
+
+export function mdToText(n: MdastNode | undefined): string {
+  if (!n) {return "";}
+  switch (n.type) {
+    case "text":
+      return n.value || "";
+    case "paragraph":
+    case "emphasis":
+    case "strong":
+    case "delete":
+    case "link":
+      return (n.children || []).map(mdToText).join("");
+    case "inlineCode":
+      return n.value || "";
+    case "break":
+      return "\n";
+    default:
+      return "";
+  }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components";
+export * from "./components/streaming";
 export * from "./components/WindowUtility";
 export { SparkleContext } from "./context";
 export * from "./hooks";