@asgard-js/react 0.2.44 → 0.2.45

package/README.md

@@ -320,6 +320,7 @@ config: {
 - **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.
 - **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.
 - **footerEndActions?**: `ReactNode[]` - Extra action nodes rendered at the end of the footer input row, after the send/mic button. Pure additive slot — built-in textarea / attachment buttons / send / mic remain unchanged. See [Footer End Actions](#footer-end-actions) section for details.
+- **renderFooter?**: `() => ReactNode` - Custom footer renderer. When provided, completely replaces the default footer — built-in textarea, send/mic, upload, export, IME guard, and `footerEndActions` are not rendered. Use `useAsgardContext()` to access `sendMessage`, `isConnecting`, `pendingInputValue` / `setPendingInputValue`, etc. See [Custom Footer](#custom-footer) 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.
 - **onBeforeSendMessage?**: `(params: SendMessageParams) => SendMessageParams` - Callback to modify message params before sending. Allows injecting contextual data (payload, metadata) from parent components. See [Before Send Message Hook](#before-send-message-hook) section for details.
@@ -1377,6 +1378,107 @@ const App = () => {
 - Use `chatbotRef.current?.serviceContext?.sendMessage` (or `useAsgardContext()` inside a wrapper component) to send messages from the consumer-owned UI that the action triggers (e.g. modal Submit button).
 - Distinct from `customActions` (header trailing): `customActions` appends to the **header** title bar, `footerEndActions` appends to the **footer** input row.
 
+<a id="custom-footer"></a>
+<br/>
+
+### Custom Footer
+
+The `renderFooter` prop completely replaces the default `<ChatbotFooter />`. Reach for it when you need to redesign the entire input area — for example a single-line input, a custom voice-only flow, or a different layout. If you only need to add a button next to send, use [`footerEndActions`](#footer-end-actions) instead, which keeps every built-in feature intact.
+
+What `renderFooter` removes from the default footer:
+
+- Built-in textarea (with auto-resize)
+- Send button, microphone button
+- Image upload, document upload, conversation export
+- IME composition guard (skip submit while composing)
+- The `footerEndActions` slot
+
+The container-level drag-and-drop overlay still appears when `enableUpload` or `enableDocumentUpload` is set, but textarea-side file handling is gone. If your custom footer needs to react to dropped files, read them from `useFileDropContext()`.
+
+Use `useAsgardContext()` to access runtime state:
+
+- `sendMessage(params)` — submit a message (`undefined` in preview mode, e.g. while config is loading)
+- `isConnecting` — disable send while the channel is busy
+- `pendingInputValue` / `setPendingInputValue` — receive values pushed in via `ChatbotRef.setInputValue` or `renderMenu` selection, then clear them
+- `inputPlaceholder`, `title`, `avatar`, `messages`, etc.
+
+Use `useAsgardThemeContext()` for theme tokens to stay visually consistent with the rest of the chatbot.
+
+#### Usage Example
+
+```typescript
+import { useEffect, useRef, useState } from 'react';
+import { Chatbot, ChatbotRef, useAsgardContext } from '@asgard-js/react';
+
+function CustomFooter() {
+  const { sendMessage, isConnecting, pendingInputValue, setPendingInputValue, inputPlaceholder } = useAsgardContext();
+
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Receive text pushed in via ChatbotRef.setInputValue or renderMenu
+  useEffect(() => {
+    if (pendingInputValue == null) return;
+    setValue(pendingInputValue);
+    setPendingInputValue(null);
+    textareaRef.current?.focus();
+  }, [pendingInputValue, setPendingInputValue]);
+
+  const submit = () => {
+    const text = value.trim();
+    if (!text || isConnecting) return;
+    sendMessage?.({ text });
+    setValue('');
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: 8, padding: '8px 12px' }}>
+      <textarea
+        ref={textareaRef}
+        placeholder={inputPlaceholder ?? 'Type a message...'}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        onKeyDown={e => {
+          // Skip submit while IME is composing
+          if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            submit();
+          }
+        }}
+        rows={1}
+        style={{ flex: 1 }}
+      />
+      <button onClick={submit} disabled={!value.trim() || isConnecting}>
+        Send
+      </button>
+    </div>
+  );
+}
+
+const App = () => {
+  const chatbotRef = useRef<ChatbotRef>(null);
+
+  return (
+    <Chatbot
+      ref={chatbotRef}
+      config={{
+        apiKey: 'your-api-key',
+        botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
+      }}
+      customChannelId="your-channel-id"
+      renderFooter={() => <CustomFooter />}
+    />
+  );
+};
+```
+
+#### Notes
+
+- `renderFooter` is a full replacement, not an additive slot. If you only want to add buttons after send, use [`footerEndActions`](#footer-end-actions).
+- When `renderFooter` is provided, `footerEndActions` is silently ignored.
+- `sendMessage` is `undefined` while the chatbot is in preview / not yet connected — guard with `?.()` and disable your submit UI until it's defined.
+- The `<ToolCallConsentGate />` is rendered outside `renderFooter`, so tool-call consent modals still appear normally.
+
 <a id="custom-menu"></a>
 <br/>
 

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

@@ -56,7 +56,16 @@ interface ChatbotProps extends AsgardTemplateContextValue {
      * guard ref in the consumer if the work should only happen once.
      */
     onChannelReady?: () => void;
-    /** Custom header renderer. When provided, replaces the default header entirely. */
+    /**
+     * Custom header renderer. When provided, replaces the default `<ChatbotHeader />`
+     * entirely — `title`, `onReset`, `onClose`, `customActions`, and
+     * `maintainConnectionWhenClosed` are no longer applied automatically; the
+     * renderer owns the header area in full.
+     *
+     * Use `useAsgardContext()` inside the renderer to access runtime state
+     * (`resetChannel`, `isResetting`, `avatar`, `title`, etc.) and
+     * `useAsgardThemeContext()` for theme tokens.
+     */
     renderHeader?: () => ReactNode;
     /** Custom menu renderer. When provided, renders between chat body and footer. */
     renderMenu?: () => ReactNode;
@@ -67,6 +76,29 @@ interface ChatbotProps extends AsgardTemplateContextValue {
      * "open SQL editor modal", "switch input mode", etc.
      */
     footerEndActions?: ReactNode[];
+    /**
+     * Custom footer renderer. When provided, replaces the default `<ChatbotFooter />`
+     * entirely. The built-in textarea, send / mic button, image upload, document
+     * upload, export, IME composition guard, and `footerEndActions` are **not**
+     * rendered — the renderer fully owns the footer area.
+     *
+     * The container-level drag-and-drop overlay (`<DropZoneOverlay />`) still
+     * appears when `enableUpload` or `enableDocumentUpload` is set, but the
+     * default consumption path (textarea-side handling) is gone. If your custom
+     * footer wants to react to dropped files, read them from
+     * `useFileDropContext()`.
+     *
+     * Use `useAsgardContext()` inside the renderer to access:
+     * - `sendMessage(params)` — submit a message (undefined in preview mode)
+     * - `isConnecting` — disable send while the channel is busy
+     * - `pendingInputValue` / `setPendingInputValue` — receive values pushed in
+     *   via `ChatbotRef.setInputValue` or `renderMenu` selection, then clear them
+     * - `inputPlaceholder`, `title`, `avatar`, `messages`, etc.
+     *
+     * Use `useAsgardThemeContext()` for theme tokens to stay visually consistent
+     * with the rest of the chatbot.
+     */
+    renderFooter?: () => ReactNode;
     /** Custom renderer for tool call group. Return null to hide, or return custom JSX. */
     renderToolCallGroup?: AsgardTemplateContextValue['renderToolCallGroup'];
     /** Whether to automatically reset channel on mount. Defaults to true. When false, the channel is created without sending RESET_CHANNEL, allowing history messages to be preserved via initMessages. */

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":"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"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"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"}