@docyrus/ui-pro-ai-assistant 0.6.3 → 0.6.5

package/README.md

@@ -262,6 +262,9 @@ The main chat interface component.
 |------|------|---------|-------------|
 | `apiEndpoint` | `string` | `"/ai/agents/:agentId/chat"` | Chat endpoint template (`:agentId` is replaced at runtime) |
 | `hostEnvironment` | `string` | — | Host environment identifier sent to the chat endpoint as `hostEnvironment`. The backend uses this to filter the tool list bound to the agent so only tools available in the current environment are exposed. Common values: `"web"`, `"desktop"`, `"chrome"`, `"word"`, `"excel"`, `"powerpoint"`, `"outlook"` |
+| `appId` | `string` | — | ID of the host app currently open in the page. Forwarded to the chat endpoint as `appId` so the agent can scope its behavior/tools to it. Renders a dismissable "Talking about <app>" chip above the input; once the user clears it, the id stops being sent |
+| `appName` | `string` | — | Display name for the current host app, shown in the context chip |
+| `appLogo` | `string` | — | Logo URL for the current host app, shown in the context chip |
 
 #### Callbacks
 

package/dist/docy-assistant.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
 import { type DocyAssistantProps } from './types';
-export declare const DocyAssistant: ({ ref, isOpen, onClose, supportWebSearch, supportThinking, supportFiles, supportDocumentSearch, supportDeepResearch, supportMultiModels, supportWorkCanvas, apiEndpoint, title: titleProp, description: descriptionProp, placeholder: placeholderProp, logo, footerText: footerTextProp, variant, renderMode, enableSidebar, enableNavDropdown, enableVoice, enableMicrophone, enableWelcomePage, tenantAiAgentId, onMessageSend, onVoiceStart, onVoiceEnd, className, defaultFullscreen, hideExpand, hideCloseButton, hideAgentSelector, hideBorder, showHeader, hideHeaderOnWelcome, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, enableSharing, onShare: onShareProp, initialPrompt, initialModelId, initialFeatures, initialFiles, hostEnvironment, clientTools, ...props }: DocyAssistantProps & {
+export declare const DocyAssistant: ({ ref, isOpen, onClose, supportWebSearch, supportThinking, supportFiles, supportDocumentSearch, supportDeepResearch, supportMultiModels, supportWorkCanvas, apiEndpoint, title: titleProp, description: descriptionProp, placeholder: placeholderProp, logo, footerText: footerTextProp, variant, renderMode, enableSidebar, enableNavDropdown, enableVoice, enableMicrophone, enableWelcomePage, tenantAiAgentId, onMessageSend, onVoiceStart, onVoiceEnd, className, defaultFullscreen, hideExpand, hideCloseButton, hideAgentSelector, hideBorder, showHeader, hideHeaderOnWelcome, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, enableSharing, onShare: onShareProp, initialPrompt, initialModelId, initialFeatures, initialFiles, hostEnvironment, appId, appName, appLogo, clientTools, ...props }: DocyAssistantProps & {
     ref?: RefObject<HTMLDivElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -12377,10 +12377,23 @@ function GenerativeActionButton({
     }
   );
 }
+var STREAMING_DEBOUNCE_MS = 250;
+var mermaidPromise = null;
+var loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import('mermaid').then((mod) => {
+      mod.default.initialize({ startOnLoad: false, securityLevel: "loose" });
+      return mod.default;
+    });
+  }
+  return mermaidPromise;
+};
 function MermaidRender({ content, className }) {
   const containerRef = useRef(null);
-  const svgRef = useRef(null);
-  const [svg, setSvg] = useState("");
+  const svgHostRef = useRef(null);
+  const sandboxRef = useRef(null);
+  const [status, setStatus] = useState("idle");
+  const [errorMessage, setErrorMessage] = useState(null);
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const isDragging = useRef(false);
@@ -12388,20 +12401,34 @@ function MermaidRender({ content, className }) {
   useEffect(() => {
     if (!content) return;
     let cancelled = false;
-    const render = async () => {
+    const debounce = window.setTimeout(async () => {
       try {
-        const { default: mermaid } = await import('mermaid');
-        mermaid.initialize({ startOnLoad: false, securityLevel: "loose" });
+        const mermaid = await loadMermaid();
+        if (cancelled) return;
+        const valid = await mermaid.parse(content, { suppressErrors: true });
+        if (cancelled) return;
+        if (!valid) {
+          setErrorMessage("Invalid mermaid syntax");
+          setStatus("error");
+          return;
+        }
         const id = `mermaid-${Math.random().toString(36).slice(2)}`;
-        const { svg: rendered } = await mermaid.render(id, content);
-        if (!cancelled) setSvg(rendered);
+        const sandbox = sandboxRef.current ?? void 0;
+        const { svg } = await mermaid.render(id, content, sandbox);
+        if (cancelled) return;
+        if (svgHostRef.current) svgHostRef.current.innerHTML = svg;
+        setErrorMessage(null);
+        setStatus("rendered");
       } catch (err) {
+        if (cancelled) return;
         console.error("Mermaid render error:", err);
+        setErrorMessage("Failed to render diagram");
+        setStatus("error");
       }
-    };
-    render();
+    }, STREAMING_DEBOUNCE_MS);
     return () => {
       cancelled = true;
+      window.clearTimeout(debounce);
     };
   }, [content]);
   const zoomIn = () => setZoom((z) => Math.min(z + 0.15, 4));
@@ -12449,13 +12476,13 @@ function MermaidRender({ content, className }) {
       onMouseUp,
       onMouseLeave: onMouseUp,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { ref: sandboxRef, "aria-hidden": true, className: "absolute -left-[99999px] top-0 h-0 w-0 overflow-hidden" }),
+        status === "error" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4 text-xs text-muted-foreground", children: errorMessage }) : /* @__PURE__ */ jsx(
           "div",
           {
-            ref: svgRef,
+            ref: svgHostRef,
             className: "absolute inset-0 flex items-center justify-center",
-            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: "center" },
-            dangerouslySetInnerHTML: { __html: svg }
+            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: "center" }
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-3 z-10 flex gap-1", children: [
@@ -14989,8 +15016,27 @@ function ChatPanel({
   initialModelId,
   initialFeatures,
   subagents,
-  onManageMemories
+  onManageMemories,
+  appContext,
+  onClearAppContext
 }) {
+  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: [
+      appContext.logo ? /* @__PURE__ */ jsx("img", { src: appContext.logo, alt: "", className: "size-4 rounded" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate", children: appContext.name ? `Talking about ${appContext.name}` : "App context attached" }),
+      onClearAppContext ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Remove app context",
+          onClick: onClearAppContext,
+          className: "text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+        }
+      ) : null
+    ] });
+  };
   const renderInputArea = (hideFooter = false) => /* @__PURE__ */ jsx(
     AIInputArea,
     {
@@ -15045,7 +15091,10 @@ function ChatPanel({
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 pb-6", children: isLoadingAgent ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "p-2 bg-muted rounded-md", children: /* @__PURE__ */ jsx(Spinner, { className: "size-10 text-muted-foreground" }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               hasAgentAnimations(tenantAiAgentId) ? /* @__PURE__ */ jsx(AssistantAnimations, { animationType: "opening", agentId: tenantAiAgentId, className: "w-10 h-10" }) : logo ? /* @__PURE__ */ jsx(AIMessageAvatar, { src: logo, name: title || "Assistant", className: "w-10 h-10" }) : /* @__PURE__ */ jsx(AssistantAnimations, { animationType: "opening", className: "w-10 h-10" }),
               /* @__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__ */ jsx("div", { className: "mt-2", children: renderInputArea(true) })
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col", children: [
+                renderAppContextChip(),
+                renderInputArea(true)
+              ] })
             ] }) }),
             recentSessions && recentSessions.length > 0 && !isLoadingAgent ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3", children: [
               /* @__PURE__ */ jsx("h2", { className: "shrink-0 text-sm font-medium text-muted-foreground", children: "Recent Sessions" }),
