Opensesame-chat-widget NPM

OpenSesame Chat Widget

A React component that provides an embeddable chat interface for AI interactions, identical to the original OpenSesame NodeCell.

Compatibility

✅ React 18 & 19
✅ Next.js 13, 14, 15 (including canary releases)
✅ Works with React Server Components
✅ Uses TailwindCSS just like the original NodeCell

Installation

npm install opensesame-chat-widget
# or
yarn add opensesame-chat-widget

Using with TailwindCSS

This package uses TailwindCSS just like the original NodeCell. There are two ways to integrate it with your project:

Option 1: Import the pre-built CSS (Simplest)

This method works for all projects, even those not using Tailwind:

// Import the pre-built CSS
import 'opensesame-chat-widget/dist/index.css';

// Then import the component
import { NodeCell } from 'opensesame-chat-widget';

Option 2: For Projects Already Using TailwindCSS

If your project already uses TailwindCSS, you can integrate with your configuration:

Add the package to your Tailwind content paths:

// tailwind.config.js
module.exports = {
  content: [
    // ... your existing content paths
    './node_modules/opensesame-chat-widget/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
}

Make sure your Tailwind setup includes the same plugins:

// tailwind.config.js
module.exports = {
  // ... content, theme, etc.
  plugins: [
    // ... your existing plugins
    require('tailwindcss-animate'),
  ],
}

Usage

import { NodeCell } from 'opensesame-chat-widget';
import 'opensesame-chat-widget/dist/index.css'; // Import the styles

function App() {
  return (
    <div className="App">
      <NodeCell 
        config={{
          primaryColor: '#4F46E5',
          theme: 'light', // 'light', 'dark', or 'system'
          formFactor: 'node', // 'node', 'sidebar', or 'screen'
          apiEndpoint: 'https://your-api-endpoint.com/api/agent', // Optional: Your API endpoint
          apiKey: 'your-api-key', // Optional: Your API key
          userId: 'user-id', // Optional: User ID
        }}
      />
    </div>
  );
}

export default App;

Configuration

The NodeCell component accepts a config prop with the following options:

Property	Type	Description
`primaryColor`	string	The primary color for the widget
`theme`	'light' \| 'dark' \| 'system'	The color theme
`formFactor`	'node' \| 'sidebar' \| 'screen'	The display format
`logo`	string	Optional: URL to a custom logo
`apiEndpoint`	string	Optional: API endpoint for processing messages
`apiKey`	string	Optional: API key for authentication
`userId`	string	Optional: User ID for authentication

Customizing API Integration

By default, the widget includes stub implementations for API calls. You can override these by providing your own implementations:

import { NodeCell } from 'opensesame-chat-widget';
import 'opensesame-chat-widget/dist/index.css';

// Import the utility functions
import { 
  addChat, 
  updateChat, 
  deleteChat, 
  fetchUserChats, 
  getUserCredentials 
} from 'opensesame-chat-widget/dist/utils/chat';

// Override with your implementations
addChat.implementation = async (chat) => {
  // Your implementation
  return chat;
};

function App() {
  return (
    <div className="App">
      <NodeCell 
        config={{
          primaryColor: '#4F46E5',
          theme: 'light',
          formFactor: 'node',
        }}
      />
    </div>
  );
}

export default App;