Allow for simpler Personalization

src/app/chat/layout.tsx

@@ -1,10 +1,11 @@
 import { ProtectedPage } from "@/features/auth/protected-page";
 import { ChatMenu } from "@/features/chat/chat-menu/chat-menu";
 import { MainMenu } from "@/features/menu/menu";
+import { AI_NAME } from "@/features/theme/customise";
 
 export const metadata = {
-  title: "AzureChatGPT",
-  description: "AzureChatGPT",
+  title: AI_NAME,
+  description: AI_NAME,
 };
 
 export default async function RootLayout({

src/app/globals.css

@@ -6,68 +6,46 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
-
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
-
-    --brand: 210 94% 49%;
   }
 
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
     --primary-foreground: 222.2 47.4% 11.2%;
-
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
-
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 217.2 32.6% 17.5%;
-    --brand: 210 94% 49%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
   }
 }
 

src/app/layout.tsx

@@ -1,15 +1,16 @@
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { Providers } from "@/features/providers";
+import { AI_NAME } from "@/features/theme/customise";
 import { cn } from "@/lib/utils";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "AzureChatGPT",
-  description: "AzureChatGPT",
+  title: AI_NAME,
+  description: AI_NAME,
 };
 
 export default function RootLayout({

src/app/reporting/layout.tsx

@@ -1,9 +1,10 @@
 import { ProtectedPage } from "@/features/auth/protected-page";
 import { MainMenu } from "@/features/menu/menu";
+import { AI_NAME } from "@/features/theme/customise";
 
 export const metadata = {
-  title: "AzureChatGPT",
-  description: "AzureChatGPT",
+  title: AI_NAME,
+  description: AI_NAME,
 };
 
 export default async function RootLayout({

src/components/chat/chat-row.tsx

@@ -28,7 +28,7 @@ const ChatRow: FC<ChatRowProps> = (props) => {
             <Avatar>
               <AvatarImage src={props.profilePicture} />
             </Avatar>
-            <Typography variant="h5" className="capitalize">
+            <Typography variant="h5" className="capitalize text-primary">
               {props.name}
             </Typography>
           </div>

src/components/login/login.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { AI_NAME } from "@/features/theme/customise";
 import { signIn } from "next-auth/react";
 import { Avatar, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
@@ -18,9 +19,7 @@ export const LogIn = () => {
           <Avatar className="h-8 w-8">
             <AvatarImage src={"ai-icon.png"} />
           </Avatar>
-          <span>
-            Azure<span className="text-muted-foreground">ChatGPT</span>
-          </span>
+          <span className="text-primary">{AI_NAME}</span>
         </CardTitle>
         <CardDescription>
           Login in with your GitHub or Microsoft 365 account

src/components/menu.tsx

@@ -50,7 +50,7 @@ const MenuItem: React.FC<MenuItemProps> = (props) => {
       className={cn(
         props.className,
         "items-center text-sm font-medium flex gap-2 p-2 py-1 rounded-md hover:bg-secondary",
-        props.isSelected && "bg-secondary"
+        props.isSelected && "bg-secondary text-primary"
       )}
       href={props.href}
     >

src/features/chat/chat-simple/chat-simple-api.ts

@@ -1,5 +1,6 @@
 import { userHashedId } from "@/features/auth/helpers";
 import { CosmosDBChatMessageHistory } from "@/features/langchain/memory/cosmosdb/cosmosdb";
+import { AI_NAME } from "@/features/theme/customise";
 import { LangChainStream, StreamingTextResponse } from "ai";
 import { ConversationChain } from "langchain/chains";
 import { ChatOpenAI } from "langchain/chat_models/openai";
@@ -42,7 +43,7 @@ export const ChatSimple = async (props: PromptGPTProps) => {
 
   const chatPrompt = ChatPromptTemplate.fromPromptMessages([
     SystemMessagePromptTemplate.fromTemplate(
-      `-You are Azure ChatGPT who is a helpful AI Assistant.
+      `-You are ${AI_NAME} who is a helpful AI Assistant.
       - You will provide clear and concise queries, and you will respond with polite and professional answers.
       - You will answer questions truthfully and accurately.`
     ),

src/features/chat/chat-ui/chat-empty-state.tsx

@@ -37,18 +37,20 @@ export const EmptyState: FC<Prop> = (props) => {
   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">
-        <Typography variant="h4">Hello!</Typography>
+        <Typography variant="h4" className="text-primary">
+          Hello!
+        </Typography>
         <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.
         </p>
       </div>
       <Card className="col-span-3 flex flex-col gap-5 p-5 ">
-        <Typography variant="h4">Personalise</Typography>
+        <Typography variant="h4" className="text-primary">
+          Personalise
+        </Typography>
         <div className="flex flex-col gap-2">
-          <p className="text-sm text-muted-foreground">
-            Select the Azure OpenAI model
-          </p>
+          <p className="text-sm ">Select the Azure OpenAI model</p>
           <ChatModelSelector
             disable={false}
             llmModel={props.llmModel}

src/features/chat/chat-ui/chat-ui.tsx

@@ -7,6 +7,7 @@ import { useChatScrollAnchor } from "@/components/hooks/use-chat-scroll-anchor";
 import { Card } from "@/components/ui/card";
 import { ToastAction } from "@/components/ui/toast";
 import { useToast } from "@/components/ui/use-toast";
+import { AI_NAME } from "@/features/theme/customise";
 import { useChat } from "ai/react";
 import { useSession } from "next-auth/react";
 import { FC, FormEvent, useRef, useState } from "react";
@@ -124,9 +125,7 @@ export const ChatUI: FC<Prop> = (props) => {
       <div className=" pb-[80px] ">
         {messages.map((message, index) => (
           <ChatRow
-            name={
-              message.role === "user" ? session?.user?.name! : "AzureChatGPT"
-            }
+            name={message.role === "user" ? session?.user?.name! : AI_NAME}
             profilePicture={
               message.role === "user" ? session?.user?.image! : "/ai-icon.png"
             }

src/features/chat/chat-ui/start-new-chat.tsx

@@ -1,5 +1,6 @@
 import Typography from "@/components/typography";
 import { Card } from "@/components/ui/card";
+import { AI_NAME } from "@/features/theme/customise";
 import Image from "next/image";
 import { FC } from "react";
 import { NewChat } from "../chat-menu/new-chat";
@@ -13,13 +14,13 @@ export const StartNewChat: FC<Prop> = (props) => {
         <Image width={180} height={180} alt="" src="/ai-icon.png" />
       </div>
       <Card className="col-span-3 flex flex-col gap-5 p-5 ">
-        <Typography variant="h4" className="text-brand">
-          Azure ChatGPT
+        <Typography variant="h4" className="text-primary">
+          {AI_NAME}
         </Typography>
         <div className="flex flex-col gap-2">
           <p className="">
-            Welcome to Azure ChatGPT. You should interact in a friendly manner
-            with the AI assistant and refrain from participating in any harmful
+            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>

src/features/reporting/chat-reporting-ui.tsx

@@ -2,6 +2,7 @@ import ChatRow from "@/components/chat/chat-row";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FC } from "react";
+import { AI_NAME } from "../theme/customise";
 import { FindAllChatsInThread, FindChatThreadByID } from "./reporting-service";
 
 interface Props {
@@ -31,9 +32,7 @@ export const ChatReportingUI: FC<Props> = async (props) => {
         <div className=" pb-[80px] ">
           {chats.map((message, index) => (
             <ChatRow
-              name={
-                message.role === "user" ? chatThread.useName : "AzureChatGPT"
-              }
+              name={message.role === "user" ? chatThread.useName : AI_NAME}
               profilePicture={message.role === "user" ? "" : "/ai-icon.png"}
               message={message.content}
               type={message.role}

src/features/theme/customise.ts

@@ -0,0 +1 @@
+export const AI_NAME = "Azure ChatGPT";