From 2a417396fd1ce27aee827a67daa6141c696a7127 Mon Sep 17 00:00:00 2001
From: jaswanth8888 <karani.jaswanth@gmail.com>
Date: Wed, 14 Aug 2024 09:14:50 +0530
Subject: [PATCH 1/2] fixed ISSUE-528

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>
---
 ChatQnA/docker/gaudi/README.md            |  9 ++----
 ChatQnA/docker/gpu/README.md              | 39 +++++++++++++++++++++++
 ChatQnA/docker/ui/docker/Dockerfile.react | 13 +++-----
 ChatQnA/docker/ui/react/.env.production   |  2 ++
 ChatQnA/docker/ui/react/env.sh            | 12 +++++++
 ChatQnA/docker/xeon/README.md             | 18 ++++-------
 6 files changed, 67 insertions(+), 26 deletions(-)
 create mode 100644 ChatQnA/docker/ui/react/.env.production
 create mode 100644 ChatQnA/docker/ui/react/env.sh

diff --git a/ChatQnA/docker/gaudi/README.md b/ChatQnA/docker/gaudi/README.md
index f32d12130..91df664fd 100644
--- a/ChatQnA/docker/gaudi/README.md
+++ b/ChatQnA/docker/gaudi/README.md
@@ -124,9 +124,7 @@ Build frontend Docker image that enables Conversational experience with ChatQnA
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8888/v1/chatqna"
-export DATAPREP_SERVICE_ENDPOINT="http://${host_ip}:6007/v1/dataprep"
-docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg DATAPREP_SERVICE_ENDPOINT=$DATAPREP_SERVICE_ENDPOINT -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
 cd ../../../..
 ```
 
@@ -426,9 +424,8 @@ chaqna-gaudi-conversation-ui-server:
   image: opea/chatqna-conversation-ui:latest
   container_name: chatqna-gaudi-conversation-ui-server
   environment:
-    - no_proxy=${no_proxy}
-    - https_proxy=${https_proxy}
-    - http_proxy=${http_proxy}
+    - APP_BACKEND_SERVICE_ENDPOINT=${BACKEND_SERVICE_ENDPOINT}
+    - APP_DATA_PREP_SERVICE_URL=${DATAPREP_SERVICE_ENDPOINT}
   ports:
     - "5174:80"
   depends_on:
diff --git a/ChatQnA/docker/gpu/README.md b/ChatQnA/docker/gpu/README.md
index a5130b5e5..5809727c5 100644
--- a/ChatQnA/docker/gpu/README.md
+++ b/ChatQnA/docker/gpu/README.md
@@ -63,6 +63,15 @@ cd GenAIExamples/ChatQnA/docker/ui/
 docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
 cd ../../../..
 ```
+### 9. Build React UI Docker Image (Optional)
+
+Construct the frontend Docker image using the command below:
+
+```bash
+cd GenAIExamples/ChatQnA/docker/ui/
+docker build --no-cache -t opea/chatqna-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
+cd ../../../..
+```
 
 Then run the command `docker images`, you will have the following 7 Docker Images:
 
@@ -73,6 +82,7 @@ Then run the command `docker images`, you will have the following 7 Docker Image
 5. `opea/dataprep-redis:latest`
 6. `opea/chatqna:latest`
 7. `opea/chatqna-ui:latest`
+8. `opea/chatqna-react-ui:latest` 
 
 ## 🚀 Start MicroServices and MegaService
 
@@ -255,4 +265,33 @@ To access the frontend, open the following URL in your browser: http://{host_ip}
       - "80:5173"
 ```
 
+## 🚀 Launch the Conversational UI (Optional)
+
+To access the Conversational UI (react based) frontend, modify the UI service in the `compose.yaml` file. Replace `chaqna-xeon-ui-server` service with the `chatqna-xeon-conversation-ui-server` service as per the config below:
+
+```yaml
+chaqna-xeon-conversation-ui-server:
+  image: opea/chatqna-conversation-ui:latest
+  container_name: chatqna-xeon-conversation-ui-server
+  environment:
+    - APP_BACKEND_SERVICE_ENDPOINT=${BACKEND_SERVICE_ENDPOINT}
+    - APP_DATA_PREP_SERVICE_URL=${DATAPREP_SERVICE_ENDPOINT}
+  ports:
+    - "5174:80"
+  depends_on:
+    - chaqna-xeon-backend-server
+  ipc: host
+  restart: always
+```
+
+Once the services are up, open the following URL in your browser: http://{host_ip}:5174. By default, the UI runs on port 80 internally. If you prefer to use a different host port to access the frontend, you can modify the port mapping in the `compose.yaml` file as shown below:
+
+```yaml
+  chaqna-xeon-conversation-ui-server:
+    image: opea/chatqna-conversation-ui:latest
+    ...
+    ports:
+      - "80:80"
+```
+
 ![project-screenshot](../../assets/img/chat_ui_init.png)
diff --git a/ChatQnA/docker/ui/docker/Dockerfile.react b/ChatQnA/docker/ui/docker/Dockerfile.react
index 8ec70c657..f023b7afb 100644
--- a/ChatQnA/docker/ui/docker/Dockerfile.react
+++ b/ChatQnA/docker/ui/docker/Dockerfile.react
@@ -4,23 +4,18 @@
 # Use node 20.11.1 as the base image
 FROM node:20.11.1 as vite-app
  
-COPY . /usr/app
+COPY ./react /usr/app/react
 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
+COPY ./react/env.sh /docker-entrypoint.d/env.sh
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
\ No newline at end of file
+COPY ./react/nginx.conf /etc/nginx/conf.d/default.conf
+RUN chmod +x /docker-entrypoint.d/env.sh
\ No newline at end of file
diff --git a/ChatQnA/docker/ui/react/.env.production b/ChatQnA/docker/ui/react/.env.production
new file mode 100644
index 000000000..a46e1e385
--- /dev/null
+++ b/ChatQnA/docker/ui/react/.env.production
@@ -0,0 +1,2 @@
+VITE_BACKEND_SERVICE_ENDPOINT=APP_BACKEND_SERVICE_ENDPOINT
+VITE_DATA_PREP_SERVICE_URL=APP_DATA_PREP_SERVICE_URL
\ No newline at end of file
diff --git a/ChatQnA/docker/ui/react/env.sh b/ChatQnA/docker/ui/react/env.sh
new file mode 100644
index 000000000..1e4318278
--- /dev/null
+++ b/ChatQnA/docker/ui/react/env.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+for i in $(env | grep APP_) #// Make sure to use the prefix MY_APP_ if you have any other prefix in env.production file varialbe 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
\ No newline at end of file
diff --git a/ChatQnA/docker/xeon/README.md b/ChatQnA/docker/xeon/README.md
index e247cedbd..b607e8532 100644
--- a/ChatQnA/docker/xeon/README.md
+++ b/ChatQnA/docker/xeon/README.md
@@ -145,10 +145,7 @@ Build frontend Docker image that enables Conversational experience with ChatQnA
 
 ```bash
 cd GenAIExamples/ChatQnA/docker/ui/
