[NeuralChat] Add new customized chabot UI

.pre-commit-config.yaml

@@ -20,6 +20,11 @@ repos:
               examples/.+
           )$
       - id: check-json
+        exclude: |
+          (?x)^(
+              intel_extension_for_transformers/neural_chat/ui/customized/chatbot/tsconfig.json|
+              intel_extension_for_transformers/neural_chat/ui/customized/chatbot_side_by_side/tsconfig.json
+          )$
       - id: check-yaml
         exclude: |
           (?x)^(

intel_extension_for_transformers/neural_chat/ui/customized/chatbot/.env

@@ -0,0 +1 @@
+BACKEND_BASE_URL = 'http://172.26.36.74:8000/v1'

intel_extension_for_transformers/neural_chat/ui/customized/chatbot/README.md

@@ -0,0 +1,33 @@
+<h1 align="center" id="title"> ChatBot UI</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](https://i.imgur.com/keyisq7.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.
+- 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.
+- Scroll to Bottom / Top: The chat automatically slides to the bottom. Users can also click the top icon to slide to the top of the chat record.
+- End to End Time: Shows the time spent on the current conversation.
+- First token latency: Show the latency time for generating the first token.
+- Average token latency: Show the average latency time for generating a token.
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. Modify the required .env variables.
+    ```
+    BACKEND_BASE_URL = ''
+    ```
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev` in both environments