Footer End Actions

footerEndActions is a purely additive slot. Pass a ReactNode[] and each node renders at the trailing end of the footer input row, after the send/mic button. The textarea, attachment buttons, send, mic, and the rest of the built-in footer logic are preserved as-is.

Useful when you need an extra button at the trailing edge of the input row — for example, opening a larger SQL / Markdown editor modal, toggling input modes, or popping up a settings panel. Grab sendMessage through the ref to push content edited inside your external modal back into the chatbot.

Append Buttons at the Footer End

footerEndActions is an additive slot: nodes render at the trailing end of the footer input row (after the send/mic button). The rest of the footer (textarea, IME, upload, mic, drag-drop) is untouched.

• Purely additive — built-in logic is preserved
• Click SQL to open a custom modal SQL editor
• Submit calls sendMessage via chatbotRef to send the SQL

Loading chatbot...

Code Example

import { useRef, useState } from "react";
import { Chatbot, ChatbotRef } from "@asgard-js/react";

function App() {
  const chatbotRef = useRef<ChatbotRef>(null);
  const [editorOpen, setEditorOpen] = useState(false);

  return (
    <>
      <Chatbot
        ref={chatbotRef}
        config={{ botProviderEndpoint: "..." }}
        customChannelId="..."
        footerEndActions={[
          <button
            key="sql"
            onClick={() => setEditorOpen(true)}
            title="Open SQL editor"
          >
            SQL
          </button>,
        ]}
      />
      {editorOpen && (
        // SqlEditorModal is your own modal component
        <SqlEditorModal
          onSubmit={(text) => {
            chatbotRef.current?.serviceContext?.sendMessage?.({ text });
            setEditorOpen(false);
          }}
          onCancel={() => setEditorOpen(false)}
        />
      )}
    </>
  );
}

Edge Cases

• Position is fixed at the trailing end: footerEndActions renders after the send/mic button.
• Does not participate in the collapse logic: the footer's built-in "≥3 leading attachment buttons → collapse into + menu" behavior is independent of footerEndActions.
• Styling is on you: each item is a raw ReactNode. Match the send/mic button height (~36px); don't steal visual weight from the send button (the primary CTA).
• Many items will squeeze the textarea: the row is finite — keep the count small yourself.
• Two ways to send the message: either via chatbotRef.current.serviceContext.sendMessage from outside (as in the example), or use useAsgardContext() inside a custom component / wrapper to grab sendMessage directly.

Related API

API	Description
footerEndActions	ReactNode[]; rendered at the trailing end of the footer input row (after send/mic)
customActions	ReactNode[]; the header-side equivalent (after the title bar)
ChatbotRef.serviceContext.sendMessage	Send a message from outside via ref (e.g. modal Submit)
useAsgardContext()	Read SDK internal state directly inside custom components