From 33ad61ae71ab777c887f5e2f9a28253013b67739 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 27 Jul 2023 00:05:17 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(widget.mdx):=20add=20instru?= =?UTF-8?q?ctions=20for=20using=20Chat=20Widget=20in=20Angular=20applicati?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The commit adds instructions for using the Chat Widget in an Angular application. It includes steps to insert a script tag in the index.html file, suppress warnings related to custom elements in Angular templates, and additional notes about using the Chat Widget in Angular components. --- docs/docs/guidelines/widget.mdx | 43 +++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/docs/docs/guidelines/widget.mdx b/docs/docs/guidelines/widget.mdx index 0176b3f95..0ceb914fc 100644 --- a/docs/docs/guidelines/widget.mdx +++ b/docs/docs/guidelines/widget.mdx @@ -106,6 +106,49 @@ Finally, you can use this component anywhere in your code to show the Chat Widge --- +### Angular + +To use the Chat Widget in Angular, first, you need to insert this <script> tag into the Angular index.html file, inside the <body> tag. + +```html + +``` + +When you use a custom web component in an Angular template, the Angular compiler might show a warning because it doesn't recognize the custom elements by default. To suppress this warning, you can add the 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of the module. + +- Open the module file (usually ends with .module.ts) where you use the 'langflow-chat' web component. +- Import 'CUSTOM_ELEMENTS_SCHEMA' at the top of the file: + +```ts +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +``` + +- Add 'CUSTOM_ELEMENTS_SCHEMA' to the 'schemas' array within the '@NgModule' decorator: + +```ts +@NgModule({ + declarations: [ + // ... Other components and directives ... + ], + imports: [ + // ... Other imported modules ... + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here +}) +export class YourModule { } +``` + +Here are some additional notes: + +- The CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements. +- Adding 'CUSTOM_ELEMENTS_SCHEMA' tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like 'langflow-chat'. +- You can only use the Chat Widget in components that are part of the module where you added the CUSTOM_ELEMENTS_SCHEMA. + +You now have the flexibility to utilize the Chat Widget seamlessly in any Angular application. + +--- + + ## Configuration Use the widget API to customize your widget: