@docyrus/ui-pro-ai-assistant 0.7.7 → 0.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -4
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +94 -13060
- package/package.json +2 -4
package/README.md
CHANGED
|
@@ -36,13 +36,54 @@ npm install @docyrus/api-client @docyrus/ui-pro-shared react react-dom
|
|
|
36
36
|
| `@docyrus/ui-pro-shared` | `>= 0.0.1` |
|
|
37
37
|
| `react` | `^19` |
|
|
38
38
|
| `react-dom` | `^19` |
|
|
39
|
+
| `tailwindcss` | `^4.0.0` |
|
|
39
40
|
| `vite` | `>= 5.0.0` *(optional)* |
|
|
40
41
|
|
|
42
|
+
## Setup
|
|
43
|
+
|
|
44
|
+
This package ships React component sources that use Tailwind v4 utility classes —
|
|
45
|
+
**it does not bundle a CSS utilities file**. Your app's Tailwind build generates the
|
|
46
|
+
utilities, which keeps the consumer in full control of theme tokens and avoids
|
|
47
|
+
class-name collisions.
|
|
48
|
+
|
|
49
|
+
### 1. Import the component CSS once at app root
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
/* your app's globals.css */
|
|
53
|
+
@import "tailwindcss";
|
|
54
|
+
@import "@docyrus/ui-pro-ai-assistant/styles.css";
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
This brings in component-specific custom CSS (container queries, has-selectors,
|
|
58
|
+
markdown styling) — roughly 100 lines.
|
|
59
|
+
|
|
60
|
+
### 2. Tell Tailwind to scan the package sources
|
|
61
|
+
|
|
62
|
+
Tailwind needs to see the class strings used inside the package's compiled JS
|
|
63
|
+
(and inside its `@docyrus/ui-pro-shared` peer) to generate the utilities they
|
|
64
|
+
reference. Add these `@source` directives next to your other source patterns:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
/* your app's globals.css */
|
|
68
|
+
@source "../path/to/node_modules/@docyrus/ui-pro-ai-assistant/dist/**/*.js";
|
|
69
|
+
@source "../path/to/node_modules/@docyrus/ui-pro-shared/src/**/*.{ts,tsx}";
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
> The relative path depends on where your `globals.css` lives. In a Vite app the
|
|
73
|
+
> CSS file is usually under `src/styles/`, so the `@source` paths point up to the
|
|
74
|
+
> nearest `node_modules`. Tailwind resolves the path relative to the CSS file.
|
|
75
|
+
|
|
76
|
+
### 3. Provide shadcn-style theme tokens
|
|
77
|
+
|
|
78
|
+
The package's utilities resolve `--color-background`, `--color-foreground`,
|
|
79
|
+
`--color-primary`, etc. against your app's tokens. If you follow the standard
|
|
80
|
+
shadcn convention (`--background`, `--foreground` on `:root`) plus a `@theme inline`
|
|
81
|
+
mapping (`--color-background: var(--background)`), you're already set. See the
|
|
82
|
+
[shadcn theming docs](https://ui.shadcn.com/docs/theming) for the full block.
|
|
83
|
+
|
|
41
84
|
## Quick start
|
|
42
85
|
|
|
43
86
|
```tsx
|
|
44
|
-
import "@docyrus/ui-pro-ai-assistant/styles.css";
|
|
45
|
-
|
|
46
87
|
import { useCallback, useMemo } from "react";
|
|
47
88
|
import { useDocyrusAuth } from "@docyrus/signin";
|
|
48
89
|
import { AssistantProvider, DocyAssistant } from "@docyrus/ui-pro-ai-assistant";
|
|
@@ -114,7 +155,7 @@ function ModalExample() {
|
|
|
114
155
|
| Main | `@docyrus/ui-pro-ai-assistant` | Components, provider, hooks, and types |
|
|
115
156
|
| Vite plugin | `@docyrus/ui-pro-ai-assistant/vite` | Dev-server middleware for Plate AI |
|
|
116
157
|
| Web worker | `@docyrus/ui-pro-ai-assistant/worker` | Worker entry for AI command handlers |
|
|
117
|
-
| Stylesheet | `@docyrus/ui-pro-ai-assistant/styles.css` |
|
|
158
|
+
| Stylesheet | `@docyrus/ui-pro-ai-assistant/styles.css` | Component-specific custom CSS — import once at app root. Tailwind utilities are generated by your app's Tailwind build (see [Setup](#setup)) |
|
|
118
159
|
|
|
119
160
|
### Exported symbols
|
|
120
161
|
|
|
@@ -527,7 +568,7 @@ VITE_DOCYRUS_EDITOR_AGENT_ID=your-editor-agent-id
|
|
|
527
568
|
|
|
528
569
|
- React 19+
|
|
529
570
|
- ESM only (`"type": "module"`)
|
|
530
|
-
- Tailwind CSS v4
|
|
571
|
+
- **Tailwind CSS v4** — the package's components use Tailwind utility classes; your app's Tailwind build generates them via the `@source` directives shown in [Setup](#setup). The package itself ships no compiled utilities.
|
|
531
572
|
|
|
532
573
|
## License
|
|
533
574
|
|
package/dist/index.js
CHANGED
|
@@ -2722,9 +2722,9 @@ var AgentTabs = ({
|
|
|
2722
2722
|
),
|
|
2723
2723
|
onClick: () => onTabSelect(tab.id),
|
|
2724
2724
|
children: [
|
|
2725
|
-
|
|
2726
|
-
/* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name
|
|
2727
|
-
/* @__PURE__ */ jsx(AvatarFallback, { className: "
|
|
2725
|
+
name ? /* @__PURE__ */ jsxs(Avatar, { className: "w-5 h-5 shrink-0 after:border-0", children: [
|
|
2726
|
+
avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
|
|
2727
|
+
/* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3 h-3 text-muted-foreground" }) })
|
|
2728
2728
|
] }) : /* @__PURE__ */ jsx("span", { className: "w-5 h-5 shrink-0" }),
|
|
2729
2729
|
/* @__PURE__ */ jsx("span", { className: "truncate min-w-0", children: name ?? "" }),
|
|
2730
2730
|
!tab.pinned ? /* @__PURE__ */ jsx(
|