Merge branch 'main' into dependabot/npm_and_yarn/code/app/frontend/vi…

…te-4.5.2

.env.sample

@@ -49,4 +49,4 @@ ORCHESTRATION_STRATEGY=openai_functions
 #Speech-to-text feature
 AZURE_SPEECH_SERVICE_KEY=
 AZURE_SPEECH_SERVICE_REGION=
-AZURE_AUTH_TYPE=rbac
+AZURE_AUTH_TYPE=rbac

.github/workflows/unittests.yml

@@ -0,0 +1,25 @@
+name: Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  workflow_call:
+
+jobs:
+  test_package:
+    name: Unit Tests
+    runs-on: "ubuntu-20.04"
+    steps:
+        - uses: actions/checkout@v4
+        - name: Setup python
+          uses: actions/setup-python@v5
+          with:
+            python-version: "3.11"
+            architecture: x64
+        - name: Install dependencies
+          run: |
+            pip install -r code/requirements.txt
+        - name: Run Python tests
+          run: python -m pytest --rootdir=code -m "not azure"

README.md

@@ -96,7 +96,8 @@ Learn more about deploying the Teams extension [here](./docs/TEAMS_EXTENSION.md)
 ![One-click Deploy](/media/oneClickDeploy.png)
 ## One-click deploy
 ### Pre-requisites 
