From 409cbff979e2be2c21888624a7b0e758f5d0eb31 Mon Sep 17 00:00:00 2001
From: Hari Nugraha <haricnugraha@gmail.com>
Date: Mon, 2 Feb 2026 17:06:46 +0700
Subject: [PATCH 1/2] feat: Add i18n support to Hyperbot

---
 .../components/landing-ai-agent.tsx           | 60 ++++++++++++-------
 app/[lang]/(hyperjump)/layout.tsx             |  5 +-
 locales/en/hyperbot.json                      | 17 ++++++
 locales/id/hyperbot.json                      | 17 ++++++
 4 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 locales/en/hyperbot.json
 create mode 100644 locales/id/hyperbot.json

diff --git a/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx b/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
index 702b3f1b3..88e70d011 100644
--- a/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
+++ b/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import { MessageCircle, X } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -10,6 +9,18 @@ import markdownit from "markdown-it";
 import { v4 as uuid } from "uuid";
 import { sendGAEvent } from "@next/third-parties/google";
 
+import { Button } from "@/components/ui/button";
+import {
+  hyperbotAskHyperbot,
+  hyperbotCommonFollowUp,
+  hyperbotCommonLoading,
+  hyperbotDefaultMessages,
+  hyperbotHeaderGreeting,
+  hyperbotHeaderSupportAvailability,
+  hyperbotInputPlaceholder
+} from "@/locales/.generated/strings";
+import type { SupportedLanguage } from "@/locales/.generated/types";
+
 // Types
 type PrefillAIAgentEvent = CustomEvent<{ message: string }>;
 type ShowFollowUpMessagesEvent = CustomEvent<{ sessionId: string }>;
@@ -24,12 +35,6 @@ type TMessage = {
   human: string;
 };
 
-// Constants
-const DEFAULT_MESSAGES = [
-  { id: 1, text: "What services do you offer?" },
-  { id: 2, text: "Show me examples of past projects" },
-  { id: 3, text: "Schedule a free consultation" }
-];
 const ENABLE_STREAMING = true;
 
 // Functions
@@ -207,12 +212,17 @@ type GAEvent = {
   label: string;
 };
 
-interface HyperBotToggleProps {
-  gaEvent?: GAEvent;
-}
+type HyperBotProps = {
+  gaEvent: GAEvent;
+  lang: SupportedLanguage;
+};
 
