Merge pull request #399 from wri/develop

Merging in changes from develop

Author: kamicut

app/(home)/sections/11_CTA.tsx

@@ -37,7 +37,7 @@ export default function CTASection() {
             </Box>
             <Button asChild variant="solid" colorPalette="primary" rounded="lg">
               <Link href="/app">
-                Try the preview
+                {LANDING_PAGE_VERSION === "public" ? "Explore the beta" : "Try the preview"}
                 <CaretRightIcon weight="bold" />
               </Link>
             </Button>

app/(home)/sections/1_Hero.tsx

@@ -6,17 +6,17 @@ import {
   Container,
   Flex,
   Heading,
-  Input,
   Text,
   Badge,
+  Textarea,
+  Spinner,
 } from "@chakra-ui/react";
 import {
   ArrowsClockwiseIcon,
   CaretRightIcon,
   QuestionIcon,
 } from "@phosphor-icons/react";
 import { Tooltip } from "@/components/ui/tooltip";
-import useChatStore from "@/app/store/chatStore";
 import GlobalHeader from "../../components/GlobalHeader";
 
 type PromptMarqueeProps = {
@@ -36,14 +36,19 @@ export default function LandingHero({
   const [inputValue, setInputValue] = useState("");
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [ready, setReady] = useState(false);
-  const { sendMessage, isLoading } = useChatStore();
+  const [sendingPrompt, setSendingPrompt] = useState(false);
 
   useEffect(() => {
     setReady(true);
   }, []);
 
   useEffect(() => {
-    if (isInputFocused || inputValue.length > 0) return; // Pause timer if typing
+    setSendingPrompt(false);
+  }, []);
+
+  useEffect(() => {
+    if (!ready || isInputFocused || inputValue.length > 0 || sendingPrompt)
+      return; // Pause timer if typing or sendingPrompt
     const interval = setInterval(() => {
       setPromptTimer((prev) => {
         if (prev > 1) {
@@ -57,17 +62,36 @@ export default function LandingHero({
       });
     }, 1000);
     return () => clearInterval(interval);
-  }, [prompts.length, setPromptIndex, isInputFocused, inputValue]);
+  }, [
+    prompts.length,
+    setPromptIndex,
+    isInputFocused,
+    inputValue,
+    sendingPrompt,
+  ]);
   // Measure the width of one set of prompts after render
 
   const LANDING_PAGE_VERSION = process.env.NEXT_PUBLIC_LANDING_PAGE_VERSION;
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Submit on Enter (without Shift) or Command+Enter
+    if (
+      (e.key === "Enter" && !e.shiftKey && !e.metaKey) ||
+      (e.key === "Enter" && e.metaKey)
+    ) {
+      e.preventDefault(); // Prevents newline
+      submitPrompt();
+    }
+    // If Shift+Enter, do nothing: allow newline
+  };
+
   const submitPrompt = async () => {
-    if (isLoading) return;
+    if (sendingPrompt) return;
+    setSendingPrompt(true);
     const message = inputValue.trim() || prompts[promptIndex];
     localStorage.setItem("bypassWelcomeModal", "true");
-    await sendMessage(message);
-    router.push("/app");
+    const encodedMessage = encodeURI(message);
+    router.push(`/app?prompt=${encodedMessage}`);
   };
 
   return (
@@ -155,7 +179,7 @@ export default function LandingHero({
             {(LANDING_PAGE_VERSION === "public" ||
               LANDING_PAGE_VERSION === "limited") && (
               <Box rounded="xl" bg="bg" p="4" zIndex="10">
-                <Input
+                <Textarea
                   key={
                     !isInputFocused && inputValue === ""
                       ? promptIndex
@@ -165,6 +189,7 @@ export default function LandingHero({
                   onChange={(e) => setInputValue(e.target.value)}
                   onFocus={() => setIsInputFocused(true)}
                   onBlur={() => setIsInputFocused(false)}
+                  onKeyDown={handleKeyDown}
                   p="0"
                   outline="none"
                   borderWidth="0"
@@ -176,6 +201,16 @@ export default function LandingHero({
                   _focusWithin={{
                     animationPlayState: "paused",
                   }}
+                  aria-label="Ask a question..."
+                  minH="20px"
+                  autoresize
+                  maxH="3lh"
+                  border="none"
+                  color={sendingPrompt ? "fg.subtle" : "fg"}
+                  _placeholder={{ color: sendingPrompt ? "fg.subtle" : "fg" }}
+                  disabled={sendingPrompt}
+                  _disabled={{ opacity: 1 }}
+                  _focus={{ outline: "none", boxShadow: "none" }}
                 />
                 <Flex justifyContent="space-between" mt="4" gap={4}>
                   <Flex gap="2" alignItems="flex-start" flexDirection="column">
@@ -196,7 +231,9 @@ export default function LandingHero({
                         bg: "secondary.100",
                         animation: ready ? "fillWidth" : "none",
                         animationPlayState:
-                          isInputFocused || inputValue.length > 0
+                          isInputFocused ||
+                          inputValue.length > 0 ||
+                          sendingPrompt
                             ? "paused"
                             : "running",
                       }}
@@ -219,9 +256,10 @@ export default function LandingHero({
                     rounded="lg"
                     onClick={submitPrompt}
                     title="Submit prompt to assistant and go to application"
-                    disabled={isLoading}
+                    disabled={sendingPrompt}
                   >
-                    Go
+                    {sendingPrompt ? <Spinner size="sm" mr={2} /> : null}
+                    {sendingPrompt ? "Sending" : "Go"}
                     <CaretRightIcon weight="bold" />
                   </Button>
                 </Flex>

app/ChatPanel.tsx

@@ -59,7 +59,7 @@ function ChatPanel() {
   }, [width]);
 
   return (
-    <Flex minH="100%" maxH="100%" gridArea="chat" zIndex={1100} position="relative" bg="bg">
+    <Flex minH="100%" maxH="100%" gridArea="chat" zIndex={1000} position="relative" bg="bg">
       <Flex
         minH="100%"
         maxH="100%"

app/actions/ortto.ts

@@ -0,0 +1,58 @@
+"use server";
+
+import { headers } from "next/headers";
+
+type OrttoPayload = {
+  email: string;
+  firstName: string;
+  lastName: string;
+  sector: string;
+  jobTitle: string;
+  companyOrganization: string;
+  countryCode: string;
+  Topics: string[];
+  receiveNewsEmails: boolean;
+  ipAddr?: string;
+};
+
+export async function submitToOrtto(data: Omit<OrttoPayload, "ipAddr">) {
+  try {
+    const headersList = await headers();
+    const ipAddr =
+      headersList.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+      headersList.get("x-real-ip") ||
+      "unknown";
+
+    const payload: OrttoPayload = {
+      ...data,
+      ipAddr,
+    };
+
+    console.log("Submitting to Ortto:", JSON.stringify(payload, null, 2));
+
+    const response = await fetch("https://ortto.wri.org/custom-forms/gnw/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      console.error(
+        `Ortto submission failed: ${response.status} ${response.statusText}`,
+        text
+      );
+      // We don't throw here to avoid blocking the main flow if Ortto is down,
+      // but we log it.
+      return { success: false, error: response.statusText };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error("Error submitting to Ortto:", error);
+    return { success: false, error: "Internal Server Error" };
+  }
+}
+

app/app/(chat)/page.tsx

@@ -1,20 +1,56 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState, Suspense } from "react";
+import { Loader } from "@chakra-ui/react";
+import { useRouter, useSearchParams } from "next/navigation";
 import useChatStore from "@/app/store/chatStore";
 import useContextStore from "@/app/store/contextStore";
 import useMapStore from "@/app/store/mapStore";
 
-export default function Home() {
-  const { reset: resetChatStore } = useChatStore();
+function NewThread() {
+  const {
+    reset: resetChatStore,
+    sendMessage,
+    currentThreadId,
+  } = useChatStore();
   const { reset: resetContextStore } = useContextStore();
   const { reset: resetMapStore } = useMapStore();
+  const searchParams = useSearchParams();
+  const [hasMounted, setHasMounted] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     resetChatStore();
     resetMapStore();
     resetContextStore();
   }, [resetChatStore, resetContextStore, resetMapStore]);
 
-  return null; // The layout handles all the UI
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  const submitPrompt = async (prompt: string) => {
+    const result = await sendMessage(prompt);
+    if (result.isNew) {
+      router.replace(`/app/threads/${result.id}`);
+    }
+  };
+  
+  useEffect(() => {
+    if (!hasMounted) return;
+    const prompt = searchParams.get("prompt");
+    if (prompt && !currentThreadId) {
+      submitPrompt(prompt);
+    }
+  }, [hasMounted, submitPrompt, searchParams, currentThreadId]);
+
+  return null;
 }
+
+export default function AppPage() {
+  return (
+    <Suspense fallback={<Loader />}>
+      <NewThread />
+    </Suspense>
+  );
+}

app/components/CookieConsent.tsx

@@ -4,6 +4,7 @@ import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
 import Script from "next/script";
 import Analytics from "@/app/components/Analytics";
 import HotjarTrigger from "@/app/components/HotjarTrigger";
+import "./theme/cookies.css"
 
 const ibmPlexSans = IBM_Plex_Sans({
   variable: "--font-IBMPlexSans",