fix: added code for citation and chat history panel independence

Author: Avijit-Microsoft

documents/AVMPostDeploymentGuide.md

@@ -35,6 +35,7 @@ Ensure the following tools are installed on your machine:
 |------|---------|---------------|
 | PowerShell | v7.0+ | [Install PowerShell](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell?view=powershell-7.5) |
 | Azure Developer CLI (azd) | v1.18.0+ | [Install azd](https://aka.ms/install-azd) |
+| Bicep CLI | v0.33.0+ | [Install Bicep](https://learn.microsoft.com/azure/azure-resource-manager/bicep/install) |
 | Python | 3.9+ | [Download Python](https://www.python.org/downloads/) |
 | Docker Desktop | Latest | [Download Docker](https://www.docker.com/products/docker-desktop/) |
 | Git | Latest | [Download Git](https://git-scm.com/downloads) |

documents/DeploymentGuide.md

@@ -162,6 +162,7 @@ Select one of the following options to deploy the Conversational Knowledge Minin
 **Required Tools:**
 - [PowerShell 7.0+](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell) 
 - [Azure Developer CLI (azd) 1.18.0+](https://aka.ms/install-azd)
+- [Bicep CLI 0.33.0+](https://learn.microsoft.com/azure/azure-resource-manager/bicep/install)
 - [Python 3.9+](https://www.python.org/downloads/)
 - [Docker Desktop](https://www.docker.com/products/docker-desktop/)
 - [Git](https://git-scm.com/downloads)

src/App/src/App.css

@@ -50,6 +50,13 @@ body {
   font-weight: 400;
 }
 
+.citation-panel-wrapper {
+  flex: 0 0 20%;
+  min-width: 280px;
+  max-width: 400px;
+  margin-block: var(--margin-base);
+}
+
 .left-section {
   position: relative;
   margin-block-end: 0.1% !important;

src/App/src/App.tsx

@@ -153,7 +153,6 @@ const Dashboard: React.FC = () => {
 
   const onHandlePanelStates = useCallback(
     (panelName: string) => {
-      dispatch(hideCitation());
       setLayoutWidthUpdated((previousFlag) => !previousFlag);
       const nextState = {
         ...panelShowStates,
@@ -170,7 +169,7 @@ const Dashboard: React.FC = () => {
       updateLayoutWidths(nextState);
       setPanelShowStates(nextState);
     },
-    [dispatch, panelShowStates, updateLayoutWidths]
+    [panelShowStates, updateLayoutWidths]
   );
 
   const getHistoryListData = useCallback(async () => {
@@ -303,15 +302,6 @@ const Dashboard: React.FC = () => {
             />
           </div>
         )}
-        {showCitation && currentConversationIdForCitation !== "" && (
-          <div
-            style={{
-              width: `${panelWidths[panels.CHATHISTORY] || 17}%`,
-            }}
-          >
-            <CitationPanel activeCitation={activeCitation} />
-          </div>
-        )}
         {panelShowStates[panels.CHAT] &&
           panelShowStates[panels.CHATHISTORY] && (
             <div
@@ -331,6 +321,11 @@ const Dashboard: React.FC = () => {
               />
             </div>
           )}
+        {showCitation && currentConversationIdForCitation !== "" && (
+          <div className="citation-panel-wrapper">
+            <CitationPanel activeCitation={activeCitation} />
+          </div>
+        )}
       </div>
     </FluentProvider>
   );