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

package/README.md

@@ -318,6 +318,7 @@ 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.
@@ -1320,6 +1321,74 @@ const App = () => {
 };
 ```
 
+<a id="custom-footer"></a>
+<br/>
+
+### Custom Footer
+
+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`).
+
+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.
+
+#### 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;
+
+    sendMessage?.({ text: trimmed });
+    setValue('');
+  };
+
+  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>
+  );
+}
+
+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 />}
+  />
+);
+```
+
 <a id="custom-menu"></a>
 <br/>
 

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

@@ -52,6 +52,13 @@ interface ChatbotProps extends AsgardTemplateContextValue {
     onChannelReady?: () => void;
     /** 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`.
+     */
+    renderFooter?: () => 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":"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"}
+{"version":3,"file":"chatbot.d.ts","sourceRoot":"","sources":["../../../src/components/chatbot/chatbot.tsx"],"names":[],"mappings":"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"}