diff --git a/README.md b/README.md index da1ca85..52a950b 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,10 @@ React UI component library for [Deepgram Voice Agent](https://developers.deepgram.com/docs/voice-agent) — Tailwind v4, shadcn/ui, fully themeable. +## Status + +This library is pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent) to provide embeddable browser components. + ## Install ```bash @@ -22,9 +26,21 @@ import { AgentMessage, AgentTextInput, AgentStatus, + useAgentConversation, } from "@deepgram/ui"; import "@deepgram/ui/styles.css"; +function Conversation() { + const { conversation } = useAgentConversation(); + return ( + + {conversation.map((entry) => ( + + ))} + + ); +} + function App() { return (
- - {conversation.map((entry) => ( - - ))} - +
diff --git a/packages/ui/README.md b/packages/ui/README.md index f50bf67..36bb96a 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -2,8 +2,18 @@ Pre-built, styled React components for the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent). Fully customizable via CSS variables. Re-exports all hooks from [`@deepgram/react`](../react/) so you only need one import. +## Status + +This package is pre-1.0. Interfaces may change between minor versions. + ## Install +```bash +npm install @deepgram/ui react react-dom +``` + +or with Bun: + ```bash bun add @deepgram/ui react react-dom ``` diff --git a/packages/ui/package.json b/packages/ui/package.json index 48ea23b..cfbf8c1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -27,7 +27,7 @@ "url": "https://github.com/deepgram/ui/issues" }, "scripts": { - "build": "tsc --noEmit && vite build", + "build": "tsc --noEmit && vite build && vite build --config vite.styles.config.ts", "typecheck": "tsc --noEmit", "dev": "vite build --watch", "test": "bun test", diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 5dcdd85..510aaff 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -1,6 +1,4 @@ import { defineConfig } from "vite"; -import { copyFileSync, mkdirSync } from "node:fs"; -import { resolve } from "node:path"; import tailwindcss from "@tailwindcss/vite"; import react from "@vitejs/plugin-react"; import cssInjected from "vite-plugin-css-injected-by-js"; @@ -34,16 +32,10 @@ export default defineConfig({ // when it imports @deepgram/ui/dist/index.js. cssInjected(), dts({ rollupTypes: true }), - // Copy standalone styles.css to dist for @deepgram/ui/styles.css - { - name: "copy-styles", - closeBundle() { - mkdirSync(resolve(__dirname, "dist"), { recursive: true }); - copyFileSync( - resolve(__dirname, "src/styles.css"), - resolve(__dirname, "dist/styles.css"), - ); - }, - }, + // The standalone stylesheet for the `@deepgram/ui/styles.css` export is + // built by a second Vite pass (vite.styles.config.ts) that compiles + // src/styles.css through Tailwind. It was previously copied verbatim, + // which shipped raw Tailwind source (@import/@plugin directives) that + // consumer bundlers reject. ], }); diff --git a/packages/ui/vite.styles.config.ts b/packages/ui/vite.styles.config.ts new file mode 100644 index 0000000..66b4424 --- /dev/null +++ b/packages/ui/vite.styles.config.ts @@ -0,0 +1,24 @@ +import { defineConfig } from "vite"; +import tailwindcss from "@tailwindcss/vite"; + +// Compiles the standalone stylesheet for the `@deepgram/ui/styles.css` +// export. The main build (vite.config.ts) embeds compiled CSS into the JS +// bundle via vite-plugin-css-injected-by-js, so no CSS asset leaves that +// pass; this second pass exists solely to turn src/styles.css (Tailwind v4 +// source with @import/@plugin directives) into plain compiled CSS at +// dist/styles.css. Previously the raw source file was copied verbatim, +// which broke consumer builds (lightningcss rejects `@media prefix(dg)`) +// and served no styles to consumers who imported it. +export default defineConfig({ + plugins: [tailwindcss()], + build: { + outDir: "dist", + emptyOutDir: false, + rollupOptions: { + input: "src/styles.css", + output: { + assetFileNames: "styles[extname]", + }, + }, + }, +});