@quartal/ui-messages

Vue 3 UI library for Quartal Messages — the composables and components that bridge the data-layer SDK (@quartal/messages-client) to a Vue app: auth guard, channel/thread lists, the chat surface, and the reactive composables (useAuth, useChannels, useChannel, useChannelThreads, useAgents, …) over a shared Supabase connection.

Install

pnpm add @quartal/ui-messages

This package depends on the JSR packages @quartal/messages-types and @quartal/messages-client, pulled through JSR's npm-compatibility registry. Consumers must add the @jsr scope to their .npmrc:

@jsr:registry=https://npm.jsr.io

Peer dependencies

Provide these in the host app:

• vue ^3.5.0
• @supabase/supabase-js ^2.104.0

Usage

// main.ts — create and register the Supabase client once
import { createQuartalSupabaseClient, setSupabaseClient } from '@quartal/ui-messages';

setSupabaseClient(createQuartalSupabaseClient()); // reads VITE_SUPABASE_* from import.meta.env

<script setup lang="ts">
import { QAuthGuard, useChannels } from '@quartal/ui-messages';

const { channels, loading } = useChannels();
</script>

<template>
  <QAuthGuard>
    <ul v-if="!loading">
      <li v-for="c in channels" :key="c.id">{{ c.name }}</li>
    </ul>
  </QAuthGuard>
</template>

Styling

Per the repo conventions, the build emits JS + .d.ts only — no CSS bundle. Component styles live in the shared @quartal/skins CDN. During development the chat layout/bubbles are staged in dev-time-styles.css, exported as @quartal/ui-messages/dev-time-styles.css for the demo apps; this is a POC seam and graduates to @quartal/skins before release.

Developing against local SDK source

The published package resolves @quartal/messages-types / @quartal/messages-client to their JSR releases. Inside this monorepo, both tsconfig.json paths and the bundler aliases (Storybook + each app's vite.config.ts) redirect those specifiers to the local Deno source under @quartal/, so edits to the SDK are picked up live without republishing. See docs/cross-package-imports.md.