@terryavg/neptune-ai-chatbot 1.0.1 → 1.0.2

package/dist/chat-input-4T42R7FR.mjs

@@ -0,0 +1,481 @@
+import {
+  chatClient
+} from "./chunk-JLRHY3SB.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,
+  theme = "light",
+  inputBackgroundColor = "#ffffff",
+  inputBackgroundColorDark = "#303030"
+}) {
+  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) {
+        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) {
+              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) {
+      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 rounded-2xl shadow-sm overflow-hidden",
+      style: {
+        borderColor: accentColor,
+        backgroundColor: theme === "dark" ? inputBackgroundColorDark : inputBackgroundColor
+      },
+      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
+};