Dissu Talks - React Chatbot Component

A customizable React chatbot component that can be easily integrated into any web application.
Supports multiple LLM providers, custom styling, file uploads, feedback collection, and more.

✨ Features

• Multiple Integration Options:
  • Backend API integration
  • Direct LLM API integration (OpenAI, Google Gemini, Anthropic Claude)
  • Simple LLM selection with provider and API key
  • Custom API request/response formatting
• Customization:
  • Positioning: bottom-right, bottom-left, top-right, top-left
  • Styling: colors, themes, fonts
  • Light / Dark / System theme support
  • Custom welcome message and input placeholder
• Interactive Features:
  • File uploads
  • Feedback collection
  • Suggested questions
  • Chat history persistence
  • Timestamps
• Responsive Design:
  • Mobile-friendly
  • Adjustable chat window size

🚀 Installation

npm install dissu-talks

🛠️ Usage

Basic Setup with Backend API

import { ChatBot } from 'dissu-talks';

function App() {
  return (
    <div>
      <ChatBot
        backendUrl="https://api.example.com/chat"
        context="This is a chatbot for a finance SaaS tool."
        responseType="formal"
        position="bottom-right"
        welcomeMessage="Welcome! Ask me anything."
        styling={{ widgetColor: "#4f46e5", textColor: "#ffffff" }}
        theme="light"
        placeholderText="Ask your question..."
      />
    </div>
  );
}

⚡ Easiest LLM Integration (Recommended)

Just pass llmProvider and apiKey props. No need to construct a config object!

1. OpenAI (ChatGPT)

<ChatBot
  llmProvider="openai"
  apiKey="YOUR_OPENAI_API_KEY"
  context="This is a chatbot for a finance SaaS tool."
  responseType="formal"
  position="bottom-left"
  welcomeMessage="Welcome! Ask me anything."
  styling={{ widgetColor: "#10b981", textColor: "#ffffff" }}
  theme="light"
  placeholderText="Ask your question..."
/>

2. Google Gemini

<ChatBot
  llmProvider="gemini"
  apiKey="YOUR_GEMINI_API_KEY"
  context="This is a chatbot for a finance SaaS tool."
  responseType="formal"
  position="bottom-left"
  welcomeMessage="Welcome! Ask me anything."
  styling={{ widgetColor: "#8e24aa", textColor: "#ffffff" }}
  theme="light"
  placeholderText="Ask your question..."
/>

3. Anthropic Claude

<ChatBot
  llmProvider="claude"
  apiKey="YOUR_CLAUDE_API_KEY"
  context="You are a helpful assistant for a finance SaaS tool."
  position="top-right"
  welcomeMessage="Hello! I'm Claude. How can I assist you today?"
  styling={{ widgetColor: "#7c3aed", textColor: "#ffffff" }}
  theme="dark"
/>

🛠️ Advanced: Custom LLM Config (Optional)

You can still use the advanced directLlmConfig prop for full control (custom endpoints, models, headers, etc):

<ChatBot
  directLlmConfig={{
    apiEndpoint: "https://api.openai.com/v1/chat/completions",
    apiKey: "YOUR_API_KEY",
    model: "gpt-3.5-turbo"
  }}
  context="This is a chatbot for a finance SaaS tool."
  responseType="formal"
  position="bottom-left"
  welcomeMessage="Welcome! Ask me anything."
  styling={{ widgetColor: "#10b981", textColor: "#ffffff" }}
  theme="light"
  placeholderText="Ask your question..."
/>

Additional Features

📂 Enable File Upload

<ChatBot
  enableFileUpload={true}
  onFileUpload={async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    await fetch('https://api.example.com/upload', {
      method: 'POST',
      body: formData
    });
  }}
  allowedFileTypes={['.pdf', '.doc', '.docx', '.txt']}
  maxFileSizeMB={5}
/>

📝 Enable Feedback Collection

<ChatBot
  enableFeedback={true}
  onFeedbackSubmit={(messageId, rating, comment) => {
    console.log(`Feedback for message ${messageId}: ${rating} ${comment || ''}`);
  }}
/>

💬 Suggested Questions

<ChatBot
  suggestedQuestions={[
    "What are the key features?",
    "How do I get started?",
    "What's the pricing model?"
  ]}
/>

💾 Persist Chat History

<ChatBot persistChat={true} />

📋 Props Reference

| Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | backendUrl | string | - | API endpoint URL for backend | | llmProvider | 'openai' \| 'gemini' \| 'claude' | - | LLM provider (recommended, use with apiKey) | | apiKey | string | - | API key for the LLM provider (recommended) | | directLlmConfig | object | - | Advanced: Direct LLM API config (overrides llmProvider/apiKey) | | context | string | - | Context to guide AI responses | | responseType | string | 'formal' | Tone of the AI ('casual', 'formal', 'technical') | | position | string | 'bottom-right' | Widget position | | welcomeMessage | string | 'Hello! How can I help you today?' | Initial welcome text | | styling | object | {} | Widget color, text color, etc. | | theme | string | 'light' | Theme type ('light', 'dark', 'system') | | placeholderText | string | 'Type your message...' | Input placeholder | | headerTitle | string | 'Chat Assistant' | Header text | | showTimestamps | boolean | false | Show timestamps for each message | | botAvatarUrl | string | - | Custom bot avatar | | maxHeight | string | '500px' | Max chat window height | | persistChat | boolean | false | Save conversation history locally | | enableFileUpload | boolean | false | Enable file upload feature | | enableFeedback | boolean | false | Collect feedback after messages | | suggestedQuestions | string[] | [] | Pre-suggested questions |

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to submit a Pull Request