kanha-ai 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Message {
+    role: "user" | "assistant" | "system";
+    content: string;
+}
+type InferenceMode = "detecting" | "loading" | "ready" | "error";
+interface KanhaChatConfig {
+    /** Base URL for model artifacts in storage (e.g. Supabase Storage public URL) */
+    modelUrl: string;
+    /** URL to the WASM library file. If omitted, auto-detected from modelSize. */
+    modelLib?: string;
+    /** Model size tier — used for WASM auto-detection. Default: "small" */
+    modelSize?: "small" | "medium" | "large";
+    /** System prompt for the bot */
+    systemPrompt?: string;
+    /** Sampling temperature (0-2). Default: 0.7 */
+    temperature?: number;
+    /** Max tokens to generate per response. Default: 1024 */
+    maxTokens?: number;
+    /** Context window size override */
+    contextWindowSize?: number;
+}
+interface KanhaBotTheme {
+    /** Primary brand color (hex). Default: "#0d9488" */
+    primaryColor?: string;
+    /** Widget position. Default: "bottom-right" */
+    position?: "bottom-right" | "bottom-left";
+}
+interface KanhaBotProps extends KanhaChatConfig {
+    /** Bot display name */
+    botName?: string;
+    /** Welcome message shown before first interaction */
+    welcomeMessage?: string;
+    /** Suggested prompts shown in empty state */
+    suggestions?: string[];
+    /** Theme customization */
+    theme?: KanhaBotTheme;
+}
+interface KanhaChatReturn {
+    messages: Message[];
+    input: string;
+    setInput: (value: string) => void;
+    isLoading: boolean;
+    isThinking: boolean;
+    mode: InferenceMode;
+    loadProgress: number;
+    error: string | null;
+    send: () => void;
+    clear: () => void;
+}
+
+declare function KanhaBot({ modelUrl, modelLib, modelSize, systemPrompt, temperature, maxTokens, contextWindowSize, botName, welcomeMessage, suggestions, theme, }: KanhaBotProps): react_jsx_runtime.JSX.Element;
+
+declare function useKanhaChat(config: KanhaChatConfig): KanhaChatReturn;
+
+export { type InferenceMode, KanhaBot, type KanhaBotProps, type KanhaBotTheme, type KanhaChatConfig, type KanhaChatReturn, type Message, useKanhaChat };

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Message {
+    role: "user" | "assistant" | "system";
+    content: string;
+}
+type InferenceMode = "detecting" | "loading" | "ready" | "error";
+interface KanhaChatConfig {
+    /** Base URL for model artifacts in storage (e.g. Supabase Storage public URL) */
+    modelUrl: string;
+    /** URL to the WASM library file. If omitted, auto-detected from modelSize. */
+    modelLib?: string;
+    /** Model size tier — used for WASM auto-detection. Default: "small" */
+    modelSize?: "small" | "medium" | "large";
+    /** System prompt for the bot */
+    systemPrompt?: string;
+    /** Sampling temperature (0-2). Default: 0.7 */
+    temperature?: number;
+    /** Max tokens to generate per response. Default: 1024 */
+    maxTokens?: number;
+    /** Context window size override */
+    contextWindowSize?: number;
+}
+interface KanhaBotTheme {
+    /** Primary brand color (hex). Default: "#0d9488" */
+    primaryColor?: string;
+    /** Widget position. Default: "bottom-right" */
+    position?: "bottom-right" | "bottom-left";
+}
+interface KanhaBotProps extends KanhaChatConfig {
+    /** Bot display name */
+    botName?: string;
+    /** Welcome message shown before first interaction */
+    welcomeMessage?: string;
+    /** Suggested prompts shown in empty state */
+    suggestions?: string[];
+    /** Theme customization */
+    theme?: KanhaBotTheme;
+}
+interface KanhaChatReturn {
+    messages: Message[];
+    input: string;
+    setInput: (value: string) => void;
+    isLoading: boolean;
+    isThinking: boolean;
+    mode: InferenceMode;
+    loadProgress: number;
+    error: string | null;
+    send: () => void;
+    clear: () => void;
+}
+
+declare function KanhaBot({ modelUrl, modelLib, modelSize, systemPrompt, temperature, maxTokens, contextWindowSize, botName, welcomeMessage, suggestions, theme, }: KanhaBotProps): react_jsx_runtime.JSX.Element;
+
+declare function useKanhaChat(config: KanhaChatConfig): KanhaChatReturn;
+
+export { type InferenceMode, KanhaBot, type KanhaBotProps, type KanhaBotTheme, type KanhaChatConfig, type KanhaChatReturn, type Message, useKanhaChat };

