@convokitapp/vue-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ConvoKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PARITY.md

@@ -0,0 +1,33 @@
+# Vue UI parity
+
+This package mirrors the current `convokit_flutter_ui` and React UI baselines
+while using Vue-native composition patterns.
+
+| Capability | Flutter UI | React UI | Vue UI |
+| --- | --- | --- | --- |
+| SDK-backed conversation list | `ConvoKitConversationList` | `ConversationList` | `ConversationList` |
+| Controlled conversation list | `ConvoKitConversationListView` | `ConversationListView` | `ConversationListView` |
+| SDK-backed conversation | `ConvoKitConversation` | `Conversation` | `Conversation` |
+| Controlled conversation | `ConvoKitConversationView` | `ConversationView` | `ConversationView` |
+| Controlled message list | `ConvoKitMessageListView` | `MessageListView` | `MessageListView` |
+| Replaceable SDK boundary | `ConvoKitUiClient` | `ConvoKitUiClient` | `ConvoKitUiClient` |
+| Conversation state | Controller | `useConversation` | `useConversation` |
+| Conversation-list state | Controller | `useConversationList` | `useConversationList` |
+| Offset pagination and de-duplication | Yes | Yes | Yes |
+| Search, archived, participant, predicate, sort filters | Yes | Yes | Yes |
+| Realtime messages, typing, reads | Yes | Yes | Yes |
+| Read markers and reader resolution | Yes | Yes | Yes |
+| Mark read on load/receive | Yes | Yes | Yes |
+| Typing idle timeout | Yes | Yes | Yes |
+| Image, file, location, contact rendering | Yes | Yes | Yes |
+| Row/header/message/media/receipt/composer replacements | Builders | Render props | Named slots |
+| Empty/loading/error replacements | Builders | Render props | Named slots |
+| Theme tokens | Theme extension | CSS variables/provider | CSS variables/provider |
+| Compact presentation | Custom builders | `density="compact"` | `density="compact"` |
+| Host-owned attachment opening | Callback | Callback | Callback/event |
+| Accessibility primitives | Material semantics | Native semantics + Radix Avatar | Native semantics + Reka UI Avatar |
+
+Vue also exposes controlled/uncontrolled composer text through `v-model`,
+per-part `classNames` and `styles`, `unstyled` mode, native root attributes,
+image loading policy, time formatting, scroll behavior controls, callback props,
+and exposed composable controllers.

package/README.md

@@ -0,0 +1,87 @@
+# ConvoKit Vue UI
+
+Production-ready Vue 3 chat surfaces powered by
+[`@convokitapp/sdk`](https://www.npmjs.com/package/@convokitapp/sdk). The
+components ship accessible defaults, realtime state, media and read receipts,
+while named slots, CSS variables, and controlled views keep the host app in
+control.
+
+## Install
+
+```bash
+npm install @convokitapp/sdk @convokitapp/vue-ui vue
+```
+
+## SDK-backed conversation
+
+Connect a browser-safe ConvoKit client, adapt it once, then render a room:
+
+```vue
+<script setup lang="ts">
+import { ConvoKitClient } from '@convokitapp/sdk'
+import { Conversation, createConvoKitUiClient } from '@convokitapp/vue-ui'
+import '@convokitapp/vue-ui/styles.css'
+
+const sdk = new ConvoKitClient({
+  backendUrl: import.meta.env.VITE_CONVOKIT_BACKEND_URL,
+  clientId: import.meta.env.VITE_CONVOKIT_CLIENT_ID,
+  tokenProvider: async (appUserId) => {
+    const response = await fetch(import.meta.env.VITE_CONVOKIT_TOKEN_ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appUserId }),
+    })
+    return (await response.json()).token
+  },
+})
+
+await sdk.connectUser('maya')
+const client = createConvoKitUiClient(sdk)
+</script>
+
+<template>
+  <Conversation :client="client" conversation-id="room-123" />
+</template>
+```
+
+The client secret belongs only in your token backend. Never put it in Vue,
+Vite environment variables, or a shipped browser bundle.
+
+## Controlled components and slots
+
+`ConversationListView`, `MessageListView`, and `ConversationView` accept host
+state directly. Every important surface has a named slot:
+
+```vue
+<ConversationView v-model="draft" v-bind="conversationProps">
+  <template #header="{ conversation }">
+    <SupportHeader :title="conversation.displayTitle" />
+  </template>
+  <template #message="{ message, isCurrentUser, readerIds }">
+    <SupportBubble :message="message" :mine="isCurrentUser" :read-by="readerIds" />
+  </template>
+  <template #composer="{ value, setValue, send }">
+    <BrandComposer :model-value="value" @update:model-value="setValue" @send="send" />
+  </template>
+</ConversationView>
+```
+
+Available slots include `conversation-item`, `separator`, `header`, `message`,
+`media`, `read-receipt`, `composer`, `typing-indicator`, `loading`, `empty`,
+`error`, `load-more`, `loading-older`, and `message-error`.
+
+## Composables
+
+Use `useConversationList` and `useConversation` when you want ConvoKit's
+pagination, de-duplication, realtime, typing, and read state without the
+default UI. Both return readonly Vue refs plus actions and a `dispose()` method.
+
+## Appearance
+
+Wrap any subtree with `ConvoKitThemeProvider`, set `density="compact"`, or use
+the per-part `classNames` and `styles` maps. `unstyled` removes package classes
+from the configurable parts for a fully host-owned presentation.
+
+See the [Vue UI documentation](https://convokit.app/docs/vue-ui), the
+[public examples and screenshots](https://github.com/ConvoKitApp/ConvoKit-Vue-UI-Examples),
+and [the parity matrix](./PARITY.md).