Add agent ui, including ui code, readme and launch script.

Add AgentQnA ui code, supplemented UI related readme and dockerFile, as well as the corresponding startup scripts.

Signed-off-by: WenjiaoYue <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>

.github/workflows/check-online-doc-build.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
 
     - name: Checkout

.github/workflows/pr-dockerfile-path-and-build-yaml-scan.yml

@@ -60,7 +60,7 @@ jobs:
           shopt -s globstar
           no_add="FALSE"
           cd ${{github.workspace}}
-          Dockerfiles=$(realpath $(find ./ -name '*Dockerfile*' ! -path './tests/*'))
+          Dockerfiles=$(realpath $(find ./ -name '*Dockerfile*' ! -path '*/tests/*'))
           if [ -n "$Dockerfiles" ]; then
             for dockerfile in $Dockerfiles; do
               service=$(echo "$dockerfile" | awk -F '/GenAIExamples/' '{print $2}' | awk -F '/' '{print $2}')

AgentQnA/README.md

@@ -3,7 +3,7 @@
 ## Overview
 
 This example showcases a hierarchical multi-agent system for question-answering applications. The architecture diagram is shown below. The supervisor agent interfaces with the user and dispatch tasks to the worker agent and other tools to gather information and come up with answers. The worker agent uses the retrieval tool to generate answers to the queries posted by the supervisor agent. Other tools used by the supervisor agent may include APIs to interface knowledge graphs, SQL databases, external knowledge bases, etc.
-![Architecture Overview](assets/agent_qna_arch.png)
+![Architecture Overview](assets/img/agent_qna_arch.png)
 
 The AgentQnA example is implemented using the component-level microservices defined in [GenAIComps](https://github.com/opea-project/GenAIComps). The flow chart below shows the information flow between different microservices for this example.
 

AgentQnA/docker_image_build/build.yaml

@@ -11,3 +11,9 @@ services:
         https_proxy: ${https_proxy}
         no_proxy: ${no_proxy}
     image: ${REGISTRY:-opea}/agent:${TAG:-latest}
+  agent-ui:
+    build:
+      context: ../ui
+      dockerfile: ./docker/Dockerfile
+    extends: agent
+    image: ${REGISTRY:-opea}/agent-ui:${TAG:-latest}

AgentQnA/ui/svelte/.eslintrc.cjs

@@ -1,11 +1,7 @@
 module.exports = {
 	root: true,
 	parser: "@typescript-eslint/parser",
-	extends: [
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended",
-		"prettier",
-	],
+	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
 	plugins: ["svelte3", "@typescript-eslint", "neverthrow"],
 	ignorePatterns: ["*.cjs"],
 	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],

AgentQnA/ui/svelte/README.md

@@ -0,0 +1,60 @@
+# AgentQnA
+
+## 📸 Project Screenshots
+
+![project-screenshot](../../assets/img/agent_ui.png)
+![project-screenshot](../../assets/img/agent_ui_result.png)
+
+## 🧐 Features
+
+Here're some of the project's features:
+
+- Create Agent：Provide more precise answers based on user queries, showcase the high-quality output process of complex queries across different dimensions, and consolidate information to present comprehensive answers.
+
+## 🛠️ Get it Running
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+   ```
+   cd AgentQnA/ui
+   ```
+
+3. Modify the required .env variables.
+
+   ```
+   AGENT_URL = ''
+   ```
+
+4. **For Local Development:**
+
+- Install the dependencies:
+
+  ```
+  npm install
+  ```
+
+- Start the development server:
+
+  ```
+  npm run dev
+  ```
+
+- The application will be available at `http://localhost:3000`.
+
+5. **For Docker Setup:**
+
+- Build the Docker image:
+
+  ```
+  docker build -t opea:agent-ui .
+  ```
+
+- Run the Docker container:
+
+  ```
+  docker run -d -p 3000:3000 --name agent-ui opea:agent-ui
+  ```
+
+- The application will be available at `http://localhost:3000`.

AgentQnA/ui/svelte/postcss.config.cjs

@@ -1,13 +1,13 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
 
 const config = {
 	plugins: [
 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 		tailwindcss(),
 		//But others, like autoprefixer, need to run after,
-		autoprefixer
-	]
+		autoprefixer,
+	],
 };
 
 module.exports = config;

AgentQnA/ui/svelte/src/app.d.ts

@@ -1,3 +1,6 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
 // See: https://kit.svelte.dev/docs/types#app
 // import { Result} from "neverthrow";
 
