From d4a1367fb8f5ed4403d71f0817ea2b08995b751c Mon Sep 17 00:00:00 2001 From: William Gillett Date: Fri, 19 May 2023 13:41:24 -0400 Subject: [PATCH] sourcing static text on chat-page from env file --- .env.example | 12 +++++++-- config/chat-page.ts | 14 +++++++++++ config/pinecone.ts | 4 +-- pages/api/chat-static.ts | 8 ++++++ pages/index.tsx | 54 ++++++++++++++++++++++++++++++++-------- 5 files changed, 77 insertions(+), 15 deletions(-) create mode 100644 config/chat-page.ts create mode 100644 pages/api/chat-static.ts diff --git a/.env.example b/.env.example index 778ad5519..e5fc675a8 100644 --- a/.env.example +++ b/.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). + diff --git a/config/chat-page.ts b/config/chat-page.ts new file mode 100644 index 000000000..c380f0b48 --- /dev/null +++ b/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 }; diff --git a/config/pinecone.ts b/config/pinecone.ts index ce2dadaad..5c37015ca 100644 --- a/config/pinecone.ts +++ b/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 }; \ No newline at end of file diff --git a/pages/api/chat-static.ts b/pages/api/chat-static.ts new file mode 100644 index 000000000..86f5be1f7 --- /dev/null +++ b/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 }); +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index c80830751..c0142998b 100644 --- a/pages/index.tsx +++ b/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(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + const [chatTitle, setChatTitle] = useState(''); + const [welcomeMessage, setWelcomeMessage] = useState(''); + const [userInputPlaceholder, setUserInputPlaceholder] = useState(''); + const [footerUrl, setFooterUrl] = useState(''); + const [footerText, setFooterText] = useState(''); 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() {

- Chat With Your Legal Docs + {chatTitle}

@@ -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() {
); } +