@cas0570/chat-widget 0.0.2 → 0.0.4

package/README.md

@@ -29,7 +29,6 @@ npm install @geoapps/chat-widget
 
 ```tsx
 import { ChatWidget } from '@geoapps/chat-widget'
-import '@geoapps/chat-widget/style.css'
 
 function App() {
   return (
@@ -75,7 +74,6 @@ pnpm add @geoapps/chat-widget
 
 ```tsx
 import { ChatWidget } from '@geoapps/chat-widget'
-import '@geoapps/chat-widget/style.css'
 
 function App() {
   return (
@@ -103,7 +101,6 @@ function App() {
 
 <script setup>
 import { ChatWidget } from '@geoapps/chat-widget'
-import '@geoapps/chat-widget/style.css'
 </script>
 ```
 
@@ -113,7 +110,6 @@ import '@geoapps/chat-widget/style.css'
 'use client'
 
 import dynamic from 'next/dynamic'
-import '@geoapps/chat-widget/style.css'
 
 const ChatWidget = dynamic(
   () => import('@geoapps/chat-widget').then(mod => mod.ChatWidget),
@@ -125,56 +121,6 @@ export default function Page() {
 }
 ```
 
-### Script Tag (CDN)
-
-Voor websites zonder build system kun je de embed bundle direct gebruiken via een script tag.
-
-#### Methode 1: Data Attributen (eenvoudigste)
-
-```html
-<script 
-  src="https://cdn.example.com/geoapps-chat-widget.embed.js"
-  data-api-url="https://api.geoapps.nl/api/v1/chat"
-  data-title="GeoApps Help"
-  data-subtitle="Vraag me iets over GeoApps"
-  data-greeting="Hallo! Hoe kan ik je helpen met GeoApps?"
-  data-placeholder="Typ je vraag..."
-  data-primary-color="#3b82f6"
-  data-position="bottom-right"
-  data-default-open="false"
-></script>
-```
-
-#### Methode 2: JavaScript API
-
-```html
-<script src="https://cdn.example.com/geoapps-chat-widget.embed.js"></script>
-<script>
-  GeoAppsChatWidget.embed({
-    apiUrl: 'https://api.geoapps.nl/api/v1/chat',
-    title: 'GeoApps Help',
-    subtitle: 'Vraag me iets over GeoApps',
-    greeting: 'Hallo! Hoe kan ik je helpen met GeoApps?',
-    placeholder: 'Typ je vraag...',
-    primaryColor: '#3b82f6',
-    position: 'bottom-right'
-  });
-</script>
-```
-
-#### Beschikbare Data Attributen
-
-| Attribuut | Omschrijving |
-| --------- | ------------ |
-| `data-api-url` | **Verplicht.** Chat API endpoint URL |
-| `data-title` | Header titel |
-| `data-subtitle` | Header subtitel |
-| `data-greeting` | Initieel welkomstbericht |
-| `data-placeholder` | Input placeholder tekst |
-| `data-primary-color` | Accent kleur (hex) |
-| `data-position` | `bottom-right`, `bottom-left`, `top-right`, `top-left` |
-| `data-default-open` | `true` of `false` - start open of gesloten |
-
 ---
 
 ## API Reference
@@ -294,7 +240,6 @@ import { ChatWidget, ChatBubble } from '@geoapps/chat-widget'
 geoapps-chat-widget/
 ├── src/
 │   ├── index.ts              # Package exports
-│   ├── embed.ts              # IIFE entry for script tag
 │   ├── components/
 │   │   ├── ChatWidget.tsx    # Main widget component
 │   │   ├── ChatBubble.tsx    # Floating button
@@ -311,11 +256,6 @@ geoapps-chat-widget/
 │   │   └── variables.css     # CSS variables
 │   └── types/
 │       └── index.ts          # TypeScript types
-├── dist/                     # Built files
-│   ├── index.js              # ESM bundle
-│   ├── index.cjs             # CommonJS bundle
-│   ├── embed.iife.js         # Script tag bundle
-│   └── style.css             # Styles
 ├── package.json
 ├── tsconfig.json
 ├── vite.config.ts            # Build configuration
@@ -389,7 +329,7 @@ npm publish --access public
 | Widget not appearing | Check z-index conflicts |
 | CORS errors | Ensure API allows your domain in CORS_ORIGINS |
 | Messages not sending | Verify apiUrl is correct and API is running |
-| Styles not loading | Import the CSS file: `import '@geoapps/chat-widget/style.css'` |
+| Styles not loading | CSS is auto-included; check bundler CSS support |
 | SSR errors (Next.js) | Use dynamic import with `ssr: false` |
 
 ---

package/dist/components/ChatBubble.d.ts

@@ -0,0 +1,8 @@
+import { Message } from '../types';
+
+interface ChatBubbleProps {
+    message: Message;
+    primaryColor: string;
+}
+export declare function ChatBubble({ message, primaryColor }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ChatWidget.d.ts

@@ -0,0 +1,3 @@
+import { ChatWidgetProps } from '../types';
+
+export declare function ChatWidget({ apiUrl, tenantId, title, subtitle, placeholder, greeting, primaryColor, position, defaultOpen, defaultSize, headers, onOpen, onClose, onMessageSent, onResponseReceived, }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChatWindow.d.ts

@@ -0,0 +1,18 @@
+import { Message, WidgetSize } from '../types';
+
+interface ChatWindowProps {
+    title: string;
+    subtitle: string;
+    placeholder: string;
+    messages: Message[];
+    isLoading: boolean;
+    onSendMessage: (content: string) => void;
+    onClose: () => void;
+    onClear: () => void;
+    onSizeChange: (size: WidgetSize) => void;
+    onPopout: () => void;
+    primaryColor: string;
+    size: WidgetSize;
+}
+export declare function ChatWindow({ title, subtitle, placeholder, messages, isLoading, onSendMessage, onClose, onClear, onSizeChange, onPopout, primaryColor, size, }: ChatWindowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icons.d.ts

@@ -0,0 +1,26 @@
+import { WidgetSize } from '../types';
+
+interface ResizeIconProps {
+    size: WidgetSize;
+    className?: string;
+}
+export declare function ResizeIcon({ size, className }: ResizeIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ContractIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PopoutIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CloseIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TrashIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarkdownRenderer.d.ts

@@ -0,0 +1,6 @@
+interface MarkdownRendererProps {
+    content: string;
+    className?: string;
+}
+export declare function MarkdownRenderer({ content, className }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/MessageInput.d.ts

@@ -0,0 +1,8 @@
+interface MessageInputProps {
+    placeholder: string;
+    isLoading: boolean;
+    onSendMessage: (content: string) => void;
+    primaryColor: string;
+}
+export declare function MessageInput({ placeholder, isLoading, onSendMessage, primaryColor }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MessageList.d.ts

@@ -0,0 +1,9 @@
+import { Message } from '../types';
+
+interface MessageListProps {
+    messages: Message[];
+    isLoading: boolean;
+    primaryColor: string;
+}
+export declare function MessageList({ messages, isLoading, primaryColor }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PopoutWindow.d.ts

@@ -0,0 +1,25 @@
+import { Message, WidgetSize } from '../types';
+
+interface PopoutConfig {
+    apiUrl: string;
+    tenantId?: string;
+    title: string;
+    subtitle: string;
+    placeholder: string;
+    primaryColor: string;
+    sessionId?: string | null;
+    messages: Message[];
+    headers?: Record<string, string>;
+}
+interface UsePopoutReturn {
+    isPoppedOut: boolean;
+    openPopout: () => void;
+    closePopout: () => void;
+    focusPopout: () => void;
+}
+/**
+ * Hook to manage the popout window state
+ */
+export declare function usePopout(config: PopoutConfig, size: WidgetSize, onPopoutClose?: () => void): UsePopoutReturn;
+export declare function ChatWindowStandalone(): null;
+export {};

package/dist/components/ToggleButton.d.ts

@@ -0,0 +1,9 @@
+interface ToggleButtonProps {
+    isOpen: boolean;
+    onClick: () => void;
+    primaryColor: string;
+    hasUnread?: boolean;
+    isPoppedOut?: boolean;
+}
+export declare function ToggleButton({ isOpen, onClick, primaryColor, hasUnread, isPoppedOut }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TypingIndicator.d.ts

@@ -0,0 +1 @@
+export declare function TypingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/__tests__/ChatBubble.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/ChatWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/ChatWindow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/Icons.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/MarkdownRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/MessageInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/MessageList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/PopoutWindow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/ToggleButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/TypingIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { ChatWidget } from './ChatWidget';
+export { ChatWindow } from './ChatWindow';
+export { ChatBubble } from './ChatBubble';
+export { MessageList } from './MessageList';
+export { MessageInput } from './MessageInput';
+export { ToggleButton } from './ToggleButton';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export { usePopout } from './PopoutWindow';
+export { ResizeIcon, ExpandIcon, ContractIcon, PopoutIcon, CloseIcon, TrashIcon, ChatIcon } from './Icons';