@nickle/chatbot-react 0.1.0

package/src/chatbot/lib/adapter.ts

@@ -0,0 +1,127 @@
+import type {
+  ChatbotAdapter,
+  ChatbotAdapterRequestInput,
+  NormalizedAssistantChunk,
+} from "../types";
+
+function extractFromRecord(record: Record<string, unknown>): string | undefined {
+  const keys = ["message", "text", "output", "response", "answer", "content"];
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value;
+    }
+  }
+  return undefined;
+}
+
+export function defaultBuildRequest(input: ChatbotAdapterRequestInput): RequestInit & { url?: string } {
+  const { files, metadata, message, headers, sessionId } = input;
+
+  if (files.length > 0) {
+    const formData = new FormData();
+    formData.set("message", message);
+    formData.set("sessionId", sessionId);
+    formData.set("metadata", JSON.stringify(metadata));
+
+    files.forEach((file) => {
+      formData.append("files[]", file);
+    });
+
+    return {
+      method: "POST",
+      headers,
+      body: formData,
+    };
+  }
+
+  return {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    body: JSON.stringify({
+      message,
+      sessionId,
+      metadata,
+    }),
+  };
+}
+
+export function defaultParseJsonResponse(raw: unknown): NormalizedAssistantChunk {
+  if (typeof raw === "string") {
+    return { message: raw };
+  }
+
+  if (Array.isArray(raw)) {
+    const merged = raw
+      .map((item) => {
+        if (typeof item === "string") {
+          return item;
+        }
+
+        if (item && typeof item === "object") {
+          return extractFromRecord(item as Record<string, unknown>);
+        }
+
+        return undefined;
+      })
+      .filter(Boolean)
+      .join("\n");
+
+    return { message: merged };
+  }
+
+  if (raw && typeof raw === "object") {
+    const record = raw as Record<string, unknown>;
+
+    if (record.delta && typeof record.delta === "string") {
+      return {
+        delta: record.delta,
+        done: Boolean(record.done),
+      };
+    }
+
+    const text = extractFromRecord(record);
+    if (text) {
+      return { message: text, done: true };
+    }
+
+    if (record.data && typeof record.data === "object") {
+      const nested = extractFromRecord(record.data as Record<string, unknown>);
+      if (nested) {
+        return { message: nested, done: true };
+      }
+    }
+  }
+
+  return { message: "", done: true };
+}
+
+export function defaultParseStreamChunk(chunk: string): NormalizedAssistantChunk {
+  const trimmed = chunk.trim();
+
+  if (!trimmed) {
+    return {};
+  }
+
+  if (trimmed === "[DONE]") {
+    return { done: true };
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    return defaultParseJsonResponse(parsed);
+  } catch {
+    return { delta: trimmed };
+  }
+}
+
+export function withDefaultAdapter(adapter?: ChatbotAdapter): Required<ChatbotAdapter> {
+  return {
+    buildRequest: adapter?.buildRequest ?? defaultBuildRequest,
+    parseJsonResponse: adapter?.parseJsonResponse ?? defaultParseJsonResponse,
+    parseStreamChunk: adapter?.parseStreamChunk ?? defaultParseStreamChunk,
+  };
+}

package/src/chatbot/lib/defaults.ts

