@nickle/chatbot-react 0.1.0

package/src/chatbot/components/message-markdown.tsx

@@ -0,0 +1,17 @@
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+
+interface MessageMarkdownProps {
+  content: string;
+}
+
+export function MessageMarkdown({ content }: MessageMarkdownProps) {
+  return (
+    <div className="cb-markdown cb-message-text cb-text-base cb-leading-6">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSanitize]}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/chatbot/context/chatbot-context.tsx

@@ -0,0 +1,580 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type {
+  ChatMessage,
+  ChatbotContextValue,
+  ChatbotProviderProps,
+  PageConfigOverrides,
+} from "../types";
+import { DEFAULT_AGENT_NAME, DEFAULT_ASSISTANT_NOTE, DEFAULT_ICONS, DEFAULT_THEME } from "../lib/defaults";
+import { withDefaultAdapter } from "../lib/adapter";
+import { readAssistantResponse } from "../lib/transport";
+import { createId } from "../lib/id";
+import { getOrCreateSessionId, historyKey, resetSessionId } from "../lib/session";
+import { resolveThemeTokens, toThemeCssVars } from "../lib/theme";
+
+const ChatbotContext = createContext<ChatbotContextValue | undefined>(undefined);
+const WELCOME_DELAY_MS = 1500;
+const DEFAULT_LOCALE = "en";
+const LOCALE_COPY: Record<
+  string,
+  {
+    agentName: string;
+    assistantNote: string;
+    welcomeMessage: string;
+    disclaimer: string;
+  }
+> = {
+  en: {
+    agentName: DEFAULT_AGENT_NAME,
+    assistantNote: DEFAULT_ASSISTANT_NOTE,
+    welcomeMessage: "Hi, how can I help you?",
+    disclaimer: "AI can make mistakes.",
+  },
+  de: {
+    agentName: "Assistent",
+    assistantNote: "Wie kann ich helfen?",
+    welcomeMessage: "Hallo, wie kann ich Ihnen helfen?",
+    disclaimer: "KI kann Fehler machen.",
+  },
+  es: {
+    agentName: "Asistente",
+    assistantNote: "Como puedo ayudarte?",
+    welcomeMessage: "Hola, como puedo ayudarte?",
+    disclaimer: "La IA puede cometer errores.",
+  },
+  fr: {
+    agentName: "Assistant",
+    assistantNote: "Comment puis-je vous aider ?",
+    welcomeMessage: "Bonjour, comment puis-je vous aider ?",
+    disclaimer: "L'IA peut faire des erreurs.",
+  },
+  it: {
+    agentName: "Assistente",
+    assistantNote: "Come posso aiutarti?",
+    welcomeMessage: "Ciao, come posso aiutarti?",
+    disclaimer: "L'IA puo commettere errori.",
+  },
+  nl: {
+    agentName: "Assistent",
+    assistantNote: "Hoe kan ik je helpen?",
+    welcomeMessage: "Hallo, hoe kan ik je helpen?",
+    disclaimer: "AI kan fouten maken.",
+  },
+  pt: {
+    agentName: "Assistente",
+    assistantNote: "Como posso ajudar?",
+    welcomeMessage: "Ola, como posso ajudar?",
+    disclaimer: "A IA pode cometer erros.",
+  },
+  pl: {
+    agentName: "Asystent",
+    assistantNote: "Jak moge pomoc?",
+    welcomeMessage: "Czesc, jak moge pomoc?",
+    disclaimer: "AI moze popelniac bledy.",
+  },
+  tr: {
+    agentName: "Asistan",
+    assistantNote: "Nasil yardimci olabilirim?",
+    welcomeMessage: "Merhaba, nasil yardimci olabilirim?",
+    disclaimer: "Yapay zeka hata yapabilir.",
+  },
+  sv: {
+    agentName: "Assistent",
+    assistantNote: "Hur kan jag hjalpa dig?",
+    welcomeMessage: "Hej, hur kan jag hjalpa dig?",
+    disclaimer: "AI kan gora misstag.",
+  },
+  da: {
+    agentName: "Assistent",
+    assistantNote: "Hvordan kan jeg hjaelpe dig?",
+    welcomeMessage: "Hej, hvordan kan jeg hjaelpe dig?",
+    disclaimer: "AI kan lave fejl.",
+  },
+  no: {
+    agentName: "Assistent",
+    assistantNote: "Hvordan kan jeg hjelpe deg?",
+    welcomeMessage: "Hei, hvordan kan jeg hjelpe deg?",
+    disclaimer: "AI kan gjøre feil.",
+  },
+  fi: {
+    agentName: "Avustaja",
+    assistantNote: "Miten voin auttaa?",
+    welcomeMessage: "Hei, miten voin auttaa?",
+    disclaimer: "Tekoaly voi tehda virheita.",
+  },
+};
+
+function normalizeLocale(input: string | undefined): string {
+  if (!input) {
+    return DEFAULT_LOCALE;
+  }
+
+  return input.trim().toLowerCase().split("-")[0] || DEFAULT_LOCALE;
+}
+
+function getBrowserLocale() {
+  if (typeof navigator === "undefined") {
+    return DEFAULT_LOCALE;
+  }
+
+  return navigator.language || DEFAULT_LOCALE;
+}
+
+function getLocaleCopy(locale: string) {
+  return LOCALE_COPY[locale] ?? LOCALE_COPY[DEFAULT_LOCALE];
+}
+
+function readHistory(storage: Storage | undefined, sessionId: string): ChatMessage[] {
+  if (!storage) {
+    return [];
+  }
+
+  const raw = storage.getItem(historyKey(sessionId));
+  if (!raw) {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as ChatMessage[];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+export function ChatbotProvider({
+  children,
+  webhookUrl,
+  locale,
+  agentName,
+  assistantNote,
+  enableUploads = false,
+  streamingMode = "auto",
+  headers,
+  theme,
+  icons,
+  adapter,
+  events,
+  initialOpen = false,
+  position = "bottom-right",
+  classNames,
+}: ChatbotProviderProps) {
+  const [isHydrated, setIsHydrated] = useState(false);
+  const [sessionId, setSessionId] = useState("cb:pending");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const [isAwaiting, setIsAwaiting] = useState(false);
+  const [pageConfigs, setPageConfigs] = useState<Array<{ id: string; config: PageConfigOverrides }>>([]);
+  const messagesRef = useRef<ChatMessage[]>([]);
+
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+
+  const activePageConfig = pageConfigs.length > 0 ? pageConfigs[pageConfigs.length - 1].config : undefined;
+  const mergedTheme = useMemo(
+    () => ({
+      ...(theme ?? {}),
+      ...(activePageConfig?.theme ?? {}),
+    }),
+    [activePageConfig?.theme, theme],
+  );
+
+  const resolvedTheme = useMemo(() => {
+    if (!isHydrated) {
+      return { ...DEFAULT_THEME, ...(mergedTheme ?? {}) };
+    }
+    return resolveThemeTokens(mergedTheme);
+  }, [isHydrated, mergedTheme]);
+  const themeVars = useMemo(() => toThemeCssVars(resolvedTheme), [resolvedTheme]);
+  const mergedIcons = useMemo(() => {
+    const merged = { ...DEFAULT_ICONS, ...(icons ?? {}) };
+    merged.launcherClosed = icons?.launcherClosed ?? icons?.launcher ?? DEFAULT_ICONS.launcherClosed;
+    merged.launcherOpen = icons?.launcherOpen ?? DEFAULT_ICONS.launcherOpen;
+    return merged;
+  }, [icons]);
+
+  const resolvedLocale = useMemo(() => normalizeLocale(locale ?? getBrowserLocale()), [locale]);
+  const localeCopy = useMemo(() => getLocaleCopy(resolvedLocale), [resolvedLocale]);
+  const welcomeAssistantMessage = localeCopy.welcomeMessage;
+  const disclaimerText = localeCopy.disclaimer;
+  const resolvedAgentName = activePageConfig?.agentName ?? agentName ?? localeCopy.agentName;
+  const resolvedAssistantNote = activePageConfig?.assistantNote ?? assistantNote ?? localeCopy.assistantNote;
+  const uploadEnabled = activePageConfig?.enableUploads ?? enableUploads;
+  const widgetEnabled = activePageConfig?.enabled ?? true;
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const storage = window.sessionStorage;
+    const nextSessionId = getOrCreateSessionId(storage);
+    setSessionId(nextSessionId);
+    setMessages(readHistory(storage, nextSessionId));
+    setIsHydrated(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isHydrated || typeof window === "undefined") {
+      return;
+    }
+
+    const storage = window.sessionStorage;
+    storage.setItem(historyKey(sessionId), JSON.stringify(messages));
+  }, [isHydrated, messages, sessionId]);
+
+  useEffect(() => {
+    if (!isHydrated || !isOpen || !widgetEnabled || typeof window === "undefined") {
+      return;
+    }
+
+    let timeoutId: number | undefined;
+
+    setMessages((current) => {
+      if (current.length > 0) {
+        return current;
+      }
+
+      const welcomeId = createId("msg");
+      timeoutId = window.setTimeout(() => {
+        setMessages((next) =>
+          next.map((message): ChatMessage =>
+            message.id === welcomeId
+              ? {
+                  ...message,
+                  content: welcomeAssistantMessage,
+                  status: "complete",
+                }
+              : message,
+          ),
+        );
+      }, WELCOME_DELAY_MS);
+
+      return [
+        ...current,
+        {
+          id: welcomeId,
+          role: "assistant",
+          content: "",
+          createdAt: new Date().toISOString(),
+          status: "streaming",
+        },
+      ];
+    });
+
+    return () => {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [isHydrated, isOpen, welcomeAssistantMessage, widgetEnabled]);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+    events?.onOpen?.();
+  }, [events]);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    events?.onClose?.();
+  }, [events]);
+
+  const toggle = useCallback(() => {
+    setIsOpen((current) => {
+      const next = !current;
+      if (next) {
+        events?.onOpen?.();
+      } else {
+        events?.onClose?.();
+      }
+      return next;
+    });
+  }, [events]);
+
+  const clearConversation = useCallback(() => {
+    setMessages([]);
+    if (typeof window !== "undefined") {
+      const storage = window.sessionStorage;
+      storage.removeItem(historyKey(sessionId));
+    }
+  }, [sessionId]);
+
+  const resetSession = useCallback(() => {
+    const storage = typeof window !== "undefined" ? window.sessionStorage : undefined;
+    const next = resetSessionId(storage);
+    setSessionId(next);
+    setMessages([]);
+  }, []);
+
+  const registerPageConfig = useCallback((id: string, config: PageConfigOverrides) => {
+    setPageConfigs((current) => {
+      const filtered = current.filter((entry) => entry.id !== id);
+      return [...filtered, { id, config }];
+    });
+  }, []);
+
+  const unregisterPageConfig = useCallback((id: string) => {
+    setPageConfigs((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+
+  const sendMessage = useCallback<ChatbotContextValue["sendMessage"]>(
+    async ({ text, files = [] }) => {
+      const trimmed = text.trim();
+      if (!trimmed && files.length === 0) {
+        return;
+      }
+
+      const now = new Date().toISOString();
+      const attachmentDtos = files.map((file) => ({
+        id: createId("att"),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        file,
+      }));
+      if (attachmentDtos.length > 0) {
+        events?.onAttachmentAdded?.(attachmentDtos);
+      }
+
+      const userMessage: ChatMessage = {
+        id: createId("msg"),
+        role: "user",
+        content: trimmed,
+        createdAt: now,
+        status: "complete",
+        attachments: attachmentDtos,
+      };
+      const ensureWelcomeMessage = (input: ChatMessage[]): ChatMessage[] => {
+        if (input.some((message) => message.role === "assistant" && message.content === welcomeAssistantMessage)) {
+          return input;
+        }
+
+        const firstStreamingAssistantIndex = input.findIndex(
+          (message) => message.role === "assistant" && message.status === "streaming" && !message.content,
+        );
+
+        if (firstStreamingAssistantIndex >= 0) {
+          return input.map((message, index): ChatMessage =>
+            index === firstStreamingAssistantIndex
+              ? {
+                  ...message,
+                  content: welcomeAssistantMessage,
+                  status: "complete",
+                }
+              : message,
+          );
+        }
+
+        if (input.some((message) => message.role === "assistant")) {
+          return input;
+        }
+
+        const welcomeMessage: ChatMessage = {
+          id: createId("msg"),
+          role: "assistant",
+          content: welcomeAssistantMessage,
+          createdAt: now,
+          status: "complete",
+        };
+        return [...input, welcomeMessage];
+      };
+
+      const normalizedHistory = ensureWelcomeMessage(messagesRef.current);
+      const requestHistory = [...normalizedHistory, userMessage].map((message) => ({
+        id: message.id,
+        role: message.role,
+        content: message.content,
+        createdAt: message.createdAt,
+      }));
+
+      setMessages((current) => [...ensureWelcomeMessage(current), userMessage]);
+      events?.onMessageSent?.(userMessage);
+
+      const assistantId = createId("msg");
+      setMessages((current) => [
+        ...current,
+        {
+          id: assistantId,
+          role: "assistant",
+          content: "",
+          createdAt: new Date().toISOString(),
+          status: "streaming",
+        },
+      ]);
+
+      setIsAwaiting(true);
+      const resolvedAdapter = withDefaultAdapter(adapter);
+
+      try {
+        const metadata = {
+          sessionId,
+          pageUrl: typeof window !== "undefined" ? window.location.href : "",
+          timestamp: new Date().toISOString(),
+          agentName: resolvedAgentName,
+          locale: resolvedLocale,
+          history: requestHistory,
+        };
+
+        const requestInit = resolvedAdapter.buildRequest({
+          webhookUrl,
+          message: trimmed,
+          sessionId,
+          agentName: resolvedAgentName,
+          files: uploadEnabled ? files : [],
+          metadata,
+          headers,
+        });
+
+        const url = requestInit.url ?? webhookUrl;
+        const response = await fetch(url, requestInit);
+
+        let streamedContent = "";
+        const responseText = await readAssistantResponse({
+          response,
+          adapter: resolvedAdapter,
+          streamingMode,
+          onDelta: (delta) => {
+            streamedContent += delta;
+            setMessages((current) =>
+              current.map((message): ChatMessage =>
+                message.id === assistantId
+                  ? {
+                      ...message,
+                      content: `${message.content}${delta}`,
+                      status: "streaming",
+                    }
+                  : message,
+              ),
+            );
+          },
+          onChunk: (chunk) => {
+            events?.onChunkReceived?.(chunk);
+          },
+          onRecoverableError: (error) => {
+            events?.onError?.(error);
+          },
+        });
+
+        setMessages((current) => {
+          const next: ChatMessage[] = current.map((message): ChatMessage => {
+            if (message.id !== assistantId) {
+              return message;
+            }
+
+            const hasStreamed = streamedContent.length > 0;
+            const content = hasStreamed ? message.content : responseText;
+            return {
+              ...message,
+              content,
+              status: "complete",
+            };
+          });
+
+          const completeMessage = next.find((message) => message.id === assistantId);
+          if (completeMessage) {
+            events?.onResponseComplete?.(completeMessage);
+          }
+
+          return next;
+        });
+      } catch (error) {
+        const typedError = error instanceof Error ? error : new Error(String(error));
+        events?.onError?.(typedError);
+
+        setMessages((current) =>
+          current.map((message): ChatMessage =>
+            message.id === assistantId
+              ? {
+                  ...message,
+                  content: message.content || "Sorry, I ran into an issue while generating a response.",
+                  status: "error",
+                }
+              : message,
+          ),
+        );
+      } finally {
+        setIsAwaiting(false);
+      }
+    },
+    [
+      adapter,
+      events,
+      headers,
+      resolvedAgentName,
+      resolvedLocale,
+      sessionId,
+      streamingMode,
+      uploadEnabled,
+      welcomeAssistantMessage,
+      webhookUrl,
+    ],
+  );
+
+  const value = useMemo<ChatbotContextValue>(
+    () => ({
+      isOpen,
+      isAwaiting,
+      messages,
+      sessionId,
+      uploadEnabled,
+      agentName: resolvedAgentName,
+      assistantNote: resolvedAssistantNote,
+      disclaimerText,
+      position,
+      themeVars,
+      icons: mergedIcons,
+      classNames: classNames ?? {},
+      open,
+      close,
+      toggle,
+      sendMessage,
+      clearConversation,
+      registerPageConfig,
+      unregisterPageConfig,
+      widgetEnabled,
+      resetSession,
+    }),
+    [
+      classNames,
+      clearConversation,
+      close,
+      disclaimerText,
+      isAwaiting,
+      isOpen,
+      mergedIcons,
+      messages,
+      open,
+      position,
+      registerPageConfig,
+      resolvedAgentName,
+      resolvedAssistantNote,
+      sendMessage,
+      sessionId,
+      themeVars,
+      toggle,
+      unregisterPageConfig,
+      uploadEnabled,
+      widgetEnabled,
+      resetSession,
+    ],
+  );
+
+  return <ChatbotContext.Provider value={value}>{children}</ChatbotContext.Provider>;
+}
+
+export function useChatbotContext() {
+  const context = useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbotContext must be used within ChatbotProvider");
+  }
+  return context;
+}

package/src/chatbot/hooks/use-chatbot-session.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useChatbotContext } from "../context/chatbot-context";
+
+export function useChatbotSession() {
+  const { sessionId, resetSession } = useChatbotContext();
+
+  return useMemo(
+    () => ({
+      sessionId,
+      resetSession,
+    }),
+    [resetSession, sessionId],
+  );
+}

package/src/chatbot/hooks/use-chatbot.ts

@@ -0,0 +1,5 @@
+import { useChatbotContext } from "../context/chatbot-context";
+
+export function useChatbot() {
+  return useChatbotContext();
+}

package/src/chatbot/index.ts

@@ -0,0 +1,22 @@
+export { ChatbotProvider } from "./context/chatbot-context";
+export { ChatbotWidget } from "./components/chatbot-widget";
+export { ChatbotPageConfig } from "./components/chatbot-page-config";
+
+export { useChatbot } from "./hooks/use-chatbot";
+export { useChatbotSession } from "./hooks/use-chatbot-session";
+
+export type {
+  ChatMessage,
+  ChatAttachment,
+  ChatbotAdapter,
+  ChatbotAdapterRequestInput,
+  ChatbotClassNames,
+  ChatbotContextValue,
+  ChatbotEventHandlers,
+  ChatbotIcons,
+  ChatbotProviderProps,
+  ChatbotThemeTokens,
+  NormalizedAssistantChunk,
+  PageConfigOverrides,
+  SendMessageInput,
+} from "./types";