diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
index b469372b4..81884deea 100644
--- a/packages/react-ui/package.json
+++ b/packages/react-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@assistant-ui/react-ui",
- "version": "0.0.7",
+ "version": "0.0.8",
"license": "MIT",
"exports": {
".": {
@@ -21,6 +21,10 @@
"types": "./dist/markdown-styles.css.d.ts",
"default": "./dist/markdown-styles.css"
},
+ "./reset.css": {
+ "types": "./dist/reset.css.d.ts",
+ "default": "./dist/reset.css"
+ },
"./themes/default.css": {
"types": "./dist/themes/default.css.d.ts",
"default": "./dist/themes/default.css"
@@ -64,7 +68,6 @@
"@types/node": "^20.14.9",
"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",
diff --git a/packages/react-ui/postcss.config.mjs b/packages/react-ui/postcss.config.mjs
index 1607a5d4d..2ef30fcf4 100644
--- a/packages/react-ui/postcss.config.mjs
+++ b/packages/react-ui/postcss.config.mjs
@@ -1,7 +1,6 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
- "postcss-nested": {},
tailwindcss: {},
autoprefixer: {},
},
diff --git a/packages/react-ui/src/components/assistant-modal.tsx b/packages/react-ui/src/components/assistant-modal.tsx
index fcea4a6c9..d6e9344c6 100644
--- a/packages/react-ui/src/components/assistant-modal.tsx
+++ b/packages/react-ui/src/components/assistant-modal.tsx
@@ -41,7 +41,7 @@ export const AssistantModalTrigger = forwardRef<
AssistantModalTrigger.displayName = "AssistantModalTrigger";
const AssistantModalAnchor = styled(AssistantModalPrimitive.Anchor, {
- className: "aui-root aui-assistant-modal-anchor",
+ className: "aui-assistant-modal-anchor",
});
AssistantModalAnchor.displayName = "AssistantModalAnchor";
@@ -98,7 +98,7 @@ const AssistantModalButton = forwardRef<
AssistantModalButton.displayName = "AssistantModalButton";
export const AssistantModalContent = styled(AssistantModalPrimitive.Content, {
- className: "aui-root aui-assistant-modal-content",
+ className: "aui-assistant-modal-content",
sideOffset: 16,
});
diff --git a/packages/react-ui/src/components/base/reset.tsx b/packages/react-ui/src/components/base/reset.tsx
new file mode 100644
index 000000000..40e3dc1df
--- /dev/null
+++ b/packages/react-ui/src/components/base/reset.tsx
@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+
+export const Reset = forwardRef<
+ HTMLDivElement,
+ ComponentPropsWithoutRef<"div">
+>(({ children, className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ );
+});
+
+Reset.displayName = "Reset";
diff --git a/packages/react-ui/src/components/index.ts b/packages/react-ui/src/components/index.ts
index b53e70f11..376685559 100644
--- a/packages/react-ui/src/components/index.ts
+++ b/packages/react-ui/src/components/index.ts
@@ -2,6 +2,11 @@ export {
ThreadConfigProvider,
useThreadConfig,
type ThreadConfig,
+ type ThreadWelcomeConfig,
+ type UserMessageConfig,
+ type AssistantMessageConfig,
+ type StringsConfig,
+ type ThreadConfigProviderProps,
} from "./thread-config";
export {
@@ -72,3 +77,23 @@ export { AssistantModal, AssistantModalTrigger } from "./assistant-modal";
export { ThreadWelcome, ThreadWelcomeRoot } from "./thread-welcome";
export { MarkdownText } from "./markdown-text";
+
+export { Reset } from "./base/reset";
+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/thread.tsx b/packages/react-ui/src/components/thread.tsx
index 8b0a4f78f..f3431324d 100644
--- a/packages/react-ui/src/components/thread.tsx
+++ b/packages/react-ui/src/components/thread.tsx
@@ -23,7 +23,7 @@ import { ThreadPrimitiveRootProps } from "@assistant-ui/react";
export const Thread: FC = (config) => {
return (
-
+
@@ -40,7 +40,7 @@ export type ThreadRootProps = ThreadPrimitiveRootProps &
ThreadConfigProviderProps;
const ThreadRootStyled = styled(ThreadPrimitive.Root, {
- className: "aui-root aui-thread-root",
+ className: "aui-thread-root",
});
export const ThreadRoot = forwardRef(
diff --git a/packages/react-ui/src/reset.css b/packages/react-ui/src/reset.css
new file mode 100644
index 000000000..d2c9ea346
--- /dev/null
+++ b/packages/react-ui/src/reset.css
@@ -0,0 +1,212 @@
+.aui-reset *,
+.aui-reset ::before,
+.aui-reset ::after {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: #e5e7eb;
+}
+.aui-reset ::before,
+.aui-reset ::after {
+ --tw-content: "";
+}
+.aui-reset html,
+.aui-reset :host {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ -webkit-tap-highlight-color: transparent;
+}
+.aui-reset body {
+ margin: 0;
+ line-height: inherit;
+}
+.aui-reset hr {
+ height: 0;
+ color: inherit;
+ border-top-width: 1px;
+}
+.aui-reset abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+.aui-reset h1,
+.aui-reset h2,
+.aui-reset h3,
+.aui-reset h4,
+.aui-reset h5,
+.aui-reset h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+.aui-reset a {
+ color: inherit;
+ text-decoration: inherit;
+}
+.aui-reset b,
+.aui-reset strong {
+ font-weight: bolder;
+}
+.aui-reset code,
+.aui-reset kbd,
+.aui-reset samp,
+.aui-reset pre {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace;
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ font-size: 1em;
+}
+.aui-reset small {
+ font-size: 80%;
+}
+.aui-reset sub,
+.aui-reset sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+.aui-reset sub {
+ bottom: -0.25em;
+}
+.aui-reset sup {
+ top: -0.5em;
+}
+.aui-reset table {
+ text-indent: 0;
+ border-color: inherit;
+ border-collapse: collapse;
+}
+.aui-reset button,
+.aui-reset input,
+.aui-reset optgroup,
+.aui-reset select,
+.aui-reset textarea {
+ font-family: inherit;
+ font-feature-settings: inherit;
+ font-variation-settings: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
+.aui-reset button,
+.aui-reset select {
+ text-transform: none;
+}
+.aui-reset button,
+.aui-reset input:where([type="button"]),
+.aui-reset input:where([type="reset"]),
+.aui-reset input:where([type="submit"]) {
+ -webkit-appearance: button;
+ background-color: transparent;
+ background-image: none;
+}
+.aui-reset :-moz-focusring {
+ outline: auto;
+}
+.aui-reset :-moz-ui-invalid {
+ box-shadow: none;
+}
+.aui-reset progress {
+ vertical-align: baseline;
+}
+.aui-reset ::-webkit-inner-spin-button,
+.aui-reset ::-webkit-outer-spin-button {
+ height: auto;
+}
+.aui-reset [type="search"] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+.aui-reset ::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+.aui-reset ::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+.aui-reset summary {
+ display: list-item;
+}
+.aui-reset blockquote,
+.aui-reset dl,
+.aui-reset dd,
+.aui-reset h1,
+.aui-reset h2,
+.aui-reset h3,
+.aui-reset h4,
+.aui-reset h5,
+.aui-reset h6,
+.aui-reset hr,
+.aui-reset figure,
+.aui-reset p,
+.aui-reset pre {
+ margin: 0;
+}
+.aui-reset fieldset {
+ margin: 0;
+ padding: 0;
+}
+.aui-reset legend {
+ padding: 0;
+}
+.aui-reset ol,
+.aui-reset ul,
+.aui-reset menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.aui-reset dialog {
+ padding: 0;
+}
+.aui-reset textarea {
+ resize: vertical;
+}
+.aui-reset input::-moz-placeholder,
+.aui-reset textarea::-moz-placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+.aui-reset input::placeholder,
+.aui-reset textarea::placeholder {
+ opacity: 1;
+ color: #9ca3af;
+}
+.aui-reset button,
+.aui-reset [role="button"] {
+ cursor: pointer;
+}
+.aui-reset :disabled {
+ cursor: default;
+}
+.aui-reset img,
+.aui-reset svg,
+.aui-reset video,
+.aui-reset canvas,
+.aui-reset audio,
+.aui-reset iframe,
+.aui-reset embed,
+.aui-reset object {
+ display: block;
+ vertical-align: middle;
+}
+.aui-reset img,
+.aui-reset video {
+ max-width: 100%;
+ height: auto;
+}
+.aui-reset [hidden] {
+ display: none;
+}
diff --git a/packages/react-ui/src/styles.css b/packages/react-ui/src/styles.css
index 0b5b7e978..f300abed1 100644
--- a/packages/react-ui/src/styles.css
+++ b/packages/react-ui/src/styles.css
@@ -1,6 +1,4 @@
-.aui-root {
- @tailwind base;
-}
+@tailwind base;
@tailwind components;
/* shadcn-ui/button */
diff --git a/packages/react-ui/tailwind.config.ts b/packages/react-ui/tailwind.config.ts
index 2d178926c..8efda6a2c 100644
--- a/packages/react-ui/tailwind.config.ts
+++ b/packages/react-ui/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from "tailwindcss";
const config = {
content: ["./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
corePlugins: {
+ preflight: false,
backgroundOpacity: false,
},
theme: {
diff --git a/packages/react-ui/tsup.config.ts b/packages/react-ui/tsup.config.ts
index c849f0369..e8182db24 100644
--- a/packages/react-ui/tsup.config.ts
+++ b/packages/react-ui/tsup.config.ts
@@ -6,6 +6,7 @@ export default defineConfig(() => {
"src/index.ts",
"src/styles.css",
"src/markdown-styles.css",
+ "src/reset.css",
"src/themes/default.css",
],
format: ["cjs", "esm"],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b56610bf..a7deecd85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -763,9 +763,6 @@ importers:
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
@@ -8905,8 +8902,8 @@ snapshots:
'@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3)
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+ eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
eslint-plugin-react: 7.34.3(eslint@8.57.0)
eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -8924,13 +8921,13 @@ snapshots:
transitivePeerDependencies:
- supports-color
- eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0):
+ eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0):
dependencies:
debug: 4.3.5
enhanced-resolve: 5.17.0
eslint: 8.57.0
- eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+ eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
fast-glob: 3.3.2
get-tsconfig: 4.7.5
is-core-module: 2.14.0
@@ -8941,18 +8938,18 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
- eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
+ eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
dependencies:
debug: 3.2.7
optionalDependencies:
'@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3)
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
+ eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
transitivePeerDependencies:
- supports-color
- eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
+ eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
dependencies:
array-includes: 3.1.8
array.prototype.findlastindex: 1.2.5
@@ -8962,7 +8959,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
+ eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
hasown: 2.0.2
is-core-module: 2.14.0
is-glob: 4.0.3