tia-chatbot 1.0.1 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +121 -165
  2. package/dist/tia-widget.iife.js +355 -0
  3. package/dist/tia-widget.iife.js.map +1 -0
  4. package/package.json +33 -28
  5. package/dist/assets/index.css +0 -1
  6. package/dist/tia-widget.cjs +0 -364
  7. package/dist/tia-widget.cjs.map +0 -1
  8. package/dist/tia-widget.mjs +0 -17148
  9. package/dist/tia-widget.mjs.map +0 -1
  10. package/dist/tia-widget.umd.cjs +0 -365
  11. package/dist/tia-widget.umd.cjs.map +0 -1
  12. /package/dist/{lib/index.d.ts → src/widget.d.ts} +0 -0
package/README.md CHANGED
@@ -1,190 +1,146 @@
1
- # Tia Chat Bot - AI Assistant Interface
1
+ # TIA Widget
2
2
 
3
- A modern, responsive chat bot interface built with React, TypeScript, and Tailwind CSS. This application provides a comprehensive AI assistant experience with multiple interaction modes.
3
+ A reusable CDN widget for integrating the TIA chatbot into any website.
4
4
 
5
- ## 🚀 Features
5
+ ## Installation
6
6
 
7
- ### Core Features
8
- - **Multi-Modal Interface**: Text chat, voice interaction, and history management
9
- - **Responsive Design**: Works seamlessly across desktop and mobile devices
10
- - **Modern UI**: Clean, intuitive interface with smooth animations
11
- - **Real-time Chat**: Interactive messaging with AI assistant
12
- - **Voice Interface**: Voice-to-text and text-to-speech capabilities
13
- - **Chat History**: Browse and search through past conversations
7
+ ### Via NPM
14
8
 
15
- ### Interface Components
16
- - **Welcome Screen**: Animated landing page with key topics
17
- - **Chat Interface**: Real-time messaging with quick topic suggestions
18
- - **Voice Interface**: Voice recording and playback functionality
19
- - **History View**: Searchable conversation history
20
- - **Sidebar Navigation**: Easy switching between different modes
9
+ ```bash
10
+ npm install tia-widget
11
+ ```
21
12
 
22
- ## 🏗️ Project Structure
13
+ ### Via CDN
14
+
15
+ ```html
16
+ <script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
17
+ ```
23
18
 
19
+ ## Usage
20
+
21
+ ### Automatic Initialization (CDN)
22
+
23
+ Add the script tag with data attributes for auto-initialization:
24
+
25
+ ```html
26
+ <!DOCTYPE html>
27
+ <html>
28
+ <head>
29
+ <title>My Website</title>
30
+ <!-- Include React and ReactDOM for the widget -->
31
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
32
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
33
+ </head>
34
+ <body>
35
+ <!-- Your website content -->
36
+
37
+ <!-- TIA Widget Script -->
38
+ <script
39
+ src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"
40
+ data-auto-init
41
+ data-api-url="https://your-api-endpoint.com"
42
+ data-container-id="custom-widget-container">
43
+ </script>
44
+ </body>
45
+ </html>
24
46
  ```
25
- src/
26
- ├── components/
27
- │ ├── chat/
28
- │ │ └── ChatInterface.tsx # Main chat functionality
29
- │ ├── home/
30
- │ │ └── WelcomeScreen.tsx # Landing page with animations
31
- │ ├── history/
32
- │ │ └── ChatHistory.tsx # Conversation history
33
- │ ├── layout/
34
- │ │ ├── MainLayout.tsx # Main app layout
35
- │ │ └── Sidebar.tsx # Navigation sidebar
36
- │ ├── voice/
37
- │ │ └── VoiceInterface.tsx # Voice interaction
38
- │ ├── ui/ # Reusable UI components
39
- │ │ ├── avatar.tsx
40
- │ │ ├── badge.tsx
41
- │ │ ├── button.tsx
42
- │ │ ├── card.tsx
43
- │ │ └── separator.tsx
44
- │ └── index.ts # Component exports
45
- ├── lib/ # Utility functions
46
- └── index.tsx # App entry point
47
+
48
+ ### Manual Initialization
49
+
50
+ ```html
51
+ <!DOCTYPE html>
52
+ <html>
53
+ <head>
54
+ <title>My Website</title>
55
+ <!-- Include React and ReactDOM -->
56
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
57
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
58
+ </head>
59
+ <body>
60
+ <!-- Your website content -->
61
+ <div id="my-widget"></div>
62
+
63
+ <!-- TIA Widget Script -->
64
+ <script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
65
+ <script>
66
+ // Initialize the widget manually
67
+ const widget = window.TIAWidget.init({
68
+ apiUrl: 'https://your-api-endpoint.com',
69
+ containerId: 'my-widget',
70
+ onError: (error) => {
71
+ console.error('TIA Widget Error:', error);
72
+ }
73
+ });
74
+
75
+ // Optional: Unmount the widget later
76
+ // widget.unmount();
77
+ </script>
78
+ </body>
79
+ </html>
47
80
  ```
48
81
 
49
- ## 🎨 Design System
82
+ ### Programmatic Usage (NPM)
83
+
84
+ ```javascript
85
+ import { initTIAWidget } from 'tia-widget';
86
+
87
+ // Initialize the widget
88
+ const widget = initTIAWidget({
89
+ apiUrl: 'https://your-api-endpoint.com',
90
+ containerId: 'my-widget',
91
+ onError: (error) => {
92
+ console.error('Widget error:', error);
93
+ }
94
+ });
95
+
96
+ // Later, unmount if needed
97
+ widget.unmount();
98
+ ```
50
99
 
