Fix UI white space issues and chat section layout

- Fixed chat section white space on right side by updating chatRoom.module.scss
- Made OptionsPanel responsive with proper width constraints
- Fixed HTTP client response consumption error using response.clone()
- Resolved TypeScript compilation errors for React 19
- Updated DocDialog component signature for proper JSX usage
- Improved chat container layout and removed excessive padding
- Enhanced error handling with proper translation support

Author: Vemarthula-Microsoft

App/frontend-app/package-lock.json

@@ -28,6 +28,8 @@
             "Search Results": "Search Results",
             "selected-documents": "Selected Documents",
             "fetching-answer": "Fetching answer, please wait...",
+            "error-response": "Sorry, I received an invalid response. Please try asking your question again.",
+            "error-occurred": "Sorry, an error occurred while processing your request. Please try again later.",
             "test-markdown": "# Dog Breed Comparison: Fluffy Golden Dog vs. Beagle\n\n## Fluffy Golden Dog\n- **Appearance**: Small, light-colored with a fluffy golden coat. Notable features include large brown eyes and prominent ears, one perked and one flopped.\n- **Temperament**: Curious and attentive, suggesting a friendly and engaging personality. The dog's posture indicates comfort and familiarity with its environment.\n- **Collar**: Wears a blue and purple collar with a red identification tag, indicating it is a pet with a caring owner.\n- **Environment**: Typically found in cozy indoor settings, reflecting a strong bond with human companions.\n\n## Beagle\n- **Appearance**: Medium-sized dog with a short, smooth coat that can come in various colors, including tri-color (black, white, and brown). Beagles have long ears and a distinctively expressive face.\n- **Temperament**: Known for being friendly, curious, and energetic. Beagles are often social and enjoy being part of family activities.\n- **Collar**: Commonly wear collars for identification, but styles vary widely.\n- **Environment**: Adaptable to both indoor and outdoor settings, Beagles thrive in active households where they can explore and play.\n\n## Summary\nWhile the fluffy golden dog is characterized by its small size, fluffy coat, and cozy indoor demeanor, the Beagle is a medium-sized, energetic breed known for its short coat and love for outdoor activities. Both breeds exhibit friendly and curious temperaments, making them great companions, but they differ in size, coat type, and typical living environments.",
             "new-topic": "New Topic",
             "input-placeholder": "Ask a question or request (ctrl + enter to submit)"

App/frontend-app/public/locales/en/translation.json

