Skip to main content

REFERENCE

SDK Demos

How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.

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.

  1. 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)}
            />
          )}
        </>
      );
    }

  2. 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.
  3. APIDescription
    footerEndActionsReactNode[]; rendered at the trailing end of the footer input row (after send/mic)
    customActionsReactNode[]; the header-side equivalent (after the title bar)
    ChatbotRef.serviceContext.sendMessageSend a message from outside via ref (e.g. modal Submit)
    useAsgardContext()Read SDK internal state directly inside custom components

Ready to get started?

Want to see how Asgard fits your team? Talk to us.

Contact us