Solid

Install

Peer dependency: solid-js@^1.9. Import @sveda-ai/solid/styles.css once.

npm i @sveda-ai/solid

npm i @sveda-ai/solid

Mount

SvedaProvider wraps SvedaChat. endpoints.stream is required. headers carries x-sveda-embed-token. appearance overlays sveda.yaml.

import { render } from 'solid-js/web'
import { SvedaProvider, SvedaChat } from '@sveda-ai/solid'
import '@sveda-ai/solid/styles.css'

render(
  () => (
    <SvedaProvider
      endpoints={{ stream: origin + '/sveda/stream' }}
      headers={{ 'x-sveda-embed-token': token }}
      locale="en"
    >
      <SvedaChat />
    </SvedaProvider>
  ),
  document.getElementById('sveda-widget'),
)

import { render } from 'solid-js/web'
import { SvedaProvider, SvedaChat } from '@sveda-ai/solid'
import '@sveda-ai/solid/styles.css'

render(
  () => (
    <SvedaProvider
      endpoints={{ stream: origin + '/sveda/stream' }}
      headers={{ 'x-sveda-embed-token': token }}
      locale="en"
    >
      <SvedaChat />
    </SvedaProvider>
  ),
  document.getElementById('sveda-widget'),
)

Options

Props of SvedaProvider, besides children. createSveda() takes the same object if you build the client yourself.

{
  endpoints: {
    stream: origin + '/sveda/stream',
    histories: origin + '/sveda/chat-histories',
    documentsExtract: origin + '/sveda/documents/extract',
  },
  headers: () => ({ 'x-sveda-embed-token': token }),
  locale: 'en',
  brand: { name: 'Acme' },
  models: [{ id: 'catalog-id', label: 'ChatGPT', supportsThinking: true }],
  quickPrompts: [{ label: 'Summarize', prompt: 'Summarize this page.' }],
  appearance: { preset: 'ocean', radius: '8px' },
  theme: 'light',
  beforeSend: async () => {
    // refresh the embed token before the turn
  },
}

{
  endpoints: {
    stream: origin + '/sveda/stream',
    histories: origin + '/sveda/chat-histories',
    documentsExtract: origin + '/sveda/documents/extract',
  },
  headers: () => ({ 'x-sveda-embed-token': token }),
  locale: 'en',
  brand: { name: 'Acme' },
  models: [{ id: 'catalog-id', label: 'ChatGPT', supportsThinking: true }],
  quickPrompts: [{ label: 'Summarize', prompt: 'Summarize this page.' }],
  appearance: { preset: 'ocean', radius: '8px' },
  theme: 'light',
  beforeSend: async () => {
    // refresh the embed token before the turn
  },
}

endpoints.stream

Required. POST URL for the turn. Usually origin + /sveda/stream.

endpoints.histories

Optional. History sidebar lists, opens, renames, and deletes chats at this URL. One chat is origin + /sveda/chat-histories/{id}. Omit it and history stays in the tab.

endpoints.documentsExtract

Optional. POST /sveda/documents/extract. Omit it and the composer does not upload files.

endpoints.message

Optional. Passed through to SvedaClient. The panel sends the turn on stream.

protocolMode

sveda (default) or vercel. sveda sends Accept: application/vnd.sveda.stream+json.

headers

Object or a function called on each request. Put x-sveda-embed-token here so a refreshed token is picked up.

credentials

fetch credentials. Use include when the stream is cross-origin and needs cookies.

locale

en and ru ship with the package. Default en. Any other code needs messages.

messages

Extra copy keyed by locale. Merged on top of the built-in strings.

brand

name and logoUrl. Default name is Sveda. SvedaChat brandName and brandLogo override this.

models

Picker rows: id, label, and optional supportsThinking. The id is the catalog id. Vue and Svelte render the picker. React and Solid keep the list on context and do not draw a model select.

quickPrompts

Chips on an empty chat: label is the chip, prompt is the text sent. Vue, Svelte, and Solid render them. React stores the list and does not draw the chips.

appearance

Host look. Overlays sveda.yaml. null keeps the runtime appearance and skips the embed-config fetch. Omit appearance and theme and the widget loads GET /sveda/embed/config from the stream origin.

theme

light or dark. Merged into appearance.theme.

hostEmbed

Embed mode. The panel starts floating and ignores the mobile breakpoint.

fillHost

The panel fills its host element. Defaults to true when hostEmbed is true.

hideLauncher

No minimized launcher. The panel stays open.

beforeSend

Async hook before each turn. Use it to mint a fresh embed token.

appearance fields are preset, radius, theme, tokens, dark_tokens, launcher (label, icon, image), and chrome (modelSelect, thinking). Presets: default, lms, ocean, forest, sunset, sand. See Appearance.

SvedaChat props

All optional. Brand, models, and quick prompts here win over the same fields on the options object.

models

Vue and Svelte: replaces models from options for this panel. React ignores this prop; set models on SvedaProvider. Solid reads it into the page hook; the panel does not draw a picker.

quickPrompts

Vue, Svelte, and Solid: replaces quickPrompts from options. React ignores this prop.

brandName

Replaces brand.name on this panel.

brandLogo

Replaces brand.logoUrl. React and Svelte also use it as the launcher image when appearance.launcher.image is empty.

pageUrl

Vue: key for restoring scroll. React and Svelte: sent with the turn as context. Solid accepts it; the panel does not send it.

onNavigate

Vue only. Called with the URL when a link inside the chat is activated. Without it, the panel assigns window.location.

notify

Called as notify(kind, message) on an error. Vue falls back to its toast when this is omitted. kind is error.

agentTasksSubscribe

Vue only. Subscribe to agent-task payloads. Return a function to unsubscribe.