Feat: Learn More Button in FAQ (#146)

* Feat: Learn More Button in FAQ

* Fix formatting

Author: dennypradipta

app/[lang]/(hyperjump)/components/faq-learn-more.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowRightIcon } from "lucide-react";
+
+export default function FaqLearnMore({
+  index,
+  learnMoreChatbotMessage,
+  children
+}: {
+  index: number;
+  children: React.ReactNode;
+  learnMoreChatbotMessage: string;
+}) {
+  return (
+    <Button
+      variant="link"
+      className="flex w-max cursor-pointer flex-row items-center justify-center gap-1 rounded-none border-b border-black px-0 text-black hover:no-underline lg:text-lg"
+      onClick={() => {
+        // Open Chatbot with question regarding the index of the FAQ
+        let topic = "";
+        switch (index) {
+          case 0:
+            topic = "CTO as a Service";
+            break;
+          case 1:
+            topic = "ERP Implementation";
+            break;
+          case 2:
+            topic = "Tech Due Diligence";
+            break;
+          case 3:
+            topic = "Software as a Service";
+            break;
+          default:
+            break;
+        }
+
+        window.dispatchEvent(
+          new CustomEvent("prefillAIAgent", {
+            detail: {
+              message: `${learnMoreChatbotMessage} ${topic}`
+            }
+          })
+        );
+      }}>
+      {children}
+      <span>
+        <ArrowRightIcon className="h-4 w-4" />
+      </span>
+    </Button>
+  );
+}

app/[lang]/(hyperjump)/components/landing-ai-agent.tsx

@@ -3,11 +3,13 @@
 import { Button } from "@/components/ui/button";
 import { MessageCircle, X } from "lucide-react";
 import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { motion, AnimatePresence } from "framer-motion";
 
 // Types
+type PrefillAIAgentEvent = CustomEvent<{ message: string }>;
+
 type TMessageResponse = {
   messages: TMessage[];
   messageCount: number;
@@ -173,37 +175,64 @@ export default function LandingAIAgent() {
   }, [messages]);
 
   // Function to handle form submission
