From d106490ac645276cdcdf38d31771bc4339ff3e15 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Wed, 12 Jul 2023 21:54:57 -0300 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=94=A7=20chore(Footer.js):=20add=20mi?= =?UTF-8?q?ssing=20import=20for=20useDocusaurusContext=20hook=20to=20fix?= =?UTF-8?q?=20build=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/theme/Footer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/theme/Footer.js b/docs/src/theme/Footer.js index 67f7211cb..403eb4382 100644 --- a/docs/src/theme/Footer.js +++ b/docs/src/theme/Footer.js @@ -1,6 +1,7 @@ import React from "react"; import Footer from "@theme-original/Footer"; import { MendableFloatingButton } from "@mendable/search"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; export default function FooterWrapper(props) { const iconSpan1 = React.createElement( From 82701d7bf6571afda83cd2b20609da642274cc20 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Wed, 12 Jul 2023 22:03:29 -0300 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=93=9D=20docs(loading=5Fdocument.mdx)?= =?UTF-8?q?:=20add=20guide=20on=20loading=20a=20document=20into=20a=20Prom?= =?UTF-8?q?pt=20variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit adds a new guide file `loading_document.mdx` that provides an overview and example on how to load a document into a Prompt variable. The guide explains the process of defining a Prompt variable in the `PromptTemplate` component, connecting a `WebBaseLoader` to the variable, and building the flow. It also demonstrates how to chat with the document content in the context of a conversation. The commit also includes an embedded iframe that showcases the functionality described in the guide. --- docs/docs/guides/loading_document.mdx | 28 +++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 docs/docs/guides/loading_document.mdx diff --git a/docs/docs/guides/loading_document.mdx b/docs/docs/guides/loading_document.mdx new file mode 100644 index 000000000..fa1235e6c --- /dev/null +++ b/docs/docs/guides/loading_document.mdx @@ -0,0 +1,28 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# Loading a document into a Prompt variable + +## Overview + +The following example shows how to load a document into a Prompt variable. +First, we define a Prompt variable in the PromptTemplate component, +then we connect a WebBaseLoader to that variable and build the flow. + +Once the building is complete, we can start chatting having the content of the document in the context of the conversation. + + From 924bf56ba1c49ec8a2f24c2a002f66d08800691a Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Wed, 12 Jul 2023 22:03:56 -0300 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=93=9A=20docs(sidebars.js):=20add=20n?= =?UTF-8?q?ew=20category=20"Guides"=20with=20an=20item=20"loading=5Fdocume?= =?UTF-8?q?nt"=20to=20the=20sidebar=20to=20improve=20navigation=20and=20or?= =?UTF-8?q?ganization=20of=20documentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/sidebars.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/sidebars.js b/docs/sidebars.js index 6a0c31b68..906b1fa9d 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -21,6 +21,12 @@ module.exports = { "guidelines/collection", ], }, + { + type: "category", + label: "Guides", + collapsed: false, + items: ["guides/loading_document"], + }, // { // type: 'category', // label: 'Components', From 5d81e2f2d8ffd0773a96f68441cd005c3546216f Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Thu, 13 Jul 2023 09:02:10 -0300 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=93=9D=20docs(loading=5Fdocument.mdx)?= =?UTF-8?q?:=20update=20title=20and=20content=20to=20provide=20a=20clearer?= =?UTF-8?q?=20and=20more=20comprehensive=20guide=20on=20how=20to=20populat?= =?UTF-8?q?e=20a=20Prompt=20variable=20with=20a=20document?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ feat(loading_document.mdx): add step-by-step instructions on how to define a Prompt variable and connect a WebBaseLoader to it for loading a document into the variable 🔀 chore(loading_document.mdx): reorganize and rephrase the content to improve readability and clarity --- docs/docs/guides/loading_document.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/docs/guides/loading_document.mdx b/docs/docs/guides/loading_document.mdx index fa1235e6c..9a5c79efb 100644 --- a/docs/docs/guides/loading_document.mdx +++ b/docs/docs/guides/loading_document.mdx @@ -3,15 +3,19 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; -# Loading a document into a Prompt variable +# Populating a Prompt Variable with a Document ## Overview -The following example shows how to load a document into a Prompt variable. -First, we define a Prompt variable in the PromptTemplate component, -then we connect a WebBaseLoader to that variable and build the flow. +This walkthrough provides a step-by-step guide on how to load a document into a Prompt variable. It is a simple two-part process: -Once the building is complete, we can start chatting having the content of the document in the context of the conversation. +1. **Prompt Variable Definition:** We start by defining a Prompt variable within the PromptTemplate component. This variable will serve as the placeholder for our document's content. + +2. **WebBaseLoader Connection:** Next, we link a WebBaseLoader to the Prompt variable we've just created. This will facilitate the flow building process and ensure the content of the document is properly loaded. + +Upon successful completion of these steps, you'll be able to start a chat with the document's content readily available within the conversational context. This provides seamless integration of the document into the chat, enhancing the user's experience by making relevant information more accessible. + +Please follow the steps outlined in the interactive guide to understand the process in detail. From b0db72c9fd121534274b9667a5163ce2a55ca3e1 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Thu, 13 Jul 2023 14:07:10 -0300 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=9D=20docs(chatprompttemplate=5Fgu?= =?UTF-8?q?ide.mdx):=20update=20interactive=20guide=20URL=20and=20add=20st?= =?UTF-8?q?ep-by-step=20instructions=20for=20customization=20and=20buildin?= =?UTF-8?q?g=20a=20chatbot=20with=20custom=20system=20messages=20?= =?UTF-8?q?=F0=9F=93=9D=20docs(loading=5Fdocument.mdx):=20update=20interac?= =?UTF-8?q?tive=20guide=20URL=20and=20add=20step-by-step=20instructions=20?= =?UTF-8?q?for=20integrating=20a=20document=20into=20a=20PromptTemplate=20?= =?UTF-8?q?variable=20=F0=9F=93=9D=20docs(sidebars.js):=20add=20"chatpromp?= =?UTF-8?q?ttemplate=5Fguide"=20to=20the=20Guides=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/guides/chatprompttemplate_guide.mdx | 34 +++++++------ docs/docs/guides/loading_document.mdx | 50 +++++++++++++++---- docs/sidebars.js | 2 +- 3 files changed, 61 insertions(+), 25 deletions(-) diff --git a/docs/docs/guides/chatprompttemplate_guide.mdx b/docs/docs/guides/chatprompttemplate_guide.mdx index 72667fc57..45767d41b 100644 --- a/docs/docs/guides/chatprompttemplate_guide.mdx +++ b/docs/docs/guides/chatprompttemplate_guide.mdx @@ -9,7 +9,25 @@ import ReactPlayer from "react-player"; In this guide, we will modify the "Basic Chat with Prompt and History" example, integrating the ChatPromptTemplate with the SystemMessagePromptTemplate and HumanMessagePromptTemplate components. By following these steps, you'll be able to build a personalized chatbot that can interpret and respond based on user-defined System messages. -1. **Navigate to the "Community Examples" section.** +## Interactive Guide + + + +## Step-by-Step Instructions + +1. Navigate to the "Community Examples" section. 2. Locate the "Basic Chat with Prompt and History" example, and click on "Fork Example". @@ -58,17 +76,3 @@ In this guide, we will modify the "Basic Chat with Prompt and History" example, 22. Congratulations! You have successfully customized and built your chatbot. By following these instructions, you have created a dynamic chatbot capable of understanding and responding based on custom system messages, enhancing the user experience and interaction. Enjoy your personalized assistant! - - diff --git a/docs/docs/guides/loading_document.mdx b/docs/docs/guides/loading_document.mdx index 9a5c79efb..4a1fdebdf 100644 --- a/docs/docs/guides/loading_document.mdx +++ b/docs/docs/guides/loading_document.mdx @@ -3,19 +3,13 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import ZoomableImage from "/src/theme/ZoomableImage.js"; import ReactPlayer from "react-player"; -# Populating a Prompt Variable with a Document +# Integrating a Document into a PromptTemplate Variable: A Step-by-Step Guide ## Overview -This walkthrough provides a step-by-step guide on how to load a document into a Prompt variable. It is a simple two-part process: +This guide takes you through the process of augmenting the "Basic Chat with Prompt and History" example. You'll learn how to embed documents as context into the PromptTemplate component utilizing a WebBaseLoader. -1. **Prompt Variable Definition:** We start by defining a Prompt variable within the PromptTemplate component. This variable will serve as the placeholder for our document's content. - -2. **WebBaseLoader Connection:** Next, we link a WebBaseLoader to the Prompt variable we've just created. This will facilitate the flow building process and ensure the content of the document is properly loaded. - -Upon successful completion of these steps, you'll be able to start a chat with the document's content readily available within the conversational context. This provides seamless integration of the document into the chat, enhancing the user's experience by making relevant information more accessible. - -Please follow the steps outlined in the interactive guide to understand the process in detail. +## Interactive Guide + +## Step-by-Step Instructions + +1. Start by navigating to the "Community Examples" section. + +2. Find the "Basic Chat with Prompt and History" example and click on "Fork Example". + +3. In the editor, open the "Template" field. + +4. Here, introduce the `{context}` variable, placing it somewhere before the "Current conversation:" text. + +5. Once done, save your changes by clicking on "Check & Save". + +6. Next, open the search bar and type "web". + +7. Drag and drop a WebBaseLoader (or any other loader of your choice) onto the canvas. + +8. Connect this loader to the `{context}` variable that we just added. + +9. In the "Web Page" field, enter "https://langflow.org/how-upload-examples". + +10. Now, click on "ConversationBufferMemory". + +11. In the "Input Key" field, enter "text" to define the Chat variable. + +> **Tip:** When defining more than one variable and using a Memory component, it's crucial to specify which variable should be used to create the conversation history. + +12. Click on the "Build" button to implement your changes. + +13. Open the chat interface to test your modifications. + +14. Try asking something like, "How do I upload examples?" + +15. Click on "Display Prompt" to view your template. + +16. Now, you can see what the model used as a basis to generate its response. + +By following these instructions, you have successfully loaded a document into a PromptTemplate variable, allowing for more enriched and context-aware chat responses. This customization enhances user interaction by integrating relevant document content into the chat flow. diff --git a/docs/sidebars.js b/docs/sidebars.js index 906b1fa9d..fff5900fe 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -25,7 +25,7 @@ module.exports = { type: "category", label: "Guides", collapsed: false, - items: ["guides/loading_document"], + items: ["guides/loading_document", "guides/chatprompttemplate_guide"], }, // { // type: 'category',