@docyrus/ui-pro-ai-assistant 0.7.8 → 0.8.0

package/README.md

@@ -36,13 +36,54 @@ npm install @docyrus/api-client @docyrus/ui-pro-shared react react-dom
 | `@docyrus/ui-pro-shared` | `>= 0.0.1` |
 | `react` | `^19` |
 | `react-dom` | `^19` |
+| `tailwindcss` | `^4.0.0` |
 | `vite` | `>= 5.0.0` *(optional)* |
 
+## Setup
+
+This package ships React component sources that use Tailwind v4 utility classes —
+**it does not bundle a CSS utilities file**. Your app's Tailwind build generates the
+utilities, which keeps the consumer in full control of theme tokens and avoids
+class-name collisions.
+
+### 1. Import the component CSS once at app root
+
+```css
+/* your app's globals.css */
+@import "tailwindcss";
+@import "@docyrus/ui-pro-ai-assistant/styles.css";
+```
+
+This brings in component-specific custom CSS (container queries, has-selectors,
+markdown styling) — roughly 100 lines.
+
+### 2. Tell Tailwind to scan the package sources
+
+Tailwind needs to see the class strings used inside the package's compiled JS
+(and inside its `@docyrus/ui-pro-shared` peer) to generate the utilities they
+reference. Add these `@source` directives next to your other source patterns:
+
+```css
+/* your app's globals.css */
+@source "../path/to/node_modules/@docyrus/ui-pro-ai-assistant/dist/**/*.js";
+@source "../path/to/node_modules/@docyrus/ui-pro-shared/src/**/*.{ts,tsx}";
+```
+
+> The relative path depends on where your `globals.css` lives. In a Vite app the
+> CSS file is usually under `src/styles/`, so the `@source` paths point up to the
+> nearest `node_modules`. Tailwind resolves the path relative to the CSS file.
+
+### 3. Provide shadcn-style theme tokens
+
+The package's utilities resolve `--color-background`, `--color-foreground`,
+`--color-primary`, etc. against your app's tokens. If you follow the standard
+shadcn convention (`--background`, `--foreground` on `:root`) plus a `@theme inline`
+mapping (`--color-background: var(--background)`), you're already set. See the
+[shadcn theming docs](https://ui.shadcn.com/docs/theming) for the full block.
+
 ## Quick start
 
 ```tsx
-import "@docyrus/ui-pro-ai-assistant/styles.css";
-
 import { useCallback, useMemo } from "react";
 import { useDocyrusAuth } from "@docyrus/signin";
 import { AssistantProvider, DocyAssistant } from "@docyrus/ui-pro-ai-assistant";
@@ -114,7 +155,7 @@ function ModalExample() {
 | Main | `@docyrus/ui-pro-ai-assistant` | Components, provider, hooks, and types |
 | Vite plugin | `@docyrus/ui-pro-ai-assistant/vite` | Dev-server middleware for Plate AI |
 | Web worker | `@docyrus/ui-pro-ai-assistant/worker` | Worker entry for AI command handlers |
-| Stylesheet | `@docyrus/ui-pro-ai-assistant/styles.css` | Required CSS — import once at app root |
+| 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)) |
 
 ### Exported symbols
 
@@ -527,7 +568,7 @@ VITE_DOCYRUS_EDITOR_AGENT_ID=your-editor-agent-id
 
 - React 19+
 - ESM only (`"type": "module"`)
-- Tailwind CSS v4 (the stylesheet uses Tailwind utilities)
+- **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.
 
 ## License
 

package/dist/index.js

@@ -2722,9 +2722,9 @@ var AgentTabs = ({
           ),
           onClick: () => onTabSelect(tab.id),
           children: [
-            avatar ? /* @__PURE__ */ jsxs(Avatar, { className: "w-5 h-5 shrink-0 after:border-0", children: [
-              /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name ?? "" }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px] bg-transparent" })
+            name ? /* @__PURE__ */ jsxs(Avatar, { className: "w-5 h-5 shrink-0 after:border-0", children: [
+              avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(Brain, { className: "w-3 h-3 text-muted-foreground" }) })
             ] }) : /* @__PURE__ */ jsx("span", { className: "w-5 h-5 shrink-0" }),
             /* @__PURE__ */ jsx("span", { className: "truncate min-w-0", children: name ?? "" }),
             !tab.pinned ? /* @__PURE__ */ jsx(
@@ -19584,8 +19584,26 @@ function ChatPanel({
   onManageMemories,
   appContext,
   onClearAppContext,
-  onForwardToAgent
+  onForwardToAgent,
+  chatError,
+  onDismissChatError
 }) {
+  const renderChatError = () => {
+    if (!chatError) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-start gap-2 self-stretch rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-300", children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1 whitespace-pre-wrap break-words", children: chatError }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Dismiss error",
+          onClick: onDismissChatError,
+          className: "-mr-1 -mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-red-700/70 hover:bg-red-100 hover:text-red-700 dark:text-red-300/70 dark:hover:bg-red-900/40 dark:hover:text-red-200",
+          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+        }
+      )
+    ] });
+  };
   const renderAppContextChip = () => {
     if (!appContext) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 self-start rounded-full border bg-muted/50 px-2 py-1 text-xs text-foreground", children: [
@@ -19659,6 +19677,7 @@ function ChatPanel({
               /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&_h4]:text-foreground [&_*]:my-0 [&_*+*]:mt-2", children: welcomeMessage ? /* @__PURE__ */ jsx(MessageResponse, { children: welcomeMessage }) : /* @__PURE__ */ jsx("p", { children: description || "Your AI-powered assistant for all your document needs." }) }),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col", children: [
                 renderAppContextChip(),
+                renderChatError(),
                 renderInputArea(true)
               ] })
             ] }) }),
@@ -19709,6 +19728,7 @@ function ChatPanel({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-3 pb-3 pt-2", children: [
       renderAppContextChip(),
+      renderChatError(),
       renderInputArea()
     ] })
   ] });
@@ -34567,6 +34587,8 @@ var AssistantView = ({ ref, ...props }) => {
         agentTools: commonProps2.agentTools,
         appContext: commonProps2.appContext,
         onClearAppContext: commonProps2.onClearAppContext,
+        chatError: commonProps2.chatError,
+        onDismissChatError: commonProps2.onDismissChatError,
         messagesClassName: "p-4"
       }
     );
@@ -34827,6 +34849,8 @@ var AssistantView = ({ ref, ...props }) => {
                 agentTools: commonProps.agentTools,
                 appContext: commonProps.appContext,
                 onClearAppContext: commonProps.onClearAppContext,
+                chatError: commonProps.chatError,
+                onDismissChatError: commonProps.onDismissChatError,
                 onManageMemories: onTabChange ? () => onTabChange(4) : void 0,
                 compactToolbar: !isFullscreen
               }
@@ -36234,6 +36258,7 @@ var DocyAssistant = ({
   const { state: projectState, actions: projectActions } = useProjectState();
   const { state: worksState, actions: worksActions } = useWorksState();
   const [input, setInput] = useState(initialPrompt || "");
+  const [chatError, setChatError] = useState(null);
   const [showWelcome, setShowWelcome] = useState(() => enableWelcomePage && tabs.length <= 1);
   const currentUserId = configUser.id;
   const [projectSearchQuery, setProjectSearchQuery] = useState("");
@@ -36356,6 +36381,8 @@ var DocyAssistant = ({
     },
     onError: (error) => {
       console.error("[AI] Chat error:", error);
+      const errorText = error?.message || String(error) || "An unknown error occurred.";
+      setChatError(errorText);
     },
     onToolCall: async ({ toolCall }) => {
       const name = toolCall?.toolName;
@@ -36713,6 +36740,7 @@ var DocyAssistant = ({
     isSendingRef.current = true;
     setInput("");
     setShowWelcome(false);
+    setChatError(null);
     try {
       messageOptionsRef.current = options3;
       let currentThreadId = selectedSessionIdRef.current;
@@ -37021,6 +37049,8 @@ var DocyAssistant = ({
       agentTools: activeAgentMatchesDetails ? agentTools : [],
       appContext,
       onClearAppContext: clearAppContext,
+      chatError,
+      onDismissChatError: () => setChatError(null),
       initialModelId,
       initialFeatures,
       enableMicrophone,