diff --git a/App/frontend-app/src/assets/icons/azureIcon.tsx b/App/frontend-app/src/assets/icons/azureIcon.tsx index 05a7bf46..7dae40e0 100644 --- a/App/frontend-app/src/assets/icons/azureIcon.tsx +++ b/App/frontend-app/src/assets/icons/azureIcon.tsx @@ -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 ( diff --git a/App/frontend-app/src/assets/icons/mailIcon.tsx b/App/frontend-app/src/assets/icons/mailIcon.tsx index dbb8396b..52325474 100644 --- a/App/frontend-app/src/assets/icons/mailIcon.tsx +++ b/App/frontend-app/src/assets/icons/mailIcon.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 ( diff --git a/App/frontend-app/src/components/chat/OptionsPanel.css b/App/frontend-app/src/components/chat/OptionsPanel.css index 5405a09a..9b81ad12 100644 --- a/App/frontend-app/src/components/chat/OptionsPanel.css +++ b/App/frontend-app/src/components/chat/OptionsPanel.css @@ -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; diff --git a/App/frontend-app/src/components/chat/chatRoom.module.scss b/App/frontend-app/src/components/chat/chatRoom.module.scss index b4a93896..fe287304 100644 --- a/App/frontend-app/src/components/chat/chatRoom.module.scss +++ b/App/frontend-app/src/components/chat/chatRoom.module.scss @@ -21,6 +21,54 @@ } } +/* Global overrides to ensure full width */ +:global(html), :global(body), :global(#root) { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + box-sizing: border-box !important; +} + +/* Override home page chat-panel constraints on chat page */ +:global(.chat-panel) { + width: 100% !important; + max-width: 100% !important; +} + +/* Debug: Force full width for ALL elements on chat page */ +:global([data-testid="chat-page"]) * { + max-width: 100% !important; + box-sizing: border-box !important; +} + +/* Debug: Override any grid or flex constraints */ +:global(div) { + max-width: none !important; +} + +/* Debug: Force full viewport width */ +:global(body) { + overflow-x: hidden !important; +} + +/* Ensure no white space in chat area */ +.no-white-space { + margin: 0 !important; + padding: 0 !important; + width: 100% !important; + box-sizing: border-box !important; +} + +/* Force full width for all containers */ +.full-width-container { + width: 100vw !important; + max-width: 100vw !important; + margin: 0 !important; + padding: 0 !important; + box-sizing: border-box !important; +} + table { border-collapse: collapse; width: 100%; @@ -40,19 +88,55 @@ 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% !important; + box-sizing: border-box; /* Include padding in width calculation */ + max-width: 100% !important; /* Ensure it doesn't exceed container width */ + margin: 0 !important; +} + +/* Force Copilot components to take full width */ +.chatMessagesContainer :global(fui-CopilotChat) { + width: 100% !important; + max-width: 100% !important; +} + +.chatMessagesContainer :global([role="log"]) { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Ensure all chat message containers take full width */ +.chatMessagesContainer :global(.fui-CopilotMessage), +.chatMessagesContainer :global(.fui-UserMessage) { + width: 100% !important; + max-width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; } \ No newline at end of file diff --git a/App/frontend-app/src/components/chat/chatRoom.tsx b/App/frontend-app/src/components/chat/chatRoom.tsx index 8b187d56..89952cb9 100644 --- a/App/frontend-app/src/components/chat/chatRoom.tsx +++ b/App/frontend-app/src/components/chat/chatRoom.tsx @@ -186,7 +186,6 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc - let filterByDocumentIds: string[] = []; diff --git a/App/frontend-app/src/components/documentViewer/documentViewer.tsx b/App/frontend-app/src/components/documentViewer/documentViewer.tsx index e3bdaa93..e248c32f 100644 --- a/App/frontend-app/src/components/documentViewer/documentViewer.tsx +++ b/App/frontend-app/src/components/documentViewer/documentViewer.tsx @@ -66,8 +66,7 @@ interface Cell { } export function DocDialog( - { metadata, isOpen, allChunkTexts, clearChatFlag, onClose }: DocDialogProps, - props: Partial + { metadata, isOpen, allChunkTexts, clearChatFlag, onClose, ...props }: DocDialogProps & Partial ) { const {t} = useTranslation(); const styles = useStyles(); diff --git a/App/frontend-app/src/components/filter/filter.tsx b/App/frontend-app/src/components/filter/filter.tsx index a7a5ab6e..7251eb38 100644 --- a/App/frontend-app/src/components/filter/filter.tsx +++ b/App/frontend-app/src/components/filter/filter.tsx @@ -65,6 +65,7 @@ export function Filter({ }; const [selectedKeywords, setSelectedKeywords] = useState<{ [key: string]: string[] }>(getInitialSelectedKeywords); + const [openItems, setOpenItems] = useState([]); const isInitialMount = useRef(true); useEffect(() => { @@ -84,11 +85,28 @@ export function Filter({ useEffect(() => { if (clearFilters) { setSelectedKeywords({}); + setOpenItems([]); // Close all accordion items when clearing filters localStorage.removeItem(localStorageKey); onFilterCleared(); // Notify parent that filters have been cleared } }, [clearFilters, onFilterCleared]); + // Effect to automatically expand/collapse accordion items based on selections + useEffect(() => { + if (!keywordFilterInfo) return; + + const categoriesWithSelections: string[] = []; + + Object.entries(keywordFilterInfo).forEach(([category], index) => { + // Check if this category has any selected keywords + if (selectedKeywords[category] && selectedKeywords[category].length > 0) { + categoriesWithSelections.push(index.toString()); + } + }); + + setOpenItems(categoriesWithSelections); + }, [selectedKeywords, keywordFilterInfo]); + const handleCheckboxChange = (checked: boolean, category: string, keyword: string) => { setSelectedKeywords((prevKeywords) => { const newKeywords = { ...prevKeywords }; @@ -113,10 +131,19 @@ export function Filter({ }); }; + const handleAccordionToggle = (_event: any, data: { openItems: string[] }) => { + setOpenItems(data.openItems); + }; + return (
- + {keywordFilterInfo && Object.entries(keywordFilterInfo).slice(0,10).map(([category, keywords], index) => ( {category} diff --git a/App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx b/App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx index 89924895..92575b9b 100644 --- a/App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx +++ b/App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx @@ -118,7 +118,7 @@ export function HeaderMenuTabs({ icon={} iconPosition="after" appearance="subtle" - onClick={(e) => { + onClick={(e: React.MouseEvent) => { e.stopPropagation(); updateSelectedDocuments(document); }} diff --git a/App/frontend-app/src/pages/chat/chatPage.tsx b/App/frontend-app/src/pages/chat/chatPage.tsx index 7a082397..50fd9303 100644 --- a/App/frontend-app/src/pages/chat/chatPage.tsx +++ b/App/frontend-app/src/pages/chat/chatPage.tsx @@ -31,14 +31,35 @@ export function ChatPage() { }; return ( -
+
-
-
+
+
- +
+ +
diff --git a/App/frontend-app/src/pages/home/home.module.scss b/App/frontend-app/src/pages/home/home.module.scss index aa821848..880fa528 100644 --- a/App/frontend-app/src/pages/home/home.module.scss +++ b/App/frontend-app/src/pages/home/home.module.scss @@ -38,24 +38,38 @@ width: 15% !important; min-width: 229px; transition: width 0.3s ease-in-out; + flex-shrink: 0; /* Prevent shrinking */ } .documents-panel { width: 34% !important; - min-width: 410px; + min-width: 300px; /* Reduced from 410px for better responsiveness */ transition: width 0.3s ease-in-out; + flex-grow: 1; /* Allow growing to fill space */ } .chat-panel { - width: 51% !important; + width: 51%; min-width: 300px; transition: width 0.3s ease-in-out; + overflow: hidden; /* Prevent content from spilling out */ + flex-grow: 1; /* Allow growing to fill space */ + } + + /* Full width override for chat page */ + .chat-panel-fullwidth { + width: 100% !important; + max-width: 100% !important; + min-width: 300px; + transition: width 0.3s ease-in-out; + overflow: hidden; } .filters-panel-collapsed { width: 50px !important; min-width: 50px; transition: width 0.3s ease-in-out; + flex-shrink: 0; /* Prevent shrinking */ } } @@ -65,6 +79,7 @@ flex-direction: row; flex-grow: 1; overflow: hidden; + width: 100%; /* Ensure full width */ } .resizable-panel { @@ -74,6 +89,15 @@ overflow: hidden; } +/* Main container for panels to prevent white space */ +.panels-container { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + overflow: hidden; +} + /* Filter panel transitions */ .filter-panel-enter { opacity: 0; diff --git a/App/frontend-app/src/pages/home/home.tsx b/App/frontend-app/src/pages/home/home.tsx index b0318f30..5c4c9c53 100644 --- a/App/frontend-app/src/pages/home/home.tsx +++ b/App/frontend-app/src/pages/home/home.tsx @@ -242,7 +242,23 @@ export function Home({ isSearchResultsPage }: HomeProps) { } function toggleFilterPanel(): void { + const wasCollapsed = isFilterPanelCollapsed; setIsFilterPanelCollapsed(!isFilterPanelCollapsed); + + if (wasCollapsed) { + // Expanding: Reduce documents and chat widths to make room for filter panel + // Filter panel takes ~15%, so documents and chat should take ~85% total + setDocumentsWidth(34); // 34% of total width + setChatWidth(51); // 51% of total width + } else { + // Collapsing: Expand documents and chat to fill the space + // Distribute the extra ~15% proportionally + const currentTotal = documentsWidth + chatWidth; + const expansionFactor = 100 / currentTotal; // Scale to fill 100% + + setDocumentsWidth(Math.round(documentsWidth * expansionFactor)); + setChatWidth(Math.round(chatWidth * expansionFactor)); + } } const handlePanelResize = (leftWidth: number, rightWidth: number) => { @@ -539,10 +555,10 @@ export function Home({ isSearchResultsPage }: HomeProps) {
-
+
{/* Left Section: Filter Panel with Toggle */} {!isFilterPanelCollapsed && ( -
+
{/* Filter Header with Toggle Button */}
@@ -568,7 +584,7 @@ export function Home({ isSearchResultsPage }: HomeProps) { {/* Collapsed Filter Toggle Button */} {isFilterPanelCollapsed && ( -
+