-  const handleSubmit = async (text: string) => {
-    if (!text.length || !inputRef.current) return;
-
-    // Set chat input and clear input field
-    const chatInput = text.trim();
-    setText("");
-    inputRef.current.value = "";
-
-    setIsSubmitting(true);
-    try {
-      const prevMessages = messages;
-      const newMessages = [...prevMessages, { human: chatInput, ai: "" }];
-      setMessages(newMessages);
-      const { output } = await fetchAsk({
-        chatInput,
-        sessionId: sessionId as string
-      });
-
-      const newMessagesFromAI = [
-        ...prevMessages,
-        { human: chatInput, ai: output }
-      ];
-      setMessages(newMessagesFromAI);
-
-      scrollToBottom();
-    } catch (error) {
-      toast("Failed to ask question. Please try again later.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      if (!text.length) return;
+      if (!text.length || !inputRef.current) return;
+
+      // Set chat input and clear input field
+      const chatInput = text.trim();
+      setText("");
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+
+      setIsSubmitting(true);
+      try {
+        const prevMessages = messages;
+        const newMessages = [...prevMessages, { human: chatInput, ai: "" }];
+        setMessages(newMessages);
+        const { output } = await fetchAsk({
+          chatInput,
+          sessionId: sessionId as string
+        });
+
+        const newMessagesFromAI = [
+          ...prevMessages,
+          { human: chatInput, ai: output }
+        ];
+        setMessages(newMessagesFromAI);
+
+        scrollToBottom();
+      } catch (error) {
+        toast("Failed to ask question. Please try again later.");
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [messages, sessionId]
+  );
+
+  // Listen for custom event to prefill and submit
+  useEffect(() => {
+    const handlePrefillAndSubmit = (event: Event) => {
+      const customEvent = event as PrefillAIAgentEvent;
+      const { message } = customEvent.detail;
+      setClosed(false);
+      setText(message);
+
+      // Wait for the chat to open and then submit
+      setTimeout(() => {
+        handleSubmit(message);
+      }, 300);
+    };
+
+    window.addEventListener("prefillAIAgent", handlePrefillAndSubmit);
+
+    return () => {
+      window.removeEventListener("prefillAIAgent", handlePrefillAndSubmit);
+    };
+  }, [handleSubmit]);
 
   return (
     <div className="fixed right-6 bottom-16 z-50 flex flex-col items-end gap-3">

app/[lang]/(hyperjump)/page.tsx

@@ -10,7 +10,12 @@ import {
   AccordionTrigger
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader
+} from "@/components/ui/card";
 import GridItemsContainer, {
   GridItems,
   GridItemsMoreButton,
@@ -35,7 +40,9 @@ import {
   mainCaseStudiesCtaHeading,
   mainCaseStudiesCtaDesc,
   mainCaseStudiesCtaExploreOurCaseStudies,
-  mainHeroHeading
+  mainHeroHeading,
+  mainFaqLearnMore,
+  mainFaqLearnMoreChatbotMessage
 } from "@/locales/.generated/server";
 
 import { Clients } from "./components/clients";
@@ -48,6 +55,8 @@ import {
   services
 } from "./data";
 import { dynamicOpengraph } from "@/lib/default-metadata";
+import { ArrowRightIcon } from "lucide-react";
+import FaqLearnMore from "./components/faq-learn-more";
 
 const { github, socials, title, url } = data;
 
@@ -260,9 +269,18 @@ function Faqs({ lang }: HomeParams) {
                     </AccordionTrigger>
                   </CardHeader>
                   <AccordionContent asChild>
-                    <CardContent className="px-4 pt-0 pb-4 text-base text-[#61656E] lg:text-lg">
+                    <CardContent className="flex flex-col gap-4 px-4 pt-0 pb-4 text-base text-[#61656E] lg:text-lg">
                       {item.answer}
                     </CardContent>
+                    <CardFooter className="p-0 px-4">
+                      <FaqLearnMore
+                        index={i}
+                        learnMoreChatbotMessage={mainFaqLearnMoreChatbotMessage(
+                          lang
+                        )}>
+                        {mainFaqLearnMore(lang)}
+                      </FaqLearnMore>
+                    </CardFooter>
                   </AccordionContent>
                 </Card>
               </AccordionItem>

locales/en/main.json

@@ -31,38 +31,32 @@
     "0_title": "Transforming a fisheries tech team into a scalable product engine",
     "0_text": "A junior but passionate tech team. Zero products in production. High impact at stake. We embedded deeply with their team to introduce structure, build confidence, and ship a functional MVP within 3 months. Through rigorous agile practices and full-system rollouts, we helped evolve a fragile tech org into a reliable product engine.",
     "0_category": "CTO as a Service",
-
     "1_title": "Elevating a media-tech engineering team from feature factory to innovation powerhouse",
     "1_text": "When rapid growth outpaced engineering maturity, this team needed more than features, they needed transformation. We restructured their agile practices, automated DevOps, established measurable KPIs, and helped them move from task execution to true product ownership and experimentation.",
     "1_category": "CTO as a Service"
   },
   "project": {
     "heading": "Open source product",
     "desc": "Explore our open-source projects and see how we innovate, collaborate, and build solutions that drive real impact. Join our community and contribute to cutting-edge technology.",
-
     "0_title": "Grule",
     "0_text": "Grule is a powerful open-source rule engine for Go that lets you define business rules in a human-readable format—making your app more flexible and maintainable.",
-
     "1_title": "Monika",
     "1_text": "Monika is a command line application to monitor every part of your web app using a simple JSON configuration file. Get alert not only when your site is down but also when it's slow.",
-
     "2_title": "WhatsApp Chatbot Connector",
     "2_text": "WhatsApp Chatbot Connector backend built using Express.js. It is designed to integrate with the WhatsApp Business API and supports various AI platforms such as Dify and Rasa."
   },
   "faq": {
     "heading": "Frequently asked questions",
     "desc": "Find answers to commonly asked questions. If you need further assistance, feel free to reach out to us.",
-
     "0_question": "What is CTO as a Service (CTOaaS), and how can it benefit my company?",
     "0_answer": "CTOaaS provides on-demand access to experienced technology leadership without the cost of a full-time executive. It helps enterprises with strategic IT planning, digital transformation, and technical decision-making to scale efficiently.",
-
     "1_question": "How do you approach ERP implementation for enterprises?",
     "1_answer": "We follow a structured process that includes business analysis, system selection, customization, integration, training, and post-implementation support to ensure seamless adoption and long-term success.",
-
     "2_question": "What does your tech due diligence service cover?",
     "2_answer": "Our tech due diligence includes codebase reviews, security assessments, scalability analysis, infrastructure evaluation, and compliance checks to ensure that your technology investments are low-risk and high-value.",
-
     "3_question": "Why should we choose your consulting services over hiring an in-house team?",
-    "3_answer": "We offer specialized expertise, flexibility, and cost-effective solutions without the overhead of full-time employees. Our team brings years of experience in enterprise IT, ensuring faster implementation and better ROI."
+    "3_answer": "We offer specialized expertise, flexibility, and cost-effective solutions without the overhead of full-time employees. Our team brings years of experience in enterprise IT, ensuring faster implementation and better ROI.",
+    "learn_more": "Learn more",
+    "learn_more_chatbot_message": "I want to learn more about"
   }
 }

locales/id/main.json

@@ -31,38 +31,32 @@
     "0_title": "Mengubah tim teknologi perikanan menjadi mesin produk yang skalabel",
     "0_text": "Sebuah tim teknologi junior namun penuh semangat. Tidak ada produk yang sudah berjalan. Taruhannya besar. Kami terlibat secara mendalam dengan tim mereka untuk memperkenalkan struktur, membangun kepercayaan diri, dan merilis MVP yang berfungsi dalam 3 bulan. Melalui praktik agile yang ketat dan peluncuran sistem menyeluruh, kami membantu mengubah organisasi teknologi yang rapuh menjadi mesin produk yang andal.",
     "0_category": "CTO as a Service",
-
     "1_title": "Meningkatkan tim rekayasa media dari pabrik fitur menjadi pusat inovasi",
     "1_text": "Ketika pertumbuhan pesat melampaui kematangan tim, tim ini membutuhkan lebih dari sekadar fitur, mereka membutuhkan transformasi. Kami merestrukturisasi praktik agile mereka, mengotomatisasi DevOps, menetapkan KPI yang terukur, dan membantu mereka beralih dari sekadar mengeksekusi tugas menjadi pemilik produk sejati yang mampu berinovasi.",
     "1_category": "CTO as a Service"
   },
   "project": {
     "heading": "Produk sumber terbuka",
     "desc": "Jelajahi proyek open-source kami dan lihat bagaimana kami berinovasi, berkolaborasi, dan membangun solusi berdampak nyata. Bergabunglah dengan komunitas kami dan berkontribusi dalam pengembangan teknologi mutakhir.",
-
     "0_title": "Grule",
     "0_text": "Grule adalah mesin aturan (rule engine) open-source yang kuat untuk Go, yang memungkinkan Anda mendefinisikan aturan bisnis dalam format yang mudah dibaca manusia—membuat aplikasi Anda lebih fleksibel dan mudah dipelihara.",
-
     "1_title": "Monika",
     "1_text": "Monika adalah aplikasi baris perintah untuk memantau berbagai komponen aplikasi web Anda menggunakan konfigurasi sederhana berbasis JSON. Dapatkan notifikasi tidak hanya saat situs Anda down, tetapi juga ketika performanya melambat.",
-
     "2_title": "Konektor Chatbot WhatsApp",
     "2_text": "Backend Konektor Chatbot WhatsApp dibangun menggunakan Express.js. Dirancang untuk terintegrasi dengan WhatsApp Business API dan mendukung berbagai platform AI seperti Dify dan Rasa."
   },
   "faq": {
     "heading": "Pertanyaan yang sering diajukan",
     "desc": "Temukan jawaban atas pertanyaan yang sering diajukan. Jika membutuhkan bantuan lebih lanjut, jangan ragu untuk menghubungi kami.",
-
     "0_question": "Apa itu CTO sebagai Layanan (CTOaaS), dan bagaimana manfaatnya bagi perusahaan saya?",
     "0_answer": "CTOaaS memberikan akses fleksibel ke kepemimpinan teknologi berpengalaman tanpa biaya eksekutif penuh waktu. Layanan ini membantu perusahaan dalam perencanaan strategis TI, transformasi digital, dan pengambilan keputusan teknis untuk mendukung pertumbuhan secara efisien.",
-
     "1_question": "Bagaimana pendekatan Anda dalam implementasi ERP untuk perusahaan?",
     "1_answer": "Kami mengikuti proses terstruktur yang mencakup analisis bisnis, pemilihan sistem, kustomisasi, integrasi, pelatihan, dan dukungan pasca implementasi untuk memastikan adopsi yang lancar dan keberhasilan jangka panjang.",
-
     "2_question": "Apa saja yang dicakup dalam layanan uji tuntas teknologi Anda?",
     "2_answer": "Uji tuntas teknologi kami mencakup review kode, evaluasi keamanan, analisis skalabilitas, penilaian infrastruktur, dan pemeriksaan kepatuhan untuk memastikan investasi teknologi Anda aman dan bernilai tinggi.",
-
     "3_question": "Mengapa kami harus memilih layanan konsultasi Anda dibandingkan membangun tim internal?",
-    "3_answer": "Kami menawarkan keahlian khusus, fleksibilitas, dan solusi yang hemat biaya tanpa beban karyawan tetap. Tim kami memiliki pengalaman bertahun-tahun dalam TI enterprise, memastikan implementasi lebih cepat dan ROI yang lebih tinggi."
+    "3_answer": "Kami menawarkan keahlian khusus, fleksibilitas, dan solusi yang hemat biaya tanpa beban karyawan tetap. Tim kami memiliki pengalaman bertahun-tahun dalam TI enterprise, memastikan implementasi lebih cepat dan ROI yang lebih tinggi.",
+    "learn_more": "Pelajari lebih lanjut",
+    "learn_more_chatbot_message": "Saya ingin mempelajari lebih lanjut tentang"
   }
 }

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {