@terryavg/neptune-ai-chatbot 1.0.1 → 1.0.2

package/README.md

@@ -6,11 +6,146 @@ npm i @terryavg/neptune-ai-chatbot
 ```
 
 ## Usage
+
+### Basic Usage
+```tsx
+import { NeptuneChatBot } from "@terryavg/neptune-ai-chatbot";
+import '@terryavg/neptune-ai-chatbot/styles.css';
+
+function App() {
+  return <NeptuneChatBot agentId="your-agent-id" />;
+}
+```
+
+### With Customization
 ```tsx
 import { NeptuneChatBot } from "@terryavg/neptune-ai-chatbot";
 import '@terryavg/neptune-ai-chatbot/styles.css';
 
 function App() {
-  return <NeptuneChatBot/>;
+  return (
+    <NeptuneChatBot
+      agentId="your-agent-id"
+      theme="dark"
+      title="My Assistant"
+      messageBubbleColor="#E5E3F8"
+      messageBubbleColorDark="rgba(168, 140, 250, 0.3)"
+      accentColor="#8B7FD9"
+      streamingText="AI is thinking..."
+      welcomeMessagePrimary="Welcome!"
+      welcomeMessageSecondary="How can I assist you today?"
+    />
+  );
 }
-```
+```
+
+## Configuration
+
+### Props
+
+All customization options are available through props with full TypeScript support and JSDoc documentation:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `agentId` | `string` | **required** | Unique identifier for the AI agent |
+| `theme` | `"light" \| "dark"` | `"light"` | Color theme for the chat interface |
+| `title` | `string` | `"Naia"` | Title displayed in the chat header |
+| `messageBubbleColor` | `string` | `"#E5E3F8"` | Background color for message bubbles (light mode) |
+| `messageBubbleColorDark` | `string` | `"rgba(168, 140, 250, 0.3)"` | Background color for message bubbles (dark mode) |
+| `accentColor` | `string` | `"#8B7FD9"` | Accent color for buttons and interactive elements (light mode) |
+| `accentColorDark` | `string` | `"#A88CFA"` | Accent color for buttons and interactive elements (dark mode) |
+| `scrollButtonColor` | `string` | `"#6366F1"` | Color for the scroll-to-bottom button (light mode) |
+| `scrollButtonColorDark` | `string` | `"#818CF8"` | Color for the scroll-to-bottom button (dark mode) |
+| `streamingText` | `string` | `"NAIA is working on it..."` | Text displayed while AI is generating a response |
+| `streamingTextColor` | `string` | `"#2563EB"` | Color of the streaming indicator text (light mode) |
+| `streamingTextColorDark` | `string` | `"#818CF8"` | Color of the streaming indicator text (dark mode) |
+| `welcomeMessagePrimary` | `string` | `"Hi there!"` | Primary welcome message on the initial screen |
+| `welcomeMessageSecondary` | `string` | `"How can I help you today?"` | Secondary welcome message below the primary message |
+| `welcomeIcon` | `string` | - | Path to a custom icon image for the welcome screen |
+| `welcomeIconSize` | `string` | `"10rem"` | Size of the welcome icon with CSS units |
+| `streaming` | `boolean` | `true` | Enable streaming responses from the AI |
+| `sidebarBackgroundColor` | `string` | `"#FAFAFA"` | Background color for the sidebar (light mode) |
+| `sidebarBackgroundColorDark` | `string` | `"#1F1F1F"` | Background color for the sidebar (dark mode) |
+| `inputBackgroundColor` | `string` | `"#FFFFFF"` | Background color for the chat input field (light mode) |
+| `inputBackgroundColorDark` | `string` | `"#303030"` | Background color for the chat input field (dark mode) |
+| `headerBackgroundColor` | `string` | `"#FFFFFF"` | Background color for the header (light mode) |
+| `headerBackgroundColorDark` | `string` | `"#1F1F1F"` | Background color for the header (dark mode) |
+| `vectorColor` | `string` | `"#9333EA"` | Base color for vector search results (light mode) - automatically generates variations |
+| `vectorColorDark` | `string` | `"#A855F7"` | Base color for vector search results (dark mode) - automatically generates variations |
+| `debug` | `boolean` | `false` | Enable debug mode for console logs |
+| `localDebug` | `LocalDebugConfig` | - | Configuration for local development (see below) |
+| `onToolStart` | `(metadata: any) => void` | - | Callback fired when a tool starts executing during streaming |
+| `onToolInput` | `(metadata: any) => void` | - | Callback fired when tool input is available during streaming |
+| `onToolFinish` | `(metadata: any) => void` | - | Callback fired when a tool finishes executing during streaming |
+| `onChunk` | `(chunk: string) => void` | - | Callback fired for each text chunk received during streaming |
+| `onFinish` | `(metadata: any) => void` | - | Callback fired when streaming finishes |
+
+### Streaming Event Callbacks
+
+When `streaming` is enabled, you can hook into various streaming events to track the AI's response generation:
+
+```tsx
+<NeptuneChatBot
+  agentId="your-agent-id"
+  streaming={true}
+  onToolStart={(metadata) => {
+    console.log('Tool started:', metadata.toolName);
+  }}
+  onToolInput={(metadata) => {
+    console.log('Tool input available:', metadata);
+  }}
+  onToolFinish={(metadata) => {
+    console.log('Tool finished:', metadata);
+  }}
+  onChunk={(chunk) => {
+    console.log('Received text chunk:', chunk);
+  }}
+  onFinish={(metadata) => {
+    console.log('Streaming completed:', metadata);
+  }}
+/>
+```
+
+Available callbacks:
+- **onToolStart**: Fires when a tool begins execution (e.g., web search, API call)
+- **onToolInput**: Fires when the tool's input parameters are generated
+- **onToolFinish**: Fires when the tool completes and returns output
+- **onChunk**: Fires for each text chunk received from the AI
+- **onFinish**: Fires when the entire response stream is complete
+
+### Local Development Configuration
+
+The `localDebug` prop is used when the component runs **outside of a Neptune environment**. When deployed within Neptune, authentication is handled automatically.
+
+**Note:** This configuration is only required for local development and testing.
+
+```tsx
+<NeptuneChatBot
+  agentId="your-agent-id"
+  localDebug={{
+    username: "your-username",
+    password: "your-password",
+    baseUrl: "http://localhost:3000"
+  }}
+/>
+```
+
+The `localDebug` object includes:
+- `username` - Username for local authentication
+- `password` - Password for local authentication
+- `baseUrl` - Base URL for the local API server
+
+## Features
+
+- 🎨 **Fully Customizable** - Theme colors, text, and UI elements
+- 🌓 **Dark Mode Support** - Built-in light and dark theme support
+- 📎 **Multiple File Attachments** - Upload multiple images and PDFs
+- ⚡ **Real-time Streaming** - See AI responses as they're generated
+- 💬 **Conversation History** - Automatic conversation management and persistence
+- 📱 **Responsive Design** - Works seamlessly on desktop and mobile
+- ♿ **Accessible** - ARIA labels and keyboard navigation support
+- 🔧 **TypeScript** - Full type safety with comprehensive JSDoc documentation
+
+## License
+
+MIT

package/dist/chat-input-42V4ESQB.mjs

@@ -0,0 +1,478 @@
+import {
+  chatClient
+} from "./chunk-DVWFDUN4.mjs";
+import "./chunk-FWCSY2DS.mjs";
+
+// app/components/chat-input.tsx
+import {
+  useState,
+  useRef,
+  useEffect
+} from "react";
+import { Send, Paperclip, X, FileText } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatInput({
+  conversationId,
+  agentId,
+  debug = false,
+  onAddUserMessage,
+  onStreamStart,
+  onStreamUpdate,
+  onStreamEnd,
+  onError,
+  messages,
+  isStreaming,
+  disabled = false,
+  onThreadCreated,
+  onToolExecutionStart,
+  onToolExecutionEnd,
+  accentColor = "#8B7FD9",
+  streaming = true
+}) {
+  const [input, setInput] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [attachment, setAttachment] = useState(null);
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const abortControllerRef = useRef(null);
+  const isImageAttachment = (attachment == null ? void 0 : attachment.type) === "image";
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "inherit";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  }, [input]);
+  const handleFileChange = async (e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    const isImage = file.type.startsWith("image/");
+    const isPdf = file.type === "application/pdf";
+    if (!isImage && !isPdf) {
+      onError({
+        title: "Unsupported File Type",
+        message: "Only images (PNG, JPG, GIF, etc.) and PDF files are supported at this time."
+      });
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      onError({
+        title: "File Too Large",
+        message: "The selected file exceeds the 10MB size limit. Please choose a smaller file."
+      });
+      return;
+    }
+    try {
+      const base64data = await fileToBase64(file);
+      if (isImage) {
+        setAttachment({
+          name: file.name,
+          type: "image",
+          mediaType: file.type,
+          data: base64data,
+          image: base64data
+        });
+      } else {
+        setAttachment({
+          name: file.name,
+          type: "file",
+          mediaType: file.type,
+          data: base64data,
+          filename: file.name
+        });
+      }
+    } catch (error) {
+      console.error("File processing error:", error);
+      onError({
+        title: "File Processing Error",
+        message: "There was an unexpected error processing your file. Please try again."
+      });
+    }
+  };
+  const handlePaste = async (e) => {
+    var _a;
+    const clipboardItems = (_a = e.clipboardData) == null ? void 0 : _a.items;
+    if (!clipboardItems) return;
+    for (let i = 0; i < clipboardItems.length; i++) {
+      const item = clipboardItems[i];
+      const trimmedItemType = item.type.trim();
+      if (trimmedItemType.includes("image")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (!file) continue;
+        if (file.size > 5 * 1024 * 1024) {
+          onError({
+            title: "Image Too Large",
+            message: "The pasted image exceeds the 5MB size limit. Please paste a smaller image."
+          });
+          return;
+        }
+        try {
+          const base64data = await fileToBase64(file);
+          const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+          const filename = `pasted-image-${timestamp}.${trimmedItemType.split("/")[1] || "png"}`;
+          setAttachment({
+            name: filename,
+            type: "image",
+            mediaType: trimmedItemType,
+            data: base64data,
+            image: base64data
+          });
+          return;
+        } catch (error) {
+          console.error("Error processing pasted image:", error);
+          onError({
+            title: "Image Processing Error",
+            message: "There was an unexpected error processing the pasted image. Please try again."
+          });
+        }
+      }
+    }
+  };
+  const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        if (typeof reader.result === "string") {
+          resolve(reader.result);
+        } else {
+          reject(new Error("Failed to convert file to base64"));
+        }
+      };
+      reader.onerror = (error) => reject(error);
+    });
+  };
+  const clearAttachment = () => {
+    setAttachment(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleAttachmentClick = () => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!input.trim() && !attachment || isSubmitting || disabled) return;
+    if (!agentId) {
+      onError({
+        title: "Missing Configuration",
+        message: "Assistant ID or Agent ID is not set. Please ensure it is provided in the URL (e.g., ?assistantId=your-id or ?agentId=your-id)."
+      });
+      setIsSubmitting(false);
+      return;
+    }
+    let accumulatedResponse = "";
+    let errorOccurred = false;
+    let finalErrorMessage = "";
+    let metadata = null;
+    try {
+      setIsSubmitting(true);
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      const userMessageText = input.trim();
+      let messageContentParts = [];
+      if (userMessageText) {
+        messageContentParts.push({
+          type: "text",
+          text: userMessageText
+        });
+      }
+      if (attachment) {
+        if (attachment.type === "image") {
+          messageContentParts.push({
+            type: "image",
+            image: attachment.image || attachment.data,
+            // Fallback to data if image not set
+            mediaType: attachment.mediaType
+          });
+        } else {
+          messageContentParts.push({
+            type: "file",
+            data: attachment.data,
+            mediaType: attachment.mediaType,
+            filename: attachment.filename || attachment.name
+          });
+        }
+      }
+      const finalMessageContent = messageContentParts.length === 1 && messageContentParts[0].type === "text" && !attachment ? messageContentParts[0].text : messageContentParts;
+      setInput("");
+      clearAttachment();
+      onAddUserMessage({
+        id: `local-user-${Date.now()}`,
+        content: finalMessageContent,
+        role: "user",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      onStreamStart();
+      const { stream, threadId } = await chatClient.messages.sendMessage(
+        agentId,
+        conversationId,
+        finalMessageContent,
+        messages,
+        abortController.signal,
+        debug,
+        void 0,
+        // stepData
+        conversationId.startsWith("temp-"),
+        // isTemporary - detect by ID prefix
+        streaming
+        // streaming mode
+      );
+      if (threadId && threadId !== conversationId && onThreadCreated) {
+        console.log(`Conversation created with ID: ${threadId}`);
+        onThreadCreated(conversationId, threadId);
+      }
+      if (!streaming) {
+        const reader = stream.getReader();
+        const decoder = new TextDecoder();
+        let responseText = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          responseText += decoder.decode(value, { stream: true });
+        }
+        const response = JSON.parse(responseText);
+        const outputText = response.output || "";
+        accumulatedResponse = outputText;
+        onStreamUpdate(outputText);
+        metadata = response;
+        if (response.threadID && response.threadID !== conversationId && onThreadCreated) {
+          onThreadCreated(conversationId, response.threadID);
+        }
+      } else {
+        const reader = stream.getReader();
+        const decoder = new TextDecoder();
+        let done = false;
+        let buffer = "";
+        let isToolExecuting = false;
+        let currentToolName = "";
+        while (!done) {
+          try {
+            if (abortController.signal.aborted) {
+              console.log("Request was aborted by user");
+              break;
+            }
+            const { value, done: readerDone } = await reader.read();
+            done = readerDone;
+            if (value) {
+              buffer += decoder.decode(value, { stream: true });
+              const lines = buffer.split("\n");
+              buffer = lines.pop() || "";
+              for (const line of lines) {
+                if (!line.trim()) continue;
+                if (line.startsWith("data: ")) {
+                  const jsonString = line.substring(6);
+                  if (jsonString === "[DONE]") {
+                    done = true;
+                    break;
+                  }
+                  try {
+                    const event = JSON.parse(jsonString);
+                    switch (event.type) {
+                      case "start-step":
+                        break;
+                      case "tool-input-start":
+                        currentToolName = event.toolName || "Unknown Tool";
+                        isToolExecuting = true;
+                        if (onToolExecutionStart) {
+                          onToolExecutionStart(
+                            currentToolName
+                          );
+                        }
+                        break;
+                      case "tool-input-delta":
+                        break;
+                      case "tool-input-available":
+                        break;
+                      case "tool-output-available":
+                        if (isToolExecuting && onToolExecutionEnd) {
+                          onToolExecutionEnd();
+                        }
+                        isToolExecuting = false;
+                        currentToolName = "";
+                        break;
+                      case "finish-step":
+                        if (isToolExecuting && onToolExecutionEnd) {
+                          onToolExecutionEnd();
+                        }
+                        isToolExecuting = false;
+                        currentToolName = "";
+                        break;
+                      case "text-delta":
+                        accumulatedResponse += event.delta;
+                        onStreamUpdate(event.delta);
+                        break;
+                      case "data-finish-result":
+                        metadata = event.data;
+                        break;
+                      case "error":
+                        throw new Error(
+                          event.errorText || "Stream error occurred"
+                        );
+                      // Ignore other event types
+                      default:
+                        break;
+                    }
+                  } catch (parseError) {
+                    console.error(
+                      "Error parsing SSE event:",
+                      parseError
+                    );
+                  }
+                }
+              }
+            }
+          } catch (streamReadError) {
+            console.error(
+              "Error reading stream chunk:",
+              streamReadError
+            );
+            errorOccurred = true;
+            finalErrorMessage = "An error occurred while reading the response.";
+            onError({
+              title: "Stream Error",
+              message: finalErrorMessage
+            });
+            done = true;
+          }
+        }
+        if ((metadata == null ? void 0 : metadata.threadID) && metadata.threadID !== conversationId && onThreadCreated) {
+          onThreadCreated(conversationId, metadata.threadID);
+        }
+      }
+    } catch (error) {
+      console.error("Error during chat submission:", error);
+      if ((error == null ? void 0 : error.name) === "AbortError") {
+        return;
+      }
+      errorOccurred = true;
+      let title = "Request Error";
+      let localMessage = "An unexpected error occurred. Please try again.";
+      if (error == null ? void 0 : error.isConfigurationError) {
+        title = "Configuration Error";
+        localMessage = error.message || "Assistant ID is missing or invalid.";
+      } else if (error == null ? void 0 : error.isApiError) {
+        title = `API Error (${error.status})`;
+        localMessage = error.message || error.statusText || "An error occurred processing your request.";
+      } else if (error == null ? void 0 : error.isNetworkError) {
+        title = "Network Error";
+        localMessage = error.message || "Failed to connect to the server.";
+      } else if (error instanceof Error) {
+        localMessage = error.message;
+      }
+      finalErrorMessage = localMessage;
+      onError({ title, message: finalErrorMessage });
+    } finally {
+      onStreamEnd(
+        errorOccurred ? finalErrorMessage : accumulatedResponse,
+        metadata
+      );
+      setIsSubmitting(false);
+      abortControllerRef.current = null;
+    }
+  };
+  useEffect(() => {
+    if (!isStreaming && abortControllerRef.current) {
+      console.log("Aborting request due to streaming stopped");
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, [isStreaming]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: "chat-input relative px-2 pt-3 pb-3 flex w-full items-center border bg-white dark:bg-gray-100 rounded-2xl shadow-sm overflow-hidden",
+      style: { borderColor: accentColor },
+      children: [
+        attachment && /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-0 right-0 bg-gray-100 dark:bg-gray-700 p-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 truncate max-w-[90%]", children: [
+            isImageAttachment ? /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded overflow-hidden bg-white", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: attachment.image || attachment.data,
+                alt: "Preview",
+                className: "w-full h-full object-cover"
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              FileText,
+              {
+                size: 16,
+                className: "text-gray-600 dark:text-gray-300"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs truncate", children: attachment.name })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: clearAttachment,
+              className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            placeholder: disabled ? "Please complete the form above..." : "Type a message...",
+            className: `max-h-32 min-h-8 w-full resize-none bg-transparent py-2 pl-6 pr-16 focus:outline-none text-base ${attachment ? "mt-8" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+            rows: 1,
+            disabled: isSubmitting || disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            ref: fileInputRef,
+            onChange: handleFileChange,
+            accept: "application/pdf,image/*",
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleAttachmentClick,
+            disabled: isSubmitting || isStreaming || disabled,
+            className: "p-2 absolute bottom-3 right-12 rounded-full enabled:hover:bg-gray-300 enabled:dark:hover:bg-gray-700 disabled:opacity-40",
+            style: { color: accentColor },
+            "aria-label": "Attach file or image",
+            children: /* @__PURE__ */ jsx(Paperclip, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: !input.trim() && !attachment || isSubmitting || disabled,
+            className: "ml-2 p-2 absolute bottom-3 right-3 rounded-full enabled:hover:bg-gray-300 enabled:dark:hover:bg-gray-700 disabled:opacity-40",
+            style: { color: accentColor },
+            "aria-label": "Send message",
+            children: /* @__PURE__ */ jsx(Send, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ChatInput as default
+};