Sedia AI — AI Agent & Telegram Human Handoff

Sedia AI adalah asisten AI berbasis web yang digunakan untuk membantu pengunjung memahami layanan SejatiDimedia dan menjawab pertanyaan seputar kebutuhan pengembangan software. Sistem ini juga memiliki fitur Human Handoff yang memungkinkan percakapan dialihkan dari AI ke pemilik bisnis melalui Telegram.

Project ini saya bangun sebagai Full-Stack & AI Engineer, mulai dari integrasi LLM, pengelolaan session, komunikasi real-time menggunakan Pusher, hingga integrasi Telegram Bot API dan webhook.

---

Ringkasan Proyek

• Kategori: AI Assistant & Real-Time Communication
• Peran: Full-Stack & AI Engineer
• Frontend: Next.js, React, TypeScript, Tailwind CSS, Motion, Pusher JS, React Markdown
• Backend: Next.js App Router, Route Handlers, TypeScript
• AI: OpenRouter API, Google Gemini
• Real-Time: Pusher Channels
• Session & State: Upstash Redis, localStorage
• Integration: Telegram Bot API & Webhooks

---

Latar Belakang

Sedia AI dibuat untuk membantu pengunjung website mendapatkan informasi mengenai layanan dan portfolio SejatiDimedia tanpa harus menunggu respons secara manual.

Chatbot tidak hanya digunakan untuk menjawab pertanyaan. Jika pengunjung membutuhkan komunikasi langsung dengan pemilik bisnis, percakapan dapat dialihkan ke manusia melalui Telegram tanpa harus berpindah ke halaman atau aplikasi lain dari sisi pengunjung.

Alur utama sistem:

• Pengunjung memulai percakapan melalui chat widget.
• AI menjawab berdasarkan informasi layanan dan portfolio yang tersedia.
• Pengunjung dapat meminta bantuan langsung dari tim.
• Sistem mengirimkan informasi percakapan ke Telegram.
• Pemilik bisnis dapat membalas melalui Telegram.
• Balasan dari Telegram diteruskan kembali ke browser pengunjung secara real-time.
• Percakapan dapat dikembalikan ke AI setelah sesi human handoff selesai.

---

Kontribusi Full-Stack Saya

1. AI Assistant & Prompt Engineering

• Mengintegrasikan LLM melalui OpenRouter API dan Google Gemini.
• Membuat system prompt yang membatasi respons AI berdasarkan informasi layanan, portfolio, dan informasi bisnis yang tersedia.
• Menambahkan aturan agar AI tidak membuat informasi seperti harga, layanan, atau portfolio yang tidak tersedia.
• Memisahkan system context dari riwayat percakapan yang ditampilkan kepada pengguna.
• Menyiapkan fallback model untuk menangani kondisi ketika model utama tidak dapat digunakan.

2. Real-Time Communication dengan Pusher

• Mengintegrasikan Pusher Server SDK dan Pusher JS Client untuk komunikasi real-time.
• Membuat channel berdasarkan session pengguna agar pesan dapat dikirim ke browser yang sesuai.
• Mengirim pesan dari Telegram ke browser tanpa perlu melakukan reload halaman.
• Mengatur subscription dan cleanup pada client ketika session berakhir atau pengguna berpindah halaman.

3. Session Management dengan Upstash Redis

• Menggunakan Upstash Redis untuk menyimpan informasi session percakapan.
• Menyimpan status handoff untuk menentukan apakah percakapan sedang ditangani AI atau manusia.
• Membuat mapping antara telegram_message_id dan session_id.
• Menggunakan TTL agar data session dan mapping tidak tersimpan tanpa batas waktu.
• Menyimpan riwayat percakapan pada localStorage agar chat tetap tersedia ketika halaman direfresh.

4. Telegram Bot & Webhook

• Membuat Telegram Bot sebagai media komunikasi antara pemilik bisnis dan pengunjung website.
• Membuat endpoint webhook pada Next.js untuk menerima pesan dan reply dari Telegram.
• Mengirim ringkasan percakapan ketika pengunjung melakukan human handoff.
• Menggunakan reply_to_message.message_id untuk mengetahui pesan pengunjung yang sedang dibalas.
• Menghubungkan reply Telegram dengan session browser melalui mapping yang disimpan di Redis.
• Menambahkan command /end untuk mengakhiri sesi human handoff.

