feat: Add @ozwell/react package #39
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add package.json with React 18/19 peer dependencies - Configure TypeScript with strict mode and tsup bundler - Set up npm ignore for clean publishing - Add README with accurate feature support matrix Package configuration: - Dual ESM/CJS output via tsup - Type declarations enabled - Development and build scripts ready Feature clarity: - Documents currently working features (tools, endpoints, context) - Clearly marks planned features (apiKey, agentId, theming) - Warns users about docs describing future API state Closes part of prerequisites for React package implementation
aditya-damerla128
changed the title
Define complete type system for React package: Core Types: - OzwellChatProps: Component props with current + future features - UseOzwellReturn: Hook return type with state and methods - OzwellConfig: Configuration matching vanilla widget - OzwellTool: MCP tool definitions (OpenAI-compatible) Features: - Clear separation of implemented vs planned features - Full JSDoc documentation - Window type extensions for vanilla API - PostMessage event types - Type-safe, no any types Maps vanilla widget capabilities: - endpoint, model, system, tools (current) - apiKey, agentId, theme (future) Verified: TypeScript compiles without errors
Main React component wrapping vanilla widget with: - Dynamic script loading and lifecycle management - Prop mapping to vanilla config - Event handling via postMessage - Support for current + future props Verified: TypeScript compiles successfully
React hook for programmatic widget control with: - Widget state: isReady, isOpen, iframe - Working method: setContext() (uses vanilla API) - Placeholder methods: open(), close(), toggle(), sendMessage() - Event monitoring via postMessage - Forward-compatible for future vanilla features Verified: TypeScript compiles successfully
…sage Changes: - Add src/index.ts with component, hook, and type exports - Fix package.json exports to match actual build output (index.js/index.cjs) - Add comprehensive "Using Tools" section to README with examples - Document tool definition and postMessage-based tool handling - Include tool handler pattern examples for cleaner code Basic testing done with TimeHarbor app integration - module resolution working
- Add open(), close(), isOpen, hasUnread to OzwellChatAPI types - Implement open/close methods in useOzwell hook - Add hasUnread state tracking with unread event listener - Add autoOpenOnReply config option - Add assistant_response message type - Update OzwellWidgetMessage with new event types
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces the @ozwell/react package, providing React developers with a component-based wrapper around the existing Ozwell vanilla JavaScript chat widget. The implementation includes TypeScript type definitions, React components, custom hooks, and comprehensive documentation.
Key Changes:
- Complete TypeScript implementation with strict type safety
- OzwellChat component for easy React integration
- useOzwell hook for programmatic widget control
- MCP (Model Context Protocol) tool calling support with simplified callback API
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
packages/react/package.json |
Package configuration with dual ESM/CJS builds, React 18/19 peer dependencies, and npm publishing setup |
packages/react/tsconfig.json |
TypeScript configuration with strict mode, React JSX support, and bundler module resolution |
packages/react/src/types.ts |
Comprehensive TypeScript type definitions for props, config, MCP tools, and message protocols |
packages/react/src/OzwellChat.tsx |
Main React component that loads the vanilla widget script and provides React-friendly props/callbacks |
packages/react/src/useOzwell.ts |
Custom React hook for programmatic widget control (open/close/toggle/sendMessage/setContext) |
packages/react/src/index.ts |
Package entry point exporting all components, hooks, and TypeScript types |
packages/react/README.md |
Package documentation with installation, quick start, feature matrix, and MCP tool examples |
packages/react/.npmignore |
NPM publish configuration excluding source files and development artifacts |
packages/react/package-lock.json |
Dependency lock file with React 19, TypeScript 5.9, and tsup build tooling |
docs/frontend/react.md |
Comprehensive integration guide with API reference, usage examples, and tool handling patterns |
Files not reviewed (1)
- packages/react/package-lock.json: Language not supported
Collaborator
Author
|
Fixed: removed dead code, emojis, and getElementById examples |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Implements the
@ozwell/reactpackage as outlined in issue #33.This PR adds a complete React wrapper around the existing Ozwell chat widget, providing React developers with a familiar component-based API while leveraging the proven vanilla JS implementation.
Changes
Package Structure
packages/react/src/types.ts- TypeScript type definitionspackages/react/src/OzwellChat.tsx- Main React componentpackages/react/src/useOzwell.ts- Hook for programmatic controlpackages/react/src/index.ts- Package exportsFeatures
onToolCallprop for simplified MCP tool handlingDocumentation
Feature Support
Currently Available
endpointprop)modelprop)toolsprop +onToolCallcallback)contextprop)systemprop)debugprop)openaiApiKeyprop)Coming Soon
apiKeyprop)agentIdprop)theme,primaryColorprops)Testing
Closes #33