kanha-ai 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -9,98 +9,153 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 
 // 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`
+
+// src/webllm.ts
+var MODEL_ID = "kanha-custom-model";
+var PREBUILT_MODEL_BY_SIZE = {
+  small: "Qwen3-0.6B-q4f16_1-MLC",
+  medium: "Qwen3-1.7B-q4f16_1-MLC",
+  large: "Qwen3-4B-q4f16_1-MLC"
+};
+var MIN_RAM_GB = {
+  small: 2,
+  medium: 4,
+  large: 8
 };
-function resolveModelLib(config) {
+async function checkWebGPU() {
+  try {
+    const nav = navigator;
+    return !!nav.gpu && !!await nav.gpu.requestAdapter();
+  } catch {
+    return false;
+  }
+}
+function checkAvailableMemory(config) {
+  const nav = navigator;
+  const required = config.minRamGb ?? MIN_RAM_GB[config.modelSize ?? "small"] ?? MIN_RAM_GB.small;
+  if (nav.deviceMemory && nav.deviceMemory < 8 && nav.deviceMemory < required) {
+    const modelSize = config.modelSize ?? "small";
+    return `Your device has ~${nav.deviceMemory}GB RAM but the ${modelSize} model needs at least ${required}GB.`;
+  }
+  return null;
+}
+function resolveModelLib(webllm, 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;
+  const modelId = PREBUILT_MODEL_BY_SIZE[size];
+  const modelLib = webllm.prebuiltAppConfig.model_list.find((model) => model.model_id === modelId)?.model_lib;
+  if (!modelLib) throw new Error(`Unknown model size "${size}". Provide modelLib explicitly.`);
+  return modelLib;
 }
 function toWebLLMModelUrl(modelUrl) {
   let url = modelUrl.endsWith("/") ? modelUrl.slice(0, -1) : modelUrl;
-  if (!url.includes("/resolve/")) {
-    url += "/resolve/v1";
-  }
+  if (!url.includes("/resolve/")) url += "/resolve/main";
   return url;
 }
-var MIN_RAM_GB = {
-  small: 4,
-  medium: 8,
-  large: 12
-};
-async function checkWebGPU() {
+function createAppConfig(webllm, config) {
+  const modelLib = resolveModelLib(webllm, config);
+  const size = config.modelSize ?? "small";
+  const modelId = PREBUILT_MODEL_BY_SIZE[size];
+  const prebuiltModel = webllm.prebuiltAppConfig.model_list.find((model) => model.model_id === modelId);
+  const finalModelUrl = config.modelUrl ? toWebLLMModelUrl(config.modelUrl) : prebuiltModel?.model;
+  if (!finalModelUrl) {
+    throw new Error(`Failed to resolve model URL for size "${size}".`);
+  }
+  return {
+    model_list: [{
+      model: finalModelUrl,
+      model_id: MODEL_ID,
+      model_lib: modelLib,
+      overrides: { context_window_size: config.contextWindowSize ?? 4096 }
+    }],
+    useIndexedDBCache: (config.cacheBackend ?? "indexeddb") === "indexeddb"
+  };
+}
+async function createEngine(webllm, config, initProgressCallback) {
+  const appConfig = createAppConfig(webllm, config);
+  if (config.workerUrl) {
+    const worker = new Worker(config.workerUrl, { type: "module" });
+    try {
+      const engine2 = await webllm.CreateWebWorkerMLCEngine(worker, MODEL_ID, {
+        appConfig,
+        initProgressCallback,
+        logLevel: "WARN"
+      });
+      return { engine: engine2, worker };
+    } catch (error) {
+      worker.terminate();
+      throw error;
+    }
+  }
+  const engine = await webllm.CreateMLCEngine(MODEL_ID, {
+    appConfig,
+    initProgressCallback,
+    logLevel: "WARN"
+  });
+  return { engine, worker: null };
+}
+async function disposeEngine(engine, worker) {
   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;
+    await engine.unload();
   } catch {
-    return false;
   }
+  worker?.terminate();
 }
-var MODEL_WEIGHT_BYTES = {
-  small: 400 * 1024 * 1024,
-  // ~400MB
-  medium: 1100 * 1024 * 1024,
-  // ~1.1GB
-  large: 2500 * 1024 * 1024
-  // ~2.5GB
-};
-async function checkAvailableMemory(modelSize) {
+function toMetrics(usage, config) {
+  return {
+    promptTokens: usage.prompt_tokens,
+    completionTokens: usage.completion_tokens,
+    totalTokens: usage.total_tokens,
+    e2eLatencyMs: (usage.extra?.e2e_latency_s ?? 0) * 1e3,
+    timeToFirstTokenMs: (usage.extra?.time_to_first_token_s ?? 0) * 1e3,
+    prefillTokensPerSecond: usage.extra?.prefill_tokens_per_s ?? 0,
+    decodeTokensPerSecond: usage.extra?.decode_tokens_per_s ?? 0,
+    modelSize: config.modelSize ?? "small",
+    modelId: MODEL_ID,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function emitMetrics(usage, config) {
   try {
-    const nav2 = navigator;
-    if (nav2.gpu) {
-      const adapter = await nav2.gpu.requestAdapter();
-      if (adapter) {
-        const maxBufferSize = adapter.limits.maxBufferSize;
-        const needed2 = MODEL_WEIGHT_BYTES[modelSize] ?? MODEL_WEIGHT_BYTES.small;
-        if (maxBufferSize < needed2) {
-          const maxMB = Math.round(maxBufferSize / (1024 * 1024));
-          const needMB = Math.round(needed2 / (1024 * 1024));
-          return `Your GPU can only allocate ~${maxMB}MB but the ${modelSize} model needs ~${needMB}MB. Try a smaller model or close other GPU-heavy tabs.`;
-        }
-      }
-    }
+    config.onMetrics?.(toMetrics(usage, config));
   } catch {
   }
-  const needed = MODEL_WEIGHT_BYTES[modelSize] ?? MODEL_WEIGHT_BYTES.small;
-  const probeSize = Math.min(needed, 512 * 1024 * 1024);
+}
+function resetEngine(engine) {
   try {
-    const buf = new ArrayBuffer(probeSize);
-    if (buf.byteLength !== probeSize) {
-      return `Your device doesn't have enough free memory to load the ${modelSize} model. Close other tabs and try again.`;
-    }
+    void engine.resetChat().catch(() => {
+    });
   } catch {
-    const needMB = Math.round(needed / (1024 * 1024));
-    return `Not enough free memory to load the ${modelSize} model (~${needMB}MB required). Close other tabs and try again.`;
-  }
-  const nav = navigator;
-  if (nav.deviceMemory) {
-    const required = MIN_RAM_GB[modelSize] ?? MIN_RAM_GB.small;
-    if (nav.deviceMemory < required) {
-      return `Your device has ~${nav.deviceMemory}GB RAM but the ${modelSize} model needs at least ${required}GB.`;
-    }
   }
-  return null;
-}
-function isMemoryError(err) {
-  if (!(err instanceof Error)) return false;
-  const msg = err.message.toLowerCase();
-  return msg.includes("out of memory") || msg.includes("oom") || msg.includes("allocation failed") || msg.includes("err_failed") || msg.includes("arraybuffer") || msg.includes("could not allocate") || msg.includes("webgpu device lost");
 }
 function stripThinkTokens(text) {
   let cleaned = text.replace(/<think>[\s\S]*?<\/think>/g, "");
   cleaned = cleaned.replace(/<think>[\s\S]*$/g, "");
   return cleaned.trimStart();
 }
+
+// src/rag-prompt.ts
+var DEFAULT_RAG_PROMPT_TEMPLATE = "Use the following context to answer the question.\n\nContext:\n{context}\n\nQuestion:\n{query}";
+function formatRagPrompt(context, query, template = DEFAULT_RAG_PROMPT_TEMPLATE) {
+  return template.replace(
+    /\{(context|query)\}/g,
+    (_, placeholder) => placeholder === "context" ? context : query
+  );
+}
+
+// src/engine-history.ts
+function buildEngineHistory(messages, maxHistoryMessages, currentUserContent) {
+  const history = messages.slice(-Math.max(1, maxHistoryMessages ?? 12));
+  history[history.length - 1] = { role: "user", content: currentUserContent };
+  return history;
+}
+
+// src/use-kanha-chat.ts
+function isMemoryError(err) {
+  if (!(err instanceof Error)) return false;
+  const msg = err.message.toLowerCase();
+  return msg.includes("out of memory") || msg.includes("oom") || msg.includes("allocation failed") || msg.includes("arraybuffer") || msg.includes("could not allocate") || msg.includes("webgpu device lost");
+}
 function useKanhaChat(config) {
   const [messages, setMessages] = react.useState([]);
   const [input, setInput] = react.useState("");
@@ -110,9 +165,20 @@ function useKanhaChat(config) {
   const [loadProgress, setLoadProgress] = react.useState(0);
   const [error, setError] = react.useState(null);
   const engineRef = react.useRef(null);
+  const workerRef = react.useRef(null);
+  const streamTimerRef = react.useRef(null);
+  const pendingTextRef = react.useRef(null);
+  const generationRef = react.useRef(0);
   const configRef = react.useRef(config);
   configRef.current = config;
-  const updateAssistantMessage = react.useCallback((text) => {
+  const flushAssistantMessage = react.useCallback(() => {
+    if (streamTimerRef.current) {
+      clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+    }
+    const text = pendingTextRef.current;
+    pendingTextRef.current = null;
+    if (text === null) return;
     const cleaned = stripThinkTokens(text);
     if (!cleaned) {
       setIsThinking(true);
@@ -120,93 +186,118 @@ function useKanhaChat(config) {
     }
     setIsThinking(false);
     setMessages((prev) => {
-      const msgs = [...prev];
-      if (msgs[msgs.length - 1]?.role === "assistant") {
-        msgs[msgs.length - 1] = { role: "assistant", content: cleaned };
+      const next = [...prev];
+      if (next[next.length - 1]?.role === "assistant") {
+        next[next.length - 1] = { role: "assistant", content: cleaned };
       } else {
-        msgs.push({ role: "assistant", content: cleaned });
+        next.push({ role: "assistant", content: cleaned });
       }
-      return msgs;
+      return next;
     });
   }, []);
+  const scheduleAssistantMessage = react.useCallback((text) => {
+    pendingTextRef.current = text;
+    if (streamTimerRef.current) return;
+    streamTimerRef.current = setTimeout(
+      flushAssistantMessage,
+      configRef.current.streamUpdateIntervalMs ?? 50
+    );
+  }, [flushAssistantMessage]);
+  const initializationKey = JSON.stringify([
+    config.modelUrl,
+    config.modelLib,
+    config.modelSize,
+    config.contextWindowSize,
+    config.minRamGb,
+    config.cacheBackend,
+    config.workerUrl?.toString()
+  ]);
   react.useEffect(() => {
     if (typeof window === "undefined") return;
     let cancelled = false;
+    const initConfig = configRef.current;
     const init = async () => {
       setMode("detecting");
+      setError(null);
       const hasWebGPU = await checkWebGPU();
+      if (cancelled) return;
       if (!hasWebGPU) {
         setMode("error");
         setError("WebGPU is not supported in this browser. Try Chrome 113+ or Edge 113+.");
         return;
       }
-      const modelSize = configRef.current.modelSize ?? "small";
-      const memWarning = await checkAvailableMemory(modelSize);
+      const memWarning = checkAvailableMemory(initConfig);
       if (memWarning) {
         setMode("error");
         setError(memWarning);
         return;
       }
-      if (cancelled) return;
+      setMode("loading");
       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
-                }
-              }
-            ],
-            useIndexedDBCache: true
-          },
-          initProgressCallback: (report) => {
-            if (!cancelled) setLoadProgress(Math.round(report.progress * 100));
-          },
-          logLevel: "SILENT"
+        const result = await createEngine(webllm, initConfig, (report) => {
+          if (!cancelled) setLoadProgress(Math.round(report.progress * 100));
         });
-        if (cancelled) return;
-        engineRef.current = engine;
+        if (cancelled) {
+          await disposeEngine(result.engine, result.worker);
+          return;
+        }
+        engineRef.current = result.engine;
+        workerRef.current = result.worker;
         setMode("ready");
       } catch (err) {
         if (cancelled) return;
         setMode("error");
         if (isMemoryError(err)) {
-          const size = configRef.current.modelSize ?? "small";
+          const size = initConfig.modelSize ?? "small";
           const ram = navigator.deviceMemory;
           setError(
             `Not enough memory to load the ${size} model${ram ? ` (device has ~${ram}GB RAM)` : ""}. Close other tabs or try a smaller model.`
           );
         } else {
-          setError(
-            err instanceof Error ? err.message : "Failed to load AI model."
-          );
+          setError(err instanceof Error ? err.message : "Failed to load AI model.");
         }
       }
     };
     init();
     return () => {
       cancelled = true;
-      if (engineRef.current) {
+      generationRef.current += 1;
+      if (streamTimerRef.current) clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+      pendingTextRef.current = null;
+      const engine = engineRef.current;
+      const worker = workerRef.current;
+      engineRef.current = null;
+      workerRef.current = null;
+      if (engine) {
         try {
-          engineRef.current.unload();
+          engine.interruptGenerate();
         } catch {
         }
-        engineRef.current = null;
+        void disposeEngine(engine, worker);
+      } else {
+        worker?.terminate();
       }
     };
-  }, [config.modelUrl, config.modelLib, config.modelSize]);
+  }, [initializationKey]);
+  const stop = react.useCallback(() => {
+    generationRef.current += 1;
+    try {
+      engineRef.current?.interruptGenerate();
+    } catch {
+    }
+    flushAssistantMessage();
+    setIsLoading(false);
+    setIsThinking(false);
+  }, [flushAssistantMessage]);
   const send = react.useCallback(async () => {
     if (!input.trim() || mode !== "ready" || isLoading || !engineRef.current) return;
-    const userMsg = { role: "user", content: input.trim() };
+    const userText = input.trim();
+    const generation = generationRef.current + 1;
+    generationRef.current = generation;
+    const userMsg = { role: "user", content: userText };
     const allMessages = [...messages, userMsg];
     setMessages(allMessages);
     setInput("");
@@ -214,34 +305,109 @@ function useKanhaChat(config) {
     setIsThinking(true);
     setError(null);
     try {
-      const systemMessages = configRef.current.systemPrompt ? [{ role: "system", content: configRef.current.systemPrompt }] : [];
+      const currentConfig = configRef.current;
+      const systemMessages = currentConfig.systemPrompt ? [{ role: "system", content: currentConfig.systemPrompt }] : [];
+      let engineUserContent = userText;
+      let ragTime = 0;
+      let ragContextLength = 0;
+      if (currentConfig.onRetrieveContext) {
+        try {
+          const ragStartTime = performance.now();
+          const context = await currentConfig.onRetrieveContext(userText);
+          ragTime = (performance.now() - ragStartTime) / 1e3;
+          if (context) {
+            ragContextLength = context.length;
+            engineUserContent = formatRagPrompt(context, userText, currentConfig.ragPromptTemplate);
+          }
+        } catch (err) {
+          console.error("[KanhaBot] RAG Retrieval Failed:", err);
+        }
+      }
+      if (generationRef.current !== generation) return;
+      const engineHistory = buildEngineHistory(
+        allMessages,
+        currentConfig.maxHistoryMessages,
+        engineUserContent
+      );
+      const startTime = performance.now();
+      let firstTokenTime = null;
+      let contentChunkCount = 0;
+      let completionTokens = null;
       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
+        messages: [...systemMessages, ...engineHistory],
+        temperature: currentConfig.temperature ?? 0.7,
+        top_p: currentConfig.topP ?? 0.8,
+        max_tokens: currentConfig.maxTokens ?? 1024,
+        stream: true,
+        stream_options: { include_usage: true },
+        extra_body: {
+          enable_thinking: currentConfig.enableThinking ?? false,
+          enable_latency_breakdown: true
+        }
       });
       let text = "";
       for await (const chunk of completion) {
+        if (generationRef.current !== generation) break;
         const delta = chunk.choices[0]?.delta?.content || "";
-        text += delta;
-        updateAssistantMessage(text);
+        if (delta) {
+          if (firstTokenTime === null) firstTokenTime = performance.now();
+          contentChunkCount += 1;
+          text += delta;
+          scheduleAssistantMessage(text);
+        }
+        if (chunk.usage) {
+          completionTokens = chunk.usage.completion_tokens;
+          emitMetrics(chunk.usage, currentConfig);
+        }
+      }
+      if (generationRef.current === generation) {
+        flushAssistantMessage();
+        const endTime = performance.now();
+        try {
+          if (engineRef.current.runtimeStatsText) {
+            const stats = await engineRef.current.runtimeStatsText();
+            const outputTokens = completionTokens ?? contentChunkCount;
+            const ttft = firstTokenTime ? (firstTokenTime - startTime) / 1e3 : 0;
+            const decodeTime = firstTokenTime ? (endTime - firstTokenTime) / 1e3 : 0;
+            const tps = decodeTime > 0 ? Math.max(0, outputTokens - 1) / decodeTime : 0;
+            const totalTime = (endTime - startTime) / 1e3;
+            const ragStatsLog = currentConfig.onRetrieveContext ? `RAG Retrieval Time: ${ragTime.toFixed(3)}s
+RAG Context Inserted: ${ragContextLength} characters
+` : "";
+            console.info(
+              `[WebLLM Metrics]
+${stats}
+` + ragStatsLog + `TTFT (Time To First Token): ${ttft.toFixed(3)}s
+App-Level Decode Speed: ${tps.toFixed(2)} tok/s
+Total Request Time: ${totalTime.toFixed(3)}s
+Output Tokens: ${outputTokens}`
+            );
+          }
+        } catch {
+        }
       }
     } catch {
-      setError("Failed to generate response. Please try again.");
-      setMessages((prev) => [
-        ...prev,
-        { role: "assistant", content: "Sorry, I encountered an error. Please try again." }
-      ]);
+      if (generationRef.current === generation) {
+        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);
+      if (generationRef.current === generation) {
+        flushAssistantMessage();
+        setIsLoading(false);
+        setIsThinking(false);
+      }
     }
-  }, [input, mode, isLoading, messages, updateAssistantMessage]);
+  }, [input, mode, isLoading, messages, scheduleAssistantMessage, flushAssistantMessage]);
   const clear = react.useCallback(() => {
+    stop();
+    if (engineRef.current) resetEngine(engineRef.current);
     setMessages([]);
     setError(null);
-  }, []);
+  }, [stop]);
   return {
     messages,
     input,
@@ -252,6 +418,7 @@ function useKanhaChat(config) {
     loadProgress,
     error,
     send,
+    stop,
     clear
   };
 }
