@fluent-api/client

Official JavaScript/TypeScript client for FluentAPI - Instant translation service for messaging apps.

🚀 Installation

npm install @fluent-api/client
# or
yarn add @fluent-api/client

📖 Quick Start

import FluentClient from '@fluent-api/client';

// Initialize client
const fluent = new FluentClient({
  apiKey: 'your-api-key',
  serverUrl: 'https://fluent-api-sigma.vercel.app', // or your server
  userLanguage: 'en' // User's preferred language
});

// Connect
await fluent.connect('user-123');

// Send message (auto-translates for recipients)
await fluent.sendMessage({
  to: 'recipient-456',
  text: 'Hello World!'
});

// Receive translated messages
fluent.onMessage((message) => {
  console.log(message.translatedText); // Already in user's language!
});

🌍 Features

• ✅ Instant translation between 100+ languages
• ✅ WebSocket real-time messaging
• ✅ Auto-reconnection on disconnect
• ✅ Typing indicators support
• ✅ Presence management (online/offline)
• ✅ <50ms latency with caching

📡 API Reference

Initialize Client

const fluent = new FluentClient({
  apiKey: string,           // Required: Your API key
  serverUrl?: string,       // Optional: Default 'ws://localhost:3000'
  userLanguage: string,     // Required: User's language (e.g., 'en', 'ko', 'zh')
  fallbackLanguage?: string,// Optional: Default 'en'
  enableAutoDetect?: boolean,// Optional: Default true
  debug?: boolean          // Optional: Default false
});

Connect

await fluent.connect(userId: string);

Send Message

await fluent.sendMessage({
  to: string,               // Recipient user ID
  text: string,             // Message text
  language?: string,        // Optional: Override language
  conversationId?: string   // Optional: Group messages
});

Message Handlers

// Receive messages
fluent.onMessage((message) => {
  console.log(message.translatedText); // Translated to user's language
  console.log(message.originalText);   // Original text
  console.log(message.from);          // Sender ID
});

// Typing indicators
fluent.onTyping((typing) => {
  console.log(`${typing.from} is ${typing.isTyping ? 'typing' : 'not typing'}`);
});

// Presence updates
fluent.onPresence((presence) => {
  console.log(`${presence.userId} is ${presence.status}`);
});

🔧 Advanced Usage

Set Typing Status

await fluent.setTyping('recipient-id', true); // Start typing
await fluent.setTyping('recipient-id', false); // Stop typing

Update Language Preferences

await fluent.updateLanguagePreferences({
  primaryLanguage: 'es',
  fallbackLanguage: 'en',
  enableAutoDetect: true
});

Check Connection Status

if (fluent.isConnected) {
  console.log('Connected to FluentAPI');
}

🏗️ Framework Examples

React

import { useEffect, useState } from 'react';
import FluentClient from '@fluent-api/client';

function Chat() {
  const [fluent] = useState(() => new FluentClient({
    apiKey: 'your-key',
    userLanguage: navigator.language
  }));
  
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    fluent.connect('user-123');
    
    fluent.onMessage((msg) => {
      setMessages(prev => [...prev, msg]);
    });

    return () => fluent.disconnect();
  }, []);

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.translatedText}</div>
      ))}
    </div>
  );
}

Vue.js

<template>
  <div v-for="msg in messages" :key="msg.id">
    {{ msg.translatedText }}
  </div>
</template>

<script>
import FluentClient from '@fluent-api/client';

export default {
  data() {
    return {
      fluent: null,
      messages: []
    };
  },
  mounted() {
    this.fluent = new FluentClient({
      apiKey: 'your-key',
      userLanguage: 'en'
    });
    
    this.fluent.connect('user-123');
    this.fluent.onMessage(msg => {
      this.messages.push(msg);
    });
  }
};
</script>

🌐 Supported Languages

All Google Translate languages including:

• English, Spanish, French, German, Italian, Portuguese
• Chinese, Japanese, Korean, Thai, Vietnamese
• Arabic, Hebrew, Hindi, Russian, Turkish
• And 100+ more languages

📄 License

MIT

🤝 Contributing

Visit GitHub

🚀 Live Demo

Try it at: https://fluent-api-sigma.vercel.app/