feat: add global support chat

Author: PraveenRepswal

.changeset/better-readers-tell.md

@@ -0,0 +1,2 @@
+---
+---

community/global-support-chat/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

community/global-support-chat/README.md

@@ -0,0 +1,49 @@
+# Global Support Chat Demo
+
+A real-time multilingual customer support dashboard built with Next.js 16, Tailwind v4, and **Lingo.dev**.
+
+## Overview
+This application simulates a support agent dashboard where:
+- The agent speaks English.
+- The customers speak various languages (Spanish, German, Japanese, etc.).
+- **Lingo.dev SDK** translates messages in real-time.
+- **Ollama** (optional) powers AI simulated responses in the customer's native language.
+
+## Features Highlights
+- **Real-time Translation**: Instant translation of bidirectional chat using Lingo.dev.
+- **Hybrid AI Simulation**: Uses local LLMs to generate context-aware foreign language replies.
+- **Modern UI**: Built with Tailwind CSS v4 and React 19.
+
+## Getting Started
+
+1.  **Install Dependencies**:
+    ```bash
+    pnpm install
+    ```
+
+2.  **Run Locally**:
+    ```bash
+    pnpm dev
+    ```
+    Open http://localhost:3000.
+
+3.  **AI Setup (Optional)**:
+    To enable the AI responses, ensure you have [Ollama](https://ollama.ai/) running:
+    ```bash
+    ollama serve
+    ollama pull qwen3:4b
+    ```
+    Then toggle "AI Responses" in the UI.
+
+4.  **Lingo API Key (Optional)**:
+    For best translation quality, create a `.env.local` file:
+    ```
+    LINGO_API_KEY=your_key_here
+    ```
+    (The app works with mock fallbacks without a key).
+
+## Tech Stack
+-   **Framework**: Next.js 16 (App Router)
+-   **Styling**: Tailwind CSS v4
+-   **Translation**: Lingo.dev SDK (via API routes)
+-   **AI**: Ollama

community/global-support-chat/app/api/ollama/route.ts

@@ -0,0 +1,53 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const { history, locale } = await request.json();
+
+  // Construct a prompt from history
+  // History is array of { role: 'user'|'agent', content: string }
+  // We want the AI (which plays the 'user' in this simulation context? 
+  // Wait, spec says "simulateUserReply". 
+  // "AI Auto-Response": A toggleable AI mode where an LLM generates context-aware replies in the user's native language.
+  // So the AI pretends to be the Customer (User).
+  // The Agent (Real Human) is English.
+  // So AI Prompt: "You are a customer communicating with support. Speak in {locale}. Here is the conversation..."
+  
+  const prompt = `Roleplay Instructions:
+You are a customer communicating with a customer support agent.
+- Your language is '${locale}'.
+- Respond naturally to the support agent's last message in your language.
+- Do NOT repeat your previous messages.
+- If the agent asks a question, answer it directly.
+- Keep your response concise (1-2 sentences).
+- Act like a real person with a specific issue (e.g., login problem, refund, product question).
+
+Conversation history:
+${history.map((m: any) => `${m.role === 'agent' ? 'Support Agent' : 'Customer'}: ${m.content}`).join('\n')}
+
+Response (as Customer):`;
+
+  try {
+    const res = await fetch('http://localhost:11434/api/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model: 'qwen3:4b', // Configurable, but using a reasonable default
+        prompt,
+        stream: false
+      }),
+    });
+
+    if (!res.ok) {
+        throw new Error(`Ollama status: ${res.status}`);
+    }
+
+    const data = await res.json();
+    return NextResponse.json({ reply: data.response });
+
+  } catch (error) {
+    console.error('Ollama Error:', error);
+    return NextResponse.json({ 
+        reply: `(AI Error: Ensure Ollama is running. Mock response in ${locale})` 
+    });
+  }
+}

community/global-support-chat/app/api/translate/route.ts

@@ -0,0 +1,70 @@
+import { NextResponse } from 'next/server';
+import { LingoDotDevEngine } from '@lingo.dev/_sdk';
+
+// Fallback dictionary for demo purposes when SDK fails
+const FALLBACKS: Record<string, Record<string, string>> = {
+  'en-es': {
+    'Hello, I have a problem with my order.': 'Hola, tengo un problema con mi pedido.',
+    'How can I help you today?': '¿Cómo puedo ayudarte hoy?',
+  },
+  'es-en': {
+    'Hola, tengo un problema con mi pedido.': 'Hello, I have a problem with my order.',
+    'Gracias por la ayuda.': 'Thanks for the help.',
+    'Entendido.': 'Understood.',
+    '¿Puede explicar eso de nuevo?': 'Can you explain that again?',
+    'Esperaré su respuesta.': 'I will wait for your response.',
+  },
+  'de-en': {
+    'Funktioniert dieses Produkt auf dem Mac?': 'Does this product work on Mac?',
+    'Danke für die Hilfe.': 'Thanks for the help.',
+    'Können Sie das wiederholen?': 'Can you repeat that?',
+    'Verstanden.': 'Understood.',
+    'Ich werde warten.': 'I will wait.',
+  },
+  'ja-en': {
+    'ありがとうございます。': 'Thank you.',
+    'もう一度説明していただけますか？': 'Could you explain that again?',
+    '分かりました。': 'I understand.',
+    'お待ちしております。': 'I will be waiting.',
+  },
+  'fr-en': {
+    'Merci pour l\'aide.': 'Thanks for the help.',
+    'Pouvez-vous répéter ?': 'Can you repeat that?',
+    'Compris.': 'Understood.',
+    'J\'attendrai.': 'I will wait.',
+  },
+};
+
+export async function POST(request: Request) {
+  const { text, sourceLocale, targetLocale } = await request.json();
+
+  const apiKey = process.env.LINGO_API_KEY;
+
+  // Try SDK translation first
+  if (apiKey) {
+    try {
+      const engine = new LingoDotDevEngine({ apiKey });
+      const translatedText = await engine.localizeText(text, {
+        sourceLocale,
+        targetLocale,
+      });
+      return NextResponse.json({ translatedText });
+    } catch (error) {
+      console.error('Lingo SDK Error:', error);
+      // Fall through to fallback
+    }
+  }
+
+  // Fallback Logic (used if no API key OR if SDK execution failed)
+  const key = `${sourceLocale}-${targetLocale}`;
+  const exactMatch = FALLBACKS[key]?.[text];
+  
+  if (exactMatch) {
+    return NextResponse.json({ translatedText: exactMatch });
+  }
+
+  // Pseudo-translation fallback if no match
+  return NextResponse.json({ 
+    translatedText: `[${targetLocale.toUpperCase()}] ${text}` 
+  });
+}

community/global-support-chat/app/globals.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

community/global-support-chat/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Global Support Chat',
+  description: 'Multilingual support dashboard powered by Lingo.dev',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="antialiased h-screen overflow-hidden">
+        {children}
+      </body>
+    </html>
+  );
+}