Merge pull request #127 from neo4j-labs/integrate-chatbot-with-the-api

Integrate chatbot with the api

Author: praveshkumar1988

frontend/.eslintrc.json

@@ -11,7 +11,7 @@
         "version": "detect"
       }
     },
-    "ignorePatterns": ["node_modules/**", "packages/**/dist/**", "packages/**/coverage/**"],
+    "ignorePatterns": ["node_modules/**", "packages/**/dist/**", "packages/**/coverage/**","nvl-modules/"],
     "rules": {
       "@typescript-eslint/no-explicit-any": "off", // Off for v1
       "@typescript-eslint/ban-ts-comment": "off", // Off for v1

frontend/package.json

@@ -14,9 +14,9 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.10",
     "@mui/styled-engine": "^5.15.9",
-    "@neo4j-ndl/base": "^2.3.0",
-    "@neo4j-ndl/react": "^2.3.0",
     "@types/uuid": "^9.0.7",
+    "@neo4j-ndl/base": "^2.6.0",
+    "@neo4j-ndl/react": "^2.6.2",
     "axios": "^1.6.5",
     "eslint-plugin-react": "^7.33.2",
     "neo4j-driver": "^5.14.0",

frontend/src/App.css

@@ -3,12 +3,14 @@
   height: calc(-322px + 100dvh);
   border: 1px solid #d1d5db;
 }
+
 .fileTableWithExpansion {
   width: calc(-400px + 100dvw) !important;
   height: calc(-322px + 100dvh);
   border: 1px solid #d1d5db;
 }
-.fileTableWithBothDrawers{
+
+.fileTableWithBothDrawers {
   width: calc(-650px + 100dvw) !important;
   height: calc(-322px + 100dvh);
   border: 1px solid #d1d5db;
@@ -17,9 +19,11 @@
 .fileTableWithExpansion .ndl-div-table {
   width: max-content !important;
 }
+
 .filetable .ndl-div-table {
   width: 100% !important;
 }
+
 .contentWithExpansion {
   width: calc(-360px + 100dvw);
   height: calc(100dvh - 60px);
@@ -30,7 +34,8 @@
   gap: 5px;
   position: relative;
 }
-.contentWithBothDrawers{
+
+.contentWithBothDrawers {
   width: calc(-721px + 100dvw);
   height: calc(100dvh - 60px);
   padding: 3;
@@ -40,7 +45,8 @@
   gap: 5px;
   position: relative;
 }
-.contentWithChatBot{
+
+.contentWithChatBot {
   width: calc(-385px + 100dvw);
   height: calc(100dvh - 60px);
   padding: 3;
@@ -50,6 +56,7 @@
   gap: 5px;
   position: relative;
 }
+
 .contentWithNoExpansion {
   width: calc(100% - 64px);
   height: calc(100dvh - 60px);
@@ -70,7 +77,7 @@
   outline-color: #d1d5db;
 }
 
-.s3Container > button > div {
+.s3Container>button>div {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -84,12 +91,14 @@
 .ndl-data-grid-root .ndl-data-grid-navigation {
   padding-block: 5px !important;
 }
+
 .ndl-drawer .ndl-drawer-close-button {
-  background-color: rgb(var(--theme-palette-neutral-bg-strong)); 
-  width: 40px !important;
-  height: 40px !important;
-  right: 10px !important;
+  background-color: rgb(var(--theme-palette-neutral-bg-strong));
+  width: 36px !important;
+  height: 36px !important;
+  right: 5px !important;
 }
+
 .custombutton {
   display: flex;
   align-items: center;
@@ -98,16 +107,19 @@
   flex-direction: column;
   padding-block: 10px;
 }
+
 .brandimg {
   width: 70px;
   height: 70px;
   object-fit: contain;
 }
+
 ::placeholder {
   color: rgb(135, 130, 130) !important;
 }
+
 .textellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}

frontend/src/assets/ChatbotMessages.json

@@ -8,7 +8,7 @@
     },
     {
       "id": 2,
-      "message": "Sure, I can help with that. What specific data are you looking to retrieve?",
+      "message": "Hi there! Welcome to Neo4j Chat! Your insights are just a click away from completed files",
       "user": "chatbot",
       "datetime": "01/01/2024 00:00:00"
     },