neo4j-labs · praveshkumar1988 · Feb 21, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -360,4 +360,15 @@
   height: calc(100vh - 58px);
   min-height: 200px;
   display: flex
+}
+.profile-container{
+  display:flex;
+  gap:4px;
+  align-items:center;
+  border: 1px solid rgb(var(--theme-palette-neutral-border-strong));
+  border-radius: 12px;
+}
+.websource-btn-container{
+  display: flex;
+  gap: 10px;
 }
diff --git a/frontend/src/components/ChatBot/ChatInfoModal.tsx b/frontend/src/components/ChatBot/ChatInfoModal.tsx
@@ -315,13 +315,13 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   );
   return (
     <div className='n-bg-palette-neutral-bg-weak p-4'>
-      <div className='flex flex-row pb-6 items-center mb-2'>
+      <div className='flex! flex-row pb-6 items-center mb-2'>
         <img
           src={Neo4jRetrievalLogo}
           style={{ width: isTablet ? 80 : 95, height: isTablet ? 80 : 95, marginRight: 10 }}
           loading='lazy'
         />
-        <div className='flex flex-col'>
+        <div className='flex! flex-col'>
           <Typography variant='h2'>Retrieval information</Typography>
           <Typography variant='body-medium' className='mb-2'>
             To generate this response, the process took <span className='font-bold'>{response_time} seconds,</span>
@@ -499,7 +499,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
         )}
       </Flex>
       {activeTab == 4 && nodes?.length && relationships?.length && mode !== chatModeLables.graph ? (
-        <div className='button-container flex mt-2 justify-center'>
+        <div className='button-container flex! mt-2 justify-center'>
           <GraphViewButton
             nodeValues={nodes}
             relationshipValues={relationships}

diff --git a/frontend/src/components/ChatBot/Chatbot.tsx b/frontend/src/components/ChatBot/Chatbot.tsx
@@ -406,26 +406,26 @@ const Chatbot: FC<ChatbotProps> = (props) => {
   }, []);
 
   return (
-    <div className='n-bg-palette-neutral-bg-weak flex flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
+    <div className='n-bg-palette-neutral-bg-weak flex! flex-col justify-between min-h-full max-h-full overflow-hidden relative'>
       {isDeleteChatLoading && (
         <div className='chatbot-deleteLoader'>
           <Loader title='Deleting...'></Loader>
         </div>
       )}
       <div
-        className={`flex overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
+        className={`flex! overflow-y-auto pb-12 min-w-full pl-5 pr-5 chatBotContainer ${
           isChatOnly ? 'min-h-[calc(100dvh-114px)] max-h-[calc(100dvh-114px)]' : ''
         } `}
       >
         <Widget className='n-bg-palette-neutral-bg-weak w-full' header='' isElevated={false}>
-          <div className='flex flex-col gap-4 gap-y-4'>
+          <div className='flex! flex-col gap-4 gap-y-4'>
             {listMessages.map((chat, index) => {
               const messagechatModes = Object.keys(chat.modes);
               return (
                 <div
                   ref={messagesEndRef}
                   key={chat.id}
-                  className={clsx(`flex gap-2.5`, {
+                  className={clsx(`flex! gap-2.5`, {
                     'flex-row': chat.user === 'chatbot',
                     'flex-row-reverse': chat.user !== 'chatbot',
                   })}
@@ -545,8 +545,8 @@ const Chatbot: FC<ChatbotProps> = (props) => {
           </div>
         </Widget>
       </div>
-      <div className='n-bg-palette-neutral-bg-weak flex gap-2.5 bottom-0 p-2.5 w-full'>
-        <form onSubmit={handleSubmit} className={`flex gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
+      <div className='n-bg-palette-neutral-bg-weak flex! gap-2.5 bottom-0 p-2.5 w-full'>
+        <form onSubmit={handleSubmit} className={`flex! gap-2.5 w-full ${!isFullScreen ? 'justify-between' : ''}`}>
           <TextInput
             className={`n-bg-palette-neutral-bg-default flex-grow-7 ${
               isFullScreen ? 'w-[calc(100%-105px)]' : 'w-[70%]'

diff --git a/frontend/src/components/ChatBot/ChunkInfo.tsx b/frontend/src/components/ChatBot/ChunkInfo.tsx
@@ -36,7 +36,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
   return (
     <>
       {loading ? (
-        <div className='flex justify-center items-center'>
+        <div className='flex! justify-center items-center'>
           <LoadingSpinner size='small' />
         </div>
       ) : chunks?.length > 0 ? (
@@ -46,7 +46,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
               <li key={chunk.id} className='mb-2'>
                 {chunk?.page_number ? (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       <>
                         <DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
                         <Typography
@@ -79,7 +79,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && chunk?.start_time ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={youtubelogo} width={20} height={20} className='mr-2' />
                       <TextLink href={generateYouTubeLink(chunk?.url, chunk?.start_time)} isExternalLink={true}>
                         <Typography
@@ -111,7 +111,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && new URL(chunk.url).host === 'wikipedia.org' ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={wikipedialogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -135,7 +135,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && new URL(chunk.url).host === 'storage.googleapis.com' ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={gcslogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -159,7 +159,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : chunk?.url && chunk?.url.startsWith('s3://') ? (
                   <>
-                    <div className='flex flex-row inline-block justiy-between items-center'>
+                    <div className='flex! flex-row inline-block justiy-between items-center'>
                       <img src={s3logo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
@@ -185,7 +185,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   !chunk?.url.startsWith('s3://') &&
                   !isAllowedHost(chunk?.url, ['storage.googleapis.com', 'wikipedia.org', 'youtube.com']) ? (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       <GlobeAltIconOutline className='n-size-token-7' />
                       <TextLink href={chunk?.url} isExternalLink={true}>
                         <Typography variant='body-medium'>{chunk?.url}</Typography>
@@ -211,7 +211,7 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                   </>
                 ) : (
                   <>
-                    <div className='flex flex-row inline-block items-center'>
+                    <div className='flex! flex-row inline-block items-center'>
                       {chunk.fileSource === 'local file' ? (
                         <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                       ) : (

diff --git a/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx b/frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx
@@ -22,7 +22,7 @@ const ExpandedChatButtonContainer: React.FC<IconProps> = ({ closeChatBot, delete
         menuAnchor={chatAnchor}
         isRoot={false}
       />
-      <div className='h-[48px]! mx-2 flex items-center'>
+      <div className='h-[48px]! mx-2 flex! items-center'>
         <div ref={chatAnchor}>
           <IconButtonWithToolTip
             onClick={() => {

diff --git a/frontend/src/components/ChatBot/SourcesInfo.tsx b/frontend/src/components/ChatBot/SourcesInfo.tsx
@@ -37,8 +37,8 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
             .map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
             .map((s, index) => {
               return (
-                <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                <li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     {s.fileSource === 'local file' ? (
                       <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                     ) : (
@@ -59,11 +59,11 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
         <ul className='list-class list-none'>
           {sources.map((link, index) => {
             return (
-              <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
+              <li key={index} className='flex! flex-row inline-block justify-between items-center p-2'>
                 {link?.startsWith('http') || link?.startsWith('https') ? (
                   <>
                     {isAllowedHost(link, ['wikipedia.org']) && (
-                      <div className='flex flex-row inline-block justify-between items-center'>
+                      <div className='flex! flex-row inline-block justify-between items-center'>
                         <img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
                         <TextLink href={link} isExternalLink={true}>
                           <HoverableLink url={link}>
@@ -78,7 +78,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       </div>
                     )}
                     {isAllowedHost(link, ['storage.googleapis.com']) && (
-                      <div className='flex flex-row inline-block justify-between items-center'>
+                      <div className='flex! flex-row inline-block justify-between items-center'>
                         <img src={gcslogo} width={20} height={20} className='mr-2' alt='Google Cloud Storage Logo' />
                         <Typography
                           variant='body-medium'
@@ -90,7 +90,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     )}
                     {youtubeLinkValidation(link) && (
                       <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
+                        <div className='flex! flex-row inline-block justiy-between items-center'>
                           <img src={youtubelogo} width={20} height={20} className='mr-2' />
                           <TextLink href={link} isExternalLink={true}>
                             <HoverableLink url={link}>
@@ -107,7 +107,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     )}
                     {!link?.startsWith('s3://') &&
                       !isAllowedHost(link, ['storage.googleapis.com', 'wikipedia.org', 'www.youtube.com']) && (
-                        <div className='flex flex-row inline-block justify-between items-center'>
+                        <div className='flex! flex-row inline-block justify-between items-center'>
                           <GlobeAltIconOutline className='n-size-token-7' />
                           <TextLink href={link} isExternalLink={true}>
                             <Typography variant='body-medium'>{link}</Typography>
@@ -116,7 +116,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                       )}
                   </>
                 ) : link?.startsWith('s3://') ? (
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     <img src={s3logo} width={20} height={20} className='mr-2' alt='S3 Logo' />
                     <Typography
                       variant='body-medium'
@@ -126,7 +126,7 @@ const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
                     </Typography>
                   </div>
                 ) : (
-                  <div className='flex flex-row inline-block justify-between items-center'>
+                  <div className='flex! flex-row inline-block justify-between items-center'>
                     <DocumentTextIconOutline className='n-size-token-7 mr-2' />
                     <Typography
                       variant='body-medium'

diff --git a/frontend/src/components/Content.tsx b/frontend/src/components/Content.tsx
@@ -889,7 +889,7 @@ const Content: React.FC<ContentProps> = ({
             <span className='h6 px-1'>Neo4j connection {isReadOnlyUser ? '(Read only Mode)' : ''}</span>
             <Typography variant='body-medium'>
               <DatabaseStatusIcon isConnected={connectionStatus} isGdsActive={isGdsActive} uri={userCredentials?.uri} />
-              <div className='pt-1 flex gap-1 items-center'>
+              <div className='pt-1 flex! gap-1 items-center'>
                 <div>{!hasSelections ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}</div>
                 <div>
                   {hasSelections ? (

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
@@ -32,7 +32,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
           type='select'
           label='LLM Models'
           helpText={
-            <div className='w-max! flex gap-1 items-center'>
+            <div className='w-max! flex! gap-1 items-center'>
               <span>
                 <InformationCircleIconOutline title='info' aria-label='infoicon' className='n-size-token-6' />
               </span>

diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx
@@ -177,7 +177,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
           if (info.getValue() != 'Processing') {
             return (
               <div
-                className='cellClass flex gap-1 items-center'
+                className='cellClass flex! gap-1 items-center'
                 title={info.row.original?.status === 'Failed' ? info.row.original?.errorMessage : ''}
               >
                 <div>
@@ -203,7 +203,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           } else if (info.getValue() === 'Processing' && info.row.original.processingProgress === undefined) {
             return (
-              <div className='cellClass flex gap-1 items-center'>
+              <div className='cellClass flex! gap-1 items-center'>
                 <div>
                   <StatusIndicator type={statusCheck(info.getValue())} />
                 </div>
@@ -268,7 +268,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           }
           return (
-            <div className='cellClass flex gap-1'>
+            <div className='cellClass flex! gap-1'>
               <div>
                 <StatusIndicator type={statusCheck(info.getValue())} />
               </div>
@@ -341,7 +341,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
         cell: (info: CellContext<CustomFile, string>) => {
           if (parseInt(info.getValue()) === 100 || info.row.original?.status === 'New') {
             return (
-              <div className='flex gap-1 items-center'>
+              <div className='flex! gap-1 items-center'>
                 <Typography variant='body-medium'>
                   <StatusIndicator type='success' />
                 </Typography>
@@ -352,7 +352,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             return <CustomProgressBar value={parseInt(info?.getValue())}></CustomProgressBar>;
           } else if (info.row.original?.status === 'Failed') {
             return (
-              <div className='flex gap-1 items-center'>
+              <div className='flex! gap-1 items-center'>
                 <Typography variant='body-medium'>
                   <StatusIndicator type='danger' />
                 </Typography>
@@ -361,7 +361,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
             );
           }
           return (
-            <div className='flex items-center gap-1'>
+            <div className='flex! items-center gap-1'>
               <Typography variant='body-medium'>
                 <StatusIndicator type='success' />
               </Typography>

diff --git a/frontend/src/components/Graph/GraphPropertiesPanel.tsx b/frontend/src/components/Graph/GraphPropertiesPanel.tsx
@@ -69,7 +69,7 @@ const GraphPropertiesPanel = ({ inspectedItem, newScheme }: GraphPropertiesPanel
         <h6 className='mr-auto'>{inspectedItemType === 'node' ? 'Node details' : 'Relationship details'}</h6>
       </ResizePanelDetails.Title>
       <ResizePanelDetails.Content>
-        <div className='mx-4 flex flex-row flex-wrap gap-2'>
+        <div className='mx-4 flex! flex-row flex-wrap gap-2'>
           {isNode(inspectedItem) ? (
             labelsSorted.map((label) => (
               <LegendsChip type='node' key={`node ${label}`} label={label} scheme={newScheme} />

diff --git a/frontend/src/components/Graph/GraphPropertiesTable.tsx b/frontend/src/components/Graph/GraphPropertiesTable.tsx
@@ -5,7 +5,7 @@ const GraphPropertiesTable = ({ propertiesWithTypes }: GraphPropertiesTableProps
   console.log('proerties', propertiesWithTypes);
   return (
     <div className='flex w-full flex-col break-all px-4 text-sm' data-testid='viz-details-pane-properties-table'>
-      <div className='mb-1 flex flex-row pl-2'>
+      <div className='mb-1 flex! flex-row pl-2'>
         <Typography variant='body-medium' className='basis-1/3'>
           Key
         </Typography>
@@ -15,7 +15,7 @@ const GraphPropertiesTable = ({ propertiesWithTypes }: GraphPropertiesTableProps
         .filter(({ value }) => value !== undefined && value !== null && value !== '' && !Array.isArray(value))
         .map(({ key, value }, _) => {
           return (
-            <div key={key} className='border-palette-neutral-border-weak flex border-t py-1 pl-2 first:border-none'>
+            <div key={key} className='border-palette-neutral-border-weak flex! border-t py-1 pl-2 first:border-none'>
               <div className='shrink basis-1/3 overflow-hidden whitespace-nowrap'>
                 <GraphLabel
                   type='propertyKey'