@@ -421,7 +588,6 @@ function suggestionButtonStyle(primaryColor) {
     textAlign: "left",
     width: "100%",
     transition: "border-color 0.15s ease"
-    // hover handled inline
   };
 }
 var progressBarContainer = {
@@ -456,11 +622,7 @@ var TrashIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", heig
 ] });
 var Spinner = ({ size = 18 }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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); }
-}`;
+var bounceKeyframes = `@keyframes kanha-bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }`;
 function ThinkingDots() {
   const dotStyle = (delay) => ({
     width: 6,
@@ -482,12 +644,22 @@ function KanhaBot({
   modelSize,
   systemPrompt,
   temperature,
+  topP,
   maxTokens,
+  enableThinking,
+  maxHistoryMessages,
+  streamUpdateIntervalMs,
+  cacheBackend,
+  workerUrl,
+  onMetrics,
   contextWindowSize,
+  minRamGb,
   botName = "AI Assistant",
   welcomeMessage = "Ask me anything!",
   suggestions = [],
-  theme = {}
+  theme = {},
+  onRetrieveContext,
+  ragPromptTemplate
 }) {
   const primaryColor = theme.primaryColor ?? "#0d9488";
   const position = theme.position ?? "bottom-right";
@@ -508,8 +680,18 @@ function KanhaBot({
     modelSize,
     systemPrompt,
     temperature,
+    topP,
     maxTokens,
-    contextWindowSize
+    enableThinking,
+    maxHistoryMessages,
+    streamUpdateIntervalMs,
+    cacheBackend,
+    workerUrl,
+    onMetrics,
+    contextWindowSize,
+    minRamGb,
+    onRetrieveContext,
+    ragPromptTemplate
   });
   const [isOpen, setIsOpen] = react.useState(false);
   const messagesEndRef = react.useRef(null);
@@ -547,7 +729,7 @@ function KanhaBot({
           /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setIsOpen(false), style: iconButtonStyle, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
         ] })
       ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "10px 16px", background: "#fef2f2", borderBottom: "1px solid #fecaca", fontSize: 13, color: "#b91c1c" }, children: error }),
+      error && mode !== "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "10px 16px", background: "#fef2f2", borderBottom: "1px solid #fecaca", fontSize: 13, color: "#b91c1c" }, children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: messagesContainerStyle, children: messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStateStyle, children: isReady ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ChatIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 12, fontWeight: 500, color: "#374151" }, children: welcomeMessage }),