feat(assistant): improve uuv assistant design,#623

Orange-OpenSource · May 21, 2024 · c7c01da · c7c01da
1 parent 8460561
commit c7c01da
Show file tree

Hide file tree

Showing 10 changed files with 48,291 additions and 47,890 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/assistant/bundle-script.js b/packages/assistant/bundle-script.js
@@ -23,6 +23,14 @@ window.onload = function() {
         }) : new Event("UUVAssistantReadyToLoad");
         rootElement.id = "uvv-assistant-root";
         document.body.appendChild(rootElement);
+        
+        const additionalLayersElement = document.createElement("div");
+        additionalLayersElement.id = "uvv-assistant-additional-layers";
+        const keyboardLayerElement = document.createElement("div");
+        keyboardLayerElement.id = "uvv-assistant-keyboard-layer";
+        additionalLayersElement.appendChild(keyboardLayerElement);
+        document.body.appendChild(additionalLayersElement);
+        
         document.dispatchEvent(event);
 
         const style = document.createElement("style");

diff --git a/packages/assistant/package.json b/packages/assistant/package.json
@@ -34,13 +34,13 @@
   },
   "scripts": {
     "react:start": "react-scripts start",
-    "build:react": "react-scripts build",
+    "build-react": "react-scripts build",
     "react:test": "react-scripts test",
     "react:eject": "react-scripts eject",
     "launch": "ts-node launcher/uuv-assistant-launcher.ts",
     "launch:custom": "ts-node tests/uuv-assistant-custom-launcher.ts",
-    "build:conf": "node compute-conf.js",
-    "build:bundle": "node bundle-script.js",
+    "build-conf": "node compute-conf.js",
+    "build-bundle": "node bundle-script.js",
     "package": "npm pack --pack-destination=\"../../dist/packages\"",
     "lint": "eslint -c .eslintrc.json",
     "test": "npm run unit-test && npm run e2e-test:run",
@@ -56,7 +56,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
+    "@codemirror/legacy-modes": "^6.4.0",
+    "@codemirror/lint": "^6.7.1",
+    "@codemirror/view": "^6.26.3",
     "@cucumber/cucumber": "9.6.0",
+    "@uiw/codemirror-theme-github": "^4.22.1",
+    "@uiw/react-codemirror": "^4.22.1",
     "@uuv/runner-commons": "2.13.0",
     "antd": "5.17.2",
     "figlet": "1.7.0",

diff --git a/packages/assistant/project.json b/packages/assistant/project.json
@@ -5,7 +5,7 @@
   "root": "packages/assistant",
   "projectType": "library",
   "targets": {
-    "build:tsc": {
+    "build-tsc": {
       "executor": "@nx/js:tsc",
       "inputs": [
         "{projectRoot}/launcher/*"
@@ -33,13 +33,13 @@
         "{projectRoot}/dist/uuv-assistant-resources.bundle.js"
       ],
       "options": {
-        "script": "build:bundle"
+        "script": "build-bundle"
       },
       "dependsOn": [
-        "build:conf"
+        "build-conf"
       ]
     },
-    "build:conf": {
+    "build-conf": {
       "executor": "nx:run-script",
       "inputs": [
         "{projectRoot}/compute-conf.js",
@@ -50,14 +50,14 @@
         "{projectRoot}/launcher/conf.json"
       ],
       "options": {
-        "script": "build:conf"
+        "script": "build-conf"
       },
       "dependsOn": [
-        "build:react",
-        "build:tsc"
+        "build-react",
+        "build-tsc"
       ]
     },
-    "build:react": {
+    "build-react": {
       "executor": "nx:run-script",
       "inputs": [
         "{projectRoot}/src/*"
@@ -66,7 +66,7 @@
         "{projectRoot}/build"
       ],
       "options": {
-        "script": "build:react"
+        "script": "build-react"
       }
     },
     "lint": {

diff --git a/packages/assistant/public/index.html b/packages/assistant/public/index.html
@@ -50,5 +50,8 @@ <h1>Grouping Form Data with Fieldset</h1>
   <input type="submit" value="Submit">
 </main>
 <div id="uvv-assistant-root"></div>
+<div id="uvv-assistant-additional-layers">
+  <div id="uvv-assistant-keyboard-layer"></div>
+</div>
 </body>
 </html>
diff --git a/packages/assistant/src/UuvAssistant.css b/packages/assistant/src/UuvAssistant.css
@@ -1,10 +1,75 @@
-.anticon {
-    display: inline-flex !important;
+#uuvAssistantMenu {
+    position: fixed;
+    top: 0;
+    z-index: 10000;
+}
+
+#uuvAssistantMenu > * {
+    z-index: 10001;
+}
+
+#uuvAssistantResultZone {
+    background-color: #001529;
+    position: fixed;
+    right: 60px;
+    height: 100vh;
+    top: 0;
+    width: 550px;
+    border-right: solid 1px white;
+}
+
+#uuvAssistantResultZone header {
+    padding: 10px;
+    border-bottom: solid 1px white;
+}
+
+#uuvAssistantResultZone header h2 {
+    font-size: 25px;
+    margin: 0;
+}
+
+#uuvAssistantResultZone .cm-theme {
+    flex: 1 1 auto;
+}
+
+#uuvAssistantMainBar {
+    position: fixed;
+    height: 100vh;
+    top: 0;
+    right: 0;
+    background-color: #001529;
+    min-width: 60px !important;
+    width: 60px !important;
 }
 
-.uuvAssistant {
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
-    opacity: 95%;
+#uuvAssistantMainBar .ant-menu {
+    width: 60px !important;
+}
+
+.uuvAssistantTitle {
+    font-size: smaller;
+    font-weight: bolder;
+    text-align: center;
+}
+
+.uuvAssistantAvatar {
+    background-color: transparent;
+    height: 50px;
+    width: 50px;
+    border: 1.5px solid white;
+}
+
+.uuvAssistantIcon {
+    width: 40px;
+    height: 40px;
+}
+
+.ant-layout-sider {
+    padding: 20px 0;
+}
+
+.anticon {
+    display: inline-flex !important;
 }
 
 .uuvArrowExpander {
@@ -14,7 +79,6 @@
     height: 30px;
     width: 30px;
     border-color: grey;
-    position: absolute;
 }
 
 .uuvFloatingButton {