@dust-tt/sparkle 0.2.644 → 0.2.646-rc-1

package/src/components/markdown/TextFormattingBlocks.tsx

@@ -0,0 +1,31 @@
+import React, { memo } from "react";
+
+import { sameNodePosition } from "@sparkle/components/markdown/utils";
+
+import { MarkdownNode } from "./types";
+
+interface StrongBlockProps {
+  children: React.ReactNode;
+  node?: MarkdownNode;
+}
+
+export const MemoStrongBlock = memo(
+  ({ children }: StrongBlockProps) => {
+    return (
+      <strong className="s-font-semibold s-text-foreground dark:s-text-foreground-night">
+        {children}
+      </strong>
+    );
+  },
+  (prev, next) => sameNodePosition(prev.node, next.node)
+);
+
+MemoStrongBlock.displayName = "StrongBlock";
+
+export const MemoHorizontalRuleBlock = memo(() => {
+  return (
+    <div className="s-my-6 s-border-b s-border-primary-150 dark:s-border-primary-150-night" />
+  );
+});
+
+MemoHorizontalRuleBlock.displayName = "HorizontalRuleBlock";

package/src/components/markdown/index.ts

@@ -1,8 +1,12 @@
 export * from "./CodeBlock";
 export * from "./CodeBlockWithExtendedSupport";
 export * from "./ContentBlockWrapper";
+export * from "./HeaderBlocks";
+export * from "./InputBlock";
+export * from "./LinkBlock";
 export * from "./Markdown";
 export * from "./MarkdownContentContext";
 export * from "./PrettyJsonViewer";
 export * from "./TableBlock";
+export * from "./TextFormattingBlocks";
 export * from "./utils";

package/src/components/markdown/types.ts

@@ -0,0 +1,5 @@
+type MarkdownPoint = { line?: number; column?: number };
+type MarkdownPosition = { start?: MarkdownPoint; end?: MarkdownPoint };
+export type MarkdownNode = {
+  position?: MarkdownPosition;
+};

package/src/components/markdown/utils.ts

@@ -1,3 +1,5 @@
+import { MarkdownNode } from "./types";
+
 export function sanitizeContent(str: string): string {
   // (1) Add closing backticks if they are missing such that we render a code block or inline
   // element during streaming.
@@ -39,3 +41,38 @@ export function detectLanguage(children: React.ReactNode) {
 
   return "text";
 }
+
+export function sameNodePosition(
+  prev?: MarkdownNode,
+  next?: MarkdownNode
+): boolean {
+  if (!(prev?.position || next?.position)) {
+    return true;
+  }
+  if (!(prev?.position && next?.position)) {
+    return false;
+  }
+
+  const prevStart = prev.position.start;
+  const nextStart = next.position.start;
+  const prevEnd = prev.position.end;
+  const nextEnd = next.position.end;
+
+  return (
+    prevStart?.line === nextStart?.line &&
+    prevStart?.column === nextStart?.column &&
+    prevEnd?.line === nextEnd?.line &&
+    prevEnd?.column === nextEnd?.column
+  );
+}
+
+export function sameTextStyling(
+  prev: { textColor?: string; textSize?: string; forcedTextSize?: string },
+  next: { textColor?: string; textSize?: string; forcedTextSize?: string }
+): boolean {
+  return (
+    prev.textColor === next.textColor &&
+    prev.textSize === next.textSize &&
+    prev.forcedTextSize === next.forcedTextSize
+  );
+}