chore: add docs to demonstrate how to embed js to user website (#120)

README.md

@@ -56,14 +56,9 @@ For deploying the application to production, there are many options available:
 ## Roadmap & Timeline
 
 * [x] Migrate tidb.ai to a TiDB Serverless vector storage instance with indexing capabilities. Estimated completion by March 29th.
-* [x] Revise the table structure to accommodate the requirements of the llamaindex's RAG process and successfully integrate llamaindex. Target date: April 4th.
+* [x] Revise the table structure to accommodate the requirements of the llamaindex's RAG process and successfully integrate llamaindex. Target date: April 30.
 * [x] Multiple LLM support
-* Conduct tests on Jina.AI's embedding and reranker API functionalities. Expected to be done by April 15th.
-* Complete deployment documentation with a target date of April 10th. This includes:
-  * Docker image deployment. [Working in Progress]
-  * Self-hosted solutions.
-  * Deployment on Vercel.
-* Adapt the system for AWS Redrock Claude3, with an anticipated completion date of April 15th.
+* Local quick deployment before April 30th.
 * Finalize the "How It Works" series of documentation by April 30th.
 
 ## License

www/pages/docs/_meta.json

@@ -5,7 +5,6 @@
   },
   "index": "Introduction",
   "how-to-read-these-docs": "How to read these docs",
-  "architecture": "Architecture",
   "changelog": "Changelog",
   "faq": "FAQ",
   "-- Deploy This RAG": {
@@ -18,17 +17,7 @@
     "type": "separator",
     "title": "Usage"
   },
-  "js": "Embed JavaScript Code Snippet",
-  "-- Configuration": {
-    "type": "separator",
-    "title": "Configuration"
-  },
-  "llm": "LLM",
-  "prompt": "RAG Prompt",
-  "document-loader": "Document Loader",
-  "document-spliter": "Document Spliter",
-  "reranker": "(Optional) Reranker",
-  "authentication": "Auth",
+  "javascript": "Embedable JS Code Snippet",
   "README": {
     "display": "hidden"
   }

www/pages/docs/javascript.mdx

@@ -0,0 +1,31 @@
+# Embeddable JavaScript Snippet
+
+This is the **key feature** of our conversational search RAG (Retrieval-Augmented Generation) app.
+
+With little effort, you can integrate our conversational search window into your website by copying and embedding a simple JavaScript code snippet. This widget, typically placed at the bottom right corner of your site, facilitates instant responses to product-related queries.
+
+
+## How to Embed
+
+To embed the JavaScript snippet, follow these steps:
+
+1. Enter Settings > JavaScript, and copy the JavaScript code snippet like this:
+
+![embeddable-javascript-snippet](https://github.com/pingcap/tidb.ai/assets/1237528/999ed8b7-9ed1-4bad-a75e-3395d1ae68d5)
+
+
+2. Paste the JavaScript code snippet into your website's HTML file;
+
+3. Initialize the JavaScript snippet with input parameters like `Widget Title`, `Site Name`, `Search Titles`, `Example Questions`, `Footer Links`, and `Social Media Links`;
+
+4. Restart your website to see the conversational search window appear at the bottom right corner of your site.
+
+![embeddable-javascript-snippet](https://github.com/pingcap/tidb.ai/assets/1237528/5a445231-a27a-4ae6-8287-a4f8cf7b64d0 "Image Title")
+
+
+
+
+That's all you need to do to integrate our conversational search window into your website. Enjoy! 
+
+
+You can also go to https://tidb.ai to experience the live demo.