-export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8888/v1/chatqna"
-export DATAPREP_SERVICE_ENDPOINT="http://${host_ip}:6007/v1/dataprep"
-export DATAPREP_GET_FILE_ENDPOINT="http://${host_ip}:6007/v1/dataprep/get_file"
-docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg DATAPREP_SERVICE_ENDPOINT=$DATAPREP_SERVICE_ENDPOINT --build-arg DATAPREP_GET_FILE_ENDPOINT=$DATAPREP_GET_FILE_ENDPOINT -f ./docker/Dockerfile.react .
+docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react .
 cd ../../../..
 ```
 
@@ -396,20 +393,19 @@ To access the frontend, open the following URL in your browser: http://{host_ip}
 
 ## 🚀 Launch the Conversational UI (Optional)
 
-To access the Conversational UI (react based) frontend, modify the UI service in the `compose.yaml` file. Replace `chaqna-gaudi-ui-server` service with the `chatqna-gaudi-conversation-ui-server` service as per the config below:
+To access the Conversational UI (react based) frontend, modify the UI service in the `compose.yaml` file. Replace `chaqna-xeon-ui-server` service with the `chatqna-xeon-conversation-ui-server` service as per the config below:
 
 ```yaml
-chaqna-gaudi-conversation-ui-server:
+chaqna-xeon-conversation-ui-server:
   image: opea/chatqna-conversation-ui:latest
-  container_name: chatqna-gaudi-conversation-ui-server
+  container_name: chatqna-xeon-conversation-ui-server
   environment:
-    - no_proxy=${no_proxy}
-    - https_proxy=${https_proxy}
-    - http_proxy=${http_proxy}
+    - APP_BACKEND_SERVICE_ENDPOINT=${BACKEND_SERVICE_ENDPOINT}
+    - APP_DATA_PREP_SERVICE_URL=${DATAPREP_SERVICE_ENDPOINT}
   ports:
     - "5174:80"
   depends_on:
-    - chaqna-gaudi-backend-server
+    - chaqna-xeon-backend-server
   ipc: host
   restart: always
 ```

From 6ffa5442f9b3c115bd1a06885c9588ae28bb6104 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 14 Aug 2024 03:50:58 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 ChatQnA/docker/gpu/README.md   | 3 ++-
 ChatQnA/docker/ui/react/env.sh | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ChatQnA/docker/gpu/README.md b/ChatQnA/docker/gpu/README.md
index 5809727c5..41c2aef32 100644
--- a/ChatQnA/docker/gpu/README.md
+++ b/ChatQnA/docker/gpu/README.md
@@ -63,6 +63,7 @@ cd GenAIExamples/ChatQnA/docker/ui/
 docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
 cd ../../../..
 ```
+
 ### 9. Build React UI Docker Image (Optional)
 
 Construct the frontend Docker image using the command below:
@@ -82,7 +83,7 @@ Then run the command `docker images`, you will have the following 7 Docker Image
 5. `opea/dataprep-redis:latest`
 6. `opea/chatqna:latest`
 7. `opea/chatqna-ui:latest`
-8. `opea/chatqna-react-ui:latest` 
+8. `opea/chatqna-react-ui:latest`
 
 ## 🚀 Start MicroServices and MegaService
 
diff --git a/ChatQnA/docker/ui/react/env.sh b/ChatQnA/docker/ui/react/env.sh
index 1e4318278..ce1372ea6 100644
--- a/ChatQnA/docker/ui/react/env.sh
+++ b/ChatQnA/docker/ui/react/env.sh
@@ -1,5 +1,8 @@
 #!/bin/sh
-for i in $(env | grep APP_) #// Make sure to use the prefix MY_APP_ if you have any other prefix in env.production file varialbe name replace it with MY_APP_
+# 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-)
@@ -9,4 +12,4 @@ do
 
     # 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
\ No newline at end of file
+done