@terryavg/neptune-ai-chatbot 1.0.1 → 1.0.2

package/dist/index.css

@@ -899,6 +899,9 @@ video {
 .-mt-4 {
   margin-top: -1rem;
 }
+.mb-0 {
+  margin-bottom: 0;
+}
 .mb-1 {
   margin-bottom: .25rem;
 }
@@ -917,6 +920,9 @@ video {
 .ml-2 {
   margin-left: .5rem;
 }
+.ml-3 {
+  margin-left: .75rem;
+}
 .ml-6 {
   margin-left: 1.5rem;
 }
@@ -941,15 +947,15 @@ video {
 .mt-2 {
   margin-top: .5rem;
 }
+.mt-28 {
+  margin-top: 7rem;
+}
 .mt-3 {
   margin-top: .75rem;
 }
 .mt-4 {
   margin-top: 1rem;
 }
-.mt-8 {
-  margin-top: 2rem;
-}
 .block {
   display: block;
 }
@@ -1028,6 +1034,9 @@ video {
 .h-screen {
   height: 100vh;
 }
+.max-h-24 {
+  max-height: 6rem;
+}
 .max-h-32 {
   max-height: 8rem;
 }
@@ -1121,8 +1130,11 @@ video {
 .min-w-\[500px\] {
   min-width: 500px;
 }
-.max-w-2xl {
-  max-width: 42rem;
+.min-w-\[80px\] {
+  min-width: 80px;
+}
+.max-w-4xl {
+  max-width: 56rem;
 }
 .max-w-6xl {
   max-width: 72rem;
@@ -1133,8 +1145,8 @@ video {
 .max-w-\[100\%\] {
   max-width: 100%;
 }
-.max-w-\[90\%\] {
-  max-width: 90%;
+.max-w-\[120px\] {
+  max-width: 120px;
 }
 .max-w-\[90vw\] {
   max-width: 90vw;
@@ -1154,6 +1166,9 @@ video {
 .max-w-sm {
   max-width: 24rem;
 }
+.max-w-xl {
+  max-width: 36rem;
+}
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1247,6 +1262,12 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-start {
+  align-items: flex-start;
+}
 .items-end {
   align-items: flex-end;
 }
@@ -1271,6 +1292,9 @@ video {
 .gap-1 {
   gap: .25rem;
 }
+.gap-1\.5 {
+  gap: .375rem;
+}
 .gap-2 {
   gap: .5rem;
 }
@@ -1363,6 +1387,14 @@ video {
 .rounded-xl {
   border-radius: .75rem;
 }
+.rounded-b-lg {
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+}
+.rounded-t-lg {
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+}
 .rounded-t-sm {
   border-top-left-radius: .125rem;
   border-top-right-radius: .125rem;
@@ -1626,11 +1658,6 @@ video {
   --tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);
   --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
 }
-.from-blue-600 {
-  --tw-gradient-from:#2563eb var(--tw-gradient-from-position);
-  --tw-gradient-to:rgba(37,99,235,0) var(--tw-gradient-to-position);
-  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
-}
 .from-emerald-50 {
   --tw-gradient-from:#ecfdf5 var(--tw-gradient-from-position);
   --tw-gradient-to:rgba(236,253,245,0) var(--tw-gradient-to-position);
@@ -1660,19 +1687,12 @@ video {
 .to-indigo-50 {
   --tw-gradient-to:#eef2ff var(--tw-gradient-to-position);
 }
-.to-purple-600 {
-  --tw-gradient-to:#9333ea var(--tw-gradient-to-position);
-}
 .to-teal-50 {
   --tw-gradient-to:#f0fdfa var(--tw-gradient-to-position);
 }
 .to-transparent {
   --tw-gradient-to:transparent var(--tw-gradient-to-position);
 }
-.bg-clip-text {
-  -webkit-background-clip: text;
-  background-clip: text;
-}
 .object-contain {
   -o-object-fit: contain;
   object-fit: contain;
@@ -1925,9 +1945,6 @@ video {
   --tw-text-opacity:1;
   color: rgb(185 28 28/var(--tw-text-opacity,1));
 }
-.text-transparent {
-  color: transparent;
-}
 .text-white {
   --tw-text-opacity:1;
   color: rgb(255 255 255/var(--tw-text-opacity,1));
@@ -1991,13 +2008,50 @@ video {
   --tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
   --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
 }
-.drop-shadow {
-  --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));
-}
-.drop-shadow,
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    -webkit-backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  transition-duration: .15s;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
@@ -2048,20 +2102,89 @@ video {
     transform: translateY(0);
   }
 }
-@keyframes smoothTextAppear {
+@keyframes fadeInBlur {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+@keyframes vapor-reveal {
   0% {
     opacity: .3;
+    filter: blur(3px);
+    transform: translateY(1px);
   }
   to {
     opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+@keyframes appear {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+    background-color: rgba(59, 130, 246, .1);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    background-color: transparent;
+  }
+}
+.animate-appear {
+  animation: appear .4s cubic-bezier(.2, .8, .2, 1) forwards;
+  display: inline-block;
+}
+.cursor-blink:after {
+  content: "\258b";
+  margin-left: 2px;
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  0%, to {
+    opacity: 1;
   }
+  50% {
+    opacity: 0;
+  }
+}
+.streaming-vapor > div > :last-child {
+  animation: vapor-reveal .3s ease-out forwards;
+}
+.streaming-vapor > div > * {
+  animation: none !important;
+}
+.prose p {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.streaming-vapor > div > :last-child {
+  animation: vapor-reveal .3s ease-out forwards !important;
 }
 .animate-fade-in {
   animation: fadeIn .3s ease-out forwards;
 }
-.streaming-content {
-  animation: smoothTextAppear .4s ease-out;
-  will-change: opacity;
+@keyframes inputSlideToBottom {
+  0% {
+    align-items: center;
+  }
+  to {
+    align-items: flex-end;
+    padding-bottom: 1.5rem;
+  }
+}
+.chat-input-transition {
+  transition: all .6s cubic-bezier(.4, 0, .2, 1);
+}
+.chat-input-animating {
+  animation: slideToBottom .6s cubic-bezier(.4, 0, .2, 1) forwards;
+  z-index: 1000;
+  position: relative;
 }
 :root {
   --foreground-rgb:0,0,0;
@@ -2217,7 +2340,7 @@ form.chat-input {
   background-color: var(--bg-secondary) !important;
 }
 .dark .text-gray-800 {
-  color: #e0e0e0;
+  color: #efefef;
 }
 .dark .text-gray-500 {
   color: #a0a0a0;
@@ -2383,6 +2506,14 @@ form.chat-input {
   --tw-text-opacity:1;
   color: rgb(55 65 81/var(--tw-text-opacity,1));
 }
+.hover\:text-green-600:hover {
+  --tw-text-opacity:1;
+  color: rgb(22 163 74/var(--tw-text-opacity,1));
+}
+.hover\:text-red-600:hover {
+  --tw-text-opacity:1;
+  color: rgb(220 38 38/var(--tw-text-opacity,1));
+}
 .hover\:opacity-90:hover {
   opacity: .9;
 }
@@ -2491,10 +2622,6 @@ form.chat-input {
   --tw-bg-opacity:1 !important;
   background-color: rgb(17 24 39/var(--tw-bg-opacity,1)) !important;
 }
-.dark\:bg-\[\#171717\]:is(.dark *) {
-  --tw-bg-opacity:1;
-  background-color: rgb(23 23 23/var(--tw-bg-opacity,1));
-}
 .dark\:bg-amber-400:is(.dark *) {
   --tw-bg-opacity:1;
   background-color: rgb(251 191 36/var(--tw-bg-opacity,1));
@@ -2539,10 +2666,6 @@ form.chat-input {
 .dark\:bg-emerald-900\/30:is(.dark *) {
   background-color: rgba(6, 78, 59, .3);
 }
-.dark\:bg-gray-100:is(.dark *) {
-  --tw-bg-opacity:1;
-  background-color: rgb(243 244 246/var(--tw-bg-opacity,1));
-}
 .dark\:bg-gray-500:is(.dark *) {
   --tw-bg-opacity:1;
   background-color: rgb(107 114 128/var(--tw-bg-opacity,1));
@@ -2747,14 +2870,18 @@ form.chat-input {
   --tw-text-opacity:1;
   color: rgb(167 243 208/var(--tw-text-opacity,1));
 }
-.dark\:hover\:text-gray-200:hover:is(.dark *) {
-  --tw-text-opacity:1;
-  color: rgb(229 231 235/var(--tw-text-opacity,1));
-}
 .dark\:hover\:text-gray-300:hover:is(.dark *) {
   --tw-text-opacity:1;
   color: rgb(209 213 219/var(--tw-text-opacity,1));
 }
+.dark\:hover\:text-green-400:hover:is(.dark *) {
+  --tw-text-opacity:1;
+  color: rgb(74 222 128/var(--tw-text-opacity,1));
+}
+.dark\:hover\:text-red-400:hover:is(.dark *) {
+  --tw-text-opacity:1;
+  color: rgb(248 113 113/var(--tw-text-opacity,1));
+}
 .dark\:focus\:ring-indigo-400:focus:is(.dark *) {
   --tw-ring-opacity:1;
   --tw-ring-color:rgb(129 140 248/var(--tw-ring-opacity,1));
@@ -2802,4 +2929,8 @@ form.chat-input {
     display: none;
   }
 }
+.\[\&_p\]\:\!my-0 p {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
 /*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/

package/dist/index.d.mts

@@ -1,18 +1,226 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 
+/**
+ * Configuration for local development debugging
+ */
 interface LocalDebugConfig {
+    /** Username for local authentication */
     username: string;
+    /** Password for local authentication */
     password: string;
+    /** Base URL for the local API server */
     baseUrl: string;
 }
+/**
+ * Props for the NeptuneChatBot component
+ *
+ * @example
+ * ```tsx
+ * <NeptuneChatBot
+ *   agentId="your-agent-id"
+ *   theme="dark"
+ *   title="My Assistant"
+ *   messageBubbleColor="#E5E3F8"
+ * />
+ * ```
+ */
 interface NeptuneChatBotProps {
+    /**
+     * Unique identifier for the AI agent
+     * @required
+     */
     agentId: string;
+    /**
+     * Enable debug mode to show console logs and debugging information
+     * @default false
+     */
     debug?: boolean;
+    /**
+     * Color theme for the chat interface
+     * @default "light"
+     */
     theme?: "light" | "dark";
+    /**
+     * Configuration for local development debugging
+     */
     localDebug?: LocalDebugConfig;
+    /**
+     * Title displayed in the chat header
+     * @default "Naia"
+     */
+    title?: string;
+    /**
+     * Background color for message bubbles in light mode
+     * @default "#E5E3F8"
+     * @example "#E5E3F8" or "rgba(229, 227, 248, 1)"
+     */
+    messageBubbleColor?: string;
+    /**
+     * Background color for message bubbles in dark mode
+     * @default "rgba(168, 140, 250, 0.3)"
+     */
+    messageBubbleColorDark?: string;
+    /**
+     * Accent color for buttons and interactive elements in light mode
+     * @default "#8B7FD9"
+     */
+    accentColor?: string;
+    /**
+     * Accent color for buttons and interactive elements in dark mode
+     * @default "#A88CFA"
+     */
+    accentColorDark?: string;
+    /**
+     * Color for the scroll-to-bottom button in light mode
+     * @default "#6366F1"
+     */
+    scrollButtonColor?: string;
+    /**
+     * Color for the scroll-to-bottom button in dark mode
+     * @default "#818CF8"
+     */
+    scrollButtonColorDark?: string;
+    /**
+     * Text displayed while the AI is generating a response
+     * @default "NAIA is working on it..."
+     */
+    streamingText?: string;
+    /**
+     * Color of the streaming indicator text in light mode
+     * @default "#2563EB"
+     */
+    streamingTextColor?: string;
+    /**
+     * Color of the streaming indicator text in dark mode
+     * @default "#818CF8"
+     */
+    streamingTextColorDark?: string;
+    /**
+     * Primary welcome message shown on the initial screen
+     * @default "Hi there!"
+     */
+    welcomeMessagePrimary?: string;
+    /**
+     * Secondary welcome message shown below the primary message
+     * @default "How can I help you today?"
+     */
+    welcomeMessageSecondary?: string;
+    /**
+     * Path to a custom icon image for the welcome screen (supports png, svg, etc.)
+     * @example "/logo.png" or "https://example.com/icon.svg"
+     */
+    welcomeIcon?: string;
+    /**
+     * Size of the welcome icon with CSS units
+     * @default "10rem"
+     * @example "10rem", "100px", "5em"
+     */
+    welcomeIconSize?: string;
+    /**
+     * Enable streaming responses from the AI
+     * @default true
+     */
+    streaming?: boolean;
+    /**
+     * Background color for the sidebar in light mode
+     * @default "#FAFAFA"
+     */
+    sidebarBackgroundColor?: string;
+    /**
+     * Background color for the sidebar in dark mode
+     * @default "#1F1F1F"
+     */
+    sidebarBackgroundColorDark?: string;
+    /**
+     * Background color for the chat input field in light mode
+     * @default "#FFFFFF"
+     */
+    inputBackgroundColor?: string;
+    /**
+     * Background color for the chat input field in dark mode
+     * @default "#303030"
+     */
+    inputBackgroundColorDark?: string;
+    /**
+     * Background color for the header in light mode
+     * @default "#FFFFFF"
+     */
+    headerBackgroundColor?: string;
+    /**
+     * Background color for the header in dark mode
+     * @default "#1F1F1F"
+     */
+    headerBackgroundColorDark?: string;
+    /**
+     * Base color for vector search results in light mode
+     * @default "#9333EA" (purple-600)
+     * @example "#3B82F6" for blue, "#10B981" for green
+     */
+    vectorColor?: string;
+    /**
+     * Base color for vector search results in dark mode
+     * @default "#A855F7" (purple-500)
+     * @example "#60A5FA" for blue, "#34D399" for green
+     */
+    vectorColorDark?: string;
+    /**
+     * Callback fired when a tool starts executing during streaming
+     * @param metadata - Event metadata containing tool information
+     * @example
+     * ```tsx
+     * onToolStart={(metadata) => {
+     *   console.log('Tool started:', metadata.toolName);
+     * }}
+     * ```
+     */
+    onToolStart?: (metadata: any) => void;
+    /**
+     * Callback fired when tool input is available during streaming
+     * @param metadata - Event metadata containing tool input information
+     * @example
+     * ```tsx
+     * onToolInput={(metadata) => {
+     *   console.log('Tool input received:', metadata);
+     * }}
+     * ```
+     */
+    onToolInput?: (metadata: any) => void;
+    /**
+     * Callback fired when a tool finishes executing during streaming
+     * @param metadata - Event metadata containing tool output information
+     * @example
+     * ```tsx
+     * onToolFinish={(metadata) => {
+     *   console.log('Tool finished:', metadata);
+     * }}
+     * ```
+     */
+    onToolFinish?: (metadata: any) => void;
+    /**
+     * Callback fired for each text chunk received during streaming
+     * @param chunk - The text chunk received
+     * @example
+     * ```tsx
+     * onChunk={(chunk) => {
+     *   console.log('Received chunk:', chunk);
+     * }}
+     * ```
+     */
+    onChunk?: (chunk: string) => void;
+    /**
+     * Callback fired when streaming finishes
+     * @param metadata - Final response metadata
+     * @example
+     * ```tsx
+     * onFinish={(metadata) => {
+     *   console.log('Streaming finished:', metadata);
+     * }}
+     * ```
+     */
+    onFinish?: (metadata: any) => void;
 }
-declare function NeptuneChatBot({ agentId: propAgentId, debug: propDebug, theme: propTheme, localDebug: propLocalDebug, }: NeptuneChatBotProps): react_jsx_runtime.JSX.Element;
+declare function NeptuneChatBot({ agentId: propAgentId, debug: propDebug, theme: propTheme, localDebug: propLocalDebug, title: propTitle, messageBubbleColor, messageBubbleColorDark, accentColor, accentColorDark, scrollButtonColor, scrollButtonColorDark, streamingText, streamingTextColor, streamingTextColorDark, welcomeMessagePrimary, welcomeMessageSecondary, welcomeIcon, welcomeIconSize, streaming, sidebarBackgroundColor, onToolStart, onToolInput, onToolFinish, onChunk, onFinish, sidebarBackgroundColorDark, inputBackgroundColor, inputBackgroundColorDark, headerBackgroundColor, headerBackgroundColorDark, vectorColor, vectorColorDark, }: NeptuneChatBotProps): react_jsx_runtime.JSX.Element;
 
 interface TextContent {
     type: "text";
@@ -48,9 +256,18 @@ interface Step {
     text?: string;
     tools?: ToolCall[];
 }
+interface VectorResult {
+    rowId: string;
+    similarity: string;
+    template: string;
+    entityName: string;
+    data: Record<string, any>;
+}
 interface MessageMetadata {
     logId?: string;
     steps?: Step[];
+    vectors?: VectorResult[];
+    feedbackPositive?: boolean | null;
 }
 interface Message {
     id: string;