FinkChat

A simple React chat component powered by AI for your websites and applications.

Installation

npm install fink-chat

# or using yarn
yarn add fink-chat

# or using pnpm
pnpm add fink-chat

Requirements

FinkChat has the following peer dependencies:

• React (^16.8.0 || ^17.0.0 || ^18.0.0)
• React DOM (^16.8.0 || ^17.0.0 || ^18.0.0)
• Framer Motion (^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0)

Make sure these are installed in your project.

Usage

import React from 'react';
import { FinkChat } from 'fink-chat';

function App() {
  return (
    <div className="App">
      <h1>My Website</h1>
      
      {/* Add FinkChat to your application */}
      <FinkChat 
        branding="https://example.com/logo.png"
        apiKey="your-fink-api-key"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | branding | string | Yes | - | URL to the branding image displayed in the chat button and header | | apiKey | string | Yes | - | API Key for the chat service from fink.team | | topBarColor | string | No | #000000 | Color of the top bar in the chat window | | chatBoxColor | string | No | #000000 | Background color of the chat box | | aiBackgroundColor | string | No | #262626 | Background color of AI message bubbles | | aiTextColor | string | No | white | Text color for AI messages | | userBackgroundColor | string | No | #0c233a | Background color of user message bubbles | | userTextColor | string | No | white | Text color for user messages | | scrollbarColor | string | No | #f4f4f4 | Color of the scrollbar | | sendButtonColor | string | No | #ffffff | Color of the send button | | defaultMessage | string | No | "Oops! Something happened." | Default message to show if API request fails | | classNames | object | No | {} | Custom CSS class names for component elements |

Framework-specific setup

Using with Vite

When using with Vite, make sure your Vite configuration properly handles peer dependencies and React JSX runtime.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    dedupe: ['react', 'react-dom', 'framer-motion'],
  },
});

Using with Next.js

For Next.js applications, import the component with dynamic loading to avoid SSR issues:

import dynamic from 'next/dynamic';

const FinkChat = dynamic(
  () => import('fink-chat').then(mod => ({ default: mod.FinkChat })),
  { ssr: false }
);

export default function MyPage() {
  return (
    <div>
      <h1>My Next.js Page</h1>
      <FinkChat
        branding="/logo.png"
        apiKey="your-fink-api-key"
      />
    </div>
  );
}

License

MIT