@moderta/mint-ai-assistant

Embeddable Mint AI assistant — a floating chat widget shared across Moderta apps. React component, Tailwind-styled, distributed as an npm package.

Why this exists

The same architecture as the main frontend (RTK Query api-details → base-slice registry, scoped store), but packaged as a library you can drop into any React app without it touching the host's styles.

• Isolation: Tailwind preflight is disabled and every utility is mint- prefixed, so embedding never resets or restyles the host app. The compiled CSS is auto-injected.
• Config via props, not env vars (the package runs inside someone else's bundle).
• React + ReactDOM are peer dependencies — the host provides them.

Install

npm install @moderta/mint-ai-assistant

Usage

import { MintAIAssistant } from '@moderta/mint-ai-assistant';

export function App() {
  return (
    <MintAIAssistant
      baseUrl="https://api.moderta.io/ai"
      getToken={() => localStorage.getItem('token') ?? undefined}
      title="Mint AI"
      placement="bottom-right"
      enableExpandMode={false}
      context={{ orgId: 'org_123' }}
    />
  );
}

Props (MintAIConfig)

| Prop | Type | Default | Notes | | ---------------- | ----------------------------- | ---------------- | --------------------------------------- | | baseUrl | string | — | Required. Base URL of the assistant API | | getToken | () => string \| Promise<…> | — | Bearer token for requests | | placement | bottom-right \| … | bottom-right | Launcher corner | | title | string | Mint AI | Panel header title | | welcomeMessage | string | greeting | Shown when there's no history | | defaultOpen | boolean | false | Open the panel on mount | | context | Record<string, unknown> | — | Forwarded with every chat request |

API contract

The widget talks to a small API (src/api/api-details):

• POST {baseUrl}/chat/messages → { conversationId, reply }
• GET {baseUrl}/chat/conversations/:id → { conversationId, messages }
• POST {baseUrl}/chat/feedback → { success }

Develop

npm install
npm run dev      # playground host app at / (see dev/main.tsx)
npm run build    # emits dist/ (ESM + CJS + types)

Project structure

src/
  index.ts                 public API
  mint-ai-assistant.tsx    root component (provider + widget)
  config/                  props-based config (replaces global-config)
  providers/               scoped provider stack
  store/                   widget-scoped Redux + chat UI slice
  api/                     RTK Query: api-details registry → base-slice
  sections/assistant/      the chat UI (launcher, panel, list, composer)
  components/iconify/      shared UI primitives
  hooks/                   useChat
  types/                   shared types
  utils/                   cn(), uid()