@coral-ai/chat 0.3.0

package/dist/index.js

@@ -0,0 +1,1537 @@
+// src/Chat.tsx
+import {
+  InteractionTag,
+  InteractionTagPrimary,
+  makeStyles as makeStyles8,
+  motionTokens
+} from "@fluentui/react-components";
+
+// src/Chat.Canvas.tsx
+import { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
+import { Button, makeStyles, tokens } from "@fluentui/react-components";
+import { ArrowDown } from "@coral-ai/bundleicons";
+
+// src/Chat.Context.tsx
+import { createContext, useContext } from "react";
+var ChatContext = createContext({});
+function useChatContext() {
+  return useContext(ChatContext);
+}
+
+// src/Chat.Canvas.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var useStyles = makeStyles({
+  root: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    flex: "1",
+    minHeight: "0",
+    position: "relative"
+  },
+  scrollToBottom: {
+    position: "absolute",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 1e3,
+    cursor: "pointer",
+    boxShadow: tokens.shadow8,
+    marginBottom: "16px"
+  }
+});
+function isAsyncIterable(value) {
+  return value !== null && typeof value === "object" && Symbol.asyncIterator in value;
+}
+function isRateLimitError(err) {
+  const e = err;
+  const status = Number(e?.status ?? e?.statusCode ?? 0);
+  const msg = String(e?.message ?? "").toLowerCase();
+  return status === 429 || msg.includes("rate limit") || msg.includes("too many requests");
+}
+var ChatCanvas = ({
+  agent,
+  agents,
+  conversationId,
+  initialMessages,
+  systemPrompt,
+  onSendMessage,
+  onMessageComplete,
+  onMessagesChange,
+  onError,
+  autoSendMessage,
+  thinkingStatus,
+  onStop,
+  children
+}) => {
+  const styles = useStyles();
+  const agentKey = agent ?? "default";
+  const resolvedHandler = onSendMessage ?? agents?.[agentKey]?.handler ?? agents?.["default"]?.handler;
+  const [messages, setMessages] = useState(initialMessages ?? []);
+  const [input, setInput] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [chatError, setChatError] = useState(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [inputHeight, setInputHeightState] = useState(0);
+  const [isInterrupted, setIsInterrupted] = useState(false);
+  const [streamingReasoning, setStreamingReasoning] = useState("");
+  const [streamingAgentName, setStreamingAgentName] = useState();
+  const [attachments, setAttachments] = useState([]);
+  const reasoningRef = useRef("");
+  const lastUserInputRef = useRef("");
+  const hasEverSentRef = useRef(false);
+  const currentConversationIdRef = useRef(conversationId);
+  const messagesContainerRef = useRef(null);
+  const [messagesEl, setMessagesEl] = useState(null);
+  const bottomRef = useRef(null);
+  const shouldStopRef = useRef(false);
+  const userScrolledUpRef = useRef(false);
+  useEffect(() => {
+    setMessages((current) => {
+      if ((initialMessages?.length ?? 0) > 0 || current.length === 0) {
+        return initialMessages ?? [];
+      }
+      return current;
+    });
+  }, [initialMessages]);
+  useEffect(() => {
+    currentConversationIdRef.current = conversationId;
+  }, [conversationId]);
+  const autoSentRef = useRef(false);
+  useEffect(() => {
+    if (autoSendMessage?.trim() && !autoSentRef.current) {
+      autoSentRef.current = true;
+      sendMessage(autoSendMessage);
+    }
+  }, []);
+  const registerMessagesContainer = useCallback((el) => {
+    messagesContainerRef.current = el;
+    setMessagesEl(el);
+  }, []);
+  useLayoutEffect(() => {
+    if (!userScrolledUpRef.current) {
+      if (messagesEl) {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+      setShowScrollButton(false);
+    }
+  }, [messages, messagesEl]);
+  useEffect(() => {
+    const container = messagesEl;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 80;
+      userScrolledUpRef.current = !atBottom;
+      setShowScrollButton(!atBottom);
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [messagesEl]);
+  const scrollToBottom = () => {
+    userScrolledUpRef.current = false;
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    setShowScrollButton(false);
+  };
+  const handleCopy = (content) => {
+    navigator.clipboard.writeText(content).catch(console.error);
+  };
+  const addAttachments = (files) => {
+    const newItems = files.map((file) => {
+      const attachment = { id: crypto.randomUUID(), file };
+      if (file.type.startsWith("image/")) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const preview = e.target?.result;
+          setAttachments(
+            (prev) => prev.map((a) => a.id === attachment.id ? { ...a, preview } : a)
+          );
+        };
+        reader.readAsDataURL(file);
+      }
+      return attachment;
+    });
+    setAttachments((prev) => [...prev, ...newItems]);
+  };
+  const removeAttachment = (id) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  };
+  const sendMessage = async (overrideInput) => {
+    const textToSend = overrideInput ?? input;
+    if (!textToSend.trim()) return;
+    hasEverSentRef.current = true;
+    const sessionAtSend = conversationId;
+    const baseMessages = overrideInput ? messages.filter((_, i) => i < messages.length - 2) : messages;
+    const snapshotAttachments = attachments;
+    const attachmentMeta = snapshotAttachments.map((a) => ({
+      name: a.file.name,
+      type: a.file.type,
+      preview: a.preview
+    }));
+    const updatedMessages = [
+      ...baseMessages,
+      {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: textToSend.replace(/^[\n\r]+|[\n\r]+$/g, ""),
+        ...attachmentMeta.length > 0 ? { metadata: { attachments: attachmentMeta } } : {}
+      }
+    ];
+    lastUserInputRef.current = textToSend;
+    userScrolledUpRef.current = false;
+    setMessages(updatedMessages);
+    onMessagesChange?.(updatedMessages, sessionAtSend);
+    if (!overrideInput) setInput("");
+    setAttachments([]);
+    setIsTyping(true);
+    setIsInterrupted(false);
+    setChatError(null);
+    shouldStopRef.current = false;
+    reasoningRef.current = "";
+    setStreamingReasoning("");
+    setStreamingAgentName(void 0);
+    const historyForAI = systemPrompt ? [{ role: "system", content: systemPrompt }, ...updatedMessages] : updatedMessages;
+    const MAX_RETRIES = 3;
+    try {
+      if (resolvedHandler) {
+        for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+          try {
+            const assistantId = crypto.randomUUID();
+            const placeholder = [...updatedMessages, { id: assistantId, role: "assistant", content: "" }];
+            setMessages(placeholder);
+            onMessagesChange?.(placeholder, sessionAtSend);
+            const response = await resolvedHandler(textToSend, historyForAI, snapshotAttachments.map((a) => a.file));
+            if (isAsyncIterable(response)) {
+              let assistantContent = "";
+              let rafId = null;
+              let pendingContent = "";
+              for await (const chunk of response) {
+                if (shouldStopRef.current) break;
+                if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) break;
+                if (typeof chunk === "string") {
+                  assistantContent += chunk;
+                  pendingContent = assistantContent;
+                  if (rafId === null) {
+                    rafId = requestAnimationFrame(() => {
+                      const content = pendingContent;
+                      const nextMsg = { id: assistantId, role: "assistant", content };
+                      setMessages((prev) => {
+                        const updated = [...prev];
+                        updated[updated.length - 1] = nextMsg;
+                        return updated;
+                      });
+                      onMessagesChange?.([...updatedMessages, nextMsg], sessionAtSend);
+                      rafId = null;
+                    });
+                  }
+                } else if (chunk.type === "reasoning") {
+                  reasoningRef.current += chunk.content;
+                  setStreamingReasoning(reasoningRef.current);
+                } else if (chunk.type === "agent") {
+                  setStreamingAgentName(chunk.name);
+                }
+              }
+              if (rafId !== null) cancelAnimationFrame(rafId);
+              if (shouldStopRef.current) setIsInterrupted(true);
+              if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) {
+                break;
+              }
+              const finalMsg = {
+                id: assistantId,
+                role: "assistant",
+                content: assistantContent,
+                ...reasoningRef.current ? { metadata: { reasoning: reasoningRef.current } } : {}
+              };
+              const finalMessages = [...updatedMessages, finalMsg];
+              setMessages(finalMessages);
+              onMessagesChange?.(finalMessages, sessionAtSend);
+              onMessageComplete?.(finalMessages, sessionAtSend);
+            } else if (typeof response === "string") {
+              if (currentConversationIdRef.current !== sessionAtSend) break;
+              const finalMessages = [...updatedMessages, { id: assistantId, role: "assistant", content: response }];
+              setMessages(finalMessages);
+              onMessagesChange?.(finalMessages, sessionAtSend);
+              onMessageComplete?.(finalMessages, sessionAtSend);
+            } else {
+              if (currentConversationIdRef.current !== sessionAtSend) break;
+              const assistantMsg = {
+                id: assistantId,
+                role: "assistant",
+                content: response.content,
+                type: response.type,
+                metadata: response.metadata
+              };
+              const finalMessages = [...updatedMessages, assistantMsg];
+              setMessages(finalMessages);
+              onMessagesChange?.(finalMessages, sessionAtSend);
+              onMessageComplete?.(finalMessages, sessionAtSend);
+            }
+            break;
+          } catch (err) {
+            if (isRateLimitError(err) && attempt < MAX_RETRIES - 1) {
+              setIsRetrying(true);
+              await new Promise((r) => setTimeout(r, (attempt + 1) * 3e3));
+              continue;
+            }
+            throw err;
+          }
+        }
+      }
+    } catch (err) {
+      onError?.(err);
+      setChatError(err);
+    } finally {
+      setIsRetrying(false);
+      setIsTyping(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ChatContext.Provider,
+    {
+      value: {
+        sendMessage,
+        scrollToBottom,
+        handleCopy,
+        messages,
+        setMessages,
+        input,
+        setInput,
+        isTyping,
+        isRetrying,
+        isInterrupted,
+        streamingReasoning,
+        streamingAgentName,
+        thinkingStatus,
+        chatError,
+        showScrollButton,
+        setInputHeight: setInputHeightState,
+        messagesContainerRef,
+        registerMessagesContainer,
+        bottomRef,
+        lastUserInputRef,
+        hasEverSentRef,
+        shouldStopRef,
+        onStop,
+        attachments,
+        addAttachments,
+        removeAttachment
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+        children,
+        showScrollButton && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: scrollToBottom,
+            className: styles.scrollToBottom,
+            shape: "circular",
+            style: {
+              bottom: inputHeight + 16,
+              backgroundColor: "transparent",
+              border: `1px solid ${tokens.colorNeutralStroke3}`,
+              backdropFilter: "saturate(180%) blur(16px)"
+            },
+            icon: /* @__PURE__ */ jsx(ArrowDown, { style: { fontSize: "16px" } })
+          }
+        )
+      ] })
+    }
+  );
+};
+var Chat_Canvas_default = ChatCanvas;
+
+// src/Chat.Messages.tsx
+import React4, { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { Body1 as Body14, Button as Button4, makeStyles as makeStyles6, tokens as tokens6 } from "@fluentui/react-components";
+import { Copy, Heart } from "@coral-ai/bundleicons";
+import { CoralMarkdown } from "@coral-ai/markdown";
+
+// src/Chat.ThinkingIndicator.tsx
+import { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { makeStyles as makeStyles2, tokens as tokens2 } from "@fluentui/react-components";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var thinkingMessages = [
+  "Generating",
+  "Thinking",
+  "Optimizing",
+  "Processing",
+  "Analyzing",
+  "Reasoning",
+  "Drafting",
+  "Evaluating",
+  "Computing",
+  "Synthesizing",
+  "Reviewing",
+  "Refining"
+];
+var retryingMessages = [
+  "Still working",
+  "Awaiting",
+  "Hang tight",
+  "One moment",
+  "Almost there",
+  "Just a moment",
+  "Reconnecting"
+];
+var TYPING_SPEED = 80;
+var HOLD_DURATION = 1300;
+var SPINNER_BG = "#000000";
+var useStyles2 = makeStyles2({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    width: "100%",
+    color: tokens2.colorNeutralForeground3
+    // fontSize: "14px",
+  },
+  icon: {
+    width: "28px",
+    height: "28px",
+    flexShrink: 0,
+    border: `3px solid ${SPINNER_BG}`,
+    boxSizing: "border-box",
+    backgroundColor: "${SPINNER_BG}",
+    opacity: 0.8,
+    backgroundImage: [
+      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
+      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
+      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
+      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
+      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
+      `linear-gradient(${tokens2.colorNeutralForeground1} 0 0)`,
+      `linear-gradient(${tokens2.colorNeutralForeground1} 0 0)`
+    ].join(", "),
+    backgroundSize: "7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 100% 3px, 3px 100%",
+    backgroundPosition: "50%, 50%, 50%, 50%, 50%, 50%, 50%",
+    backgroundRepeat: "no-repeat",
+    filter: "blur(2px) contrast(10)",
+    animationName: {
+      "100%": {
+        backgroundPosition: "50% -7px, -7px 50%, 22px 50%, 50% 22px, 50%, 50%, 50%"
+      }
+    },
+    animationDuration: "0.8s",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "ease"
+  },
+  text: {
+    // fontFamily: tokens.fontFamilyBase,
+    // fontSize: tokens.fontSizeBase200,
+    // color: tokens.colorNeutralForeground3,
+    fontFamily: "var(--fontFamilyMonospace)",
+    minWidth: "0"
+  },
+  cursor: {
+    display: "inline-block",
+    width: "6px",
+    height: "1em",
+    backgroundColor: tokens2.colorNeutralForeground3,
+    marginLeft: "1px",
+    verticalAlign: "text-bottom",
+    animationName: {
+      "0%, 100%": { opacity: "1" },
+      "50%": { opacity: "0" }
+    },
+    animationDuration: "0.9s",
+    animationTimingFunction: "step-end",
+    animationIterationCount: "infinite"
+  }
+});
+var ThinkingIndicator = ({ isRetrying = false, status }) => {
+  const styles = useStyles2();
+  const [displayText, setDisplayText] = useState2("");
+  const timerRef = useRef2(void 0);
+  const msgIdxRef = useRef2(0);
+  const charIdxRef = useRef2(0);
+  useEffect2(() => {
+    const pool = isRetrying ? retryingMessages : thinkingMessages;
+    msgIdxRef.current = 0;
+    charIdxRef.current = 0;
+    const tick = () => {
+      const word = pool[msgIdxRef.current];
+      if (charIdxRef.current < word.length) {
+        charIdxRef.current += 1;
+        setDisplayText(word.slice(0, charIdxRef.current));
+        timerRef.current = setTimeout(tick, TYPING_SPEED);
+      } else {
+        timerRef.current = setTimeout(() => {
+          msgIdxRef.current = (msgIdxRef.current + 1) % pool.length;
+          charIdxRef.current = 0;
+          tick();
+        }, HOLD_DURATION);
+      }
+    };
+    tick();
+    return () => clearTimeout(timerRef.current);
+  }, [isRetrying]);
+  return /* @__PURE__ */ jsxs2("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx2("div", { className: styles.icon }),
+    /* @__PURE__ */ jsxs2("span", { className: styles.text, children: [
+      status ?? displayText,
+      /* @__PURE__ */ jsx2("span", { className: styles.cursor })
+    ] })
+  ] });
+};
+var Chat_ThinkingIndicator_default = ThinkingIndicator;
+
+// src/Chat.Callout.tsx
+import { Body1, Button as Button2, makeStyles as makeStyles3, mergeClasses, tokens as tokens3 } from "@fluentui/react-components";
+import { ChatWarning20Regular } from "@fluentui/react-icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var useStyles3 = makeStyles3({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "12px 12px",
+    borderRadius: tokens3.borderRadiusXLarge,
+    backgroundColor: tokens3.colorNeutralBackground3,
+    border: `1px solid ${tokens3.colorNeutralStroke2}`,
+    color: tokens3.colorNeutralForeground3,
+    width: "100%",
+    boxSizing: "border-box",
+    margin: "24px 0"
+  },
+  left: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  label: {
+    fontFamily: "var(--fontFamilyMonospace)"
+  },
+  retryButton: {
+    minWidth: 0
+  }
+});
+var ChatCallout = ({ message, onRetry, className }) => {
+  const styles = useStyles3();
+  return /* @__PURE__ */ jsxs3("div", { className: mergeClasses(styles.root, className), children: [
+    /* @__PURE__ */ jsxs3("span", { className: styles.left, children: [
+      /* @__PURE__ */ jsx3(ChatWarning20Regular, {}),
+      /* @__PURE__ */ jsx3(Body1, { className: styles.label, children: message })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx3(
+      Button2,
+      {
+        onClick: onRetry,
+        className: styles.retryButton,
+        size: "small",
+        appearance: "primary",
+        children: "Retry"
+      }
+    )
+  ] });
+};
+var Chat_Callout_default = ChatCallout;
+
+// src/Chat.Error.tsx
+import { Body1 as Body12, Button as Button3, makeStyles as makeStyles4, tokens as tokens4 } from "@fluentui/react-components";
+import {
+  ErrorCircle20Regular,
+  Clock20Regular,
+  LockClosed20Regular,
+  PlugDisconnected20Regular,
+  Warning20Regular
+} from "@fluentui/react-icons";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function normalizeChatError(err) {
+  const anyErr = err;
+  const rawMessage = String(
+    anyErr?.message ?? anyErr?.error?.message ?? err ?? ""
+  ).toLowerCase();
+  const status = Number(anyErr?.status ?? anyErr?.statusCode ?? 0);
+  const errorType = String(
+    anyErr?.error?.type ?? anyErr?.type ?? anyErr?.code ?? ""
+  );
+  const errorCode = String(
+    anyErr?.error?.code ?? anyErr?.code ?? ""
+  );
+  if (rawMessage.includes("credit") || rawMessage.includes("billing") || rawMessage.includes("insufficient_quota") || errorCode === "insufficient_quota" || errorType === "PERMISSION_DENIED") {
+    return {
+      category: "auth_billing",
+      message: "API credits exhausted. Add credits in your provider's billing dashboard."
+    };
+  }
+  if (errorType === "rate_limit_error" || rawMessage.includes("rate limit") || rawMessage.includes("too many requests")) {
+    return {
+      category: "rate_limit",
+      message: "You're being rate limited. Wait a moment and try again."
+    };
+  }
+  if (status === 529 || status === 503 || errorType === "overloaded_error" || errorType === "RESOURCE_EXHAUSTED" || rawMessage.includes("overload") || rawMessage.includes("capacity")) {
+    return {
+      category: "overloaded",
+      message: "The AI service is overloaded right now. Try again in a few seconds."
+    };
+  }
+  if (status === 404 || errorType === "NOT_FOUND" || rawMessage.includes("model_not_found") || rawMessage.includes("not found")) {
+    return {
+      category: "not_found",
+      message: "Model not found. Check the model name in your configuration."
+    };
+  }
+  if (status === 400 || errorType === "invalid_request_error" || errorType === "INVALID_ARGUMENT") {
+    return {
+      category: "bad_input",
+      message: "The request was invalid. Check your message or API configuration."
+    };
+  }
+  if (status >= 500 || errorType === "api_error" || errorType === "INTERNAL") {
+    return {
+      category: "server_error",
+      message: "The AI service hit an internal error. Try again shortly."
+    };
+  }
+  return {
+    category: "unknown",
+    message: "Something went wrong. Check your connection and try again."
+  };
+}
+var useStyles4 = makeStyles4({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "12px",
+    borderRadius: tokens4.borderRadiusXLarge,
+    backgroundColor: tokens4.colorNeutralBackground3,
+    border: `1px solid ${tokens4.colorNeutralStroke2}`,
+    color: tokens4.colorNeutralForeground3,
+    width: "100%",
+    boxSizing: "border-box",
+    margin: "8px 0"
+  },
+  left: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    minWidth: 0
+  },
+  message: {
+    fontFamily: "var(--fontFamilyMonospace)"
+  }
+});
+var categoryIcon = {
+  auth_billing: /* @__PURE__ */ jsx4(LockClosed20Regular, {}),
+  rate_limit: /* @__PURE__ */ jsx4(Clock20Regular, {}),
+  overloaded: /* @__PURE__ */ jsx4(PlugDisconnected20Regular, {}),
+  bad_input: /* @__PURE__ */ jsx4(Warning20Regular, {}),
+  not_found: /* @__PURE__ */ jsx4(ErrorCircle20Regular, {}),
+  server_error: /* @__PURE__ */ jsx4(ErrorCircle20Regular, {}),
+  unknown: /* @__PURE__ */ jsx4(Warning20Regular, {})
+};
+var ChatError = ({ error, onRetry }) => {
+  const styles = useStyles4();
+  const { category, message } = normalizeChatError(error);
+  return /* @__PURE__ */ jsxs4("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsxs4("span", { className: styles.left, children: [
+      categoryIcon[category],
+      /* @__PURE__ */ jsx4(Body12, { className: styles.message, children: message })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx4(
+      Button3,
+      {
+        size: "small",
+        appearance: "primary",
+        onClick: onRetry,
+        children: "Retry"
+      }
+    )
+  ] });
+};
+var Chat_Error_default = ChatError;
+
+// src/Chat.ReasoningBlock.tsx
+import { useState as useState3, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Body1 as Body13, makeStyles as makeStyles5, tokens as tokens5 } from "@fluentui/react-components";
+import { ChevronRight16Regular } from "@fluentui/react-icons";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var useStyles5 = makeStyles5({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    margin: "12px 0 40px 0"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0",
+    cursor: "pointer",
+    background: "none",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    gap: "8px"
+  },
+  labelRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    minWidth: 0
+  },
+  pulseContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px"
+  },
+  pulse: {
+    flexShrink: 0,
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: tokens5.colorNeutralForeground3,
+    animationName: {
+      "0%, 100%": { opacity: "1" },
+      "50%": { opacity: "0.2" }
+    },
+    animationDuration: "1.2s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite"
+  },
+  pulseDone: {
+    flexShrink: 0,
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: tokens5.colorBrandForeground1
+  },
+  label: {
+    color: tokens5.colorNeutralForeground3,
+    flexShrink: 0,
+    marginBottom: "2px"
+  },
+  chevron: {
+    color: tokens5.colorNeutralForeground3,
+    flexShrink: 0,
+    transition: "transform 0.2s ease"
+  },
+  chevronExpanded: {
+    color: tokens5.colorNeutralForeground3,
+    flexShrink: 0,
+    transition: "transform 0.2s ease",
+    transform: "rotate(90deg)"
+  },
+  expanded: {
+    padding: "16px 0 0 0",
+    marginLeft: "22px",
+    fontSize: tokens5.fontSizeBase300,
+    color: tokens5.colorNeutralForeground3,
+    fontFamily: "var(--fontFamilyMonospace)",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+    // maxHeight: "320px",
+    // overflowY: "auto",
+  }
+});
+var ReasoningBlock = ({
+  content,
+  isStreaming = false
+}) => {
+  const styles = useStyles5();
+  const [expanded, setExpanded] = useState3(false);
+  const [duration, setDuration] = useState3(null);
+  const startTimeRef = useRef3(null);
+  useEffect3(() => {
+    if (isStreaming) {
+      startTimeRef.current = Date.now();
+      setDuration(null);
+    } else if (startTimeRef.current !== null) {
+      setDuration(Math.round((Date.now() - startTimeRef.current) / 1e3));
+      startTimeRef.current = null;
+    }
+  }, [isStreaming]);
+  const label = isStreaming ? "Thinking" : duration !== null ? `Thought for ${duration}s` : "Thought";
+  return /* @__PURE__ */ jsxs5("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx5("button", { className: styles.header, onClick: () => setExpanded((e) => !e), children: /* @__PURE__ */ jsxs5("div", { className: styles.labelRow, children: [
+      /* @__PURE__ */ jsx5("div", { className: styles.pulseContainer, children: /* @__PURE__ */ jsx5("span", { className: isStreaming ? styles.pulse : styles.pulseDone }) }),
+      /* @__PURE__ */ jsx5(Body13, { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx5(
+        ChevronRight16Regular,
+        {
+          className: expanded ? styles.chevronExpanded : styles.chevron
+        }
+      )
+    ] }) }),
+    expanded && /* @__PURE__ */ jsx5("div", { className: styles.expanded, children: content })
+  ] });
+};
+var Chat_ReasoningBlock_default = ReasoningBlock;
+
+// src/Chat.Messages.tsx
+import { CheckmarkCircle20Filled } from "@fluentui/react-icons";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var useStyles6 = makeStyles6({
+  messages: {
+    flex: "1",
+    overflowY: "auto",
+    overflowX: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "40px 0",
+    boxSizing: "border-box",
+    scrollbarGutter: "stable both-edges"
+  },
+  messageWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    width: "100%",
+    maxWidth: "768px",
+    padding: "0 16px",
+    boxSizing: "border-box"
+  },
+  messageUser: {
+    alignSelf: "flex-end",
+    maxWidth: "80%",
+    backgroundColor: tokens6.colorNeutralBackground2,
+    color: tokens6.colorNeutralForeground2,
+    border: `1px solid ${tokens6.colorNeutralStroke2}`,
+    padding: "8px 12px",
+    borderRadius: tokens6.borderRadiusXLarge,
+    wordBreak: "break-word",
+    boxSizing: "border-box"
+  },
+  messageAssistant: {
+    alignSelf: "flex-start",
+    width: "100%",
+    color: tokens6.colorNeutralForeground2,
+    wordBreak: "break-word",
+    boxSizing: "border-box"
+  },
+  assistantFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "6px",
+    marginLeft: "-10px"
+  },
+  assistantActions: {
+    display: "flex"
+  }
+});
+var ChatMessages = ({
+  components,
+  onFeedback,
+  onCopy,
+  onNavigate,
+  fontSize,
+  fontFamily
+}) => {
+  const styles = useStyles6();
+  const ctx = useChatContext();
+  const {
+    messages,
+    setMessages,
+    isTyping,
+    isRetrying,
+    isInterrupted,
+    streamingReasoning,
+    streamingAgentName,
+    thinkingStatus,
+    chatError,
+    sendMessage,
+    handleCopy,
+    lastUserInputRef,
+    registerMessagesContainer,
+    bottomRef
+  } = ctx;
+  const containerRef = useRef4(null);
+  const [copiedIndex, setCopiedIndex] = useState4(null);
+  const copiedTimerRef = useRef4(null);
+  useEffect4(() => {
+    registerMessagesContainer(containerRef.current);
+    return () => registerMessagesContainer(null);
+  }, []);
+  const onCopyMerged = (content, index) => {
+    handleCopy(content);
+    onCopy?.(content);
+    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    setCopiedIndex(index);
+    copiedTimerRef.current = setTimeout(() => setCopiedIndex(null), 1500);
+  };
+  const renderAssistantMessage = (msg, index) => {
+    const isLatest = index === messages.length - 1;
+    const reasoning = isLatest && isTyping ? streamingReasoning : msg.metadata?.reasoning;
+    if (msg.type && components?.[msg.type]) {
+      const CustomRenderer = components[msg.type];
+      return /* @__PURE__ */ jsx6(
+        CustomRenderer,
+        {
+          message: msg,
+          onReply: (content) => {
+            const updatedMessages = [
+              ...messages.slice(0, index + 1),
+              { role: "user", content }
+            ];
+            setMessages(updatedMessages);
+            sendMessage(content);
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs6("div", { children: [
+      reasoning && /* @__PURE__ */ jsx6(
+        Chat_ReasoningBlock_default,
+        {
+          content: reasoning,
+          isStreaming: isLatest && isTyping && !msg.content
+        }
+      ),
+      /* @__PURE__ */ jsx6(CoralMarkdown, { onNavigate, fontSize, fontFamily, children: msg.content }),
+      isInterrupted && !isTyping && index === messages.length - 1 && /* @__PURE__ */ jsx6(
+        Chat_Callout_default,
+        {
+          message: "Response was interrupted",
+          onRetry: () => sendMessage(lastUserInputRef.current)
+        }
+      ),
+      !(isTyping && isLatest) && /* @__PURE__ */ jsx6("div", { className: `${styles.assistantFooter} coral-assistant-footer`, children: /* @__PURE__ */ jsxs6("div", { className: styles.assistantActions, children: [
+        copiedIndex === index ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "32px",
+              height: "32px",
+              color: tokens6.colorPaletteSeafoamForeground2
+            },
+            children: /* @__PURE__ */ jsx6(CheckmarkCircle20Filled, {})
+          }
+        ) : /* @__PURE__ */ jsx6(
+          Button4,
+          {
+            onClick: () => onCopyMerged(msg.content, index),
+            title: "Copy Response",
+            appearance: "subtle",
+            style: { color: tokens6.colorNeutralForeground3 },
+            icon: /* @__PURE__ */ jsx6(Copy, {})
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          Button4,
+          {
+            onClick: () => onFeedback?.(index, "up"),
+            title: "Like",
+            appearance: "subtle",
+            style: { color: tokens6.colorNeutralForeground3 },
+            icon: /* @__PURE__ */ jsx6(Heart, {})
+          }
+        )
+      ] }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx6("div", { className: styles.messages, ref: containerRef, children: /* @__PURE__ */ jsxs6("div", { className: styles.messageWrapper, children: [
+    messages.map((msg, index) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: msg.role === "user" ? styles.messageUser : `${styles.messageAssistant} coral-message-assistant${index === messages.length - 1 ? " is-latest" : ""}`,
+        children: [
+          msg.role === "user" && Array.isArray(msg.metadata?.attachments) && /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "6px" }, children: msg.metadata.attachments.map(
+            (a, i) => a.type.startsWith("image/") && a.preview ? /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: a.preview,
+                alt: a.name,
+                style: { width: 64, height: 64, borderRadius: "var(--borderRadiusMedium)", objectFit: "cover" }
+              },
+              i
+            ) : /* @__PURE__ */ jsxs6(
+              "span",
+              {
+                style: {
+                  fontSize: 12,
+                  padding: "2px 8px",
+                  borderRadius: "var(--borderRadiusSmall)",
+                  backgroundColor: tokens6.colorNeutralBackground3,
+                  color: tokens6.colorNeutralForeground2
+                },
+                children: [
+                  "\u{1F4C4} ",
+                  a.name
+                ]
+              },
+              i
+            )
+          ) }),
+          /* @__PURE__ */ jsx6(Body14, { children: msg.role === "user" ? msg.content.split("\n").map((line, i, arr) => /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+            line,
+            i < arr.length - 1 && /* @__PURE__ */ jsx6("br", {})
+          ] }, i)) : renderAssistantMessage(msg, index) })
+        ]
+      },
+      msg.id ?? index
+    )),
+    chatError !== null && !isTyping && /* @__PURE__ */ jsx6(
+      Chat_Error_default,
+      {
+        error: chatError,
+        onRetry: () => sendMessage(lastUserInputRef.current)
+      }
+    ),
+    isTyping && /* @__PURE__ */ jsx6(
+      Chat_ThinkingIndicator_default,
+      {
+        isRetrying,
+        status: streamingAgentName ? `${streamingAgentName}...` : thinkingStatus
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { ref: bottomRef })
+  ] }) });
+};
+var Chat_Messages_default = ChatMessages;
+
+// src/Chat.Input.tsx
+import {
+  useRef as useRef5,
+  useState as useState5,
+  useEffect as useEffect5,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import { Body1 as Body15, Button as Button5, Tag, makeStyles as makeStyles7, tokens as tokens7 } from "@fluentui/react-components";
+import { Dismiss, Send, Stop } from "@coral-ai/bundleicons";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
+  wrapper: {
+    width: "100%",
+    margin: "0 auto"
+  },
+  card: {
+    display: "inline-flex",
+    flexDirection: "column",
+    gap: "8px",
+    alignItems: "stretch",
+    width: "100%",
+    padding: "8px",
+    borderRadius: "var(--borderRadiusXLarge)",
+    backgroundColor: "var(--colorNeutralBackgroundAlpha2)",
+    transition: "border-color 0.2s ease-in-out",
+    position: "relative",
+    boxSizing: "border-box",
+    overflow: "hidden"
+  },
+  cardFocused: {
+    boxShadow: tokens7.shadow28
+  },
+  cardDisabled: {
+    opacity: "0.3",
+    pointerEvents: "none"
+  },
+  attachmentsRow: {
+    display: "flex",
+    gap: "8px",
+    overflowX: "auto",
+    padding: "0 4px"
+  },
+  attachmentItem: {
+    position: "relative",
+    flexShrink: 0,
+    width: "128px",
+    height: "128px",
+    borderRadius: "var(--borderRadiusMedium)",
+    overflow: "hidden",
+    border: `1px solid ${tokens7.colorNeutralStroke2}`,
+    backgroundColor: "var(--colorNeutralBackground3)",
+    display: "flex",
+    flexDirection: "column"
+  },
+  attachmentImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  attachmentFile: {
+    padding: "12px",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    justifyContent: "space-between"
+  },
+  attachmentFileName: {
+    wordBreak: "break-all",
+    color: "var(--colorNeutralForeground2)",
+    overflow: "hidden",
+    maxHeight: "36px",
+    lineHeight: "1.2"
+  },
+  attachmentDismiss: {
+    position: "absolute",
+    top: "6px",
+    right: "6px"
+  },
+  textarea: {
+    resize: "none",
+    overflowY: "auto",
+    height: "auto",
+    minHeight: "24px",
+    maxHeight: "150px",
+    padding: "8px",
+    backgroundColor: "transparent",
+    border: "none",
+    outline: "none",
+    fontFamily: "var(--fontFamilyBase)",
+    fontSize: "var(--fontSizeBase300)",
+    fontWeight: "var(--fontWeightRegular)",
+    color: "var(--colorNeutralForeground1)",
+    lineHeight: "1.5",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    maxHeight: "32px"
+  },
+  toolbarSide: {
+    display: "flex",
+    alignItems: "center"
+  },
+  focusBar: {
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    width: "100%",
+    height: "2px",
+    backgroundColor: "var(--colorCompoundBrandStroke)",
+    transition: "transform 0.2s ease-in-out",
+    textAlign: "center"
+  },
+  focusBarVisible: {
+    transform: "scaleX(1)"
+  },
+  focusBarHidden: {
+    transform: "scaleX(0)"
+  }
+});
+var ChatInput = forwardRef(
+  ({
+    value: valueProp,
+    onChange: onChangeProp,
+    onEnter: onEnterProp,
+    placeholder = "Type a message...",
+    disabled: disabledProp,
+    style,
+    actionsStart,
+    actionsEnd,
+    attachments: attachmentsProp,
+    removeAttachment: removeAttachmentProp
+  }, ref) => {
+    const styles = useStyles7();
+    const [isFocused, setIsFocused] = useState5(false);
+    const textareaRef = useRef5(null);
+    const containerRef = useRef5(null);
+    useImperativeHandle(ref, () => textareaRef.current);
+    const ctx = useChatContext();
+    const isInsideCanvas = ctx.setInput !== void 0;
+    const attachments = isInsideCanvas ? ctx.attachments : attachmentsProp ?? [];
+    const removeAttachment = isInsideCanvas ? ctx.removeAttachment : removeAttachmentProp ?? (() => {
+    });
+    const value = valueProp ?? (isInsideCanvas ? ctx.input : "");
+    const onChange = onChangeProp ?? (isInsideCanvas ? ctx.setInput : () => {
+    });
+    const disabled = disabledProp ?? false;
+    const onEnter = onEnterProp ?? (isInsideCanvas ? () => {
+      if (!ctx.isTyping) ctx.sendMessage();
+    } : void 0);
+    useEffect5(() => {
+      if (!isInsideCanvas) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const ro = new ResizeObserver(() => {
+        ctx.setInputHeight(el.offsetHeight);
+      });
+      ro.observe(el);
+      ctx.setInputHeight(el.offsetHeight);
+      return () => ro.disconnect();
+    }, [isInsideCanvas]);
+    useEffect5(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      }
+    }, [value]);
+    useEffect5(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const observer = new ResizeObserver(() => {
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    const sendStopButton = isInsideCanvas ? ctx.isTyping ? /* @__PURE__ */ jsx7(
+      Button5,
+      {
+        appearance: "transparent",
+        onClick: () => {
+          ctx.shouldStopRef.current = true;
+          ctx.onStop?.();
+        },
+        icon: /* @__PURE__ */ jsx7(Stop, {}),
+        style: { cursor: "default" }
+      }
+    ) : /* @__PURE__ */ jsx7(
+      Button5,
+      {
+        appearance: "transparent",
+        onClick: () => ctx.sendMessage(),
+        icon: /* @__PURE__ */ jsx7(Send, {}),
+        disabled: !value.trim(),
+        style: { cursor: "default" }
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: styles.wrapper, style, children: /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `${styles.card}${isFocused ? ` ${styles.cardFocused}` : ""}${disabled ? ` ${styles.cardDisabled}` : ""}`,
+        style: {
+          border: isFocused ? `1px solid ${tokens7.colorNeutralStroke1}` : `1px solid ${tokens7.colorNeutralStroke2}`
+        },
+        children: [
+          attachments.length > 0 && /* @__PURE__ */ jsx7("div", { className: styles.attachmentsRow, children: attachments.map((a) => {
+            const ext = a.file.name.split(".").pop()?.toUpperCase() ?? "FILE";
+            return /* @__PURE__ */ jsxs7("div", { className: styles.attachmentItem, children: [
+              a.preview ? /* @__PURE__ */ jsx7(
+                "img",
+                {
+                  src: a.preview,
+                  alt: a.file.name,
+                  className: styles.attachmentImage
+                }
+              ) : /* @__PURE__ */ jsxs7("div", { className: styles.attachmentFile, children: [
+                /* @__PURE__ */ jsx7(Body15, { className: styles.attachmentFileName, children: a.file.name }),
+                /* @__PURE__ */ jsx7(Tag, { appearance: "outline", size: "small", children: ext })
+              ] }),
+              /* @__PURE__ */ jsx7(
+                Button5,
+                {
+                  icon: /* @__PURE__ */ jsx7(Dismiss, {}),
+                  size: "small",
+                  onClick: () => removeAttachment(a.id),
+                  className: styles.attachmentDismiss
+                }
+              )
+            ] }, a.id);
+          }) }),
+          /* @__PURE__ */ jsx7(
+            "textarea",
+            {
+              disabled,
+              ref: textareaRef,
+              value,
+              onChange: (e) => onChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  onEnter?.();
+                }
+              },
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              placeholder,
+              rows: 1,
+              className: styles.textarea
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: styles.toolbar, children: [
+            /* @__PURE__ */ jsx7("div", { className: styles.toolbarSide, children: actionsStart }),
+            /* @__PURE__ */ jsxs7("div", { className: styles.toolbarSide, children: [
+              actionsEnd,
+              sendStopButton
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "span",
+            {
+              className: `${styles.focusBar} ${isFocused ? styles.focusBarVisible : styles.focusBarHidden}`
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var Chat_Input_default = ChatInput;
+
+// src/Chat.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles8 = makeStyles8({
+  emptySlot: {
+    width: "100%",
+    maxWidth: "768px",
+    margin: "0 auto",
+    padding: "0 16px",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  contentArea: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0"
+  },
+  inputRow: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  inputInner: {
+    display: "flex",
+    width: "100%",
+    maxWidth: "768px",
+    padding: "0 16px 16px 16px",
+    boxSizing: "border-box"
+  },
+  starterRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: "6px",
+    width: "100%",
+    maxWidth: "768px",
+    margin: "0 auto",
+    padding: "0 16px",
+    boxSizing: "border-box",
+    overflow: "hidden"
+  }
+});
+var ChatLayout = ({
+  emptyState,
+  promptStarters,
+  surfaceMotion,
+  placeholder,
+  disabled,
+  actionsStart,
+  actionsEnd,
+  components,
+  onFeedback,
+  onCopy,
+  onNavigate,
+  fontSize,
+  fontFamily
+}) => {
+  const styles = useStyles8();
+  const { messages, isTyping, sendMessage } = useChatContext();
+  const empty = messages.every((m) => m.role === "system") && !isTyping;
+  const motionEnabled = surfaceMotion !== null;
+  const curve = motionTokens.curveDecelerateMax;
+  const spacerTransition = motionEnabled ? `flex-grow 300ms ${curve}` : "none";
+  const gapTransition = motionEnabled ? `height 300ms ${curve}` : "none";
+  const starterTransition = motionEnabled ? `opacity 300ms ${curve}, max-height 300ms ${curve}, padding-bottom 300ms ${curve}` : "none";
+  const hasStarters = !!promptStarters && promptStarters.length > 0;
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          flexGrow: empty ? 1 : 0,
+          flexShrink: 1,
+          flexBasis: 0,
+          minHeight: 0,
+          transition: spacerTransition
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: styles.contentArea,
+        style: {
+          flex: empty ? "none" : 1,
+          overflow: empty ? "visible" : "hidden"
+        },
+        children: empty ? /* @__PURE__ */ jsx8("div", { className: styles.emptySlot, children: emptyState }) : /* @__PURE__ */ jsx8(
+          Chat_Messages_default,
+          {
+            components,
+            onFeedback,
+            onCopy,
+            onNavigate,
+            fontSize,
+            fontFamily
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx8("div", { style: { height: empty ? 24 : 0, transition: gapTransition } }),
+    /* @__PURE__ */ jsx8("div", { className: styles.inputRow, children: /* @__PURE__ */ jsx8("div", { className: styles.inputInner, children: /* @__PURE__ */ jsx8(
+      Chat_Input_default,
+      {
+        placeholder,
+        disabled,
+        actionsStart,
+        actionsEnd
+      }
+    ) }) }),
+    hasStarters && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: styles.starterRow,
+        style: {
+          opacity: empty ? 1 : 0,
+          maxHeight: empty ? 160 : 0,
+          paddingBottom: empty ? 16 : 0,
+          pointerEvents: empty ? "auto" : "none",
+          transition: starterTransition,
+          gap: "8px"
+        },
+        "aria-hidden": !empty,
+        children: promptStarters.map((p) => /* @__PURE__ */ jsx8(
+          InteractionTag,
+          {
+            appearance: "outline",
+            onClick: () => sendMessage(p),
+            tabIndex: empty ? 0 : -1,
+            children: /* @__PURE__ */ jsx8(InteractionTagPrimary, { children: p })
+          },
+          p
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        style: {
+          flexGrow: empty ? 1 : 0,
+          flexShrink: 1,
+          flexBasis: 0,
+          minHeight: 0,
+          transition: spacerTransition
+        }
+      }
+    )
+  ] });
+};
+var Chat = ({
+  agent,
+  agents,
+  conversationId,
+  initialMessages,
+  systemPrompt,
+  onSendMessage,
+  onMessageComplete,
+  onMessagesChange,
+  onError,
+  autoSendMessage,
+  thinkingStatus,
+  onStop,
+  emptyState,
+  promptStarters,
+  surfaceMotion,
+  components,
+  onFeedback,
+  onCopy,
+  onNavigate,
+  placeholder,
+  disabled,
+  actionsStart,
+  actionsEnd,
+  fontSize,
+  fontFamily
+}) => {
+  return /* @__PURE__ */ jsx8(
+    Chat_Canvas_default,
+    {
+      agent,
+      agents,
+      conversationId,
+      initialMessages,
+      systemPrompt,
+      onSendMessage,
+      onMessageComplete,
+      onMessagesChange,
+      onError,
+      autoSendMessage,
+      thinkingStatus,
+      onStop,
+      children: /* @__PURE__ */ jsx8(
+        ChatLayout,
+        {
+          emptyState,
+          promptStarters,
+          surfaceMotion,
+          placeholder,
+          disabled,
+          actionsStart,
+          actionsEnd,
+          components,
+          onFeedback,
+          onCopy,
+          onNavigate,
+          fontSize,
+          fontFamily
+        }
+      )
+    }
+  );
+};
+var Chat_default = Chat;
+
+// src/createHandler.ts
+function createHandler({ endpoint, headers }) {
+  return async function* (input, history, context) {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...headers },
+      body: JSON.stringify({ input, history, context })
+    });
+    if (!res.ok || !res.body) {
+      throw Object.assign(new Error(`${res.status} ${res.statusText}`), {
+        status: res.status,
+        statusText: res.statusText
+      });
+    }
+    const reader = res.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 lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        const text = line.startsWith("data: ") ? line.slice(6) : line;
+        if (!text || text === "[DONE]") continue;
+        try {
+          const chunk = JSON.parse(text);
+          yield chunk;
+        } catch {
+          yield text;
+        }
+      }
+    }
+  };
+}
+
+// src/index.ts
+var Chat2 = Object.assign(Chat_default, {
+  Canvas: Chat_Canvas_default,
+  Messages: Chat_Messages_default,
+  Input: Chat_Input_default,
+  Error: Chat_Error_default,
+  Callout: Chat_Callout_default
+});
+var normalizeChatError2 = normalizeChatError;
+var createHandler2 = createHandler;
+export {
+  Chat2 as Chat,
+  createHandler2 as createHandler,
+  normalizeChatError2 as normalizeChatError,
+  useChatContext
+};
+//# sourceMappingURL=index.js.map