@@ -21,44 +24,27 @@ interface User {
 type AuthResponse = Result<User>;
 
 interface AuthAdapter {
-	login(props: {
-		email: string;
-		password: string;
-	}): Promise<AuthResponse>;
-	signup(props: {
-		email: string;
-		password: string;
-		password_confirm: string;
-	}): Promise<AuthResponse>;
-	validate_session(props: {
-		token: string;
-	}): Promise<AuthResponse>;
-	logout(props: {
-		token: string;
-		email: string;
-	}): Promise<Result<void>>;
-	forgotPassword(props: {
-		email: string;
-		password: string;
-	}): Promise<Result<void>>;
+	login(props: { email: string; password: string }): Promise<AuthResponse>;
+	signup(props: { email: string; password: string; password_confirm: string }): Promise<AuthResponse>;
+	validate_session(props: { token: string }): Promise<AuthResponse>;
+	logout(props: { token: string; email: string }): Promise<Result<void>>;
+	forgotPassword(props: { email: string; password: string }): Promise<Result<void>>;
 }
 
 interface ChatAdapter {
-	modelList(props: {
-	}): Promise<Result<void>>;
-	txt2img(props: {
-	}): Promise<Result<void>>;
+	modelList(props: {}): Promise<Result<void>>;
+	txt2img(props: {}): Promise<Result<void>>;
 }
 
 interface ChatMessage {
-	role: string,
-	content: string
+	role: string;
+	content: string;
 }
 
 interface ChatMessageType {
-	model: string,
-	knowledge: string,
-	temperature: string,
-	max_new_tokens: string,
-	topk: string,
-}
+	model: string;
+	knowledge: string;
+	temperature: string;
+	max_new_tokens: string;
+	topk: string;
+}

AgentQnA/ui/svelte/src/app.html

@@ -1,10 +1,13 @@
-<!DOCTYPE html>
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>

AgentQnA/ui/svelte/src/lib/assets/Agent/createSub.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731984271860"
 	class="w-8 h-8"

AgentQnA/ui/svelte/src/lib/assets/Agent/download.svelte

@@ -1,4 +1,9 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"/>
     <path d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
-  </svg>
+  </svg>

AgentQnA/ui/svelte/src/lib/assets/Agent/eye.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 						class="me-2 h-3 w-3"
 						aria-hidden="true"
@@ -8,4 +13,4 @@
 						<path
 							d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
 						/>
-					</svg>
+					</svg>

AgentQnA/ui/svelte/src/lib/assets/Agent/newAI.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <!-- <svg class="h-11 w-11 flex-none overflow-visible" fill="none"
 	><defs
 		><filter

AgentQnA/ui/svelte/src/lib/assets/Agent/resource.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg class="h-5 w-5 flex-shrink-0 text-[#1d4dd5]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
   <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd"></path>
-</svg>
+</svg>

AgentQnA/ui/svelte/src/lib/assets/Agent/search.svelte

@@ -1,8 +1,13 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 			class="pointer-events-none absolute left-0 ml-4 hidden h-4 w-4 fill-current text-gray-500 group-hover:text-gray-400 sm:block"
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
 			><path
 				d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"
 			/></svg
-		>
+		>

AgentQnA/ui/svelte/src/lib/assets/Agent/searchDelete.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 				fill="none"
 				class="relative h-5 w-5"
@@ -9,4 +14,4 @@
 				><path
 					d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
 				/></svg
-			>
+			>

AgentQnA/ui/svelte/src/lib/assets/Agent/searchResult.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731987484014"
 	class="w-5 h-5"

AgentQnA/ui/svelte/src/lib/assets/Agent/star.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1730766012593"
 	viewBox="0 0 1024 1024"

AgentQnA/ui/svelte/src/lib/assets/Agent/summary.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731984744752"
 	class="w-12 h-12"

AgentQnA/ui/svelte/src/lib/assets/Agent/taskIcon.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731987065328"
 	class="w-5 h-5"

AgentQnA/ui/svelte/src/lib/assets/Agent/taskResult.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731987759041"
 	class="w-7 h-7"

AgentQnA/ui/svelte/src/lib/assets/Agent/time.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
-</svg>
+</svg>

AgentQnA/ui/svelte/src/lib/assets/Agent/toolIcon.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1731987374334"
 	class="w-4 h-4"

AgentQnA/ui/svelte/src/lib/assets/icons/ActiveDislikeButtonIcon.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1699532005309"
 	class="icon"
@@ -21,4 +26,3 @@
 		class=""
 	/></svg
 >
-

AgentQnA/ui/svelte/src/lib/assets/icons/ActiveLikeButtonIcon.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1699531880178"
 	class="icon"

AgentQnA/ui/svelte/src/lib/assets/icons/Folder.svelte

@@ -1,3 +1,8 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <svg
 	t="1697617760586"
 	class="h-10 w-10"