Merge branch 'microsoft:main' into main

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Next.js: debug server-side",
+        "type": "node-terminal",
+        "request": "launch",
+        "cwd": "${workspaceFolder}/src",
+        "command": "npm run dev"
+      },
+      {
+        "name": "Next.js: debug client-side",
+        "type": "chrome",
+        "request": "launch",
+        "cwd": "${workspaceFolder}/src",
+        "url": "http://localhost:3000"
+      },
+      {
+        "name": "Next.js: debug full stack",
+        "type": "node-terminal",
+        "request": "launch",
+        "cwd": "${workspaceFolder}/src",
+        "command": "npm run dev",
+        "serverReadyAction": {
+          "pattern": "started server on .+, url: (https?://.+)",
+          "uriFormat": "%s",
+          "action": "debugWithChrome"
+        }
+      }
+    ]
+  }

docs/5-add-Identity.md

@@ -78,4 +78,4 @@ AZURE_AD_CLIENT_SECRET=
 AZURE_AD_TENANT_ID=
 ```
 
-[Next](/docs/5-add-Identity.md)
+[Next](/docs/6-chat-over-file.md)

docs/6-chat-over-file.md

@@ -90,24 +90,24 @@ AZURE_SEARCH_INDEX_NAME=
 AZURE_SEARCH_API_VERSION="2023-07-01-Preview"
 ```
 
-3. Create Azure Document intelligence using the following [link](https://learn.microsoft.com/en-us/azure/ai-services/document-intelligence/create-document-intelligence-resource?view=doc-intel-3.1.0)
+3. Create an instance of Azure Form Recognizer (also known as Azure Document Intelligence) using the following [link](https://learn.microsoft.com/en-us/azure/ai-services/document-intelligence/create-document-intelligence-resource?view=doc-intel-3.1.0). Please be aware that this resource might be called *Form recognizer* in Azure Portal.
 
-4. After the Document intelligence has been created, proceed to modify the env.local file with the appropriate Document intelligence environment variables.
+4. After the Form Recognizer (Document Intelligence) resource has been created, proceed to modify the `env.local` file with appropriate environment variables. You can find values for these variables in your _Form Recognizer_ resource (Resource Management blade > Keys and Endpoint). Please make sure that you don't copy the endpoint from there, but only replace the region in the example below. For example, if your Form Recognizer resource is located in East US Azure region, your `AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT` variable would be `https://eastus.api.cognitive.microsoft.com/`.
 
-Note that the file is only preserved for each chat thread
-
-```
-# Azure AI Document Intelligence to extract content from your data
-AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT="https://REGION.api.cognitive.microsoft.com/"
-AZURE_DOCUMENT_INTELLIGENCE_KEY=
-```
-
-4. At this point, you have the capability to generate a new chat session with opting for the `file chat` type. Click on the upload button to to start uploading a PDF file.
-5. Upon the successful completion of the file upload, you are now able to commence the conversation using the provided text box.
+   Please note that the file is only preserved for each chat thread:
+      ```
+      # Azure AI Document Intelligence to extract content from your data
+      AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT="https://REGION.api.cognitive.microsoft.com/"
+      AZURE_DOCUMENT_INTELLIGENCE_KEY=
+      ```
+5. At this point, you should be able to start new chat sessions with the `File` option.
+   ![](/images/personalise-session.png)
+7. Once the `File` chat option is selected, click the `Choose File` button to select your document and then click the `Upload` button to upload your file. Please note that the Form Recognizer service supports PDF (text or scanned), JPG and PNG input documents.
+8. Once you receive a notification about a successful file upload, you should be able to start chatting with chatting with a chatbot.
 
 ### Things to consider:
 
-1. Central place maintain uploaded files
+1. Central place maintain uploaded files (e.g a storage account with blob storage)
 2. A way to delete indexed documents on Azure Cognitive Search if the chat thread is deleted
 
 [Next](/docs/7-environment-variables.md)

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

@@ -20,7 +20,9 @@ interface Prop {
 }
 
 export const EmptyState: FC<Prop> = (props) => {
+
   const [showFileUpload, setShowFileUpload] = useState<ChatType>("simple");
+  const [isFileNull, setIsFileNull] = useState(true);
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -31,24 +33,27 @@ export const EmptyState: FC<Prop> = (props) => {
 
   const onChatTypeChange = (value: ChatType) => {
     setShowFileUpload(value);
+    setIsFileNull(true);
     props.onChatTypeChange(value);
   };
 
   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}
@@ -85,11 +90,12 @@ export const EmptyState: FC<Prop> = (props) => {
                 required
                 disabled={props.isUploadingFile}
                 placeholder="Describe the purpose of the document"
+                onChange={(e) => {setIsFileNull(e.currentTarget.value === null)}}
               />
               <Button
                 type="submit"
                 value="Upload"
-                disabled={props.isUploadingFile}
+                disabled={!(!isFileNull && !props.isUploadingFile)}
                 className="flex items-center gap-1"
               >
                 {props.isUploadingFile ? (

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/langchain/vector-stores/azure-cog-search/azure-cog-vector-store.ts

@@ -133,6 +133,13 @@ export class AzureCogSearch<
       });
     });
 
+    // run through indexes and if the id has _ then remove it
+    indexes.forEach((index) => {
+      if (index.id.includes("_")) {
+        index.id = index.id.replace("_", "");
+      }
+    });
+
     const documentIndexRequest: DocumentSearchResponseModel<TModel> = {
       value: indexes,
     };

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