@@ -0,0 +1,48 @@
+import {
+  Bot,
+  ChevronDown,
+  Download,
+  Ellipsis,
+  Maximize2,
+  MessageSquare,
+  Paperclip,
+  SendHorizontal,
+  X,
+} from "lucide-react";
+import type { ChatbotIcons, ChatbotThemeTokens } from "../types";
+
+export const DEFAULT_THEME: ChatbotThemeTokens = {
+  primary: "#ffffff",
+  primaryForeground: "#111111",
+  background: "#0b0b0b",
+  surface: "#111111",
+  surfaceForeground: "#f5f5f5",
+  muted: "#262626",
+  mutedForeground: "#a3a3a3",
+  border: "#2f2f2f",
+  ring: "#737373",
+  userBubble: "#ffffff",
+  userText: "#111111",
+  assistantBubble: "#2a2a2a",
+  assistantText: "#f5f5f5",
+  radius: "14px",
+  fontFamily: "Inter, var(--font-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif",
+  shadowBubble: "0 18px 40px -16px rgba(0, 0, 0, 0.7)",
+  shadowPanel: "0 34px 80px -36px rgba(0, 0, 0, 0.85)",
+};
+
+export const DEFAULT_ICONS: ChatbotIcons = {
+  launcher: MessageSquare,
+  launcherClosed: MessageSquare,
+  launcherOpen: ChevronDown,
+  close: X,
+  send: SendHorizontal,
+  attach: Paperclip,
+  bot: Bot,
+  menu: Ellipsis,
+  expand: Maximize2,
+  download: Download,
+};
+
+export const DEFAULT_AGENT_NAME = "Assistant";
+export const DEFAULT_ASSISTANT_NOTE = "Here to help";

package/src/chatbot/lib/id.ts

@@ -0,0 +1,7 @@
+export function createId(prefix = "cb") {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return `${prefix}-${crypto.randomUUID()}`;
+  }
+
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}

package/src/chatbot/lib/session.ts

