Chat Composer Rich – Code

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

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

  const handleSend = (text: string) => {
    console.log("Sending:", text);
  };

  return (
    <ChatComposerRich
      message={message}
      onChange={setMessage}
      onSend={handleSend}
    />
  );
}

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

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

  return (
    <ChatComposerRich
      message={message}
      onChange={setMessage}
      onSend={handleSend}
      onUploadFile={() => openFileDialog()}
      onDictateMessage={() => startVoiceRecognition()}
    />
  );
}

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

function DisabledComposer() {
  const [isProcessing, setIsProcessing] = useState(false);

  return (
    <ChatComposerRich
      message=""
      onChange={() => {}}
      onSend={handleSend}
      disabled={isProcessing}
      placeholder="Processing your request..."
    />
  );
}

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

function CustomPlaceholderComposer() {
  return (
    <ChatComposerRich
      message=""
      onChange={setMessage}
      onSend={handleSend}
      placeholder="Type your question here..."
    />
  );
}