interview-widget 0.0.1 → 0.0.3

package/README.md

@@ -1,16 +1,16 @@
-# Chat Widget
+# Interview Widget
 
-A simple, customizable React chat widget that can be easily embedded into any website or React application via CDN.
+A customizable React interview widget that can be easily embedded into any website or React application via CDN.
 
 ## Features
 
-- 🎨 **Customizable themes** (Light/Dark)
+- 📸 **Video capture** with camera integration
 - 📱 **Responsive design** with mobile support
 - 🔧 **Flexible positioning** (inline, fixed bottom-right/left)
-- ⚡ **TypeScript support** with full type definitions
+- 🧩 **TypeScript support** with full type definitions
 - 🎯 **CDN-ready** for easy integration into any website
-- 🔄 **Auto-reply functionality** for standalone use
-- 💬 **Controlled/uncontrolled** component modes
+- 🔄 **Q&A structured interview flow**
+- 💬 **Configurable questions** for different interview types
 - 🎪 **Tailwind CSS** with prefixed classes to avoid conflicts
 - ✨ **Smooth animations** and modern UI
 
@@ -22,56 +22,104 @@ Add these scripts to your HTML:
 
 ```html
 <!-- Load React and ReactDOM from CDN -->
-<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-
-<!-- Load the chat widget CSS -->
-<link rel="stylesheet" href="https://your-cdn.com/chat-widget.css">
+<script
+  crossorigin
+  src="https://unpkg.com/react@18/umd/react.production.min.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+></script>
+
+<!-- Load the interview widget CSS -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/interview-widget@latest/dist/widget.css"
+/>
 
-<!-- Load the chat widget JavaScript -->
-<script src="https://your-cdn.com/chat-widget.umd.js"></script>
+<!-- Load the interview widget JavaScript -->
+<script src="https://unpkg.com/interview-widget@latest/dist/widget.umd.js"></script>
 
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    const { ChatWidget } = window.ChatWidget;
-    
+  document.addEventListener("DOMContentLoaded", function () {
+    const { InterviewWidget } = window.InterviewWidget;
+
+    // Define your interview questions
+    const questions = [
+      {
+        id: "1",
+        text: "Can you please introduce yourself?",
+        timestamp: new Date(),
+      },
+      {
+        id: "2",
+        text: "What experience do you have with our required technologies?",
+        timestamp: new Date(),
+      },
+      {
+        id: "3",
+        text: "What are your strengths and weaknesses?",
+        timestamp: new Date(),
+      },
+    ];
+
     ReactDOM.render(
-        React.createElement(ChatWidget, {
-            title: 'Customer Support',
-            placeholder: 'How can we help you?',
-            position: 'bottom-right'
-        }),
-        document.getElementById('chat-widget-container')
+      React.createElement(InterviewWidget, {
+        title: "Developer Interview",
+        questions: questions,
+        position: "bottom-right",
+      }),
+      document.getElementById("interview-widget-container")
     );
-});
+  });
 </script>
 ```
 
 ### React Application Integration
 
 ```bash
-npm install chat-widget
+npm install interview-widget
 ```
 
 ```tsx
-import React from 'react';
-import { ChatWidget, Message } from 'chat-widget';
+import React, { useState } from "react";
+import {
+  InterviewWidget,
+  InterviewQuestion,
+  InterviewAnswer,
+} from "interview-widget";
 
 function App() {
-  const [messages, setMessages] = useState<Message[]>([]);
+  const questions: InterviewQuestion[] = [
+    {
+      id: "1",
+      text: "Can you please introduce yourself?",
+      timestamp: new Date(),
+    },
+    {
+      id: "2",
+      text: "What experience do you have with our required technologies?",
+      timestamp: new Date(),
+    },
+  ];
+
+  const handleAnswerSubmit = (answer: InterviewAnswer) => {
+    // Handle submitting answer to your backend
+    console.log("User answered:", answer);
+  };
 
-  const handleSendMessage = (messageText: string) => {
-    // Handle sending message to your backend
-    console.log('User sent:', messageText);
+  const handleComplete = (answers: InterviewAnswer[]) => {
+    // Handle interview completion
+    console.log("All answers:", answers);
   };
 
   return (
     <div>
-      <ChatWidget
-        title="Support Chat"
-        messages={messages}
-        onSendMessage={handleSendMessage}
-        position="bottom-right"
+      <InterviewWidget
+        title="Technical Interview"
+        questions={questions}
+        onAnswerSubmit={handleAnswerSubmit}
+        onComplete={handleComplete}
       />
     </div>
   );
@@ -80,202 +128,37 @@ function App() {
 
 ## API Reference
 
-### ChatWidget Props
+### InterviewWidget Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `"Chat Support"` | Title displayed in the chat header |
-| `placeholder` | `string` | `"Type your message..."` | Input field placeholder text |
-| `onSendMessage` | `(message: string) => void` | `undefined` | Callback when user sends a message |
-| `messages` | `Message[]` | `[]` | Array of messages for controlled mode |
-| `className` | `string` | `""` | Additional CSS classes |
-| `botName` | `string` | `"Support Bot"` | Name displayed for bot messages |
-| `userName` | `string` | `"You"` | Name displayed for user messages |
-| `height` | `string` | `"400px"` | Height of the chat widget |
-| `width` | `string` | `"350px"` | Width of the chat widget |
-| `position` | `'bottom-right' \| 'bottom-left' \| 'inline'` | `"inline"` | Widget positioning |
-| `theme` | `'light' \| 'dark'` | `"light"` | Color theme |
+| Prop             | Type                                   | Default       | Description                             |
+| ---------------- | -------------------------------------- | ------------- | --------------------------------------- | --- |
+| `title`          | `string`                               | `"Interview"` | Title displayed in the interview header |
+| `candidateName`  | `string`                               | `""`          | Optional name of the candidate          |
+| `questions`      | `InterviewQuestion[]`                  | Required      | Array of interview questions            |
+| `onAnswerSubmit` | `(answer: InterviewAnswer) => void`    | `undefined`   | Callback when user submits an answer    |
+| `onComplete`     | `(answers: InterviewAnswer[]) => void` | `undefined`   | Callback when interview is completed    |
+| `className`      | `string`                               | `""`          | Additional CSS classes                  |
+| `height`         | `string`                               | `"600px"`     | Height of the interview widget          |
+| `width`          | `string`                               | `"100%"`      | Width of the interview widget           |     |
 
-### Message Interface
+### InterviewQuestion Interface
 
 ```typescript
