Skip to content

Commit 2274706

Browse files
kartikpersistentkartikpersistent
committed
fix: display flex issue fix
1 parent cf92222 commit 2274706

File tree

23 files changed

+60
-56
lines changed

23 files changed

+60
-56
lines changed

‎frontend/src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,4 +367,8 @@
367367
align-items:center;
368368
border: 1px solid rgb(var(--theme-palette-neutral-border-strong));
369369
border-radius: 12px;
370+
}
371+
.websource-btn-container{
372+
display: flex;
373+
gap: 10px;
370374
}

‎frontend/src/components/ChatBot/ChatInfoModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -315,13 +315,13 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
315315
);
316316
return (
317317
<div className='n-bg-palette-neutral-bg-weak p-4'>
318-
<div className='flex flex-row pb-6 items-center mb-2'>
318+
<div className='flex! flex-row pb-6 items-center mb-2'>
319319
<img
320320
src={Neo4jRetrievalLogo}
321321
style={{ width: isTablet ? 80 : 95, height: isTablet ? 80 : 95, marginRight: 10 }}
322322
loading='lazy'
323323
/>
324-
<div className='flex flex-col'>
324+
<div className='flex! flex-col'>
325325
<Typography variant='h2'>Retrieval information</Typography>
326326
<Typography variant='body-medium' className='mb-2'>
327327
To generate this response, the process took <span className='font-bold'>{response_time} seconds,</span>
@@ -499,7 +499,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
499499
)}
500500
</Flex>
501501
{activeTab == 4 && nodes?.length && relationships?.length && mode !== chatModeLables.graph ? (
502-
<div className='button-container flex mt-2 justify-center'>
502+
<div className='button-container flex! mt-2 justify-center'>
503503
<GraphViewButton
504504
nodeValues={nodes}
505505
relationshipValues={relationships}

‎frontend/src/components/ChatBot/Chatbot.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -406,26 +406,26 @@ const Chatbot: FC<ChatbotProps> = (props) => {
406406
}, []);
407407

408408
return (
409-
<div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
409+
<div className='n-bg-palette-neutral-bg-weak flex! flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
410410
{isDeleteChatLoading && (
411411
<div className='chatbot-deleteLoader'>
412412
<Loader title='Deleting...'></Loader>
413413
</div>
414414
)}
415415
<div
416-
className={`flex overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
416+
className={`flex! overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
417417
isChatOnly ? 'min-h-[calc(100dvh-114px)] max-h-[calc(100dvh-114px)]' : ''
418418
} `}
419419
>
420420
<Widget className='n-bg-palette-neutral-bg-weak w-full' header='' isElevated={false}>
421-
<div className='flex flex-col gap-4 gap-y-4'>
421+
<div className='flex! flex-col gap-4 gap-y-4'>
422422
{listMessages.map((chat, index) => {
423423
const messagechatModes = Object.keys(chat.modes);
424424
return (
425425
<div
426426
ref={messagesEndRef}
427427
key={chat.id}
428-
className={clsx(`flex gap-2.5`, {
428+
className={clsx(`flex! gap-2.5`, {
429429
'flex-row': chat.user === 'chatbot',
430430
'flex-row-reverse': chat.user !== 'chatbot',
431431
})}
@@ -545,8 +545,8 @@ const Chatbot: FC<ChatbotProps> = (props) => {
545545
</div>
546546
</Widget>
547547
</div>
548-
<div className='n-bg-palette-neutral-bg-weak flex gap-2.5 bottom-0 p-2.5 w-full'>
549-
<form onSubmit={handleSubmit} className={`flex gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
548+
<div className='n-bg-palette-neutral-bg-weak flex! gap-2.5 bottom-0 p-2.5 w-full'>
549+
<form onSubmit={handleSubmit} className={`flex! gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
550550
<TextInput
551551
className={`n-bg-palette-neutral-bg-default flex-grow-7 ${
552552
isFullScreen ? 'w-[calc(100%-105px)]' : 'w-[70%]'

‎frontend/src/components/ChatBot/ChunkInfo.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
3636
return (
3737
<>
3838
{loading ? (
39-
<div className='flex justify-center items-center'>
39+
<div className='flex! justify-center items-center'>
4040
<LoadingSpinner size='small' />
4141
</div>
4242
) : chunks?.length > 0 ? (
@@ -46,7 +46,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
4646
<li key={chunk.id} className='mb-2'>
4747
{chunk?.page_number ? (
4848
<>
49-
<div className='flex flex-row inline-block items-center'>
49+
<div className='flex! flex-row inline-block items-center'>
5050
<>
5151
<DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
5252
<Typography
@@ -79,7 +79,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
7979
</>
8080
) : chunk?.url && chunk?.start_time ? (
8181
<>
82-
<div className='flex flex-row inline-block justiy-between items-center'>
82+
<div className='flex! flex-row inline-block justiy-between items-center'>
8383
<img src={youtubelogo} width={20} height={20} className='mr-2' />
8484
<TextLink href={generateYouTubeLink(chunk?.url, chunk?.start_time)} isExternalLink={true}>
8585
<Typography
@@ -111,7 +111,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
111111
</>
112112
) : chunk?.url && new URL(chunk.url).host === 'wikipedia.org' ? (
113113
<>
114-
<div className='flex flex-row inline-block justiy-between items-center'>
114+
<div className='flex! flex-row inline-block justiy-between items-center'>
115115
<img src={wikipedialogo} width={20} height={20} className='mr-2' />
116116
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
117117
</div>
@@ -135,7 +135,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
135135
</>
136136
) : chunk?.url && new URL(chunk.url).host === 'storage.googleapis.com' ? (
137137
<>
138-
<div className='flex flex-row inline-block justiy-between items-center'>
138+
<div className='flex! flex-row inline-block justiy-between items-center'>
139139
<img src={gcslogo} width={20} height={20} className='mr-2' />
140140
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
141141
</div>
@@ -159,7 +159,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
159159
</>
160160
) : chunk?.url && chunk?.url.startsWith('s3://') ? (
161161
<>
162-
<div className='flex flex-row inline-block justiy-between items-center'>
162+
<div className='flex! flex-row inline-block justiy-between items-center'>
163163
<img src={s3logo} width={20} height={20} className='mr-2' />
164164
<Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
165165
</div>
@@ -185,7 +185,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
185185
!chunk?.url.startsWith('s3://') &&
186186
!isAllowedHost(chunk?.url, ['storage.googleapis.com', 'wikipedia.org', 'youtube.com']) ? (
187187
<>
188-
<div className='flex flex-row inline-block items-center'>
188+
<div className='flex! flex-row inline-block items-center'>
189189
<GlobeAltIconOutline className='n-size-token-7' />
190190
<TextLink href={chunk?.url} isExternalLink={true}>
191191
<Typography variant='body-medium'>{chunk?.url}</Typography>
@@ -211,7 +211,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
211211
</>
212212
) : (
213213
<>
214-
<div className='flex flex-row inline-block items-center'>
214+
<div className='flex! flex-row inline-block items-center'>
215215
{chunk.fileSource === 'local file' ? (
216216
<DocumentTextIconOutline className='n-size-token-7 mr-2' />
217217
) : (

‎frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const ExpandedChatButtonContainer: React.FC<IconProps> = ({ closeChatBot, delete
2222
menuAnchor={chatAnchor}
2323
isRoot={false}
2424
/>
25-
<div className='h-[48px]! mx-2 flex items-center'>
25+
<div className='h-[48px]! mx-2 flex! items-center'>
2626
<div ref={chatAnchor}>
2727
<IconButtonWithToolTip
2828
onClick={() => {

‎frontend/src/components/ChatBot/SourcesInfo.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
3737
.map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
3838
.map((s, index) => {
3939
return (
40-
<li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
41-
<div className='flex flex-row inline-block justify-between items-center'>
40+
<li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
41+
<div className='flex! flex-row inline-block justify-between items-center'>
4242
{s.fileSource === 'local file' ? (
4343
<DocumentTextIconOutline className='n-size-token-7 mr-2' />
4444
) : (
@@ -59,11 +59,11 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
5959
<ul className='list-class list-none'>
6060
{sources.map((link, index) => {
6161
return (
62-
<li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
62+
<li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
6363
{link?.startsWith('http') || link?.startsWith('https') ? (
6464
<>
6565
{isAllowedHost(link, ['wikipedia.org']) && (
66-
<div className='flex flex-row inline-block justify-between items-center'>
66+
<div className='flex! flex-row inline-block justify-between items-center'>
6767
<img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
6868
<TextLink href={link} isExternalLink={true}>
6969
<HoverableLink url={link}>
@@ -78,7 +78,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
7878
</div>
7979
)}
8080
{isAllowedHost(link, ['storage.googleapis.com']) && (
81-
<div className='flex flex-row inline-block justify-between items-center'>
81+
<div className='flex! flex-row inline-block justify-between items-center'>
8282
<img src={gcslogo} width={20} height={20} className='mr-2' alt='Google Cloud Storage Logo' />
8383
<Typography
8484
variant='body-medium'
@@ -90,7 +90,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
9090
)}
9191
{youtubeLinkValidation(link) && (
9292
<>
93-
<div className='flex flex-row inline-block justiy-between items-center'>
93+
<div className='flex! flex-row inline-block justiy-between items-center'>
9494
<img src={youtubelogo} width={20} height={20} className='mr-2' />
9595
<TextLink href={link} isExternalLink={true}>
9696
<HoverableLink url={link}>
@@ -107,7 +107,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
107107
)}
108108
{!link?.startsWith('s3://') &&
109109
!isAllowedHost(link, ['storage.googleapis.com', 'wikipedia.org', 'www.youtube.com']) && (
110-
<div className='flex flex-row inline-block justify-between items-center'>
110+
<div className='flex! flex-row inline-block justify-between items-center'>
111111
<GlobeAltIconOutline className='n-size-token-7' />
112112
<TextLink href={link} isExternalLink={true}>
113113
<Typography variant='body-medium'>{link}</Typography>
@@ -116,7 +116,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
116116
)}
117117
</>
118118
) : link?.startsWith('s3://') ? (
119-
<div className='flex flex-row inline-block justify-between items-center'>
119+
<div className='flex! flex-row inline-block justify-between items-center'>
120120
<img src={s3logo} width={20} height={20} className='mr-2' alt='S3 Logo' />
121121
<Typography
122122
variant='body-medium'
@@ -126,7 +126,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
126126
</Typography>
127127
</div>
128128
) : (
129-
<div className='flex flex-row inline-block justify-between items-center'>
129+
<div className='flex! flex-row inline-block justify-between items-center'>
130130
<DocumentTextIconOutline className='n-size-token-7 mr-2' />
131131
<Typography
132132
variant='body-medium'

‎frontend/src/components/Content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -889,7 +889,7 @@ const Content: React.FC<ContentProps> = ({
889889
<span className='h6 px-1'>Neo4j connection {isReadOnlyUser ? '(Read only Mode)' : ''}</span>
890890
<Typography variant='body-medium'>
891891
<DatabaseStatusIcon isConnected={connectionStatus} isGdsActive={isGdsActive} uri={userCredentials?.uri} />
892-
<div className='pt-1 flex gap-1 items-center'>
892+
<div className='pt-1 flex! gap-1 items-center'>
893893
<div>{!hasSelections ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}</div>
894894
<div>
895895
{hasSelections ? (

‎frontend/src/components/Dropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
3232
type='select'
3333
label='LLM Models'
3434
helpText={
35-
<div className='w-max! flex gap-1 items-center'>
35+
<div className='w-max! flex! gap-1 items-center'>
3636
<span>
3737
<InformationCircleIconOutline title='info' aria-label='infoicon' className='n-size-token-6' />
3838
</span>

‎frontend/src/components/FileTable.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
177177
if (info.getValue() != 'Processing') {
178178
return (
179179
<div
180-
className='cellClass flex gap-1 items-center'
180+
className='cellClass flex! gap-1 items-center'
181181
title={info.row.original?.status === 'Failed' ? info.row.original?.errorMessage : ''}
182182
>
183183
<div>
@@ -203,7 +203,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
203203
);
204204
} else if (info.getValue() === 'Processing' && info.row.original.processingProgress === undefined) {
205205
return (
206-
<div className='cellClass flex gap-1 items-center'>
206+
<div className='cellClass flex! gap-1 items-center'>
207207
<div>
208208
<StatusIndicator type={statusCheck(info.getValue())} />
209209
</div>
@@ -268,7 +268,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
268268
);
269269
}
270270
return (
271-
<div className='cellClass flex gap-1'>
271+
<div className='cellClass flex! gap-1'>
272272
<div>
273273
<StatusIndicator type={statusCheck(info.getValue())} />
274274
</div>
@@ -341,7 +341,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
341341
cell: (info: CellContext<CustomFile, string>) => {
342342
if (parseInt(info.getValue()) === 100 || info.row.original?.status === 'New') {
343343
return (
344-
<div className='flex gap-1 items-center'>
344+
<div className='flex! gap-1 items-center'>
345345
<Typography variant='body-medium'>
346346
<StatusIndicator type='success' />
347347
</Typography>
@@ -352,7 +352,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
352352
return <CustomProgressBar value={parseInt(info?.getValue())}></CustomProgressBar>;
353353
} else if (info.row.original?.status === 'Failed') {
354354
return (
355-
<div className='flex gap-1 items-center'>
355+
<div className='flex! gap-1 items-center'>
356356
<Typography variant='body-medium'>
357357
<StatusIndicator type='danger' />
358358
</Typography>
@@ -361,7 +361,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
361361
);
362362
}
363363
return (
364-
<div className='flex items-center gap-1'>
364+
<div className='flex! items-center gap-1'>
365365
<Typography variant='body-medium'>
366366
<StatusIndicator type='success' />
367367
</Typography>

‎frontend/src/components/Graph/GraphPropertiesPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const GraphPropertiesPanel = ({ inspectedItem, newScheme }: GraphPropertiesPanel
6969
<h6 className='mr-auto'>{inspectedItemType === 'node' ? 'Node details' : 'Relationship details'}</h6>
7070
</ResizePanelDetails.Title>
7171
<ResizePanelDetails.Content>
72-
<div className='mx-4 flex flex-row flex-wrap gap-2'>
72+
<div className='mx-4 flex! flex-row flex-wrap gap-2'>
7373
{isNode(inspectedItem) ? (
7474
labelsSorted.map((label) => (
7575
<LegendsChip type='node' key={`node ${label}`} label={label} scheme={newScheme} />

0 commit comments

Comments
 (0)