-* An [Azure OpenAI resource](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal) and a deployment for one of the following Chat model and an embedding model:
+- Azure subscription - [Create one for free](https://azure.microsoft.com/free/) with owner access.
+- An [Azure OpenAI resource](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal) and a deployment for one of the following Chat model and an embedding model:
     * Chat Models
        * GPT-3.5
        * GPT-4
@@ -105,7 +106,6 @@ Learn more about deploying the Teams extension [here](./docs/TEAMS_EXTENSION.md)
 
   **Note**: The deployment template defaults to **gpt-35-turbo** and **text-embedding-ada-002**. If your deployment names are different, update them in the deployment process.
 
-- Azure subscription - [Create one for free](https://azure.microsoft.com/free/) with contributor access.
 - [Visual Studio Code](https://code.visualstudio.com/)
     - Extensions
         - [Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions)

code/app/app.py

@@ -61,7 +61,7 @@ def get_config():
 AZURE_OPENAI_API_VERSION = os.environ.get("AZURE_OPENAI_API_VERSION", "2023-06-01-preview")
 AZURE_OPENAI_STREAM = os.environ.get("AZURE_OPENAI_STREAM", "true")
 AZURE_OPENAI_MODEL_NAME = os.environ.get("AZURE_OPENAI_MODEL_NAME", "gpt-35-turbo") # Name of the model, e.g. 'gpt-35-turbo' or 'gpt-4'
-AZURE_AUTH_TYPE = os.environ.get("AZURE_AUTH_TYPE", "rbac")
+AZURE_AUTH_TYPE = os.environ.get("AZURE_AUTH_TYPE", "keys")
 
 SHOULD_STREAM = True if AZURE_OPENAI_STREAM.lower() == "true" else False
 

code/app/frontend/src/components/Answer/Answer.module.css

@@ -7,6 +7,7 @@
     background: #FFFFFF;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
     border-radius: 5.419px;
+    max-width: 100%;
 }
 
 .answerText {
@@ -29,11 +30,9 @@
 
 .answerFooter {
     display: flex;
-    flex-flow: row nowrap;
+    flex-direction: column;
     width: 100%;
-    height: auto;
     box-sizing: border-box;
-    justify-content: space-between;
 }
 
 .answerDisclaimerContainer {
@@ -47,7 +46,9 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
-
+    margin-right: 5px;
+    margin-left: 10px;
+    padding-bottom:5px;
     display: flex;
     align-items: center;
     text-align: center;
@@ -64,7 +65,7 @@
     font-weight: 600;
     font-size: 12px;
     line-height: 16px;
-
+    max-width: 100%;
     color: #115EA3;
     display: flex;
     flex-direction: row;
@@ -174,4 +175,16 @@
 sup {
     font-size: 10px;
     line-height: 10px;
-}
+}
+
+
+@media (max-width: 500px) {
+    .answerFooter {
+      flex-direction: column; 
+    }
+
+    .citationContainer {
+        width: 100%;
+        overflow-y: auto;
+    }
+  }

code/app/frontend/src/components/Answer/Answer.tsx

@@ -14,15 +14,19 @@ import supersub from 'remark-supersub'
 interface Props {
     answer: AskResponse;
     onCitationClicked: (citedDocument: Citation) => void;
+    index: number;
 }
 
 export const Answer = ({
     answer,
-    onCitationClicked
+    onCitationClicked,
+    index,
 }: Props) => {
     const [isRefAccordionOpen, { toggle: toggleIsRefAccordionOpen }] = useBoolean(false);
     const filePathTruncationLimit = 50;
 
+    const messageBoxId = "message-" + index;
+
     const parsedAnswer = useMemo(() => parseAnswer(answer), [answer]);
     const [chevronIsExpanded, setChevronIsExpanded] = useState(isRefAccordionOpen);
 
@@ -57,23 +61,28 @@ export const Answer = ({
         const handleCopy = () => {
             alert("Please consider where you paste this content.");
         };
-        document.addEventListener("copy", handleCopy);
+        const messageBox = document.getElementById(messageBoxId);
+        messageBox?.addEventListener("copy", handleCopy);
         return () => {
-            document.removeEventListener("copy", handleCopy);
+            messageBox?.removeEventListener("copy", handleCopy);
         };
     }, []);
 
     return (
         <>
-            <Stack className={styles.answerContainer}>
+            <Stack className={styles.answerContainer} id={messageBoxId}>
                 <Stack.Item grow>
                     <ReactMarkdown
                         remarkPlugins={[remarkGfm, supersub]}
                         children={parsedAnswer.markdownFormatText}
                         className={styles.answerText}
                     />
                 </Stack.Item>
-                <Stack horizontal className={styles.answerFooter}>
+                <Stack horizontal className={styles.answerFooter} verticalAlign="start">
+                <Stack.Item className={styles.answerDisclaimerContainer}>
+                    <span className={`${styles.answerDisclaimer} ${styles.mobileAnswerDisclaimer}`}>AI-generated content may be incorrect</span>
+                </Stack.Item>
+
                 {!!parsedAnswer.citations.length && (
                     <Stack.Item aria-label="References">
                         <Stack style={{width: "100%"}} >
@@ -92,12 +101,10 @@ export const Answer = ({
                         </Stack>
                     </Stack.Item>
                 )}
-                <Stack.Item className={styles.answerDisclaimerContainer}>
-                    <span className={styles.answerDisclaimer}>AI-generated content may be incorrect</span>
-                </Stack.Item>
+
                 </Stack>
                 {chevronIsExpanded && 
-                    <div style={{ marginTop: 8, display: "flex", flexFlow: "wrap column", maxHeight: "150px", gap: "4px" }}>
+                    <div style={{ marginTop: 8, display: "flex", flexDirection: "column", height: "100%", gap: "4px", maxWidth: "100%" }}>
                         {parsedAnswer.citations.map((citation, idx) => {
                             return (
                                 <span title={createCitationFilepath(citation, ++idx)} key={idx} onClick={() => onCitationClicked(citation)} className={styles.citationContainer}>

code/app/frontend/src/pages/chat/Chat.module.css

@@ -248,3 +248,57 @@
     align-self: stretch;
     flex-grow: 0;
 } 
+
+.MobileChatContainer{
+    @media screen and (max-width: 600px)  {
+        max-width: 100%;
+        margin: 0 auto;
+        padding: 8px;
+
+      }
+}
+
+.mobileStyles {
+    @media screen and (max-width: 600px)  {
+        max-width: 100%;
+        flex-grow: 1; 
+        max-height: 100vh;
+    }
+  }
+
+  .mobileclearChatBroom{
+      @media screen and (max-width: 600px)  {
+        left: -30px;
+
+      }
+    }
+
+    .mobileCitationPanelTitle{
+        @media screen and (max-width: 600px)  {
+            font-weight: 400;
+            font-size: 12px;
+            margin-top: 8px;
+            margin-bottom: 8px;
+
+          }
+    }
+
+    .mobileCitationPanelContent{
+        @media screen and (max-width: 600px){
+            font-weight: 250;
+            font-size: 11px;
+
+        } 
+    }
+
+    @media screen and (max-width: 600px){
+        h1{
+            font-weight: 300;
+            font-size: 14px;
+        }
+
+        h2{
+            font-weight: 300;
+            font-size: 12px;
+        }
+     }

code/app/frontend/src/pages/chat/Chat.tsx

@@ -265,7 +265,7 @@ const Chat = () => {
   return (
     <div className={styles.container}>
       <Stack horizontal className={styles.chatRoot}>
-        <div className={styles.chatContainer}>
+        <div className={`${styles.chatContainer} ${styles.MobileChatContainer}`}>
           {!lastQuestionRef.current ? (
             <Stack className={styles.chatEmptyState}>
               <img src={Azure} className={styles.chatIcon} aria-hidden="true" />
@@ -302,6 +302,7 @@ const Chat = () => {
                               : [],
                         }}
                         onCitationClicked={(c) => onShowCitation(c)}
+                        index={index}
                       />
                     </div>
                   ) : null}
@@ -356,7 +357,7 @@ const Chat = () => {
               </Stack>
             )}
             <BroomRegular
-              className={styles.clearChatBroom}
+              className={`${styles.clearChatBroom} ${styles.mobileclearChatBroom}`}
               style={{
                 background:
                   isLoading || answers.length === 0
@@ -387,7 +388,7 @@ const Chat = () => {
           </Stack>
         </div>
         {answers.length > 0 && isCitationPanelOpen && activeCitation && (
-          <Stack.Item className={styles.citationPanel}>
+          <Stack.Item className={`${styles.citationPanel} ${styles.mobileStyles}`}>
             <Stack
               horizontal
               className={styles.citationPanelHeaderContainer}
@@ -400,9 +401,9 @@ const Chat = () => {
                 onClick={() => setIsCitationPanelOpen(false)}
               />
             </Stack>
-            <h5 className={styles.citationPanelTitle}>{activeCitation[2]}</h5>
+            <h5 className={`${styles.citationPanelTitle} ${styles.mobileCitationPanelTitle}`}>{activeCitation[2]}</h5>
             <ReactMarkdown
-              className={styles.citationPanelContent}
+              className={`${styles.citationPanelContent} ${styles.mobileCitationPanelContent}`}
               children={activeCitation[0]}
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeRaw]}

code/requirements.txt

@@ -25,4 +25,4 @@ pandas==1.5.1
 python-docx==1.1.0
 
 # Add dev dependencies here - this will be refactored out by Poetry
-pytest==7.4.4
+pytest==8.0.0

docs/TEAMS_EXTENSION.md

@@ -14,7 +14,6 @@ This extension enables users to experience Chat with your data within Teams, wit
 **IMPORTANT**: Before you proceed, installation and configuration of the [Chat with your data with speech-to-text deployment](../README.md) is required.
 
 ### Pre-requisites 
-- Azure subscription - [Create one for free](https://azure.microsoft.com/free/) with contributor access.
 - [Visual Studio Code](https://code.visualstudio.com/)
     - Extensions
         - [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) (optional: Teams extension only)
@@ -24,7 +23,7 @@ This extension enables users to experience Chat with your data within Teams, wit
 - In order to publish the App to the Teams Store, the Teams Administrator role is required. 
 
 ### Deploy backend Azure Function
-<!-- TODO: Updated prior to PR -->
+
 [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2Fchat-with-your-data-solution-accelerator%2Fmain%2Fextensions%2Finfrastructure%2Fmain.json)
 
 Note: The (p) suffix on the App Setting (below) means that you should use the same resources and services deployed during the [Chat with your data with speech-to-text deployment](../README.md)
@@ -34,9 +33,9 @@ Note: The (p) suffix on the App Setting (below) means that you should use the sa
 |Resource group | The resource group that will contain the resources for this accelerator. You can select Create new to create a new group or use the existing resource group created with [Speech-to-text deployment](#speech-to-text-deployment). |
 |Resource prefix | A text string that will be appended to each resource that gets created, and used as the website name for the web app. This name cannot contain spaces or special characters. |
 |App Insights Connection String (p) | The Application Insights connection string to store the application logs. |
-|Azure Cognitive Search (p) | The **name** of your Azure Cognitive Search resource. e.g. https://<**name**>.search.windows.net. |
-|Azure Search Index (p) | The name of your Azure Cognitive Search Index. |
-|Azure Search Key (p) | An admin key for your Azure Cognitive Search resource. |
+|Azure AI Search (p) | The **name** of your Azure AI Search resource. e.g. https://<**name**>.search.windows.net. |
+|Azure Search Index (p) | The name of your Azure AI Search Index. |
+|Azure Search Key (p) | An admin key for your Azure AI Search resource. |
 |Azure OpenAI resource (p) | The name of your Azure OpenAI resource. This resource must have already been created previously. |
 |Azure OpenAI key (p) | The access key is associated with your Azure OpenAI resource. |
 |Orchestration strategy (p) | Use Azure OpenAI Functions (openai_functions) or LangChain (langchain) for messages orchestration. If you are using a new model version 0613 select "openai_functions" (or "langchain"), if you are using a model version 0314 select "langchain". |

extensions/infrastructure/main.bicep

@@ -31,16 +31,16 @@ param HostingPlanSku string = 'B3'
 @secure()
 param AppInsightsConnectionString string
 
-@description('Azure Cognitive Search Resource - Created during the "Chat with your data" Solution Accelerator')
-param AzureCognitiveSearch string
+@description('Azure AI Search Resource - Created during the "Chat with your data" Solution Accelerator')
+param AzureSearchName string
 
-@description('Azure Cognitive Search Index - Created during the "Chat with your data" Solution Accelerator')
+@description('Azure AI Search Index - Created during the "Chat with your data" Solution Accelerator')
 param AzureSearchIndex string
 
-@description('Azure Cognitive Search Conversation Log Index - Created during the "Chat with your data" Solution Accelerator')
+@description('Azure AI Search Conversation Log Index - Created during the "Chat with your data" Solution Accelerator')
 param AzureSearchConversationLogIndex string = 'conversations'
 
-@description('Azure Cognitive Search Key - Created during the "Chat with your data" Solution Accelerator')
+@description('Azure AI Search Key - Created during the "Chat with your data" Solution Accelerator')
 @secure()
 param AzureSearchKey string
 
@@ -154,7 +154,7 @@ resource Function 'Microsoft.Web/sites@2018-11-01' = {
         { name: 'FUNCTIONS_EXTENSION_VERSION', value: '~4'}
         { name: 'WEBSITES_ENABLE_APP_SERVICE_STORAGE', value: 'false'}
         { name: 'APPINSIGHTS_CONNECTION_STRING', value: AppInsightsConnectionString}
-        { name: 'AZURE_SEARCH_SERVICE', value: 'https://${AzureCognitiveSearch}.search.windows.net'}
+        { name: 'AZURE_SEARCH_SERVICE', value: 'https://${AzureSearchName}.search.windows.net'}
         { name: 'AZURE_SEARCH_INDEX', value: AzureSearchIndex}
         { name: 'AZURE_SEARCH_CONVERSATIONS_LOG_INDEX', value: AzureSearchConversationLogIndex}
         { name: 'AZURE_SEARCH_KEY', value: AzureSearchKey}