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/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/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