import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as FullChat from '../full-chat.stories';

<Meta title="Docs/Getting Started" />

# Getting Started

`<kc-chat>` is **transport-agnostic**: give it a `messages` array, it renders the conversation and
emits a `submit` event when the user sends. You own the request and the streaming; the component
owns the UI.

## Your first chat in ~10 lines

Set rich data as JS **properties** and listen for **events**. This is the universal pattern — every
framework just wraps it in its own binding syntax.

```html
<kc-chat id="chat" style="display:block; height:100dvh;"></kc-chat>

<script type="module">
  import '@kitn.ai/chat/elements';

  const chat = document.getElementById('chat');
  chat.messages = [
    { id: '1', role: 'assistant', content: 'Hello! How can I help?' },
  ];

  chat.addEventListener('kc-submit', (e) => {
    const text = e.detail.value;
    chat.messages = [
      ...chat.messages,
      { id: crypto.randomUUID(), role: 'user', content: text },
    ];
    // …call your model, then append an assistant message
  });
</script>
```

> Reactivity tip: assign a **new array** (and a new object for any message you change) when updating
> `chat.messages` — that's what triggers a re-render.

## Now pick your stack

That's the raw element. For install, setup, and idiomatic examples in your framework — plus the
**two ways** to use the kit (the all-in-one `<kc-chat>` and composing the individual elements):

[HTML](?path=/docs/docs-frameworks-html--docs) ·
[React](?path=/docs/docs-frameworks-react--docs) ·
[Solid](?path=/docs/docs-frameworks-solid--docs) ·
[Vue](?path=/docs/docs-frameworks-vue--docs) ·
[Svelte](?path=/docs/docs-frameworks-svelte--docs) ·
[Angular](?path=/docs/docs-frameworks-angular--docs)

## A complete example

Everything assembled into a real app — a conversation sidebar, a message thread with markdown,
reasoning blocks and a tool call, a model switcher, context-usage meter, and a rich prompt input
with attachments:

<Canvas of={FullChat.Default} />

Open it full-screen under **Examples → Full Chat App**, then explore each building block on its own
page under **Components**.

Ready to make it yours? See **[Theming](?path=/docs/theming-overview--docs)**.