5. Chat Widget & User Experience

• Membuat chat widget yang dapat digunakan pada desktop maupun mobile.
• Menggunakan Motion untuk animasi pembukaan widget dan perubahan state percakapan.
• Menampilkan status ketika percakapan sedang ditangani AI maupun manusia.
• Menambahkan proactive trigger untuk membuka chat secara otomatis setelah periode tertentu.
• Menggunakan sessionStorage agar trigger tidak terus muncul setelah pengguna menutup widget.

---

Fitur Produk

• AI Chat Assistant — Menjawab pertanyaan pengunjung mengenai layanan dan portfolio SejatiDimedia.
• Human Handoff — Mengalihkan percakapan dari AI ke pemilik bisnis melalui Telegram.
• Telegram Reply — Pemilik bisnis dapat membalas pesan langsung dari Telegram.
• Real-Time Messaging — Pesan dari Telegram diteruskan ke browser tanpa reload.
• Conversation History — Riwayat percakapan tetap tersedia selama session pengguna.
• Session Management — Sistem dapat membedakan percakapan AI dan percakapan yang sedang ditangani manusia.
• Chat Widget — Widget dapat digunakan pada desktop dan perangkat mobile.

---

Teknologi & Arsitektur (Tech Stack)

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS, Motion, Pusher JS, React Markdown
• Backend: Next.js App Router, Route Handlers, TypeScript
• AI: OpenRouter API, Google Gemini
• Real-Time Communication: Pusher Channels
• Session & State: Upstash Redis, localStorage, sessionStorage
• Messaging: Telegram Bot API & Webhooks

---

Tantangan Teknis & Solusi

1. Menghubungkan Reply Telegram dengan Browser Pengunjung

Tantangan: Telegram hanya memberikan informasi mengenai pesan yang sedang dibalas. Data tersebut tidak secara langsung mengetahui session browser pengunjung.

Solusi: Saat sistem mengirim pesan ke Telegram, telegram_message_id disimpan bersama session_id di Redis. Ketika pemilik bisnis membalas pesan tersebut, webhook menggunakan ID tersebut untuk menemukan session browser yang sesuai dan mengirimkan balasan melalui Pusher.

2. Menjaga Respons AI Tetap Berdasarkan Informasi yang Tersedia

Tantangan: LLM dapat menghasilkan informasi yang tidak terdapat pada data bisnis, seperti layanan, portfolio, atau harga yang sebenarnya tidak tersedia.

Solusi: Membatasi system prompt berdasarkan informasi yang tersedia dan memberikan instruksi agar AI tidak membuat informasi baru ketika data yang dibutuhkan tidak tersedia.

3. Menjaga Percakapan Tetap Terhubung Saat Menggunakan Mobile

Tantangan: Koneksi real-time pada perangkat mobile dapat terputus ketika pengguna berpindah aplikasi atau mengalami perubahan koneksi.

Solusi: Menggunakan mekanisme reconnect dari Pusher dan menyimpan state percakapan pada sisi client serta Redis sehingga session dapat dilanjutkan ketika koneksi kembali tersedia.

4. Memisahkan Percakapan AI dan Human Handoff

Tantangan: Setelah handoff dilakukan, AI tidak boleh terus memberikan respons ketika percakapan sedang ditangani manusia.

Solusi: Menyimpan status inHandoff pada session dan menggunakan status tersebut untuk menentukan apakah pesan diproses oleh AI atau diteruskan sebagai percakapan manusia.

---

Pembelajaran & Poin Kunci

• Memahami implementasi AI assistant yang terintegrasi langsung dengan kebutuhan bisnis.
• Mendapat pengalaman mengintegrasikan LLM dengan aplikasi web menggunakan session dan context management.
• Memahami komunikasi antara Telegram Webhook dan WebSocket melalui Redis sebagai penghubung session.
• Menerapkan real-time messaging menggunakan Pusher untuk komunikasi dua arah antara browser dan Telegram.
• Memahami implementasi Human-in-the-Loop, di mana AI menangani pertanyaan umum dan manusia dapat mengambil alih percakapan ketika diperlukan.