mynucui-bot

A beautiful, customizable chatbot component for React applications that integrates with the mynucui API.

Features

• 🎨 Multiple avatar options
• 🌈 Customizable theme colors
• 📱 Responsive design
• 🔄 Streaming responses
• 📊 Model selection
• 📍 Positioning options
• 📝 Code block formatting
• ✨ Animated transitions

Installation

npm install mynucui-bot
# or
yarn add mynucui-bot
# or
pnpm add mynucui-bot

API Key Requirement

Important: An API key is required to use this component. If no API key is provided, the chatbot will display an error message.

To get an API key:

1. Sign up at mynucui.tech
2. Navigate to your dashboard
3. Generate an API key in the settings section

Quick Start

import React from 'react';
import Chatbot from 'mynucui-bot';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Chatbot apiKey="YOUR_API_KEY" />
    </div>
  );
}

export default App;

Props

The Chatbot component accepts the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | (Required) | Your mynucui API key | | apiEndpoint | string | 'https://mynucui.tech/api/chat' | Custom API endpoint URL | | defaultAvatar | AvatarMode | 'chattyPanda' | Default avatar to use | | defaultModel | string | 'gpt-3.5-turbo' | Default model to use | | defaultProvider | string | 'OpenAI' | Default provider to use | | theme | object | {} | Custom theme options | | position | string | 'bottom-right' | Position of the chatbot | | initialMessage | string | 'Hello! How can I help you today?' | Initial message from the assistant |

Avatar Options

The AvatarMode type includes the following options:

• 'chattyPanda'
• 'coderFox'
• 'wiseOwl'
• 'designDeer'
• 'dataElephant'
• 'testingEagle'
• 'integrationOctopus'

Position Options

The position prop accepts the following values:

• 'bottom-right'
• 'bottom-left'
• 'top-right'
• 'top-left'

Theme Options

The theme prop accepts an object with the following properties:

{
  primaryColor?: string;   // Default: '#DE6449'
  secondaryColor?: string; // Default: '#9370DB'
  backgroundColor?: string; // Default: '#f0f0f0'
  textColor?: string;      // Default: '#333333'
}

Advanced Usage

Custom Styling

import React from 'react';
import Chatbot from 'mynucui-bot';

function App() {
  return (
    <div>
      <Chatbot 
        apiKey="YOUR_API_KEY"
        defaultAvatar="coderFox"
        position="bottom-left"
        theme={{
          primaryColor: "#4A90E2",
          secondaryColor: "#50E3C2",
          backgroundColor: "#F5F7FA",
          textColor: "#333333"
        }}
        initialMessage="Hi there! I'm CodeFox. How can I assist with your coding questions today?"
      />
    </div>
  );
}

export default App;

Dynamic Configuration

import React, { useState } from 'react';
import Chatbot, { AvatarMode } from 'mynucui-bot';

function App() {
  const [apiKey, setApiKey] = useState('YOUR_API_KEY');
  const [avatar, setAvatar] = useState<AvatarMode>('chattyPanda');
  
  return (
    <div>
      <div className="controls">
        <select value={avatar} onChange={(e) => setAvatar(e.target.value as AvatarMode)}>
          <option value="chattyPanda">Chatty Panda</option>
          <option value="coderFox">Coder Fox</option>
          <option value="wiseOwl">Wise Owl</option>
          {/* Add other options */}
        </select>
      </div>
      
      <Chatbot 
        apiKey={apiKey}
        defaultAvatar={avatar}
      />
    </div>
  );
}

export default App;

Framework Integration Examples

Next.js

// components/ChatbotWrapper.js
'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import the Chatbot component to avoid SSR issues
const Chatbot = dynamic(() => import('mynucui-bot'), { ssr: false });

export default function ChatbotWrapper() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return <Chatbot apiKey="YOUR_API_KEY" />;
}

Remix

// app/components/ChatbotWrapper.jsx
import { useEffect, useState } from 'react';
import { ClientOnly } from 'remix-utils/client-only';

export default function ChatbotWrapper() {
  return (
    <ClientOnly fallback={<div>Loading chatbot...</div>}>
      {() => {
        // Import Chatbot only on the client side
        const Chatbot = require('mynucui-bot').default;
        return <Chatbot apiKey="YOUR_API_KEY" />;
      }}
    </ClientOnly>
  );
}

API Integration

The chatbot component is designed to work with the mynucui API. When a user sends a message, the component makes a POST request to the API endpoint with the following structure:

{
  "messages": [
    { "role": "user", "content": "Hello, how are you?" }
  ],
  "stream": true,
  "model": "gpt-3.5-turbo",
  "provider": "OpenAI",
  "avatarMode": "chattyPanda"
}

The API is expected to return a streaming response in the Server-Sent Events (SSE) format. Each event should have the following structure:

data: {"type":"content","content":"Hello! I'm doing well, thank you for asking."}

Error Handling

If no API key is provided, the chatbot will:

1. Display a chat button that shows an error message when clicked
2. Log an error to the console
3. Not attempt to connect to the API

Browser Support

The chatbot component is compatible with all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development and Publishing

Publishing to npm

The library includes scripts to help with publishing to npm. Before publishing, make sure you have an npm account and are logged in (npm login).

Using npm scripts

To publish a new version to npm, you can use one of the following npm commands:

# Increment patch version (0.0.x)
npm run publish:patch

# Increment minor version (0.x.0)
npm run publish:minor

# Increment major version (x.0.0)
npm run publish:major

Using shell scripts

Alternatively, you can use the provided shell scripts:

# Make scripts executable (first time only)
chmod +x publish.sh watch.sh

# Publish with patch version increment (default)
./publish.sh

# Publish with specific version increment
./publish.sh patch
./publish.sh minor
./publish.sh major

These commands will:

1. Build the library
2. Increment the version number
3. Publish to npm
4. Create a git commit and tag for the new version

Automatic Publishing on Changes

For development purposes, you can use the watch scripts to automatically publish to npm when changes are detected:

Using npm scripts

# Install dependencies
npm install

# Watch for changes and publish with patch version increment
npm run watch:patch

# Watch for changes and publish with minor version increment
npm run watch:minor

# Watch for changes and publish with major version increment
npm run watch:major

Using shell scripts

# Watch for changes with patch version increment (default)
./watch.sh

# Watch for changes with specific version increment
./watch.sh patch
./watch.sh minor
./watch.sh major

These commands will watch for changes in the source files and automatically publish a new version to npm when changes are detected.

License

MIT