feat: core react library styles (#443)

.changeset/calm-beans-retire.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": minor
+---
+
+refactor!: Rename AssistantMessage to ThreadAssistantMessage

.changeset/giant-wombats-knock.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": minor
+---
+
+refactor!: Rename UserMessage to ThreadUserMessage

.changeset/lucky-needles-dance.md

@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-markdown": patch
+"@assistant-ui/react": patch
+---
+
+feat: add styled UI components

.changeset/tough-buttons-refuse.md

@@ -1,6 +1,5 @@
 ---
 "@assistant-ui/react-ai-sdk": minor
-"@assistant-ui/react-ui": minor
 "@assistant-ui/react": minor
 ---
 

apps/docs/components/modal/ModalChat.tsx

@@ -1,4 +1,4 @@
-import { AssistantModal } from "@assistant-ui/react-ui";
+import { AssistantModal } from "@assistant-ui/react";
 
 export const ModalChat = () => {
   return (

apps/docs/components/shadcn/Shadcn.tsx

@@ -1,14 +1,17 @@
 import { ArchiveIcon, EditIcon, MenuIcon, ShareIcon } from "lucide-react";
 import Link from "next/link";
+import { Thread, useSwitchToNewThread } from "@assistant-ui/react";
+import { makeMarkdownText } from "@assistant-ui/react-markdown";
 import remarkGfm from "remark-gfm";
+import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
+import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import type { TooltipContentProps } from "@radix-ui/react-tooltip";
+import Image from "next/image";
+import { type FC } from "react";
 
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import icon from "@/public/favicon/favicon.svg";
-import type { TooltipContentProps } from "@radix-ui/react-tooltip";
-import Image from "next/image";
-import { type FC } from "react";
-import { makeMarkdownText, Thread } from "@assistant-ui/react-ui";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import {
   TooltipProvider,
@@ -17,9 +20,6 @@ import {
   TooltipTrigger,
 } from "../ui/tooltip";
 import { ModelPicker } from "./ModelPicker";
-import { useSwitchToNewThread } from "@assistant-ui/react";
-import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
 
 const MarkdownText = makeMarkdownText({
   remarkPlugins: [remarkGfm],

apps/docs/content/docs/docs/migrations/v0-4.mdx

@@ -0,0 +1,40 @@
+---
+title: Migration to v0.4
+---
+
+## ThreadAssistantMessage / ThreadUserMessage
+
+The type `AssistantMessage` has been renamed to `ThreadAssistantMessage`.
+
+```diff
+- import { AssistantMessage } from "@assistant-ui/react";
++ import { ThreadAssistantMessage } from "@assistant-ui/react";
+```
+
+The type `UserMessage` has been renamed to `ThreadUserMessage`.
+
+```diff
+- import { UserMessage } from "@assistant-ui/react";
++ import { ThreadUserMessage } from "@assistant-ui/react";
+```
+
+The type `AssistantContentPart` has been renamed to `ThreadAssistantContentPart`.
+
+```diff
+- import { AssistantContentPart } from "@assistant-ui/react";
++ import { ThreadAssistantContentPart } from "@assistant-ui/react";
+```
+
+The type `UserContentPart` has been renamed to `ThreadUserContentPart`.
+
+```diff
+- import { UserContentPart } from "@assistant-ui/react";
++ import { ThreadUserContentPart } from "@assistant-ui/react";
+```
+
+## `@assistant-ui/react-ui` is now `@assistant-ui/react`
+
+```diff
+- import { Thread } from "@assistant-ui/react-ui";
++ import { Thread } from "@assistant-ui/react";
+```

apps/docs/package.json

@@ -14,8 +14,8 @@
     "@ai-sdk/react": "^0.0.16",
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-ai-sdk": "workspace:^",
+    "@assistant-ui/react-markdown": "workspace:^",
     "@assistant-ui/react-syntax-highlighter": "workspace:^",
-    "@assistant-ui/react-ui": "workspace:^",
     "@assistant-ui/tsconfig": "workspace:^",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

apps/docs/tailwind.config.ts

@@ -1,6 +1,5 @@
 import type { Config } from "tailwindcss";
 import { createPreset } from "fumadocs-ui/tailwind-plugin";
-import assistantuiPlugin from "@assistant-ui/react-ui/tailwindcss";
 
 const config = {
   darkMode: ["class"],
@@ -79,10 +78,8 @@ const config = {
   presets: [createPreset()],
   plugins: [
     require("tailwindcss-animate"),
-    assistantuiPlugin({
-      shadcn: true,
-      components: ["thread", "assistant-modal", "markdown"],
-    }),
+    require("@assistant-ui/react/tailwindcss")({ shadcn: true }),
+    require("@assistant-ui/react-markdown/tailwindcss"),
   ],
 } satisfies Config;
 

packages/react-ai-sdk/src/ui/utils/useVercelAIThreadSync.tsx

@@ -1,9 +1,9 @@
 import type {
-  AssistantMessage,
   TextContentPart,
   ThreadMessage,
   ToolCallContentPart,
   MessageStatus,
+  ThreadAssistantMessage,
 } from "@assistant-ui/react";
 import type { Message } from "ai";
 import { useEffect, useMemo } from "react";
@@ -59,7 +59,7 @@ const vercelToThreadMessage = (
 
     case "data":
     case "assistant": {
-      const res: AssistantMessage = {
+      const res: ThreadAssistantMessage = {
         ...common,
         role: "assistant",
         content: messages.flatMap((message) => {

packages/react-markdown/package.json

@@ -12,6 +12,19 @@
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       }
+    },
+    "./tailwindcss": {
+      "import": {
+        "types": "./dist/tailwindcss/index.d.mts",
+        "default": "./dist/tailwindcss/index.mjs"
+      },
+      "require": {
+        "types": "./dist/tailwindcss/index.d.ts",
+        "default": "./dist/tailwindcss/index.js"
+      }
+    },
+    "./styles/*": {
+      "default": "./dist/styles/*"
     }
   },
   "source": "./src/index.ts",
@@ -24,26 +37,34 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
+    "build": "tsx scripts/build.mts"
   },
   "dependencies": {
     "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.400.0",
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.3.5",
     "@types/react": "*",
-    "react": "^18"
+    "react": "^18",
+    "tailwindcss": "^3.4.4"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@assistant-ui/tsconfig": "workspace:*",
     "eslint-config-next": "14.2.4",
-    "tsup": "^8.1.0"
+    "tailwindcss": "^3.4.4",
+    "tsup": "^8.1.0",
+    "tsx": "^4.16.0"
   },
   "publishConfig": {
     "access": "public",

packages/react-markdown/scripts/build.mts

@@ -0,0 +1,38 @@
+import { build } from "tsup";
+import { copyFileSync, mkdirSync } from "node:fs";
+
+// JS
+await build({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  esbuildOptions: (options) => {
+    options.banner = {
+      js: '"use client";',
+    };
+  },
+});
+
+await build({
+  entry: ["src/tailwindcss/index.ts"],
+  outDir: "dist/tailwindcss",
+  format: ["cjs", "esm"],
+  dts: true,
+  sourcemap: true,
+});
+
+
+// css
+
+await build({
+  entry: ["src/styles/tailwindcss/markdown.css"],
+  outDir: "dist/styles",
+});
+
+mkdirSync("dist/styles/tailwindcss", { recursive: true });
+copyFileSync(
+  "src/styles/tailwindcss/markdown.css",
+  "dist/styles/tailwindcss/markdown.css",
+);

packages/react-markdown/src/index.ts

@@ -1,6 +1,16 @@
 export {
   MarkdownTextPrimitive,
   type MarkdownTextPrimitiveProps,
-} from "./MarkdownText";
+} from "./primitives/MarkdownText";
 
-export type { CodeHeaderProps, SyntaxHighlighterProps } from "./types";
+export type {
+  CodeHeaderProps,
+  SyntaxHighlighterProps,
+} from "./overrides/types";
+
+export {
+  makeMarkdownText,
+  type MakeMarkdownTextProps,
+} from "./ui/markdown-text";
+
+export { CodeHeader } from "./ui/code-header";

packages/react-markdown/src/withDefaults.tsx → packages/react-markdown/src/overrides/withDefaults.tsx

@@ -1,6 +1,4 @@
-export const classNames = (
-  ...classNames: (string | boolean | null | undefined)[]
-) => classNames.filter(Boolean).join(" ");
+import classNames from "classnames";
 
 export const withDefaultProps =
   <TProps extends { className?: string | undefined }>({

packages/react-markdown/src/MarkdownText.tsx → packages/react-markdown/src/primitives/MarkdownText.tsx

@@ -1,16 +1,16 @@
 import { INTERNAL, useContentPartText } from "@assistant-ui/react";
 import type { ComponentType, FC } from "react";
 import ReactMarkdown, { type Options } from "react-markdown";
-import { SyntaxHighlighterProps, CodeHeaderProps } from "./types";
-import { PreOverride } from "./PreOverride";
+import { SyntaxHighlighterProps, CodeHeaderProps } from "../overrides/types";
+import { PreOverride } from "../overrides/PreOverride";
 import {
   DefaultPre,
   DefaultCode,
   DefaultSyntaxHighlighter,
   DefaultCodeHeader,
-} from "./defaultComponents";
+} from "../overrides/defaultComponents";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
-import { CodeOverride } from "./CodeOverride";
+import { CodeOverride } from "../overrides/CodeOverride";
 
 const { useSmooth } = INTERNAL;
 

packages/react-markdown/src/tailwindcss/index.ts

@@ -0,0 +1,10 @@
+import plugin from "tailwindcss/plugin";
+
+const auiPlugin = plugin.withOptions<{}>(() => ({ addComponents }) => {
+  addComponents({
+    '@import "@assistant-ui/react-markdown/styles/tailwindcss/markdown.css"':
+      "",
+  });
+});
+
+export default auiPlugin;

packages/react-ui/src/components/code-header.tsx → packages/react-markdown/src/ui/code-header.tsx

@@ -1,9 +1,11 @@
 import { FC } from "react";
-import { useThreadConfig } from "./thread-config";
-import { useCopyToClipboard } from "../utils/useCopyToClipboard";
-import { TooltipIconButton } from "./base";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { CodeHeaderProps } from "@assistant-ui/react-markdown";
+import { useThreadConfig, INTERNAL } from "@assistant-ui/react";
+
+import { CodeHeaderProps } from "../overrides/types";
+import { useCopyToClipboard } from "./useCopyToClipboard";
+
+const { TooltipIconButton } = INTERNAL;
 
 export const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   const {

packages/react-ui/src/components/markdown-text.tsx → packages/react-markdown/src/ui/markdown-text.tsx

@@ -1,11 +1,13 @@
-import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
 import { TextContentPartProps } from "@assistant-ui/react";
-import { CodeHeader } from "./code-header";
-import { MarkdownTextPrimitiveProps } from "@assistant-ui/react-markdown";
 import { FC, memo } from "react";
-import { classNames } from "../utils/withDefaults";
+import { CodeHeader } from "./code-header";
+import classNames from "classnames";
+import {
+  MarkdownTextPrimitive,
+  MarkdownTextPrimitiveProps,
+} from "../primitives/MarkdownText";
 
-type MakeMarkdownTextProps = MarkdownTextPrimitiveProps;
+export type MakeMarkdownTextProps = MarkdownTextPrimitiveProps;
 
 export const makeMarkdownText = ({
   className,

packages/react-markdown/tsconfig.json

@@ -7,5 +7,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "dist"]
 }