ordify-chat-widget 1.0.24 → 1.0.26

package/CHANGELOG.md

@@ -5,17 +5,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.20] - 2025-01-27
-
-### Fixed
-- **BREAKING**: Moved `styled-components` from dependencies to peerDependencies to prevent React context conflicts
-- Fixed `ReactCurrentOwner` error that occurred when multiple styled-components instances were present
-- Added `@types/styled-components` and `babel-plugin-styled-components` to devDependencies for development
-
-### Changed
-- Applications using this widget must now install `styled-components` as a direct dependency
-- This ensures only one styled-components instance exists, preventing React context conflicts
-
 ## [1.0.0] - 2024-01-16
 
 ### Added

package/README.md

@@ -108,6 +108,7 @@ function App() {
 | `width` | string | "320px" | Chat width |
 | `onSessionCreated` | function | - | **Optional** - Callback when a new session is created with session ID |
 | `initialMessage` | string | - | **Optional** - Message to automatically send when chat loads |
+| `initialContext` | string | - | **Optional** - Hidden system context sent to backend (user ID, page info, etc.) |
 
 ## 🎯 Advanced Features
 
@@ -125,6 +126,48 @@ The `initialMessage` prop allows you to automatically send a message when the ch
 - **Onboarding**: Guide new users with initial instructions
 - **A/B testing**: Test different conversation starters
 
+### System Context (initialContext)
+The `initialContext` prop allows you to send hidden system information to your AI agent without displaying it to users. This is perfect for:
+- **User identification**: Send user ID, email, or subscription tier
+- **Page context**: Include current page URL, product ID, or section
+- **Session data**: Pass cart items, preferences, or previous interactions
+- **Analytics**: Include tracking data, campaign sources, or A/B test groups
+
+**Key Features**:
+- **Hidden from users**: Context is sent to backend but never displayed in chat
+- **Flexible scenarios**: Works with or without `initialMessage`
+- **Backward compatible**: Existing usage without `initialContext` continues to work
+
+**Usage Scenarios**:
+
+1. **Both message and context**:
+```tsx
+<OrdifyChat
+  agentId="your-agent-id"
+  apiKey="your-api-key"
+  initialMessage="Help me with the Library page"
+  initialContext={`user_id: ${userId}, page: /library, tier: premium`}
+/>
+```
+
+2. **Context only** (auto-adds "Hi" greeting):
+```tsx
+<OrdifyChat
+  agentId="your-agent-id"
+  apiKey="your-api-key"
+  initialContext={`user_id: ${userId}, page: /checkout, cart_items: 3`}
+/>
+```
+
+3. **Message only** (backward compatible):
+```tsx
+<OrdifyChat
+  agentId="your-agent-id"
+  apiKey="your-api-key"
+  initialMessage="Hello!"
+/>
+```
+
 ### Theme-Aware Defaults
 
 When no `primaryColor` is specified, the header automatically adapts:
@@ -239,6 +282,40 @@ export function ChatWithInitialMessage() {
 }
 ```
 
+#### System Context Integration
+```tsx
+// components/ChatWithContext.tsx
+import { OrdifyChat } from 'ordify-chat-widget'
+import { useUser } from './hooks/useUser'
+import { useRouter } from 'next/router'
+
+export function ChatWithContext() {
+  const { user } = useUser()
+  const router = useRouter()
+
+  return (
+    <OrdifyChat
+      agentId="your-agent-id"
+      apiKey="your-api-key"
+      apiBaseUrl="https://r.ordify.ai"
+      mode="floating"
+      buttonText="Need Help?"
+      initialMessage={`Hi! I'm ${user?.name || 'a visitor'}, help me with this page.`}
+      initialContext={`user_id: ${user?.id}, email: ${user?.email}, page: ${router.pathname}, tier: ${user?.subscriptionTier || 'free'}`}
+      onSessionCreated={(sessionId) => {
+        console.log('Session created with context:', sessionId)
+        // Analytics tracking with user context
+        analytics.track('chat_session_started', {
+          sessionId,
+          userId: user?.id,
+          page: router.pathname
+        })
+      }}
+    />
+  )
+}
+```
+
 #### Landing Page Integration
 ```tsx
 // pages/index.tsx

package/dist/components/Conversation.d.ts

@@ -3,6 +3,7 @@ import { default as React } from 'react';
 interface ConversationProps {
     className?: string;
     children: React.ReactNode;
+    style?: React.CSSProperties;
 }
 interface ConversationContentProps {
     className?: string;
@@ -11,7 +12,7 @@ interface ConversationContentProps {
 interface ConversationScrollButtonProps {
     className?: string;
 }
-export declare function Conversation({ className, children }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Conversation({ className, children, style }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 export declare function ConversationContent({ className, children }: ConversationContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function ConversationScrollButton({ className }: ConversationScrollButtonProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../src/components/Conversation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,6BAA6B;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuDD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAWtE;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAMpF;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,mDAkBpF"}
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../src/components/Conversation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,6BAA6B;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuDD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CAY7E;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAMpF;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,mDAkBpF"}

package/dist/components/EmbeddedChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedChat.d.ts","sourceRoot":"","sources":["../../src/components/EmbeddedChat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe3D,UAAU,iBAAiB;IACzB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CA8G/D"}
+{"version":3,"file":"EmbeddedChat.d.ts","sourceRoot":"","sources":["../../src/components/EmbeddedChat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe3D,UAAU,iBAAiB;IACzB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAgH/D"}

package/dist/components/FloatingChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingChat.d.ts","sourceRoot":"","sources":["../../src/components/FloatingChat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAkB3D,UAAU,iBAAiB;IACzB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAgK/D"}
+{"version":3,"file":"FloatingChat.d.ts","sourceRoot":"","sources":["../../src/components/FloatingChat.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAiB3D,UAAU,iBAAiB;IACzB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,iBAAiB,2CAiK/D"}

package/dist/components/InlineChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineChat.d.ts","sourceRoot":"","sources":["../../src/components/InlineChat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe3D,UAAU,eAAe;IACvB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,eAAe,2CAiG3D"}
+{"version":3,"file":"InlineChat.d.ts","sourceRoot":"","sources":["../../src/components/InlineChat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAe3D,UAAU,eAAe;IACvB,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,EAAE,mBAAmB,CAAA;CAC1B;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,eAAe,2CAmG3D"}

package/dist/components/styled/ChatComponents.d.ts

@@ -5,9 +5,7 @@ export declare const ChatMessage: import('styled-components/dist/types').IStyled
 export declare const ChatInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ProfessionalInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
 export declare const SendButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const FloatingButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $position: string;
-}>> & string;
+export declare const FloatingButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ChatWindow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $position: string;
 }>> & string;

package/dist/components/styled/ChatComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComponents.d.ts","sourceRoot":"","sources":["../../../src/components/styled/ChatComponents.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,6NAgBtB,CAAA;AAGD,eAAO,MAAM,WAAW;aAAyB,OAAO;YA8BvD,CAAA;AAGD,eAAO,MAAM,SAAS,6NAYrB,CAAA;AAGD,eAAO,MAAM,iBAAiB,+OA4C7B,CAAA;AAGD,eAAO,MAAM,UAAU,yOAgCtB,CAAA;AAGD,eAAO,MAAM,cAAc;eAA8B,MAAM;YAoF9D,CAAA;AAGD,eAAO,MAAM,UAAU;eAA2B,MAAM;YAwDvD,CAAA;AAGD,eAAO,MAAM,UAAU;mBAA+B,MAAM;YAqB3D,CAAA;AAGD,eAAO,MAAM,WAAW,yOAqBvB,CAAA;AAGD,eAAO,MAAM,YAAY,6NAuCxB,CAAA;AAGD,eAAO,MAAM,WAAW,6NA+BvB,CAAA;AAGD,eAAO,MAAM,SAAS;aAAyB,OAAO;YAQrD,CAAA;AAGD,eAAO,MAAM,YAAY,6NAUxB,CAAA;AAGD,eAAO,MAAM,YAAY;eAA2B,MAAM;YAwBzD,CAAA"}
+{"version":3,"file":"ChatComponents.d.ts","sourceRoot":"","sources":["../../../src/components/styled/ChatComponents.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,6NAgBtB,CAAA;AAGD,eAAO,MAAM,WAAW;aAAyB,OAAO;YA8BvD,CAAA;AAGD,eAAO,MAAM,SAAS,6NAYrB,CAAA;AAGD,eAAO,MAAM,iBAAiB,+OA4C7B,CAAA;AAGD,eAAO,MAAM,UAAU,yOAgCtB,CAAA;AAGD,eAAO,MAAM,cAAc,yOAgC1B,CAAA;AAGD,eAAO,MAAM,UAAU;eAA2B,MAAM;YAiCvD,CAAA;AAGD,eAAO,MAAM,UAAU;mBAA+B,MAAM;YAqB3D,CAAA;AAGD,eAAO,MAAM,WAAW,yOAqBvB,CAAA;AAGD,eAAO,MAAM,YAAY,6NAuCxB,CAAA;AAGD,eAAO,MAAM,WAAW,6NA+BvB,CAAA;AAGD,eAAO,MAAM,SAAS;aAAyB,OAAO;YAQrD,CAAA;AAGD,eAAO,MAAM,YAAY,6NAUxB,CAAA;AAGD,eAAO,MAAM,YAAY;eAA2B,MAAM;YAwBzD,CAAA"}

package/dist/hooks/useOrdifyChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOrdifyChat.d.ts","sourceRoot":"","sources":["../../src/hooks/useOrdifyChat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAKpE,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,mBAAmB,CAuIvE"}
+{"version":3,"file":"useOrdifyChat.d.ts","sourceRoot":"","sources":["../../src/hooks/useOrdifyChat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAKpE,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,mBAAmB,CA6JvE"}

package/dist/hooks/useOrdifyConfig.d.ts

@@ -13,10 +13,13 @@ export declare function useOrdifyConfig(config: OrdifyConfig): {
     buttonStyle: import('react').CSSProperties;
     chatWindowStyle: import('react').CSSProperties;
     showHeader: boolean;
+    buttonText: string | undefined;
+    chatName: string | undefined;
     onMessage: ((message: import('../types').Message) => void) | undefined;
     onError: ((error: Error) => void) | undefined;
     onClose: (() => void) | undefined;
     onSessionCreated: ((sessionId: string) => void) | undefined;
     initialMessage: string | undefined;
+    initialContext: string | undefined;
 };
 //# sourceMappingURL=useOrdifyConfig.d.ts.map

package/dist/hooks/useOrdifyConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOrdifyConfig.d.ts","sourceRoot":"","sources":["../../src/hooks/useOrdifyConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY;;;;;;;;;;;;;;;;;;EAmCnD"}
+{"version":3,"file":"useOrdifyConfig.d.ts","sourceRoot":"","sources":["../../src/hooks/useOrdifyConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY;;;;;;;;;;;;;;;;;;;;;EAsCnD"}