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:

1. 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
}

2. 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;

License

MIT

Support

For issues, feature requests, or questions, please open an issue on our GitHub repository.