@sanvika/ai

Riya AI Chat — Drop-in AI chat widget with voice support for 24+ languages

Quick Start

1. Install

pnpm add @sanvika/ai

2. Setup (layout.js)

import { RiyaProvider, RiyaChatButton, RiyaChatModal } from '@sanvika/ai';

export default function Layout({ children }) {
  return (
    <RiyaProvider
      appToken={process.env.NEXT_PUBLIC_AI_TOKEN}
      apiUrl={process.env.NEXT_PUBLIC_AI_URL}
      languages={["hi", "en", "ta", "te", "bn"]}
      defaultLanguage="hi"
      userContext={{ name: "User", role: "user" }}
    >
      <RiyaChatModal />
      {children}
    </RiyaProvider>
  );
}

3. Trigger (anywhere)

import { RiyaChatButton } from '@sanvika/ai';

<RiyaChatButton text="Ask Riya" />

Done! 3 lines of code.

Next.js Config

Add to next.config.mjs:

const nextConfig = {
  transpilePackages: ["@sanvika/ai"],
};

Components

| Component | Description | |-----------|-------------| | <RiyaProvider> | Config wrapper — wraps your app | | <RiyaChatModal> | Full chat widget (opens via event) | | <RiyaChatButton> | Trigger button to open chat | | <MicrophoneButton> | Continuous voice input | | <SoundWaveButton> | Single-shot voice with auto-send | | <LanguageModal> | Language picker modal | | <VoicePermissionIndicator> | Mic permission toast |

Hooks

| Hook | Description | |------|-------------| | useRiyaChat() | Chat state: messages, sendMessage, isLoading | | useVoiceInput() | Voice input: isListening, toggleListening |

RiyaProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | appToken | string | required | API token (x-internal-token) | | apiUrl | string | ai.sanvikaproduction.com | API base URL | | defaultLanguage | string | "hi" | Default language code | | languages | string[] | all 24 | Allowed language codes | | userContext | object | {} | User info for chat | | voiceEnabled | boolean | true | Enable TTS/voice |

Supported Languages

24 languages: Hindi, English, Tamil, Telugu, Kannada, Malayalam, Bengali, Marathi, Gujarati, Punjabi, Odia, Urdu + French, Spanish, German, Italian, Portuguese, Russian, Chinese, Japanese, Korean, Arabic, Thai, Vietnamese.

CSS Variables (Theming)

Override these CSS variables to match your app's theme:

:root {
  --sanvika-riya-primary: #0984e3;
  --sanvika-riya-primary-dark: #0056b3;
  --sanvika-riya-bg: #ffffff;
  --sanvika-riya-chat-bg: #f8f9fa;
  --sanvika-riya-text: #2d3436;
  --sanvika-riya-border: #e2e8f0;
  --sanvika-riya-muted: #636e72;
}