@convokit/widget 0.0.4 → 0.0.6

package/README.md

@@ -1,43 +1,23 @@
 # @convokit/widget
 
-Chat UI widgets for your website. The public API is intentionally small — **four drop‑in components**:
+> **ConvoKit is currently in early access.** The waitlist is live — [join at convokit.dev](https://convokit.dev) to get early access.
 
-| Component | Layout | Integration | You provide |
-|-----------|--------|--------------|-------------|
-| **PopupWidget** | Bubble (corner) | ConvoKit | `apiKey` (public ConvoKit key) |
-| **FullScreenWidget** | Full page | ConvoKit | `apiKey`, optional `onBack` |
-| **PopupBackendWidget** | Bubble | Your backend | `apiUrl`, `apiKey`, optional `authToken` |
-| **FullScreenBackendWidget** | Full page | Your backend | `apiUrl`, `apiKey`, optional `authToken`, `onBack` |
+Add an AI-powered chat widget to any React or Next.js app in minutes. ConvoKit handles the AI, knowledge base, and conversations — you just drop in a component.
 
-All lower‑level/internal components (`PopupKey`, `FullScreenKey`, `PopupBackend`, `PopupControlled`, etc.) are **not exported** from the package anymore. The four widgets above are what you use in apps.
+**Website:** [convokit.dev](https://convokit.dev)
 
 ---
 
-## What to call and how
+## Four drop-in components
 
-Use **one import** and **one component** per screen. All of these are from `@convokit/widget`. No separate CSS import needed (styles are in the bundle).
+| Component | Layout | You provide |
+|-----------|--------|-------------|
+| **PopupWidget** | Bubble in corner | `apiKey` (your ConvoKit public key) |
+| **FullScreenWidget** | Full page | `apiKey`, optional `onBack` |
+| **PopupBackendWidget** | Bubble in corner | `apiUrl`, `apiKey` |
+| **FullScreenBackendWidget** | Full page | `apiUrl`, `apiKey`, optional `onBack` |
 
-| What to call | How (minimal) |
-|--------------|----------------|
-| **PopupWidget** | `<PopupWidget apiKey={key} />` — popup bubble, ConvoKit key. |
-| **FullScreenWidget** | `<FullScreenWidget apiKey={key} onBack={() => router.back()} />` — full-page chat, ConvoKit key. |
-| **PopupBackendWidget** | `<PopupBackendWidget apiUrl="/api/chat" apiKey={myKey} />` — popup, your backend. |
-| **FullScreenBackendWidget** | `<FullScreenBackendWidget apiUrl="/api/chat" apiKey={myKey} onBack={() => router.back()} />` — full-page, your backend. |
-
-**Optional props (all wrappers):** `title`, `welcomeMessage`, `widgetId`, `primaryColor`. Popup ones also accept `position`. Backend ones accept `authToken`. Full-screen ones accept `backLabel`. PopupWidget / FullScreenWidget also accept `persistMessages`.
-
-**If you need full control** (your own state/API), use the low-level components with a config object:
-
-| What to call | How |
-|--------------|-----|
-| **PopupKey** | `<PopupKey config={keyConfig} />` — config: `KeyConfig` (e.g. `{ key, title, position }`). |
-| **FullScreenKey** | `<FullScreenKey config={keyConfig} onBack={fn} backLabel="Back" />` |
-| **PopupBackend** | `<PopupBackend config={backendConfig} />` — config: `BackendConfig` (e.g. `{ apiUrl, apiKey }`). |
-| **FullScreenBackend** | `<FullScreenBackend config={backendConfig} onBack={fn} backLabel="Back" />` |
-| **PopupControlled** | `<PopupControlled config={controlledConfig} />` — you pass `messages`, `onMessagesUpdate`, `onSend`. |
-| **FullScreenControlled** | `<FullScreenControlled config={controlledConfig} onBack={fn} backLabel="Back" />` |
-
-**Types you can import:** `KeyConfig`, `BackendConfig`, `ControlledConfig`, `PopupWidgetProps`, `FullScreenWidgetProps`, `PopupBackendWidgetProps`, `FullScreenBackendWidgetProps`, `ChatMessage`, `ChatHistoryItem`, `ChatResponse`, `ThemeOptions`.
+No separate CSS import needed — styles are bundled.
 
 ---
 
@@ -53,66 +33,51 @@ pnpm add @convokit/widget
 
 ---
 
-## Quick start (React / Vite)
+## Quick start
 
-Add the chat bubble with one import. Styles are included in the bundle.
+### React / Vite
 
 ```tsx
-// Any React entry (e.g. App.tsx)
 import { PopupWidget } from '@convokit/widget';
 
 export function App() {
   return (
     <div>
-      {/* Your app UI */}
+      {/* your app */}
       <PopupWidget apiKey={import.meta.env.VITE_CONVOKIT_KEY ?? ''} />
     </div>
   );
 }
 ```
 
-- **React (CRA / Vite / plain SPA)**: just import and render the widget anywhere in your tree.
-- Optional props (all wrappers): `title`, `welcomeMessage`, `widgetId`, `primaryColor`.
-- Popup widgets also accept `position`, `persistMessages`. Backend widgets accept `authToken`. Full‑screen widgets accept `onBack` and `backLabel`.
-
-If the required props are missing (`apiKey` for key‑based widgets, or `apiUrl`/`apiKey` for backend widgets), the widget renders nothing.
+### Next.js App Router (recommended)
 
-### Next.js only: one import, no wrapper (recommended)
-
-If you use **Next.js App Router**, use the Next-specific entry so you don’t write `dynamic()` or a wrapper yourself:
+Use the built-in Next.js entry — no need to write `dynamic()` yourself:
 
 ```tsx
-// app/layout.tsx (or any page)
+// app/layout.tsx
 import { PopupWidgetNext } from '@convokit/widget/next';
 
 export default function Layout({ children }) {
   return (
     <html><body>
       {children}
-      <PopupWidgetNext />
+      <PopupWidgetNext apiKey={process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? ''} />
     </body></html>
   );
 }
 ```
 
-- **`PopupWidgetNext`** uses `next/dynamic` with `ssr: false` and reads `process.env.NEXT_PUBLIC_CONVOKIT_KEY` if you don’t pass `apiKey`.
-- Optional: pass `apiKey`, `title`, `welcomeMessage`, `position`, etc. as props.
-- You still need **transpilePackages** (and optionally resolve alias for react) in `next.config.js` if you see duplicate-React errors; see “Next.js App Router (avoid duplicate React)” below.
-
-### Next.js App Router (avoid duplicate React)
-
-The widget is client-only (hooks, DOM). In Next.js you must use **one React instance** in the browser. If the widget resolves to a different copy of React than your app, you get errors like `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')`.
+`PopupWidgetNext` uses `next/dynamic` with `ssr: false` automatically and reads `NEXT_PUBLIC_CONVOKIT_KEY` if you don't pass `apiKey`.
 
-**Fix 1 — Load the widget only on the client (recommended):** use `next/dynamic` with `ssr: false` so the widget never runs on the server and always uses the client React.
+### Next.js App Router (manual dynamic import)
 
 ```tsx
-// app/layout.tsx or a client component
 'use client';
-
 import dynamic from 'next/dynamic';
 
 const PopupWidget = dynamic(
-  () => import('@convokit/widget').then((mod) => mod.PopupWidget),
+  () => import('@convokit/widget').then((m) => m.PopupWidget),
   { ssr: false }
 );
 
@@ -126,150 +91,101 @@ export default function Layout({ children }) {
 }
 ```
 
-**Fix 2 — Use the app’s React for the widget:** in `next.config.js`, add `transpilePackages` and (if needed with pnpm) resolve `react` / `react-dom` to a single copy so the widget is bundled with your app’s React.
+---
 
-```js
-// next.config.js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ['@convokit/widget'],
-  webpack: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      react: require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    };
-    return config;
-  },
-};
-module.exports = nextConfig;
-```
+## All four components
 
-Use **Fix 1** for a quick fix; use **Fix 1 + Fix 2** if you still see duplicate-React issues (e.g. with pnpm).
+```tsx
+// Popup bubble – ConvoKit key
+<PopupWidget apiKey="pk_live_..." />
 
-### Other drop-in wrappers (all four)
+// Full-page chat – ConvoKit key
+<FullScreenWidget apiKey="pk_live_..." onBack={() => router.back()} />
 
-| Wrapper | Use case | Required props |
-|---------|----------|-----------------|
-| **PopupWidget** | Popup with ConvoKit key | `apiKey` |
-| **FullScreenWidget** | Full-page chat with ConvoKit key | `apiKey`, `onBack` (e.g. `() => router.back()`) |
-| **PopupBackendWidget** | Popup talking to your backend | `apiUrl`, `apiKey` |
-| **FullScreenBackendWidget** | Full-page chat talking to your backend | `apiUrl`, `apiKey`, `onBack` |
+// Popup bubble – your own backend
+<PopupBackendWidget apiUrl="/api/chat" apiKey="your-key" />
 
-#### React / Vite examples
+// Full-page chat – your own backend
+<FullScreenBackendWidget apiUrl="/api/chat" apiKey="your-key" onBack={() => router.back()} />
+```
 
-```tsx
-// Full-screen (Key mode)
-import { FullScreenWidget } from '@convokit/widget';
+---
 
-export function ChatPage() {
-  const apiKey = import.meta.env.VITE_CONVOKIT_KEY ?? '';
-  return (
-    <FullScreenWidget
-      apiKey={apiKey}
-      onBack={() => {
-        // e.g. navigate(-1) with react-router
-      }}
-    />
-  );
-}
+## Props
 
-// Popup (your backend)
-import { PopupBackendWidget } from '@convokit/widget';
+**All components accept:**
 
-export function App() {
-  return (
-    <>
-      {/* your UI */}
-      <PopupBackendWidget apiUrl="/api/chat" apiKey={import.meta.env.VITE_BACKEND_KEY ?? ''} />
-    </>
-  );
-}
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Widget header title |
+| `welcomeMessage` | `string` | First message shown to the user |
+| `widgetId` | `string` | Identifier for the bot / channel |
+| `primaryColor` | `string` | Accent color (hex or CSS color) |
 
-// Full-screen (your backend)
-import { FullScreenBackendWidget } from '@convokit/widget';
+**Popup components also accept:**
 
-export function Support() {
-  return (
-    <FullScreenBackendWidget
-      apiUrl="/api/chat"
-      apiKey={import.meta.env.VITE_BACKEND_KEY ?? ''}
-      onBack={() => {
-        // go back / close
-      }}
-    />
-  );
-}
-```
+| Prop | Type | Description |
+|------|------|-------------|
+| `position` | `'bottom-right' \| 'bottom-left'` | Bubble position |
+| `persistMessages` | `boolean` | Keep messages across page loads |
 
-#### Next.js (App Router) examples
+**Backend components also accept:**
 
-```tsx
-'use client';
+| Prop | Type | Description |
+|------|------|-------------|
+| `authToken` | `string` | Bearer token forwarded to your backend |
 
-import dynamic from 'next/dynamic';
+**Full-screen components also accept:**
 
-// Popup with ConvoKit key
-const PopupWidget = dynamic(
-  () => import('@convokit/widget').then((m) => m.PopupWidget),
-  { ssr: false }
-);
+| Prop | Type | Description |
+|------|------|-------------|
+| `onBack` | `() => void` | Called when user taps the back button |
+| `backLabel` | `string` | Label for the back button |
 
-// Full-screen (Key mode)
-const FullScreenWidget = dynamic(
-  () => import('@convokit/widget').then((m) => m.FullScreenWidget),
-  { ssr: false }
-);
+---
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const apiKey = process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? '';
-  return (
-    <html>
-      <body>
-        {children}
-        <PopupWidget apiKey={apiKey} />
-      </body>
-    </html>
-  );
-}
+## Advanced: low-level components
 
-// Full-screen page (Key mode)
-export function FullScreenChatPage() {
-  const apiKey = process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? '';
-  const router = useRouter();
-  return (
-    <FullScreenWidget apiKey={apiKey} onBack={() => router.back()} />
-  );
-}
-```
+If you need full control over state or API calls, use the low-level components directly:
 
----
+| Component | Config type |
+|-----------|-------------|
+| `PopupKey` / `FullScreenKey` | `KeyConfig` |
+| `PopupBackend` / `FullScreenBackend` | `BackendConfig` |
+| `PopupControlled` / `FullScreenControlled` | `ControlledConfig` (you pass `messages`, `onMessagesUpdate`, `onSend`) |
+
+**Types you can import:** `KeyConfig`, `BackendConfig`, `ControlledConfig`, `PopupWidgetProps`, `FullScreenWidgetProps`, `PopupBackendWidgetProps`, `FullScreenBackendWidgetProps`, `ChatMessage`, `ChatHistoryItem`, `ChatResponse`, `ThemeOptions`.
 
 ---
 
-## Advanced configuration
+## Fixing duplicate React errors in Next.js
 
-Internally, the widgets are built on config types (**KeyConfig**, **BackendConfig**, **ControlledConfig**, **ThemeOptions**). If you need to dive deeper into those (for example, to match server behavior or migrate from the old low‑level API), see `WIDGET_CONFIG_REFERENCE.md` in this repo.
+If you see `Cannot read properties of undefined (reading 'ReactCurrentDispatcher')`, add this to `next.config.js`:
 
----
+```js
+const nextConfig = {
+  transpilePackages: ['@convokit/widget'],
+  webpack: (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      react: require.resolve('react'),
+      'react-dom': require.resolve('react-dom'),
+    };
+    return config;
+  },
+};
+module.exports = nextConfig;
+```
 
-## Development
+---
 
-Run the demo:
+## Early access
 
-```bash
-npm run dev
-# or
-pnpm dev
-```
+ConvoKit is in early access. Get your API key and set up your knowledge base at **[convokit.dev](https://convokit.dev)**.
 
-Build the package:
+The waitlist is live — join now to get early access.
 
-```bash
-npm run build
-# or
-pnpm build
-```
+---
 
 ## License
 

package/dist/DemoErrorBoundary.d.ts

@@ -1,4 +1,4 @@
-import { default as React, Component, ErrorInfo, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactNode } from 'react';
 
 export declare class DemoErrorBoundary extends Component<{
     children: ReactNode;
@@ -12,6 +12,6 @@ export declare class DemoErrorBoundary extends Component<{
         error: Error;
     };
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 }
 //# sourceMappingURL=DemoErrorBoundary.d.ts.map

package/dist/DemoErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DemoErrorBoundary.d.ts","sourceRoot":"","sources":["../src/DemoErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,qBAAa,iBAAkB,SAAQ,SAAS,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,EAAE;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;IAChG,KAAK;eAAoB,KAAK,GAAG,IAAI;MAAG;IAExC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAcP"}
+{"version":3,"file":"DemoErrorBoundary.d.ts","sourceRoot":"","sources":["../src/DemoErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,qBAAa,iBAAkB,SAAQ,SAAS,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,EAAE;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;IAChG,KAAK;eAAoB,KAAK,GAAG,IAAI;MAAG;IAExC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAcP"}

package/dist/{PopupWidget-CGZOe6ZA.js → PopupWidget-PskdRToD.js}

@@ -4818,7 +4818,7 @@ const xh = {
 function Dh(t, e) {
   return jf(t, e, Ph, zf);
 }
-const Fn = /* @__PURE__ */ Dh("div"), Lo = "http://localhost:4000/api/widget/chat";
+const Fn = /* @__PURE__ */ Dh("div"), Lo = "https://qa-api.convokit.dev/api/widget/chat";
 function cn(t) {
   let e;
   try {

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--convokit-primary: #000;--convokit-header-bg: #000;--convokit-font-family: Inter, system-ui, sans-serif;--convokit-font-size: 14px;--convokit-border-radius: 18px;--convokit-chat-bg: #ffffff;--convokit-user-msg-bg: #000;--convokit-assistant-msg-bg: #f3f4f6;--convokit-input-bg: #ffffff;--convokit-input-border: #d1d5db}.convokit-widget{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--convokit-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.convokit-button{width:56px;height:56px;border-radius:50%;border:2px solid var(--convokit-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;z-index:10000;transition:all .2s ease;background:var(--convokit-primary)}.convokit-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.convokit-button:active{transform:translateY(0)}.convokit-button-hidden{opacity:0;transform:scale(0);pointer-events:none;transition:all .2s ease-in-out}.convokit-chat-window{width:380px;height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0;z-index:9999;transform-origin:bottom right;border:2px solid #000;overscroll-behavior:contain}.convokit-chat-window-body{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}.convokit-chat-wrapper{display:flex;flex-direction:column;flex:1;background:var(--convokit-chat-bg);overflow:hidden}.convokit-header{padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:var(--convokit-header-bg);position:relative;border-bottom:2px solid var(--convokit-header-bg)}.convokit-header-subtitle{margin:0;font-size:12px;opacity:.85;line-height:1.3}.convokit-header-left{display:flex;align-items:center;gap:12px;flex:1}.convokit-avatar{display:none}.convokit-header-text{display:flex;flex-direction:column;gap:4px}.convokit-header-text h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}.convokit-header-actions{display:flex;align-items:center;gap:4px}.convokit-header-icon{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity .2s ease}.convokit-header-icon:hover{opacity:.7}.convokit-header-icon:active{opacity:.5}.convokit-chat-window-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.convokit-chat-container{display:flex;flex-direction:column;flex:1;padding:16px;border:none;overflow:hidden;background:transparent;overscroll-behavior:contain}.convokit-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:16px;background:transparent;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.convokit-messages::-webkit-scrollbar{display:none}.convokit-welcome{text-align:center;color:#666;padding:20px;font-size:14px}.convokit-message{display:flex;align-items:flex-end;gap:0;max-width:75%}.convokit-message-user{align-self:flex-end}.convokit-message-assistant{align-self:flex-start}.convokit-bot-icon{display:none}.convokit-message-content{padding:10px 14px;border-radius:var(--convokit-border-radius);word-wrap:break-word;font-size:var(--convokit-font-size);line-height:1.5;position:relative}.convokit-message-user .convokit-message-content{background:var(--convokit-user-msg-bg);color:#fff;border-bottom-right-radius:4px}.convokit-message-assistant .convokit-message-content{background:var(--convokit-assistant-msg-bg);color:#000;border-bottom-left-radius:4px}.convokit-message-content strong{font-weight:600}.convokit-message-content em{font-style:italic}.convokit-message-content a{text-decoration:underline}.convokit-typing{display:flex;gap:6px;padding:4px 0;align-items:center}.convokit-typing span{width:8px;height:8px;border-radius:50%;background:#6b7280;animation:typing-bounce 1.4s ease-in-out infinite}.convokit-typing span:nth-child(1){animation-delay:0s}.convokit-typing span:nth-child(2){animation-delay:.2s}.convokit-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.convokit-input-form{display:flex;align-items:center;padding:12px 0 0;gap:8px;flex-shrink:0;background:transparent;border-bottom:none}.convokit-input{flex:1;padding:11px 14px;border:1px solid color-mix(in srgb,var(--convokit-primary) 35%,transparent);background:var(--convokit-input-bg);border-radius:20px;font-size:var(--convokit-font-size);outline:none;color:#000;font-family:var(--convokit-font-family);transition:border-color .2s ease,box-shadow .2s ease}.convokit-input:focus{border-color:var(--convokit-primary);box-shadow:none}.convokit-input::placeholder{color:#9ca3af}.convokit-input:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb}.convokit-send-button{width:40px;height:40px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--convokit-primary);transition:opacity .2s ease}.convokit-send-button:hover:not(:disabled){opacity:.8}.convokit-send-button:active:not(:disabled){opacity:.6}.convokit-send-button:disabled{opacity:.3;cursor:not-allowed;background:var(--convokit-primary)}.convokit-footer{padding:10px 16px;text-align:center;background:var(--convokit-chat-bg);font-size:11px;color:#6b7280}.convokit-footer a{color:var(--convokit-primary);text-decoration:none;font-weight:500;transition:opacity .2s ease}.convokit-footer a:hover{opacity:.7}.convokit-rating-prompt{padding:16px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.convokit-rating-question{margin:0 0 12px;font-size:14px;font-weight:500;color:#374151;text-align:center}.convokit-rating-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.convokit-rating-button{width:48px;height:48px;border-radius:50%;border:2px solid #d1d5db;background-color:#fff;color:#6b7280;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.convokit-rating-button:hover:not(:disabled){border-color:#9ca3af;transform:scale(1.05)}.convokit-rating-button:disabled{opacity:.5;cursor:not-allowed}.convokit-rating-button.convokit-rating-selected{color:#fff;border-width:2px}.convokit-rating-feedback{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convokit-rating-textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px;margin-bottom:8px;box-sizing:border-box}.convokit-rating-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convokit-rating-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed}.convokit-rating-submit{width:100%;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:opacity .2s ease}.convokit-rating-submit:hover:not(:disabled){opacity:.9}.convokit-rating-submit:disabled{opacity:.6;cursor:not-allowed}.convokit-rating-thankyou{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.convokit-rating-icon{width:48px;height:48px;border-radius:50%;background-color:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}.convokit-rating-message{margin:0;font-size:14px;font-weight:500;color:#374151}@media (max-width: 480px){.convokit-widget{bottom:10px;right:10px}.convokit-chat-window{width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);bottom:0;right:0;border-radius:16px}.convokit-message{max-width:85%}.convokit-header{padding:16px 16px 12px;min-height:64px}.convokit-chat-container{padding:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-CGZOe6ZA.js";
-import { P as he } from "./PopupWidget-CGZOe6ZA.js";
+import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-PskdRToD.js";
+import { P as he } from "./PopupWidget-PskdRToD.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { useState as u, useRef as F, useEffect as N } from "react";
 const Q = "convokit-widget", X = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {

package/dist/next.esm.js

@@ -2,7 +2,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import n from "next/dynamic";
 const i = n(
-  () => import("./PopupWidget-CGZOe6ZA.js").then((e) => e.h).then((e) => e.PopupWidget),
+  () => import("./PopupWidget-PskdRToD.js").then((e) => e.h).then((e) => e.PopupWidget),
   { ssr: !1 }
 ), s = () => {
   var e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convokit/widget",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "AI chat widget for your website",
   "type": "module",
   "main": "dist/index.esm.js",