@assistant-ui/react-markdown 0.7.20 → 0.8.0

package/src/styles/tailwindcss/markdown.css

@@ -1,106 +0,0 @@
-/* running indicator */
-:where(.aui-md-running):empty::after,
-:where(.aui-md-running) > :where(:not(ol):not(ul):not(pre)):last-child::after,
-:where(.aui-md-running) > pre:last-child code::after,
-:where(.aui-md-running)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child:not(:has(* > li)))::after,
-:where(.aui-md-running)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child:not(:has(* > li)))::after,
-:where(.aui-md-running)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child)
-  > :where(:is(ol, ul):last-child)
-  > :where(li:last-child)::after {
-  @apply animate-pulse font-sans content-['\25CF'] ltr:ml-1 rtl:mr-1;
-}
-
-/* typography */
-.aui-md-h1 {
-  @apply mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0;
-}
-
-.aui-md-h2 {
-  @apply mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0;
-}
-
-.aui-md-h3 {
-  @apply mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0;
-}
-
-.aui-md-h4 {
-  @apply mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0;
-}
-
-.aui-md-h5 {
-  @apply my-4 text-lg font-semibold first:mt-0 last:mb-0;
-}
-
-.aui-md-h6 {
-  @apply my-4 font-semibold first:mt-0 last:mb-0;
-}
-
-.aui-md-p {
-  @apply mb-5 mt-5 leading-7 first:mt-0 last:mb-0;
-}
-
-.aui-md-a {
-  @apply text-aui-primary font-medium underline underline-offset-4;
-}
-
-.aui-md-blockquote {
-  @apply border-l-2 pl-6 italic;
-}
-
-.aui-md-ul {
-  @apply my-5 ml-6 list-disc [&>li]:mt-2;
-}
-
-.aui-md-ol {
-  @apply my-5 ml-6 list-decimal [&>li]:mt-2;
-}
-
-.aui-md-hr {
-  @apply my-5 border-b;
-}
-
-.aui-md-table {
-  @apply my-5 w-full border-separate border-spacing-0 overflow-y-auto;
-}
-
-.aui-md-th {
-  @apply bg-aui-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right;
-}
-
-.aui-md-td {
-  @apply border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right;
-}
-
-.aui-md-tr {
-  @apply m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg;
-}
-
-.aui-md-sup {
-  @apply [&>a]:text-xs [&>a]:no-underline;
-}
-
-.aui-md-pre {
-  @apply overflow-x-auto rounded-b-lg bg-black p-4 text-white;
-}
-
-.aui-md-inline-code {
-  @apply bg-aui-muted rounded border font-semibold;
-}
-
-.aui-code-header-root {
-  @apply flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white;
-}
-
-.aui-code-header-language {
-  @apply lowercase [&>span]:text-xs;
-}

package/src/tailwindcss/index.ts

@@ -1,8 +0,0 @@
-import plugin from "tailwindcss/plugin.js";
-import markdownCSS from "../../dist/styles/tailwindcss/markdown.css.json";
-
-const auiPlugin = plugin.withOptions<{}>(() => ({ addComponents }) => {
-  addComponents(markdownCSS);
-});
-
-export default auiPlugin;

package/src/ui/code-header.tsx

@@ -1,32 +0,0 @@
-import { FC } from "react";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { INTERNAL, useThreadConfig } from "@assistant-ui/react";
-
-import { CodeHeaderProps } from "../overrides/types";
-import { useCopyToClipboard } from "./useCopyToClipboard";
-
-const { TooltipIconButton } = INTERNAL;
-
-export const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
-  const {
-    strings: {
-      code: { header: { copy: { tooltip = "Copy" } = {} } = {} } = {},
-    } = {},
-  } = useThreadConfig();
-
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
-  const onCopy = () => {
-    if (!code || isCopied) return;
-    copyToClipboard(code);
-  };
-
-  return (
-    <div className="aui-code-header-root">
-      <span className="aui-code-header-language">{language}</span>
-      <TooltipIconButton tooltip={tooltip} onClick={onCopy}>
-        {!isCopied && <CopyIcon />}
-        {isCopied && <CheckIcon />}
-      </TooltipIconButton>
-    </div>
-  );
-};

package/src/ui/markdown-text.tsx

