@wallavi/widget 1.0.0

package/dist/index.mjs

@@ -0,0 +1,601 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { RotateCcw, X, Loader2, ArrowUp, Zap, ChevronDown, CheckCircle2, AlertCircle } from 'lucide-react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ReactMarkdownLib from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+// src/chat-widget.tsx
+
+// src/types.ts
+function getContrastColor(hex) {
+  const clean = hex.replace("#", "");
+  if (clean.length < 6) return "#ffffff";
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5 ? "#000000" : "#ffffff";
+}
+function formatToolName(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim();
+}
+var STREAM_DELIMITER = "\u03B6\u236E";
+async function consumeStream(body, handler) {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const chunks = buffer.split(STREAM_DELIMITER);
+    buffer = chunks.pop() ?? "";
+    for (const chunk of chunks) {
+      const raw = chunk.trim();
+      if (!raw) continue;
+      try {
+        const parsed = JSON.parse(raw);
+        if (parsed.data?.uiMessageProtocol) handler(parsed.data.uiMessageProtocol);
+      } catch {
+      }
+    }
+  }
+}
+var API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+function newId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+function useChat({
+  agentId,
+  workspaceId = "",
+  source = "playground",
+  userContext
+}) {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [streaming, setStreaming] = useState(false);
+  const [threadId, setThreadId] = useState(() => crypto.randomUUID());
+  const streamingMsgIdRef = useRef(null);
+  const reset = useCallback(() => {
+    setMessages([]);
+    setInput("");
+    setStreaming(false);
+    setThreadId(crypto.randomUUID());
+    streamingMsgIdRef.current = null;
+  }, []);
+  const send = useCallback(
+    async (text) => {
+      const userInput = (text ?? input).trim();
+      if (!userInput || streaming) return;
+      setInput("");
+      const userMsgId = newId();
+      setMessages((prev) => [
+        ...prev,
+        { id: userMsgId, role: "user", parts: [{ type: "text", text: userInput }] }
+      ]);
+      setStreaming(true);
+      const assistantMsgId = newId();
+      streamingMsgIdRef.current = assistantMsgId;
+      setMessages((prev) => [
+        ...prev,
+        { id: assistantMsgId, role: "assistant", parts: [] }
+      ]);
+      try {
+        const token = typeof window !== "undefined" ? await window.Clerk?.session?.getToken() : null;
+        const res = await fetch(`${API_URL}/api/threads/${threadId}/stream`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...token ? { Authorization: `Bearer ${token}` } : {}
+          },
+          body: JSON.stringify({
+            input: userInput,
+            agentId,
+            workspaceId,
+            source,
+            ...userContext?.userName ? { userName: userContext.userName } : {},
+            ...userContext?.userEmail ? { userEmail: userContext.userEmail } : {},
+            userMetadata: {
+              ...userContext?.metadata ?? {},
+              ...userContext?.headers ? { headers: userContext.headers } : {}
+            }
+          })
+        });
+        if (!res.ok) {
+          const errText = await res.text().catch(() => "");
+          throw new Error(errText || `API error ${res.status}`);
+        }
+        if (!res.body) throw new Error("No stream body");
+        const applyEvent = (proto) => {
+          setMessages((prev) => {
+            const idx = prev.findIndex((m) => m.id === assistantMsgId);
+            if (idx === -1) return prev;
+            const existing = prev[idx];
+            const msg = {
+              id: existing.id,
+              role: existing.role,
+              parts: [...existing.parts]
+            };
+            switch (proto.type) {
+              case "text-delta": {
+                const textIdx = msg.parts.findIndex((p) => p.type === "text");
+                if (textIdx === -1) {
+                  msg.parts.push({ type: "text", text: proto.delta });
+                } else {
+                  const p = msg.parts[textIdx];
+                  msg.parts[textIdx] = { type: "text", text: p.text + proto.delta };
+                }
+                break;
+              }
+              case "reasoning-delta": {
+                const rIdx = msg.parts.findIndex((p) => p.type === "reasoning");
+                if (rIdx === -1) {
+                  msg.parts.unshift({ type: "reasoning", text: proto.delta });
+                } else {
+                  const p = msg.parts[rIdx];
+                  msg.parts[rIdx] = { type: "reasoning", text: p.text + proto.delta };
+                }
+                break;
+              }
+              case "tool-input-available": {
+                msg.parts.push({
+                  type: "tool",
+                  toolCallId: proto.toolCallId,
+                  toolName: proto.toolName,
+                  input: proto.input ?? {},
+                  status: "running"
+                });
+                break;
+              }
+              case "tool-output-available": {
+                const tIdx = msg.parts.findIndex(
+                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+                );
+                if (tIdx !== -1) {
+                  msg.parts[tIdx] = {
+                    ...msg.parts[tIdx],
+                    status: "done",
+                    output: proto.output
+                  };
+                }
+                break;
+              }
+              case "tool-output-error": {
+                const tIdx = msg.parts.findIndex(
+                  (p) => p.type === "tool" && p.toolCallId === proto.toolCallId
+                );
+                if (tIdx !== -1) {
+                  msg.parts[tIdx] = {
+                    ...msg.parts[tIdx],
+                    status: "error",
+                    errorText: proto.errorText
+                  };
+                }
+                break;
+              }
+              default:
+                break;
+            }
+            const copy = [...prev];
+            copy[idx] = msg;
+            return copy;
+          });
+        };
+        await consumeStream(res.body, applyEvent);
+      } catch {
+        setMessages((prev) => {
+          const idx = prev.findIndex((m) => m.id === assistantMsgId);
+          if (idx === -1) return prev;
+          const copy = [...prev];
+          const err = copy[idx];
+          copy[idx] = {
+            id: err.id,
+            role: err.role,
+            parts: [{ type: "text", text: "Sorry, something went wrong. Please try again." }]
+          };
+          return copy;
+        });
+      }
+      setStreaming(false);
+      streamingMsgIdRef.current = null;
+    },
+    [input, streaming, agentId, workspaceId, source, threadId, userContext]
+  );
+  return { messages, input, setInput, streaming, threadId, send, reset };
+}
+var Avatar = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: ["relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className].filter(Boolean).join(" "), ...p });
+var AvatarImage = AvatarPrimitive.Image;
+var AvatarFallback = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: ["flex h-full w-full items-center justify-center rounded-full bg-muted", className].filter(Boolean).join(" "), ...p });
+function ChatHeader({
+  title,
+  profilePicture,
+  headerBg,
+  headerText,
+  onReset,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: "flex items-center justify-between px-4 py-3 shrink-0",
+      style: { backgroundColor: headerBg, color: headerText },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+          /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8 shrink-0 border-2", style: { borderColor: `${headerText}30` }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage, { src: profilePicture, alt: title }) : /* @__PURE__ */ jsx(
+            AvatarFallback,
+            {
+              className: "text-xs font-bold",
+              style: { backgroundColor: `${headerText}20`, color: headerText },
+              children: title.slice(0, 2).toUpperCase()
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm truncate leading-tight", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] opacity-70 leading-tight", children: "AI Assistant" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onReset,
+              className: "rounded-full p-1.5 transition-colors hover:bg-white/10",
+              title: "New conversation",
+              children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-3.5 w-3.5", style: { color: headerText } })
+            }
+          ),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "rounded-full p-1.5 transition-colors hover:bg-white/10",
+              title: "Close",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5", style: { color: headerText } })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var Avatar2 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: ["relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className].filter(Boolean).join(" "), ...p });
+var AvatarImage2 = AvatarPrimitive.Image;
+var AvatarFallback2 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: ["flex h-full w-full items-center justify-center rounded-full bg-muted", className].filter(Boolean).join(" "), ...p });
+var cn = (...inputs) => twMerge(clsx(inputs));
+var ReactMarkdown = ReactMarkdownLib;
+function ThinkingDots() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes wDotBounce {
+          0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
+          40% { transform: translateY(-6px) scale(1.15); opacity: 1; }
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-muted",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          borderRadius: "18px 18px 18px 4px",
+          padding: "13px 18px"
+        },
+        children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "block",
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              backgroundColor: "currentColor",
+              animation: `wDotBounce 1.2s cubic-bezier(0.4,0,0.2,1) ${i * 0.16}s infinite`
+            }
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+function ToolCallBadge({ part }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground bg-muted/60 border rounded-full px-3 py-1 w-fit", children: [
+    part.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+    part.status === "done" && /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-500" }),
+    part.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      part.status === "running" ? "Calling" : part.status === "done" ? "Called" : "Failed",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: formatToolName(part.toolName) })
+    ] })
+  ] });
+}
+function ReasoningBlock({ text }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx("span", { children: "Reasoning" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground/80 whitespace-pre-wrap border-l-2 border-muted pl-2 leading-relaxed", children: text })
+  ] });
+}
+function MessageBubble({
+  message,
+  userColor,
+  agentName,
+  profilePicture,
+  isStreaming,
+  showThinking = true
+}) {
+  const isUser = message.role === "user";
+  const textPart = message.parts.find((p) => p.type === "text");
+  const reasoningPart = message.parts.find((p) => p.type === "reasoning");
+  const toolParts = message.parts.filter((p) => p.type === "tool");
+  const contrastColor = getContrastColor(userColor);
+  if (isUser) {
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "max-w-[78%] rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed",
+        style: { backgroundColor: userColor, color: contrastColor },
+        children: textPart?.text
+      }
+    ) });
+  }
+  const visibleToolParts = showThinking ? toolParts : [];
+  const isEmpty = !textPart?.text && visibleToolParts.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
+    /* @__PURE__ */ jsx(Avatar2, { className: "h-7 w-7 shrink-0 mt-0.5 border", children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback2, { className: "text-[10px] font-semibold bg-primary text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
+      showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
+      visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
+      isEmpty && isStreaming ? /* @__PURE__ */ jsx(ThinkingDots, {}) : textPart?.text ? /* @__PURE__ */ jsxs("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed overflow-hidden prose prose-sm max-w-none prose-p:my-1 prose-headings:font-semibold prose-headings:my-1.5 prose-ul:my-1 prose-li:my-0.5 prose-strong:font-semibold", children: [
+        /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            remarkPlugins: [remarkGfm],
+            components: {
+              p: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "4px 0" }, children }),
+              h1: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 700, fontSize: "1em" }, children }),
+              h2: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 700, fontSize: "1em" }, children }),
+              h3: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "6px 0", fontWeight: 600, fontSize: "0.95em" }, children }),
+              ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
+              ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "4px 0", paddingLeft: 16 }, children }),
+              li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { margin: "2px 0" }, children }),
+              strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children }),
+              code: ({ children }) => /* @__PURE__ */ jsx("code", { style: { fontSize: "0.85em", backgroundColor: "rgba(0,0,0,0.07)", borderRadius: 4, padding: "1px 5px", fontFamily: "monospace" }, children }),
+              pre: ({ children }) => /* @__PURE__ */ jsx("pre", { style: { overflowX: "auto", margin: "6px 0", padding: "8px 10px", backgroundColor: "rgba(0,0,0,0.06)", borderRadius: 8, fontSize: "0.82em", fontFamily: "monospace" }, children }),
+              a: ({ href, children }) => /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: "underline", opacity: 0.75 }, children }),
+              table: ({ children }) => /* @__PURE__ */ jsx("div", { style: { overflowX: "auto", margin: "6px 0", borderRadius: 8, border: "1px solid rgba(0,0,0,0.1)" }, children: /* @__PURE__ */ jsx("table", { style: { borderCollapse: "collapse", minWidth: "100%", fontSize: "0.82em" }, children }) }),
+              thead: ({ children }) => /* @__PURE__ */ jsx("thead", { style: { backgroundColor: "rgba(0,0,0,0.04)" }, children }),
+              tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
+              tr: ({ children }) => /* @__PURE__ */ jsx("tr", { style: { borderBottom: "1px solid rgba(0,0,0,0.07)" }, children }),
+              th: ({ children }) => /* @__PURE__ */ jsx("th", { style: { padding: "6px 10px", textAlign: "left", fontWeight: 600, whiteSpace: "nowrap" }, children }),
+              td: ({ children }) => /* @__PURE__ */ jsx("td", { style: { padding: "5px 10px", verticalAlign: "top" }, children })
+            },
+            children: textPart.text
+          }
+        ),
+        isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-3.5 bg-foreground/60 ml-0.5 animate-pulse align-middle" })
+      ] }) : null
+    ] })
+  ] });
+}
+var Avatar3 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: ["relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className].filter(Boolean).join(" "), ...p });
+var AvatarImage3 = AvatarPrimitive.Image;
+var AvatarFallback3 = ({ className, ...p }) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: ["flex h-full w-full items-center justify-center rounded-full bg-muted", className].filter(Boolean).join(" "), ...p });
+function ChatMessages({
+  messages,
+  streaming,
+  agentName,
+  profilePicture,
+  userColor,
+  initialMessages = [],
+  suggestedMessages = [],
+  showThinking = true,
+  onSuggest
+}) {
+  const bottomRef = useRef(null);
+  const showGreeting = messages.length === 0;
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-y-auto overscroll-contain", children: [
+    showGreeting && /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start px-4 pt-4", children: [
+      /* @__PURE__ */ jsx(Avatar3, { className: "h-7 w-7 shrink-0 mt-0.5 border", children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage3, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback3, { className: "text-[10px] font-semibold bg-primary text-primary-foreground", children: agentName.slice(0, 2).toUpperCase() }) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed max-w-[82%]", children: initialMessages[0] ?? "Hello! How can I help you today?" })
+    ] }),
+    showGreeting && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-4 py-4", children: messages.map((msg, i) => /* @__PURE__ */ jsx(
+      MessageBubble,
+      {
+        message: msg,
+        userColor,
+        agentName,
+        profilePicture,
+        isStreaming: streaming && i === messages.length - 1 && msg.role === "assistant",
+        showThinking
+      },
+      msg.id
+    )) }),
+    showGreeting && suggestedMessages.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 px-4 pb-4", children: suggestedMessages.map((msg, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onSuggest(msg),
+        disabled: streaming,
+        className: "text-xs border rounded-full px-3 py-1.5 hover:bg-muted transition-colors text-left disabled:opacity-50",
+        children: msg
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("div", { ref: bottomRef })
+  ] });
+}
+var cn2 = (...inputs) => twMerge(clsx(inputs));
+function ChatInput({
+  input,
+  setInput,
+  onSend,
+  streaming,
+  placeholder,
+  accentColor
+}) {
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (!input && textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [input]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+  const hasText = input.trim().length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t bg-background px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2 rounded-2xl border bg-background px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-ring/40 transition-shadow", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        rows: 1,
+        className: "flex-1 resize-none bg-transparent text-sm outline-none placeholder:text-muted-foreground/50 leading-relaxed max-h-32 overflow-y-auto py-0.5",
+        placeholder: placeholder ?? "Send a message\u2026",
+        value: input,
+        onChange: (e) => {
+          setInput(e.target.value);
+          e.target.style.height = "auto";
+          e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
+        },
+        onKeyDown: handleKeyDown,
+        disabled: streaming,
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onSend,
+        disabled: streaming || !hasText,
+        className: cn2(
+          "h-7 w-7 shrink-0 rounded-xl flex items-center justify-center transition-all duration-200",
+          hasText || streaming ? "opacity-100 shadow-sm" : "opacity-30"
+        ),
+        style: hasText || streaming ? { backgroundColor: accentColor, color: getContrastColor(accentColor) } : { backgroundColor: "transparent", color: "currentColor" },
+        children: streaming ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] }) });
+}
+var cn3 = (...inputs) => twMerge(clsx(inputs));
+function ChatWidget({
+  agentId,
+  workspaceId,
+  agentName,
+  displayName,
+  profilePicture,
+  userMessageColor = "#19191c",
+  initialMessages = ["Hello! How can I help you today?"],
+  suggestedMessages = [],
+  messagePlaceholder,
+  watermark = true,
+  watermarkLogoUrl = "https://wallavi.com/wallavi.svg",
+  footer,
+  theme,
+  showThinking = false,
+  source = "playground",
+  className,
+  onClose,
+  onReset
+}) {
+  const chat = useChat({ agentId, workspaceId, source });
+  const title = displayName || agentName;
+  const headerBg = userMessageColor;
+  const headerText = getContrastColor(userMessageColor);
+  const handleReset = () => {
+    chat.reset();
+    onReset?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn3(
+        "flex flex-col overflow-hidden rounded-2xl border shadow-xl bg-background",
+        className
+      ),
+      style: { colorScheme: theme },
+      children: [
+        /* @__PURE__ */ jsx(
+          ChatHeader,
+          {
+            title,
+            profilePicture,
+            headerBg,
+            headerText,
+            onReset: handleReset,
+            onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChatMessages,
+          {
+            messages: chat.messages,
+            streaming: chat.streaming,
+            agentName,
+            profilePicture,
+            userColor: userMessageColor,
+            initialMessages,
+            suggestedMessages,
+            showThinking,
+            onSuggest: (msg) => chat.send(msg)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChatInput,
+          {
+            input: chat.input,
+            setInput: chat.setInput,
+            onSend: () => chat.send(),
+            streaming: chat.streaming,
+            placeholder: messagePlaceholder,
+            accentColor: userMessageColor
+          }
+        ),
+        watermark && /* @__PURE__ */ jsxs("footer", { className: "shrink-0 flex items-center justify-center gap-1.5 bg-muted/50 py-1.5 border-t", children: [
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: "https://wallavi.com",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors",
+              children: [
+                /* @__PURE__ */ jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
+                /* @__PURE__ */ jsx("span", { children: "Powered by Wallavi" })
+              ]
+            }
+          ),
+          footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40 text-[10px]", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: footer })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ChatWidget, formatToolName, getContrastColor, useChat };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@wallavi/typescript-config": "workspace:*",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "exports": {
+    ".": {
+      "default": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./src/index.ts",
+  "name": "@wallavi/widget",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "types": "./src/index.ts",
+  "version": "1.0.0"
+}