Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- ChatComposerRich API
Common Examples
import { ChatComposerRich } from "@servicetitan/anvil2-ext-atlas";
function BasicComposer() {
const [message, setMessage] = useState("");
const handleSend = (text: string) => {
console.log("Sending:", text);
};
return (
<ChatComposerRich
message={message}
onChange={setMessage}
onSend={handleSend}
/>
);
}
With Action Menu
Enable file upload and voice dictation options:import { ChatComposerRich } from "@servicetitan/anvil2-ext-atlas";
function ComposerWithActions() {
const [message, setMessage] = useState("");
return (
<ChatComposerRich
message={message}
onChange={setMessage}
onSend={handleSend}
onUploadFile={() => openFileDialog()}
onDictateMessage={() => startVoiceRecognition()}
/>
);
}
Disabled State
Disable input during processing:import { ChatComposerRich } from "@servicetitan/anvil2-ext-atlas";
function DisabledComposer() {
const [isProcessing, setIsProcessing] = useState(false);
return (
<ChatComposerRich
message=""
onChange={() => {}}
onSend={handleSend}
disabled={isProcessing}
placeholder="Processing your request..."
/>
);
}
Custom Placeholder
import { ChatComposerRich } from "@servicetitan/anvil2-ext-atlas";
function CustomPlaceholderComposer() {
return (
<ChatComposerRich
message=""
onChange={setMessage}
onSend={handleSend}
placeholder="Type your question here..."
/>
);
}
<ChatComposerRich
message={message}
onChange={setMessage}
onSend={handleSend}
placeholder="Ask anything..."
disabled={false}
onUploadFile={handleUpload}
onDictateMessage={handleDictate}
/>
ChatComposerRich Props
(text: string) => void
required
Callback fired when the input content changes.
string
Additional CSS class name for custom styling.
boolean
default:"false"
When true, disables the entire composer including input and buttons.
string
The current value of the input. Used to sync external state with the input.
() => void
Callback for the “Dictate message” menu action. Menu item only renders when provided.
(text: string) => void
Callback fired when the user submits a message (Enter key or send button).
() => void
Callback for the “Upload file” menu action. Menu item only renders when provided.
string
default:"Ask anything..."
Placeholder text displayed when the input is empty.
Test ID Props
string
Test ID for the menu button.
string
Test ID for the message input element.
string
Test ID for the send button.