ai-site-pilot 0.1.0

package/dist/index.mjs

@@ -0,0 +1,597 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MicOff, Mic, Send, Zap, Sparkles, Volume2, VolumeX, Minimize2, Maximize2, X, MessageCircle } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/SitePilot.tsx
+function useChat(options) {
+  const { apiEndpoint, initialMessages = [], onToolCall, onStreamStart, onStreamEnd } = options;
+  const [messages, setMessages] = useState(initialMessages);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [streamingMessageId, setStreamingMessageId] = useState(null);
+  const abortControllerRef = useRef(null);
+  const addMessage = useCallback((message) => {
+    const newMessage = {
+      ...message,
+      id: Date.now().toString(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, newMessage]);
+    return newMessage;
+  }, []);
+  const clearMessages = useCallback(() => {
+    setMessages(initialMessages);
+  }, [initialMessages]);
+  const sendMessage = useCallback(
+    async (content) => {
+      const messageContent = content || input;
+      if (!messageContent.trim() || isLoading) return;
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+      const userMessage = {
+        id: Date.now().toString(),
+        role: "user",
+        content: messageContent,
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      setInput("");
+      setIsLoading(true);
+      onStreamStart?.();
+      const assistantMessageId = (Date.now() + 1).toString();
+      const assistantMessage = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: /* @__PURE__ */ new Date(),
+        toolCalls: []
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      setStreamingMessageId(assistantMessageId);
+      let fullText = "";
+      const toolCalls = [];
+      try {
+        const apiMessages = messages.concat(userMessage).map((m) => ({
+          role: m.role,
+          content: m.content
+        }));
+        const response = await fetch(apiEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: apiMessages }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!response.ok) {
+          throw new Error("Failed to get response");
+        }
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("No reader available");
+        const decoder = new TextDecoder();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const text = decoder.decode(value);
+          const lines = text.split("\n");
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              try {
+                const data = JSON.parse(line.slice(6));
+                if (data.type === "text") {
+                  fullText += data.content;
+                  setMessages(
+                    (prev) => prev.map(
+                      (m) => m.id === assistantMessageId ? { ...m, content: fullText } : m
+                    )
+                  );
+                } else if (data.type === "tool") {
+                  const toolCall = { name: data.name, args: data.args };
+                  toolCalls.push(toolCall);
+                  if (onToolCall) {
+                    try {
+                      await onToolCall(data.name, data.args);
+                    } catch (e) {
+                      console.error("Tool execution error:", e);
+                    }
+                  }
+                } else if (data.type === "done") {
+                  if (toolCalls.length > 0) {
+                    setMessages(
+                      (prev) => prev.map(
+                        (m) => m.id === assistantMessageId ? { ...m, toolCalls } : m
+                      )
+                    );
+                  }
+                  if (!fullText) {
+                    setMessages(
+                      (prev) => prev.map(
+                        (m) => m.id === assistantMessageId ? { ...m, content: "I've made some changes. Take a look!" } : m
+                      )
+                    );
+                  }
+                } else if (data.type === "error") {
+                  throw new Error(data.message);
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          return;
+        }
+        console.error("Chat error:", error);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantMessageId ? { ...m, content: "Sorry, I encountered an error. Please try again." } : m
+          )
+        );
+      } finally {
+        setIsLoading(false);
+        setStreamingMessageId(null);
+        onStreamEnd?.();
+      }
+    },
+    [apiEndpoint, input, isLoading, messages, onToolCall, onStreamStart, onStreamEnd]
+  );
+  return {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    streamingMessageId,
+    sendMessage,
+    clearMessages,
+    addMessage
+  };
+}
+function useSpeech(options = {}) {
+  const { lang = "en-US", onResult } = options;
+  const [isSupported, setIsSupported] = useState(false);
+  const [isListening, setIsListening] = useState(false);
+  const [ttsEnabled, setTtsEnabled] = useState(false);
+  const recognitionRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const windowWithSpeech = window;
+    const SpeechRecognitionAPI = windowWithSpeech.SpeechRecognition || windowWithSpeech.webkitSpeechRecognition;
+    if (SpeechRecognitionAPI) {
+      setIsSupported(true);
+      recognitionRef.current = new SpeechRecognitionAPI();
+      recognitionRef.current.continuous = false;
+      recognitionRef.current.interimResults = true;
+      recognitionRef.current.lang = lang;
+      recognitionRef.current.onresult = (event) => {
+        const result = event.results[0];
+        const transcript = result[0].transcript;
+        onResult?.(transcript, result.isFinal);
+        if (result.isFinal) {
+          setIsListening(false);
+        }
+      };
+      recognitionRef.current.onend = () => setIsListening(false);
+      recognitionRef.current.onerror = () => setIsListening(false);
+    }
+  }, [lang, onResult]);
+  const startListening = useCallback(() => {
+    if (!recognitionRef.current) return;
+    try {
+      recognitionRef.current.start();
+      setIsListening(true);
+    } catch (e) {
+      console.error("Speech recognition error:", e);
+    }
+  }, []);
+  const stopListening = useCallback(() => {
+    if (!recognitionRef.current) return;
+    recognitionRef.current.stop();
+    setIsListening(false);
+  }, []);
+  const toggleListening = useCallback(() => {
+    if (isListening) {
+      stopListening();
+    } else {
+      startListening();
+    }
+  }, [isListening, startListening, stopListening]);
+  const speak = useCallback(
+    (text) => {
+      if (!ttsEnabled || typeof window === "undefined" || !("speechSynthesis" in window)) {
+        return;
+      }
+      speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.rate = 1;
+      utterance.pitch = 1;
+      const voices = speechSynthesis.getVoices();
+      const preferredVoice = voices.find(
+        (v) => v.name.includes("Google") || v.name.includes("Samantha") || v.name.includes("Alex")
+      );
+      if (preferredVoice) {
+        utterance.voice = preferredVoice;
+      }
+      speechSynthesis.speak(utterance);
+    },
+    [ttsEnabled]
+  );
+  const cancelSpeech = useCallback(() => {
+    if (typeof window !== "undefined" && "speechSynthesis" in window) {
+      speechSynthesis.cancel();
+    }
+  }, []);
+  return {
+    isSupported,
+    isListening,
+    toggleListening,
+    startListening,
+    stopListening,
+    speak,
+    ttsEnabled,
+    setTtsEnabled,
+    cancelSpeech
+  };
+}
+function ChatMessage({ message, isStreaming, isFullscreen }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      className: `flex ${isUser ? "justify-end" : "justify-start"}`,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `px-4 py-3 rounded-2xl text-sm leading-relaxed ${isFullscreen ? "max-w-[70%]" : "max-w-[85%]"} ${isUser ? "pilot-message-user rounded-br-md" : "pilot-message-assistant rounded-bl-md"}`,
+          children: isUser ? message.content : /* @__PURE__ */ jsxs("div", { className: "pilot-prose", children: [
+            /* @__PURE__ */ jsx(ReactMarkdown, { children: message.content }),
+            isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-4 pilot-cursor ml-0.5 animate-pulse" })
+          ] })
+        }
+      )
+    }
+  );
+}
+function ChatInput({
+  value,
+  onChange,
+  onSubmit,
+  disabled = false,
+  placeholder = "Type a message...",
+  isListening = false,
+  onToggleListening,
+  showMic = false
+}) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim() && !disabled) {
+      onSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "p-4 pilot-border-top", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pilot-input-container px-4 py-3 transition-colors", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "bg-transparent flex-1 outline-none text-sm pilot-input",
+        placeholder: isListening ? "Listening..." : placeholder,
+        disabled
+      }
+    ),
+    showMic && onToggleListening && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleListening,
+        disabled,
+        className: `p-2 rounded-xl transition-all ${isListening ? "pilot-mic-active" : "pilot-mic-inactive"}`,
+        children: isListening ? /* @__PURE__ */ jsx(MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: !value.trim() || disabled,
+        className: `p-2 rounded-xl transition-all ${value.trim() && !disabled ? "pilot-send-active" : "pilot-send-inactive"}`,
+        children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
+      }
+    )
+  ] }) });
+}
+function Suggestions({
+  suggestions,
+  onSelect,
+  isVisible = true,
+  isFullscreen = false,
+  suggestionsToShow = 3,
+  rotationInterval = 5e3
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  useEffect(() => {
+    if (!isVisible || suggestions.length <= suggestionsToShow) return;
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % Math.ceil(suggestions.length / suggestionsToShow));
+    }, rotationInterval);
+    return () => clearInterval(interval);
+  }, [isVisible, suggestions.length, suggestionsToShow, rotationInterval]);
+  const currentSuggestions = suggestions.slice(
+    currentIndex * suggestionsToShow,
+    currentIndex * suggestionsToShow + suggestionsToShow
+  );
+  const totalPages = Math.ceil(suggestions.length / suggestionsToShow);
+  if (!isVisible || suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition: { duration: 0.3 },
+      className: "pt-2",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pilot-text-muted", children: [
+            /* @__PURE__ */ jsx(Zap, { className: "w-3 h-3" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider font-medium", children: "Try asking" })
+          ] }),
+          totalPages > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setCurrentIndex(i),
+              className: `h-1.5 rounded-full transition-all ${i === currentIndex ? "pilot-dot-active w-3" : "pilot-dot-inactive w-1.5 hover:opacity-75"}`
+            },
+            i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, x: 20 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -20 },
+            transition: { duration: 0.3 },
+            className: `flex gap-2 ${isFullscreen ? "flex-row flex-wrap" : "flex-col"}`,
+            children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                initial: { opacity: 0, y: 10 },
+                animate: { opacity: 1, y: 0 },
+                transition: { delay: index * 0.1 },
+                onClick: () => onSelect(suggestion.text),
+                className: "pilot-suggestion group flex items-center gap-2 px-3 py-2 rounded-xl text-xs text-left transition-all duration-200",
+                children: [
+                  suggestion.icon && /* @__PURE__ */ jsx("span", { className: "text-base", children: suggestion.icon }),
+                  /* @__PURE__ */ jsx("span", { children: suggestion.text })
+                ]
+              },
+              suggestion.text
+            ))
+          },
+          currentIndex
+        ) })
+      ]
+    }
+  ) });
+}
+function SitePilot({
+  apiEndpoint,
+  theme = {},
+  suggestions = [],
+  features = {},
+  onToolCall,
+  defaultOpen = false,
+  placeholder = "Type a message...",
+  welcomeMessage = "Hi! I'm here to help you navigate and explore. What would you like to know?",
+  className = ""
+}) {
+  const {
+    accent = "amber",
+    position = "bottom-right",
+    borderRadius = 24
+  } = theme;
+  const {
+    speech = true,
+    tts = true,
+    fullscreen = true,
+    suggestions: showSuggestionsFeature = true
+  } = features;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(true);
+  const messagesEndRef = useRef(null);
+  const initialMessages = welcomeMessage ? [
+    {
+      id: "init",
+      role: "assistant",
+      content: welcomeMessage,
+      timestamp: /* @__PURE__ */ new Date()
+    }
+  ] : [];
+  const {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    streamingMessageId,
+    sendMessage
+  } = useChat({
+    apiEndpoint,
+    initialMessages,
+    onToolCall,
+    onStreamStart: () => setShowSuggestions(false)
+  });
+  const {
+    isSupported: speechSupported,
+    isListening,
+    toggleListening,
+    speak,
+    ttsEnabled,
+    setTtsEnabled
+  } = useSpeech({
+    onResult: (transcript, isFinal) => {
+      setInput(transcript);
+    }
+  });
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isOpen]);
+  useEffect(() => {
+    if (!ttsEnabled) return;
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage?.role === "assistant" && lastMessage.id !== streamingMessageId && lastMessage.content) {
+      speak(lastMessage.content);
+    }
+  }, [messages, streamingMessageId, ttsEnabled, speak]);
+  const handleSuggestionSelect = useCallback(
+    (text) => {
+      sendMessage(text);
+    },
+    [sendMessage]
+  );
+  const handleSubmit = useCallback(() => {
+    sendMessage();
+  }, [sendMessage]);
+  const positionClasses = {
+    "bottom-right": "bottom-24 right-6 md:right-8",
+    "bottom-left": "bottom-24 left-6 md:left-8",
+    "top-right": "top-24 right-6 md:right-8",
+    "top-left": "top-24 left-6 md:left-8"
+  };
+  const buttonPositionClasses = {
+    "bottom-right": "bottom-6 right-6 md:right-8",
+    "bottom-left": "bottom-6 left-6 md:left-8",
+    "top-right": "top-6 right-6 md:right-8",
+    "top-left": "top-6 left-6 md:left-8"
+  };
+  const cssVars = {
+    "--pilot-accent": accent,
+    "--pilot-radius": `${borderRadius}px`
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `pilot-container ${className}`, style: cssVars, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 20, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 20, scale: 0.95 },
+        transition: { type: "spring", stiffness: 400, damping: 30 },
+        layout: true,
+        className: `fixed pilot-panel flex flex-col shadow-2xl z-[200] transition-all duration-300 ${isFullscreen ? "inset-4 md:inset-8" : `${positionClasses[position]} w-[calc(100%-48px)] md:w-[400px] h-[520px]`}`,
+        style: { borderRadius: `${borderRadius}px` },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-5 py-4 pilot-border-bottom flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 pilot-avatar rounded-xl flex items-center justify-center shadow-lg", children: /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5 text-white" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "font-semibold pilot-text text-sm", children: "AI Assistant" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 pilot-status-dot rounded-full animate-pulse" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] pilot-text-muted", children: "Ready to help" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              tts && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setTtsEnabled(!ttsEnabled),
+                  className: `p-2 rounded-lg transition-colors ${ttsEnabled ? "pilot-button-active" : "pilot-button-inactive"}`,
+                  title: ttsEnabled ? "Disable voice" : "Enable voice",
+                  children: ttsEnabled ? /* @__PURE__ */ jsx(Volume2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(VolumeX, { className: "w-4 h-4" })
+                }
+              ),
+              fullscreen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsFullscreen(!isFullscreen),
+                  className: "p-2 rounded-lg transition-colors pilot-button-inactive",
+                  title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+                  children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "p-2 hover:bg-white/5 rounded-lg transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 pilot-text-muted" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent", children: [
+            messages.map((msg) => /* @__PURE__ */ jsx(
+              ChatMessage,
+              {
+                message: msg,
+                isStreaming: streamingMessageId === msg.id,
+                isFullscreen
+              },
+              msg.id
+            )),
+            isLoading && !streamingMessageId && /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx("div", { className: "pilot-loading px-4 py-3 rounded-2xl rounded-bl-md", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: [0, 0.15, 0.3].map((delay, i) => /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "w-2 h-2 pilot-loading-dot rounded-full",
+                animate: { y: [0, -4, 0] },
+                transition: { duration: 0.6, repeat: Infinity, delay }
+              },
+              i
+            )) }) }) }),
+            showSuggestionsFeature && suggestions.length > 0 && /* @__PURE__ */ jsx(
+              Suggestions,
+              {
+                suggestions,
+                onSelect: handleSuggestionSelect,
+                isVisible: showSuggestions && !isLoading,
+                isFullscreen
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChatInput,
+            {
+              value: input,
+              onChange: setInput,
+              onSubmit: handleSubmit,
+              disabled: isLoading,
+              placeholder,
+              isListening,
+              onToggleListening: toggleListening,
+              showMic: speech && speechSupported
+            }
+          )
+        ]
+      }
+    ) }),
+    !isOpen && /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        onClick: () => setIsOpen(true),
+        initial: { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        whileHover: { scale: 1.05 },
+        whileTap: { scale: 0.95 },
+        className: `fixed ${buttonPositionClasses[position]} flex items-center gap-2 pilot-toggle-button px-5 py-3.5 rounded-2xl font-medium shadow-xl transition-shadow z-[200]`,
+        children: [
+          /* @__PURE__ */ jsx(MessageCircle, { className: "w-5 h-5" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm hidden sm:inline", children: "Ask AI" }),
+          /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-white/80 rounded-full animate-pulse" })
+        ]
+      }
+    )
+  ] });
+}
+var SitePilot_default = SitePilot;
+
+export { ChatInput, ChatMessage, SitePilot, Suggestions, SitePilot_default as default, useChat, useSpeech };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map