@docyrus/ui-pro-ai-assistant 0.3.8 → 0.3.9

package/README.md

@@ -220,6 +220,7 @@ The main chat interface component.
 |------|------|---------|-------------|
 | `enableSidebar` | `boolean` | `true` | Show the session list sidebar |
 | `enableNavDropdown` | `boolean` | `false` | Show navigation dropdown |
+| `enableWelcomePage` | `boolean` | `true` | Show a welcome landing page on first open with agent greeting, inline prompt input, and recent sessions. Sidebar and header are hidden in this view. Dismissed on interaction (new chat, session click, or message send) |
 | `defaultFullscreen` | `boolean` | `false` | Start in fullscreen |
 | `hideExpand` | `boolean` | `false` | Hide the fullscreen toggle |
 | `hideCloseButton` | `boolean` | `false` | Hide the close (X) button in the header |

package/dist/components/input-area.d.ts

@@ -44,6 +44,7 @@ interface AIInputAreaProps {
     compactToolbar?: boolean;
     threadId?: string;
     hasMessages?: boolean;
+    hideFooter?: boolean;
     tenantAiProjectId?: string;
     initialModelId?: string;
     initialFeatures?: InitialFeatureFlags;

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, tenantAiAgentId, onMessageSend, onVoiceStart, onVoiceEnd, className, defaultFullscreen, hideExpand, hideCloseButton, hideAgentSelector, hideBorder, showHeader, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, initialPrompt, initialModelId, initialFeatures, initialFiles, ...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, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, initialPrompt, initialModelId, initialFeatures, initialFiles, ...props }: DocyAssistantProps & {
     ref?: RefObject<HTMLDivElement | null>;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -17,10 +17,10 @@ import { createPortal } from 'react-dom';
 import { Avatar as Avatar$1, AvatarImage as AvatarImage$1, AvatarFallback as AvatarFallback$1 } from '@docyrus/ui-pro-shared/components/avatar';
 import { ScrollArea } from '@docyrus/ui-pro-shared/components/scroll-area';
 import { Message, AIMessageAvatar, MessageContent, MessageActions, AIConversation, AIConversationContent, MessageResponse, AIConversationScrollButton, MessageAction, Tool, ToolHeader, ToolContent, ToolInput, ToolOutput, CodeBlock, CodeBlockCopyButton, resolveToolIcon, PromptInput, PromptInputTextarea, PromptInputFooter, PromptInputTools, PromptInputButton, PromptInputSubmit, usePromptInputAttachments } from '@docyrus/ui-pro-shared/ai';
-import { Badge } from '@docyrus/ui-pro-shared/components/badge';
-import { Reasoning, ReasoningTrigger, ReasoningContent } from '@docyrus/ui-pro-shared/ai-elements/reasoning';
 import { Spinner } from '@docyrus/ui-pro-shared/components/spinner';
+import { Badge } from '@docyrus/ui-pro-shared/components/badge';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from '@docyrus/ui-pro-shared/ai-elements/reasoning';
 import { Sources, SourcesTrigger, SourcesContent, Source } from '@docyrus/ui-pro-shared/ai-elements/sources';
 import { Card } from '@docyrus/ui-pro-shared/components/card';
 import { ConfirmationAction } from '@docyrus/ui-pro-shared/ai-elements/confirmation';
@@ -4033,6 +4033,7 @@ var AIInputArea = ({
   compactToolbar = false,
   threadId,
   hasMessages = false,
+  hideFooter = false,
   tenantAiProjectId,
   initialModelId,
   initialFeatures
@@ -4268,14 +4269,14 @@ var AIInputArea = ({
         onSubmit: handlePromptSubmit,
         accept: supportFiles ? "image/*,.pdf,.docx,.csv,.xlsx,.md,.txt,.json" : void 0,
         multiple: true,
-        className: "shadow-md bg-background rounded-2xl focus:border-none",
+        className: "bg-input/20 shadow-none",
         children: [
           supportFiles && /* @__PURE__ */ jsx(AttachmentPreview, {}),
           /* @__PURE__ */ jsx(
             PromptInputTextarea,
             {
               placeholder,
-              className: "text-sm min-h-12",
+              className: "text-sm min-h-16",
               value,
               onChange
             }
@@ -4290,7 +4291,7 @@ var AIInputArea = ({
               effectiveSupportWorkCanvas && workCanvasActive
             ].filter(Boolean).length;
             return /* @__PURE__ */ jsxs(PromptInputFooter, { className: "gap-2", children: [
-              /* @__PURE__ */ jsxs(PromptInputTools, { children: [
+              /* @__PURE__ */ jsxs(PromptInputTools, { className: "-mb-2", children: [
                 supportFiles && /* @__PURE__ */ jsx(FileUploadButton, { tooltip: t("tools.file_upload") }),
                 hasSupport && /* @__PURE__ */ jsxs(DropdownMenu$1, { children: [
                   /* @__PURE__ */ jsxs(Tooltip$1, { children: [
@@ -4469,7 +4470,7 @@ var AIInputArea = ({
                     {
                       variant: "ghost",
                       onClick: onMicrophoneClick,
-                      className: cn("transition-all duration-200", isRecording && "bg-destructive/10 text-destructive hover:bg-destructive/20 ring-1 ring-destructive/30"),
+                      className: cn("-mb-2 transition-all duration-200", isRecording && "bg-destructive/10 text-destructive hover:bg-destructive/20 ring-1 ring-destructive/30"),
                       children: [
                         /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4" }),
                         isRecording && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-destructive rounded-full animate-pulse" })
@@ -4696,7 +4697,7 @@ var AIInputArea = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "relative mt-2 flex items-center px-1", children: [
+    !hideFooter && /* @__PURE__ */ jsxs("div", { className: "relative mt-2 flex items-center px-1", children: [
       footerText && /* @__PURE__ */ jsx("span", { className: "flex-1 text-center text-xs text-muted-foreground", children: footerText }),
       /* @__PURE__ */ jsxs(Tooltip$1, { children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -7331,7 +7332,7 @@ var MessageItem = memo(({
     });
   };
   return /* @__PURE__ */ jsx(Message, { from: message.role, children: /* @__PURE__ */ jsxs("div", { className: cn(
-    "flex items-start gap-3",
+    "flex items-center gap-3",
     message.role === "user" && "flex-row-reverse"
   ), children: [
     isStreaming && isAssistantMessage && !logo ? /* @__PURE__ */ jsx(AssistantAnimations, { animationType: "working", className: "w-12 h-12 shrink-0" }) : /* @__PURE__ */ jsx(
@@ -7343,7 +7344,7 @@ var MessageItem = memo(({
         className: "w-12 h-12"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 max-w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full items-center", children: [
       /* @__PURE__ */ jsx(MessageContent, { className: "group-[.is-user]:p-2 group-[.is-user]:mt-0.5", children: renderMessageContent() }),
       isAssistantMessage && !isStreaming && textContent && /* @__PURE__ */ jsx(MessageActions, { className: "mt-1 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(CopyButton, { text: textContent }) })
     ] })
@@ -7371,7 +7372,7 @@ var MessageList = memo(({
     messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center", children: isLoadingAgent ? /* @__PURE__ */ jsx("div", { className: "p-2 bg-muted rounded-md", children: /* @__PURE__ */ jsx(Spinner, { className: "size-10 text-muted-foreground" }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-center px-4", children: [
       logo ? /* @__PURE__ */ jsx(AIMessageAvatar, { src: logo, name: title || "Assistant", className: "w-20 h-20" }) : /* @__PURE__ */ jsx(AssistantAnimations, { animationType: "opening", className: "w-32 h-32" }),
       title && /* @__PURE__ */ jsx("p", { className: "font-semibold text-base text-lg", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "max-w-sm text-md text-muted-foreground", 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: "text-sm text-muted-foreground", 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: "space-y-6", children: [
       messages.map((message, msgIdx) => {
         const isLastMessage = msgIdx === lastMsgIdx;
@@ -7437,10 +7438,74 @@ function ChatPanel({
   renderThreadHeader,
   messagesClassName,
   compactToolbar,
+  showWelcome,
+  recentSessions,
+  onSessionClick,
   threadId,
   initialModelId,
   initialFeatures
 }) {
+  const renderInputArea = (hideFooter = false) => /* @__PURE__ */ jsx(
+    AIInputArea,
+    {
+      onSubmit: onSendMessage,
+      onStop,
+      value: input,
+      onChange: onInputChange,
+      placeholder,
+      isLoading,
+      supportFiles,
+      supportWebSearch,
+      supportDocumentSearch,
+      supportDeepResearch,
+      supportThinking,
+      supportWorkCanvas,
+      supportMultiModels,
+      deploymentId,
+      tenantAiAgentId,
+      enableMicrophone,
+      enableVoice,
+      isRecording,
+      recognition,
+      onMicrophoneClick,
+      footerText,
+      showToolbar: !compactToolbar,
+      compactToolbar,
+      threadId,
+      hasMessages: messages.length > 0,
+      hideFooter,
+      initialModelId,
+      initialFeatures
+    }
+  );
+  if (showWelcome && messages.length === 0) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderThreadHeader?.(),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 py-12", 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: [
+          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) })
+        ] }) }),
+        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" }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y", children: recentSessions.slice(0, 5).map((session) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onClick: () => onSessionClick?.(session),
+              className: "-mx-2 flex cursor-pointer items-center gap-3 rounded-md px-2 py-3 transition-colors hover:bg-muted/50",
+              children: [
+                /* @__PURE__ */ jsx(MessageSquare, { className: "size-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium", children: session.title || "Untitled session" }) }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: session.updatedAt.toLocaleDateString() })
+              ]
+            },
+            session.id
+          )) }) })
+        ] }) : null
+      ] }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderThreadHeader?.(),
     /* @__PURE__ */ jsx(
@@ -7460,38 +7525,7 @@ function ChatPanel({
         className: messagesClassName
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-2", children: /* @__PURE__ */ jsx(
-      AIInputArea,
-      {
-        onSubmit: onSendMessage,
-        onStop,
-        value: input,
-        onChange: onInputChange,
-        placeholder,
-        isLoading,
-        supportFiles,
-        supportWebSearch,
-        supportDocumentSearch,
-        supportDeepResearch,
-        supportThinking,
-        supportWorkCanvas,
-        supportMultiModels,
-        deploymentId,
-        tenantAiAgentId,
-        enableMicrophone,
-        enableVoice,
-        isRecording,
-        recognition,
-        onMicrophoneClick,
-        footerText,
-        showToolbar: !compactToolbar,
-        compactToolbar,
-        threadId,
-        hasMessages: messages.length > 0,
-        initialModelId,
-        initialFeatures
-      }
-    ) })
+    /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 pt-2", children: renderInputArea() })
   ] });
 }
 var ALLOWED_ORIGINS = ["https://shell.docy.work", "https://shell-docyrus.web.app"];
@@ -22574,6 +22608,9 @@ var AssistantView = ({ ref, ...props }) => {
         onMicrophoneClick: commonProps2.onMicrophoneClick,
         onToolAction: commonProps2.onToolAction,
         openCanvasView: handleOpenCanvasView,
+        showWelcome: commonProps2.showWelcome,
+        recentSessions: commonProps2.recentSessions,
+        onSessionClick: commonProps2.onSessionClick,
         threadId: commonProps2.threadId,
         initialModelId: commonProps2.initialModelId,
         initialFeatures: commonProps2.initialFeatures,
@@ -22725,7 +22762,7 @@ var AssistantView = ({ ref, ...props }) => {
           activeAgent?.name ?? commonProps.title ?? "Assistant"
         ] }) : null;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          showHeader && /* @__PURE__ */ jsxs("div", { className: cn(
+          showHeader && !(commonProps.showWelcome && commonProps.messages.length === 0) && /* @__PURE__ */ jsxs("div", { className: cn(
             "relative z-50 flex items-center justify-between h-12 px-3 border-b shrink-0 bg-background",
             !isSidebarOpen && enableSidebar && "pl-12"
           ), children: [
@@ -22817,7 +22854,7 @@ var AssistantView = ({ ref, ...props }) => {
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-row min-h-0 overflow-hidden relative", children: [
-            !isSidebarOpen && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-40 flex flex-col gap-1 rounded-md bg-background/80 backdrop-blur-sm p-0.5", children: [
+            !isSidebarOpen && !(commonProps.showWelcome && commonProps.messages.length === 0) && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-40 flex flex-col gap-1 rounded-md bg-background/80 backdrop-blur-sm p-0.5", children: [
               enableSidebar && onToggleSidebar && /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -22855,7 +22892,7 @@ var AssistantView = ({ ref, ...props }) => {
                 }
               )
             ] }),
-            enableSidebar && isSidebarOpen && renderSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+            enableSidebar && isSidebarOpen && renderSidebar && !(commonProps.showWelcome && commonProps.messages.length === 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -22886,7 +22923,7 @@ var AssistantView = ({ ref, ...props }) => {
                 /* @__PURE__ */ jsx("div", { className: "flex-1 p-4 flex flex-col min-h-0 overflow-hidden", children: renderSidebar(true) })
               ] }) })
             ] }),
-            enableSidebar && renderSidebar && /* @__PURE__ */ jsx(
+            enableSidebar && renderSidebar && !(commonProps.showWelcome && commonProps.messages.length === 0) && /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
@@ -23028,6 +23065,9 @@ var AssistantView = ({ ref, ...props }) => {
                   onToolAction: commonProps.onToolAction,
                   openCanvasView: handleOpenCanvasViewInline,
                   renderThreadHeader,
+                  showWelcome: commonProps.showWelcome,
+                  recentSessions: commonProps.recentSessions,
+                  onSessionClick: commonProps.onSessionClick,
                   threadId: commonProps.threadId,
                   initialModelId: commonProps.initialModelId,
                   initialFeatures: commonProps.initialFeatures,
@@ -24743,6 +24783,7 @@ var DocyAssistant = ({
   enableNavDropdown = false,
   enableVoice = false,
   enableMicrophone = true,
+  enableWelcomePage = true,
   tenantAiAgentId,
   onMessageSend,
   onVoiceStart,
@@ -24784,6 +24825,7 @@ var DocyAssistant = ({
   const { state: projectState, actions: projectActions } = useProjectState();
   const { state: worksState, actions: worksActions } = useWorksState();
   const [input, setInput] = useState("");
+  const [showWelcome, setShowWelcome] = useState(enableWelcomePage);
   const currentUserId = configUser.id;
   const [projectSearchQuery, setProjectSearchQuery] = useState("");
   const [isInlineFullscreen, setIsInlineFullscreen] = useState(defaultFullscreen);
@@ -24812,16 +24854,15 @@ var DocyAssistant = ({
     const apiUrl = deploymentId ? `${baseUrl}${endpointPath.replace("/chat", `/deployments/${deploymentId}/chat`)}` : `${baseUrl}${endpointPath}`;
     return new DefaultChatTransport({
       api: apiUrl,
-      prepareSendMessagesRequest: ({ messages: messages2, body }) => {
+      prepareSendMessagesRequest: ({ messages: messages2, ...rest }) => {
         const options3 = messageOptionsRef.current;
         return {
+          ...rest,
           body: {
-            ...body,
+            ...rest.body,
             agentId: activeAgentId,
             threadId: selectedSessionIdRef.current,
-            // Use ref for immediate access
             messages: messages2.slice(-10),
-            // Only send last 10 messages
             modelId: options3?.modelId,
             supportMultipleModels: options3?.supportMultipleModels,
             supportFiles: options3?.supportFiles,
@@ -24837,7 +24878,6 @@ var DocyAssistant = ({
       headers: () => {
         const token = authTokenRef.current;
         return {
-          "Content-Type": "application/json",
           ...token && { Authorization: `Bearer ${token}` }
         };
       },
@@ -25039,6 +25079,7 @@ var DocyAssistant = ({
     sessionActions.selectSessionId(session.id);
     sessionActions.selectSession(session);
     uiActions.setActiveTab(0);
+    setShowWelcome(false);
     await loadThreadMessages2(session.id);
   };
   const createNewThread = () => {
@@ -25046,11 +25087,13 @@ var DocyAssistant = ({
     sessionActions.selectSession(null);
     uiActions.setActiveTab(0);
     setMessages([]);
+    setShowWelcome(false);
   };
   const handleSendMessage = async (e, options3, overrideText) => {
     e?.preventDefault();
     const messageText = (overrideText ?? input).trim();
     if (!messageText) return;
+    setShowWelcome(false);
     messageOptionsRef.current = options3;
     let currentThreadId = selectedSessionIdRef.current;
     if (!currentThreadId) {
@@ -25332,6 +25375,9 @@ var DocyAssistant = ({
       isRecording,
       recognition,
       onMicrophoneClick: handleMicrophoneClick,
+      showWelcome,
+      recentSessions: sessionState.sessions,
+      onSessionClick: handleSessionClick,
       isSidebarOpen: uiState.isSidebarOpen,
       onToggleSidebar: () => uiActions.setSidebarOpen(!uiState.isSidebarOpen),
       renderSidebar: renderSidebarContent,