Footer – Code

import { Footer } from "@servicetitan/ext-atlas";

function BasicFooter() {
  const [message, setMessage] = useState("");

  const handleSubmit = () => {
    console.log("Sending:", message);
    setMessage("");
  };

  return (
    <Footer
      message={message}
      onMessageChange={setMessage}
      onSubmit={handleSubmit}
    />
  );
}

import { Footer } from "@servicetitan/ext-atlas";

function FooterWithLoading() {
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    setIsLoading(true);
    await sendMessage(message);
    setMessage("");
    setIsLoading(false);
  };

  return (
    <Footer
      message={message}
      onMessageChange={setMessage}
      onSubmit={handleSubmit}
      isLoading={isLoading}
    />
  );
}

import { Footer } from "@servicetitan/ext-atlas";

function FooterWithActions() {
  const [message, setMessage] = useState("");

  return (
    <Footer
      message={message}
      onMessageChange={setMessage}
      onSubmit={handleSubmit}
      onUploadFile={() => openFileDialog()}
      onDictateMessage={() => startVoiceInput()}
    />
  );
}

import { Footer } from "@servicetitan/ext-atlas";

function FooterWithCustomPlaceholder() {
  const [message, setMessage] = useState("");

  return (
    <Footer
      message={message}
      onMessageChange={setMessage}
      onSubmit={handleSubmit}
      placeholder="Type your question here..."
    />
  );
}