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

package/src/components/streaming/markdownComponents.tsx

@@ -1,270 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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 "";
-  }
-}