Home

import { Home } from '@hanzo/ui/chat'

A fresh pane

The mark and the question centred, the composer and its chips under it in the same column.

What’s up next?

Cloud

Enso

export function Default() {
  const [draft, setDraft] = useState('')
  return (
    <XStack height={440} width="100%">
      <Home mark={<HanzoMark size={26} />}>
        <Composer
          inline
          value={draft}
          onChange={setDraft}
          onSend={() => setDraft('')}
          placeholder="Describe a task or ask a question"
          head={<ChipSelect name="Environment" label="Cloud" onChange={() => {}} items={[{ id: 'c', label: 'Cloud' }]} />}
          foot={
            <>
              <ComposerTool label="Attach" icon={<Plus size={14} />} />
              <ComposerTool label="Voice" icon={<Mic size={14} />} />
              <XStack flex={1} />
              <ChipSelect name="Model" label="Enso" onChange={() => {}} items={[{ id: 'e', label: 'Enso' }]} quiet />
            </>
          }
        />
      </Home>
    </XStack>
  )
}

A person's own question

The host says who is asked; the page is the same.

What’s up next, Dave?

export function Named() {
  return (
    <XStack height={240} width="100%">
      <Home mark={<HanzoMark size={26} />} title="What’s up next, Dave?" />
    </XStack>
  )
}

Types

export interface HomeProps extends Scroll {
  /** The question. */
  title?: ReactNode
  /** Drawn before the question — a surface's own mark, ~26px. */
  mark?: ReactNode
  /** The column the question and the composer share, px. */
  column?: number
  /** The heading's outline level; a pane with a page title above it passes 2. */
  level?: 1 | 2 | 3
  /** The composer, and whatever the surface says beside it. */
  children?: ReactNode
}

Exports

Hometype HomeProps