51
- ### Color Palette
52
- - **Primary**: `#f56057` (Coral Red)
53
- - **Secondary**: `#283068` (Navy Blue)
54
- - **Accent**: `#49507f` (Medium Blue)
55
- - **Background**: White and light grays
56
- - **Text**: Dark grays for readability
100
+ ## Configuration Options
57
101
 
58
- ### Typography
59
- - **Primary Font**: Manrope (Modern, clean)
60
- - **Fallback**: Helvetica, system fonts
102
+ | Option | Type | Default | Description |
103
+ |--------|------|---------|-------------|
104
+ | `apiUrl` | `string` | `window.origin + routerBasename` | The API endpoint URL for the TIA chatbot |
105
+ | `containerId` | `string` | `'tia-widget-root'` | The ID of the DOM element where the widget will be mounted |
106
+ | `onError` | `function` | `console.error` | Error handler function |
61
107
 
62
- ### Animations
63
- - Floating particles on welcome screen
64
- - Smooth transitions between states
65
- - Pulse and glow effects
66
- - Hover animations on interactive elements
108
+ ## Data Attributes (for CDN auto-init)
67
109
 
68
- ## 🛠️ Technology Stack
110
+ - `data-auto-init`: Enables automatic initialization
111
+ - `data-api-url`: Sets the API URL
112
+ - `data-container-id`: Sets the container element ID
69
113
 
70
- - **React 18**: Modern React with hooks
71
- - **TypeScript**: Type-safe development
72
- - **Tailwind CSS**: Utility-first styling
73
- - **Lucide React**: Beautiful icons
74
- - **Radix UI**: Accessible component primitives
75
- - **Vite**: Fast development and building
114
+ ## Publishing to NPM
76
115
 
77
- ## 🚀 Getting Started
116
+ ```bash
117
+ npm run build:cdn
118
+ npm publish
119
+ ```
78
120
 
79
- ### Prerequisites
80
- - Node.js 16+
81
- - npm or yarn
121
+ ## Development
82
122
 
83
- ### Installation
84
123
  ```bash
85
124
  # Install dependencies
86
- npm install
125
+ pnpm install
87
126
 
88
127
  # Start development server
89
- npm run dev
128
+ pnpm run dev
90
129
 
91
130
  # Build for production
92
- npm run build
131
+ pnpm run build
132
+
133
+ # Build for CDN
134
+ pnpm run build:cdn
93
135
  ```
94
136
 
95
- ### Development
96
- The app will be available at `http://localhost:5173`
97
-
98
- ## 📱 Usage
99
-
100
- ### Navigation
101
- - **Home**: Welcome screen with animated elements
102
- - **Chat**: Text-based conversation interface
103
- - **History**: Browse past conversations
104
- - **Voice**: Voice interaction mode
105
-
106
- ### Chat Features
107
- - Type messages in the input field
108
- - Press Enter to send
109
- - Click quick topic badges for instant responses
110
- - View message history with timestamps
111
-
112
- ### Voice Features
113
- - Click the microphone button to start recording
114
- - View real-time transcript
115
- - Play back voice messages
116
- - Adjust voice settings
117
-
118
- ## 🎯 Key Components
119
-
120
- ### ChatInterface
121
- - Real-time messaging
122
- - Message bubbles with timestamps
123
- - Quick topic suggestions
124
- - Input with emoji and attachment support
125
-
126
- ### WelcomeScreen
127
- - Animated particle effects
128
- - Gradient text and backgrounds
129
- - Interactive topic badges
130
- - Responsive design
131
-
132
- ### VoiceInterface
133
- - Voice recording controls
134
- - Transcript display
135
- - Voice message history
136
- - Playback controls
137
-
138
- ### ChatHistory
139
- - Searchable conversation list
140
- - Message counts and timestamps
141
- - Tag-based categorization
142
- - Empty state handling
143
-
144
- ## 🔧 Customization
145
-
146
- ### Adding New Features
147
- 1. Create new component in appropriate directory
148
- 2. Add to MainLayout.tsx routing
149
- 3. Update sidebar navigation if needed
150
- 4. Export from components/index.ts
151
-
152
- ### Styling
153
- - Use Tailwind CSS classes
154
- - Follow the established color palette
155
- - Maintain consistent spacing and typography
156
- - Add animations for better UX
157
-
158
- ### Theming
159
- - Colors are defined in CSS variables
160
- - Easy to modify in tailwind.css
161
- - Dark mode support available
162
-
163
- ## 📄 License
164
-
165
- This project is licensed under the MIT License.
166
-
167
- ## 🤝 Contributing
168
-
169
- 1. Fork the repository
170
- 2. Create a feature branch
171
- 3. Make your changes
172
- 4. Test thoroughly
173
- 5. Submit a pull request
174
-
175
- ## 🐛 Known Issues
176
-
177
- - Voice functionality is currently simulated
178
- - Some animations may need optimization for older devices
179
- - Mobile responsiveness could be improved
180
-
181
- ## 🔮 Future Enhancements
182
-
183
- - [ ] Real voice recognition integration
184
- - [ ] Dark mode toggle
185
- - [ ] Message search functionality
186
- - [ ] File upload support
187
- - [ ] User authentication
188
- - [ ] Multi-language support
189
- - [ ] Advanced AI responses
190
- - [ ] Export conversation history
137
+ ## Requirements
138
+
139
+ - React 18+
140
+ - React DOM 18+
141
+
142
+ The widget bundles React and other dependencies, but for CDN usage, you need to include React and ReactDOM scripts separately.
143
+
144
+ ## License
145
+
146
+ MIT