@@ -1,114 +0,0 @@
-import { FC, memo } from "react";
-import { CodeHeader } from "./code-header";
-import classNames from "classnames";
-import {
-  MarkdownTextPrimitive,
-  MarkdownTextPrimitiveProps,
-} from "../primitives/MarkdownText";
-import { INTERNAL } from "@assistant-ui/react";
-import { useIsMarkdownCodeBlock } from "../overrides/PreOverride";
-
-const { withSmoothContextProvider, useSmoothStatus } = INTERNAL;
-
-export type MakeMarkdownTextProps = MarkdownTextPrimitiveProps;
-
-const defaultComponents: MakeMarkdownTextProps["components"] = {
-  h1: ({ node, className, ...props }) => (
-    <h1 className={classNames("aui-md-h1", className)} {...props} />
-  ),
-  h2: ({ node, className, ...props }) => (
-    <h2 className={classNames("aui-md-h2", className)} {...props} />
-  ),
-  h3: ({ node, className, ...props }) => (
-    <h3 className={classNames("aui-md-h3", className)} {...props} />
-  ),
-  h4: ({ node, className, ...props }) => (
-    <h4 className={classNames("aui-md-h4", className)} {...props} />
-  ),
-  h5: ({ node, className, ...props }) => (
-    <h5 className={classNames("aui-md-h5", className)} {...props} />
-  ),
-  h6: ({ node, className, ...props }) => (
-    <h6 className={classNames("aui-md-h6", className)} {...props} />
-  ),
-  p: ({ node, className, ...props }) => (
-    <p className={classNames("aui-md-p", className)} {...props} />
-  ),
-  a: ({ node, className, ...props }) => (
-    <a className={classNames("aui-md-a", className)} {...props} />
-  ),
-  blockquote: ({ node, className, ...props }) => (
-    <blockquote
-      className={classNames("aui-md-blockquote", className)}
-      {...props}
-    />
-  ),
-  ul: ({ node, className, ...props }) => (
-    <ul className={classNames("aui-md-ul", className)} {...props} />
-  ),
-  ol: ({ node, className, ...props }) => (
-    <ol className={classNames("aui-md-ol", className)} {...props} />
-  ),
-  hr: ({ node, className, ...props }) => (
-    <hr className={classNames("aui-md-hr", className)} {...props} />
-  ),
-  table: ({ node, className, ...props }) => (
-    <table className={classNames("aui-md-table", className)} {...props} />
-  ),
-  th: ({ node, className, ...props }) => (
-    <th className={classNames("aui-md-th", className)} {...props} />
-  ),
-  td: ({ node, className, ...props }) => (
-    <td className={classNames("aui-md-td", className)} {...props} />
-  ),
-  tr: ({ node, className, ...props }) => (
-    <tr className={classNames("aui-md-tr", className)} {...props} />
-  ),
-  sup: ({ node, className, ...props }) => (
-    <sup className={classNames("aui-md-sup", className)} {...props} />
-  ),
-  pre: ({ node, className, ...props }) => (
-    <pre className={classNames("aui-md-pre", className)} {...props} />
-  ),
-  code: ({ node, className, ...props }) => {
-    const isCodeBlock = useIsMarkdownCodeBlock();
-    return (
-      <code
-        className={classNames(!isCodeBlock && "aui-md-inline-code", className)}
-        {...props}
-      />
-    );
-  },
-  CodeHeader,
-};
-
-export const makeMarkdownText = ({
-  className,
-  components: userComponents,
-  ...rest
-}: MakeMarkdownTextProps = {}) => {
-  const components = {
-    ...defaultComponents,
-    ...Object.fromEntries(
-      // ignore undefined values, so undefined values do not override default components
-      Object.entries(userComponents ?? {}).filter(([_, v]) => v !== undefined),
-    ),
-  };
-
-  const MarkdownTextImpl: FC = () => {
-    const status = useSmoothStatus();
-    return (
-      <MarkdownTextPrimitive
-        components={components}
-        {...rest}
-        className={classNames(
-          status.type === "running" && "aui-md-running",
-          className,
-        )}
-      />
-    );
-  };
-  MarkdownTextImpl.displayName = "MarkdownText";
-
-  return memo(withSmoothContextProvider(MarkdownTextImpl), () => true);
-};

package/src/ui/useCopyToClipboard.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-namespace useCopyToClipboard {
-  export interface Options {
-    copiedDuration?: number;
-  }
-}
-
-export const useCopyToClipboard = ({
-  copiedDuration = 3000,
-}: useCopyToClipboard.Options = {}) => {
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const copyToClipboard = (value: string) => {
-    if (!value) return;
-
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), copiedDuration);
-    });
-  };
-
-  return { isCopied, copyToClipboard };
-};

package/tailwindcss/README.md

@@ -1 +0,0 @@
-This directory exists to support subpath imports for TypeScript projects using --moduleResolution node.

package/tailwindcss/package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "tailwindcss",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

package/tailwindcss/package.json

@@ -1,5 +0,0 @@
-{
-  "main": "../dist/tailwindcss/index.js",
-  "module": "../dist/tailwindcss/index.mjs",
-  "types": "../dist/tailwindcss/index.d.ts"
-}