Component documentation
SGUI / Development
Message history, a multiline composer, pending delivery and recoverable drafts.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TextConversation, type ConversationMessage} from '@structured-growth/sg-ui';
export default function ConversationExample() {
const [draft, setDraft] = useState("");
const [messages, setMessages] = useState<ConversationMessage[]>([{"id":"welcome","author":"Alex","text":"Hello! How can I help you today?","direction":"incoming"},{"id":"reply","author":"You","text":"I have a question about my appointment.","direction":"outgoing"}]);
function send(text: string) {
setMessages(current => [...current,
{id: 'message-' + current.length, author: 'You', text, direction: 'outgoing'},
{id: 'response-' + current.length, author: 'Alex', text: 'Thank you. What would you like to know?', direction: 'incoming'}]);
}
return (
<>
<ThemeScope density="comfortable">
<TextConversation title={"Support conversation"} messages={messages} draft={draft} onDraftChange={setDraft} onSend={send} readOnly={false} disabled={false}/>
</ThemeScope>
</>
);
}
Replies are a local demonstration. The host supplies real message transport or simulation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TextConversation, type ConversationMessage} from '@structured-growth/sg-ui';
export default function ConversationExample() {
const [draft, setDraft] = useState("");
const [messages, setMessages] = useState<ConversationMessage[]>([{"id":"welcome","author":"Alex","text":"Hello! How can I help you today?","direction":"incoming"},{"id":"reply","author":"You","text":"I have a question about my appointment.","direction":"outgoing"}]);
function send(text: string) {
setMessages(current => [...current,
{id: 'message-' + current.length, author: 'You', text, direction: 'outgoing'},
{id: 'response-' + current.length, author: 'Alex', text: 'Thank you. What would you like to know?', direction: 'incoming'}]);
}
return (
<>
<ThemeScope density="comfortable">
<TextConversation title={"Support conversation"} messages={messages} draft={draft} onDraftChange={setDraft} onSend={send} readOnly={false} disabled={false}/>
</ThemeScope>
</>
);
}
Replies are a local demonstration. The host supplies real message transport or simulation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TextConversation, type ConversationMessage} from '@structured-growth/sg-ui';
import {Switch} from '@structured-growth/sg-ui/primitives';
export default function ConversationExample() {
const [draft, setDraft] = useState("");
const [messages, setMessages] = useState<ConversationMessage[]>([{"id":"welcome","author":"Alex","text":"Hello! How can I help you today?","direction":"incoming"},{"id":"reply","author":"You","text":"I have a question about my appointment.","direction":"outgoing"}]);
const [reject, setReject] = useState(true);
function send(text: string) {
if (reject) throw Error("Example delivery failure");
setMessages(current => [...current,
{id: 'message-' + current.length, author: 'You', text, direction: 'outgoing'},
{id: 'response-' + current.length, author: 'Alex', text: 'Thank you. What would you like to know?', direction: 'incoming'}]);
}
return (
<>
<ThemeScope density="comfortable">
<Switch label="Simulate delivery failure" checked={reject} onCheckedChange={setReject} />
<TextConversation title={"Support conversation"} messages={messages} draft={draft} onDraftChange={setDraft} onSend={send} readOnly={false} disabled={false}/>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {TextConversation, type ConversationMessage} from '@structured-growth/sg-ui';
export default function ConversationExample() {
const [draft, setDraft] = useState("");
const [messages, setMessages] = useState<ConversationMessage[]>([{"id":"welcome","author":"Alex","text":"Hello! How can I help you today?","direction":"incoming"},{"id":"reply","author":"You","text":"I have a question about my appointment.","direction":"outgoing"}]);
function send(text: string) {
setMessages(current => [...current,
{id: 'message-' + current.length, author: 'You', text, direction: 'outgoing'},
{id: 'response-' + current.length, author: 'Alex', text: 'Thank you. What would you like to know?', direction: 'incoming'}]);
}
return (
<>
<ThemeScope density="comfortable">
<TextConversation title={"Support conversation"} messages={messages} draft={draft} onDraftChange={setDraft} onSend={send} readOnly={true} disabled={false}/>
</ThemeScope>
</>
);
}