@@ -10,9 +10,18 @@ import { httpClient } from "../utils/httpClient/httpClient";
 
 export async function Completion(request: ChatRequest): Promise<ChatApiResponse> {
     try {
+      // Get API endpoint with fallback
+      const apiEndpoint = import.meta.env.VITE_API_ENDPOINT || window.location.origin;
+      
+      if (!apiEndpoint) {
+        throw new Error('API endpoint not configured. Please check your environment variables.');
+      }
+
+      console.log('Making API request to:', `${apiEndpoint}/chat`);
+      
       // Assuming httpClient is similar to Axios, we pass the request body and expect a ChatApiResponse
       const response: ChatApiResponse = await httpClient.post(
-        `${import.meta.env.VITE_API_ENDPOINT}/chat`, 
+        `${apiEndpoint}/chat`, 
         request,
         {
             headers: {
@@ -25,13 +34,34 @@ export async function Completion(request: ChatRequest): Promise<ChatApiResponse>
       return response;
     } catch (error) {
       console.error('Error during API request:', error);
-      throw new Error('Failed to fetch the API response.');
+      throw new Error(`Failed to fetch the API response: ${error instanceof Error ? error.message : String(error)}`);
     }
   }
 
 
-export async function PostFeedback(request: FeedbackRequest){
-    const response: boolean = await httpClient.post(`${window.ENV.API_URL}/api/Chat/Feedback`, request);
+export async function PostFeedback(request: FeedbackRequest): Promise<boolean> {
+    try {
+        // Get API endpoint with fallback
+        const apiEndpoint = import.meta.env.VITE_API_ENDPOINT || window.location.origin;
+        
+        if (!apiEndpoint) {
+            throw new Error('API endpoint not configured. Please check your environment variables.');
+        }
 
-    return response;
+        console.log('Making feedback API request to:', `${apiEndpoint}/api/Chat/Feedback`);
+        
+        const response: boolean = await httpClient.post(
+            `${apiEndpoint}/api/Chat/Feedback`, 
+            request,
+            {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }
+        );
+        return response;
+    } catch (error) {
+        console.error('Error during feedback submission:', error);
+        throw new Error(`Failed to submit feedback: ${error instanceof Error ? error.message : String(error)}`);
+    }
 }

App/frontend-app/src/api/chatService.ts

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function AzureIcon({ className }: { className?: string }): JSX.Element {
+export function AzureIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path

App/frontend-app/src/assets/icons/azureIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function GitHubIcon({ className }: { className?: string }): JSX.Element {
+export function GitHubIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="M12 .3a11.97 11.97 0 0 1 6.05 1.63c.88.53 1.69 1.16 2.42 1.88.74.72 1.37 1.53 1.89 2.42a12.08 12.08 0 0 1-.62 13.08c-.73 1-1.6 1.88-2.6 2.63a11.8 11.8 0 0 1-3.45 1.76h-.1a.6.6 0 0 1-.45-.16.59.59 0 0 1-.16-.43v-3.29c0-.4-.05-.8-.17-1.21-.11-.4-.33-.75-.63-1.02.9-.1 1.7-.29 2.38-.55a4.6 4.6 0 0 0 2.74-2.88 8.2 8.2 0 0 0 .35-2.49 4.85 4.85 0 0 0-1.23-3.22 3.37 3.37 0 0 0 .25-1.38 4.37 4.37 0 0 0-.37-1.8.34.34 0 0 0-.12-.02h-.13c-.25 0-.51.04-.79.12-.27.08-.54.18-.8.3A10.73 10.73 0 0 0 15 6.5a11.07 11.07 0 0 0-6 0 12.97 12.97 0 0 0-1.44-.82 7.35 7.35 0 0 0-.82-.3 2.7 2.7 0 0 0-.79-.13h-.13c-.04 0-.09 0-.12.02a5.94 5.94 0 0 0-.37 1.8 4.27 4.27 0 0 0 .25 1.38 4.6 4.6 0 0 0-1.23 3.22c0 .95.11 1.78.34 2.47a4.56 4.56 0 0 0 2.74 2.9c.68.28 1.47.47 2.38.56a2 2 0 0 0-.52.73c-.11.28-.2.57-.24.88a3.22 3.22 0 0 1-1.37.31c-.5 0-.92-.11-1.25-.35a3.4 3.4 0 0 1-.88-.96 3.38 3.38 0 0 0-.77-.84 2.13 2.13 0 0 0-.5-.28c-.18-.07-.37-.11-.57-.12h-.14a.44.44 0 0 0-.17.03l-.17.07c-.05.03-.07.07-.07.12 0 .1.06.18.17.27l.27.21.03.03a6.17 6.17 0 0 1 .8.76c.1.14.2.29.27.44l.27.55c.26.61.64 1.05 1.11 1.33a3.5 3.5 0 0 0 1.72.42 5.32 5.32 0 0 0 1.22-.14v2.04a.6.6 0 0 1-.16.44c-.11.11-.26.17-.46.17h-.1a11.55 11.55 0 0 1-6.05-4.38A12.17 12.17 0 0 1 .43 9.1c.28-1.03.69-1.98 1.22-2.86.53-.89 1.16-1.7 1.88-2.43.71-.73 1.52-1.36 2.42-1.89A12.08 12.08 0 0 1 12 .3z" />

App/frontend-app/src/assets/icons/gitHubLogoIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function MailIcon({ className }: { className?: string }): JSX.Element {
+export function MailIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z" />

App/frontend-app/src/assets/icons/mailIcon.tsx

@@ -1,6 +1,10 @@
 .options-panel-container {
     padding-bottom: 20px; /* Add more padding below the toggle */
     margin-top: 2px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .options-panel-container.sticky {
@@ -25,7 +29,8 @@
     position: relative;
     background-color: #ffffff;
     border-radius: 9999px;
-    width: 300px;
+    width: 100%;
+    max-width: 320px;
     height: 40px;
     display: flex;
     align-items: center;

App/frontend-app/src/components/chat/OptionsPanel.css

@@ -21,6 +21,14 @@
     }
 }
 
+/* Ensure no white space in chat area */
+.no-white-space {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+}
+
 table {
     border-collapse: collapse;
     width: 100%;
@@ -40,19 +48,33 @@ table {
 
 .grey-background {
     background-color: #f0f0f03d;
+    width: 100%;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 
 .attachment-tag-container {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
 }
 
 .chat-container {
     max-block-size: 75vh;
+    width: 100%;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+    margin: 0;
+    padding: 0;
 }
 
 .chatMessagesContainer, .questionContainer {
-    padding-right: 1rem;
-    padding-left: 1rem;
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+    width: 100%;
+    box-sizing: border-box; /* Include padding in width calculation */
+    max-width: 100%; /* Ensure it doesn't exceed container width */
+    margin: 0;
 }

App/frontend-app/src/components/chat/chatRoom.module.scss

@@ -205,53 +205,58 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
         }
 
         try {
-
-
-
             const request: ChatRequest = {
                 Question: question,
                 chatSessionId: currentSessionId,
                 DocumentIds: button === "All Documents" ? [] : formattedDocuments
-                // cha: history,
-                // options: {
-                //     model: model,
-                //     source: source,
-                //     temperature: temperature,
-                //     maxTokens: maxTokens,
-                // },
-                // filterByDocumentIds: filterByDocumentIds,
             };
 
-
             const response: ChatApiResponse = await Completion(request);
 
-
-
             setIsLoading(false);
 
             const answerTimestamp = new Date();
 
-            try {
-                if (response && response.answer) {
-
-                    const formattedAnswer = removeNewlines(response.answer)
-                    const chatResp = await marked.parse(formattedAnswer) // Convert to HTML if Markdown detected
+            if (response && response.answer) {
+                const formattedAnswer = removeNewlines(response.answer);
+                const chatResp = await marked.parse(formattedAnswer);
 
-
-
-
-                    // Update the conversation with the formatted answer
-                    setConversationAnswers((prevAnswers) => {
-                        const newAnswers = [...prevAnswers];
-                        newAnswers[newAnswers.length - 1] = [question, { ...response, answer: chatResp }, userTimestamp, answerTimestamp];
-                        return newAnswers;
-                    });
-                }
-            } catch (error) {
-                console.error("Error parsing response body:", error);
+                // Update the conversation with the formatted answer
+                setConversationAnswers((prevAnswers) => {
+                    const newAnswers = [...prevAnswers];
+                    newAnswers[newAnswers.length - 1] = [question, { ...response, answer: chatResp }, userTimestamp, answerTimestamp];
+                    return newAnswers;
+                });
+            } else {
+                console.error("Invalid response received:", response);
+                // Update with error message
+                setConversationAnswers((prevAnswers) => {
+                    const newAnswers = [...prevAnswers];
+                    newAnswers[newAnswers.length - 1] = [question, { 
+                        answer: t('components.chat.error-response'), 
+                        suggestingQuestions: [],
+                        documentIds: [],
+                        keywords: []
+                    }, userTimestamp, answerTimestamp];
+                    return newAnswers;
+                });
             }
         } catch (error) {
             console.error("Error in makeApiRequest:", error);
+            setIsLoading(false);
+            
+            // Update conversation with error message
+            const answerTimestamp = new Date();
+            setConversationAnswers((prevAnswers) => {
+                const newAnswers = [...prevAnswers];
+                newAnswers[newAnswers.length - 1] = [question, { 
+                    answer: t('components.chat.error-occurred'), 
+                    suggestingQuestions: [],
+                    documentIds: [],
+                    keywords: []
+                }, userTimestamp, answerTimestamp];
+                return newAnswers;
+            });
         } finally {
             setIsLoading(false);
             setTimeout(() => {
@@ -400,7 +405,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
     }, []);
 
     return (
-        <div className="mx-2 flex w-full flex-1 flex-col items-center grey-background">
+        <div className="flex w-full flex-1 flex-col items-stretch grey-background">
             {isDialogOpen && (
                 <DocDialog
                     metadata={dialogMetadata as Document}
@@ -411,8 +416,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
             <div ref={chatContainerRef} className={`no-scrollbar flex w-full flex-1 flex-col overflow-auto ${styles["chat-container"]}`}>
             {!disableOptionsPanel && (
                 <OptionsPanel
-                    // className="px-10 mx-auto my-10 flex flex-col items-center justify-center rounded-xl bg-neutral-500 bg-opacity-10 shadow-md outline outline-1 outline-transparent" 
-                    className={`px-10 mx-auto my-10 flex flex-col items-center justify-center rounded-xl bg-neutral-500 bg-opacity-10 shadow-md outline outline-1 outline-transparent`}
+                    className={`px-4 mx-0 my-10 flex flex-col items-center justify-center rounded-xl bg-neutral-500 bg-opacity-10 shadow-md outline outline-1 outline-transparent w-full`}
                     onModelChange={handleModelChange}
                     onSourceChange={handleSourceChange}
                     disabled={disableSources}
@@ -421,7 +425,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
                 />
             )}
             <div ref={optionsBottom}></div>
-                <CopilotProvider className={styles.chatMessagesContainer}>
+                <CopilotProvider className={`${styles.chatMessagesContainer} w-full`}>
                     <CopilotChat>
                         {conversationAnswers.map(([prompt, response], index) => (
                             <Fragment key={index}>
@@ -564,7 +568,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
                 </CopilotProvider>
             </div>
 
-            <div className={`${styles.questionContainer} mb-6 mt-6 flex w-full justify-center`}>
+            <div className={`${styles.questionContainer} mb-6 mt-6 flex w-full justify-center px-2`}>
                 <Button
                     className={styles["new-topic"]}
                     shape="circular"
@@ -587,7 +591,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
                     key={textareaKey}
                     ref={inputRef}
                     value={textAreaValue}
-                    className="!ml-4 max-h-48 w-full !max-w-none"
+                    className="!ml-2 max-h-48 w-full !max-w-none"
                     onChange={(_ev, newValue) => setTextAreaValue(newValue.value)}
                     showCount
                     aria-label="Chat input"

App/frontend-app/src/components/chat/chatRoom.tsx

@@ -66,8 +66,7 @@ interface Cell {
 }
 
 export function DocDialog(
-    { metadata, isOpen, allChunkTexts, clearChatFlag, onClose }: DocDialogProps,
-    props: Partial<TabListProps>
+    { metadata, isOpen, allChunkTexts, clearChatFlag, onClose, ...props }: DocDialogProps & Partial<TabListProps>
 ) {
     const {t} = useTranslation();
     const styles = useStyles();