5d71e0face
* [docs]: Add Marketplace Plugin Anthropic * [docs]: Add Marketplace Plugin Gemini * Update Operations * Update Operation * [docs]: Add Marketplace Plugin Hugging Face * Update Intro Pata * Update Intro Para * Add Model Example and Info on Inference API * Update intro para * Update Model Example * Grammatical Improvements * Grammatical Updates * Grammar * Update example * [docs]: Add Marketplace Plugin Mistral AI * Update models * [docs]: Add Marketplace Plugin Qdrant * Update Models in Beta * Update Models in V3 * [docs]: Add Marketplace Plugin Cohere * [docs]: Add Marketplace OpenAI Embedding * Update model in beta * Update model LTS * [docs]:AI Whitelist info in setups * update: ecs and cloud run * [docs] added chromadb * [docs] updated digital-ocean * [docs] updated k8s * Made changes in the docs for adding chromadb * [dos]: ToolJet AI license update * fix: formatting * fix: formatting * [docs]: Add Chat Component * Update Example and Add Info Box * [docs]: updated pinecone plugin * Update SS * [docs]: ToolJet AI * Update available model link * Fix typo * Add advanced parameters table * [docs] added AI_GATEWAY_URL * [fix] indentation * update: AI credits * fix: typo * Chat Component Properties * update: improved doc * CSA and Replicate to LTS * [docs] updated kubernetes and helm for Chromadb * [docs]: Add Marketplace Plugin Qdrant * [docs]: Add Marketplace Plugin Qdrant * Add Markdown * [docs]: Add Marketplace Plugin Weviate DB * Update qdrant beta * Update qdrant LTS * Update sidebars.js * Update sidebars.js * Update marketplace_overview beta * Update marketplace_overview.md * Update marketplace_overview.md * Update Response * formatting updates * Parameter Definition Updates * Update intro qdrant.md Beta * Update intro qdrant.md LTS * update local host * update: added to beta * fix: fomatting * fix: formatting * fix: doc * fix: review * update pritesh feedback * fix: typo * Mansukha Feedback Updates * Remove required and optional emoji * fix: updates * fix: updates * fix: review * minor update in the markdown docs * fix: plans * update: added screenshots * update: added docs to beta * add minor changes --------- Co-authored-by: Akshat Virmani <akshatvirmani93@gmail.com> Co-authored-by: PriteshKiri <pritesh.d.kiri@gmail.com> Co-authored-by: Souvik <psouvik260@gmail.com> Co-authored-by: Adish M <adish.madhu@gmail.com> Co-authored-by: Pritesh Kiri <77957844+PriteshKiri@users.noreply.github.com> Co-authored-by: Vaishnavi Joshi <vj.codes29@gmail.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com>
2.9 KiB
| id | title | slug |
|---|---|---|
| overview | Overview | /widgets/chat/ |
The Chat Component is used to implement a chat-based interface in an application. It can be integrated with AI plugins to build an AI-enabled chatbot or used for traditional chat functionalities, making it suitable for both AI-powered and human-to-human conversations.
This guide explains how to build an AI-enabled support chatbot using the Chat Component. For more details, refer to the following guides:
Building AI Enabled Chatbot
- Drag a Chat Component on the canvas.
-
Customize the Chat Component.
a. Enter a Chat Title.
b. Set Initial Chat.
c. Configure User Name and Avatar.
d. Configure Respondent Name and Avatar.
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/set-component.png" alt="Customize your Chat Component" />
- Setup an AI query to generate responses. Check out marketplace for all the available plugins. Alternatively, you can configure it with any data source or use it as a chat between multiple users. To do this, specify the type 'response' in the message object.
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/query.png" alt="Setup the AI Query" />
- Add a new event handler for the query with the following configurations:
- Event: Query Success
- Action: Control Component
- Component: chat1 (Select your chat component name from the dropdown.)
- Action: Append History
- Message:
{{{message: queries.openai1.data, type:"response"}}}
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/query-eh.png" alt="Query Event Handler" />
- Now add a new event handler for the Chat Component, with the following configuration:
- Event: On Message Sent
- Action: Run Query
- Query: openai1 (Select your AI query name from the dropdown.)
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/component-eh.png" alt="Component Event Handler" />
- To add Response loading state, click on fx in front of Response loading state option and configure it with
{{queries.openai1.isLoading}}.
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/response-loading.png" alt="Add Response Loading State" />
By following the above steps, your AI Enabled Chatbot will be ready.
<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/widgets/chat/final-bot.png" alt="Final Chatbot" />