@asgard-js/react 0.2.40-canary.1 → 0.2.40-canary.2

package/README.md

@@ -292,6 +292,7 @@ config: {
   - `onRunDone?`: `DoneEventHandler` - Handler for run completion events
   - `onRunError?`: `ErrorEventHandler` - Error handler for execution errors
 - **customActions?**: `ReactNode[]` - Custom actions to display on the chatbot header
+- **customFooterActions?**: `ReactNode[]` - Custom action buttons rendered alongside the built-in footer attachment buttons (upload / export / document). Each item is a `ReactNode`; the consumer controls styling. Mirrors the pattern of `customActions`. See [Custom Footer Actions](#custom-footer-actions) section for details.
 - **enableLoadConfigFromService?**: `boolean` - Enable loading configuration from service
 - **enableUpload?**: `boolean` - Enable file upload functionality. When set, it takes priority over the `embedConfig.enableUpload` setting from the bot provider metadata. Defaults to `false` if not specified in either location. Supports image files (JPEG, PNG, GIF, WebP) up to 20MB per file, maximum 10 files at once.
 - **enableExport?**: `boolean` - Enable conversation export functionality. When set, it takes priority over the `embedConfig.enableExport` setting from the bot provider metadata. Defaults to `false` if not specified in either location. Adds a download button to the chatbot footer that exports the conversation history as a Markdown file with timestamps and trace IDs.
@@ -318,7 +319,6 @@ config: {
 - **messageActions?**: `(message: ConversationBotMessage) => MessageActionConfig[]` - Function to define which action buttons to display for each bot message. Returns an array of `{ id: string, label: string }` objects. See [Message Actions](#message-actions) section for details.
 - **onMessageAction?**: `(actionId: string, message: ConversationBotMessage) => void` - Callback when a message action button is clicked. Receives the action ID and the associated bot message.
 - **renderHeader?**: `() => ReactNode` - Custom header renderer. When provided, completely replaces the default header. Use `useAsgardContext()` inside the render function to access `resetChannel`, `isResetting`, and other internal state.
-- **renderFooter?**: `() => ReactNode` - Custom footer renderer. When provided, completely replaces the default footer. Use `useAsgardContext()` inside the render function to access `sendMessage`, `isConnecting`, `pendingInputValue`, `setPendingInputValue`, etc. See [Custom Footer](#custom-footer) section for details.
 - **renderMenu?**: `() => ReactNode` - Custom menu renderer. When provided, renders content between the chat body and footer. Useful for quick menus, suggested questions, or navigation panels. See [Custom Menu](#custom-menu) section for details.
 - **renderMessageContent?**: `(props: MessageContentRendererProps) => ReactNode` - Custom renderer for message content. Allows customizing how messages are rendered based on message properties. See [Custom Message Renderer](#custom-message-renderer) section for details.
 - **renderToolCallGroup?**: `(props: ToolCallGroupRendererProps) => ReactNode` - Custom renderer for tool call group. Return `null` to hide, return JSX to fully customize, or call `renderDefaultContent()` to use the default UI with optional overrides (e.g., `renderDefaultContent({ title: 'AI is thinking...' })`). See [Tool Call Group Renderer](#tool-call-group-renderer) section for details.
@@ -1321,74 +1321,52 @@ const App = () => {
 };
 ```
 
-<a id="custom-footer"></a>
+<a id="custom-footer-actions"></a>
 <br/>
 
-### Custom Footer
+### Custom Footer Actions
 
-The `renderFooter` prop allows you to completely replace the default chatbot footer with your own implementation. This is useful when the built-in input bar does not match your product's interaction pattern (e.g. fixed quick-reply buttons, custom send mechanics, or extra action buttons that cannot be expressed via `enableUpload` / `enableExport` / `enableDocumentUpload`).
+The `customFooterActions` prop adds extra buttons to the built-in footer alongside the default attachment buttons (upload / export / document). The rest of the footer — textarea, IME composition handling, send button, mic button, drag-and-drop — stays untouched. This is the right tool for the common "I just want to add a button" case; if you need to fully replace the footer, that requires a different (not-yet-shipped) prop.
 
-Use `useAsgardContext()` inside your custom footer to access `sendMessage`, `isConnecting`, `pendingInputValue`, `setPendingInputValue`, and other internal state. When `sendMessage` is `undefined`, the chatbot is in preview mode — disable input accordingly.
+Items are plain `ReactNode`s; the consumer styles each button as they like.
 
 #### Usage Example
 
 ```typescript
-import { useEffect, useRef, useState } from 'react';
-import { Chatbot, useAsgardContext } from '@asgard-js/react';
-
-function CustomFooter() {
-  const { sendMessage, isConnecting, pendingInputValue, setPendingInputValue } = useAsgardContext();
-  const [value, setValue] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (pendingInputValue === null) return;
-
-    setValue(pendingInputValue);
-    setPendingInputValue(null);
-    textareaRef.current?.focus();
-  }, [pendingInputValue, setPendingInputValue]);
-
-  const isPreviewMode = !sendMessage;
-  const trimmed = value.trim();
-  const disabled = isPreviewMode || isConnecting || !trimmed;
-
-  const submit = () => {
-    if (disabled) return;
+import { Chatbot } from '@asgard-js/react';
 
-    sendMessage?.({ text: trimmed });
-    setValue('');
+const App = () => {
+  const handleExportPdf = (): void => {
+    // ...
   };
 
   return (
-    <div style={{ display: 'flex', gap: 8, padding: '12px 16px', borderTop: '1px solid #eee' }}>
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        disabled={isPreviewMode}
-        placeholder={isPreviewMode ? 'Preview mode' : 'Type a message'}
-        style={{ flex: 1 }}
-      />
-      <button onClick={submit} disabled={disabled}>
-        Send
-      </button>
-    </div>
+    <Chatbot
+      config={{
+        apiKey: 'your-api-key',
+        botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+      }}
+      customChannelId="your-channel-id"
+      customFooterActions={[
+        <button key="pdf" onClick={handleExportPdf} title="Export PDF">
+          📄
+        </button>,
+        <button key="bookmark" onClick={() => console.log('Bookmark')} title="Bookmark">
+          🔖
+        </button>,
+      ]}
+    />
   );
-}
-
-const App = () => (
-  <Chatbot
-    config={{
-      apiKey: 'your-api-key',
-      botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
-    }}
-    customChannelId="your-channel-id"
-    renderFooter={() => <CustomFooter />}
-  />
-);
+};
 ```
 
+#### Notes
+
+- Items render in the same row as the built-in attachment buttons (after upload / export / document, before the textarea).
+- They do **not** participate in the built-in collapse-into-`+`-menu logic; they always render inline. Avoid passing many items, or the row may overflow.
+- When the chatbot is in preview mode (`sendMessage` unavailable) the built-in buttons remain visible but inert. Your custom buttons stay clickable — disable them yourself if that matters.
+- For the rare case where you need a completely different input UX (e.g. structured form, code editor), this prop is not enough; use `useAsgardContext()` to read SDK state and build something on the side, or open an issue for a `renderFooter` escape hatch.
+
 <a id="custom-menu"></a>
 <br/>
 

package/dist/components/chatbot/chatbot-footer/chatbot-footer.d.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
 
-export declare function ChatbotFooter(): ReactNode;
+interface ChatbotFooterProps {
+    customFooterActions?: ReactNode[];
+}
+export declare function ChatbotFooter({ customFooterActions }?: ChatbotFooterProps): ReactNode;
+export {};
 //# sourceMappingURL=chatbot-footer.d.ts.map

package/dist/components/chatbot/chatbot-footer/chatbot-footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/chatbot-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAC;AA0Bf,wBAAgB,aAAa,IAAI,SAAS,CA23BzC"}
+{"version":3,"file":"chatbot-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/chatbot-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAC;AA0Bf,UAAU,kBAAkB;IAC1B,mBAAmB,CAAC,EAAE,SAAS,EAAE,CAAC;CACnC;AAED,wBAAgB,aAAa,CAAC,EAAE,mBAAmB,EAAE,GAAE,kBAAuB,GAAG,SAAS,CA43BzF"}

package/dist/components/chatbot/chatbot.d.ts

@@ -53,12 +53,11 @@ interface ChatbotProps extends AsgardTemplateContextValue {
     /** Custom header renderer. When provided, replaces the default header entirely. */
     renderHeader?: () => ReactNode;
     /**
-     * Custom footer renderer. When provided, replaces the default footer
-     * entirely. Use `useAsgardContext()` inside the renderer to access
-     * `sendMessage`, `isConnecting`, `pendingInputValue`, `setPendingInputValue`,
-     * etc. Mirrors the pattern of `renderHeader`.
+     * Custom action buttons rendered alongside the built-in footer buttons
+     * (upload / export / document). Each item is a ReactNode and the consumer
+     * controls styling. Mirrors the pattern of `customActions` (header).
      */
-    renderFooter?: () => ReactNode;
+    customFooterActions?: ReactNode[];
     /** Custom menu renderer. When provided, renders between chat body and footer. */
     renderMenu?: () => ReactNode;
     /** Custom renderer for tool call group. Return null to hide, or return custom JSX. */

package/dist/components/chatbot/chatbot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EACT,aAAa,EAId,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAA8B,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACzG,OAAO,EAEL,yBAAyB,EAEzB,0BAA0B,EAE1B,iCAAiC,EAGjC,iBAAiB,EAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAY5C,UAAU,YAAa,SAAQ,0BAA0B;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,iCAAiC,CAAC,cAAc,CAAC,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAG5D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,OAAO,CAAC;QAAC,kBAAkB,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5G,6DAA6D;IAC7D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;IAEvE,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAE/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAE/B,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,SAAS,CAAC;IAE7B,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,0BAA0B,CAAC,qBAAqB,CAAC,CAAC;IAExE,uMAAuM;IACvM,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sHAAsH;IACtH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,qGAoRlB,CAAC"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"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"}