-interface Message {
+interface InterviewQuestion {
   id: string;
   text: string;
-  sender: 'user' | 'bot';
+  type?: "text" | "code" | "multiple-choice";
+  options?: string[]; // For multiple choice questions
   timestamp: Date;
 }
 ```
 
-## Usage Examples
-
-### Standalone Widget (Auto-reply)
-
-```tsx
-<ChatWidget
-  title="AI Assistant"
-  placeholder="Ask me anything..."
-  botName="AI Helper"
-  userName="Visitor"
-/>
-```
-
-### Controlled Widget
+### InterviewAnswer Interface
 
-```tsx
-const [messages, setMessages] = useState<Message[]>([]);
-
-const handleMessage = async (text: string) => {
-  // Add user message
-  const userMessage = {
-    id: Date.now().toString(),
-    text,
-    sender: 'user' as const,
-    timestamp: new Date()
-  };
-  setMessages(prev => [...prev, userMessage]);
-
-  // Get bot response from your API
-  const response = await fetch('/api/chat', {
-    method: 'POST',
-    body: JSON.stringify({ message: text })
-  });
-  const data = await response.json();
-
-  // Add bot response
-  const botMessage = {
-    id: (Date.now() + 1).toString(),
-    text: data.reply,
-    sender: 'bot' as const,
-    timestamp: new Date()
-  };
-  setMessages(prev => [...prev, botMessage]);
-};
-
-<ChatWidget
-  messages={messages}
-  onSendMessage={handleMessage}
-/>
-```
-
-### Fixed Position Widget
-
-```tsx
-<ChatWidget
-  title="Help & Support"
-  position="bottom-right"
-  height="500px"
-  width="300px"
-/>
-```
-
-### Dark Theme
-
-```tsx
-<ChatWidget
-  theme="dark"
-  title="Night Support"
-  botName="Night Owl Bot"
-/>
-```
-
-## Development
-
-### Setup
-
-```bash
-git clone https://github.com/your-username/chat-widget.git
-cd chat-widget
-npm install
-```
-
-### Development Server
-
-```bash
-npm run dev
-```
-
-Open http://localhost:5173 to see the development examples.
-
-### Build
-
-```bash
-npm run build
-```
-
-This creates:
-- `dist/chat-widget.umd.js` - UMD build for CDN
-- `dist/chat-widget.es.js` - ES modules build
-- `dist/chat-widget.css` - Styles
-- `dist/index.d.ts` - TypeScript definitions
-
-### Testing Examples
-
-After building, you can test the CDN integration by opening `examples/cdn-example.html` in your browser.
-
-## Customization
-
-### Custom Styles
-
-The widget uses Tailwind CSS with the `cw-` prefix to avoid conflicts. You can override styles:
-
-```css
-.chat-widget-container {
-  /* Your custom styles */
-}
-
-.cw-bg-primary-500 {
-  background-color: your-brand-color !important;
+```typescript
+interface InterviewAnswer {
+  questionId: string;
+  answerText: string;
+  timestamp: Date;
 }
 ```
-
-### API Integration
-
-For production use, implement your chat API:
-
-```tsx
-const handleSendMessage = async (message: string) => {
-  try {
-    const response = await fetch('/api/chat', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        message,
-        sessionId: 'user-session-id',
-        timestamp: new Date().toISOString()
-      })
-    });
-    
-    const data = await response.json();
-    // Handle response...
-  } catch (error) {
-    // Handle error...
-  }
-};
-```
-
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-- IE 11+ (with polyfills)
-
-## License
-
-MIT License - see LICENSE file for details.
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests if applicable
-5. Submit a pull request
-
-## Support
-
-- 📧 Email: support@yourcompany.com
-- 🐛 Issues: [GitHub Issues](https://github.com/your-username/chat-widget/issues)
-- 📖 Docs: [Documentation](https://your-docs-site.com)

package/dist/components/interview/answer-area.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface AnswerAreaProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onSubmit: () => void;
+    isSubmitDisabled: boolean;
+    remainingTimeText?: string;
+}
+declare const AnswerArea: React.FC<AnswerAreaProps>;
+export default AnswerArea;

package/dist/components/interview/interview-header.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface InterviewHeaderProps {
+    title: string;
+}
+declare const InterviewHeader: React.FC<InterviewHeaderProps>;
+export default InterviewHeader;

package/dist/components/interview/question-display.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { InterviewQuestion } from '../../types';
+interface QuestionDisplayProps {
+    question: InterviewQuestion;
+}
+declare const QuestionDisplay: React.FC<QuestionDisplayProps>;
+export default QuestionDisplay;

package/dist/components/media/video-feed.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface VideoFeedProps {
+    className?: string;
+}
+declare const VideoFeed: React.FC<VideoFeedProps>;
+export default VideoFeed;

package/dist/components/onboarding-modal.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface PermissionModalProps {
+    isOpen: boolean;
+    onStart: () => void;
+    onClose?: () => void;
+}
+declare const OnboardingModal: React.FC<PermissionModalProps>;
+export default OnboardingModal;

package/dist/components/ui/button.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "text" | "gradient";
+    size?: "sm" | "md" | "lg";
+    fullWidth?: boolean;
+    isLoading?: boolean;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/ui/input.d.ts

@@ -0,0 +1,8 @@
+import { default as React, InputHTMLAttributes } from 'react';
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    fullWidth?: boolean;
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,8 @@
+import { default as React, TextareaHTMLAttributes } from 'react';
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    fullWidth?: boolean;
+}
+declare const Textarea: React.FC<TextareaProps>;
+export default Textarea;

package/dist/index.d.ts

@@ -1,13 +1,11 @@
-import { default as ChatWidget } from './ChatWidget';
-import { default as Message } from './Message';
-export { ChatWidget, Message };
+import { default as InterviewWidget } from './interview-widget';
+export { InterviewWidget };
 export * from './types';
-export { ChatWidget as default };
+export { InterviewWidget as default };
 declare global {
     interface Window {
-        ChatWidget: {
-            ChatWidget: typeof ChatWidget;
-            Message: typeof Message;
+        InterviewWidget: {
+            InterviewWidget: typeof InterviewWidget;
         };
         React: any;
         ReactDOM: any;

package/dist/interview-widget.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { InterviewWidgetProps } from './types';
+declare const InterviewWidget: React.FC<InterviewWidgetProps>;
+export default InterviewWidget;

package/dist/types.d.ts

@@ -1,25 +1,22 @@
-export interface Message {
+export interface InterviewQuestion {
     id: string;
     text: string;
-    sender: 'user' | 'bot';
+    type?: "text" | "code" | "multiple-choice";
+    options?: string[];
     timestamp: Date;
 }
-export interface ChatWidgetProps {
+export interface InterviewAnswer {
+    questionId: string;
+    answerText: string;
+    timestamp: Date;
+}
+export interface InterviewWidgetProps {
     title?: string;
-    placeholder?: string;
-    onSendMessage?: (message: string) => void;
-    messages?: Message[];
+    candidateName?: string;
+    questions: InterviewQuestion[];
+    onComplete?: (answers: InterviewAnswer[]) => void;
+    onAnswerSubmit?: (answer: InterviewAnswer) => void;
     className?: string;
-    botName?: string;
-    userName?: string;
-    height?: string;
     width?: string;
-    position?: 'bottom-right' | 'bottom-left' | 'inline';
-    theme?: 'light' | 'dark';
-}
-export interface ChatWidgetConfig {
-    apiEndpoint?: string;
-    apiKey?: string;
-    autoReply?: boolean;
-    welcomeMessage?: string;
+    height?: string;
 }

package/dist/widget.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.iw-fixed{position:fixed!important}.iw-relative{position:relative!important}.iw-inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}.iw-z-50{z-index:50!important}.iw-mx-4{margin-left:1rem!important;margin-right:1rem!important}.iw-mx-auto{margin-left:auto!important;margin-right:auto!important}.iw-mb-1{margin-bottom:.25rem!important}.iw-mb-2{margin-bottom:.5rem!important}.iw-mb-3{margin-bottom:.75rem!important}.iw-mb-4{margin-bottom:1rem!important}.iw-mr-2{margin-right:.5rem!important}.iw-mt-1{margin-top:.25rem!important}.iw-mt-2{margin-top:.5rem!important}.iw-mt-3{margin-top:.75rem!important}.iw-mt-4{margin-top:1rem!important}.iw-mt-auto{margin-top:auto!important}.iw-block{display:block!important}.iw-flex{display:flex!important}.iw-inline-flex{display:inline-flex!important}.iw-grid{display:grid!important}.iw-h-12{height:3rem!important}.iw-h-4{height:1rem!important}.iw-h-64{height:16rem!important}.iw-h-7{height:1.75rem!important}.iw-h-\[400px\]{height:400px!important}.iw-h-full{height:100%!important}.iw-h-px{height:1px!important}.iw-h-screen{height:100vh!important}.iw-min-h-\[112px\]{min-height:112px!important}.iw-w-12{width:3rem!important}.iw-w-4{width:1rem!important}.iw-w-7{width:1.75rem!important}.iw-w-full{width:100%!important}.iw-w-screen{width:100vw!important}.iw-max-w-3xl{max-width:48rem!important}.iw-flex-1{flex:1 1 0%!important}.iw-flex-grow{flex-grow:1!important}@keyframes iw-spin{to{transform:rotate(360deg)}}.iw-animate-spin{animation:iw-spin 1s linear infinite!important}.iw-cursor-pointer{cursor:pointer!important}.iw-resize-none{resize:none!important}.iw-list-disc{list-style-type:disc!important}.iw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.iw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.iw-flex-col{flex-direction:column!important}.iw-items-center{align-items:center!important}.iw-justify-center{justify-content:center!important}.iw-justify-between{justify-content:space-between!important}.iw-gap-2{gap:.5rem!important}.iw-gap-3{gap:.75rem!important}.iw-gap-4{gap:1rem!important}.iw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0 !important;margin-right:calc(.5rem * var(--tw-space-x-reverse))!important;margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))!important}.iw-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0 !important;margin-right:calc(.75rem * var(--tw-space-x-reverse))!important;margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))!important}.iw-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0 !important;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)))!important;margin-bottom:calc(.5rem * var(--tw-space-y-reverse))!important}.iw-overflow-hidden{overflow:hidden!important}.iw-rounded{border-radius:.25rem!important}.iw-rounded-lg{border-radius:.5rem!important}.iw-rounded-md{border-radius:.375rem!important}.iw-rounded-none{border-radius:0!important}.iw-rounded-xl{border-radius:.75rem!important}.iw-border{border-width:1px!important}.iw-border-b{border-bottom-width:1px!important}.iw-border-gray-200{--tw-border-opacity: 1 !important;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))!important}.iw-border-gray-300{--tw-border-opacity: 1 !important;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))!important}.iw-border-indigo-100{--tw-border-opacity: 1 !important;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))!important}.iw-border-primary-500{--tw-border-opacity: 1 !important;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))!important}.iw-border-red-500{--tw-border-opacity: 1 !important;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))!important}.iw-border-transparent{border-color:transparent!important}.iw-bg-black\/50{background-color:#00000080!important}.iw-bg-gray-200{--tw-bg-opacity: 1 !important;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))!important}.iw-bg-gray-50{--tw-bg-opacity: 1 !important;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))!important}.iw-bg-gray-900{--tw-bg-opacity: 1 !important;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))!important}.iw-bg-primary-100{--tw-bg-opacity: 1 !important;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))!important}.iw-bg-primary-600{--tw-bg-opacity: 1 !important;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))!important}.iw-bg-purple-500{--tw-bg-opacity: 1 !important;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))!important}.iw-bg-transparent{background-color:transparent!important}.iw-bg-white{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))!important}.iw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))!important}.iw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))!important}.iw-from-indigo-50{--tw-gradient-from: #eef2ff var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.iw-from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.iw-to-indigo-500{--tw-gradient-to: #6366f1 var(--tw-gradient-to-position) !important}.iw-to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position) !important}.iw-object-cover{-o-object-fit:cover!important;object-fit:cover!important}.iw-p-2{padding:.5rem!important}.iw-p-4{padding:1rem!important}.iw-p-5{padding:1.25rem!important}.iw-px-3{padding-left:.75rem!important;padding-right:.75rem!important}.iw-px-4{padding-left:1rem!important;padding-right:1rem!important}.iw-px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.iw-py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.iw-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.iw-py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}.iw-py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.iw-py-4{padding-top:1rem!important;padding-bottom:1rem!important}.iw-py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.iw-pl-4{padding-left:1rem!important}.iw-pt-2{padding-top:.5rem!important}.iw-text-center{text-align:center!important}.iw-text-\[15px\]{font-size:15px!important}.iw-text-base{font-size:1rem!important;line-height:1.5rem!important}.iw-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.iw-text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.iw-text-xs{font-size:.75rem!important;line-height:1rem!important}.iw-font-bold{font-weight:700!important}.iw-font-medium{font-weight:500!important}.iw-font-semibold{font-weight:600!important}.iw-leading-6{line-height:1.5rem!important}.iw-text-gray-500{--tw-text-opacity: 1 !important;color:rgb(107 114 128 / var(--tw-text-opacity, 1))!important}.iw-text-gray-700{--tw-text-opacity: 1 !important;color:rgb(55 65 81 / var(--tw-text-opacity, 1))!important}.iw-text-gray-800{--tw-text-opacity: 1 !important;color:rgb(31 41 55 / var(--tw-text-opacity, 1))!important}.iw-text-gray-900{--tw-text-opacity: 1 !important;color:rgb(17 24 39 / var(--tw-text-opacity, 1))!important}.iw-text-primary-600{--tw-text-opacity: 1 !important;color:rgb(37 99 235 / var(--tw-text-opacity, 1))!important}.iw-text-primary-700{--tw-text-opacity: 1 !important;color:rgb(29 78 216 / var(--tw-text-opacity, 1))!important}.iw-text-red-600{--tw-text-opacity: 1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1))!important}.iw-text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity, 1))!important}.iw-opacity-25{opacity:.25!important}.iw-opacity-75{opacity:.75!important}.iw-shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.iw-backdrop-blur-sm{--tw-backdrop-blur: blur(4px) !important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.iw-transition-all{transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}.iw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}:root{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-opacity: .5}.interview-widget-container{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.interview-messages::-webkit-scrollbar{width:6px}.interview-messages::-webkit-scrollbar-track{background:#f1f1f1}.interview-messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.interview-messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-animation{animation:slideIn .3s ease-out}.iw-hover\:bg-primary-600:hover{background-color:#2563eb!important}.iw-focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}.iw-focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.iw-focus\:ring-primary-500:focus{--tw-ring-opacity: 1 !important;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important}.iw-disabled\:opacity-50:disabled{opacity:.5!important}.iw-disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}@media (min-width: 1024px){.iw-lg\:max-w-md{max-width:28rem!important}}@media (min-width: 768px){.iw-md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}.hover\:iw-from-purple-600:hover{--tw-gradient-from: #9333ea var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important}.hover\:iw-to-indigo-600:hover{--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position) !important}.hover\:iw-text-gray-700:hover{--tw-text-opacity: 1 !important;color:rgb(55 65 81 / var(--tw-text-opacity, 1))!important}

package/dist/widget.es.js

@@ -0,0 +1,405 @@
+import { useRef as j, useState as c, useEffect as E, useMemo as z } from "react";
+var I = { exports: {} }, y = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F = Symbol.for("react.transitional.element"), G = Symbol.for("react.fragment");
+function $(r, s, i) {
+  var a = null;
+  if (i !== void 0 && (a = "" + i), s.key !== void 0 && (a = "" + s.key), "key" in s) {
+    i = {};
+    for (var t in s)
+      t !== "key" && (i[t] = s[t]);
+  } else i = s;
+  return s = i.ref, {
+    $$typeof: F,
+    type: r,
+    key: a,
+    ref: s !== void 0 ? s : null,
+    props: i
+  };
+}
+y.Fragment = G;
+y.jsx = $;
+y.jsxs = $;
+I.exports = y;
+var e = I.exports;
+const k = ({
+  children: r,
+  variant: s = "primary",
+  size: i = "md",
+  fullWidth: a = !1,
+  isLoading: t = !1,
+  disabled: o,
+  className: w = "",
+  ...l
+}) => {
+  const m = "iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2", x = {
+    primary: "iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",
+    secondary: "iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",
+    outline: "iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",
+    text: "iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",
+    gradient: "iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"
+  }, h = {
+    sm: "iw-px-3 iw-py-1.5 iw-text-sm",
+    md: "iw-px-4 iw-py-2 iw-text-sm",
+    lg: "iw-px-5 iw-py-2.5 iw-text-base"
+  }, d = "iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none", u = a ? "iw-w-full" : "";
+  return /* @__PURE__ */ e.jsxs(
+    "button",
+    {
+      className: `${m} ${x[s]} ${h[i]} ${u} ${d} ${w}`,
+      disabled: o || t,
+      ...l,
+      children: [
+        t && /* @__PURE__ */ e.jsxs(
+          "svg",
+          {
+            className: "iw-animate-spin iw-mr-2 iw-h-4 iw-w-4 iw-text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                "circle",
+                {
+                  className: "iw-opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "path",
+                {
+                  className: "iw-opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        r
+      ]
+    }
+  );
+}, Q = ({
+  isOpen: r,
+  onStart: s,
+  onClose: i
+}) => {
+  var g;
+  const a = j(null), t = j(null), [o, w] = c(!1), [l, m] = c(null), [x, h] = c(!1), d = () => {
+    t.current && (t.current.getTracks().forEach((n) => n.stop()), t.current = null);
+  }, u = async () => {
+    h(!0), m(null);
+    try {
+      const n = await navigator.mediaDevices.getUserMedia({
+        video: { width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: !0
+      });
+      t.current = n, a.current && (a.current.srcObject = n), w(!0);
+    } catch (n) {
+      console.error("Media permission error:", n);
+      let f = "Unable to access camera or microphone.";
+      (n == null ? void 0 : n.name) === "NotAllowedError" ? f = "Permissions denied. Please allow access to camera and microphone." : (n == null ? void 0 : n.name) === "NotFoundError" ? f = "No camera/microphone found. Please connect a device and retry." : n != null && n.message && (f = n.message), w(!1), m(f);
+    } finally {
+      h(!1);
+    }
+  };
+  if (E(() => {
+    if (!r) {
+      d();
+      return;
+    }
+    return u(), () => {
+      d();
+    };
+  }, [r]), !r) return null;
+  const N = () => {
+    s(), d();
+  };
+  return /* @__PURE__ */ e.jsx("div", { className: "iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center iw-bg-black/50 iw-backdrop-blur-sm", children: /* @__PURE__ */ e.jsxs("div", { className: "iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "iw-px-5 iw-py-4 iw-border-b iw-border-gray-200 iw-flex iw-items-center iw-justify-between", children: [
+      /* @__PURE__ */ e.jsx("h2", { className: "iw-text-base iw-font-semibold", children: "Camera & Microphone Check" }),
+      i && /* @__PURE__ */ e.jsx(
+        "button",
+        {
+          "aria-label": "Close",
+          className: "iw-text-gray-500 hover:iw-text-gray-700",
+          onClick: () => {
+            d(), i == null || i();
+          },
+          children: "✕"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "iw-p-4 iw-grid iw-grid-cols-1 iw-md:grid-cols-2 iw-gap-4", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900", children: /* @__PURE__ */ e.jsx(
+        "video",
+        {
+          ref: a,
+          autoPlay: !0,
+          playsInline: !0,
+          muted: !0,
+          className: "iw-w-full iw-h-64 iw-object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-flex-col iw-gap-3", children: [
+        /* @__PURE__ */ e.jsx("p", { className: "iw-text-sm iw-text-gray-700", children: "We will need access to your camera and microphone. Grant permission to preview your setup and to enable the Start Interview button." }),
+        !((g = navigator.mediaDevices) != null && g.getUserMedia) && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-red-600", children: "Your browser does not support media devices. Please use a modern browser like Chrome, Edge, or Firefox." }),
+        l && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-red-600", children: l }),
+        /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-gap-2", children: [
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              onClick: u,
+              isLoading: x,
+              variant: "outline",
+              size: "sm",
+              children: o ? "Recheck Permissions" : "Enable Camera & Mic"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              onClick: N,
+              disabled: !o,
+              size: "sm",
+              variant: "gradient",
+              children: "Start Interview"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs("ul", { className: "iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4", children: [
+          /* @__PURE__ */ e.jsx("li", { children: "Your preview is muted to avoid echo." }),
+          /* @__PURE__ */ e.jsx("li", { children: "You can change devices from your browser’s site settings." })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}, Y = ({ title: r }) => /* @__PURE__ */ e.jsxs("header", { className: "iw-w-full iw-text-gray-900", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-2", children: [
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: "iw-h-7 iw-w-7 iw-rounded-md iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
+          children: "N"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("p", { className: "iw-text-sm iw-font-medium", children: "Novara" })
+    ] }),
+    /* @__PURE__ */ e.jsx("h1", { className: "iw-text-base iw-font-medium", children: r }),
+    /* @__PURE__ */ e.jsx("button", { className: "iw-text-sm iw-text-gray-500 hover:iw-text-gray-700", children: "Exit Interview" })
+  ] }),
+  /* @__PURE__ */ e.jsx("div", { className: "iw-h-px iw-bg-gray-200" })
+] }), _ = ({ question: r }) => /* @__PURE__ */ e.jsxs(
+  "div",
+  {
+    className: "iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",
+    children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-space-x-3 iw-mb-3", children: [
+        /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: "iw-h-12 iw-w-12 iw-rounded-lg iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",
+            children: "N"
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          /* @__PURE__ */ e.jsx("div", { className: "iw-text-sm iw-font-semibold", children: "Novara" }),
+          /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: "Assistant" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("p", { className: "iw-text-[15px] iw-leading-6", children: r.text }),
+      r.type === "multiple-choice" && r.options && /* @__PURE__ */ e.jsx("div", { className: "iw-mt-3 iw-space-y-2", children: r.options.map((s, i) => /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: "iw-p-2 iw-rounded iw-border iw-border-gray-300 iw-hover:bg-gray-100 iw-cursor-pointer iw-transition-colors",
+          children: s
+        },
+        i
+      )) })
+    ]
+  }
+), U = ({ className: r = "" }) => {
+  const s = j(null);
+  return E(() => {
+    let i = null;
+    return (async () => {
+      try {
+        i = await navigator.mediaDevices.getUserMedia({
+          video: !0,
+          audio: !1
+        }), s.current && (s.current.srcObject = i);
+      } catch (t) {
+        console.error("Error accessing camera:", t);
+      }
+    })(), () => {
+      i && i.getTracks().forEach((t) => t.stop());
+    };
+  }, []), /* @__PURE__ */ e.jsx("div", { className: `iw-relative ${r}`, children: /* @__PURE__ */ e.jsx(
+    "video",
+    {
+      ref: s,
+      autoPlay: !0,
+      playsInline: !0,
+      muted: !0,
+      className: "iw-w-full iw-h-full iw-object-cover iw-rounded-md"
+    }
+  ) });
+}, W = ({
+  label: r,
+  error: s,
+  fullWidth: i = !1,
+  className: a = "",
+  id: t,
+  ...o
+}) => {
+  const w = t || `textarea-${Math.random().toString(36).substring(2, 9)}`, l = "iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all", m = s ? "iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500" : "", x = i ? "iw-w-full" : "";
+  return /* @__PURE__ */ e.jsxs("div", { className: `${i ? "iw-w-full" : ""} ${a}`, children: [
+    r && /* @__PURE__ */ e.jsx(
+      "label",
+      {
+        htmlFor: w,
+        className: "iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "textarea",
+      {
+        id: w,
+        className: `${l} ${m} ${x}`,
+        "aria-invalid": s ? "true" : "false",
+        ...o
+      }
+    ),
+    s && /* @__PURE__ */ e.jsx("p", { className: "iw-mt-1 iw-text-sm iw-text-red-600", children: s })
+  ] });
+}, V = ({
+  value: r,
+  onChange: s,
+  onSubmit: i,
+  isSubmitDisabled: a,
+  remainingTimeText: t
+}) => {
+  const o = (w) => {
+    w.key === "Enter" && (w.ctrlKey || w.metaKey) && !a && (w.preventDefault(), i());
+  };
+  return /* @__PURE__ */ e.jsx("div", { className: "iw-mt-auto", children: /* @__PURE__ */ e.jsxs("div", { className: "iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-items-center iw-justify-between iw-px-3 iw-py-2 iw-bg-gray-50 iw-border-b iw-border-gray-200", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "iw-text-sm iw-font-medium", children: "Your answer" }),
+      t && /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: t })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      W,
+      {
+        value: r,
+        onChange: s,
+        onKeyDown: o,
+        placeholder: "Type your answer here...",
+        className: "iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",
+        rows: 5,
+        fullWidth: !0
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: "iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "iw-text-xs iw-text-gray-500", children: /* @__PURE__ */ e.jsx("kbd", { children: " Press Ctrl+Enter to submit" }) }),
+      /* @__PURE__ */ e.jsx(
+        k,
+        {
+          onClick: i,
+          disabled: a,
+          size: "sm",
+          variant: "gradient",
+          children: "Submit Answer"
+        }
+      )
+    ] })
+  ] }) });
+}, B = ({
+  title: r = "Interview",
+  questions: s = [],
+  onComplete: i,
+  onAnswerSubmit: a,
+  className: t = "",
+  width: o = "100%",
+  height: w = "600px"
+}) => {
+  const [l, m] = c(0), [x, h] = c([]), [d, u] = c(""), [N, g] = c(!1), [n, f] = c(!0), [C, P] = c(!1), [S] = c(!0), M = j(null), p = s[l], T = () => {
+    const v = {
+      questionId: (p == null ? void 0 : p.id) || "",
+      answerText: d,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    h([...x, v]), a && a(v), l < s.length - 1 ? (m((b) => b + 1), u("")) : (g(!0), i && i(x));
+  }, R = z(() => {
+    const b = 60 - Math.floor(Date.now() / 1e3 % 60), A = Math.floor(b / 60).toString().padStart(2, "0"), D = (b % 60).toString().padStart(2, "0");
+    return `Time to Talk: ${A}:${D} min`;
+  }, [l]);
+  return C ? /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: M,
+      className: `interview-widget-container iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden ${t}`,
+      style: {
+        width: o,
+        height: w
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(Y, { title: r }),
+        /* @__PURE__ */ e.jsx("div", { className: "iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5", children: N ? /* @__PURE__ */ e.jsxs("div", { className: "iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "iw-text-xl iw-font-bold iw-mb-2", children: "Interview Complete!" }),
+          /* @__PURE__ */ e.jsx("p", { className: "iw-text-center iw-mb-4", children: "Thank you for participating in this interview." })
+        ] }) : /* @__PURE__ */ e.jsxs("div", { className: "iw-h-full iw-flex iw-flex-col", children: [
+          /* @__PURE__ */ e.jsx("div", { className: "iw-flex-1", children: p && /* @__PURE__ */ e.jsx(_, { question: p }) }),
+          /* @__PURE__ */ e.jsxs("div", { className: "iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4", children: [
+            S && /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                className: "iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",
+                children: /* @__PURE__ */ e.jsx(U, { className: "iw-w-full iw-h-[400px]" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              V,
+              {
+                value: d,
+                onChange: (v) => u(v.target.value),
+                onSubmit: T,
+                isSubmitDisabled: !d.trim() || !C,
+                remainingTimeText: R
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsx("div", { className: "iw-h-screen iw-w-screen", children: /* @__PURE__ */ e.jsx(
+    Q,
+    {
+      isOpen: n,
+      onStart: () => {
+        console.log("Permissions granted, starting interview"), P(!0), f(!1);
+      }
+    }
+  ) });
+};
+typeof window < "u" && (window.InterviewWidget = {
+  InterviewWidget: B
+});
+export {
+  B as InterviewWidget,
+  B as default
+};

package/dist/widget.umd.js

@@ -0,0 +1,9 @@
+(function(m,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],n):(m=typeof globalThis<"u"?globalThis:m||self,n(m.InterviewWidget={},m.React))})(this,function(m,n){"use strict";var C={exports:{}},b={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var M=Symbol.for("react.transitional.element"),P=Symbol.for("react.fragment");function E(r,s,i){var a=null;if(i!==void 0&&(a=""+i),s.key!==void 0&&(a=""+s.key),"key"in s){i={};for(var t in s)t!=="key"&&(i[t]=s[t])}else i=s;return s=i.ref,{$$typeof:M,type:r,key:a,ref:s!==void 0?s:null,props:i}}b.Fragment=P,b.jsx=E,b.jsxs=E,C.exports=b;var e=C.exports;const N=({children:r,variant:s="primary",size:i="md",fullWidth:a=!1,isLoading:t=!1,disabled:l,className:o="",...d})=>{const x="iw-inline-flex iw-items-center iw-justify-center iw-rounded-md iw-font-medium iw-transition-colors iw-focus:outline-none iw-focus:ring-2 iw-focus:ring-primary-500 iw-focus:ring-offset-2",u={primary:"iw-bg-primary-600 iw-text-white iw-hover:bg-primary-700 iw-border iw-border-transparent",secondary:"iw-bg-primary-100 iw-text-primary-700 iw-hover:bg-primary-200 iw-border iw-border-transparent",outline:"iw-bg-transparent iw-text-primary-700 iw-border iw-border-primary-500 iw-hover:bg-primary-50",text:"iw-bg-transparent iw-text-primary-600 iw-hover:bg-primary-50 iw-border iw-border-transparent",gradient:"iw-text-white iw-border iw-border-transparent iw-bg-gradient-to-r iw-from-purple-500 iw-to-indigo-500 hover:iw-from-purple-600 hover:iw-to-indigo-600"},h={sm:"iw-px-3 iw-py-1.5 iw-text-sm",md:"iw-px-4 iw-py-2 iw-text-sm",lg:"iw-px-5 iw-py-2.5 iw-text-base"},c="iw-disabled:opacity-50 iw-disabled:cursor-not-allowed iw-disabled:pointer-events-none",f=a?"iw-w-full":"";return e.jsxs("button",{className:`${x} ${u[s]} ${h[i]} ${f} ${c} ${o}`,disabled:l||t,...d,children:[t&&e.jsxs("svg",{className:"iw-animate-spin iw-mr-2 iw-h-4 iw-w-4 iw-text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[e.jsx("circle",{className:"iw-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"iw-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),r]})},R=({isOpen:r,onStart:s,onClose:i})=>{var j;const a=n.useRef(null),t=n.useRef(null),[l,o]=n.useState(!1),[d,x]=n.useState(null),[u,h]=n.useState(!1),c=()=>{t.current&&(t.current.getTracks().forEach(w=>w.stop()),t.current=null)},f=async()=>{h(!0),x(null);try{const w=await navigator.mediaDevices.getUserMedia({video:{width:{ideal:1280},height:{ideal:720}},audio:!0});t.current=w,a.current&&(a.current.srcObject=w),o(!0)}catch(w){console.error("Media permission error:",w);let p="Unable to access camera or microphone.";(w==null?void 0:w.name)==="NotAllowedError"?p="Permissions denied. Please allow access to camera and microphone.":(w==null?void 0:w.name)==="NotFoundError"?p="No camera/microphone found. Please connect a device and retry.":w!=null&&w.message&&(p=w.message),o(!1),x(p)}finally{h(!1)}};if(n.useEffect(()=>{if(!r){c();return}return f(),()=>{c()}},[r]),!r)return null;const k=()=>{s(),c()};return e.jsx("div",{className:"iw-fixed iw-inset-0 iw-z-50 iw-flex iw-items-center iw-justify-center iw-bg-black/50 iw-backdrop-blur-sm",children:e.jsxs("div",{className:"iw-bg-white iw-rounded-xl iw-shadow-2xl iw-w-full iw-max-w-3xl iw-mx-4",children:[e.jsxs("div",{className:"iw-px-5 iw-py-4 iw-border-b iw-border-gray-200 iw-flex iw-items-center iw-justify-between",children:[e.jsx("h2",{className:"iw-text-base iw-font-semibold",children:"Camera & Microphone Check"}),i&&e.jsx("button",{"aria-label":"Close",className:"iw-text-gray-500 hover:iw-text-gray-700",onClick:()=>{c(),i==null||i()},children:"✕"})]}),e.jsxs("div",{className:"iw-p-4 iw-grid iw-grid-cols-1 iw-md:grid-cols-2 iw-gap-4",children:[e.jsx("div",{className:"iw-border iw-border-gray-200 iw-rounded-lg iw-overflow-hidden iw-bg-gray-900",children:e.jsx("video",{ref:a,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-64 iw-object-cover"})}),e.jsxs("div",{className:"iw-flex iw-flex-col iw-gap-3",children:[e.jsx("p",{className:"iw-text-sm iw-text-gray-700",children:"We will need access to your camera and microphone. Grant permission to preview your setup and to enable the Start Interview button."}),!((j=navigator.mediaDevices)!=null&&j.getUserMedia)&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:"Your browser does not support media devices. Please use a modern browser like Chrome, Edge, or Firefox."}),d&&e.jsx("div",{className:"iw-text-xs iw-text-red-600",children:d}),e.jsxs("div",{className:"iw-flex iw-items-center iw-gap-2",children:[e.jsx(N,{onClick:f,isLoading:u,variant:"outline",size:"sm",children:l?"Recheck Permissions":"Enable Camera & Mic"}),e.jsx(N,{onClick:k,disabled:!l,size:"sm",variant:"gradient",children:"Start Interview"})]}),e.jsxs("ul",{className:"iw-text-xs iw-text-gray-500 iw-pt-2 iw-list-disc iw-pl-4",children:[e.jsx("li",{children:"Your preview is muted to avoid echo."}),e.jsx("li",{children:"You can change devices from your browser’s site settings."})]})]})]})]})})},T=({title:r})=>e.jsxs("header",{className:"iw-w-full iw-text-gray-900",children:[e.jsxs("div",{className:"iw-mx-auto iw-flex iw-items-center iw-justify-between iw-px-4 iw-py-3",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-2",children:[e.jsx("div",{className:"iw-h-7 iw-w-7 iw-rounded-md iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsx("p",{className:"iw-text-sm iw-font-medium",children:"Novara"})]}),e.jsx("h1",{className:"iw-text-base iw-font-medium",children:r}),e.jsx("button",{className:"iw-text-sm iw-text-gray-500 hover:iw-text-gray-700",children:"Exit Interview"})]}),e.jsx("div",{className:"iw-h-px iw-bg-gray-200"})]}),$=({question:r})=>e.jsxs("div",{className:"iw-rounded-xl iw-mb-4 message-animation iw-bg-gradient-to-b iw-from-indigo-50 iw-to-white iw-text-gray-800 iw-border iw-border-indigo-100 iw-p-5",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-space-x-3 iw-mb-3",children:[e.jsx("div",{className:"iw-h-12 iw-w-12 iw-rounded-lg iw-bg-purple-500 iw-flex iw-items-center iw-justify-center iw-text-white iw-font-semibold",children:"N"}),e.jsxs("div",{children:[e.jsx("div",{className:"iw-text-sm iw-font-semibold",children:"Novara"}),e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:"Assistant"})]})]}),e.jsx("p",{className:"iw-text-[15px] iw-leading-6",children:r.text}),r.type==="multiple-choice"&&r.options&&e.jsx("div",{className:"iw-mt-3 iw-space-y-2",children:r.options.map((s,i)=>e.jsx("div",{className:"iw-p-2 iw-rounded iw-border iw-border-gray-300 iw-hover:bg-gray-100 iw-cursor-pointer iw-transition-colors",children:s},i))})]}),A=({className:r=""})=>{const s=n.useRef(null);return n.useEffect(()=>{let i=null;return(async()=>{try{i=await navigator.mediaDevices.getUserMedia({video:!0,audio:!1}),s.current&&(s.current.srcObject=i)}catch(t){console.error("Error accessing camera:",t)}})(),()=>{i&&i.getTracks().forEach(t=>t.stop())}},[]),e.jsx("div",{className:`iw-relative ${r}`,children:e.jsx("video",{ref:s,autoPlay:!0,playsInline:!0,muted:!0,className:"iw-w-full iw-h-full iw-object-cover iw-rounded-md"})})},D=({label:r,error:s,fullWidth:i=!1,className:a="",id:t,...l})=>{const o=t||`textarea-${Math.random().toString(36).substring(2,9)}`,d="iw-block iw-rounded-md iw-border iw-border-gray-300 iw-shadow-sm iw-px-4 iw-py-2 iw-text-sm iw-focus:border-primary-500 iw-focus:ring-primary-500 iw-focus:outline-none iw-transition-all",x=s?"iw-border-red-500 iw-focus:border-red-500 iw-focus:ring-red-500":"",u=i?"iw-w-full":"";return e.jsxs("div",{className:`${i?"iw-w-full":""} ${a}`,children:[r&&e.jsx("label",{htmlFor:o,className:"iw-block iw-text-sm iw-font-medium iw-text-gray-700 iw-mb-1",children:r}),e.jsx("textarea",{id:o,className:`${d} ${x} ${u}`,"aria-invalid":s?"true":"false",...l}),s&&e.jsx("p",{className:"iw-mt-1 iw-text-sm iw-text-red-600",children:s})]})},z=({value:r,onChange:s,onSubmit:i,isSubmitDisabled:a,remainingTimeText:t})=>{const l=o=>{o.key==="Enter"&&(o.ctrlKey||o.metaKey)&&!a&&(o.preventDefault(),i())};return e.jsx("div",{className:"iw-mt-auto",children:e.jsxs("div",{className:"iw-rounded-xl iw-overflow-hidden iw-border iw-border-gray-200",children:[e.jsxs("div",{className:"iw-flex iw-items-center iw-justify-between iw-px-3 iw-py-2 iw-bg-gray-50 iw-border-b iw-border-gray-200",children:[e.jsx("div",{className:"iw-text-sm iw-font-medium",children:"Your answer"}),t&&e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:t})]}),e.jsx(D,{value:r,onChange:s,onKeyDown:l,placeholder:"Type your answer here...",className:"iw-w-full iw-resize-none iw-focus:outline-none iw-bg-transparent iw-min-h-[112px]",rows:5,fullWidth:!0}),e.jsxs("div",{className:"iw-p-2 iw-flex iw-justify-between iw-items-center iw-bg-gray-50",children:[e.jsx("div",{className:"iw-text-xs iw-text-gray-500",children:e.jsx("kbd",{children:" Press Ctrl+Enter to submit"})}),e.jsx(N,{onClick:i,disabled:a,size:"sm",variant:"gradient",children:"Submit Answer"})]})]})})},S=({title:r="Interview",questions:s=[],onComplete:i,onAnswerSubmit:a,className:t="",width:l="100%",height:o="600px"})=>{const[d,x]=n.useState(0),[u,h]=n.useState([]),[c,f]=n.useState(""),[k,j]=n.useState(!1),[w,p]=n.useState(!0),[I,_]=n.useState(!1),[F]=n.useState(!0),G=n.useRef(null),v=s[d],Q=()=>{const g={questionId:(v==null?void 0:v.id)||"",answerText:c,timestamp:new Date};h([...u,g]),a&&a(g),d<s.length-1?(x(y=>y+1),f("")):(j(!0),i&&i(u))},W=n.useMemo(()=>{const y=60-Math.floor(Date.now()/1e3%60),Y=Math.floor(y/60).toString().padStart(2,"0"),U=(y%60).toString().padStart(2,"0");return`Time to Talk: ${Y}:${U} min`},[d]);return I?e.jsxs("div",{ref:G,className:`interview-widget-container iw-flex iw-flex-col iw-rounded-xl iw-shadow-lg iw-overflow-hidden ${t}`,style:{width:l,height:o},children:[e.jsx(T,{title:r}),e.jsx("div",{className:"iw-flex iw-flex-col iw-flex-grow iw-overflow-hidden iw-px-4 iw-py-5",children:k?e.jsxs("div",{className:"iw-flex iw-flex-col iw-items-center iw-justify-center iw-h-full",children:[e.jsx("div",{className:"iw-text-xl iw-font-bold iw-mb-2",children:"Interview Complete!"}),e.jsx("p",{className:"iw-text-center iw-mb-4",children:"Thank you for participating in this interview."})]}):e.jsxs("div",{className:"iw-h-full iw-flex iw-flex-col",children:[e.jsx("div",{className:"iw-flex-1",children:v&&e.jsx($,{question:v})}),e.jsxs("div",{className:"iw-grid iw-grid-cols-2 iw-gap-4 iw-mt-4",children:[F&&e.jsx("div",{className:"iw-mt-2 iw-border iw-border-gray-200 iw-rounded-xl iw-p-2",children:e.jsx(A,{className:"iw-w-full iw-h-[400px]"})}),e.jsx(z,{value:c,onChange:g=>f(g.target.value),onSubmit:Q,isSubmitDisabled:!c.trim()||!I,remainingTimeText:W})]})]})})]}):e.jsx("div",{className:"iw-h-screen iw-w-screen",children:e.jsx(R,{isOpen:w,onStart:()=>{console.log("Permissions granted, starting interview"),_(!0),p(!1)}})})};typeof window<"u"&&(window.InterviewWidget={InterviewWidget:S}),m.InterviewWidget=S,m.default=S,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "interview-widget",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Advanced React interview widget with STT, TTS, camera access, and ML-powered analysis",
   "main": "dist/widget.umd.js",
   "module": "dist/widget.es.js",
@@ -17,7 +17,11 @@
     "build:cdn": "npm run build && npm run copy:examples",
     "copy:examples": "mkdir -p dist/examples && cp examples/*.html dist/examples/",
     "preview": "vite preview",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "publish:patch": "npm version patch && npm publish",
+    "publish:minor": "npm version minor && npm publish",
+    "publish:major": "npm version major && npm publish"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/dist/ChatWidget.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ChatWidgetProps } from './types';
-declare const ChatWidget: React.FC<ChatWidgetProps>;
-export default ChatWidget;

package/dist/Message.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { Message as MessageType } from './types';
-interface MessageProps {
-    message: MessageType;
-    botName: string;
-    userName: string;
-}
-declare const Message: React.FC<MessageProps>;
-export default Message;

package/dist/chat-widget.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.cw-mx-auto{margin-left:auto!important;margin-right:auto!important}.cw-mb-1{margin-bottom:.25rem!important}.cw-mb-2{margin-bottom:.5rem!important}.cw-mb-4{margin-bottom:1rem!important}.cw-mb-6{margin-bottom:1.5rem!important}.cw-mb-8{margin-bottom:2rem!important}.cw-ml-2{margin-left:.5rem!important}.cw-mt-8{margin-top:2rem!important}.cw-flex{display:flex!important}.cw-grid{display:grid!important}.cw-min-h-screen{min-height:100vh!important}.cw-w-full{width:100%!important}.cw-max-w-4xl{max-width:56rem!important}.cw-max-w-xs{max-width:20rem!important}.cw-flex-1{flex:1 1 0%!important}.cw-cursor-default{cursor:default!important}.cw-cursor-pointer{cursor:pointer!important}.cw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.cw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.cw-flex-col{flex-direction:column!important}.cw-items-center{align-items:center!important}.cw-justify-start{justify-content:flex-start!important}.cw-justify-end{justify-content:flex-end!important}.cw-justify-between{justify-content:space-between!important}.cw-gap-4{gap:1rem!important}.cw-gap-8{gap:2rem!important}.cw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0 !important;margin-right:calc(.5rem * var(--tw-space-x-reverse))!important;margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))!important}.cw-overflow-y-auto{overflow-y:auto!important}.cw-break-words{overflow-wrap:break-word!important}.cw-rounded{border-radius:.25rem!important}.cw-rounded-lg{border-radius:.5rem!important}.cw-rounded-md{border-radius:.375rem!important}.cw-rounded-t-lg{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.cw-border{border-width:1px!important}.cw-border-b{border-bottom-width:1px!important}.cw-border-t{border-top-width:1px!important}.cw-border-gray-200{--tw-border-opacity: 1 !important;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))!important}.cw-border-gray-300{--tw-border-opacity: 1 !important;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))!important}.cw-border-gray-600{--tw-border-opacity: 1 !important;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))!important}.cw-bg-blue-500{--tw-bg-opacity: 1 !important;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))!important}.cw-bg-blue-600{--tw-bg-opacity: 1 !important;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))!important}.cw-bg-gray-100{--tw-bg-opacity: 1 !important;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))!important}.cw-bg-gray-200{--tw-bg-opacity: 1 !important;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))!important}.cw-bg-gray-50{--tw-bg-opacity: 1 !important;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))!important}.cw-bg-gray-700{--tw-bg-opacity: 1 !important;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))!important}.cw-bg-gray-800{--tw-bg-opacity: 1 !important;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))!important}.cw-bg-primary-500{--tw-bg-opacity: 1 !important;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))!important}.cw-bg-white{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))!important}.cw-p-1{padding:.25rem!important}.cw-p-4{padding:1rem!important}.cw-p-8{padding:2rem!important}.cw-px-3{padding-left:.75rem!important;padding-right:.75rem!important}.cw-px-4{padding-left:1rem!important;padding-right:1rem!important}.cw-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.cw-text-center{text-align:center!important}.cw-text-2xl{font-size:1.5rem!important;line-height:2rem!important}.cw-text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.cw-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.cw-text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.cw-text-xs{font-size:.75rem!important;line-height:1rem!important}.cw-font-bold{font-weight:700!important}.cw-font-medium{font-weight:500!important}.cw-font-semibold{font-weight:600!important}.cw-text-blue-600{--tw-text-opacity: 1 !important;color:rgb(37 99 235 / var(--tw-text-opacity, 1))!important}.cw-text-gray-400{--tw-text-opacity: 1 !important;color:rgb(156 163 175 / var(--tw-text-opacity, 1))!important}.cw-text-gray-500{--tw-text-opacity: 1 !important;color:rgb(107 114 128 / var(--tw-text-opacity, 1))!important}.cw-text-gray-600{--tw-text-opacity: 1 !important;color:rgb(75 85 99 / var(--tw-text-opacity, 1))!important}.cw-text-gray-800{--tw-text-opacity: 1 !important;color:rgb(31 41 55 / var(--tw-text-opacity, 1))!important}.cw-text-green-600{--tw-text-opacity: 1 !important;color:rgb(22 163 74 / var(--tw-text-opacity, 1))!important}.cw-text-purple-600{--tw-text-opacity: 1 !important;color:rgb(147 51 234 / var(--tw-text-opacity, 1))!important}.cw-text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity, 1))!important}.cw-placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity: 1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))!important}.cw-placeholder-gray-400::placeholder{--tw-placeholder-opacity: 1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))!important}.cw-opacity-70{opacity:.7!important}.cw-shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.cw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}:root{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-opacity: .5}.chat-widget-container{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#f1f1f1}.chat-messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-animation{animation:slideIn .3s ease-out}.cw-hover\:bg-primary-600:hover{background-color:#2563eb!important}.cw-focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}.cw-focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.cw-focus\:ring-primary-500:focus{--tw-ring-opacity: 1 !important;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important}.cw-disabled\:opacity-50:disabled{opacity:.5!important}.cw-disabled\:cursor-not-allowed:disabled{cursor:not-allowed!important}@media (min-width: 1024px){.cw-lg\:max-w-md{max-width:28rem!important}}@media (min-width: 768px){.cw-md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

package/dist/chat-widget.es.js

@@ -1,193 +0,0 @@
-import { useState as p, useRef as j, useEffect as _ } from "react";
-var k = { exports: {} }, u = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var A = Symbol.for("react.transitional.element"), L = Symbol.for("react.fragment");
-function N(a, r, s) {
-  var c = null;
-  if (s !== void 0 && (c = "" + s), r.key !== void 0 && (c = "" + r.key), "key" in r) {
-    s = {};
-    for (var n in r)
-      n !== "key" && (s[n] = r[n]);
-  } else s = r;
-  return r = s.ref, {
-    $$typeof: A,
-    type: a,
-    key: c,
-    ref: r !== void 0 ? r : null,
-    props: s
-  };
-}
-u.Fragment = L;
-u.jsx = N;
-u.jsxs = N;
-k.exports = u;
-var e = k.exports;
-const I = ({ message: a, botName: r, userName: s }) => {
-  const c = a.sender === "bot", n = (m) => m.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  return /* @__PURE__ */ e.jsx("div", { className: `cw-flex cw-mb-4 message-animation ${c ? "cw-justify-start" : "cw-justify-end"}`, children: /* @__PURE__ */ e.jsxs("div", { className: `cw-max-w-xs cw-lg:max-w-md cw-px-4 cw-py-2 cw-rounded-lg cw-break-words ${c ? "cw-bg-gray-200 cw-text-gray-800" : "cw-bg-primary-500 cw-text-white"}`, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "cw-flex cw-items-center cw-mb-1", children: [
-      /* @__PURE__ */ e.jsx("span", { className: "cw-text-xs cw-font-semibold", children: c ? r : s }),
-      /* @__PURE__ */ e.jsx("span", { className: "cw-text-xs cw-opacity-70 cw-ml-2", children: n(a.timestamp) })
-    ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "cw-text-sm", children: a.text })
-  ] }) });
-}, P = ({
-  title: a = "Chat Support",
-  placeholder: r = "Type your message...",
-  onSendMessage: s,
-  messages: c = [],
-  className: n = "",
-  botName: m = "Support Bot",
-  userName: T = "You",
-  height: E = "400px",
-  width: R = "350px",
-  position: x = "inline",
-  theme: i = "light"
-}) => {
-  const [$, g] = p([]), [l, y] = p(""), [d, C] = p(!1), f = j(null), b = j(null), h = c.length > 0 ? c : $, S = (t) => {
-    const w = [
-      "Thanks for your message! How can I help you today?",
-      "I understand your concern. Let me assist you with that.",
-      "That's a great question! Here's what I can tell you...",
-      "I'm here to help! Can you provide more details?",
-      "Thank you for reaching out. I'll do my best to assist you."
-    ], o = t.toLowerCase();
-    return o.includes("hello") || o.includes("hi") ? "Hello! Welcome to our support chat. How can I help you today?" : o.includes("help") ? "I'm here to help! What do you need assistance with?" : o.includes("price") || o.includes("cost") ? "I can help you with pricing information. What specific product or service are you interested in?" : w[Math.floor(Math.random() * w.length)] || "I'm here to help!";
-  }, D = () => {
-    var t;
-    (t = f.current) == null || t.scrollIntoView({ behavior: "smooth" });
-  };
-  _(() => {
-    D();
-  }, [h]);
-  const v = () => {
-    var w;
-    if (!l.trim()) return;
-    const t = {
-      id: Date.now().toString(),
-      text: l.trim(),
-      sender: "user",
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    c.length > 0 ? s == null || s(l.trim()) : (g((o) => [...o, t]), setTimeout(() => {
-      const o = {
-        id: (Date.now() + 1).toString(),
-        text: S(l.trim()),
-        sender: "bot",
-        timestamp: /* @__PURE__ */ new Date()
-      };
-      g((W) => [...W, o]);
-    }, 1e3)), y(""), (w = b.current) == null || w.focus();
-  }, M = (t) => {
-    t.key === "Enter" && !t.shiftKey && (t.preventDefault(), v());
-  }, H = {
-    height: d ? "auto" : E,
-    width: R,
-    ...x !== "inline" && {
-      position: "fixed",
-      bottom: "20px",
-      [x === "bottom-right" ? "right" : "left"]: "20px",
-      zIndex: 1e3
-    }
-  };
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: `chat-widget-container cw-bg-white cw-border cw-border-gray-300 cw-rounded-lg cw-shadow-lg cw-flex cw-flex-col ${i === "dark" ? "cw-bg-gray-800 cw-border-gray-600" : ""} ${n}`,
-      style: H,
-      children: [
-        /* @__PURE__ */ e.jsxs(
-          "div",
-          {
-            className: `cw-flex cw-items-center cw-justify-between cw-p-4 cw-border-b cw-bg-primary-500 cw-text-white cw-rounded-t-lg ${i === "dark" ? "cw-border-gray-600" : "cw-border-gray-200"}`,
-            children: [
-              /* @__PURE__ */ e.jsx("h3", { className: "cw-font-semibold cw-text-sm", children: a }),
-              x !== "inline" && /* @__PURE__ */ e.jsx(
-                "button",
-                {
-                  onClick: () => C(!d),
-                  className: "cw-text-white cw-hover:bg-primary-600 cw-rounded cw-p-1 cw-transition-colors",
-                  children: d ? "▲" : "▼"
-                }
-              )
-            ]
-          }
-        ),
-        !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          /* @__PURE__ */ e.jsxs(
-            "div",
-            {
-              className: `cw-flex-1 cw-overflow-y-auto cw-p-4 chat-messages ${i === "dark" ? "cw-bg-gray-700" : "cw-bg-gray-50"}`,
-              style: { maxHeight: "calc(100% - 120px)" },
-              children: [
-                h.length === 0 && /* @__PURE__ */ e.jsx(
-                  "div",
-                  {
-                    className: `cw-text-center cw-text-gray-500 cw-text-sm cw-mt-8 ${i === "dark" ? "cw-text-gray-400" : ""}`,
-                    children: "Start a conversation by typing a message below."
-                  }
-                ),
-                h.map((t) => /* @__PURE__ */ e.jsx(
-                  I,
-                  {
-                    message: t,
-                    botName: m,
-                    userName: T
-                  },
-                  t.id
-                )),
-                /* @__PURE__ */ e.jsx("div", { ref: f })
-              ]
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            "div",
-            {
-              className: `cw-p-4 cw-border-t ${i === "dark" ? "cw-border-gray-600 cw-bg-gray-800" : "cw-border-gray-200"}`,
-              children: /* @__PURE__ */ e.jsxs("div", { className: "cw-flex cw-space-x-2 ", children: [
-                /* @__PURE__ */ e.jsx(
-                  "input",
-                  {
-                    ref: b,
-                    type: "text",
-                    value: l,
-                    onChange: (t) => y(t.target.value),
-                    onKeyDown: M,
-                    placeholder: r,
-                    className: ` cw-w-full cw-flex-1 cw-px-3 cw-py-2 cw-border cw-rounded-md cw-text-sm cw-focus:outline-none cw-focus:ring-2 cw-focus:ring-primary-500 ${i === "dark" ? "cw-bg-gray-700 cw-border-gray-600 cw-text-white cw-placeholder-gray-400" : "cw-bg-white cw-border-gray-300"}`
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(
-                  "button",
-                  {
-                    onClick: v,
-                    disabled: !l.trim(),
-                    className: "cw-bg-primary-500 cw-text-white cw-px-4 cw-py-2 cw-rounded-md cw-text-sm cw-font-medium cw-hover:bg-primary-600 cw-disabled:opacity-50 cw-disabled:cursor-not-allowed cw-transition-colors",
-                    children: "Send"
-                  }
-                )
-              ] })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-typeof window < "u" && (window.ChatWidget = {
-  ChatWidget: P,
-  Message: I
-});
-export {
-  P as ChatWidget,
-  I as Message,
-  P as default
-};

package/dist/chat-widget.umd.js

@@ -1,9 +0,0 @@
-(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i.ChatWidget={},i.React))})(this,function(i,o){"use strict";var b={exports:{}},m={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var R=Symbol.for("react.transitional.element"),C=Symbol.for("react.fragment");function v(a,r,s){var c=null;if(s!==void 0&&(c=""+s),r.key!==void 0&&(c=""+r.key),"key"in r){s={};for(var l in r)l!=="key"&&(s[l]=r[l])}else s=r;return r=s.ref,{$$typeof:R,type:a,key:c,ref:r!==void 0?r:null,props:s}}m.Fragment=C,m.jsx=v,m.jsxs=v,b.exports=m;var e=b.exports;const x=({message:a,botName:r,userName:s})=>{const c=a.sender==="bot",l=g=>g.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});return e.jsx("div",{className:`cw-flex cw-mb-4 message-animation ${c?"cw-justify-start":"cw-justify-end"}`,children:e.jsxs("div",{className:`cw-max-w-xs cw-lg:max-w-md cw-px-4 cw-py-2 cw-rounded-lg cw-break-words ${c?"cw-bg-gray-200 cw-text-gray-800":"cw-bg-primary-500 cw-text-white"}`,children:[e.jsxs("div",{className:"cw-flex cw-items-center cw-mb-1",children:[e.jsx("span",{className:"cw-text-xs cw-font-semibold",children:c?r:s}),e.jsx("span",{className:"cw-text-xs cw-opacity-70 cw-ml-2",children:l(a.timestamp)})]}),e.jsx("div",{className:"cw-text-sm",children:a.text})]})})},p=({title:a="Chat Support",placeholder:r="Type your message...",onSendMessage:s,messages:c=[],className:l="",botName:g="Support Bot",userName:E="You",height:S="400px",width:$="350px",position:y="inline",theme:d="light"})=>{const[M,j]=o.useState([]),[w,k]=o.useState(""),[h,W]=o.useState(!1),T=o.useRef(null),N=o.useRef(null),f=c.length>0?c:M,_=t=>{const u=["Thanks for your message! How can I help you today?","I understand your concern. Let me assist you with that.","That's a great question! Here's what I can tell you...","I'm here to help! Can you provide more details?","Thank you for reaching out. I'll do my best to assist you."],n=t.toLowerCase();return n.includes("hello")||n.includes("hi")?"Hello! Welcome to our support chat. How can I help you today?":n.includes("help")?"I'm here to help! What do you need assistance with?":n.includes("price")||n.includes("cost")?"I can help you with pricing information. What specific product or service are you interested in?":u[Math.floor(Math.random()*u.length)]||"I'm here to help!"},D=()=>{var t;(t=T.current)==null||t.scrollIntoView({behavior:"smooth"})};o.useEffect(()=>{D()},[f]);const I=()=>{var u;if(!w.trim())return;const t={id:Date.now().toString(),text:w.trim(),sender:"user",timestamp:new Date};c.length>0?s==null||s(w.trim()):(j(n=>[...n,t]),setTimeout(()=>{const n={id:(Date.now()+1).toString(),text:_(w.trim()),sender:"bot",timestamp:new Date};j(A=>[...A,n])},1e3)),k(""),(u=N.current)==null||u.focus()},H=t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),I())},P={height:h?"auto":S,width:$,...y!=="inline"&&{position:"fixed",bottom:"20px",[y==="bottom-right"?"right":"left"]:"20px",zIndex:1e3}};return e.jsxs("div",{className:`chat-widget-container cw-bg-white cw-border cw-border-gray-300 cw-rounded-lg cw-shadow-lg cw-flex cw-flex-col ${d==="dark"?"cw-bg-gray-800 cw-border-gray-600":""} ${l}`,style:P,children:[e.jsxs("div",{className:`cw-flex cw-items-center cw-justify-between cw-p-4 cw-border-b cw-bg-primary-500 cw-text-white cw-rounded-t-lg ${d==="dark"?"cw-border-gray-600":"cw-border-gray-200"}`,children:[e.jsx("h3",{className:"cw-font-semibold cw-text-sm",children:a}),y!=="inline"&&e.jsx("button",{onClick:()=>W(!h),className:"cw-text-white cw-hover:bg-primary-600 cw-rounded cw-p-1 cw-transition-colors",children:h?"▲":"▼"})]}),!h&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`cw-flex-1 cw-overflow-y-auto cw-p-4 chat-messages ${d==="dark"?"cw-bg-gray-700":"cw-bg-gray-50"}`,style:{maxHeight:"calc(100% - 120px)"},children:[f.length===0&&e.jsx("div",{className:`cw-text-center cw-text-gray-500 cw-text-sm cw-mt-8 ${d==="dark"?"cw-text-gray-400":""}`,children:"Start a conversation by typing a message below."}),f.map(t=>e.jsx(x,{message:t,botName:g,userName:E},t.id)),e.jsx("div",{ref:T})]}),e.jsx("div",{className:`cw-p-4 cw-border-t ${d==="dark"?"cw-border-gray-600 cw-bg-gray-800":"cw-border-gray-200"}`,children:e.jsxs("div",{className:"cw-flex cw-space-x-2 ",children:[e.jsx("input",{ref:N,type:"text",value:w,onChange:t=>k(t.target.value),onKeyDown:H,placeholder:r,className:` cw-w-full cw-flex-1 cw-px-3 cw-py-2 cw-border cw-rounded-md cw-text-sm cw-focus:outline-none cw-focus:ring-2 cw-focus:ring-primary-500 ${d==="dark"?"cw-bg-gray-700 cw-border-gray-600 cw-text-white cw-placeholder-gray-400":"cw-bg-white cw-border-gray-300"}`}),e.jsx("button",{onClick:I,disabled:!w.trim(),className:"cw-bg-primary-500 cw-text-white cw-px-4 cw-py-2 cw-rounded-md cw-text-sm cw-font-medium cw-hover:bg-primary-600 cw-disabled:opacity-50 cw-disabled:cursor-not-allowed cw-transition-colors",children:"Send"})]})})]})]})};typeof window<"u"&&(window.ChatWidget={ChatWidget:p,Message:x}),i.ChatWidget=p,i.Message=x,i.default=p,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});