@@ -0,0 +1,36 @@
+const SESSION_KEY = "cb:session-id";
+
+function createSessionId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+
+  return `cb-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function getOrCreateSessionId(storage: Storage | undefined): string {
+  if (!storage) {
+    return createSessionId();
+  }
+
+  const existing = storage.getItem(SESSION_KEY);
+  if (existing) {
+    return existing;
+  }
+
+  const created = createSessionId();
+  storage.setItem(SESSION_KEY, created);
+  return created;
+}
+
+export function resetSessionId(storage: Storage | undefined): string {
+  const next = createSessionId();
+  if (storage) {
+    storage.setItem(SESSION_KEY, next);
+  }
+  return next;
+}
+
+export function historyKey(sessionId: string) {
+  return `cb:history:${sessionId}`;
+}

package/src/chatbot/lib/theme.ts

@@ -0,0 +1,76 @@
+import { DEFAULT_THEME } from "./defaults";
+import type { ChatbotThemeTokens } from "../types";
+
+const HOST_TOKEN_MAP: Record<keyof ChatbotThemeTokens, string[]> = {
+  primary: ["--color-primary", "--primary"],
+  primaryForeground: ["--color-primary-foreground", "--primary-foreground"],
+  background: ["--cb-background", "--color-background", "--color-bg", "--background"],
+  surface: ["--cb-surface", "--color-surface", "--color-card", "--card"],
+  surfaceForeground: ["--cb-surface-foreground", "--color-text", "--color-foreground", "--foreground"],
+  muted: ["--color-muted", "--muted"],
+  mutedForeground: ["--color-muted-foreground", "--muted-foreground"],
+  border: ["--color-border", "--border"],
+  ring: ["--color-ring", "--ring"],
+  userBubble: ["--cb-user-bubble"],
+  userText: ["--cb-user-text"],
+  assistantBubble: ["--cb-assistant-bubble", "--color-muted", "--muted"],
+  assistantText: ["--cb-assistant-text", "--color-text", "--foreground"],
+  radius: ["--radius-md", "--radius", "--rounded"],
+  fontFamily: ["--font-sans", "--font-family"],
+  shadowBubble: ["--shadow-bubble"],
+  shadowPanel: ["--shadow-panel"],
+};
+
+function readRootVar(name: string): string | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+
+  const styles = getComputedStyle(document.documentElement);
+  const value = styles.getPropertyValue(name).trim();
+  return value || undefined;
+}
+
+export function resolveThemeTokens(explicit?: Partial<ChatbotThemeTokens>): ChatbotThemeTokens {
+  const resolved = { ...DEFAULT_THEME };
+
+  (Object.keys(DEFAULT_THEME) as Array<keyof ChatbotThemeTokens>).forEach((key) => {
+    if (explicit?.[key]) {
+      resolved[key] = explicit[key] as string;
+      return;
+    }
+
+    const hostCandidates = HOST_TOKEN_MAP[key] ?? [];
+    for (const candidate of hostCandidates) {
+      const value = readRootVar(candidate);
+      if (value) {
+        resolved[key] = value;
+        break;
+      }
+    }
+  });
+
+  return resolved;
+}
+
+export function toThemeCssVars(tokens: ChatbotThemeTokens): Record<string, string> {
+  return {
+    "--cb-primary": tokens.primary,
+    "--cb-primary-foreground": tokens.primaryForeground,
+    "--cb-background": tokens.background,
+    "--cb-surface": tokens.surface,
+    "--cb-surface-foreground": tokens.surfaceForeground,
+    "--cb-muted": tokens.muted,
+    "--cb-muted-foreground": tokens.mutedForeground,
+    "--cb-border": tokens.border,
+    "--cb-ring": tokens.ring,
+    "--cb-user-bubble": tokens.userBubble,
+    "--cb-user-text": tokens.userText,
+    "--cb-assistant-bubble": tokens.assistantBubble,
+    "--cb-assistant-text": tokens.assistantText,
+    "--cb-radius": tokens.radius,
+    "--cb-font-family": tokens.fontFamily,
+    "--cb-shadow-bubble": tokens.shadowBubble,
+    "--cb-shadow-panel": tokens.shadowPanel,
+  };
+}

package/src/chatbot/lib/transport.ts

@@ -0,0 +1,211 @@
+import type { ChatbotAdapter } from "../types";
+
+interface ResponseInput {
+  response: Response;
+  adapter: Required<ChatbotAdapter>;
+  streamingMode: "auto" | "on" | "off";
+  onDelta: (chunk: string) => void;
+  onChunk: (chunk: string) => void;
+  onRecoverableError: (error: Error) => void;
+}
+
+function looksLikeStream(contentType: string | null) {
+  if (!contentType) {
+    return false;
+  }
+
+  const normalized = contentType.toLowerCase();
+  return (
+    normalized.includes("text/event-stream") ||
+    normalized.includes("application/x-ndjson") ||
+    normalized.includes("application/stream")
+  );
+}
+
+function parseAndAppend(
+  rawChunk: string,
+  adapter: Required<ChatbotAdapter>,
+  onChunk: (chunk: string) => void,
+): { text: string; done: boolean } {
+  const parsed = adapter.parseStreamChunk(rawChunk);
+  onChunk(rawChunk);
+
+  if (parsed.done && parsed.message) {
+    return { text: parsed.message, done: true };
+  }
+
+  if (parsed.delta) {
+    return { text: parsed.delta, done: Boolean(parsed.done) };
+  }
+
+  if (parsed.message) {
+    return { text: parsed.message, done: Boolean(parsed.done) };
+  }
+
+  return { text: "", done: Boolean(parsed.done) };
+}
+
+async function consumeEventStream(
+  response: Response,
+  adapter: Required<ChatbotAdapter>,
+  onDelta: (chunk: string) => void,
+  onChunk: (chunk: string) => void,
+): Promise<string> {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    return "";
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let fullText = "";
+  let done = false;
+
+  while (!done) {
+    const result = await reader.read();
+    if (result.done) {
+      break;
+    }
+
+    buffer += decoder.decode(result.value, { stream: true });
+
+    while (buffer.includes("\n\n")) {
+      const index = buffer.indexOf("\n\n");
+      const block = buffer.slice(0, index);
+      buffer = buffer.slice(index + 2);
+
+      const lines = block.split("\n").filter((line) => line.startsWith("data:"));
+      for (const line of lines) {
+        const data = line.slice(5).trim();
+        const parsed = parseAndAppend(data, adapter, onChunk);
+        if (parsed.text) {
+          fullText += parsed.text;
+          onDelta(parsed.text);
+        }
+        if (parsed.done) {
+          done = true;
+          break;
+        }
+      }
+    }
+  }
+
+  if (buffer.trim()) {
+    const fallback = parseAndAppend(buffer.trim(), adapter, onChunk);
+    if (fallback.text) {
+      fullText += fallback.text;
+      onDelta(fallback.text);
+    }
+  }
+
+  return fullText;
+}
+
+async function consumeLineStream(
+  response: Response,
+  adapter: Required<ChatbotAdapter>,
+  onDelta: (chunk: string) => void,
+  onChunk: (chunk: string) => void,
+): Promise<string> {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    return "";
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let fullText = "";
+  let done = false;
+
+  while (!done) {
+    const result = await reader.read();
+    if (result.done) {
+      break;
+    }
+
+    buffer += decoder.decode(result.value, { stream: true });
+
+    while (buffer.includes("\n")) {
+      const index = buffer.indexOf("\n");
+      const line = buffer.slice(0, index).trim();
+      buffer = buffer.slice(index + 1);
+
+      if (!line) {
+        continue;
+      }
+
+      const parsed = parseAndAppend(line, adapter, onChunk);
+      if (parsed.text) {
+        fullText += parsed.text;
+        onDelta(parsed.text);
+      }
+      if (parsed.done) {
+        done = true;
+        break;
+      }
+    }
+  }
+
+  if (buffer.trim()) {
+    const parsed = parseAndAppend(buffer.trim(), adapter, onChunk);
+    if (parsed.text) {
+      fullText += parsed.text;
+      onDelta(parsed.text);
+    }
+  }
+
+  return fullText;
+}
+
+async function parseNonStreaming(response: Response, adapter: Required<ChatbotAdapter>) {
+  const contentType = response.headers.get("content-type") || "";
+
+  if (contentType.includes("application/json")) {
+    const payload = (await response.json()) as unknown;
+    const parsed = adapter.parseJsonResponse(payload);
+    return parsed.message ?? parsed.delta ?? "";
+  }
+
+  const rawText = await response.text();
+  try {
+    const parsedPayload = JSON.parse(rawText) as unknown;
+    const parsed = adapter.parseJsonResponse(parsedPayload);
+    return parsed.message ?? parsed.delta ?? rawText;
+  } catch {
+    const parsed = adapter.parseJsonResponse(rawText);
+    return parsed.message ?? rawText;
+  }
+}
+
+export async function readAssistantResponse({
+  response,
+  adapter,
+  streamingMode,
+  onDelta,
+  onChunk,
+  onRecoverableError,
+}: ResponseInput): Promise<string> {
+  if (!response.ok) {
+    const body = await response.text();
+    throw new Error(`Webhook request failed (${response.status}): ${body}`);
+  }
+
+  const contentType = response.headers.get("content-type");
+  const streamEligible = streamingMode !== "off" && Boolean(response.body);
+  const shouldStream = streamEligible && (streamingMode === "on" || looksLikeStream(contentType));
+
+  if (!shouldStream) {
+    return parseNonStreaming(response, adapter);
+  }
+
+  try {
+    if ((contentType || "").toLowerCase().includes("text/event-stream")) {
+      return await consumeEventStream(response, adapter, onDelta, onChunk);
+    }
+
+    return await consumeLineStream(response, adapter, onDelta, onChunk);
+  } catch (error) {
+    onRecoverableError(error as Error);
+    return "";
+  }
+}

package/src/chatbot/types/index.ts

@@ -0,0 +1,165 @@
+import type { ComponentType, ReactNode } from "react";
+
+export type ChatRole = "user" | "assistant" | "system";
+export type MessageStatus = "pending" | "streaming" | "complete" | "error";
+
+export interface ChatAttachment {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+  file?: File;
+}
+
+export interface ChatMessage {
+  id: string;
+  role: ChatRole;
+  content: string;
+  createdAt: string;
+  status?: MessageStatus;
+  attachments?: ChatAttachment[];
+}
+
+export interface NormalizedAssistantChunk {
+  delta?: string;
+  done?: boolean;
+  message?: string;
+}
+
+export interface ChatbotAdapterRequestInput {
+  webhookUrl: string;
+  message: string;
+  sessionId: string;
+  agentName: string;
+  files: File[];
+  metadata: Record<string, unknown>;
+  headers?: Record<string, string>;
+}
+
+export interface ChatbotAdapter {
+  buildRequest?: (input: ChatbotAdapterRequestInput) => RequestInit & { url?: string };
+  parseJsonResponse?: (raw: unknown) => NormalizedAssistantChunk;
+  parseStreamChunk?: (chunk: string) => NormalizedAssistantChunk;
+}
+
+export interface ChatbotThemeTokens {
+  primary: string;
+  primaryForeground: string;
+  background: string;
+  surface: string;
+  surfaceForeground: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  ring: string;
+  userBubble: string;
+  userText: string;
+  assistantBubble: string;
+  assistantText: string;
+  radius: string;
+  fontFamily: string;
+  shadowBubble: string;
+  shadowPanel: string;
+}
+
+export interface ChatbotIconProps {
+  size?: string | number;
+  className?: string;
+  strokeWidth?: string | number;
+}
+
+export interface ChatbotIcons {
+  /**
+   * Legacy alias. If provided, it maps to launcherClosed when launcherClosed is not set.
+   */
+  launcher?: ComponentType<ChatbotIconProps>;
+  launcherClosed: ComponentType<ChatbotIconProps>;
+  launcherOpen: ComponentType<ChatbotIconProps>;
+  close: ComponentType<ChatbotIconProps>;
+  send: ComponentType<ChatbotIconProps>;
+  attach: ComponentType<ChatbotIconProps>;
+  bot: ComponentType<ChatbotIconProps>;
+  menu: ComponentType<ChatbotIconProps>;
+  expand: ComponentType<ChatbotIconProps>;
+  download: ComponentType<ChatbotIconProps>;
+}
+
+export interface ChatbotEventHandlers {
+  onOpen: () => void;
+  onClose: () => void;
+  onMessageSent: (message: ChatMessage) => void;
+  onChunkReceived: (chunk: string) => void;
+  onResponseComplete: (message: ChatMessage) => void;
+  onError: (error: Error) => void;
+  onAttachmentAdded: (attachments: ChatAttachment[]) => void;
+}
+
+export interface ChatbotClassNames {
+  root: string;
+  bubble: string;
+  panel: string;
+  header: string;
+  headerMeta: string;
+  menu: string;
+  menuItem: string;
+  body: string;
+  footer: string;
+  composer: string;
+  input: string;
+  sendButton: string;
+}
+
+export interface PageConfigOverrides {
+  enabled?: boolean;
+  agentName?: string;
+  assistantNote?: string;
+  enableUploads?: boolean;
+  theme?: Partial<ChatbotThemeTokens>;
+}
+
+export interface ChatbotProviderProps {
+  webhookUrl: string;
+  children: ReactNode;
+  locale?: string;
+  agentName?: string;
+  assistantNote?: string;
+  enableUploads?: boolean;
+  streamingMode?: "auto" | "on" | "off";
+  headers?: Record<string, string>;
+  theme?: Partial<ChatbotThemeTokens>;
+  icons?: Partial<ChatbotIcons>;
+  adapter?: ChatbotAdapter;
+  events?: Partial<ChatbotEventHandlers>;
+  initialOpen?: boolean;
+  position?: "bottom-right" | "bottom-left";
+  classNames?: Partial<ChatbotClassNames>;
+}
+
+export interface SendMessageInput {
+  text: string;
+  files?: File[];
+}
+
+export interface ChatbotContextValue {
+  isOpen: boolean;
+  isAwaiting: boolean;
+  messages: ChatMessage[];
+  sessionId: string;
+  uploadEnabled: boolean;
+  agentName: string;
+  assistantNote: string;
+  disclaimerText: string;
+  position: "bottom-right" | "bottom-left";
+  themeVars: Record<string, string>;
+  icons: ChatbotIcons;
+  classNames: Partial<ChatbotClassNames>;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  sendMessage: (input: SendMessageInput) => Promise<void>;
+  clearConversation: () => void;
+  registerPageConfig: (id: string, config: PageConfigOverrides) => void;
+  unregisterPageConfig: (id: string) => void;
+  widgetEnabled: boolean;
+  resetSession: () => void;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./chatbot";