Merge pull request #87 from microsoft/ui-changes

UI changes

docs/6-chat-over-file.md

@@ -2,10 +2,23 @@
 
 Users can utilise this functionality to upload their PDF files through the portal and engage in chat discussions related to the content of those files.
 
-Chat with your data utilises the following two Azure Services:
+Chat with your data utilises the following Azure Services:
 
 1. [Azure Document Intelligence](https://learn.microsoft.com/en-GB/azure/ai-services/document-intelligence/) for extracting information from documents.
 1. [Azure Cognitive Search](https://learn.microsoft.com/en-GB/azure/search/) for indexing and retrieving information.
+1. [Azure OpenAI Embeddings](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/embeddings?tabs=console) for embed content extracted from files
+
+### Azure OpenAI Embeddings
+
+We use Azure OpenAI Embeddings to convert text to vectors and index it in Azure Cognitive Search.
+
+update the OpenAI environment variables with the following:
+
+```
+AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME=
+```
+
+When deploying to Azure, ensure to update the Azure App service app settings with AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME
 
 ### Setup Azure Cognitive Search index and Document Intelligence
 

src/.env.example

@@ -6,6 +6,7 @@ AZURE_OPENAI_API_KEY=
 AZURE_OPENAI_API_INSTANCE_NAME=
 AZURE_OPENAI_API_DEPLOYMENT_NAME=
 AZURE_OPENAI_API_VERSION=2023-03-15-preview
+AZURE_OPENAI_API_EMBEDDINGS_DEPLOYMENT_NAME=
 
 # You must have atleast one of the following auth providers configured
 AUTH_GITHUB_ID=

src/app/chat/page.tsx

@@ -1,6 +1,6 @@
 import { Card } from "@/components/ui/card";
-import { NewChat } from "@/features/chat/chat-menu/new-chat";
 import { FindAllChatThreadForCurrentUser } from "@/features/chat/chat-services/chat-thread-service";
+import { StartNewChat } from "@/features/chat/chat-ui/start-new-chat";
 import { redirect } from "next/navigation";
 
 export default async function Home() {
@@ -11,7 +11,7 @@ export default async function Home() {
 
   return (
     <Card className="h-full items-center flex justify-center">
-      <NewChat></NewChat>
+      <StartNewChat />
     </Card>
   );
 }

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

@@ -0,0 +1,33 @@
+import Typography from "@/components/typography";
+import { Card } from "@/components/ui/card";
+import Image from "next/image";
+import { FC } from "react";
+import { NewChat } from "../chat-menu/new-chat";
+
+interface Prop {}
+
+export const StartNewChat: 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">
+        <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>
+        <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
+            activities.
+          </p>
+          <p>You can start a new chat with me by clicking the button below.</p>
+        </div>
+        <div className="-mx-5 -mb-5 p-5 flex flex-col border-t bg-muted">
+          <NewChat />
+        </div>
+      </Card>
+    </div>
+  );
+};