ProductivitySuite Combo Application with REACT UI and Keycloak Authen…

…tication (#592)

* Initial commit for Combo App

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Added README Updates

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Updated README and Test Script

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* added react UI

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* added echo statement

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* Updated README

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* fixed delete file issue in data prep

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* Updated Port

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* updated readme and test file

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated readme

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* Readme Update

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* README: Include Keycloak Configuration Setup Guide

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* Update keycloak_setup_guide relative link

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* Added README Updates

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* ProductivitySuite: Include kubernetes deployment yaml and README steps

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* removed unwanted line

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* Updates tests

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* updated readme

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated readme

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated readme

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* removed commented code

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* Update test script to adopt opea format

Update format for ProductivitySuite test script.

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Fix productivitySuite test

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* Fix ProductivitySuite test

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* Updated Test Scripts

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Updated Scripts

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Added new services to test file

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Added check for CodeGen TGI container

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* Updated Model ID

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

* ProductivitySuite: Update react keycloak realm and client

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* ProductivitySuite: Update keycloak_setup_guide

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Updated Ports

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>

---------

Signed-off-by: Yogesh Pandey <yogesh.pandey@intel.com>
Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>
Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>
Co-authored-by: Yogesh Pandey <yogesh.pandey@intel.com>
Co-authored-by: jaswanth8888 <karani.jaswanth@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: chen, suyue <suyue.chen@intel.com>

ProductivitySuite/README.md

@@ -0,0 +1,23 @@
+# OPEA Productivity Suite Application
+
+OPEA Productivity Suite, is a powerful tool designed to streamline your workflow and boost productivity. This application leverages the cutting-edge OPEA microservices to provide a comprehensive suite of features that cater to the diverse needs of modern enterprises.
+
+### Key Features
+
+- Chat with Documents: Engage in intelligent conversations with your documents using our advanced RAG Capabilities. Our Retrieval-Augmented Generation (RAG) model allows you to ask questions, receive relevant information, and gain insights from your documents in real-time.
+
+- Content Summarization: Save time and effort by automatically summarizing lengthy documents or articles, enabling you to quickly grasp the key takeaways.
+
+- FAQ Generation: Effortlessly create comprehensive FAQs based on your documents, ensuring that your users have access to the information they need.
+
+- Code Generation: Boost your coding productivity with our code generation feature. Simply provide a description of the functionality you require, and the application will generate the corresponding code snippets, saving you valuable time and effort.
+
+- User Context Management: Maintain a seamless workflow by managing your user's context within the application. Our context management system keeps track of your documents and chat history, allowing for personalized experiences.
+
+- Identity and access management: uses OpenSource platform (Keycloak) for single sign-on identity and access management.
+
+Refer to the [Keycloak Configuration Guide](./docker/xeon/keycloak_setup_guide.md) for more instruction on setup Keycloak.
+
+Refer to the [Xeon Guide](./docker/xeon/README.md) for more instructions on building docker images from source and running the application via docker compose.
+
+Refer to the [Xeon Kubernetes Guide](./kubernetes/manifests/README.md) for more instruction on deploying the application via kubernetes.

ProductivitySuite/docker/docker_build_compose.yaml

@@ -0,0 +1,100 @@
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+services:
+ chatqna:
+ build:
+ args:
+ http_proxy: ${http_proxy}
+ https_proxy: ${https_proxy}
+ no_proxy: ${no_proxy}
+ context: ../../ChatQnA/docker/
+ dockerfile: ./Dockerfile
+ image: ${REGISTRY:-opea}/chatqna:${TAG:-latest}
+ embedding-tei:
+ build:
+ context: GenAIComps
+ dockerfile: comps/embeddings/langchain/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/embedding-tei:${TAG:-latest}
+ retriever-redis:
+ build:
+ context: GenAIComps
+ dockerfile: comps/retrievers/langchain/redis/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/retriever-redis:${TAG:-latest}
+ reranking-tei:
+ build:
+ context: GenAIComps
+ dockerfile: comps/reranks/tei/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/reranking-tei:${TAG:-latest}
+ llm-tgi:
+ build:
+ context: GenAIComps
+ dockerfile: comps/llms/text-generation/tgi/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/llm-tgi:${TAG:-latest}
+ dataprep-redis:
+ build:
+ context: GenAIComps
+ dockerfile: comps/dataprep/redis/langchain/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/dataprep-redis:${TAG:-latest}
+ promptregistry-mongo:
+ build:
+ context: GenAIComps
+ dockerfile: comps/prompt_registry/mongo/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/promptregistry-mongo-server:${TAG:-latest}
+ chathistory-mongo:
+ build:
+ context: GenAIComps
+ dockerfile: comps/chathistory/mongo/docker/Dockerfile
+ extends: chatqna
+ image: ${REGISTRY:-opea}/chathistory-mongo-server:${TAG:-latest}
+ productivity-suite-react-ui:
+ build:
+ context: ui
+ dockerfile: ./docker/Dockerfile.react
+ extends: chatqna
+ image: ${REGISTRY:-opea}/productivity-suite-react-ui-server:${TAG:-latest}
+ codegen:
+ build:
+ args:
+ http_proxy: ${http_proxy}
+ https_proxy: ${https_proxy}
+ no_proxy: ${no_proxy}
+ context: ../../CodeGen/docker/
+ dockerfile: ./Dockerfile
+ image: ${REGISTRY:-opea}/codegen:${TAG:-latest}
+ docsum:
+ build:
+ args:
+ http_proxy: ${http_proxy}
+ https_proxy: ${https_proxy}
+ no_proxy: ${no_proxy}
+ context: ../../DocSum/docker/
+ dockerfile: ./Dockerfile
+ image: ${REGISTRY:-opea}/docsum:${TAG:-latest}
+ faqgen:
+ build:
+ args:
+ http_proxy: ${http_proxy}
+ https_proxy: ${https_proxy}
+ no_proxy: ${no_proxy}
+ context: ../../FaqGen/docker/
+ dockerfile: ./Dockerfile
+ image: ${REGISTRY:-opea}/faqgen:${TAG:-latest}
+ llm_faqgen:
+ build:
+ context: GenAIComps
+ dockerfile: comps/llms/faq-generation/tgi/Dockerfile
+ extends: faqgen
+ image: ${REGISTRY:-opea}/llm-faqgen-tgi:${TAG:-latest}
+ llm_docsum_server:
+ build:
+ context: GenAIComps
+ dockerfile: comps/llms/summarization/tgi/Dockerfile
+ extends: docsum
+ image: ${REGISTRY:-opea}/llm-docsum-tgi:${TAG:-latest}

ProductivitySuite/docker/ui/docker/Dockerfile.react

@@ -0,0 +1,21 @@
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+# Use node 20.11.1 as the base image
+FROM node:20.11.1 as vite-app
+
+COPY ./react /usr/app/react
+WORKDIR /usr/app/react
+
+
+RUN ["npm", "install"]
+RUN ["npm", "run", "build"]
+
+
+FROM nginx:alpine
+
+COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html
+COPY ./react/env.sh /docker-entrypoint.d/env.sh
+
+COPY ./react/nginx.conf /etc/nginx/conf.d/default.conf
+RUN chmod +x /docker-entrypoint.d/env.sh

ProductivitySuite/docker/ui/react/.env.production

@@ -0,0 +1,16 @@
+VITE_BACKEND_SERVICE_ENDPOINT_CHATQNA=APP_BACKEND_SERVICE_ENDPOINT_CHATQNA
+VITE_BACKEND_SERVICE_ENDPOINT_CODEGEN=APP_BACKEND_SERVICE_ENDPOINT_CODEGEN
+VITE_BACKEND_SERVICE_ENDPOINT_DOCSUM=APP_BACKEND_SERVICE_ENDPOINT_DOCSUM
+VITE_BACKEND_SERVICE_ENDPOINT_FAQGEN=APP_BACKEND_SERVICE_ENDPOINT_FAQGEN
+VITE_KEYCLOAK_SERVICE_ENDPOINT=APP_KEYCLOAK_SERVICE_ENDPOINT
+
+
+VITE_DATAPREP_SERVICE_ENDPOINT=APP_DATAPREP_SERVICE_ENDPOINT
+VITE_DATAPREP_GET_FILE_ENDPOINT=APP_DATAPREP_GET_FILE_ENDPOINT
+VITE_DATAPREP_DELETE_FILE_ENDPOINT=APP_DATAPREP_DELETE_FILE_ENDPOINT
+
+VITE_CHAT_HISTORY_CREATE_ENDPOINT=APP_CHAT_HISTORY_CREATE_ENDPOINT
+VITE_CHAT_HISTORY_GET_ENDPOINT=APP_CHAT_HISTORY_GET_ENDPOINT
+VITE_CHAT_HISTORY_DELETE_ENDPOINT=APP_CHAT_HISTORY_DELETE_ENDPOINT
+VITE_PROMPT_SERVICE_GET_ENDPOINT=APP_PROMPT_SERVICE_GET_ENDPOINT
+VITE_PROMPT_SERVICE_CREATE_ENDPOINT=APP_PROMPT_SERVICE_CREATE_ENDPOINT

ProductivitySuite/docker/ui/react/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+ ignorePatterns: ["dist", ".eslintrc.cjs"],
+ parser: "@typescript-eslint/parser",
+ plugins: ["react-refresh"],
+ rules: {
+ "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+ },
+};

ProductivitySuite/docker/ui/react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ProductivitySuite/docker/ui/react/README.md

@@ -0,0 +1,82 @@
+<h1 align="center" id="title"> Productivity Suite React UI</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](../../../assets/img/chat_qna_init.png)
+![project-screenshot](../../../assets/img/Login_page.png)
+
+<h2>🧐 Features</h2>
+
+Here're some of the project's features:
+
+#### CHAT QNA
+
+- Start a Text Chat：Initiate a text chat with the ability to input written conversations, where the dialogue content can also be customized based on uploaded files.
+- Context Awareness: The AI assistant maintains the context of the conversation, understanding references to previous statements or questions. This allows for more natural and coherent exchanges.
+
+ ##### DATA SOURCE
+
+ - The choice between uploading locally or copying a remote link. Chat according to uploaded knowledge base.
+ - Uploaded File would get listed and user would be able add or remove file/links
+
+ ###### Screen Shot
+
+ ![project-screenshot](../../../assets/img/data_source.png)
+
+- Clear: Clear the record of the current dialog box without retaining the contents of the dialog box.
+- Chat history: Historical chat records can still be retained after refreshing, making it easier for users to view the context.
+- Conversational Chat : The application maintains a history of the conversation, allowing users to review previous messages and the AI to refer back to earlier points in the dialogue when necessary.
+ ###### Screen Shots
+ ![project-screenshot](../../../assets/img/chat_qna_init.png)
+ ![project-screenshot](../../../assets/img/chatqna_with_conversation.png)
+
+#### CODEGEN
+
+- Generate code: generate the corresponding code based on the current user's input.
+ ###### Screen Shot
+ ![project-screenshot](../../../assets/img/codegen.png)
+
+#### DOC SUMMARY
+
+- Summarizing Uploaded Files: Upload files from their local device, then click 'Generate Summary' to summarize the content of the uploaded file. The summary will be displayed on the 'Summary' box.
+- Summarizing Text via Pasting: Paste the text to be summarized into the text box, then click 'Generate Summary' to produce a condensed summary of the content, which will be displayed in the 'Summary' box on the right.
+- Scroll to Bottom: The summarized content will automatically scroll to the bottom.
+ ###### Screen Shot
+ ![project-screenshot](../../../assets/img/doc_summary_paste.png)
+ ![project-screenshot](../../../assets/img/doc_summary_file.png)
+
+#### FAQ Generator
+
+- Generate FAQs from Text via Pasting: Paste the text to into the text box, then click 'Generate FAQ' to produce a condensed FAQ of the content, which will be displayed in the 'FAQ' box below.
+
+- Generate FAQs from Text via txt file Upload: Upload the file in the Upload bar, then click 'Generate FAQ' to produce a condensed FAQ of the content, which will be displayed in the 'FAQ' box below.
+ ###### Screen Shot
+ ![project-screenshot](../../../assets/img/faq_generator.png)
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. create a .env file and add the following variables and values.
+ ```env
+ VITE_BACKEND_SERVICE_ENDPOINT_CHATQNA=''
+ VITE_BACKEND_SERVICE_ENDPOINT_CODEGEN=''
+ VITE_BACKEND_SERVICE_ENDPOINT_DOCSUM=''
+ VITE_BACKEND_SERVICE_ENDPOINT_FAQGEN=''
+ VITE_KEYCLOAK_SERVICE_ENDPOINT=''
+ VITE_DATAPREP_SERVICE_ENDPOINT=''
+ VITE_DATAPREP_GET_FILE_ENDPOINT=''
+ VITE_DATAPREP_DELETE_FILE_ENDPOINT=''
+ VITE_CHAT_HISTORY_CREATE_ENDPOINT=''
+ VITE_CHAT_HISTORY_GET_ENDPOINT=''
+ VITE_CHAT_HISTORY_DELETE_ENDPOINT=''
+ VITE_PROMPT_SERVICE_GET_ENDPOINT=''
+ VITE_PROMPT_SERVICE_CREATE_ENDPOINT=''
+ ```
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev`
+
+6. open http://localhost:5174 in browser to the see the UI

ProductivitySuite/docker/ui/react/env.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+for i in $(env | grep APP_) #// Make sure to use the prefix MY_APP_ if you have any other prefix in env.production file variable name replace it with MY_APP_
+do
+ key=$(echo $i | cut -d '=' -f 1)
+ value=$(echo $i | cut -d '=' -f 2-)
+ echo $key=$value
+ # sed All files
+ # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +
+
+ # sed JS and CSS only
+ find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

ProductivitySuite/docker/ui/react/index.html

@@ -0,0 +1,18 @@
+<!--
+ Copyright (C) 2024 Intel Corporation
+ SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/src/assets/opea-icon-color.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Conversations UI</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>

ProductivitySuite/docker/ui/react/nginx.conf

@@ -0,0 +1,20 @@
+server {
+ listen 80;
+
+ gzip on;
+ gzip_proxied any;
+ gzip_comp_level 6;
+ gzip_buffers 16 8k;
+ gzip_http_version 1.1;
+ gzip_types font/woff2 text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;
+
+ location / {
+ root /usr/share/nginx/html;
+ index index.html index.htm;
+ try_files $uri $uri/ /index.html =404;
+
+ location ~* \.(gif|jpe?g|png|webp|ico|svg|css|js|mp4|woff2)$ {
+ expires 1d;
+ }
+ }
+}

ProductivitySuite/docker/ui/react/package.json

@@ -0,0 +1,56 @@
+{
+ "name": "ui",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview",
+ "test": "vitest run"
+ },
+ "dependencies": {
+ "@mantine/core": "^7.11.1",
+ "@mantine/dropzone": "^7.11.1",
+ "@mantine/hooks": "^7.11.1",
+ "@mantine/notifications": "^7.10.2",
+ "@microsoft/fetch-event-source": "^2.0.1",
+ "@react-keycloak/web": "^3.4.0",
+ "@reduxjs/toolkit": "^2.2.5",
+ "@tabler/icons-react": "^3.5.0",
+ "axios": "^1.7.2",
+ "keycloak-js": "^25.0.2",
+ "luxon": "^3.4.4",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-markdown": "^9.0.1",
+ "react-redux": "^9.1.2",
+ "react-router-dom": "^6.25.1",
+ "react-syntax-highlighter": "^15.5.0",
+ "remark-frontmatter": "^5.0.0",
+ "remark-gfm": "^4.0.0"
+ },
+ "devDependencies": {
+ "@testing-library/react": "^16.0.0",
+ "@types/luxon": "^3.4.2",
+ "@types/node": "^20.12.12",
+ "@types/react": "^18.2.66",
+ "@types/react-dom": "^18.2.22",
+ "@types/react-syntax-highlighter": "^15.5.13",
+ "@typescript-eslint/eslint-plugin": "^7.2.0",
+ "@typescript-eslint/parser": "^7.2.0",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.6",
+ "jsdom": "^24.1.0",
+ "postcss": "^8.4.38",
+ "postcss-preset-mantine": "^1.15.0",
+ "postcss-simple-vars": "^7.0.1",
+ "sass": "1.64.2",
+ "typescript": "^5.2.2",
+ "vite": "^5.2.13",
+ "vitest": "^1.6.0"
+ }
+}