UI - feedbackpoints fixed (#16858) and code cleanup

Author: Bangarraju-Microsoft

src/ContentProcessorWeb/src/App.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { useEffect } from "react";
 import Header from "./Components/Header/Header.tsx"; // Import Header
 import "./Styles/App.css";
-import "./Components/Content/Content.css";
 import HomePage from "./Pages/HomePage.tsx";
 import DefaultPage from "./Pages/DefaultPage";
 //import AuxiliaryPage from "./Pages/AuxiliaryPage/AuxiliaryPage.tsx";

src/ContentProcessorWeb/src/Components/Content/Content.css

@@ -10,19 +10,8 @@ import {
   useId,
 } from "@fluentui/react-components";
 
-interface FooterButton {
-  text: string;
-  appearance: "primary" | "secondary";
-  onClick: () => void;
-}
+import { ConfirmationProps } from './DialogComponentTypes'
 
-interface ConfirmationProps {
-  title: string;
-  content: string;
-  isDialogOpen: boolean; // Controlled state for dialog visibility
-  onDialogClose: () => void; // Function to close the dialog
-  footerButtons: FooterButton[]; // Array of footer buttons
-}
 
 export const Confirmation: React.FC<ConfirmationProps> = ({
   title,

src/ContentProcessorWeb/src/Components/Content/Content.tsx

@@ -0,0 +1,16 @@
+
+import { ReactNode } from 'react';
+
+interface FooterButton {
+  text: string;
+  appearance: "primary" | "secondary";
+  onClick: () => void;
+}
+
+export interface ConfirmationProps {
+  title: string;
+  content: string | ReactNode;
+  isDialogOpen: boolean; // Controlled state for dialog visibility
+  onDialogClose: () => void; // Function to close the dialog
+  footerButtons: FooterButton[]; // Array of footer buttons
+}

src/ContentProcessorWeb/src/Components/DialogComponent/DialogComponent.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Document } from "./DocumentViewer.types";
 import { TIFFViewer } from 'react-tiff';
 import './DocumentViewer.styles.scss';
 
@@ -107,7 +106,7 @@ const DocumentViewer = ({ className, metadata, urlWithSasToken, iframeKey }: IIF
             <div className={"invalidImagePopup"}>
                 <span className="imgEH">We can't open this file</span>
                 <p className="imgCtn">Something went wrong.</p>
-                 </div>
+            </div>
             : getContentComponent()
         }
     </div>

src/ContentProcessorWeb/src/Components/DialogComponent/DialogComponentTypes.ts

@@ -26,7 +26,7 @@ import {
 } from "../../Imports/bundleIcons.tsx";
 import MainLogo from "../../Imports/MainLogo.svg";
 import "./Header.css";
-import { DocumentBulletListCubeRegular, InfoRegular} from "@fluentui/react-icons"
+import { DocumentBulletListCubeRegular, InfoRegular, DocumentData16Regular } from "@fluentui/react-icons"
 
 import useAuth from "../../msal-auth/useAuth.ts";
 
@@ -41,6 +41,12 @@ const tabConfigs = [
     value: "default", // Route path defined in App.tsx
     label: "Content", // Visible label on UI
   },
+
+  {
+    icon: <DocumentBulletListCubeRegular />, // Import bundle icon
+    value: "api", // Route path defined in App.tsx
+    label: "API Documentation", // Visible label on UI
+  },
   // Add more
 ];
 
@@ -69,12 +75,18 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
     _: React.SyntheticEvent,
     data: { value: TabValue }
   ) => {
-    const newRoute = Object.keys(tabRoutes).find(
-      (key) => tabRoutes[key] === data.value
-    );
-    if (newRoute) {
-      navigate(newRoute);
+    if (data.value == 'api') {
+      _.preventDefault(); // Prevents the default anchor click behavior
+      window.open(process.env.REACT_APP_API_BASE_URL + "/docs", '_blank', 'noopener noreferrer');
+    } else {
+      const newRoute = Object.keys(tabRoutes).find(
+        (key) => tabRoutes[key] === data.value
+      );
+      if (newRoute) {
+        navigate(newRoute);
+      }
     }
+
   };
 
 
@@ -100,8 +112,8 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
         </TabList>
       </div>
       <div className="headerTag">
-      <InfoRegular style={{ marginRight: "4px" }}/> 
-      <span>AI-generated content may be incorrect</span>
+        <InfoRegular style={{ marginRight: "4px" }} />
+        <span>AI-generated content may be incorrect</span>
       </div>
 
       {/* Tools Section */}