sourcing static text on chat-page from env file

.env.example

@@ -1,6 +1,14 @@
+# copy this file to .env and update the values
 OPENAI_API_KEY=
-
-# Update these with your Supabase details from your project settings > API and dashboard settings
+# Update these with your Pinecone details from your project settings > API and dashboard settings
 PINECONE_API_KEY=
 PINECONE_ENVIRONMENT=
 PINECONE_INDEX_NAME=
+PINECONE_NAME_SPACE=pdf-test
+# static text on chat page - change if you want new values
+CHAT_PAGE_TITLE=Chat With Your Legal Docs
+WELCOME_MESSAGE=Hi, what would you like to learn about this legal case?
+USER_INPUT_PLACEHOLDER=What is this legal case about?
+FOOTER_URL=https://twitter.com/mayowaoshin
+FOOTER_TEXT=Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).
+

config/chat-page.ts

@@ -0,0 +1,14 @@
+/**  * Set these values in your .env file */
+if (!process.env.CHAT_PAGE_TITLE) {
+  console.log('.env variables:', process.env);
+  console.log('Missing CHAT_PAGE_TITLE in .env file');
+}
+const CHAT_PAGE_TITLE= process.env.CHAT_PAGE_TITLE ?? 'Chat With Your Legal Docs';
+const WELCOME_MESSAGE = process.env.WELCOME_MESSAGE ?? 'Hi, what would you like to learn about this legal case?';
+const USER_INPUT_PLACEHOLDER = process.env.USER_INPUT_PLACEHOLDER ?? 'What is this legal case about?';
+const FOOTER_URL = process.env.FOOTER_URL ?? 'https://twitter.com/mayowaoshin';
+const FOOTER_TEXT = process.env.FOOTER_TEXT ?? 'Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).';
+
+
+export { CHAT_PAGE_TITLE, WELCOME_MESSAGE,
+  USER_INPUT_PLACEHOLDER, FOOTER_URL, FOOTER_TEXT };

config/pinecone.ts

@@ -8,6 +8,6 @@ if (!process.env.PINECONE_INDEX_NAME) {
 
 const PINECONE_INDEX_NAME = process.env.PINECONE_INDEX_NAME ?? '';
 
-const PINECONE_NAME_SPACE = 'pdf-test'; //namespace is optional for your vectors
+const PINECONE_NAME_SPACE = process.env.PINECONE_NAME_SPACE ?? 'pdf-test'; //namespace is optional for your vectors
 
-export { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE };
+export { PINECONE_INDEX_NAME, PINECONE_NAME_SPACE };

pages/api/chat-static.ts

@@ -0,0 +1,8 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { CHAT_PAGE_TITLE, WELCOME_MESSAGE, USER_INPUT_PLACEHOLDER, 
+  FOOTER_URL, FOOTER_TEXT } from '@/config/chat-page';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ CHAT_PAGE_TITLE, WELCOME_MESSAGE, 
+    USER_INPUT_PLACEHOLDER, FOOTER_URL, FOOTER_TEXT });
+}

pages/index.tsx

@@ -1,3 +1,4 @@
+
 import { useRef, useState, useEffect } from 'react';
 import Layout from '@/components/layout';
 import styles from '@/styles/Home.module.css';
@@ -17,18 +18,18 @@ export default function Home() {
   const [query, setQuery] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
+  const [chatTitle, setChatTitle] = useState<string>('');
+  const [welcomeMessage, setWelcomeMessage] = useState<string>('');
+  const [userInputPlaceholder, setUserInputPlaceholder] = useState<string>('');
+  const [footerUrl, setFooterUrl] = useState<string>('');
+  const [footerText, setFooterText] = useState<string>('');
   const [messageState, setMessageState] = useState<{
     messages: Message[];
     pending?: string;
     history: [string, string][];
     pendingSourceDocs?: Document[];
   }>({
-    messages: [
-      {
-        message: 'Hi, what would you like to learn about this legal case?',
-        type: 'apiMessage',
-      },
-    ],
+    messages: [],
     history: [],
   });
 
@@ -39,7 +40,37 @@ export default function Home() {
 
   useEffect(() => {
     textAreaRef.current?.focus();
-  }, []);
+    fetch('/api/chat-static') // Make a request to the chat-static API route
+    .then((response) => response.json())
+    .then((data) => {
+    // load static page content from .env values
+    const { CHAT_PAGE_TITLE } = data;
+    const { WELCOME_MESSAGE } = data;
+    const { USER_INPUT_PLACEHOLDER } = data;
+    const { FOOTER_URL } = data;
+    const { FOOTER_TEXT } = data;
+    // use defaults if .env values are not set
+    setChatTitle(CHAT_PAGE_TITLE || 'Chat With Your Legal Docs');
+    setWelcomeMessage(WELCOME_MESSAGE || 'Hi, what would you like to learn about this legal case?');
+    setUserInputPlaceholder(USER_INPUT_PLACEHOLDER || 'What is this legal case about?');
+    setFooterUrl(FOOTER_URL || 'https://twitter.com/mayowaoshin');
+    setFooterText(FOOTER_TEXT || 'Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).');
+
+    setMessageState((prevState) => ({
+      ...prevState,
+      messages: [
+        {
+          message: welcomeMessage,
+          type: 'apiMessage',
+        },
+      ],
+    }));
+  })
+  .catch((error) => {
+    console.error('Failed to fetch chat data:', error);
+    // Handle error
+  });
+  }, [welcomeMessage]);
 
   //handle form submission
   async function handleSubmit(e: any) {
@@ -125,7 +156,7 @@ export default function Home() {
       <Layout>
         <div className="mx-auto flex flex-col gap-4">
           <h1 className="text-2xl font-bold leading-[1.1] tracking-tighter text-center">
-            Chat With Your Legal Docs
+            {chatTitle}
           </h1>
           <main className={styles.main}>
             <div className={styles.cloud}>
@@ -224,7 +255,7 @@ export default function Home() {
                     placeholder={
                       loading
                         ? 'Waiting for response...'
-                        : 'What is this legal case about?'
+                        : userInputPlaceholder
                     }
                     value={query}
                     onChange={(e) => setQuery(e.target.value)}
@@ -261,11 +292,12 @@ export default function Home() {
           </main>
         </div>
         <footer className="m-auto p-4">
-          <a href="https://twitter.com/mayowaoshin">
-            Powered by LangChainAI. Demo built by Mayo (Twitter: @mayowaoshin).
+          <a href={footerUrl}>
+            {footerText}
           </a>
         </footer>
       </Layout>
     </>
   );
 }
+