@@ -15090,7 +15139,10 @@ function ChatPanel({
         className: messagesClassName
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-2", children: renderInputArea() })
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-3 pb-3 pt-2", children: [
+      renderAppContextChip(),
+      renderInputArea()
+    ] })
   ] });
 }
 var ALLOWED_ORIGINS = ["https://shell.docy.work", "https://shell-docyrus.web.app"];
@@ -30194,6 +30246,8 @@ var AssistantView = ({ ref, ...props }) => {
         initialModelId: commonProps2.initialModelId,
         initialFeatures: commonProps2.initialFeatures,
         subagents: commonProps2.subagents,
+        appContext: commonProps2.appContext,
+        onClearAppContext: commonProps2.onClearAppContext,
         messagesClassName: "p-4"
       }
     );
@@ -30624,6 +30678,8 @@ var AssistantView = ({ ref, ...props }) => {
                   initialModelId: commonProps.initialModelId,
                   initialFeatures: commonProps.initialFeatures,
                   subagents: commonProps.subagents,
+                  appContext: commonProps.appContext,
+                  onClearAppContext: commonProps.onClearAppContext,
                   onManageMemories: onTabChange ? () => onTabChange(4) : void 0,
                   compactToolbar: !isFullscreen
                 }
@@ -31964,6 +32020,9 @@ var DocyAssistant = ({
   initialFeatures,
   initialFiles,
   hostEnvironment,
+  appId,
+  appName,
+  appLogo,
   clientTools,
   ...props
 }) => {
@@ -32000,6 +32059,13 @@ var DocyAssistant = ({
   const [projectSearchQuery, setProjectSearchQuery] = useState("");
   const [isInlineFullscreen, setIsInlineFullscreen] = useState(defaultFullscreen);
   const [sharingEditorOpen, setSharingEditorOpen] = useState(false);
+  const [appContext, setAppContext] = useState(
+    appId ? { id: appId, name: appName, logo: appLogo } : null
+  );
+  useEffect(() => {
+    setAppContext(appId ? { id: appId, name: appName, logo: appLogo } : null);
+  }, [appId, appName, appLogo]);
+  const clearAppContext = useCallback(() => setAppContext(null), []);
   const { isRecording, recognition, handleMicrophoneClick } = useSpeechRecognition({
     enabled: enableMicrophone,
     onTranscript: (transcript) => setInput((prev) => prev + (prev ? " " : "") + transcript),
@@ -32052,6 +32118,7 @@ var DocyAssistant = ({
             supportThinking: options3?.supportThinking,
             supportWorkCanvas: options3?.supportWorkCanvas,
             ...hostEnvironment ? { hostEnvironment } : {},
+            ...appContext?.id ? { appId: appContext.id } : {},
             ...clientToolDefsRef.current.length ? { clientTools: clientToolDefsRef.current } : {},
             ...options3?.filePaths?.length ? { files: options3.filePaths } : {}
           }
@@ -32073,7 +32140,8 @@ var DocyAssistant = ({
     apiEndpoint,
     activeAgentId,
     deploymentId,
-    hostEnvironment
+    hostEnvironment,
+    appContext?.id
   ]);
   const {
     messages = [],
@@ -32591,6 +32659,8 @@ var DocyAssistant = ({
       deploymentId,
       tenantAiAgentId: activeAgentId,
       subagents,
+      appContext,
+      onClearAppContext: clearAppContext,
       initialModelId,
       initialFeatures,
       enableMicrophone,