diff --git a/.changeset/calm-beans-retire.md b/.changeset/calm-beans-retire.md new file mode 100644 index 000000000..cc30a477d --- /dev/null +++ b/.changeset/calm-beans-retire.md @@ -0,0 +1,5 @@ +--- +"@assistant-ui/react": minor +--- + +refactor!: Rename AssistantMessage to ThreadAssistantMessage diff --git a/.changeset/giant-wombats-knock.md b/.changeset/giant-wombats-knock.md new file mode 100644 index 000000000..8bcd66a89 --- /dev/null +++ b/.changeset/giant-wombats-knock.md @@ -0,0 +1,5 @@ +--- +"@assistant-ui/react": minor +--- + +refactor!: Rename UserMessage to ThreadUserMessage diff --git a/.changeset/lucky-needles-dance.md b/.changeset/lucky-needles-dance.md new file mode 100644 index 000000000..f04581e16 --- /dev/null +++ b/.changeset/lucky-needles-dance.md @@ -0,0 +1,6 @@ +--- +"@assistant-ui/react-markdown": patch +"@assistant-ui/react": patch +--- + +feat: add styled UI components diff --git a/.changeset/tough-buttons-refuse.md b/.changeset/tough-buttons-refuse.md index 5d60cf338..781dacbc1 100644 --- a/.changeset/tough-buttons-refuse.md +++ b/.changeset/tough-buttons-refuse.md @@ -1,6 +1,5 @@ --- "@assistant-ui/react-ai-sdk": minor -"@assistant-ui/react-ui": minor "@assistant-ui/react": minor --- diff --git a/apps/docs/components/modal/ModalChat.tsx b/apps/docs/components/modal/ModalChat.tsx index 681be040c..422ed2132 100644 --- a/apps/docs/components/modal/ModalChat.tsx +++ b/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 ( diff --git a/apps/docs/components/shadcn/Shadcn.tsx b/apps/docs/components/shadcn/Shadcn.tsx index 7f856ae10..9a4491b69 100644 --- a/apps/docs/components/shadcn/Shadcn.tsx +++ b/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], diff --git a/apps/docs/content/docs/docs/migrations/v0-4.mdx b/apps/docs/content/docs/docs/migrations/v0-4.mdx new file mode 100644 index 000000000..6d4e9a5d2 --- /dev/null +++ b/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"; +``` diff --git a/apps/docs/package.json b/apps/docs/package.json index c6a58eb3f..19fbc0ef8 100644 --- a/apps/docs/package.json +++ b/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", diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts index f0da1a70e..ee7f9c6db 100644 --- a/apps/docs/tailwind.config.ts +++ b/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; diff --git a/packages/react-ai-sdk/src/ui/utils/useVercelAIThreadSync.tsx b/packages/react-ai-sdk/src/ui/utils/useVercelAIThreadSync.tsx index 0aad6707d..2f2fb3265 100644 --- a/packages/react-ai-sdk/src/ui/utils/useVercelAIThreadSync.tsx +++ b/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) => { diff --git a/packages/react-markdown/package.json b/packages/react-markdown/package.json index d2db92b07..2454ac73b 100644 --- a/packages/react-markdown/package.json +++ b/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", diff --git a/packages/react-markdown/scripts/build.mts b/packages/react-markdown/scripts/build.mts new file mode 100644 index 000000000..b3247454c --- /dev/null +++ b/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", +); diff --git a/packages/react-markdown/src/index.ts b/packages/react-markdown/src/index.ts index ca2e2e0c6..b69d03683 100644 --- a/packages/react-markdown/src/index.ts +++ b/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"; diff --git a/packages/react-markdown/src/CodeOverride.tsx b/packages/react-markdown/src/overrides/CodeOverride.tsx similarity index 100% rename from packages/react-markdown/src/CodeOverride.tsx rename to packages/react-markdown/src/overrides/CodeOverride.tsx diff --git a/packages/react-markdown/src/PreOverride.tsx b/packages/react-markdown/src/overrides/PreOverride.tsx similarity index 100% rename from packages/react-markdown/src/PreOverride.tsx rename to packages/react-markdown/src/overrides/PreOverride.tsx diff --git a/packages/react-markdown/src/defaultComponents.tsx b/packages/react-markdown/src/overrides/defaultComponents.tsx similarity index 100% rename from packages/react-markdown/src/defaultComponents.tsx rename to packages/react-markdown/src/overrides/defaultComponents.tsx diff --git a/packages/react-markdown/src/types.ts b/packages/react-markdown/src/overrides/types.ts similarity index 100% rename from packages/react-markdown/src/types.ts rename to packages/react-markdown/src/overrides/types.ts diff --git a/packages/react-markdown/src/withDefaults.tsx b/packages/react-markdown/src/overrides/withDefaults.tsx similarity index 72% rename from packages/react-markdown/src/withDefaults.tsx rename to packages/react-markdown/src/overrides/withDefaults.tsx index bfe9446f4..2c9bcc745 100644 --- a/packages/react-markdown/src/withDefaults.tsx +++ b/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 = ({ diff --git a/packages/react-markdown/src/MarkdownText.tsx b/packages/react-markdown/src/primitives/MarkdownText.tsx similarity index 86% rename from packages/react-markdown/src/MarkdownText.tsx rename to packages/react-markdown/src/primitives/MarkdownText.tsx index 141cd5161..d9de761c7 100644 --- a/packages/react-markdown/src/MarkdownText.tsx +++ b/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; diff --git a/packages/react-ui/src/styles/markdown.css b/packages/react-markdown/src/styles/tailwindcss/markdown.css similarity index 100% rename from packages/react-ui/src/styles/markdown.css rename to packages/react-markdown/src/styles/tailwindcss/markdown.css diff --git a/packages/react-markdown/src/tailwindcss/index.ts b/packages/react-markdown/src/tailwindcss/index.ts new file mode 100644 index 000000000..5ae0950c7 --- /dev/null +++ b/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; diff --git a/packages/react-ui/src/components/code-header.tsx b/packages/react-markdown/src/ui/code-header.tsx similarity index 76% rename from packages/react-ui/src/components/code-header.tsx rename to packages/react-markdown/src/ui/code-header.tsx index d012344bd..d05d0e54d 100644 --- a/packages/react-ui/src/components/code-header.tsx +++ b/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 = ({ language, code }) => { const { diff --git a/packages/react-ui/src/components/markdown-text.tsx b/packages/react-markdown/src/ui/markdown-text.tsx similarity index 77% rename from packages/react-ui/src/components/markdown-text.tsx rename to packages/react-markdown/src/ui/markdown-text.tsx index 9bfeec59c..4475ac279 100644 --- a/packages/react-ui/src/components/markdown-text.tsx +++ b/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, diff --git a/packages/react-ui/src/utils/useCopyToClipboard.tsx b/packages/react-markdown/src/ui/useCopyToClipboard.tsx similarity index 100% rename from packages/react-ui/src/utils/useCopyToClipboard.tsx rename to packages/react-markdown/src/ui/useCopyToClipboard.tsx diff --git a/packages/react-markdown/tsconfig.json b/packages/react-markdown/tsconfig.json index 09a74b1dc..04396427e 100644 --- a/packages/react-markdown/tsconfig.json +++ b/packages/react-markdown/tsconfig.json @@ -7,5 +7,5 @@ } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "exclude": ["node_modules", "dist"] } diff --git a/packages/react-ui/.eslintrc.json b/packages/react-ui/.eslintrc.json deleted file mode 100644 index bffb357a7..000000000 --- a/packages/react-ui/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/packages/react-ui/CHANGELOG.md b/packages/react-ui/CHANGELOG.md deleted file mode 100644 index 8c6629321..000000000 --- a/packages/react-ui/CHANGELOG.md +++ /dev/null @@ -1,66 +0,0 @@ -# @assistant-ui/react-ui - -## 0.0.18 - -### Patch Changes - -- ef25706: feat: Code Header and Syntax Highlighter support -- Updated dependencies [ef25706] - - @assistant-ui/react-markdown@0.0.5 - - @assistant-ui/react@0.3.5 - -## 0.0.17 - -### Patch Changes - -- Fix AssistantModalAnchor className - -## 0.0.16 - -### Patch Changes - -- 82bf546: feat: Thread Welcome Suggestions -- b5aa29f: feat: smooth streaming by default -- Updated dependencies [b5aa29f] - - @assistant-ui/react@0.3.3 - -## 0.0.15 - -### Patch Changes - -- 1a8919b: feat: smooth text streaming -- Updated dependencies [1a8919b] - - @assistant-ui/react-markdown@0.0.4 - - @assistant-ui/react@0.3.2 - -## 0.0.12 - -### Patch Changes - -- 05fd5d6: feat: runtime capabilities API -- Updated dependencies [05fd5d6] - - @assistant-ui/react@0.3.1 - -## 0.0.6 - -### Patch Changes - -- feat: add `AssistantModal` component -- feat: add `Thread` config API -- feat: add `MarkdownText` component - -### Patch Changes - -- Updated dependencies [3dd7384] -- Updated dependencies [23f474e] -- Updated dependencies [5b68f4a] - - @assistant-ui/react@0.3.0 - - @assistant-ui/react-markdown@1.0.0 - -## 0.0.4 - -### Patch Changes - -- Updated dependencies [de20b1c] -- Updated dependencies [2ab2cab] - - @assistant-ui/react@0.2.0 diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json deleted file mode 100644 index 460ae9474..000000000 --- a/packages/react-ui/package.json +++ /dev/null @@ -1,103 +0,0 @@ -{ - "name": "@assistant-ui/react-ui", - "version": "0.0.18", - "license": "MIT", - "exports": { - ".": { - "import": { - "types": "./dist/index.d.mts", - "default": "./dist/index.mjs" - }, - "require": { - "types": "./dist/index.d.ts", - "default": "./dist/index.js" - } - }, - "./tailwindcss": { - "import": { - "types": "./dist/tailwindcss.d.mts", - "default": "./dist/tailwindcss.mjs" - }, - "require": { - "types": "./dist/tailwindcss.d.ts", - "default": "./dist/tailwindcss.js" - } - }, - "./styles": { - "default": "./dist/styles/index.css" - }, - "./styles/*": { - "default": "./dist/styles/*.css" - }, - "./tailwindcss/styles/*.css": { - "default": "./dist/tailwindcss/styles/*.css" - }, - "./tailwindcss/themes/*.css": { - "default": "./dist/tailwindcss/themes/*.css" - } - }, - "source": "./src/index.ts", - "main": "./dist/index.js", - "module": "./dist/index.mjs", - "types": "./dist/index.d.ts", - "files": [ - "dist", - "README.md" - ], - "scripts": { - "build": "tsx scripts/build.mts" - }, - "dependencies": { - "@assistant-ui/react-markdown": "workspace:*", - "@radix-ui/react-avatar": "^1.1.0", - "@radix-ui/react-primitive": "^2.0.0", - "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-tooltip": "^1.1.2", - "@radix-ui/react-use-callback-ref": "^1.1.0", - "class-variance-authority": "^0.7.0", - "lucide-react": "^0.400.0", - "postcss": "^8.4.39", - "react-syntax-highlighter": "^15.5.0" - }, - "peerDependencies": { - "@assistant-ui/react": "^0.3.5", - "@types/react": "*", - "react": "^18", - "tailwindcss": "^3.4.4" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "tailwindcss": { - "optional": true - } - }, - "devDependencies": { - "@assistant-ui/tsconfig": "workspace:*", - "@assistant-ui/tailwindcss-transformer": "workspace:*", - "@types/node": "^20.14.9", - "@types/react-syntax-highlighter": "^15.5.13", - "autoprefixer": "^10.4.19", - "esbuild": "^0.23.0", - "eslint-config-next": "14.2.4", - "postcss-nested": "^6.0.1", - "tailwindcss": "^3.4.4", - "tailwindcss-animate": "^1.0.7", - "tsup": "^8.1.0", - "tsx": "^4.16.0", - "typescript": "^5.5.3" - }, - "publishConfig": { - "access": "public", - "provenance": true - }, - "homepage": "https://assistant-ui.com/", - "repository": { - "type": "git", - "url": "https://github.com/Yonom/assistant-ui/tree/main/packages/react" - }, - "bugs": { - "url": "https://github.com/Yonom/assistant-ui/issues" - } -} diff --git a/packages/react-ui/scripts/build.mts b/packages/react-ui/scripts/build.mts deleted file mode 100644 index 48bb0a965..000000000 --- a/packages/react-ui/scripts/build.mts +++ /dev/null @@ -1,47 +0,0 @@ -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.ts"], - format: ["cjs", "esm"], - dts: true, - sourcemap: true, -}); - -// css - -await build({ - entry: [ - "src/styles/index.css", - "src/styles/markdown.css", - "src/styles/modal.css", - ], - outDir: "dist/styles", -}); - -mkdirSync("dist/tailwindcss/styles", { recursive: true }); -copyFileSync( - "src/styles/base-components.css", - "dist/tailwindcss/styles/base-components.css", -); -copyFileSync("src/styles/thread.css", "dist/tailwindcss/styles/thread.css"); -copyFileSync("src/styles/markdown.css", "dist/tailwindcss/styles/markdown.css"); -copyFileSync("src/styles/modal.css", "dist/tailwindcss/styles/modal.css"); - -mkdirSync("dist/tailwindcss/themes", { recursive: true }); -copyFileSync("src/themes/default.css", "dist/tailwindcss/themes/default.css"); diff --git a/packages/react-ui/src/components/edit-composer.tsx b/packages/react-ui/src/components/edit-composer.tsx deleted file mode 100644 index 5abb387bf..000000000 --- a/packages/react-ui/src/components/edit-composer.tsx +++ /dev/null @@ -1,75 +0,0 @@ -"use client"; -import { ComposerPrimitive } from "@assistant-ui/react"; -import { forwardRef, type FC } from "react"; -import { Button, ButtonProps } from "./base/button"; -import { withDefaults } from "../utils/withDefaults"; -import { useThreadConfig } from "./thread-config"; - -export const EditComposer: FC = () => { - return ( - - - - - - - - - ); -}; - -EditComposer.displayName = "EditComposer"; - -export const EditComposerRoot = withDefaults(ComposerPrimitive.Root, { - className: "aui-edit-composer-root", -}); - -EditComposerRoot.displayName = "EditComposerRoot"; - -export const EditComposerInput = withDefaults(ComposerPrimitive.Input, { - className: "aui-edit-composer-input", -}); - -EditComposerInput.displayName = "EditComposerInput"; - -export const EditComposerFooter = withDefaults("div", { - className: "aui-edit-composer-footer", -}); - -EditComposerFooter.displayName = "EditComposerFooter"; - -export const EditComposerCancel = forwardRef< - HTMLButtonElement, - Partial ->((props, ref) => { - const { - strings: { editComposer: { cancel: { label = "Cancel" } = {} } = {} } = {}, - } = useThreadConfig(); - return ( - - - - ); -}); - -EditComposerCancel.displayName = "EditComposerCancel"; - -export const EditComposerSend = forwardRef< - HTMLButtonElement, - Partial ->((props, ref) => { - const { - strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}, - } = useThreadConfig(); - return ( - - - - ); -}); - -EditComposerSend.displayName = "EditComposerSend"; diff --git a/packages/react-ui/src/components/index.ts b/packages/react-ui/src/components/index.ts deleted file mode 100644 index cb26f0b2d..000000000 --- a/packages/react-ui/src/components/index.ts +++ /dev/null @@ -1,114 +0,0 @@ -export { - ThreadConfigProvider, - useThreadConfig, - type ThreadConfig, - type ThreadWelcomeConfig, - type UserMessageConfig, - type AssistantMessageConfig, - type StringsConfig, - type SuggestionConfig, - type ThreadConfigProviderProps, -} from "./thread-config"; - -export { - Thread, - ThreadRoot, - ThreadViewport, - ThreadMessages, - ThreadScrollToBottom, - ThreadViewportFooter, - type ThreadRootProps, -} from "./thread"; - -export { - UserMessage, - UserMessageRoot, - UserMessageContent, - type UserMessageContentProps, -} from "./user-message"; - -export { - UserActionBar, - UserActionBarRoot, - UserActionBarEdit, -} from "./user-action-bar"; - -export { - AssistantMessage, - AssistantMessageRoot, - AssistantAvatar, - AssistantMessageContent, - type AssistantMessageContentProps, -} from "./assistant-message"; - -export { - AssistantActionBar, - AssistantActionBarRoot, - AssistantActionBarCopy, - AssistantActionBarReload, -} from "./assistant-action-bar"; - -export { - BranchPicker, - BranchPickerRoot, - BranchPickerPrevious, - BranchPickerNext, - BranchPickerState, -} from "./branch-picker"; - -export { - Composer, - ComposerRoot, - ComposerInput, - ComposerAction, - ComposerSend, - ComposerCancel, -} from "./composer"; - -export { - EditComposer, - EditComposerRoot, - EditComposerInput, - EditComposerFooter, - EditComposerCancel, - EditComposerSend, -} from "./edit-composer"; - -export { AssistantModal, AssistantModalTrigger } from "./assistant-modal"; - -export { - ThreadWelcome, - ThreadWelcomeRoot, - ThreadWelcomeAvatar, - ThreadWelcomeMessage, - ThreadWelcomeCenter, - type ThreadWelcomeMessageProps, - ThreadWelcomeSuggestions, - ThreadWelcomeSuggestion, - type ThreadWelcomeSuggestionProps, -} from "./thread-welcome"; - -export { Text } from "./text"; - -export { CodeHeader } from "./code-header"; - -export { makeMarkdownText } from "./markdown-text"; - -export { - Avatar, - AvatarRoot, - AvatarImage, - AvatarFallback, - type AvatarProps, -} from "./base/avatar"; - -export { Button, buttonVariants, type ButtonProps } from "./base/button"; - -export { Tooltip, TooltipContent, TooltipTrigger } from "./base/tooltip"; - -export { - TooltipIconButton, - type TooltipIconButtonProps, -} from "./base/tooltip-icon-button"; - -export { CircleStopIcon } from "./base/CircleStopIcon"; diff --git a/packages/react-ui/src/components/text.tsx b/packages/react-ui/src/components/text.tsx deleted file mode 100644 index 3a2de6384..000000000 --- a/packages/react-ui/src/components/text.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { FC } from "react"; -import { - ContentPartPrimitive, - TextContentPartProps, -} from "@assistant-ui/react"; -import { classNames } from "../utils/withDefaults"; - -export const Text: FC = ({ status }) => { - return ( -

- -

- ); -}; diff --git a/packages/react-ui/src/components/user-message.tsx b/packages/react-ui/src/components/user-message.tsx deleted file mode 100644 index 82575ff55..000000000 --- a/packages/react-ui/src/components/user-message.tsx +++ /dev/null @@ -1,47 +0,0 @@ -"use client"; - -import { MessagePrimitive } from "@assistant-ui/react"; -import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; -import { BranchPicker } from "./branch-picker"; -import { withDefaults } from "../utils/withDefaults"; -import { MessagePrimitiveContentProps } from "@assistant-ui/react"; -import { UserActionBar } from "./user-action-bar"; -import { Text } from "./text"; - -export const UserMessage: FC = () => { - return ( - - - - - - ); -}; - -UserMessage.displayName = "UserMessage"; - -export const UserMessageRoot = withDefaults(MessagePrimitive.Root, { - className: "aui-user-message-root", -}); - -UserMessageRoot.displayName = "UserMessageRoot"; - -const UserMessageContentWrapper = withDefaults("div", { - className: "aui-user-message-content", -}); - -export type UserMessageContentProps = MessagePrimitiveContentProps & - ComponentPropsWithoutRef<"div">; - -export const UserMessageContent = forwardRef< - HTMLDivElement, - UserMessageContentProps ->(({ components, ...props }, ref) => { - return ( - - - - ); -}); - -UserMessageContent.displayName = "UserMessageContent"; diff --git a/packages/react-ui/src/index.ts b/packages/react-ui/src/index.ts deleted file mode 100644 index 40b494c5f..000000000 --- a/packages/react-ui/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./components"; diff --git a/packages/react-ui/src/styles/index.css b/packages/react-ui/src/styles/index.css deleted file mode 100644 index 66f3151ac..000000000 --- a/packages/react-ui/src/styles/index.css +++ /dev/null @@ -1,4 +0,0 @@ -@import "./base.css"; -@import "./base-components.css"; -@import "./thread.css"; -@import "../themes/default.css"; diff --git a/packages/react-ui/tsconfig.json b/packages/react-ui/tsconfig.json deleted file mode 100644 index 5c3cea088..000000000 --- a/packages/react-ui/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "@assistant-ui/tsconfig/base.json", - "compilerOptions": { - "paths": { - "@assistant-ui/*": ["../../packages/*/src"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "scripts/build.mts"], - "exclude": ["node_modules"] -} diff --git a/packages/react/package.json b/packages/react/package.json index 89a853cf4..697fc1035 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -51,6 +51,19 @@ "types": "./dist/edge.d.ts", "default": "./dist/edge.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", @@ -63,19 +76,23 @@ ], "sideEffects": false, "scripts": { - "build": "tsup src/index.ts src/server.ts --format cjs,esm --dts --sourcemap --clean" + "build": "tsx scripts/build.mts" }, "dependencies": { "@ai-sdk/provider": "^0.0.11", "@radix-ui/primitive": "^1.1.0", + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-compose-refs": "^1.1.0", "@radix-ui/react-context": "^1.1.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-primitive": "^2.0.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", "@radix-ui/react-use-callback-ref": "^1.1.0", "@radix-ui/react-use-escape-keydown": "^1.1.0", - "@radix-ui/react-use-layout-effect": "^1.1.0", + "class-variance-authority": "^0.7.0", + "classnames": "^2.5.1", + "lucide-react": "^0.400.0", "nanoid": "^5.0.7", "react-textarea-autosize": "^8.5.3", "zod": "^3.23.8", @@ -85,7 +102,8 @@ "@types/react": "*", "@types/react-dom": "*", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "tailwindcss": "^3.4.4" }, "peerDependenciesMeta": { "@types/react": { @@ -93,13 +111,23 @@ }, "@types/react-dom": { "optional": true + }, + "tailwindcss": { + "optional": true } }, "devDependencies": { - "@ai-sdk/react": "^0.0.16", + "@assistant-ui/tailwindcss-transformer": "workspace:*", "@assistant-ui/tsconfig": "workspace:*", "@types/node": "^20.14.9", - "tsup": "^8.1.0" + "autoprefixer": "^10.4.19", + "eslint-config-next": "14.2.4", + "postcss": "^8.4.39", + "postcss-nested": "^6.0.1", + "tailwindcss": "^3.4.4", + "tailwindcss-animate": "^1.0.7", + "tsup": "^8.1.0", + "tsx": "^4.16.0" }, "publishConfig": { "access": "public", diff --git a/packages/react-ui/postcss.config.mjs b/packages/react/postcss.config.mjs similarity index 100% rename from packages/react-ui/postcss.config.mjs rename to packages/react/postcss.config.mjs diff --git a/packages/react/scripts/build.mts b/packages/react/scripts/build.mts new file mode 100644 index 000000000..2dfd8fe9f --- /dev/null +++ b/packages/react/scripts/build.mts @@ -0,0 +1,49 @@ +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/edge.ts", "src/tailwindcss/index.ts"], + format: ["cjs", "esm"], + dts: true, + sourcemap: true, +}); + +// css + +await build({ + entry: ["src/styles/index.css", "src/styles/modal.css"], + outDir: "dist/styles", + dts: true, + sourcemap: true, +}); + +mkdirSync("dist/styles/tailwindcss", { recursive: true }); +copyFileSync( + "src/styles/tailwindcss/base-components.css", + "dist/styles/tailwindcss/base-components.css", +); +copyFileSync( + "src/styles/tailwindcss/thread.css", + "dist/styles/tailwindcss/thread.css", +); +copyFileSync( + "src/styles/tailwindcss/modal.css", + "dist/styles/tailwindcss/modal.css", +); + +mkdirSync("dist/styles/themes", { recursive: true }); +copyFileSync("src/styles/themes/default.css", "dist/styles/themes/default.css"); diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 1cf05ed36..8d8e76aeb 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -6,5 +6,6 @@ export * from "./primitives"; export * from "./runtime"; export * from "./types"; export * from "./stream/edge-runtime"; +export * from "./ui"; export * as INTERNAL from "./internal"; diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts index 19d1cd09b..594e4095b 100644 --- a/packages/react/src/internal.ts +++ b/packages/react/src/internal.ts @@ -2,3 +2,4 @@ export { ProxyConfigProvider } from "./utils/ProxyConfigProvider"; export { MessageRepository } from "./runtime/utils/MessageRepository"; export { BaseAssistantRuntime } from "./runtime/core/BaseAssistantRuntime"; export { useSmooth } from "./utils/hooks/useSmooth"; +export { TooltipIconButton } from "./ui/base/tooltip-icon-button"; diff --git a/packages/react/src/runtime/local/ChatModelAdapter.tsx b/packages/react/src/runtime/local/ChatModelAdapter.tsx index f08c49e4d..ddd5586a8 100644 --- a/packages/react/src/runtime/local/ChatModelAdapter.tsx +++ b/packages/react/src/runtime/local/ChatModelAdapter.tsx @@ -1,12 +1,12 @@ "use client"; import type { - AssistantContentPart, + ThreadAssistantContentPart, ThreadMessage, } from "../../types/AssistantTypes"; import type { ModelConfig } from "../../types/ModelConfigTypes"; export type ChatModelRunResult = { - content: AssistantContentPart[]; + content: ThreadAssistantContentPart[]; }; export type ChatModelRunOptions = { diff --git a/packages/react/src/runtime/local/LocalRuntime.tsx b/packages/react/src/runtime/local/LocalRuntime.tsx index 93229a2f8..57d2ac518 100644 --- a/packages/react/src/runtime/local/LocalRuntime.tsx +++ b/packages/react/src/runtime/local/LocalRuntime.tsx @@ -1,7 +1,7 @@ import type { AppendMessage, - AssistantMessage, - UserMessage, + ThreadAssistantMessage, + ThreadUserMessage, } from "../../types/AssistantTypes"; import { type ModelConfigProvider, @@ -83,7 +83,7 @@ class LocalThreadRuntime implements ThreadRuntime { public async append(message: AppendMessage): Promise { // add user message const userMessageId = generateId(); - const userMessage: UserMessage = { + const userMessage: ThreadUserMessage = { id: userMessageId, role: "user", content: message.content, @@ -101,7 +101,7 @@ class LocalThreadRuntime implements ThreadRuntime { const messages = this.repository.getMessages(); // add assistant message - const message: AssistantMessage = { + const message: ThreadAssistantMessage = { id, role: "assistant", status: { type: "in_progress" }, diff --git a/packages/react-ui/src/styles/base.css b/packages/react/src/styles/base.css similarity index 100% rename from packages/react-ui/src/styles/base.css rename to packages/react/src/styles/base.css diff --git a/packages/react/src/styles/index.css b/packages/react/src/styles/index.css new file mode 100644 index 000000000..f055a5065 --- /dev/null +++ b/packages/react/src/styles/index.css @@ -0,0 +1,4 @@ +@import "./base.css"; +@import "./tailwindcss/base-components.css"; +@import "./tailwindcss/thread.css"; +@import "./themes/default.css"; diff --git a/packages/react/src/styles/modal.css b/packages/react/src/styles/modal.css new file mode 100644 index 000000000..9b1040577 --- /dev/null +++ b/packages/react/src/styles/modal.css @@ -0,0 +1 @@ +@import "./tailwindcss/modal.css"; diff --git a/packages/react-ui/src/styles/base-components.css b/packages/react/src/styles/tailwindcss/base-components.css similarity index 100% rename from packages/react-ui/src/styles/base-components.css rename to packages/react/src/styles/tailwindcss/base-components.css diff --git a/packages/react-ui/src/styles/modal.css b/packages/react/src/styles/tailwindcss/modal.css similarity index 100% rename from packages/react-ui/src/styles/modal.css rename to packages/react/src/styles/tailwindcss/modal.css diff --git a/packages/react-ui/src/styles/thread.css b/packages/react/src/styles/tailwindcss/thread.css similarity index 100% rename from packages/react-ui/src/styles/thread.css rename to packages/react/src/styles/tailwindcss/thread.css diff --git a/packages/react-ui/src/themes/default.css b/packages/react/src/styles/themes/default.css similarity index 100% rename from packages/react-ui/src/themes/default.css rename to packages/react/src/styles/themes/default.css diff --git a/packages/react-ui/src/tailwindcss.ts b/packages/react/src/tailwindcss/index.ts similarity index 74% rename from packages/react-ui/src/tailwindcss.ts rename to packages/react/src/tailwindcss/index.ts index 8e0eb12d0..1c8eb127f 100644 --- a/packages/react-ui/src/tailwindcss.ts +++ b/packages/react/src/tailwindcss/index.ts @@ -1,45 +1,35 @@ import plugin from "tailwindcss/plugin"; type AssisstantTailwindPluginOptions = { - components?: ("markdown" | "thread" | "assistant-modal")[]; + components?: ("thread" | "assistant-modal")[]; shadcn?: boolean; }; const auiPlugin = plugin.withOptions( - ({ components = [], shadcn = false } = {}) => + ({ components = ["assistant-modal", "thread"], shadcn = false } = {}) => ({ addComponents }) => { - const markdown = components.includes("markdown"); const assistantModal = components.includes("assistant-modal"); - const thread = - markdown || assistantModal || components.includes("thread"); + const thread = assistantModal || components.includes("thread"); if (thread) { addComponents({ - '@import "@assistant-ui/react-ui/tailwindcss/styles/base-components.css"': + '@import "@assistant-ui/react/styles/tailwindcss/base-components.css"': "", }); addComponents({ - '@import "@assistant-ui/react-ui/tailwindcss/styles/thread.css"': "", + '@import "@assistant-ui/react/styles/tailwindcss/thread.css"': "", }); if (!shadcn) { addComponents({ - '@import "@assistant-ui/react-ui/tailwindcss/themes/default.css"': - "", + '@import "@assistant-ui/react/styles/themes/default.css"': "", }); } } if (assistantModal) { addComponents({ - '@import "@assistant-ui/react-ui/tailwindcss/styles/modal.css"': "", - }); - } - - if (markdown) { - addComponents({ - '@import "@assistant-ui/react-ui/tailwindcss/styles/markdown.css"': - "", + '@import "@assistant-ui/react/styles/tailwindcss/modal.css"': "", }); } }, diff --git a/packages/react/src/types/AssistantTypes.ts b/packages/react/src/types/AssistantTypes.ts index 88dd3f5c1..ac0eb10c5 100644 --- a/packages/react/src/types/AssistantTypes.ts +++ b/packages/react/src/types/AssistantTypes.ts @@ -23,12 +23,12 @@ export type ToolCallContentPart = { result?: TResult; }; -export type UserContentPart = +export type ThreadUserContentPart = | TextContentPart | ImageContentPart | UIContentPart; -export type AssistantContentPart = +export type ThreadAssistantContentPart = | TextContentPart | ToolCallContentPart | UIContentPart; @@ -50,19 +50,19 @@ export type MessageStatus = error: unknown; }; -export type SystemMessage = MessageCommonProps & { +export type ThreadSystemMessage = MessageCommonProps & { role: "system"; content: [TextContentPart]; }; -export type UserMessage = MessageCommonProps & { +export type ThreadUserMessage = MessageCommonProps & { role: "user"; - content: UserContentPart[]; + content: ThreadUserContentPart[]; }; -export type AssistantMessage = MessageCommonProps & { +export type ThreadAssistantMessage = MessageCommonProps & { role: "assistant"; - content: AssistantContentPart[]; + content: ThreadAssistantContentPart[]; status: MessageStatus; }; @@ -72,7 +72,10 @@ export type AppendMessage = { content: AppendContentPart[]; }; -export type ThreadMessage = SystemMessage | UserMessage | AssistantMessage; +export type ThreadMessage = + | ThreadSystemMessage + | ThreadUserMessage + | ThreadAssistantMessage; /** Core Message Types (without UI content parts) */ @@ -91,6 +94,6 @@ export type CoreAssistantMessage = MessageCommonProps & { }; export type CoreThreadMessage = - | SystemMessage + | ThreadSystemMessage | CoreUserMessage | CoreAssistantMessage; diff --git a/packages/react/src/types/index.ts b/packages/react/src/types/index.ts index dbe74f7f0..30d03fbd2 100644 --- a/packages/react/src/types/index.ts +++ b/packages/react/src/types/index.ts @@ -1,10 +1,11 @@ export type { ThreadMessage, - AssistantMessage, - UserMessage, + ThreadSystemMessage, + ThreadAssistantMessage, + ThreadUserMessage, AppendMessage, - AssistantContentPart, - UserContentPart, + ThreadAssistantContentPart, + ThreadUserContentPart, AppendContentPart, TextContentPart, ImageContentPart, diff --git a/packages/react-ui/src/components/assistant-action-bar.tsx b/packages/react/src/ui/assistant-action-bar.tsx similarity index 81% rename from packages/react-ui/src/components/assistant-action-bar.tsx rename to packages/react/src/ui/assistant-action-bar.tsx index 89c8bb5b1..d418948af 100644 --- a/packages/react-ui/src/components/assistant-action-bar.tsx +++ b/packages/react/src/ui/assistant-action-bar.tsx @@ -1,18 +1,15 @@ "use client"; -import { - ActionBarPrimitive, - MessagePrimitive, - useThreadContext, -} from "@assistant-ui/react"; import { forwardRef, type FC } from "react"; import { CheckIcon, CopyIcon, RefreshCwIcon } from "lucide-react"; +import { ActionBarPrimitive, MessagePrimitive } from "../primitives"; import { TooltipIconButton, TooltipIconButtonProps, } from "./base/tooltip-icon-button"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { useThreadConfig } from "./thread-config"; +import { useThreadContext } from "../context"; const useAllowCopy = () => { const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig(); @@ -28,7 +25,7 @@ const useAllowReload = () => { return reloadSupported && allowReload; }; -export const AssistantActionBar: FC = () => { +const AssistantActionBar: FC = () => { const allowCopy = useAllowCopy(); const allowReload = useAllowReload(); if (!allowCopy && !allowReload) return null; @@ -46,13 +43,13 @@ export const AssistantActionBar: FC = () => { AssistantActionBar.displayName = "AssistantActionBar"; -export const AssistantActionBarRoot = withDefaults(ActionBarPrimitive.Root, { +const AssistantActionBarRoot = withDefaults(ActionBarPrimitive.Root, { className: "aui-assistant-action-bar-root", }); AssistantActionBarRoot.displayName = "AssistantActionBarRoot"; -export const AssistantActionBarCopy = forwardRef< +const AssistantActionBarCopy = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -79,7 +76,7 @@ export const AssistantActionBarCopy = forwardRef< AssistantActionBarCopy.displayName = "AssistantActionBarCopy"; -export const AssistantActionBarReload = forwardRef< +const AssistantActionBarReload = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -100,3 +97,14 @@ export const AssistantActionBarReload = forwardRef< }); AssistantActionBarReload.displayName = "AssistantActionBarReload"; + +const exports = { + Root: AssistantActionBarRoot, + Reload: AssistantActionBarReload, + Copy: AssistantActionBarCopy, +}; + +export default Object.assign( + AssistantActionBar, + exports, +) as typeof AssistantActionBar & typeof exports; diff --git a/packages/react-ui/src/components/assistant-message.tsx b/packages/react/src/ui/assistant-message.tsx similarity index 58% rename from packages/react-ui/src/components/assistant-message.tsx rename to packages/react/src/ui/assistant-message.tsx index 827ab932d..386944573 100644 --- a/packages/react-ui/src/components/assistant-message.tsx +++ b/packages/react/src/ui/assistant-message.tsx @@ -1,21 +1,18 @@ "use client"; -import { - MessagePrimitive, - MessagePrimitiveContentProps, -} from "@assistant-ui/react"; import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; -import { BranchPicker } from "./branch-picker"; +import { MessagePrimitive, MessagePrimitiveContentProps } from "../primitives"; +import BranchPicker from "./branch-picker"; import { Avatar } from "./base/avatar"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { useThreadConfig } from "./thread-config"; -import { AssistantActionBar } from "./assistant-action-bar"; -import { Text } from "./text"; +import AssistantActionBar from "./assistant-action-bar"; +import ContentPart from "./content-part"; -export const AssistantMessage: FC = () => { +const AssistantMessage: FC = () => { return ( - + @@ -25,12 +22,12 @@ export const AssistantMessage: FC = () => { AssistantMessage.displayName = "AssistantMessage"; -export const AssistantAvatar: FC = () => { +const AssistantMessageAvatar: FC = () => { const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig(); return ; }; -export const AssistantMessageRoot = withDefaults(MessagePrimitive.Root, { +const AssistantMessageRoot = withDefaults(MessagePrimitive.Root, { className: "aui-assistant-message-root", }); @@ -43,7 +40,7 @@ const AssistantMessageContentWrapper = withDefaults("div", { export type AssistantMessageContentProps = MessagePrimitiveContentProps & ComponentPropsWithoutRef<"div">; -export const AssistantMessageContent = forwardRef< +const AssistantMessageContent = forwardRef< HTMLDivElement, AssistantMessageContentProps >(({ components: componentsProp, ...rest }, ref) => { @@ -51,10 +48,24 @@ export const AssistantMessageContent = forwardRef< return ( ); }); AssistantMessageContent.displayName = "AssistantMessageContent"; + +const exports = { + Root: AssistantMessageRoot, + Avatar: AssistantMessageAvatar, + Content: AssistantMessageContent, +}; + +export default Object.assign( + AssistantMessage, + exports, +) as typeof AssistantMessage & typeof exports; diff --git a/packages/react-ui/src/components/assistant-modal.tsx b/packages/react/src/ui/assistant-modal.tsx similarity index 80% rename from packages/react-ui/src/components/assistant-modal.tsx rename to packages/react/src/ui/assistant-modal.tsx index d83b788c0..35f5ac282 100644 --- a/packages/react-ui/src/components/assistant-modal.tsx +++ b/packages/react/src/ui/assistant-modal.tsx @@ -1,11 +1,14 @@ "use client"; import { type FC, forwardRef } from "react"; -import { AssistantModalPrimitive } from "@assistant-ui/react"; import { BotIcon, ChevronDownIcon } from "lucide-react"; -import { Thread } from "./thread"; -import { withDefaults } from "../utils/withDefaults"; +import { + AssistantModalPrimitive, + AssistantModalPrimitiveRootProps, +} from "../primitives"; +import Thread from "./thread"; +import { withDefaults } from "./utils/withDefaults"; import { TooltipIconButton, TooltipIconButtonProps, @@ -16,9 +19,8 @@ import { ThreadConfigProviderProps, useThreadConfig, } from "./thread-config"; -import { AssistantModalPrimitiveRootProps } from "@assistant-ui/react"; -export const AssistantModal: FC = (config) => { +const AssistantModal: FC = (config) => { return ( @@ -31,7 +33,7 @@ export const AssistantModal: FC = (config) => { AssistantModal.displayName = "AssistantModal"; -export const AssistantModalRoot: FC< +const AssistantModalRoot: FC< AssistantModalPrimitiveRootProps & ThreadConfigProviderProps > = ({ config, ...props }) => { return ( @@ -43,7 +45,7 @@ export const AssistantModalRoot: FC< AssistantModalRoot.displayName = "AssistantModalRoot"; -export const AssistantModalTrigger = forwardRef< +const AssistantModalTrigger = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -112,12 +114,18 @@ const AssistantModalButton = forwardRef< AssistantModalButton.displayName = "AssistantModalButton"; -export const AssistantModalContent = withDefaults( - AssistantModalPrimitive.Content, - { - className: "aui-root aui-modal-content", - sideOffset: 16, - }, -); +const AssistantModalContent = withDefaults(AssistantModalPrimitive.Content, { + className: "aui-root aui-modal-content", + sideOffset: 16, +}); AssistantModalContent.displayName = "AssistantModalContent"; + +const exports = { + Root: AssistantModalRoot, + Trigger: AssistantModalTrigger, + Content: AssistantModalContent, +}; + +export default Object.assign(AssistantModal, exports) as typeof AssistantModal & + typeof exports; diff --git a/packages/react-ui/src/components/base/CircleStopIcon.tsx b/packages/react/src/ui/base/CircleStopIcon.tsx similarity index 100% rename from packages/react-ui/src/components/base/CircleStopIcon.tsx rename to packages/react/src/ui/base/CircleStopIcon.tsx diff --git a/packages/react-ui/src/components/base/avatar.tsx b/packages/react/src/ui/base/avatar.tsx similarity index 94% rename from packages/react-ui/src/components/base/avatar.tsx rename to packages/react/src/ui/base/avatar.tsx index e9bc1666c..b40168e63 100644 --- a/packages/react-ui/src/components/base/avatar.tsx +++ b/packages/react/src/ui/base/avatar.tsx @@ -3,7 +3,7 @@ import type { FC } from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; -import { withDefaults } from "../../utils/withDefaults"; +import { withDefaults } from "../utils/withDefaults"; export type AvatarProps = { src?: string | undefined; diff --git a/packages/react-ui/src/components/base/button.tsx b/packages/react/src/ui/base/button.tsx similarity index 100% rename from packages/react-ui/src/components/base/button.tsx rename to packages/react/src/ui/base/button.tsx diff --git a/packages/react-ui/src/components/base/index.ts b/packages/react/src/ui/base/index.ts similarity index 100% rename from packages/react-ui/src/components/base/index.ts rename to packages/react/src/ui/base/index.ts diff --git a/packages/react-ui/src/components/base/tooltip-icon-button.tsx b/packages/react/src/ui/base/tooltip-icon-button.tsx similarity index 100% rename from packages/react-ui/src/components/base/tooltip-icon-button.tsx rename to packages/react/src/ui/base/tooltip-icon-button.tsx diff --git a/packages/react-ui/src/components/base/tooltip.tsx b/packages/react/src/ui/base/tooltip.tsx similarity index 90% rename from packages/react-ui/src/components/base/tooltip.tsx rename to packages/react/src/ui/base/tooltip.tsx index 49bc2d5e5..209d4af11 100644 --- a/packages/react-ui/src/components/base/tooltip.tsx +++ b/packages/react/src/ui/base/tooltip.tsx @@ -1,7 +1,7 @@ "use client"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import { withDefaults } from "../../utils/withDefaults"; +import { withDefaults } from "../utils/withDefaults"; import { FC } from "react"; export const Tooltip: FC = (props) => { diff --git a/packages/react-ui/src/components/branch-picker.tsx b/packages/react/src/ui/branch-picker.tsx similarity index 78% rename from packages/react-ui/src/components/branch-picker.tsx rename to packages/react/src/ui/branch-picker.tsx index 0f5564508..d8ba0be85 100644 --- a/packages/react-ui/src/components/branch-picker.tsx +++ b/packages/react/src/ui/branch-picker.tsx @@ -1,15 +1,17 @@ "use client"; -import { BranchPickerPrimitive } from "@assistant-ui/react"; + import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; + import { TooltipIconButton, TooltipIconButtonProps, } from "./base/tooltip-icon-button"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { useThreadConfig } from "./thread-config"; +import { BranchPickerPrimitive } from "../primitives"; -export const BranchPicker: FC = () => { +const BranchPicker: FC = () => { return ( @@ -21,13 +23,13 @@ export const BranchPicker: FC = () => { BranchPicker.displayName = "BranchPicker"; -export const BranchPickerRoot = withDefaults(BranchPickerPrimitive.Root, { +const BranchPickerRoot = withDefaults(BranchPickerPrimitive.Root, { className: "aui-branch-picker-root", }); BranchPickerRoot.displayName = "BranchPickerRoot"; -export const BranchPickerPrevious = forwardRef< +const BranchPickerPrevious = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -51,7 +53,7 @@ const BranchPickerStateWrapper = withDefaults("span", { className: "aui-branch-picker-state", }); -export const BranchPickerState = forwardRef< +const BranchPickerState = forwardRef< HTMLSpanElement, ComponentPropsWithoutRef<"span"> >((props, ref) => { @@ -64,7 +66,7 @@ export const BranchPickerState = forwardRef< BranchPickerState.displayName = "BranchPickerState"; -export const BranchPickerNext = forwardRef< +const BranchPickerNext = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -81,3 +83,12 @@ export const BranchPickerNext = forwardRef< }); BranchPickerNext.displayName = "BranchPickerNext"; + +const exports = { + Root: BranchPickerRoot, + Previous: BranchPickerPrevious, + Next: BranchPickerNext, +}; + +export default Object.assign(BranchPicker, exports) as typeof BranchPicker & + typeof exports; diff --git a/packages/react-ui/src/components/composer.tsx b/packages/react/src/ui/composer.tsx similarity index 70% rename from packages/react-ui/src/components/composer.tsx rename to packages/react/src/ui/composer.tsx index 663c65a40..8ac62d31d 100644 --- a/packages/react-ui/src/components/composer.tsx +++ b/packages/react/src/ui/composer.tsx @@ -1,22 +1,19 @@ "use client"; -import { - ComposerPrimitive, - ThreadPrimitive, - useThreadContext, -} from "@assistant-ui/react"; import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; import { SendHorizonalIcon } from "lucide-react"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { useThreadConfig } from "./thread-config"; import { TooltipIconButton, TooltipIconButtonProps, } from "./base/tooltip-icon-button"; import { CircleStopIcon } from "./base/CircleStopIcon"; +import { ComposerPrimitive, ThreadPrimitive } from "../primitives"; +import { useThreadContext } from "../context"; -export const Composer: FC = () => { +const Composer: FC = () => { return ( @@ -27,7 +24,7 @@ export const Composer: FC = () => { Composer.displayName = "Composer"; -export const ComposerRoot = withDefaults(ComposerPrimitive.Root, { +const ComposerRoot = withDefaults(ComposerPrimitive.Root, { className: "aui-composer-root", }); @@ -39,18 +36,21 @@ const ComposerInputStyled = withDefaults(ComposerPrimitive.Input, { className: "aui-composer-input", }); -type ComposerInputProps = ComponentPropsWithoutRef; -export const ComposerInput = forwardRef< - HTMLTextAreaElement, - ComposerInputProps ->((props, ref) => { - const { - strings: { - composer: { input: { placeholder = "Write a message..." } = {} } = {}, - } = {}, - } = useThreadConfig(); - return ; -}); +export type ComposerInputProps = ComponentPropsWithoutRef< + typeof ComposerInputStyled +>; +const ComposerInput = forwardRef( + (props, ref) => { + const { + strings: { + composer: { input: { placeholder = "Write a message..." } = {} } = {}, + } = {}, + } = useThreadConfig(); + return ( + + ); + }, +); ComposerInput.displayName = "ComposerInput"; @@ -60,7 +60,7 @@ const useAllowCancel = () => { return cancelSupported; }; -export const ComposerAction: FC = () => { +const ComposerAction: FC = () => { const allowCancel = useAllowCancel(); if (!allowCancel) return ; return ( @@ -82,7 +82,7 @@ const ComposerSendButton = withDefaults(TooltipIconButton, { className: "aui-composer-send", }); -export const ComposerSend = forwardRef< +const ComposerSend = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -105,7 +105,7 @@ const ComposerCancelButton = withDefaults(TooltipIconButton, { className: "aui-composer-cancel", }); -export const ComposerCancel = forwardRef< +const ComposerCancel = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -122,3 +122,14 @@ export const ComposerCancel = forwardRef< }); ComposerCancel.displayName = "ComposerCancel"; + +const exports = { + Root: ComposerRoot, + Input: ComposerInput, + Action: ComposerAction, + Send: ComposerSend, + Cancel: ComposerCancel, +}; + +export default Object.assign(Composer, exports) as typeof Composer & + typeof exports; diff --git a/packages/react/src/ui/content-part.tsx b/packages/react/src/ui/content-part.tsx new file mode 100644 index 000000000..3adae634a --- /dev/null +++ b/packages/react/src/ui/content-part.tsx @@ -0,0 +1,22 @@ +import { FC } from "react"; + +import { ContentPartPrimitive } from "../primitives"; +import { TextContentPartProps } from "../types"; +import classNames from "classnames"; + +const Text: FC = ({ status }) => { + return ( +

+ +

+ ); +}; + +const exports = { Text }; + +export default exports; diff --git a/packages/react/src/ui/edit-composer.tsx b/packages/react/src/ui/edit-composer.tsx new file mode 100644 index 000000000..4c25ec227 --- /dev/null +++ b/packages/react/src/ui/edit-composer.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { forwardRef, type FC } from "react"; + +import { Button, ButtonProps } from "./base/button"; +import { withDefaults } from "./utils/withDefaults"; +import { useThreadConfig } from "./thread-config"; +import { ComposerPrimitive } from "../primitives"; + +const EditComposer: FC = () => { + return ( + + + + + + + + + ); +}; + +EditComposer.displayName = "EditComposer"; + +const EditComposerRoot = withDefaults(ComposerPrimitive.Root, { + className: "aui-edit-composer-root", +}); + +EditComposerRoot.displayName = "EditComposerRoot"; + +const EditComposerInput = withDefaults(ComposerPrimitive.Input, { + className: "aui-edit-composer-input", +}); + +EditComposerInput.displayName = "EditComposerInput"; + +const EditComposerFooter = withDefaults("div", { + className: "aui-edit-composer-footer", +}); + +EditComposerFooter.displayName = "EditComposerFooter"; + +const EditComposerCancel = forwardRef>( + (props, ref) => { + const { + strings: { + editComposer: { cancel: { label = "Cancel" } = {} } = {}, + } = {}, + } = useThreadConfig(); + return ( + + + + ); + }, +); + +EditComposerCancel.displayName = "EditComposerCancel"; + +const EditComposerSend = forwardRef>( + (props, ref) => { + const { + strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}, + } = useThreadConfig(); + return ( + + + + ); + }, +); + +EditComposerSend.displayName = "EditComposerSend"; + +const exports = { + Root: EditComposerRoot, + Input: EditComposerInput, + Footer: EditComposerFooter, + Cancel: EditComposerCancel, + Send: EditComposerSend, +}; + +export default Object.assign(EditComposer, exports) as typeof EditComposer & + typeof exports; diff --git a/packages/react/src/ui/index.ts b/packages/react/src/ui/index.ts new file mode 100644 index 000000000..86ebe642f --- /dev/null +++ b/packages/react/src/ui/index.ts @@ -0,0 +1,45 @@ +// TODO figure out the export format + +export { + ThreadConfigProvider, + useThreadConfig, + type ThreadConfig, + type ThreadWelcomeConfig, + type UserMessageConfig, + type AssistantMessageConfig, + type StringsConfig, + type SuggestionConfig, + type ThreadConfigProviderProps, +} from "./thread-config"; + +export { default as AssistantActionBar } from "./assistant-action-bar"; + +export { + default as AssistantMessage, + type AssistantMessageContentProps, +} from "./assistant-message"; + +export { default as AssistantModal } from "./assistant-modal"; + +export { default as BranchPicker } from "./branch-picker"; + +export { default as Composer, type ComposerInputProps } from "./composer"; + +export { default as EditComposer } from "./edit-composer"; + +export { default as Thread, type ThreadRootProps } from "./thread"; + +export { + default as UserMessage, + type UserMessageContentProps, +} from "./user-message"; + +export { default as UserActionBar } from "./user-action-bar"; + +export { + default as ThreadWelcome, + type ThreadWelcomeMessageProps, + type ThreadWelcomeSuggestionProps, +} from "./thread-welcome"; + +export { default as ContentPart } from "./content-part"; diff --git a/packages/react-ui/src/components/thread-config.tsx b/packages/react/src/ui/thread-config.tsx similarity index 94% rename from packages/react-ui/src/components/thread-config.tsx rename to packages/react/src/ui/thread-config.tsx index 90e3fc4ee..6ac4ec768 100644 --- a/packages/react-ui/src/components/thread-config.tsx +++ b/packages/react/src/ui/thread-config.tsx @@ -1,11 +1,9 @@ -import { - AssistantRuntimeProvider, - TextContentPartComponent, - useAssistantContext, -} from "@assistant-ui/react"; import { FC, PropsWithChildren, createContext, useContext } from "react"; + import { AvatarProps } from "./base/avatar"; -import { AssistantRuntime } from "@assistant-ui/react"; +import { TextContentPartComponent } from "../types"; +import { AssistantRuntime } from "../runtime"; +import { AssistantRuntimeProvider, useAssistantContext } from "../context"; export type SuggestionConfig = { text: string; diff --git a/packages/react-ui/src/components/thread-welcome.tsx b/packages/react/src/ui/thread-welcome.tsx similarity index 72% rename from packages/react-ui/src/components/thread-welcome.tsx rename to packages/react/src/ui/thread-welcome.tsx index 9e5e301a5..4ed7a6061 100644 --- a/packages/react-ui/src/components/thread-welcome.tsx +++ b/packages/react/src/ui/thread-welcome.tsx @@ -1,12 +1,12 @@ "use client"; -import { ThreadPrimitive } from "@assistant-ui/react"; import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { Avatar } from "./base/avatar"; import { SuggestionConfig, useThreadConfig } from "./thread-config"; +import { ThreadPrimitive } from "../primitives"; -export const ThreadWelcome: FC = () => { +const ThreadWelcome: FC = () => { return ( @@ -24,26 +24,25 @@ const ThreadWelcomeRootStyled = withDefaults("div", { className: "aui-thread-welcome-root", }); -export const ThreadWelcomeCenter = withDefaults("div", { +const ThreadWelcomeCenter = withDefaults("div", { className: "aui-thread-welcome-center", }); type ThreadWelcomeRootProps = ComponentPropsWithoutRef<"div">; -export const ThreadWelcomeRoot = forwardRef< - HTMLDivElement, - ThreadWelcomeRootProps ->((props, ref) => { - return ( - - - - ); -}); +const ThreadWelcomeRoot = forwardRef( + (props, ref) => { + return ( + + + + ); + }, +); ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot"; -export const ThreadWelcomeAvatar: FC = () => { +const ThreadWelcomeAvatar: FC = () => { const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig(); return ; }; @@ -57,7 +56,7 @@ export type ThreadWelcomeMessageProps = Omit< "children" > & { message?: string | undefined }; -export const ThreadWelcomeMessage = forwardRef< +const ThreadWelcomeMessage = forwardRef< HTMLParagraphElement, ThreadWelcomeMessageProps >(({ message: messageProp, ...rest }, ref) => { @@ -84,7 +83,7 @@ export type ThreadWelcomeSuggestionProps = { suggestion: SuggestionConfig; }; -export const ThreadWelcomeSuggestion: FC = ({ +const ThreadWelcomeSuggestion: FC = ({ suggestion: { text, prompt }, }) => { return ( @@ -98,7 +97,7 @@ export const ThreadWelcomeSuggestion: FC = ({ ); }; -export const ThreadWelcomeSuggestions: FC = () => { +const ThreadWelcomeSuggestions: FC = () => { const { welcome: { suggestions } = {} } = useThreadConfig(); return ( @@ -111,3 +110,15 @@ export const ThreadWelcomeSuggestions: FC = () => { }; ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions"; + +const exports = { + Root: ThreadWelcomeRoot, + Center: ThreadWelcomeCenter, + Avatar: ThreadWelcomeAvatar, + Message: ThreadWelcomeMessage, + Suggestions: ThreadWelcomeSuggestions, + Suggestion: ThreadWelcomeSuggestion, +}; + +export default Object.assign(ThreadWelcome, exports) as typeof ThreadWelcome & + typeof exports; diff --git a/packages/react-ui/src/components/thread.tsx b/packages/react/src/ui/thread.tsx similarity index 74% rename from packages/react-ui/src/components/thread.tsx rename to packages/react/src/ui/thread.tsx index 9134ab852..5b1507153 100644 --- a/packages/react-ui/src/components/thread.tsx +++ b/packages/react/src/ui/thread.tsx @@ -1,27 +1,27 @@ "use client"; -import { ThreadPrimitive } from "@assistant-ui/react"; import { ComponentType, forwardRef, type FC } from "react"; import { ArrowDownIcon } from "lucide-react"; -import { withDefaults } from "../utils/withDefaults"; -import { Composer } from "./composer"; -import { ThreadWelcome } from "./thread-welcome"; + +import { withDefaults } from "./utils/withDefaults"; +import Composer from "./composer"; +import ThreadWelcome from "./thread-welcome"; import { TooltipIconButton, TooltipIconButtonProps, } from "./base/tooltip-icon-button"; -import { AssistantMessage } from "./assistant-message"; -import { UserMessage } from "./user-message"; -import { EditComposer } from "./edit-composer"; +import AssistantMessage from "./assistant-message"; +import UserMessage from "./user-message"; +import EditComposer from "./edit-composer"; import { ThreadConfig, ThreadConfigProvider, ThreadConfigProviderProps, useThreadConfig, } from "./thread-config"; -import { ThreadPrimitiveRootProps } from "@assistant-ui/react"; +import { ThreadPrimitive, ThreadPrimitiveRootProps } from "../primitives"; -export const Thread: FC = (config) => { +const Thread: FC = (config) => { return ( @@ -43,7 +43,7 @@ const ThreadRootStyled = withDefaults(ThreadPrimitive.Root, { className: "aui-root aui-thread-root", }); -export const ThreadRoot = forwardRef( +const ThreadRoot = forwardRef( ({ config, ...props }, ref) => { return ( @@ -55,13 +55,13 @@ export const ThreadRoot = forwardRef( ThreadRoot.displayName = "ThreadRoot"; -export const ThreadViewport = withDefaults(ThreadPrimitive.Viewport, { +const ThreadViewport = withDefaults(ThreadPrimitive.Viewport, { className: "aui-thread-viewport", }); ThreadViewport.displayName = "ThreadViewport"; -export const ThreadViewportFooter = withDefaults("div", { +const ThreadViewportFooter = withDefaults("div", { className: "aui-thread-viewport-footer", }); @@ -69,7 +69,7 @@ ThreadViewportFooter.displayName = "ThreadViewportFooter"; const SystemMessage = () => null; -export const ThreadMessages: FC<{ +const ThreadMessages: FC<{ components?: { UserMessage?: ComponentType | undefined; EditComposer?: ComponentType | undefined; @@ -97,7 +97,7 @@ const ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, { className: "aui-thread-scroll-to-bottom", }); -export const ThreadScrollToBottom = forwardRef< +const ThreadScrollToBottom = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -116,3 +116,13 @@ export const ThreadScrollToBottom = forwardRef< }); ThreadScrollToBottom.displayName = "ThreadScrollToBottom"; + +const exports = { + Root: ThreadRoot, + Viewport: ThreadViewport, + Messages: ThreadMessages, + ScrollToBottom: ThreadScrollToBottom, + ViewportFooter: ThreadViewportFooter, +}; + +export default Object.assign(Thread, exports) as typeof Thread & typeof exports; diff --git a/packages/react-ui/src/components/user-action-bar.tsx b/packages/react/src/ui/user-action-bar.tsx similarity index 74% rename from packages/react-ui/src/components/user-action-bar.tsx rename to packages/react/src/ui/user-action-bar.tsx index 614ada8c4..728276c53 100644 --- a/packages/react-ui/src/components/user-action-bar.tsx +++ b/packages/react/src/ui/user-action-bar.tsx @@ -1,13 +1,16 @@ "use client"; -import { ActionBarPrimitive, useThreadContext } from "@assistant-ui/react"; + import { forwardRef, type FC } from "react"; import { PencilIcon } from "lucide-react"; + import { TooltipIconButton, TooltipIconButtonProps, } from "./base/tooltip-icon-button"; -import { withDefaults } from "../utils/withDefaults"; +import { withDefaults } from "./utils/withDefaults"; import { useThreadConfig } from "./thread-config"; +import { useThreadContext } from "../context"; +import { ActionBarPrimitive } from "../primitives"; const useAllowEdit = () => { const { userMessage: { allowEdit = true } = {} } = useThreadConfig(); @@ -16,7 +19,7 @@ const useAllowEdit = () => { return editSupported && allowEdit; }; -export const UserActionBar: FC = () => { +const UserActionBar: FC = () => { const allowEdit = useAllowEdit(); if (!allowEdit) return null; return ( @@ -28,13 +31,13 @@ export const UserActionBar: FC = () => { UserActionBar.displayName = "UserActionBar"; -export const UserActionBarRoot = withDefaults(ActionBarPrimitive.Root, { +const UserActionBarRoot = withDefaults(ActionBarPrimitive.Root, { className: "aui-user-action-bar-root", }); UserActionBarRoot.displayName = "UserActionBarRoot"; -export const UserActionBarEdit = forwardRef< +const UserActionBarEdit = forwardRef< HTMLButtonElement, Partial >((props, ref) => { @@ -53,3 +56,11 @@ export const UserActionBarEdit = forwardRef< }); UserActionBarEdit.displayName = "UserActionBarEdit"; + +const exports = { + Root: UserActionBarRoot, + Edit: UserActionBarEdit, +}; + +export default Object.assign(UserActionBar, exports) as typeof UserActionBar & + typeof exports; diff --git a/packages/react/src/ui/user-message.tsx b/packages/react/src/ui/user-message.tsx new file mode 100644 index 000000000..9899f8898 --- /dev/null +++ b/packages/react/src/ui/user-message.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { ComponentPropsWithoutRef, forwardRef, type FC } from "react"; + +import BranchPicker from "./branch-picker"; +import { withDefaults } from "./utils/withDefaults"; +import UserActionBar from "./user-action-bar"; +import ContentPart from "./content-part"; +import { MessagePrimitive, MessagePrimitiveContentProps } from "../primitives"; + +const UserMessage: FC = () => { + return ( + + + + + + ); +}; + +UserMessage.displayName = "UserMessage"; + +const UserMessageRoot = withDefaults(MessagePrimitive.Root, { + className: "aui-user-message-root", +}); + +UserMessageRoot.displayName = "UserMessageRoot"; + +const UserMessageContentWrapper = withDefaults("div", { + className: "aui-user-message-content", +}); + +export type UserMessageContentProps = MessagePrimitiveContentProps & + ComponentPropsWithoutRef<"div">; + +const UserMessageContent = forwardRef( + ({ components, ...props }, ref) => { + return ( + + + + ); + }, +); + +UserMessageContent.displayName = "UserMessageContent"; + +const exports = { + Root: UserMessageRoot, + Content: UserMessageContent, +}; + +export default Object.assign(UserMessage, exports) as typeof UserMessage & + typeof exports; diff --git a/packages/react-ui/src/utils/withDefaults.tsx b/packages/react/src/ui/utils/withDefaults.tsx similarity index 89% rename from packages/react-ui/src/utils/withDefaults.tsx rename to packages/react/src/ui/utils/withDefaults.tsx index 2e2638f7a..ce18239c0 100644 --- a/packages/react-ui/src/utils/withDefaults.tsx +++ b/packages/react/src/ui/utils/withDefaults.tsx @@ -4,10 +4,7 @@ import { ElementType, forwardRef, } from "react"; - -export const classNames = ( - ...classNames: (string | boolean | null | undefined)[] -) => classNames.filter(Boolean).join(" "); +import classNames from "classnames"; export const withDefaultProps = ({ diff --git a/packages/react-ui/tailwind.config.ts b/packages/react/tailwind.config.ts similarity index 92% rename from packages/react-ui/tailwind.config.ts rename to packages/react/tailwind.config.ts index ab232effb..8af35ed17 100644 --- a/packages/react-ui/tailwind.config.ts +++ b/packages/react/tailwind.config.ts @@ -1,5 +1,6 @@ import type { Config } from "tailwindcss"; import auiPlugin from "./src/tailwindcss"; +import animatePlugin from "tailwindcss-animate"; const config = { content: ["./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], @@ -49,7 +50,7 @@ const config = { }, }, }, - plugins: [require("tailwindcss-animate"), auiPlugin], + plugins: [animatePlugin, auiPlugin({ components: [] })], } satisfies Config; export default config; diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 77f1bd97f..cfaf04c97 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,5 +1,5 @@ { "extends": "@assistant-ui/tsconfig/base.json", - "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "include": ["src/**/*.ts", "src/**/*.tsx"], + "exclude": ["node_modules", "dist"] } diff --git a/packages/tailwindcss-transformer/package.json b/packages/tailwindcss-transformer/package.json index a944ea603..f92a5d244 100644 --- a/packages/tailwindcss-transformer/package.json +++ b/packages/tailwindcss-transformer/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "license": "MIT", + "main": "./src/index.ts", "dependencies": { "postcss": "^8.4.39", "postcss-value-parser": "^4.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8219d6fff..c007b2265 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,12 +41,12 @@ importers: '@assistant-ui/react-ai-sdk': specifier: workspace:^ version: link:../../packages/react-ai-sdk + '@assistant-ui/react-markdown': + specifier: workspace:^ + version: link:../../packages/react-markdown '@assistant-ui/react-syntax-highlighter': specifier: workspace:^ version: link:../../packages/react-syntax-highlighter - '@assistant-ui/react-ui': - specifier: workspace:^ - version: link:../../packages/react-ui '@assistant-ui/tsconfig': specifier: workspace:^ version: link:../../packages/tsconfig @@ -624,6 +624,9 @@ importers: '@radix-ui/primitive': specifier: ^1.1.0 version: 1.1.0 + '@radix-ui/react-avatar': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-compose-refs': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -639,21 +642,30 @@ importers: '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-use-callback-ref': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) '@radix-ui/react-use-escape-keydown': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) - '@radix-ui/react-use-layout-effect': - specifier: ^1.1.0 - version: 1.1.0(@types/react@18.3.3)(react@18.3.1) '@types/react': specifier: '*' version: 18.3.3 '@types/react-dom': specifier: '*' version: 18.3.0 + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + classnames: + specifier: ^2.5.1 + version: 2.5.1 + lucide-react: + specifier: ^0.400.0 + version: 0.400.0(react@18.3.1) nanoid: specifier: ^5.0.7 version: 5.0.7 @@ -673,18 +685,39 @@ importers: specifier: ^4.5.4 version: 4.5.4(@types/react@18.3.3)(react@18.3.1) devDependencies: - '@ai-sdk/react': - specifier: ^0.0.16 - version: 0.0.16(react@18.3.1)(zod@3.23.8) + '@assistant-ui/tailwindcss-transformer': + specifier: workspace:* + version: link:../tailwindcss-transformer '@assistant-ui/tsconfig': specifier: workspace:* version: link:../tsconfig '@types/node': specifier: ^20.14.9 version: 20.14.9 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.39) + eslint-config-next: + specifier: 14.2.4 + version: 14.2.4(eslint@8.57.0)(typescript@5.5.3) + postcss: + specifier: ^8.4.39 + version: 8.4.39 + postcss-nested: + specifier: ^6.0.1 + version: 6.0.1(postcss@8.4.39) + tailwindcss: + specifier: ^3.4.4 + version: 3.4.4 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.4) tsup: specifier: ^8.1.0 version: 8.1.0(postcss@8.4.39)(typescript@5.5.3) + tsx: + specifier: ^4.16.0 + version: 4.16.0 packages/react-ai-sdk: dependencies: @@ -759,6 +792,12 @@ importers: '@types/react': specifier: '*' version: 18.3.3 + classnames: + specifier: ^2.5.1 + version: 2.5.1 + lucide-react: + specifier: ^0.400.0 + version: 0.400.0(react@18.3.1) react: specifier: ^18 version: 18.3.1 @@ -772,9 +811,15 @@ importers: eslint-config-next: specifier: 14.2.4 version: 14.2.4(eslint@8.57.0)(typescript@5.5.3) + tailwindcss: + specifier: ^3.4.4 + version: 3.4.4 tsup: specifier: ^8.1.0 version: 8.1.0(postcss@8.4.39)(typescript@5.5.3) + tsx: + specifier: ^4.16.0 + version: 4.16.0 packages/react-syntax-highlighter: dependencies: @@ -807,88 +852,6 @@ importers: specifier: ^8.1.0 version: 8.1.0(postcss@8.4.39)(typescript@5.5.3) - packages/react-ui: - dependencies: - '@assistant-ui/react': - specifier: ^0.3.5 - version: link:../react - '@assistant-ui/react-markdown': - specifier: workspace:* - version: link:../react-markdown - '@radix-ui/react-avatar': - specifier: ^1.1.0 - version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-primitive': - specifier: ^2.0.0 - version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-slot': - specifier: ^1.1.0 - version: 1.1.0(@types/react@18.3.3)(react@18.3.1) - '@radix-ui/react-tooltip': - specifier: ^1.1.2 - version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@radix-ui/react-use-callback-ref': - specifier: ^1.1.0 - version: 1.1.0(@types/react@18.3.3)(react@18.3.1) - '@types/react': - specifier: '*' - version: 18.3.3 - class-variance-authority: - specifier: ^0.7.0 - version: 0.7.0 - lucide-react: - specifier: ^0.400.0 - version: 0.400.0(react@18.3.1) - postcss: - specifier: ^8.4.39 - version: 8.4.39 - react: - specifier: ^18 - version: 18.3.1 - react-syntax-highlighter: - specifier: ^15.5.0 - version: 15.5.0(react@18.3.1) - devDependencies: - '@assistant-ui/tailwindcss-transformer': - specifier: workspace:* - version: link:../tailwindcss-transformer - '@assistant-ui/tsconfig': - specifier: workspace:* - version: link:../tsconfig - '@types/node': - specifier: ^20.14.9 - version: 20.14.9 - '@types/react-syntax-highlighter': - specifier: ^15.5.13 - version: 15.5.13 - autoprefixer: - specifier: ^10.4.19 - version: 10.4.19(postcss@8.4.39) - esbuild: - specifier: ^0.23.0 - version: 0.23.0 - eslint-config-next: - specifier: 14.2.4 - version: 14.2.4(eslint@8.57.0)(typescript@5.5.3) - postcss-nested: - specifier: ^6.0.1 - version: 6.0.1(postcss@8.4.39) - tailwindcss: - specifier: ^3.4.4 - version: 3.4.4 - tailwindcss-animate: - specifier: ^1.0.7 - version: 1.0.7(tailwindcss@3.4.4) - tsup: - specifier: ^8.1.0 - version: 8.1.0(postcss@8.4.39)(typescript@5.5.3) - tsx: - specifier: ^4.16.0 - version: 4.16.0 - typescript: - specifier: ^5.5.3 - version: 5.5.3 - packages/shadcn-registry: devDependencies: '@assistant-ui/react': @@ -1275,282 +1238,138 @@ packages: cpu: [ppc64] os: [aix] - '@esbuild/aix-ppc64@0.23.0': - resolution: {integrity: sha512-3sG8Zwa5fMcA9bgqB8AfWPQ+HFke6uD3h1s3RIwUNK8EG7a4buxvuFTs3j1IMs2NXAk9F30C/FF4vxRgQCcmoQ==} - engines: {node: '>=18'} - cpu: [ppc64] - os: [aix] - '@esbuild/android-arm64@0.21.5': resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==} engines: {node: '>=12'} cpu: [arm64] os: [android] - '@esbuild/android-arm64@0.23.0': - resolution: {integrity: sha512-EuHFUYkAVfU4qBdyivULuu03FhJO4IJN9PGuABGrFy4vUuzk91P2d+npxHcFdpUnfYKy0PuV+n6bKIpHOB3prQ==} - engines: {node: '>=18'} - cpu: [arm64] - os: [android] - '@esbuild/android-arm@0.21.5': resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==} engines: {node: '>=12'} cpu: [arm] os: [android] - '@esbuild/android-arm@0.23.0': - resolution: {integrity: sha512-+KuOHTKKyIKgEEqKbGTK8W7mPp+hKinbMBeEnNzjJGyFcWsfrXjSTNluJHCY1RqhxFurdD8uNXQDei7qDlR6+g==} - engines: {node: '>=18'} - cpu: [arm] - os: [android] - '@esbuild/android-x64@0.21.5': resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==} engines: {node: '>=12'} cpu: [x64] os: [android] - '@esbuild/android-x64@0.23.0': - resolution: {integrity: sha512-WRrmKidLoKDl56LsbBMhzTTBxrsVwTKdNbKDalbEZr0tcsBgCLbEtoNthOW6PX942YiYq8HzEnb4yWQMLQuipQ==} - engines: {node: '>=18'} - cpu: [x64] - os: [android] - '@esbuild/darwin-arm64@0.21.5': resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==} engines: {node: '>=12'} cpu: [arm64] os: [darwin] - '@esbuild/darwin-arm64@0.23.0': - resolution: {integrity: sha512-YLntie/IdS31H54Ogdn+v50NuoWF5BDkEUFpiOChVa9UnKpftgwzZRrI4J132ETIi+D8n6xh9IviFV3eXdxfow==} - engines: {node: '>=18'} - cpu: [arm64] - os: [darwin] - '@esbuild/darwin-x64@0.21.5': resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==} engines: {node: '>=12'} cpu: [x64] os: [darwin] - '@esbuild/darwin-x64@0.23.0': - resolution: {integrity: sha512-IMQ6eme4AfznElesHUPDZ+teuGwoRmVuuixu7sv92ZkdQcPbsNHzutd+rAfaBKo8YK3IrBEi9SLLKWJdEvJniQ==} - engines: {node: '>=18'} - cpu: [x64] - os: [darwin] - '@esbuild/freebsd-arm64@0.21.5': resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==} engines: {node: '>=12'} cpu: [arm64] os: [freebsd] - '@esbuild/freebsd-arm64@0.23.0': - resolution: {integrity: sha512-0muYWCng5vqaxobq6LB3YNtevDFSAZGlgtLoAc81PjUfiFz36n4KMpwhtAd4he8ToSI3TGyuhyx5xmiWNYZFyw==} - engines: {node: '>=18'} - cpu: [arm64] - os: [freebsd] - '@esbuild/freebsd-x64@0.21.5': resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==} engines: {node: '>=12'} cpu: [x64] os: [freebsd] - '@esbuild/freebsd-x64@0.23.0': - resolution: {integrity: sha512-XKDVu8IsD0/q3foBzsXGt/KjD/yTKBCIwOHE1XwiXmrRwrX6Hbnd5Eqn/WvDekddK21tfszBSrE/WMaZh+1buQ==} - engines: {node: '>=18'} - cpu: [x64] - os: [freebsd] - '@esbuild/linux-arm64@0.21.5': resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==} engines: {node: '>=12'} cpu: [arm64] os: [linux] - '@esbuild/linux-arm64@0.23.0': - resolution: {integrity: sha512-j1t5iG8jE7BhonbsEg5d9qOYcVZv/Rv6tghaXM/Ug9xahM0nX/H2gfu6X6z11QRTMT6+aywOMA8TDkhPo8aCGw==} - engines: {node: '>=18'} - cpu: [arm64] - os: [linux] - '@esbuild/linux-arm@0.21.5': resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==} engines: {node: '>=12'} cpu: [arm] os: [linux] - '@esbuild/linux-arm@0.23.0': - resolution: {integrity: sha512-SEELSTEtOFu5LPykzA395Mc+54RMg1EUgXP+iw2SJ72+ooMwVsgfuwXo5Fn0wXNgWZsTVHwY2cg4Vi/bOD88qw==} - engines: {node: '>=18'} - cpu: [arm] - os: [linux] - '@esbuild/linux-ia32@0.21.5': resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==} engines: {node: '>=12'} cpu: [ia32] os: [linux] - '@esbuild/linux-ia32@0.23.0': - resolution: {integrity: sha512-P7O5Tkh2NbgIm2R6x1zGJJsnacDzTFcRWZyTTMgFdVit6E98LTxO+v8LCCLWRvPrjdzXHx9FEOA8oAZPyApWUA==} - engines: {node: '>=18'} - cpu: [ia32] - os: [linux] - '@esbuild/linux-loong64@0.21.5': resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==} engines: {node: '>=12'} cpu: [loong64] os: [linux] - '@esbuild/linux-loong64@0.23.0': - resolution: {integrity: sha512-InQwepswq6urikQiIC/kkx412fqUZudBO4SYKu0N+tGhXRWUqAx+Q+341tFV6QdBifpjYgUndV1hhMq3WeJi7A==} - engines: {node: '>=18'} - cpu: [loong64] - os: [linux] - '@esbuild/linux-mips64el@0.21.5': resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==} engines: {node: '>=12'} cpu: [mips64el] os: [linux] - '@esbuild/linux-mips64el@0.23.0': - resolution: {integrity: sha512-J9rflLtqdYrxHv2FqXE2i1ELgNjT+JFURt/uDMoPQLcjWQA5wDKgQA4t/dTqGa88ZVECKaD0TctwsUfHbVoi4w==} - engines: {node: '>=18'} - cpu: [mips64el] - os: [linux] - '@esbuild/linux-ppc64@0.21.5': resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==} engines: {node: '>=12'} cpu: [ppc64] os: [linux] - '@esbuild/linux-ppc64@0.23.0': - resolution: {integrity: sha512-cShCXtEOVc5GxU0fM+dsFD10qZ5UpcQ8AM22bYj0u/yaAykWnqXJDpd77ublcX6vdDsWLuweeuSNZk4yUxZwtw==} - engines: {node: '>=18'} - cpu: [ppc64] - os: [linux] - '@esbuild/linux-riscv64@0.21.5': resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==} engines: {node: '>=12'} cpu: [riscv64] os: [linux] - '@esbuild/linux-riscv64@0.23.0': - resolution: {integrity: sha512-HEtaN7Y5UB4tZPeQmgz/UhzoEyYftbMXrBCUjINGjh3uil+rB/QzzpMshz3cNUxqXN7Vr93zzVtpIDL99t9aRw==} - engines: {node: '>=18'} - cpu: [riscv64] - os: [linux] - '@esbuild/linux-s390x@0.21.5': resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==} engines: {node: '>=12'} cpu: [s390x] os: [linux] - '@esbuild/linux-s390x@0.23.0': - resolution: {integrity: sha512-WDi3+NVAuyjg/Wxi+o5KPqRbZY0QhI9TjrEEm+8dmpY9Xir8+HE/HNx2JoLckhKbFopW0RdO2D72w8trZOV+Wg==} - engines: {node: '>=18'} - cpu: [s390x] - os: [linux] - '@esbuild/linux-x64@0.21.5': resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==} engines: {node: '>=12'} cpu: [x64] os: [linux] - '@esbuild/linux-x64@0.23.0': - resolution: {integrity: sha512-a3pMQhUEJkITgAw6e0bWA+F+vFtCciMjW/LPtoj99MhVt+Mfb6bbL9hu2wmTZgNd994qTAEw+U/r6k3qHWWaOQ==} - engines: {node: '>=18'} - cpu: [x64] - os: [linux] - '@esbuild/netbsd-x64@0.21.5': resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==} engines: {node: '>=12'} cpu: [x64] os: [netbsd] - '@esbuild/netbsd-x64@0.23.0': - resolution: {integrity: sha512-cRK+YDem7lFTs2Q5nEv/HHc4LnrfBCbH5+JHu6wm2eP+d8OZNoSMYgPZJq78vqQ9g+9+nMuIsAO7skzphRXHyw==} - engines: {node: '>=18'} - cpu: [x64] - os: [netbsd] - - '@esbuild/openbsd-arm64@0.23.0': - resolution: {integrity: sha512-suXjq53gERueVWu0OKxzWqk7NxiUWSUlrxoZK7usiF50C6ipColGR5qie2496iKGYNLhDZkPxBI3erbnYkU0rQ==} - engines: {node: '>=18'} - cpu: [arm64] - os: [openbsd] - '@esbuild/openbsd-x64@0.21.5': resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==} engines: {node: '>=12'} cpu: [x64] os: [openbsd] - '@esbuild/openbsd-x64@0.23.0': - resolution: {integrity: sha512-6p3nHpby0DM/v15IFKMjAaayFhqnXV52aEmv1whZHX56pdkK+MEaLoQWj+H42ssFarP1PcomVhbsR4pkz09qBg==} - engines: {node: '>=18'} - cpu: [x64] - os: [openbsd] - '@esbuild/sunos-x64@0.21.5': resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==} engines: {node: '>=12'} cpu: [x64] os: [sunos] - '@esbuild/sunos-x64@0.23.0': - resolution: {integrity: sha512-BFelBGfrBwk6LVrmFzCq1u1dZbG4zy/Kp93w2+y83Q5UGYF1d8sCzeLI9NXjKyujjBBniQa8R8PzLFAUrSM9OA==} - engines: {node: '>=18'} - cpu: [x64] - os: [sunos] - '@esbuild/win32-arm64@0.21.5': resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==} engines: {node: '>=12'} cpu: [arm64] os: [win32] - '@esbuild/win32-arm64@0.23.0': - resolution: {integrity: sha512-lY6AC8p4Cnb7xYHuIxQ6iYPe6MfO2CC43XXKo9nBXDb35krYt7KGhQnOkRGar5psxYkircpCqfbNDB4uJbS2jQ==} - engines: {node: '>=18'} - cpu: [arm64] - os: [win32] - '@esbuild/win32-ia32@0.21.5': resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==} engines: {node: '>=12'} cpu: [ia32] os: [win32] - '@esbuild/win32-ia32@0.23.0': - resolution: {integrity: sha512-7L1bHlOTcO4ByvI7OXVI5pNN6HSu6pUQq9yodga8izeuB1KcT2UkHaH6118QJwopExPn0rMHIseCTx1CRo/uNA==} - engines: {node: '>=18'} - cpu: [ia32] - os: [win32] - '@esbuild/win32-x64@0.21.5': resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==} engines: {node: '>=12'} cpu: [x64] os: [win32] - '@esbuild/win32-x64@0.23.0': - resolution: {integrity: sha512-Arm+WgUFLUATuoxCJcahGuk6Yj9Pzxd6l11Zb/2aAuv5kWWvvfhLFo2fni4uSK5vzlUdCGZ/BdV5tH8klj8p8g==} - engines: {node: '>=18'} - cpu: [x64] - os: [win32] - '@eslint-community/eslint-utils@4.4.0': resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -3045,6 +2864,9 @@ packages: classnames@2.3.2: resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} + classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + cli-cursor@4.0.0: resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3356,11 +3178,6 @@ packages: engines: {node: '>=12'} hasBin: true - esbuild@0.23.0: - resolution: {integrity: sha512-1lvV17H2bMYda/WaFb2jLPeHU3zml2k4/yagNMG8Q/YtfMjCwEUZa2eXXMgZTVSL5q1n4H7sQ0X6CdJDqqeCFA==} - engines: {node: '>=18'} - hasBin: true - escalade@3.1.2: resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} @@ -6221,144 +6038,72 @@ snapshots: '@esbuild/aix-ppc64@0.21.5': optional: true - '@esbuild/aix-ppc64@0.23.0': - optional: true - '@esbuild/android-arm64@0.21.5': optional: true - '@esbuild/android-arm64@0.23.0': - optional: true - '@esbuild/android-arm@0.21.5': optional: true - '@esbuild/android-arm@0.23.0': - optional: true - '@esbuild/android-x64@0.21.5': optional: true - '@esbuild/android-x64@0.23.0': - optional: true - '@esbuild/darwin-arm64@0.21.5': optional: true - '@esbuild/darwin-arm64@0.23.0': - optional: true - '@esbuild/darwin-x64@0.21.5': optional: true - '@esbuild/darwin-x64@0.23.0': - optional: true - '@esbuild/freebsd-arm64@0.21.5': optional: true - '@esbuild/freebsd-arm64@0.23.0': - optional: true - '@esbuild/freebsd-x64@0.21.5': optional: true - '@esbuild/freebsd-x64@0.23.0': - optional: true - '@esbuild/linux-arm64@0.21.5': optional: true - '@esbuild/linux-arm64@0.23.0': - optional: true - '@esbuild/linux-arm@0.21.5': optional: true - '@esbuild/linux-arm@0.23.0': - optional: true - '@esbuild/linux-ia32@0.21.5': optional: true - '@esbuild/linux-ia32@0.23.0': - optional: true - '@esbuild/linux-loong64@0.21.5': optional: true - '@esbuild/linux-loong64@0.23.0': - optional: true - '@esbuild/linux-mips64el@0.21.5': optional: true - '@esbuild/linux-mips64el@0.23.0': - optional: true - '@esbuild/linux-ppc64@0.21.5': optional: true - '@esbuild/linux-ppc64@0.23.0': - optional: true - '@esbuild/linux-riscv64@0.21.5': optional: true - '@esbuild/linux-riscv64@0.23.0': - optional: true - '@esbuild/linux-s390x@0.21.5': optional: true - '@esbuild/linux-s390x@0.23.0': - optional: true - '@esbuild/linux-x64@0.21.5': optional: true - '@esbuild/linux-x64@0.23.0': - optional: true - '@esbuild/netbsd-x64@0.21.5': optional: true - '@esbuild/netbsd-x64@0.23.0': - optional: true - - '@esbuild/openbsd-arm64@0.23.0': - optional: true - '@esbuild/openbsd-x64@0.21.5': optional: true - '@esbuild/openbsd-x64@0.23.0': - optional: true - '@esbuild/sunos-x64@0.21.5': optional: true - '@esbuild/sunos-x64@0.23.0': - optional: true - '@esbuild/win32-arm64@0.21.5': optional: true - '@esbuild/win32-arm64@0.23.0': - optional: true - '@esbuild/win32-ia32@0.21.5': optional: true - '@esbuild/win32-ia32@0.23.0': - optional: true - '@esbuild/win32-x64@0.21.5': optional: true - '@esbuild/win32-x64@0.23.0': - optional: true - '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)': dependencies: eslint: 8.57.0 @@ -7983,6 +7728,8 @@ snapshots: classnames@2.3.2: {} + classnames@2.5.1: {} + cli-cursor@4.0.0: dependencies: restore-cursor: 4.0.0 @@ -8369,33 +8116,6 @@ snapshots: '@esbuild/win32-ia32': 0.21.5 '@esbuild/win32-x64': 0.21.5 - esbuild@0.23.0: - optionalDependencies: - '@esbuild/aix-ppc64': 0.23.0 - '@esbuild/android-arm': 0.23.0 - '@esbuild/android-arm64': 0.23.0 - '@esbuild/android-x64': 0.23.0 - '@esbuild/darwin-arm64': 0.23.0 - '@esbuild/darwin-x64': 0.23.0 - '@esbuild/freebsd-arm64': 0.23.0 - '@esbuild/freebsd-x64': 0.23.0 - '@esbuild/linux-arm': 0.23.0 - '@esbuild/linux-arm64': 0.23.0 - '@esbuild/linux-ia32': 0.23.0 - '@esbuild/linux-loong64': 0.23.0 - '@esbuild/linux-mips64el': 0.23.0 - '@esbuild/linux-ppc64': 0.23.0 - '@esbuild/linux-riscv64': 0.23.0 - '@esbuild/linux-s390x': 0.23.0 - '@esbuild/linux-x64': 0.23.0 - '@esbuild/netbsd-x64': 0.23.0 - '@esbuild/openbsd-arm64': 0.23.0 - '@esbuild/openbsd-x64': 0.23.0 - '@esbuild/sunos-x64': 0.23.0 - '@esbuild/win32-arm64': 0.23.0 - '@esbuild/win32-ia32': 0.23.0 - '@esbuild/win32-x64': 0.23.0 - escalade@3.1.2: {} escape-string-regexp@1.0.5: {}