adaschool-rich-canvas

README.md

This file provides an overview of the project, installation steps, usage, and development instructions.

Rich Canvas

Rich Canvas is a reusable JavaScript library for rendering rich media content (text, audio, video) in chat interfaces. Designed for flexibility and scalability, this library can be easily integrated into any project.

Features

• Render text, audio, and video content.
• Simple API for importing and using the library.
• Modular and extensible design.
• Compatible with React and modern JavaScript frameworks.

Installation

To install Rich Canvas via npm: bash npm install rich-canvas

Usage

Import and Display

javascript import { display } from 'rich-canvas'; const messages = [ { role: 'user', content: 'Hello!', contentType: 'text' }, { role: 'assistant', content: 'Hi there!', contentType: 'text' }, { role: 'assistant', content: 'https://youtu.be/dQw4w9WgXcQ', contentType: 'video' }, ]; display({ target: '#chat-window', messages, isTyping: true, });

Example HTML

html

<script src="https://cdn.your-hosted-rich-canvas.com/rich-canvas.js"></script> <script> RichCanvas.display({ target: '#chat-window', messages: [...], isTyping: true, }); </script>

Development

To build the project: bash npm run build

To run tests: bash npm test

Deployment

You can deploy Rich Canvas on AWS or use npm for package management.