V1.4 app fe

.github/workflows/daily_check_issue_and_pr.yml

@@ -26,3 +26,4 @@ jobs:
           close-pr-message: "This PR was closed because it has been stalled for 7 days with no activity."
           repo-token: ${{ secrets.ACTION_TOKEN }}
           start-date: "2025-03-01T00:00:00Z"
+          exempt-issue-labels: "Backlog"

.gitignore

@@ -1,4 +1,5 @@
 test-results/
 **.log
 **/report.html
-docker-compose
+docker-compose
+**/node_modules/

app-frontend/Dockerfile → app-frontend/Dockerfile.react

@@ -2,21 +2,20 @@
 # SPDX-License-Identifier: Apache-2.0
 
 # Use node 20.11.1 as the base image
-FROM node:latest AS vite-app
-
-COPY react /usr/app/react
+FROM node:20.11.1 as vite-app
+ 
+COPY ./react /usr/app/react
 WORKDIR /usr/app/react
 
-RUN npm install --legacy-peer-deps && npm run build
 
-FROM nginx:1.27.4-alpine-slim
+RUN ["npm", "install"]
+RUN ["npm", "run", "build"]
+
 
-# Install uuidgen in the nginx:alpine image
-RUN apk add --no-cache util-linux \
-    && apk upgrade --no-cache
+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
+RUN chmod +x /docker-entrypoint.d/env.sh

app-frontend/compose.yaml

@@ -0,0 +1,52 @@
+# Copyright (C) 2024 Intel Corporation
+# SPDX-License-Identifier: Apache-2.0
+
+services:
+  app-frontend:
+    image: app-frontend:ch
+    container_name: app-frontend
+    depends_on:
+    - chathistory-mongo
+    ports:
+      - 5175:80
+    environment:
+      - no_proxy=${no_proxy}
+      - https_proxy=${https_proxy}
+      - http_proxy=${http_proxy}
+      - APP_BACKEND_SERVICE_URL=http://localhost:8888/v1/app-backend
+      - APP_DATAPREP_SERVICE_URL=http://localhost:6007/v1/dataprep
+      - APP_CHAT_HISTORY_SERVICE_URL=http://localhost:6012/v1/chathistory
+      - APP_UI_SELECTION=chat,summary,code
+    ipc: host
+    restart: always
+
+  mongo:
+    image: mongo:7.0.11
+    container_name: mongodb
+    ports:
+      - 27017:27017
+    environment:
+      http_proxy: ${http_proxy}
+      https_proxy: ${https_proxy}
+      no_proxy: ${no_proxy}
+    command: mongod --quiet --logpath /dev/null
+
+  chathistory-mongo:
+    image: ${REGISTRY:-opea}/chathistory-mongo:${TAG:-latest}
+    container_name: chathistory-mongo-server
+    ports:
+      - "6012:6012"
+    ipc: host
+    environment:
+      http_proxy: ${http_proxy}
+      no_proxy: ${no_proxy}
+      https_proxy: ${https_proxy}
+      MONGO_HOST: ${MONGO_HOST:-mongo}
+      MONGO_PORT: ${MONGO_PORT:-27017}
+      COLLECTION_NAME: ${COLLECTION_NAME:-Conversations}
+      LOGFLAG: ${LOGFLAG}
+    restart: unless-stopped
+
+networks:
+  default:
+    driver: bridge

app-frontend/react/.env.production

@@ -1 +1,8 @@
-VITE_APP_UUID=APP_UUID
+VITE_BACKEND_SERVICE_URL=APP_BACKEND_SERVICE_URL
+VITE_DATAPREP_SERVICE_URL=APP_DATAPREP_SERVICE_URL
+VITE_CHAT_HISTORY_SERVICE_URL=APP_CHAT_HISTORY_SERVICE_URL
+VITE_UI_SELECTION=APP_UI_SELECTION
+
+VITE_PROMPT_SERVICE_GET_ENDPOINT=APP_PROMPT_SERVICE_GET_ENDPOINT
+VITE_PROMPT_SERVICE_CREATE_ENDPOINT=APP_PROMPT_SERVICE_CREATE_ENDPOINT
+VITE_PROMPT_SERVICE_DELETE_ENDPOINT=APP_PROMPT_SERVICE_DELETE_ENDPOINT

