Chat QNA React UI with conversation history (#314)

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>
opea-project · Jun 25, 2024 · b994bc8 · b994bc8
1 parent d9b62a5
commit b994bc8
Show file tree

Hide file tree

Showing 54 changed files with 1,577 additions and 0 deletions.
diff --git a/.github/workflows/scripts/build_push.sh b/.github/workflows/scripts/build_push.sh
@@ -52,6 +52,9 @@ for MEGA_SVC in $1; do
             docker_build ${IMAGE_NAME}
             cd ui
             docker_build ${IMAGE_NAME}-ui docker/Dockerfile
+            if [ "$MEGA_SVC" == "ChatQnA" ];then
+                docker_build ${IMAGE_NAME}-conversation-ui docker/Dockerfile.react
+            fi
             ;;
         "AudioQnA"|"SearchQnA"|"VisualQnA")
             echo "Not supported yet"

diff --git a/ChatQnA/assets/img/conversation_ui_init.png b/ChatQnA/assets/img/conversation_ui_init.png
diff --git a/ChatQnA/assets/img/conversation_ui_response.png b/ChatQnA/assets/img/conversation_ui_response.png
diff --git a/ChatQnA/assets/img/conversation_ui_upload.png b/ChatQnA/assets/img/conversation_ui_upload.png
diff --git a/ChatQnA/docker/ui/docker/Dockerfile.react b/ChatQnA/docker/ui/docker/Dockerfile.react
@@ -0,0 +1,22 @@
+FROM node as vite-app
+
+COPY . /usr/app
+WORKDIR /usr/app/react
+
+ARG BACKEND_SERVICE_ENDPOINT
+ARG DATAPREP_SERVICE_ENDPOINT
+ENV VITE_BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT
+ENV VITE_DATA_PREP_SERVICE_URL=$DATAPREP_SERVICE_ENDPOINT
+
+RUN ["npm", "install"]
+RUN ["npm", "run", "build"]
+
+
+FROM nginx:alpine
+EXPOSE 80
+
+
+COPY --from=vite-app /usr/app/react/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html
+
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
diff --git a/ChatQnA/docker/ui/react/.env b/ChatQnA/docker/ui/react/.env
@@ -0,0 +1,2 @@
+VITE_BACKEND_SERVICE_ENDPOINT=http://backend_address:8888/v1/chatqna
+VITE_DATA_PREP_SERVICE_URL=http://backend_address:6007/v1/dataprep
diff --git a/ChatQnA/docker/ui/react/.eslintrc.cjs b/ChatQnA/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 }],
+  },
+};
diff --git a/ChatQnA/docker/ui/react/.gitignore b/ChatQnA/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?
diff --git a/ChatQnA/docker/ui/react/README.md b/ChatQnA/docker/ui/react/README.md
@@ -0,0 +1,32 @@
+<h1 align="center" id="title"> ChatQnA Conversational UI</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](../../../assets/img/conversation_ui_init.png)
+![project-screenshot](../../../assets/img/conversation_ui_response.png)
+![project-screenshot](../../../assets/img/conversation_ui_upload.png)
+
+<h2>🧐 Features</h2>
+
+Here're some of the project's features:
+
+- 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.
+- Upload File: The choice between uploading locally or copying a remote link. Chat according to uploaded knowledge base.
+- 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.
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. Modify the required .env variables.
+   ```
+   DOC_BASE_URL = ''
+   ```
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev` in both environments
diff --git a/ChatQnA/docker/ui/react/index.html b/ChatQnA/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>
diff --git a/ChatQnA/docker/ui/react/nginx.conf b/ChatQnA/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;
+    }
+  }
+}
diff --git a/ChatQnA/docker/ui/react/package.json b/ChatQnA/docker/ui/react/package.json
@@ -0,0 +1,47 @@
+{
+  "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"
+  },
+  "dependencies": {
+    "@mantine/core": "^7.10.0",
+    "@mantine/hooks": "^7.10.0",
+    "@mantine/notifications": "^7.10.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@tabler/icons-react": "^3.5.0",
+    "axios": "^1.7.2",
+    "luxon": "^3.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2"
+  },
+  "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"
+  }
+}
diff --git a/ChatQnA/docker/ui/react/postcss.config.cjs b/ChatQnA/docker/ui/react/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};
diff --git a/ChatQnA/docker/ui/react/public/vite.svg b/ChatQnA/docker/ui/react/public/vite.svg
diff --git a/ChatQnA/docker/ui/react/src/App.scss b/ChatQnA/docker/ui/react/src/App.scss
@@ -0,0 +1,42 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+@import "./styles/styles";
+
+.root {
+  @include flex(row, nowrap, flex-start, flex-start);
+}
+
+.layout-wrapper {
+  @include absolutes;
+
+  display: grid;
+
+  width: 100%;
+  height: 100%;
+
+  grid-template-columns: 80px auto;
+  grid-template-rows: 1fr;
+}
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d6d6d6 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #d6d6d6;
+  border-radius: 16px;
+  border: 4px double #dedede;
+}
diff --git a/ChatQnA/docker/ui/react/src/App.tsx b/ChatQnA/docker/ui/react/src/App.tsx
@@ -0,0 +1,34 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import "./App.scss"
+import { MantineProvider } from "@mantine/core"
+import '@mantine/notifications/styles.css';
+import { SideNavbar, SidebarNavList } from "./components/sidebar/sidebar"
+import { IconMessages } from "@tabler/icons-react"
+import UserInfoModal from "./components/UserInfoModal/UserInfoModal"
+import Conversation from "./components/Conversation/Conversation"
+import { Notifications } from '@mantine/notifications';
+
+const title = "Chat QnA"
+const navList: SidebarNavList = [
+  { icon: IconMessages, label: title }
+]
+
+function App() {
+
+  return (
+    <MantineProvider>
+      <Notifications position="top-right" />
+      <UserInfoModal />
+      <div className="layout-wrapper">
+        <SideNavbar navList={navList} />
+        <div className="content">
+          <Conversation title={title} />
+        </div>
+      </div>
+    </MantineProvider>
+  )
+}
+
+export default App
diff --git a/ChatQnA/docker/ui/react/src/__tests__/util.test.ts b/ChatQnA/docker/ui/react/src/__tests__/util.test.ts
@@ -0,0 +1,14 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, test } from "vitest";
+import { getCurrentTimeStamp, uuidv4 } from "../common/util";
+
+describe("unit tests", () => {
+  test("check UUID is of length 36", () => {
+    expect(uuidv4()).toHaveLength(36);
+  });
+  test("check TimeStamp generated is of unix", () => {
+    expect(getCurrentTimeStamp()).toBe(Math.floor(Date.now() / 1000));
+  });
+});
diff --git a/ChatQnA/docker/ui/react/src/assets/opea-icon-black.svg b/ChatQnA/docker/ui/react/src/assets/opea-icon-black.svg
diff --git a/ChatQnA/docker/ui/react/src/assets/opea-icon-color.svg b/ChatQnA/docker/ui/react/src/assets/opea-icon-color.svg
diff --git a/ChatQnA/docker/ui/react/src/assets/react.svg b/ChatQnA/docker/ui/react/src/assets/react.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_BACKEND_SERVICE_ENDPOINT=http://backend_address:8888/v1/chatqna
		VITE_DATA_PREP_SERVICE_URL=http://backend_address:6007/v1/dataprep