Custom welcome and chat start messages

src/.env.example

@@ -48,5 +48,11 @@ AZURE_DOCUMENT_INTELLIGENCE_KEY=
 # Azure Speech to Text to convert audio to text
 # Enabled must be set to "true" any other value will disable the feature
 NEXT_PUBLIC_SPEECH_ENABLED=true
-AZURE_SPEECH_REGION=
-AZURE_SPEECH_KEY=
+AZURE_SPEECH_REGION=""
+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=""

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 ">

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 />