Astryx Chat Composer Drawer

Component 1

About

A collapsible Astryx chat-composer drawer for attachments, feedback prompts, context chips, and supplementary content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Chat Composer Drawer to your project and fits it to your theme.

Code

How Astryx Chat Composer Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {useState} from 'react';
import {ChatComposer, ChatComposerDrawer} from '@/components/ui/astryx-chat-composer-drawer';
import {List, ListItem} from '@astryxdesign/core/List';
import {Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Stack} from '@astryxdesign/core/Layout';

const options = [
  {key: 'A', label: 'Yes'},
  {key: 'B', label: 'Yes, and don\u2019t ask again for `git add` commands'},
  {key: 'C', label: 'No, and tell me what to do differently'},
];

function ChatComposerDrawerFeedback() {
  const [selected, setSelected] = useState<string | null>(null);

  return (
    <Stack direction="vertical" width={450} maxWidth="100%">
      <ChatComposer
        onSubmit={value => {
          console.log('Submit:', value, '| Answer:', selected);
        }}
        drawer={
          <ChatComposerDrawer count={1} label="User feedback requested">
            <Stack direction="vertical" gap={1} width="100%">
              <List>
                <ListItem
                  label={<Text weight="bold">Do you want to proceed?</Text>}
                />
                {options.map(opt => (
                  <ListItem
                    key={opt.key}
                    label={opt.label}
                    startContent={
                      <Badge
                        variant={selected === opt.key ? 'info' : 'neutral'}
                        label={opt.key}
                      />
                    }
                    isSelected={selected === opt.key}
                    onClick={() => setSelected(opt.key)}
                  />
                ))}
              </List>
            </Stack>
          </ChatComposerDrawer>
        }
      />
    </Stack>
  );
}

export default function ChatComposerDrawerFeedbackDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <ChatComposerDrawerFeedback />
    </div>
  );
}