Skip to content

Commit f7786af

Browse files
Roopan-MicrosoftRoopan-Microsoft
authored
Merge pull request #442 from microsoft/ve-enhancements
feat: Ui Enhancements introduce one new Ui change, Filter section option expands if checked any option
2 parents 34054e6 + ab6463a commit f7786af

File tree

15 files changed

+209
-9017
lines changed

15 files changed

+209
-9017
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22

3-
export function AzureIcon({ className }: { className?: string }): JSX.Element {
3+
export function AzureIcon({ className }: { className?: string }): React.JSX.Element {
44
return (
55
<svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
66
<path

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22

3-
export function GitHubIcon({ className }: { className?: string }): JSX.Element {
3+
export function GitHubIcon({ className }: { className?: string }): React.JSX.Element {
44
return (
55
<svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
66
<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/mailIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22

3-
export function MailIcon({ className }: { className?: string }): JSX.Element {
3+
export function MailIcon({ className }: { className?: string }): React.JSX.Element {
44
return (
55
<svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
66
<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/components/chat/OptionsPanel.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
.options-panel-container {
22
padding-bottom: 20px; /* Add more padding below the toggle */
33
margin-top: 2px;
4+
width: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
48
}
59

610
.options-panel-container.sticky {
@@ -25,7 +29,8 @@
2529
position: relative;
2630
background-color: #ffffff;
2731
border-radius: 9999px;
28-
width: 300px;
32+
width: 100%;
33+
max-width: 320px;
2934
height: 40px;
3035
display: flex;
3136
align-items: center;

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

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,54 @@
2121
}
2222
}
2323

24+
/* Global overrides to ensure full width */
25+
:global(html), :global(body), :global(#root) {
26+
width: 100% !important;
27+
max-width: 100% !important;
28+
margin: 0 !important;
29+
padding: 0 !important;
30+
box-sizing: border-box !important;
31+
}
32+
33+
/* Override home page chat-panel constraints on chat page */
34+
:global(.chat-panel) {
35+
width: 100% !important;
36+
max-width: 100% !important;
37+
}
38+
39+
/* Debug: Force full width for ALL elements on chat page */
40+
:global([data-testid="chat-page"]) * {
41+
max-width: 100% !important;
42+
box-sizing: border-box !important;
43+
}
44+
45+
/* Debug: Override any grid or flex constraints */
46+
:global(div) {
47+
max-width: none !important;
48+
}
49+
50+
/* Debug: Force full viewport width */
51+
:global(body) {
52+
overflow-x: hidden !important;
53+
}
54+
55+
/* Ensure no white space in chat area */
56+
.no-white-space {
57+
margin: 0 !important;
58+
padding: 0 !important;
59+
width: 100% !important;
60+
box-sizing: border-box !important;
61+
}
62+
63+
/* Force full width for all containers */
64+
.full-width-container {
65+
width: 100vw !important;
66+
max-width: 100vw !important;
67+
margin: 0 !important;
68+
padding: 0 !important;
69+
box-sizing: border-box !important;
70+
}
71+
2472
table {
2573
border-collapse: collapse;
2674
width: 100%;
@@ -40,19 +88,55 @@ table {
4088

4189
.grey-background {
4290
background-color: #f0f0f03d;
91+
width: 100%;
92+
overflow-x: hidden; /* Prevent horizontal overflow */
93+
margin: 0;
94+
padding: 0;
95+
box-sizing: border-box;
4396
}
4497

4598

4699
.attachment-tag-container {
47100
display: flex;
48101
flex-wrap: wrap;
102+
width: 100%;
49103
}
50104

51105
.chat-container {
52106
max-block-size: 75vh;
107+
width: 100%;
108+
overflow-x: hidden; /* Prevent horizontal overflow */
109+
margin: 0;
110+
padding: 0;
53111
}
54112

55113
.chatMessagesContainer, .questionContainer {
56-
padding-right: 1rem;
57-
padding-left: 1rem;
114+
padding-right: 0.25rem;
115+
padding-left: 0.25rem;
116+
width: 100% !important;
117+
box-sizing: border-box; /* Include padding in width calculation */
118+
max-width: 100% !important; /* Ensure it doesn't exceed container width */
119+
margin: 0 !important;
120+
}
121+
122+
/* Force Copilot components to take full width */
123+
.chatMessagesContainer :global(fui-CopilotChat) {
124+
width: 100% !important;
125+
max-width: 100% !important;
126+
}
127+
128+
.chatMessagesContainer :global([role="log"]) {
129+
width: 100% !important;
130+
max-width: 100% !important;
131+
margin: 0 !important;
132+
padding: 0 !important;
133+
}
134+
135+
/* Ensure all chat message containers take full width */
136+
.chatMessagesContainer :global(.fui-CopilotMessage),
137+
.chatMessagesContainer :global(.fui-UserMessage) {
138+
width: 100% !important;
139+
max-width: 100% !important;
140+
margin-left: 0 !important;
141+
margin-right: 0 !important;
58142
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,6 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
186186

187187

188188

189-
190189
let filterByDocumentIds: string[] = [];
191190

192191

‎App/frontend-app/src/components/documentViewer/documentViewer.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,7 @@ interface Cell {
6666
}
6767

6868
export function DocDialog(
69-
{ metadata, isOpen, allChunkTexts, clearChatFlag, onClose }: DocDialogProps,
70-
props: Partial<TabListProps>
69+
{ metadata, isOpen, allChunkTexts, clearChatFlag, onClose, ...props }: DocDialogProps & Partial<TabListProps>
7170
) {
7271
const {t} = useTranslation();
7372
const styles = useStyles();

‎App/frontend-app/src/components/filter/filter.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export function Filter({
6565
};
6666

6767
const [selectedKeywords, setSelectedKeywords] = useState<{ [key: string]: string[] }>(getInitialSelectedKeywords);
68+
const [openItems, setOpenItems] = useState<string[]>([]);
6869
const isInitialMount = useRef(true);
6970

7071
useEffect(() => {
@@ -84,11 +85,28 @@ export function Filter({
8485
useEffect(() => {
8586
if (clearFilters) {
8687
setSelectedKeywords({});
88+
setOpenItems([]); // Close all accordion items when clearing filters
8789
localStorage.removeItem(localStorageKey);
8890
onFilterCleared(); // Notify parent that filters have been cleared
8991
}
9092
}, [clearFilters, onFilterCleared]);
9193

94+
// Effect to automatically expand/collapse accordion items based on selections
95+
useEffect(() => {
96+
if (!keywordFilterInfo) return;
97+
98+
const categoriesWithSelections: string[] = [];
99+
100+
Object.entries(keywordFilterInfo).forEach(([category], index) => {
101+
// Check if this category has any selected keywords
102+
if (selectedKeywords[category] && selectedKeywords[category].length > 0) {
103+
categoriesWithSelections.push(index.toString());
104+
}
105+
});
106+
107+
setOpenItems(categoriesWithSelections);
108+
}, [selectedKeywords, keywordFilterInfo]);
109+
92110
const handleCheckboxChange = (checked: boolean, category: string, keyword: string) => {
93111
setSelectedKeywords((prevKeywords) => {
94112
const newKeywords = { ...prevKeywords };
@@ -113,10 +131,19 @@ export function Filter({
113131
});
114132
};
115133

134+
const handleAccordionToggle = (_event: any, data: { openItems: string[] }) => {
135+
setOpenItems(data.openItems);
136+
};
137+
116138
return (
117139
<div className={`${className || ""} flex flex-col`}>
118140
<div className={classes.accordionWrapper}>
119-
<Accordion multiple collapsible>
141+
<Accordion
142+
multiple
143+
collapsible
144+
openItems={openItems}
145+
onToggle={handleAccordionToggle}
146+
>
120147
{keywordFilterInfo && Object.entries(keywordFilterInfo).slice(0,10).map(([category, keywords], index) => (
121148
<AccordionItem key={index} value={index.toString()}>
122149
<AccordionHeader inline>{category}</AccordionHeader>

‎App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export function HeaderMenuTabs({
118118
icon={<Dismiss24Regular />}
119119
iconPosition="after"
120120
appearance="subtle"
121-
onClick={(e) => {
121+
onClick={(e: React.MouseEvent) => {
122122
e.stopPropagation();
123123
updateSelectedDocuments(document);
124124
}}

‎App/frontend-app/src/pages/chat/chatPage.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,35 @@ export function ChatPage() {
3131
};
3232

3333
return (
34-
<div className="flex w-full flex-1 flex-col bg-neutral-100">
34+
<div
35+
data-testid="chat-page"
36+
className="flex w-full flex-1 flex-col bg-neutral-100"
37+
style={{
38+
width: '100vw',
39+
maxWidth: '100vw',
40+
margin: 0,
41+
padding: 0,
42+
backgroundColor: 'red', // Debug: should show red background
43+
border: '2px solid blue' // Debug: blue border to see container boundaries
44+
}}
45+
>
3546
<Header className="flex flex-col justify-between bg-contain bg-right-bottom bg-no-repeat" size="small">
3647
<div className="-ml-8">
3748
<HeaderBar location={NavLocation.Home} />
3849
</div>
3950
</Header>
40-
<main className="grid flex-1 grid-cols-5 gap-x-2 gap-y-8">
41-
<div className="col-span-3 col-start-2 flex flex-1 flex-col md:col-span-3 md:col-start-2">
51+
<main className="flex flex-1 flex-col w-full" style={{
52+
width: '100%',
53+
maxWidth: '100%',
54+
backgroundColor: 'yellow', // Debug: should show yellow background
55+
border: '2px solid green' // Debug: green border to see main boundaries
56+
}}>
57+
<div className="flex flex-1 flex-col w-full" style={{
58+
width: '100%',
59+
maxWidth: '100%',
60+
backgroundColor: 'lightblue', // Debug: should show light blue background
61+
border: '2px solid purple' // Debug: purple border to see inner div boundaries
62+
}}>
4263
<HeaderMenuTabs
4364
className=""
4465
searchResultDocuments={searchResultDocuments}
@@ -47,10 +68,17 @@ export function ChatPage() {
4768
updateSelectedDocuments={updateSelectedDocuments}
4869
/>
4970
<div className="absolute left-0 right-0 mt-11 w-full border-b border-b-neutral-300"></div>
50-
<ChatRoom
51-
searchResultDocuments={searchResultDocuments}
52-
selectedDocuments={selectedDocuments}
53-
chatWithDocument={chatWithSingleSelectedDocument ? chatWithSingleSelectedDocument : []} clearChatFlag={false} />
71+
<div style={{
72+
width: '100%',
73+
maxWidth: '100%',
74+
backgroundColor: 'orange', // Debug: should show orange background
75+
border: '2px solid red' // Debug: red border around ChatRoom
76+
}}>
77+
<ChatRoom
78+
searchResultDocuments={searchResultDocuments}
79+
selectedDocuments={selectedDocuments}
80+
chatWithDocument={chatWithSingleSelectedDocument ? chatWithSingleSelectedDocument : []} clearChatFlag={false} />
81+
</div>
5482
</div>
5583
</main>
5684
</div>

0 commit comments

Comments
 (0)