# Cortex Assistant UI

Embeddable assistant UI for HiQ products. It provides React and Web Component integrations, native SSE streaming, ordered content blocks, Markdown rendering, browser diagnostics, and configurable branding.

## Install

```bash
npm install @hiq-ai/cortex-assistant-ui
```

Node.js 22.12 or newer is required. The React entry requires React 19 or newer.

## React

```tsx
import { useMemo } from 'react'
import { CortexAssistant } from '@hiq-ai/cortex-assistant-ui/react'
import { createNomadChannelTransport } from '@hiq-ai/cortex-assistant-ui/transports/nomad-channel'
import '@hiq-ai/cortex-assistant-ui/styles.css'

export function ProductAssistant() {
  const transport = useMemo(() => createNomadChannelTransport({
    endpoint: '/api/assistant',
    credentials: 'include',
  }), [])

  return (
    <CortexAssistant
      assistantId="product-assistant"
      transport={transport}
      layout="popover"
      title="Product Assistant"
      accentColor="#5b6ed7"
    />
  )
}
```

Available layouts are `popover`, `panel`, `inline`, and `fullscreen`. Branding can be configured with `title`, `subtitle`, `logoUrl`, `accentColor`, and `theme`.

## Web Component

```ts
import '@hiq-ai/cortex-assistant-ui/element'

const assistant = document.createElement('cortex-assistant')
assistant.configure({
  assistantId: 'product-assistant',
  endpoint: '/api/assistant',
  layout: 'popover',
  title: 'Product Assistant',
})
document.body.append(assistant)
```

The element exposes `open()`, `close()`, `toggle()`, `send()`, `cancel()`, and `newConversation()`.

## Browser context

`createBrowserDiagnostics()` can collect a bounded page snapshot and recent browser errors when a message is sent. Sensitive form fields, credentials, cookies, headers, request bodies, URL query strings, and explicitly private elements are excluded.

Only mark reviewed page content with `data-assistant-content`. Use `data-assistant-private` for content that must never enter assistant context.

## License

Apache-2.0