package/dist/index.js

@@ -0,0 +1,566 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/KanhaBot.tsx
+var MODEL_LIB_PREFIX = "https://raw.githubusercontent.com/mlc-ai/binary-mlc-llm-libs/main/web-llm-models/v0_2_80";
+var WASM_BY_SIZE = {
+  small: `${MODEL_LIB_PREFIX}/Qwen3-0.6B-q4f16_1-ctx4k_cs1k-webgpu.wasm`,
+  medium: `${MODEL_LIB_PREFIX}/Qwen3-1.7B-q4f16_1-ctx4k_cs1k-webgpu.wasm`,
+  large: `${MODEL_LIB_PREFIX}/Qwen3-4B-q4f16_1-ctx4k_cs1k-webgpu.wasm`
+};
+function resolveModelLib(config) {
+  if (config.modelLib) return config.modelLib;
+  const size = config.modelSize ?? "small";
+  const lib = WASM_BY_SIZE[size];
+  if (!lib) throw new Error(`Unknown model size "${size}". Provide modelLib explicitly.`);
+  return lib;
+}
+function toWebLLMModelUrl(modelUrl) {
+  let url = modelUrl.endsWith("/") ? modelUrl.slice(0, -1) : modelUrl;
+  if (!url.includes("/resolve/")) {
+    url += "/resolve/v1";
+  }
+  return url;
+}
+async function checkWebGPU() {
+  try {
+    const nav = navigator;
+    if (!nav.gpu) return false;
+    const adapter = await nav.gpu.requestAdapter();
+    if (!adapter) return false;
+    const device = await adapter.requestDevice();
+    return !!device;
+  } catch {
+    return false;
+  }
+}
+function stripThinkTokens(text) {
+  let cleaned = text.replace(/<think>[\s\S]*?<\/think>/g, "");
+  cleaned = cleaned.replace(/<think>[\s\S]*$/g, "");
+  return cleaned.trimStart();
+}
+function useKanhaChat(config) {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isThinking, setIsThinking] = useState(false);
+  const [mode, setMode] = useState("detecting");
+  const [loadProgress, setLoadProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const engineRef = useRef(null);
+  const configRef = useRef(config);
+  configRef.current = config;
+  const updateAssistantMessage = useCallback((text) => {
+    const cleaned = stripThinkTokens(text);
+    if (!cleaned) {
+      setIsThinking(true);
+      return;
+    }
+    setIsThinking(false);
+    setMessages((prev) => {
+      const msgs = [...prev];
+      if (msgs[msgs.length - 1]?.role === "assistant") {
+        msgs[msgs.length - 1] = { role: "assistant", content: cleaned };
+      } else {
+        msgs.push({ role: "assistant", content: cleaned });
+      }
+      return msgs;
+    });
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let cancelled = false;
+    const init = async () => {
+      setMode("detecting");
+      const hasWebGPU = await checkWebGPU();
+      if (!hasWebGPU) {
+        setMode("error");
+        setError("WebGPU is not supported in this browser. Try Chrome 113+ or Edge 113+.");
+        return;
+      }
+      if (cancelled) return;
+      setMode("loading");
+      try {
+        const webllm = await import('@mlc-ai/web-llm');
+        const modelId = "kanha-custom-model";
+        const modelLib = resolveModelLib(configRef.current);
+        const modelUrl = toWebLLMModelUrl(configRef.current.modelUrl);
+        const engine = await webllm.CreateMLCEngine(modelId, {
+          appConfig: {
+            model_list: [
+              {
+                model: modelUrl,
+                model_id: modelId,
+                model_lib: modelLib,
+                overrides: {
+                  context_window_size: configRef.current.contextWindowSize ?? 4096
+                }
+              }
+            ]
+          },
+          initProgressCallback: (report) => {
+            if (!cancelled) setLoadProgress(Math.round(report.progress * 100));
+          }
+        });
+        if (cancelled) return;
+        engineRef.current = engine;
+        setMode("ready");
+      } catch (err) {
+        if (cancelled) return;
+        setMode("error");
+        setError(
+          err instanceof Error ? err.message : "Failed to load AI model."
+        );
+      }
+    };
+    init();
+    return () => {
+      cancelled = true;
+    };
+  }, [config.modelUrl, config.modelLib, config.modelSize]);
+  const send = useCallback(async () => {
+    if (!input.trim() || mode !== "ready" || isLoading || !engineRef.current) return;
+    const userMsg = { role: "user", content: input.trim() };
+    const allMessages = [...messages, userMsg];
+    setMessages(allMessages);
+    setInput("");
+    setIsLoading(true);
+    setIsThinking(true);
+    setError(null);
+    try {
+      const systemMessages = configRef.current.systemPrompt ? [{ role: "system", content: configRef.current.systemPrompt }] : [];
+      const completion = await engineRef.current.chat.completions.create({
+        messages: [...systemMessages, ...allMessages],
+        temperature: configRef.current.temperature ?? 0.7,
+        max_tokens: configRef.current.maxTokens ?? 1024,
+        stream: true
+      });
+      let text = "";
+      for await (const chunk of completion) {
+        const delta = chunk.choices[0]?.delta?.content || "";
+        text += delta;
+        updateAssistantMessage(text);
+      }
+    } catch {
+      setError("Failed to generate response. Please try again.");
+      setMessages((prev) => [
+        ...prev,
+        { role: "assistant", content: "Sorry, I encountered an error. Please try again." }
+      ]);
+    } finally {
+      setIsLoading(false);
+      setIsThinking(false);
+    }
+  }, [input, mode, isLoading, messages, updateAssistantMessage]);
+  const clear = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+  return {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    isThinking,
+    mode,
+    loadProgress,
+    error,
+    send,
+    clear
+  };
+}
+
+// src/styles.ts
+function fabStyle(primaryColor, position) {
+  return {
+    position: "fixed",
+    bottom: 24,
+    [position === "bottom-right" ? "right" : "left"]: 24,
+    width: 56,
+    height: 56,
+    borderRadius: "50%",
+    background: primaryColor,
+    color: "#fff",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+    zIndex: 9999,
+    transition: "transform 0.15s ease, box-shadow 0.15s ease"
+  };
+}
+function panelStyle(position) {
+  return {
+    position: "fixed",
+    bottom: 96,
+    [position === "bottom-right" ? "right" : "left"]: 24,
+    width: 384,
+    maxWidth: "calc(100vw - 48px)",
+    maxHeight: "calc(100vh - 120px)",
+    borderRadius: 16,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 8px 30px rgba(0,0,0,0.12)",
+    border: "1px solid #e5e7eb",
+    background: "#ffffff",
+    zIndex: 9999,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  };
+}
+var headerStyle = {
+  padding: "16px",
+  color: "#fff",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var headerTitleStyle = {
+  fontWeight: 600,
+  fontSize: 15,
+  margin: 0
+};
+var headerSubtitleStyle = {
+  fontSize: 12,
+  opacity: 0.85,
+  margin: "4px 0 0"
+};
+var messagesContainerStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: 16,
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  minHeight: 300,
+  maxHeight: 384,
+  background: "#fafafa"
+};
+var emptyStateStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  textAlign: "center",
+  color: "#6b7280",
+  fontSize: 14,
+  padding: 16
+};
+function userBubbleStyle(primaryColor) {
+  return {
+    maxWidth: "80%",
+    padding: "8px 14px",
+    borderRadius: 16,
+    background: primaryColor,
+    color: "#fff",
+    fontSize: 14,
+    lineHeight: 1.5,
+    alignSelf: "flex-end",
+    wordBreak: "break-word"
+  };
+}
+var assistantBubbleStyle = {
+  maxWidth: "80%",
+  padding: "8px 14px",
+  borderRadius: 16,
+  background: "#fff",
+  color: "#1f2937",
+  fontSize: 14,
+  lineHeight: 1.5,
+  border: "1px solid #e5e7eb",
+  alignSelf: "flex-start",
+  wordBreak: "break-word"
+};
+var inputBarStyle = {
+  display: "flex",
+  gap: 8,
+  padding: "12px 16px",
+  borderTop: "1px solid #e5e7eb",
+  background: "#fff"
+};
+var textareaStyle = {
+  flex: 1,
+  padding: "8px 12px",
+  border: "1px solid #e5e7eb",
+  borderRadius: 10,
+  fontSize: 14,
+  resize: "none",
+  overflow: "hidden",
+  outline: "none",
+  fontFamily: "inherit",
+  minHeight: 40,
+  maxHeight: 120,
+  lineHeight: 1.5
+};
+function sendButtonStyle(primaryColor) {
+  return {
+    padding: "8px 14px",
+    background: primaryColor,
+    color: "#fff",
+    border: "none",
+    borderRadius: 10,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    transition: "opacity 0.15s ease"
+  };
+}
+var iconButtonStyle = {
+  background: "none",
+  border: "none",
+  color: "inherit",
+  cursor: "pointer",
+  padding: 4,
+  borderRadius: 8,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  opacity: 0.8,
+  transition: "opacity 0.15s ease"
+};
+function suggestionButtonStyle(primaryColor) {
+  return {
+    fontSize: 13,
+    padding: "8px 12px",
+    borderRadius: 10,
+    border: "1px solid #e5e7eb",
+    background: "#fff",
+    color: "#374151",
+    cursor: "pointer",
+    textAlign: "left",
+    width: "100%",
+    transition: "border-color 0.15s ease"
+    // hover handled inline
+  };
+}
+var progressBarContainer = {
+  width: "60%",
+  height: 4,
+  borderRadius: 2,
+  background: "rgba(255,255,255,0.3)",
+  marginTop: 8,
+  overflow: "hidden"
+};
+function progressBarFill(progress, primaryColor) {
+  return {
+    width: `${progress}%`,
+    height: "100%",
+    borderRadius: 2,
+    background: primaryColor,
+    transition: "width 0.3s ease"
+  };
+}
+var ChatIcon = () => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var SendIcon = () => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+] });
+var TrashIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+] });
+var Spinner = ({ size = 18 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: "kanha-spin 1s linear infinite" }, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var spinKeyframes = `@keyframes kanha-spin { to { transform: rotate(360deg); } }`;
+var bounceKeyframes = `
+@keyframes kanha-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-4px); }
+}`;
+function ThinkingDots() {
+  const dotStyle = (delay) => ({
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: "#9ca3af",
+    animation: `kanha-bounce 1.2s ease-in-out ${delay}ms infinite`
+  });
+  return /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 3, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx("span", { style: dotStyle(0) }),
+    /* @__PURE__ */ jsx("span", { style: dotStyle(150) }),
+    /* @__PURE__ */ jsx("span", { style: dotStyle(300) }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#9ca3af", marginLeft: 6 }, children: "Thinking" })
+  ] });
+}
+function KanhaBot({
+  modelUrl,
+  modelLib,
+  modelSize,
+  systemPrompt,
+  temperature,
+  maxTokens,
+  contextWindowSize,
+  botName = "AI Assistant",
+  welcomeMessage = "Ask me anything!",
+  suggestions = [],
+  theme = {}
+}) {
+  const primaryColor = theme.primaryColor ?? "#0d9488";
+  const position = theme.position ?? "bottom-right";
+  const {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    isThinking,
+    mode,
+    loadProgress,
+    error,
+    send,
+    clear
+  } = useKanhaChat({
+    modelUrl,
+    modelLib,
+    modelSize,
+    systemPrompt,
+    temperature,
+    maxTokens,
+    contextWindowSize
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const messagesEndRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + "px";
+    }
+  }, [input]);
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+  const isReady = mode === "ready";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("style", { children: [
+      spinKeyframes,
+      bounceKeyframes
+    ] }),
+    isOpen && /* @__PURE__ */ jsxs("div", { style: panelStyle(position), children: [
+      /* @__PURE__ */ jsxs("div", { style: { ...headerStyle, background: primaryColor }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { style: headerTitleStyle, children: botName }),
+          /* @__PURE__ */ jsx("p", { style: headerSubtitleStyle, children: isReady ? welcomeMessage : mode === "loading" ? `Loading AI model (${loadProgress}%)` : mode === "error" ? "Failed to load" : "Detecting capabilities..." }),
+          mode === "loading" && /* @__PURE__ */ jsx("div", { style: progressBarContainer, children: /* @__PURE__ */ jsx("div", { style: progressBarFill(loadProgress, "#fff") }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+          messages.length > 0 && /* @__PURE__ */ jsx("button", { onClick: clear, style: iconButtonStyle, "aria-label": "Clear chat", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setIsOpen(false), style: iconButtonStyle, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { style: { padding: "10px 16px", background: "#fef2f2", borderBottom: "1px solid #fecaca", fontSize: 13, color: "#b91c1c" }, children: error }),
+      /* @__PURE__ */ jsx("div", { style: messagesContainerStyle, children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: isReady ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChatIcon, {}),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: 12, fontWeight: 500, color: "#374151" }, children: welcomeMessage }),
+        suggestions.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6, width: "100%", marginTop: 16 }, children: suggestions.map((text) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setInput(text);
+              setTimeout(send, 0);
+            },
+            style: suggestionButtonStyle(),
+            onMouseEnter: (e) => {
+              e.target.style.borderColor = primaryColor;
+            },
+            onMouseLeave: (e) => {
+              e.target.style.borderColor = "#e5e7eb";
+            },
+            children: text
+          },
+          text
+        )) })
+      ] }) : mode === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 32 }),
+        /* @__PURE__ */ jsxs("p", { style: { marginTop: 8 }, children: [
+          "Loading AI model (",
+          loadProgress,
+          "%)"
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 12, marginTop: 4 }, children: "First load takes about a minute" })
+      ] }) : mode === "error" ? /* @__PURE__ */ jsx("p", { children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, { size: 32 }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: 8 }, children: "Detecting browser capabilities..." })
+      ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        messages.map((msg, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+            },
+            children: /* @__PURE__ */ jsx("div", { style: msg.role === "user" ? userBubbleStyle(primaryColor) : assistantBubbleStyle, children: msg.role === "assistant" ? /* @__PURE__ */ jsx(ReactMarkdown, { children: msg.content }) : /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap" }, children: msg.content }) })
+          },
+          i
+        )),
+        isLoading && (isThinking || messages[messages.length - 1]?.role !== "assistant") && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx("div", { style: assistantBubbleStyle, children: isThinking ? /* @__PURE__ */ jsx(ThinkingDots, {}) : /* @__PURE__ */ jsx(Spinner, { size: 16 }) }) }),
+        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { style: inputBarStyle, children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: handleKeyPress,
+            placeholder: isReady ? "Type your message..." : "Waiting for model...",
+            disabled: !isReady || isLoading,
+            rows: 1,
+            style: {
+              ...textareaStyle,
+              opacity: !isReady ? 0.5 : 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: send,
+            disabled: !isReady || isLoading || !input.trim(),
+            style: {
+              ...sendButtonStyle(primaryColor),
+              opacity: !isReady || isLoading || !input.trim() ? 0.5 : 1,
+              cursor: !isReady || isLoading || !input.trim() ? "not-allowed" : "pointer"
+            },
+            "aria-label": "Send message",
+            children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: 18 }) : /* @__PURE__ */ jsx(SendIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: fabStyle(primaryColor, position),
+        "aria-label": "Toggle chat",
+        onMouseEnter: (e) => {
+          e.target.style.transform = "scale(1.05)";
+        },
+        onMouseLeave: (e) => {
+          e.target.style.transform = "scale(1)";
+        },
+        children: isOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChatIcon, {})
+      }
+    )
+  ] });
+}
+
+export { KanhaBot, useKanhaChat };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map