Added instructions on embedding agent or assistant into a third-party webpage (#4369)

### What problem does this PR solve?


### Type of change

- [x] Documentation Update

docs/guides/agent/embed_agent_into_webpage.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 3
+slug: /embed_agent_into_webpage
+---
+
+# Embed agent into a webpage
+
+You can use iframe to embed an agent into a third-party webpage.
+
+1. Before proceeding, you must [acquire an API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key); otherwise, an error message would appear.
+2. On the **Agent** page, click an intended agent **>** **Edit** to access its editing page.
+3. Click **Embed into webpage** on the top right corner of the canvas to show the **iframe** window:
+
+   ![agent_embed](https://github.com/user-attachments/assets/f748bb91-1a48-45ca-89ea-5b1c257407cb)
+
+4. Copy the iframe and embed it into a specific location on your webpage.

docs/guides/agent/text2sql_agent.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 10
 slug: /text2sql_agent
 ---
 
@@ -9,7 +9,7 @@ Build a Text2SQL agent leverging RAGFlow's RAG capabilities. Contributed by @Tes
 
 ## Scenario
 
-The Text2SQL agent is designed to bridge the gap between Natural Language Processing (NLP) and Structured Query Language (SQL). Its key advantages are as follows:
+The Text2SQL agent bridges the gap between Natural Language Processing (NLP) and Structured Query Language (SQL). Its key advantages are as follows:
 
 - **Assisting non-technical users with SQL**: Not all users have a background in SQL or understand the structure of the tables involved in queries. With a Text2SQL agent, users can pose questions or request data in natural language without needing an in-depth knowledge of the database structure or SQL syntax.
 
@@ -31,7 +31,7 @@ However, traditional Text2SQL solutions often require model fine-tuning, which c
 
 A list of components required:
 
-- Begin
+- [Begin](https://ragflow.io/docs/dev/begin_component)
 - Interface
 - Retrieval
 - Generate

docs/guides/run_health_check.md

@@ -3,7 +3,7 @@ sidebar_position: 7
 slug: /run_health_check
 ---
 
-# Run health check on RAGFlow's dependencies
+# Run dependency health check
 
 Double-check the health status of RAGFlow's dependencies.
 

docs/guides/start_chat.md

@@ -57,7 +57,7 @@ You start an AI conversation by creating an assistant.
 
 :::tip NOTE
 
-Click the light bubble logo above the answer to view the expanded system prompt:
+Click the light bubble icon above the answer to view the expanded system prompt:
    
 ![](https://github.com/user-attachments/assets/515ab187-94e8-412a-82f2-aba52cd79e09)
    
@@ -74,10 +74,19 @@ Hover over an intended chat assistant **>** **Edit** to show the chat configurat
 
 ![chat_config](https://github.com/user-attachments/assets/1a4eaed2-5430-4585-8ab6-930549838c5b)
 
-## Integrate chat capabilities into your application
+## Integrate chat capabilities into your application or webpage
 
-RAGFlow also offers HTTP and Python APIs for you to integrate RAGFlow's capabilities into your applications. Read the following documents for more information:
+RAGFlow offers HTTP and Python APIs for you to integrate RAGFlow's capabilities into your applications. Read the following documents for more information:
 
-- [Acquire a RAGFlow API key](./develop/acquire_ragflow_api_key.md)
-- [HTTP API reference](../references/http_api_reference.md)
-- [Python API reference](../references/python_api_reference.md)
+- [Acquire a RAGFlow API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key)
+- [HTTP API reference](https://ragflow.io/docs/dev/http_api_reference)
+- [Python API reference](https://ragflow.io/docs/dev/python_api_reference)
+
+You can use iframe to embed the created chat assistant into a third-party webpage:
+
+1. Before proceeding, you must [acquire an API key](https://ragflow.io/docs/dev/acquire_ragflow_api_key); otherwise, an error message would appear.
+2. Hover over an intended chat assistant **>** **Edit** to show the **iframe** window:
+
+   ![chat-embed](https://github.com/user-attachments/assets/13ea3021-31c4-4a14-9b32-328cd3318fb5)
+
+3. Copy the iframe and embed it into a specific location on your webpage.

docs/references/agent_component_reference/begin.mdx

@@ -41,7 +41,7 @@ You can set global variables within the **Begin** component, which can be either
   - **line**: Accepts a single line of text without line breaks.
   - **paragraph**: Accepts multiple lines of text, including line breaks.
   - **options**: Requires the user to select a value for this variable from a dropdown menu. And you are required to set *at least* one option for the dropdown menu.
-  - **file**: Requires the user to upload one or multiple files from their device.
+  - **file**: Requires the user to upload one or multiple files.
   - **integer**: Accepts an integer as input.
   - **boolean**: Requires the user to toggle between on and off.
 - **Optional**: A toggle indicating whether the variable is optional. 
@@ -62,9 +62,13 @@ As mentioned earlier, the **Begin** component is indispensable for an agent. Sti
 
 No. Files uploaded to an agent as input are not stored in a knowledge base and will not be chunked using RAGFlow's built-in chunk methods. However, RAGFlow's built-in OSR, DLR, and TSR models will still be applied to process the document.
 
-### File size limit for uploaded file
+### How to upload a webpage or file from a URL?
 
-The maximum file size for each uploaded file is determined by the variable `MAX_CONTENT_LENGTH` in `/docker/.env`. It defaults to 128 MB. If you change the default file size, ensure you also update the value of `client_max_body_size` in `/docker/nginx/nginx.conf` accordingly.
+If you set the type of a variable as **file**, your users will be able to upload a file either from their local device or from an accessible URL. For example:
+
+![upload_file](https://github.com/user-attachments/assets/7ad2a352-0807-4b74-b8d1-d09e5cd37997)
 
+### File size limit for an uploaded file
 
+The maximum file size for each uploaded file is determined by the variable `MAX_CONTENT_LENGTH` in `/docker/.env`. It defaults to 128 MB. If you change the default file size, ensure you also update the value of `client_max_body_size` in `/docker/nginx/nginx.conf` accordingly.
 

docs/references/http_api_reference.md

@@ -1726,7 +1726,7 @@ Creates a session with a chat assistant.
   - `'Authorization: Bearer <YOUR_API_KEY>'`
 - Body:
   - `"name"`: `string`
-  - `"user_id"`: `string`(optional)
+  - `"user_id"`: `string` (optional)
 
 ##### Request example
 
@@ -1801,7 +1801,7 @@ Updates a session of a specified chat assistant.
   - `'Authorization: Bearer <YOUR_API_KEY>'`
 - Body:
   - `"name`: `string`
-  - `"user_id`: `string`(optional)
+  - `"user_id`: `string` (optional)
 
 ##### Request example
 
@@ -2013,8 +2013,8 @@ Asks a specified chat assistant a question to start an AI-powered conversation.
 - Body:
   - `"question"`: `string`
   - `"stream"`: `boolean`
-  - `"session_id"`: `string`(optional)
-  - `"user_id`: `string`(optional)
+  - `"session_id"`: `string` (optional)
+  - `"user_id`: `string` (optional)
 
 ##### Request example
 

web/src/locales/en.ts

@@ -22,7 +22,7 @@ export default {
       languagePlaceholder: 'select your language',
       copy: 'Copy',
       copied: 'Copied',
-      comingSoon: 'Coming Soon',
+      comingSoon: 'Coming soon',
       download: 'Download',
       close: 'Close',
       preview: 'Preview',
@@ -428,7 +428,7 @@ The above is the content you need to summarize.`,
       created: 'Created',
       action: 'Action',
       embedModalTitle: 'Embed into webpage',
-      comingSoon: 'Coming Soon',
+      comingSoon: 'Coming soon',
       fullScreenTitle: 'Full Embed',
       fullScreenDescription:
         'Embed the following iframe into your website at the desired location',