Parsiverse RAG Web Component

A reusable web component for integrating the Parsiverse RAG chat system into any website.

Features

• Works in any web application regardless of framework
• Customizable appearance through attributes
• Responsive design
• RTL support (for languages like Persian)
• Balloon/floating mode option
• Markdown rendering support

Installation

npm install parsiverse-rag-web-component

Or use via CDN:

Usage

There are two ways to use this component:

1. Standalone Usage (Recommended)

Use this method when you want to include the component with all dependencies bundled. This is the simplest way to integrate the chat component.

<!-- Just add the component to your page -->
<parsiverse-rag-chat
  chat-title="Chat with AI"
  placeholder-text="Ask a question..."
  button-text="Send"
  language="en"
  rag-url="https://your-api-endpoint.com"
></parsiverse-rag-chat>

<!-- Include the standalone bundle (includes React and CSS) -->
<script src="https://cdn.jsdelivr.net/npm/parsiverse-rag-web-component@latest/dist/index.standalone.js"></script>

No need to include separate CSS or React libraries - everything is bundled in the standalone version.

2. Usage with React Dependencies

Use this method when you already have React loaded on your page or want to control which version of React is used.

<!-- Include React and ReactDOM -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>

<!-- Include the CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parsiverse-rag-web-component@latest/dist/style.css">

<!-- Add the component to your page -->
<parsiverse-rag-chat
  chat-title="Chat with AI"
  placeholder-text="Ask a question..."
  button-text="Send"
  language="en"
  rag-url="https://your-api-endpoint.com"
></parsiverse-rag-chat>

<!-- Include the UMD bundle (requires React as external dependency) -->
<script src="https://cdn.jsdelivr.net/npm/parsiverse-rag-web-component@latest/dist/index.umd.js"></script>

Available Attributes

| Attribute | Description | Default | |-----------|-------------|---------| | rag-url | The URL of your RAG API endpoint | Required | | user-identifier | Identifier for the user (used for conversation history) | "" | | chat-title | Title displayed in the chat header | Depends on language | | placeholder-text | Placeholder text for the input field | Depends on language | | button-text | Text for the send button | Depends on language | | language | Language code for UI text (supports "en", "fa") | "en" | | balloon-mode | Show as floating chat bubble (true/false) | false | | width | Width of the chat container | "100%" |

Style Customization

| Attribute | Description | Default | |-----------|-------------|---------| | header-background-color | Background color of the header | "#f8f9fa" | | header-text-color | Text color of the header | "#000000" | | user-message-background-color | Background color of user messages | "#3b82f6" | | user-message-text-color | Text color of user messages | "#ffffff" | | assistant-message-background-color | Background color of assistant messages | "#f3f4f6" | | assistant-message-text-color | Text color of assistant messages | "#1f2937" | | input-background-color | Background color of input field | "#ffffff" | | input-text-color | Text color of input field | "#000000" | | button-background-color | Background color of buttons | "#3b82f6" | | button-text-color | Text color of buttons | "#ffffff" | | border-color | Color for borders | "#e0e0e0" | | icon-color | Color for icons | "#3b82f6" | | font-family | Font family for all text | "Segoe UI, system fonts" |

Building from Source

1. Clone the repository
2. Install dependencies: npm install
3. Build the component:
   • Standard build: npm run build
   • Standalone build (with all dependencies): npm run build:standalone

License

MIT