[Feat] Add GenAI Studio UI improvement

[+] Add hover animation and arrowmark when create new edges
[+] Add different icons for nodes based on category
[+] Add minimap to render an overview of flow
[+] Add Toast notification to warn user for incorrect node connection
[+] Add package.json dependencies

Co-authored-by: Hao Ruan <hao.ruan@intel.com>
Signed-off-by: lianyueh <yuehan.lian@intel.com>

Author: lianyueh

studio-frontend/package.json

@@ -106,5 +106,11 @@
                 }
             ]
         ]
+    },
+    "dependencies": {
+        "@opentelemetry/exporter-trace-otlp-grpc": "^0.57.2",
+        "@opentelemetry/exporter-trace-otlp-proto": "^0.57.2",
+        "@opentelemetry/sdk-trace-node": "^1.30.1",
+        "react-toastify": "^11.0.5"
     }
 }

studio-frontend/packages/server/src/nodes/README

@@ -0,0 +1,4 @@
+# Attribution
+
+In this folder, we use icons from
+<a href="https://www.flaticon.com/free-icons/filter" title="filter icons"> Filter icons created by juicy_fish, Vectorslab, Prosymbols Premium, Freeplk, SmashIcons, orvlpixel, FACH - Flaticon</a> which pictures files with suffix `*.png` 

studio-frontend/packages/server/src/nodes/chat_completion.js

@@ -6,7 +6,7 @@ class OPEAChatCompletion {
         this.name = 'chat_completion'
         this.version = 1.0
         this.type = 'ChatCompletion'
-        this.icon = 'opea-icon-color.svg'
+        this.icon = 'controls.png'
         this.category = 'Controls'
         this.description = 'Send Chat Response to UI'
         this.baseClasses = []

studio-frontend/packages/server/src/nodes/chat_input.js

@@ -6,7 +6,7 @@ class OPEAChatInput {
         this.name = 'chat_input'
         this.version = 1.0
         this.type = 'ChatCompletionRequest'
-        this.icon = 'opea-icon-color.svg'
+        this.icon = 'controls.png'
         this.category = 'Controls'
         this.description = 'User Input from Chat Window'
         this.baseClasses = [this.type]

studio-frontend/packages/server/src/nodes/controls.png

@@ -6,7 +6,7 @@ class OPEADocInput {
         this.name = 'doc_input'
         this.version = 1.0
         this.type = 'UploadFile'
-        this.icon = 'opea-icon-color.svg'
+        this.icon = 'controls.png'
         this.category = 'Controls'
         this.description = 'User Input from Document Upload'
         this.baseClasses = [this.type]