Composer

Playground

'use client';
import { useState } from 'react';
import { Composer, type ComposerVariant } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "placeholder": "Enter a message.",
    "variant": "default",
    "disabled": false
  };
  const [value, setValue] = useState('');
  return (
    <div style={{ width: 320, maxWidth: '100%' }}>
      <Composer
        value={value}
        onValueChange={setValue}
        onSend={() => setValue('')}
        variant={settings.variant as ComposerVariant}
        disabled={settings.disabled}
        sendLabel={"Send message"}
        textareaProps={{
          'aria-label': "Message",
          placeholder: settings.placeholder,
          style:
            settings.variant === 'reply' ? { alignSelf: 'center' } : undefined,
        }}
      />
    </div>
  );
}

Properties

Variant

Disabled

Content

Placeholder

Usage

Handle the send request in onSend. Your app decides when to clear or disable the input after sending.

'use client';
import { useState } from 'react';
import { Composer } from '@mbsw/ui';

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <Composer
      value={value}
      onValueChange={setValue}
      onSend={() => setValue('')}
      sendLabel={"Send message"}
      textareaProps={{
        'aria-label': "Message",
        placeholder: "Enter a message.",
      }}
    />
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

Composer