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"
+  }
+}