@bytexbyte/nxtlinq-ai-agent-sdk 1.6.0 → 1.6.1

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

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import * as React from 'react';
 export declare const PresetMessages: React.FC;
 //# sourceMappingURL=PresetMessages.d.ts.map

package/dist/components/ui/PresetMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PresetMessages.d.ts","sourceRoot":"","sources":["../../../src/components/ui/PresetMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAgDlC,CAAC"}
+{"version":3,"file":"PresetMessages.d.ts","sourceRoot":"","sources":["../../../src/components/ui/PresetMessages.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA0ClC,CAAC"}

package/dist/components/ui/PresetMessages.js

@@ -1,34 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
 import { useChatBot } from '../context/ChatBotContext';
+import { actionButton } from './styles/isolatedStyles';
 export const PresetMessages = () => {
     const { suggestions, handlePresetMessage } = useChatBot();
     if (!suggestions || suggestions.length === 0) {
         return null;
     }
-    return (_jsx("div", { style: {
-            padding: '10px 15px',
-            borderTop: '1px solid #eee',
-            overflowX: 'auto',
-            whiteSpace: 'nowrap',
-            display: 'flex',
-            gap: '10px',
-            alignItems: 'center'
-        }, children: suggestions.map((preset, index) => (_jsx("button", { onClick: () => handlePresetMessage(preset), style: {
-                backgroundColor: '#007bff',
-                color: 'white',
-                border: 'none',
-                borderRadius: '5px',
-                padding: '5px 10px',
-                fontSize: '12px',
-                cursor: 'pointer',
-                transition: 'background-color 0.3s',
-                whiteSpace: 'nowrap',
-                flexShrink: 0
-            }, onMouseOver: (e) => {
-                e.currentTarget.style.backgroundColor = '#0056b3';
-            }, onMouseOut: (e) => {
-                e.currentTarget.style.backgroundColor = '#007bff';
-            }, onMouseDown: (e) => {
-                e.currentTarget.style.backgroundColor = '#004085';
-            }, children: preset.text }, index))) }));
+    return (_jsx("div", { css: css `
+      padding: 10px 15px !important;
+      border-top: 1px solid #eee !important;
+      overflow-x: auto !important;
+      white-space: nowrap !important;
+      display: flex !important;
+      gap: 10px !important;
+      align-items: center !important;
+    `, children: suggestions.map((preset, index) => (_jsx("button", { onClick: () => handlePresetMessage(preset), css: css `
+            ${actionButton}
+            padding: 5px 10px !important;
+            font-size: 12px !important;
+            white-space: nowrap !important;
+            flex-shrink: 0 !important;
+            
+            &:hover {
+              background-color: #0056b3 !important;
+            }
+            
+            &:active {
+              background-color: #004085 !important;
+            }
+          `, children: preset.text }, index))) }));
 };

package/dist/components/ui/styles/isolatedStyles.d.ts

@@ -0,0 +1,34 @@
+export declare const sdkReset: import("@emotion/utils").SerializedStyles;
+export declare const sdkContainer: import("@emotion/utils").SerializedStyles;
+export declare const floatingButton: import("@emotion/utils").SerializedStyles;
+export declare const chatWindow: import("@emotion/utils").SerializedStyles;
+export declare const chatHeader: import("@emotion/utils").SerializedStyles;
+export declare const headerTitle: import("@emotion/utils").SerializedStyles;
+export declare const headerButton: import("@emotion/utils").SerializedStyles;
+export declare const closeButton: import("@emotion/utils").SerializedStyles;
+export declare const messageListContainer: import("@emotion/utils").SerializedStyles;
+export declare const messageBubble: import("@emotion/utils").SerializedStyles;
+export declare const userMessage: import("@emotion/utils").SerializedStyles;
+export declare const messageContent: import("@emotion/utils").SerializedStyles;
+export declare const userMessageContent: import("@emotion/utils").SerializedStyles;
+export declare const retryMessageContent: import("@emotion/utils").SerializedStyles;
+export declare const actionButton: import("@emotion/utils").SerializedStyles;
+export declare const connectedButton: import("@emotion/utils").SerializedStyles;
+export declare const loadingIndicator: import("@emotion/utils").SerializedStyles;
+export declare const modelIndicator: import("@emotion/utils").SerializedStyles;
+export declare const modelBadge: import("@emotion/utils").SerializedStyles;
+export declare const modelDot: import("@emotion/utils").SerializedStyles;
+export declare const toastNotification: import("@emotion/utils").SerializedStyles;
+export declare const successToast: import("@emotion/utils").SerializedStyles;
+export declare const errorToast: import("@emotion/utils").SerializedStyles;
+export declare const warningToast: import("@emotion/utils").SerializedStyles;
+export declare const infoToast: import("@emotion/utils").SerializedStyles;
+export declare const toastCloseButton: import("@emotion/utils").SerializedStyles;
+export declare const modalOverlay: import("@emotion/utils").SerializedStyles;
+export declare const idvBanner: import("@emotion/utils").SerializedStyles;
+export declare const idvBannerTitle: import("@emotion/utils").SerializedStyles;
+export declare const idvBannerText: import("@emotion/utils").SerializedStyles;
+export declare const idvVerifyButton: import("@emotion/utils").SerializedStyles;
+export declare const idvDismissButton: import("@emotion/utils").SerializedStyles;
+export declare const loadingSpinner: import("@emotion/utils").SerializedStyles;
+//# sourceMappingURL=isolatedStyles.d.ts.map

package/dist/components/ui/styles/isolatedStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isolatedStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/styles/isolatedStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,2CAwBpB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAqDxB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAqB1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CActB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAStB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAMvB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAqBxB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAevB,CAAC;AAGF,eAAO,MAAM,oBAAoB,2CAQhC,CAAC;AAGF,eAAO,MAAM,aAAa,2CAKzB,CAAC;AAGF,eAAO,MAAM,WAAW,2CAKvB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAQ1B,CAAC;AAGF,eAAO,MAAM,kBAAkB,2CAQ9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,2CAS/B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAU3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAQ5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,UAAU,2CAYtB,CAAC;AAGF,eAAO,MAAM,QAAQ,2CAMpB,CAAC;AAGF,eAAO,MAAM,iBAAiB,2CAc7B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,UAAU,2CAItB,CAAC;AAGF,eAAO,MAAM,YAAY,2CAIxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAIrB,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAiB5B,CAAC;AAGF,eAAO,MAAM,YAAY,2CAYxB,CAAC;AAGF,eAAO,MAAM,SAAS,2CAWrB,CAAC;AAGF,eAAO,MAAM,cAAc,2CAM1B,CAAC;AAGF,eAAO,MAAM,aAAa,2CAMzB,CAAC;AAGF,eAAO,MAAM,eAAe,2CAe3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,2CAc5B,CAAC;AAGF,eAAO,MAAM,cAAc,2CAO1B,CAAC"}

package/dist/components/ui/styles/isolatedStyles.js

@@ -0,0 +1,449 @@
+import { css } from '@emotion/react';
+// Light CSS Reset for SDK components - only reset problematic inherited styles
+export const sdkReset = css `
+  /* Only reset problematic inherited styles, keep the rest */
+  box-sizing: border-box !important;
+  
+  /* Ensure consistent font rendering */
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif !important;
+  
+  /* Reset only problematic inherited styles */
+  text-decoration: none !important;
+  text-transform: none !important;
+  letter-spacing: normal !important;
+  word-spacing: normal !important;
+  text-align: left !important;
+  
+  /* Reset list styles if needed */
+  list-style: none !important;
+  
+  /* Reset form elements outline */
+  outline: none !important;
+  
+  /* Reset user select for better UX */
+  user-select: auto !important;
+`;
+// Base container styles with light isolation
+export const sdkContainer = css `
+  /* Light isolation - only reset problematic inherited styles */
+  ${sdkReset}
+  
+  /* Ensure all text elements have proper color inheritance */
+  &, & * {
+    color: inherit !important;
+  }
+  
+  /* Ensure consistent box-sizing for all children */
+  & * {
+    box-sizing: border-box !important;
+  }
+  
+  /* Light reset for buttons to prevent external button styles */
+  & button {
+    box-sizing: border-box !important;
+    font-family: inherit !important;
+    cursor: pointer !important;
+  }
+  
+  /* Light reset for form elements */
+  & input, & textarea {
+    box-sizing: border-box !important;
+    font-family: inherit !important;
+  }
+  
+  /* Light reset for text elements */
+  & div, & span, & p, & h1, & h2, & h3, & h4, & h5, & h6 {
+    box-sizing: border-box !important;
+    font-family: inherit !important;
+  }
+  
+  /* Light reset for lists */
+  & ul, & ol, & li {
+    box-sizing: border-box !important;
+    font-family: inherit !important;
+  }
+  
+  /* Light reset for links */
+  & a {
+    box-sizing: border-box !important;
+    font-family: inherit !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+  
+  /* Light reset for images */
+  & img {
+    box-sizing: border-box !important;
+    max-width: 100% !important;
+    height: auto !important;
+  }
+`;
+// Floating button styles
+export const floatingButton = css `
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  background-color: #007bff !important;
+  color: white !important;
+  border: none !important;
+  padding: 10px 20px !important;
+  border-radius: 20px !important;
+  cursor: pointer !important;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+  transition: all 0.3s ease !important;
+  z-index: 1000 !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  font-family: inherit !important;
+  
+  &:hover {
+    background-color: #0056b3 !important;
+    transform: translateY(-2px) !important;
+  }
+`;
+// Chat window container styles
+export const chatWindow = css `
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  width: 500px !important;
+  height: 600px !important;
+  background-color: white !important;
+  border-radius: 10px !important;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  z-index: 1001 !important;
+  overflow: hidden !important;
+  font-family: inherit !important;
+`;
+// Header styles
+export const chatHeader = css `
+  padding: 15px !important;
+  background-color: #007bff !important;
+  color: white !important;
+  border-radius: 10px 10px 0 0 !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  font-family: inherit !important;
+`;
+// Header title styles
+export const headerTitle = css `
+  margin: 0 !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  color: white !important;
+  font-family: inherit !important;
+`;
+// Header button styles
+export const headerButton = css `
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 4px !important;
+  transition: background-color 0.2s !important;
+  font-family: inherit !important;
+  width: 32px !important;
+  height: 32px !important;
+  line-height: 0 !important;
+  vertical-align: middle !important;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+  }
+`;
+// Close button styles
+export const closeButton = css `
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  padding: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-family: inherit !important;
+  width: 32px !important;
+  height: 32px !important;
+  line-height: 0 !important;
+  vertical-align: middle !important;
+`;
+// Message list container styles
+export const messageListContainer = css `
+  flex: 1 !important;
+  padding: 15px !important;
+  overflow-y: auto !important;
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 10px !important;
+  font-family: inherit !important;
+`;
+// Message bubble styles
+export const messageBubble = css `
+  align-self: flex-start !important;
+  max-width: 80% !important;
+  margin-bottom: 10px !important;
+  font-family: inherit !important;
+`;
+// User message styles
+export const userMessage = css `
+  align-self: flex-end !important;
+  max-width: 80% !important;
+  margin-bottom: 10px !important;
+  font-family: inherit !important;
+`;
+// Message content styles
+export const messageContent = css `
+  background-color: #f1f1f1 !important;
+  color: #333 !important;
+  padding: 10px 15px !important;
+  border-radius: 15px !important;
+  word-wrap: break-word !important;
+  position: relative !important;
+  font-family: inherit !important;
+`;
+// User message content styles
+export const userMessageContent = css `
+  background-color: #007bff !important;
+  color: white !important;
+  padding: 10px 15px !important;
+  border-radius: 15px !important;
+  word-wrap: break-word !important;
+  position: relative !important;
+  font-family: inherit !important;
+`;
+// Retry message content styles
+export const retryMessageContent = css `
+  background-color: #fff3cd !important;
+  color: #856404 !important;
+  padding: 10px 15px !important;
+  border-radius: 15px !important;
+  word-wrap: break-word !important;
+  position: relative !important;
+  border: 1px solid #ffeaa7 !important;
+  font-family: inherit !important;
+`;
+// Action button styles
+export const actionButton = css `
+  padding: 8px 16px !important;
+  background-color: #007bff !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 5px !important;
+  cursor: pointer !important;
+  font-size: 14px !important;
+  font-family: inherit !important;
+  margin-top: 10px !important;
+  
+  &:disabled {
+    background-color: #6c757d !important;
+    cursor: not-allowed !important;
+    opacity: 0.8 !important;
+  }
+`;
+// Connected button styles
+export const connectedButton = css `
+  padding: 8px 16px !important;
+  background-color: #28a745 !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 5px !important;
+  cursor: pointer !important;
+  font-size: 14px !important;
+  font-family: inherit !important;
+  margin-top: 10px !important;
+`;
+// Loading indicator styles
+export const loadingIndicator = css `
+  align-self: flex-start !important;
+  background-color: #f1f1f1 !important;
+  color: #333 !important;
+  padding: 10px 15px !important;
+  border-radius: 15px !important;
+  max-width: 80% !important;
+  font-family: inherit !important;
+`;
+// Model indicator styles
+export const modelIndicator = css `
+  display: flex !important;
+  align-items: center !important;
+  margin-top: 4px !important;
+  margin-left: 8px !important;
+  font-family: inherit !important;
+`;
+// Model badge styles
+export const modelBadge = css `
+  background-color: #e3f2fd !important;
+  color: #1976d2 !important;
+  padding: 2px 8px !important;
+  border-radius: 10px !important;
+  font-size: 10px !important;
+  font-weight: 500 !important;
+  border: 1px solid #bbdefb !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  font-family: inherit !important;
+`;
+// Model dot styles
+export const modelDot = css `
+  width: 6px !important;
+  height: 6px !important;
+  background-color: #1976d2 !important;
+  border-radius: 50% !important;
+  display: inline-block !important;
+`;
+// Toast notification styles
+export const toastNotification = css `
+  position: fixed !important;
+  padding: 12px 24px !important;
+  border-radius: 8px !important;
+  z-index: 2000 !important;
+  font-weight: 600 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  transition: all 0.3s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  min-width: 300px !important;
+  max-width: 500px !important;
+  font-family: inherit !important;
+`;
+// Success toast styles
+export const successToast = css `
+  ${toastNotification}
+  background: #4caf50 !important;
+  color: white !important;
+`;
+// Error toast styles
+export const errorToast = css `
+  ${toastNotification}
+  background: #f44336 !important;
+  color: white !important;
+`;
+// Warning toast styles
+export const warningToast = css `
+  ${toastNotification}
+  background: #ff9800 !important;
+  color: white !important;
+`;
+// Info toast styles
+export const infoToast = css `
+  ${toastNotification}
+  background: #2196f3 !important;
+  color: white !important;
+`;
+// Toast close button styles
+export const toastCloseButton = css `
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  padding: 4px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 4px !important;
+  transition: background-color 0.2s !important;
+  font-family: inherit !important;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+  }
+`;
+// Modal overlay styles
+export const modalOverlay = css `
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 1002 !important;
+  padding: 20px !important;
+`;
+// IDV banner styles
+export const idvBanner = css `
+  background-color: #fff3cd !important;
+  border: 1px solid #ffeaa7 !important;
+  border-left: 4px solid #f39c12 !important;
+  margin: 16px !important;
+  padding: 16px !important;
+  border-radius: 8px !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px !important;
+  font-family: inherit !important;
+`;
+// IDV banner title styles
+export const idvBannerTitle = css `
+  margin: 0 0 8px 0 !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  color: #856404 !important;
+  font-family: inherit !important;
+`;
+// IDV banner text styles
+export const idvBannerText = css `
+  margin: 0 0 12px 0 !important;
+  font-size: 13px !important;
+  color: #856404 !important;
+  line-height: 1.4 !important;
+  font-family: inherit !important;
+`;
+// IDV verify button styles
+export const idvVerifyButton = css `
+  padding: 8px 16px !important;
+  background-color: #f39c12 !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 6px !important;
+  cursor: pointer !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  transition: background-color 0.2s !important;
+  font-family: inherit !important;
+  
+  &:hover {
+    background-color: #e67e22 !important;
+  }
+`;
+// IDV dismiss button styles
+export const idvDismissButton = css `
+  background: none !important;
+  border: none !important;
+  color: #856404 !important;
+  font-size: 18px !important;
+  cursor: pointer !important;
+  padding: 4px !important;
+  border-radius: 4px !important;
+  transition: background-color 0.2s !important;
+  font-family: inherit !important;
+  
+  &:hover {
+    background-color: rgba(133, 100, 4, 0.1) !important;
+  }
+`;
+// Loading spinner styles
+export const loadingSpinner = css `
+  width: 12px !important;
+  height: 12px !important;
+  border: 2px solid rgba(255, 255, 255, 0.3) !important;
+  border-top: 2px solid white !important;
+  border-radius: 50% !important;
+  animation: spin 1s linear infinite !important;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-sdk",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Nxtlinq AI Agent SDK - Proprietary Software with enhanced async operation handling",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",