From e79fd53e47c5f99395ad169c7e168d8d970eac0c Mon Sep 17 00:00:00 2001
From: John Billiris <prbillir@microsoft.com>
Date: Thu, 19 Oct 2023 12:34:57 +1100
Subject: [PATCH] Able to customise welcome and chat start messages

---
 src/.env.example                              |  8 +++++++-
 .../chat-message-empty-state.tsx              | 11 ++++++++--
 .../chat-empty-state/start-new-chat.tsx       | 20 +++++++++++++------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/.env.example b/src/.env.example
index c0ccd4d2f..94f8aa644 100644
--- a/src/.env.example
+++ b/src/.env.example
@@ -47,4 +47,10 @@ AZURE_DOCUMENT_INTELLIGENCE_KEY=
 
 # Azure Speech to Text to convert audio to text
 AZURE_SPEECH_REGION=""
-AZURE_SPEECH_KEY=""
\ No newline at end of file
+AZURE_SPEECH_KEY=""
+
+# Any short text or HTML to display as welcome message
+NEXT_PUBLIC_WELCOME_MESSAGE=""
+
+# Any short text or HTML to display at the start of a new chat
+NEXT_PUBLIC_CHAT_START_MESSAGE=""
\ No newline at end of file
diff --git a/src/features/chat/chat-ui/chat-empty-state/chat-message-empty-state.tsx b/src/features/chat/chat-ui/chat-empty-state/chat-message-empty-state.tsx
index e376a7360..0d74814c3 100644
--- a/src/features/chat/chat-ui/chat-empty-state/chat-message-empty-state.tsx
+++ b/src/features/chat/chat-ui/chat-empty-state/chat-message-empty-state.tsx
@@ -10,6 +10,7 @@ interface Prop {}
 
 export const ChatMessageEmptyState: FC<Prop> = (props) => {
   const { fileState } = useChatContext();
+  const CHAT_START_MESSAGE =  process.env.NEXT_PUBLIC_CHAT_START_MESSAGE ?? '';
 
   const { showFileUpload } = fileState;
 
@@ -18,8 +19,14 @@ export const ChatMessageEmptyState: FC<Prop> = (props) => {
       <div className="col-span-2 gap-5 flex flex-col flex-1">
         <img src="/ai-icon.png" className="w-36" />
         <p className="">
-          Start by just typing your message in the box below. You can also
-          personalise the chat by making changes to the settings on the right.
+          {CHAT_START_MESSAGE ? (
+            <div dangerouslySetInnerHTML={{ __html: CHAT_START_MESSAGE}} />
+          ) : (
+            <p>
+              Start by just typing your message in the box below. You can also
+              personalise the chat by making changes to the settings on the right.
+            </p>
+          )}
         </p>
       </div>
       <Card className="col-span-3 flex flex-col gap-5 p-5 ">
diff --git a/src/features/chat/chat-ui/chat-empty-state/start-new-chat.tsx b/src/features/chat/chat-ui/chat-empty-state/start-new-chat.tsx
index f8b80037e..de2242895 100644
--- a/src/features/chat/chat-ui/chat-empty-state/start-new-chat.tsx
+++ b/src/features/chat/chat-ui/chat-empty-state/start-new-chat.tsx
@@ -7,6 +7,8 @@ import { NewChat } from "../../chat-menu/new-chat";
 interface Prop {}
 
 export const StartNewChat: FC<Prop> = (props) => {
+  const WELCOME_MESSAGE =  process.env.NEXT_PUBLIC_WELCOME_MESSAGE ?? '';
+
   return (
     <div className="grid grid-cols-5 w-full items-center container mx-auto max-w-3xl justify-center h-full gap-9">
       <div className="col-span-2 gap-5 flex flex-col flex-1">
@@ -17,12 +19,18 @@ export const StartNewChat: FC<Prop> = (props) => {
           {AI_NAME}
         </Typography>
         <div className="flex flex-col gap-2">
-          <p className="">
-            Welcome to {AI_NAME}. You should interact in a friendly manner with
-            the AI assistant and refrain from participating in any harmful
-            activities.
-          </p>
-          <p>You can start a new chat with me by clicking the button below.</p>
+          { WELCOME_MESSAGE ? (
+            <div className="" dangerouslySetInnerHTML={{ __html: WELCOME_MESSAGE}} />
+          ) : (
+            <div>
+              <p className="">
+                Welcome to {AI_NAME}. You should interact in a friendly manner with
+                the AI assistant and refrain from participating in any harmful
+                activities.
+              </p>
+              <p>You can start a new chat with me by clicking the button below.</p>
+            </div>
+          )}
         </div>
         <div className="-mx-5 -mb-5 p-5 flex flex-col border-t bg-muted">
           <NewChat />