-// Main component
-export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
+export default function Hyperbot({ gaEvent, lang }: HyperBotProps) {
+  const defaultMessages = [
+    { id: 1, text: hyperbotDefaultMessages(lang)[0] },
+    { id: 2, text: hyperbotDefaultMessages(lang)[1] },
+    { id: 3, text: hyperbotDefaultMessages(lang)[2] }
+  ];
   const [sessionId, setSessionId] = useState<string | undefined>(undefined);
   const [messages, setMessages] = useState<TMessage[]>([]);
   const [followUpMessages, setFollowUpMessages] = useState<string[]>([]);
@@ -444,8 +454,12 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
                 aria-label="Close chat">
                 <X className="h-6 w-6" />
               </button>
-              <p className="text-lg font-bold">Hi there! 👋</p>
-              <p className="text-sm">Start a chat. We are here to help 24/7.</p>
+              <p className="text-lg font-bold">
+                {hyperbotHeaderGreeting(lang)}
+              </p>
+              <p className="text-sm">
+                {hyperbotHeaderSupportAvailability(lang)}
+              </p>
             </div>
 
             {/* Messages */}
@@ -467,7 +481,9 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
                   {!m.ai && isSubmitting && i === messages.length - 1 && (
                     <div className="max-w-[80%] self-start rounded-xl bg-white p-3">
                       <div className="flex gap-1">
-                        <span className="sr-only">Loading...</span>
+                        <span className="sr-only">
+                          {hyperbotCommonLoading(lang)}...
+                        </span>
                         <div className="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:-0.3s]" />
                         <div className="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:-0.15s]" />
                         <div className="h-2 w-2 animate-bounce rounded-full bg-gray-500" />
@@ -480,7 +496,9 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
               {/* Follow up messages */}
               {followUpMessages.length > 0 && !isSubmitting && (
                 <div className="flex flex-col gap-2">
-                  <p className="text-sm font-medium text-gray-800">Follow up</p>
+                  <p className="text-sm font-medium text-gray-800">
+                    {hyperbotCommonFollowUp(lang)}
+                  </p>
                   {followUpMessages.map((text, id) => (
                     <button
                       key={id}
@@ -504,7 +522,7 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
             <div className="shrink-0 bg-[#f2f4f8] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:bg-white">
               {messages.length === 0 && (
                 <div className="mb-3 flex flex-wrap gap-2 md:hidden">
-                  {DEFAULT_MESSAGES.map(({ text, id }) => (
+                  {defaultMessages.map(({ text, id }) => (
                     <Button
                       key={id}
                       variant="outline"
@@ -537,8 +555,8 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
                       handleSubmit(text, ENABLE_STREAMING);
                     }
                   }}
-                  placeholder="Ask me about services, success stories, or your challenges"
-                  aria-describedby="Ask me about services, success stories, or your challenges"
+                  placeholder={hyperbotInputPlaceholder(lang)}
+                  aria-describedby={hyperbotInputPlaceholder(lang)}
                 />
                 <Button
                   className="absolute top-2 right-2 h-8 w-8 rounded-full bg-blue-500 p-2"
@@ -559,7 +577,7 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
               {/* Default messages desktop */}
               {messages.length === 0 && (
                 <div className="mt-3 hidden space-x-2 overflow-x-auto whitespace-nowrap md:flex">
-                  {DEFAULT_MESSAGES.map(({ text, id }) => (
+                  {defaultMessages.map(({ text, id }) => (
                     <Button
                       key={id}
                       variant="outline"
@@ -599,7 +617,7 @@ export default function LandingAIAgent({ gaEvent }: HyperBotToggleProps) {
         }}>
         {closed ? (
           <>
-            <span className="hidden lg:block">Ask HyperBot</span>
+            <span className="hidden lg:block">{hyperbotAskHyperbot(lang)}</span>
             <span className="block lg:hidden">
               <MessageCircle className="h-10 w-10 md:h-6 md:w-6" />
             </span>
diff --git a/app/[lang]/(hyperjump)/layout.tsx b/app/[lang]/(hyperjump)/layout.tsx
index 02f61bad1..e4332821a 100644
--- a/app/[lang]/(hyperjump)/layout.tsx
+++ b/app/[lang]/(hyperjump)/layout.tsx
@@ -1,7 +1,7 @@
 import ScrollObserver from "@/app/components/scroll-observer";
 import type { SupportedLanguage } from "@/locales/.generated/types";
 import Footer from "./components/footer";
-import LandingAIAgent from "./components/landing-ai-agent";
+import Hyperbot from "./components/landing-ai-agent";
 import Nav from "./components/nav";
 
 type MainLangLayoutProps = {
@@ -21,12 +21,13 @@ export default async function MainLangLayout({
       <div className="relative min-h-screen bg-white">
         <Nav lang={lang as SupportedLanguage} />
         {children}
-        <LandingAIAgent
+        <Hyperbot
           gaEvent={{
             event: "hyperbot_open",
             category: "engagement",
             label: "hyperjump_chat"
           }}
+          lang={lang as SupportedLanguage}
         />
         <Footer lang={lang as SupportedLanguage} />
       </div>
diff --git a/locales/en/hyperbot.json b/locales/en/hyperbot.json
new file mode 100644
index 000000000..b7d76f78c
--- /dev/null
+++ b/locales/en/hyperbot.json
@@ -0,0 +1,17 @@
+{
+  "ask_hyperbot": "Ask Hyperbot",
+  "common": {
+    "loading": "Loading",
+    "follow_up": "Follow up"
+  },
+  "default_messages": [
+    "What services do you offer?",
+    "Show me examples of past projects",
+    "Schedule a free consultation"
+  ],
+  "header": {
+    "greeting": "Hi there! 👋",
+    "support_availability": "Start a chat. We are here to help 24/7."
+  },
+  "input_placeholder": "Ask me about services, success stories, or your challenges"
+}
diff --git a/locales/id/hyperbot.json b/locales/id/hyperbot.json
new file mode 100644
index 000000000..08132fe81
--- /dev/null
+++ b/locales/id/hyperbot.json
@@ -0,0 +1,17 @@
+{
+  "ask_hyperbot": "Tanya Hyperbot",
+  "common": {
+    "loading": "Memuat",
+    "follow_up": "Tindak lanjut"
+  },
+  "default_messages": [
+    "Layanan apa saja yang Anda tawarkan?",
+    "Tunjukkan contoh proyek sebelumnya",
+    "Jadwalkan konsultasi gratis"
+  ],
+  "header": {
+    "greeting": "Halo! 👋",
+    "support_availability": "Mulai percakapan. Kami di sini untuk membantu 24/7."
+  },
+  "input_placeholder": "Tanyakan kepada saya tentang layanan, kisah sukses, atau tantangan Anda"
+}

From 8bfc698bcd31f91b7f266ede7c1598f0fdd7c339 Mon Sep 17 00:00:00 2001
From: Hari Nugraha <haricnugraha@gmail.com>
Date: Mon, 2 Feb 2026 17:10:57 +0700
Subject: [PATCH 2/2] fix: HyperBot typo

---
 app/[lang]/(hyperjump)/components/landing-ai-agent.tsx | 6 +++---
 app/[lang]/(hyperjump)/layout.tsx                      | 4 ++--
 locales/en/hyperbot.json                               | 2 +-
 locales/id/hyperbot.json                               | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx b/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
index 88e70d011..afb973d29 100644
--- a/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
+++ b/app/[lang]/(hyperjump)/components/landing-ai-agent.tsx
@@ -11,7 +11,7 @@ import { sendGAEvent } from "@next/third-parties/google";
 
 import { Button } from "@/components/ui/button";
 import {
-  hyperbotAskHyperbot,
+  hyperbotAskHyperBot,
   hyperbotCommonFollowUp,
   hyperbotCommonLoading,
   hyperbotDefaultMessages,
@@ -217,7 +217,7 @@ type HyperBotProps = {
   lang: SupportedLanguage;
 };
 
-export default function Hyperbot({ gaEvent, lang }: HyperBotProps) {
+export default function HyperBot({ gaEvent, lang }: HyperBotProps) {
   const defaultMessages = [
     { id: 1, text: hyperbotDefaultMessages(lang)[0] },
     { id: 2, text: hyperbotDefaultMessages(lang)[1] },
@@ -617,7 +617,7 @@ export default function Hyperbot({ gaEvent, lang }: HyperBotProps) {
         }}>
         {closed ? (
           <>
-            <span className="hidden lg:block">{hyperbotAskHyperbot(lang)}</span>
+            <span className="hidden lg:block">{hyperbotAskHyperBot(lang)}</span>
             <span className="block lg:hidden">
               <MessageCircle className="h-10 w-10 md:h-6 md:w-6" />
             </span>
diff --git a/app/[lang]/(hyperjump)/layout.tsx b/app/[lang]/(hyperjump)/layout.tsx
index e4332821a..259cd16ed 100644
--- a/app/[lang]/(hyperjump)/layout.tsx
+++ b/app/[lang]/(hyperjump)/layout.tsx
@@ -1,7 +1,7 @@
 import ScrollObserver from "@/app/components/scroll-observer";
 import type { SupportedLanguage } from "@/locales/.generated/types";
 import Footer from "./components/footer";
-import Hyperbot from "./components/landing-ai-agent";
+import HyperBot from "./components/landing-ai-agent";
 import Nav from "./components/nav";
 
 type MainLangLayoutProps = {
@@ -21,7 +21,7 @@ export default async function MainLangLayout({
       <div className="relative min-h-screen bg-white">
         <Nav lang={lang as SupportedLanguage} />
         {children}
-        <Hyperbot
+        <HyperBot
           gaEvent={{
             event: "hyperbot_open",
             category: "engagement",
diff --git a/locales/en/hyperbot.json b/locales/en/hyperbot.json
index b7d76f78c..6ddb4c7d3 100644
--- a/locales/en/hyperbot.json
+++ b/locales/en/hyperbot.json
@@ -1,5 +1,5 @@
 {
-  "ask_hyperbot": "Ask Hyperbot",
+  "ask_hyper_bot": "Ask HyperBot",
   "common": {
     "loading": "Loading",
     "follow_up": "Follow up"
diff --git a/locales/id/hyperbot.json b/locales/id/hyperbot.json
index 08132fe81..f432dfae8 100644
--- a/locales/id/hyperbot.json
+++ b/locales/id/hyperbot.json
@@ -1,5 +1,5 @@
 {
-  "ask_hyperbot": "Tanya Hyperbot",
+  "ask_hyper_bot": "Tanya HyperBot",
   "common": {
     "loading": "Memuat",
     "follow_up": "Tindak lanjut"