Skip to content

Commit b994bc8

Browse files
jaswanth8888jaswanth8888
authored
Chat QNA React UI with conversation history (#314)
Signed-off-by: jaswanth8888 <[email protected]>
1 parent d9b62a5 commit b994bc8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1577
-0
lines changed

‎.github/workflows/scripts/build_push.sh

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ for MEGA_SVC in $1; do
5252
docker_build ${IMAGE_NAME}
5353
cd ui
5454
docker_build ${IMAGE_NAME}-ui docker/Dockerfile
55+
if [ "$MEGA_SVC" == "ChatQnA" ];then
56+
docker_build ${IMAGE_NAME}-conversation-ui docker/Dockerfile.react
57+
fi
5558
;;
5659
"AudioQnA"|"SearchQnA"|"VisualQnA")
5760
echo "Not supported yet"

‎ChatQnA/assets/img/conversation_ui_init.png

53.5 KB
Loading

‎ChatQnA/assets/img/conversation_ui_response.png

92.7 KB
Loading

‎ChatQnA/assets/img/conversation_ui_upload.png

61.6 KB
Loading

‎ChatQnA/docker/ui/docker/Dockerfile.react

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node as vite-app
2+
3+
COPY . /usr/app
4+
WORKDIR /usr/app/react
5+
6+
ARG BACKEND_SERVICE_ENDPOINT
7+
ARG DATAPREP_SERVICE_ENDPOINT
8+
ENV VITE_BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT
9+
ENV VITE_DATA_PREP_SERVICE_URL=$DATAPREP_SERVICE_ENDPOINT
10+
11+
RUN ["npm", "install"]
12+
RUN ["npm", "run", "build"]
13+
14+
15+
FROM nginx:alpine
16+
EXPOSE 80
17+
18+
19+
COPY --from=vite-app /usr/app/react/nginx.conf /etc/nginx/conf.d/default.conf
20+
COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html
21+
22+
ENTRYPOINT ["nginx", "-g", "daemon off;"]

‎ChatQnA/docker/ui/react/.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_BACKEND_SERVICE_ENDPOINT=http://backend_address:8888/v1/chatqna
2+
VITE_DATA_PREP_SERVICE_URL=http://backend_address:6007/v1/dataprep

‎ChatQnA/docker/ui/react/.eslintrc.cjs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
5+
ignorePatterns: ["dist", ".eslintrc.cjs"],
6+
parser: "@typescript-eslint/parser",
7+
plugins: ["react-refresh"],
8+
rules: {
9+
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
10+
},
11+
};

‎ChatQnA/docker/ui/react/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎ChatQnA/docker/ui/react/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<h1 align="center" id="title"> ChatQnA Conversational UI</h1>
2+
3+
### 📸 Project Screenshots
4+
5+
![project-screenshot](../../../assets/img/conversation_ui_init.png)
6+
![project-screenshot](../../../assets/img/conversation_ui_response.png)
7+
![project-screenshot](../../../assets/img/conversation_ui_upload.png)
8+
9+
<h2>🧐 Features</h2>
10+
11+
Here're some of the project's features:
12+
13+
- 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.
14+
- 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.
15+
- Upload File: The choice between uploading locally or copying a remote link. Chat according to uploaded knowledge base.
16+
- Clear: Clear the record of the current dialog box without retaining the contents of the dialog box.
17+
- Chat history: Historical chat records can still be retained after refreshing, making it easier for users to view the context.
18+
- 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.
19+
20+
<h2>🛠️ Get it Running:</h2>
21+
22+
1. Clone the repo.
23+
24+
2. cd command to the current folder.
25+
26+
3. Modify the required .env variables.
27+
```
28+
DOC_BASE_URL = ''
29+
```
30+
4. Execute `npm install` to install the corresponding dependencies.
31+
32+
5. Execute `npm run dev` in both environments

‎ChatQnA/docker/ui/react/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!--
2+
Copyright (C) 2024 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<!doctype html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="UTF-8" />
10+
<link rel="icon" type="image/svg+xml" href="/src/assets/opea-icon-color.svg" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12+
<title>Conversations UI</title>
13+
</head>
14+
<body>
15+
<div id="root"></div>
16+
<script type="module" src="/src/main.tsx"></script>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)