From bb24e5f739df171a227052da0e0ae0d290eae818 Mon Sep 17 00:00:00 2001 From: writinwaters <93570324+writinwaters@users.noreply.github.com> Date: Mon, 6 Jan 2025 20:25:47 +0800 Subject: [PATCH] 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 | 16 ++++++++++++++ docs/guides/agent/text2sql_agent.md | 6 +++--- docs/guides/run_health_check.md | 2 +- docs/guides/start_chat.md | 21 +++++++++++++------ .../agent_component_reference/begin.mdx | 12 +++++++---- docs/references/http_api_reference.md | 8 +++---- web/src/locales/en.ts | 4 ++-- 7 files changed, 49 insertions(+), 20 deletions(-) create mode 100644 docs/guides/agent/embed_agent_into_webpage.md diff --git a/docs/guides/agent/embed_agent_into_webpage.md b/docs/guides/agent/embed_agent_into_webpage.md new file mode 100644 index 000000000..7acbfe0b4 --- /dev/null +++ b/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. diff --git a/docs/guides/agent/text2sql_agent.md b/docs/guides/agent/text2sql_agent.md index da0d35a97..4d42c2970 100644 --- a/docs/guides/agent/text2sql_agent.md +++ b/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 diff --git a/docs/guides/run_health_check.md b/docs/guides/run_health_check.md index 9136174d4..f3c983ed7 100644 --- a/docs/guides/run_health_check.md +++ b/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. diff --git a/docs/guides/start_chat.md b/docs/guides/start_chat.md index cbfd89f1e..40a7b2dc2 100644 --- a/docs/guides/start_chat.md +++ b/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. diff --git a/docs/references/agent_component_reference/begin.mdx b/docs/references/agent_component_reference/begin.mdx index 8eb09bb20..5165d8bdd 100644 --- a/docs/references/agent_component_reference/begin.mdx +++ b/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? + +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. - - diff --git a/docs/references/http_api_reference.md b/docs/references/http_api_reference.md index 83d452ccc..5be5d21ee 100644 --- a/docs/references/http_api_reference.md +++ b/docs/references/http_api_reference.md @@ -1726,7 +1726,7 @@ Creates a session with a chat assistant. - `'Authorization: Bearer '` - 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 '` - 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 diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 5d4eac990..788862673 100644 --- a/web/src/locales/en.ts +++ b/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',