app-frontend/react/.gitignore

@@ -7,8 +7,6 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-# dependencies
-package-lock.json
 node_modules
 dist
 dist-ssr

app-frontend/react/env.sh

@@ -2,12 +2,6 @@
 # Copyright (C) 2024 Intel Corporation
 # SPDX-License-Identifier: Apache-2.0
 
-# Generate a random UUID for the application
-export APP_UUID=$(uuidgen)
-
-# Print the generated UUID for verification
-echo "Generated UUID: $APP_UUID"
-
 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)
@@ -16,6 +10,6 @@ do
     # sed All files
     # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +
 
-    # sed JS, CSS, and HTML files
-    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' -o -name '*.html' \) -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

app-frontend/react/index.html

@@ -1,18 +1,29 @@
 <!--
-  Copyright (C) 2024 Intel Corporation
+  Copyright (C) 2025 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>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="RAG ui for demonstrating LLM functionality" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>OPEA Studio APP</title>
   </head>
   <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx?v=APP_UUID"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

app-frontend/react/nginx.conf

@@ -12,10 +12,9 @@ server {
     root /usr/share/nginx/html;
     index index.html index.htm;
     try_files $uri $uri/ /index.html =404;
-    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
 
     location ~* \.(gif|jpe?g|png|webp|ico|svg|css|js|mp4|woff2)$ {
       expires 1d;
     }
   }
-}
+}

app-frontend/react/package.json

@@ -1,49 +1,85 @@
 {
-  "name": "ui",
+  "name": "ProductivitySuite",
+  "version": "0.0.1",
+  "description": "ProductivitySuite UI - OPEA",
+  "homepage": ".",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": "20.x"
+  },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "test": "vitest"
+    "dev": "vite --port 5173",
+    "build": "vite build",
+    "preview": "vite preview --port 5173",
+    "prettier:write": "prettier --write .",
+    "test": "vitest run"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   },
   "dependencies": {
-    "@mantine/charts": "7.17.2",
-    "@mantine/core": "^7.17.2",
-    "@mantine/hooks": "^7.17.2",
-    "@mantine/notifications": "^7.17.2",
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@tabler/icons-react": "3.7.0",
-    "axios": "^1.7.2",
-    "luxon": "^3.4.4",
+    "@mui/icons-material": "^6.4.1",
+    "@mui/material": "^6.4.1",
+    "@mui/styled-engine-sc": "^6.4.0",
+    "@reduxjs/toolkit": "^2.5.0",
+    "axios": "^1.7.9",
+    "notistack": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^9.1.2",
-    "uuid": "^10.0.0"
+    "react-markdown": "^8.0.7",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-breaks": "^4.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^3.0.1",
+    "styled-components": "^6.1.14"
   },
   "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",
-    "@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"
+    "@rollup/plugin-terser": "^0.4.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.13.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^7.6.0",
+    "cors": "^2.8.5",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "nodemon": "^3.1.9",
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass": "^1.83.1",
+    "typescript": "^5.7.3",
+    "vite": "^5.3.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-mkcert": "^1.17.6",
+    "vite-plugin-sass-dts": "^1.3.30",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.1.2",
+    "wait-on": "^7.0.1",
+    "webpack-bundle-analyzer": "^4.10.2"
   }
 }

app-frontend/react/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "OPEA Studio App",
+  "name": "OPEA Studio APP UI",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

app-frontend/react/public/model_configs.json

@@ -0,0 +1,9 @@
+[
+  {
+    "model_name": "Intel/neural-chat-7b-v3-3",
+    "displayName": "Intel Neural Chat",
+    "minToken": 100,
+    "maxToken": 2000,
+    "types": ["chat", "summary", "code"]
+  }
+]

app-frontend/react/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *