@appilots/web-sdk 0.2.0

package/dist/react/index.mjs

@@ -0,0 +1,738 @@
+import { AppilotsWebRuntime, APPILOTS_CHAT_ATTR, parseMarkdownBlocks, parseInlineMarkdown } from '../chunk-VHRE4RUO.mjs';
+export { AppilotsWebRuntime } from '../chunk-VHRE4RUO.mjs';
+import { createContext, useMemo, useEffect, useRef, useContext, useSyncExternalStore, useCallback, useState, useLayoutEffect, useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var RuntimeContext = createContext(null);
+function AppilotsWebProvider(props) {
+  const { children, runtime: injected, ...options } = props;
+  const runtime = useMemo(
+    () => injected ?? new AppilotsWebRuntime(options),
+    // Session credentials and host identity define the runtime lifetime.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      injected,
+      options.projectId,
+      options.apiKey,
+      options.apiBaseUrl,
+      options.user?.id,
+      options.client
+    ]
+  );
+  const { routes, navigate, permissions, root, screens } = options;
+  useEffect(() => {
+    runtime.configureNavigation({ routes, navigate });
+  }, [runtime, routes, navigate]);
+  useEffect(() => {
+    runtime.setPermissions(permissions);
+  }, [runtime, permissions]);
+  useEffect(() => {
+    runtime.setRoot(root);
+  }, [runtime, root]);
+  useEffect(() => {
+    for (const screen of screens ?? []) runtime.registerScreen(screen);
+  }, [runtime, screens]);
+  const activeOwnedRuntime = useRef(null);
+  useEffect(() => {
+    if (injected) return;
+    activeOwnedRuntime.current = runtime;
+    runtime.resume();
+    return () => {
+      activeOwnedRuntime.current = null;
+      runtime.suspend();
+      queueMicrotask(() => {
+        if (activeOwnedRuntime.current !== runtime) runtime.dispose();
+      });
+    };
+  }, [runtime, injected]);
+  return /* @__PURE__ */ jsx(RuntimeContext.Provider, { value: runtime, children });
+}
+function useAppilotsRuntime() {
+  const runtime = useContext(RuntimeContext);
+  if (!runtime) {
+    throw new Error("useAppilotsRuntime must be used inside an <AppilotsWebProvider>");
+  }
+  return runtime;
+}
+function useAppilotsChat(options = {}) {
+  const runtime = useAppilotsRuntime();
+  const { chat } = runtime;
+  chat.setOptions(options);
+  const state = useSyncExternalStore(chat.subscribeState, chat.getState, chat.getState);
+  const sendMessage = useCallback((content) => chat.sendMessage(content), [chat]);
+  const requestHuman = useCallback(
+    (reason) => chat.requestHuman(reason),
+    [chat]
+  );
+  const cancelMessage = useCallback(() => chat.cancelMessage(), [chat]);
+  const clearMessages = useCallback(() => chat.clearMessages(), [chat]);
+  const clearError = useCallback(() => chat.clearError(), [chat]);
+  return {
+    messages: state.messages,
+    isLoading: state.isLoading,
+    loadingStatusKey: state.loadingStatusKey,
+    error: state.error,
+    pendingActions: state.pendingActions,
+    escalation: state.escalation,
+    requestHuman,
+    sendMessage,
+    cancelMessage,
+    clearMessages,
+    clearError
+  };
+}
+function useAppilotsActions() {
+  const runtime = useAppilotsRuntime();
+  const { actions } = runtime;
+  const state = useSyncExternalStore(actions.subscribeState, actions.getState, actions.getState);
+  useEffect(() => {
+    actions.scheduleDrain();
+  }, [actions, state.actions]);
+  const approveAction = useCallback((id) => actions.approveAction(id), [actions]);
+  const rejectAction = useCallback((id) => actions.rejectAction(id), [actions]);
+  return {
+    pendingActions: state.actions.filter((a) => a.status === "pending"),
+    executingActions: state.actions.filter((a) => a.status === "executing"),
+    completedActions: state.actions.filter(
+      (a) => a.status === "completed" || a.status === "failed"
+    ),
+    approveAction,
+    rejectAction
+  };
+}
+
+// src/react/confirmCard.ts
+var GENERIC_MESSAGE = "Confirm this action?";
+function deriveConfirmCardCopy(payload, defaults = {
+  message: GENERIC_MESSAGE,
+  confirmLabel: "Confirm",
+  cancelLabel: "Cancel",
+  describe: (label) => `Confirm "${label}"?`
+}) {
+  const str = (key) => {
+    const value = payload[key];
+    return typeof value === "string" && value ? value : void 0;
+  };
+  const actionDescription = str("actionDescription");
+  const message = str("message") ?? str("title") ?? (actionDescription ? defaults.describe(actionDescription) : void 0) ?? defaults.message;
+  return {
+    message,
+    confirmLabel: str("confirmLabel") ?? defaults.confirmLabel,
+    cancelLabel: str("cancelLabel") ?? defaults.cancelLabel
+  };
+}
+function inline(text) {
+  return parseInlineMarkdown(text).map((segment, index) => {
+    switch (segment.kind) {
+      case "bold":
+        return /* @__PURE__ */ jsx("strong", { children: segment.value }, index);
+      case "italic":
+        return /* @__PURE__ */ jsx("em", { children: segment.value }, index);
+      case "code":
+        return /* @__PURE__ */ jsx("code", { children: segment.value }, index);
+      case "link":
+        return /* @__PURE__ */ jsx("a", { href: segment.href, target: "_blank", rel: "noopener noreferrer", children: segment.value }, index);
+      default:
+        return segment.value;
+    }
+  });
+}
+function ChatMarkdown({ content, hiddenValue }) {
+  return /* @__PURE__ */ jsx("div", { className: "ap-markdown", children: parseMarkdownBlocks(content.replaceAll("<redacted>", hiddenValue)).map((block, index) => {
+    switch (block.kind) {
+      case "heading": {
+        const Heading = `h${block.level}`;
+        return /* @__PURE__ */ jsx(Heading, { children: inline(block.text) }, index);
+      }
+      case "codeblock":
+        return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: block.code }) }, index);
+      case "bullet":
+      case "ordered": {
+        const List = block.kind === "bullet" ? "ul" : "ol";
+        return /* @__PURE__ */ jsx(List, { children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: inline(item) }, i)) }, index);
+      }
+      default:
+        return /* @__PURE__ */ jsx("p", { children: inline(block.text) }, index);
+    }
+  }) });
+}
+
+// src/react/chatStrings.ts
+var chatStrings = {
+  en: {
+    openChat: "Open chat",
+    closeChat: "Close chat",
+    hiddenValue: "Protected data",
+    title: "Assistant",
+    subtitle: "Virtual assistant",
+    placeholder: "Write a message\u2026",
+    welcome: "How can I help?",
+    welcomeBody: "Ask a question or tell me what you would like to do.",
+    human: "Talk to a person",
+    humanLabel: "Support agent",
+    requesting: "Connecting\u2026",
+    waiting: "Waiting for a support agent",
+    connected: "Human support connected",
+    requested: "Your request was sent. You can keep writing here while you wait.",
+    resolved: "Human support ended. The assistant is available again.",
+    offer: "Would you like help from a person?",
+    newChat: "New conversation",
+    send: "Send message",
+    stop: "Stop response",
+    inputHint: "Enter to send \xB7 Shift + Enter for a new line",
+    latest: "Latest messages",
+    thinking: "Thinking\u2026",
+    statusAnalyzing: "Analyzing\u2026",
+    statusWaitingApp: "Waiting for the app\u2026",
+    statusAdjusting: "Adjusting\u2026",
+    errorPrefix: "Something went wrong",
+    dismiss: "Dismiss error",
+    approval: "Your approval is needed",
+    confirm: "Confirm",
+    cancel: "Cancel",
+    confirmMessage: "Confirm this action?",
+    confirmDescription: (label) => `Confirm "${label}"?`
+  },
+  "pt-BR": {
+    openChat: "Abrir chat",
+    closeChat: "Fechar chat",
+    hiddenValue: "Dado protegido",
+    title: "Assistente",
+    subtitle: "Assistente virtual",
+    placeholder: "Escreva uma mensagem\u2026",
+    welcome: "Como posso ajudar?",
+    welcomeBody: "Tire uma d\xFAvida ou me conte o que voc\xEA quer fazer.",
+    human: "Falar com uma pessoa",
+    humanLabel: "Atendente",
+    requesting: "Conectando\u2026",
+    waiting: "Aguardando um atendente",
+    connected: "Atendimento humano conectado",
+    requested: "Pedido enviado. Voc\xEA pode continuar escrevendo aqui enquanto aguarda.",
+    resolved: "Atendimento humano encerrado. O assistente est\xE1 dispon\xEDvel novamente.",
+    offer: "Quer ajuda de uma pessoa?",
+    newChat: "Nova conversa",
+    send: "Enviar mensagem",
+    stop: "Parar resposta",
+    inputHint: "Enter para enviar \xB7 Shift + Enter para nova linha",
+    latest: "Mensagens recentes",
+    thinking: "Pensando\u2026",
+    statusAnalyzing: "Analisando\u2026",
+    statusWaitingApp: "Aguardando o aplicativo\u2026",
+    statusAdjusting: "Ajustando\u2026",
+    errorPrefix: "Algo deu errado",
+    dismiss: "Fechar erro",
+    approval: "Precisamos da sua confirma\xE7\xE3o",
+    confirm: "Confirmar",
+    cancel: "Cancelar",
+    confirmMessage: "Confirma esta a\xE7\xE3o?",
+    confirmDescription: (label) => `Confirma "${label}"?`
+  }
+};
+
+// src/react/chatStyles.ts
+var chatStyles = `
+.appilots-chat { --ap-accent: #2563eb; display: flex; flex-direction: column; height: 100%; min-height: 280px; min-width: 0; color: #172033; background: #f6f8fb; border: 1px solid #e2e7ef; border-radius: 20px; overflow: hidden; font: 14px/1.5 system-ui, -apple-system, sans-serif; box-shadow: 0 8px 32px #17203308; }
+.appilots-chat *, .appilots-chat *::before, .appilots-chat *::after { box-sizing: border-box; }
+.appilots-chat button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid #dde3ed; border-radius: 10px; background: #fff; color: inherit; cursor: pointer; font: inherit; line-height: 1.3; }
+.appilots-chat button:hover:not(:disabled) { background: #edf2f9; }
+.appilots-chat button:disabled { opacity: .5; cursor: not-allowed; }
+.appilots-chat button:focus-visible, .appilots-chat a:focus-visible, .appilots-chat textarea:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 3px; }
+.appilots-chat .ap-header { display: flex; align-items: center; gap: 10px; padding: 18px; background: #fff; border-bottom: 1px solid #e8ecf2; }
+.appilots-chat .ap-avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 13px; background: #eaf0ff; color: var(--ap-accent); }
+.appilots-chat .ap-identity { flex: 1; min-width: 0; }
+.appilots-chat .ap-title { display: block; font-size: 15px; overflow-wrap: anywhere; }
+.appilots-chat .ap-caption { font-size: 12px; color: #68758a; }
+.appilots-chat .ap-icon { padding: 8px; width: 36px; height: 36px; border: 0; background: transparent; flex-shrink: 0; }
+.appilots-chat .ap-human-button { border: 0; border-radius: 0; border-bottom: 1px solid #e8ecf2; padding: 10px 16px; color: #52647e; font-size: 12px; }
+.appilots-chat .ap-escalation { padding: 12px 18px; color: #16604b; background: #eaf7f1; font-size: 12px; border-bottom: 1px solid #d5ede2; }
+.appilots-chat .ap-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px; display: flex; flex-direction: column; gap: 20px; scrollbar-width: thin; }
+.appilots-chat .ap-empty { margin: auto 0; padding: 24px 4px; text-align: center; }
+.appilots-chat .ap-empty .ap-avatar { margin: 0 auto 18px; width: 52px; height: 52px; border-radius: 18px; }
+.appilots-chat .ap-empty h2 { margin: 0 0 8px; font-size: 21px; font-weight: 650; letter-spacing: -.4px; }
+.appilots-chat .ap-empty p { margin: 0 auto 24px; max-width: 260px; color: #68758a; }
+.appilots-chat .ap-suggestions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
+.appilots-chat .ap-suggestions button { padding: 12px 14px; text-align: left; justify-content: space-between; font-size: 13px; }
+.appilots-chat .ap-message { max-width: 94%; align-self: flex-start; min-width: 0; }
+.appilots-chat .ap-message-user { align-self: flex-end; max-width: 86%; }
+.appilots-chat .ap-sender { display: block; margin: 0 0 5px 3px; color: #68758a; font-size: 11px; font-weight: 600; }
+.appilots-chat .ap-bubble { padding: 12px 15px; background: #fff; border: 1px solid #e7ebf2; border-radius: 4px 17px 17px; overflow-wrap: anywhere; white-space: pre-wrap; }
+.appilots-chat .ap-message-user .ap-bubble { background: var(--ap-accent); color: #fff; border-color: transparent; border-radius: 17px 4px 17px 17px; }
+.appilots-chat .ap-message-human_agent .ap-bubble { border-color: #cde7dc; }
+.appilots-chat .ap-message time { display: block; margin: 5px 3px 0; color: #7a8799; font-size: 10px; }
+.appilots-chat .ap-message-user time { text-align: right; }
+.appilots-chat .ap-system { align-self: center; text-align: center; color: #68758a; font-size: 12px; white-space: pre-wrap; }
+.appilots-chat .ap-system button { display: flex; margin: 8px auto 0; }
+.appilots-chat .ap-markdown { white-space: normal; }
+.appilots-chat .ap-markdown p { margin: 0 0 10px; white-space: pre-wrap; }
+.appilots-chat .ap-markdown h1, .appilots-chat .ap-markdown h2, .appilots-chat .ap-markdown h3 { font-size: 16px; line-height: 1.4; margin: 12px 0 8px; }
+.appilots-chat .ap-markdown ul, .appilots-chat .ap-markdown ol { margin: 8px 0; padding-left: 22px; }
+.appilots-chat .ap-markdown li { margin: 4px 0; white-space: pre-wrap; }
+.appilots-chat .ap-markdown code { font: 12px/1.6 ui-monospace, monospace; background: #edf1f7; border-radius: 4px; padding: 2px 4px; }
+.appilots-chat .ap-markdown pre { margin: 10px 0; padding: 12px; background: #edf1f7; border-radius: 8px; overflow-x: auto; white-space: pre; }
+.appilots-chat .ap-markdown pre code { padding: 0; }
+.appilots-chat .ap-markdown a { color: #1d4ed8; text-decoration: underline; }
+.appilots-chat .ap-markdown > :first-child { margin-top: 0; }
+.appilots-chat .ap-markdown > :last-child { margin-bottom: 0; }
+.appilots-chat .ap-confirm { border: 1px solid #eddbb4; background: #fffdf7; border-radius: 14px; padding: 14px; }
+.appilots-chat .ap-confirm-title { color: #8c641d; font-size: 11px; font-weight: 600; margin-bottom: 6px; }
+.appilots-chat .ap-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.appilots-chat .ap-primary, .appilots-chat .ap-primary:hover:not(:disabled) { background: var(--ap-accent); border-color: transparent; color: #fff; }
+.appilots-chat .ap-loading { display: flex; align-items: center; gap: 8px; color: #68758a; font-size: 12px; }
+.appilots-chat .ap-loading::before { content: ''; width: 6px; height: 6px; background: var(--ap-accent); border-radius: 50%; }
+.appilots-chat .ap-error { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; margin: 0 14px 8px; background: #fef2f2; color: #b42318; border-radius: 10px; font-size: 12px; }
+.appilots-chat .ap-latest { align-self: center; font-size: 12px; margin: 0 0 8px; }
+.appilots-chat .ap-footer { background: #fff; border-top: 1px solid #e8ecf2; padding: 14px; }
+.appilots-chat .ap-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid #dce3ee; border-radius: 16px; background: #fff; }
+.appilots-chat .ap-composer:focus-within { border-color: var(--ap-accent); box-shadow: 0 0 0 2px #2563eb0b; }
+.appilots-chat textarea { display: block; flex: 1; min-width: 0; min-height: 40px; max-height: 120px; margin: 0; padding: 9px 4px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; line-height: 22px; resize: none; }
+.appilots-chat textarea:focus-visible { outline: none; }
+.appilots-chat .ap-send { width: 38px; height: 38px; padding: 0; border-radius: 12px; flex-shrink: 0; }
+.appilots-chat .ap-hint { display: block; text-align: center; font-size: 10px; color: #7a8799; padding-top: 8px; }
+`;
+function Icon({ name }) {
+  const paths = {
+    chat: "M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6A8.4 8.4 0 0 1 12.5 3H13a8.5 8.5 0 0 1 8 8v.5Z",
+    human: "M3 14v-3a9 9 0 0 1 18 0v3M3 12h3v8H3zM18 12h3v8h-3zM18 20c0 2-3 2-6 2",
+    new: "M12 5v14M5 12h14",
+    send: "M12 19V5M5 12l7-7 7 7",
+    stop: "M6 6h12v12H6z",
+    close: "M6 6l12 12M18 6 6 18"
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: paths[name] })
+    }
+  );
+}
+function AppilotsChat({
+  title,
+  placeholder,
+  locale = "en",
+  suggestedPrompts = [],
+  style,
+  onClose
+}) {
+  const strings = chatStrings[locale];
+  const chatTitle = title ?? strings.title;
+  const {
+    messages,
+    isLoading,
+    loadingStatusKey,
+    error,
+    escalation,
+    sendMessage,
+    cancelMessage,
+    clearMessages,
+    clearError,
+    requestHuman
+  } = useAppilotsChat({
+    errorPrefix: strings.errorPrefix,
+    escalationStrings: {
+      requested: strings.requested,
+      connected: strings.connected,
+      resolved: strings.resolved,
+      offer: strings.offer
+    }
+  });
+  const { pendingActions, approveAction, rejectAction } = useAppilotsActions();
+  const [draft, setDraft] = useState("");
+  const [requestingHuman, setRequestingHuman] = useState(false);
+  const [showLatest, setShowLatest] = useState(false);
+  const inputRef = useRef(null);
+  const logRef = useRef(null);
+  const followMessages = useRef(true);
+  const confirms = pendingActions.filter((action) => action.type === "confirm");
+  const scrollToLatest = () => {
+    followMessages.current = true;
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+    setShowLatest(false);
+  };
+  useLayoutEffect(() => {
+    if (followMessages.current && logRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [messages, isLoading, confirms.length]);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.style.height = "auto";
+    input.style.height = `${Math.min(input.scrollHeight, 120)}px`;
+  }, [draft]);
+  const send = () => {
+    const content = draft.trim();
+    if (!content || isLoading || requestingHuman) return;
+    scrollToLatest();
+    clearError();
+    setDraft("");
+    void sendMessage(content);
+    inputRef.current?.focus();
+  };
+  const askHuman = async (reason) => {
+    if (requestingHuman || escalation) return;
+    setRequestingHuman(true);
+    clearError();
+    scrollToLatest();
+    try {
+      await requestHuman(reason);
+    } finally {
+      setRequestingHuman(false);
+    }
+  };
+  return (
+    // Keep every control and transcript inside the DOM walker's skip marker.
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ...{ [APPILOTS_CHAT_ATTR]: "true" },
+        className: "appilots-chat",
+        style,
+        "aria-label": chatTitle,
+        lang: locale,
+        children: [
+          /* @__PURE__ */ jsx("style", { children: chatStyles }),
+          /* @__PURE__ */ jsxs("header", { className: "ap-header", children: [
+            /* @__PURE__ */ jsx("div", { className: "ap-avatar", children: /* @__PURE__ */ jsx(Icon, { name: escalation ? "human" : "chat" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ap-identity", children: [
+              /* @__PURE__ */ jsx("strong", { className: "ap-title", children: chatTitle }),
+              /* @__PURE__ */ jsx("span", { className: "ap-caption", children: escalation?.operatorName ?? (escalation ? strings.humanLabel : strings.subtitle) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ap-icon",
+                title: strings.newChat,
+                "aria-label": strings.newChat,
+                disabled: requestingHuman || !messages.length && !escalation && !error,
+                onClick: () => {
+                  clearMessages();
+                  setDraft("");
+                  scrollToLatest();
+                  inputRef.current?.focus();
+                },
+                children: /* @__PURE__ */ jsx(Icon, { name: "new" })
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ap-icon",
+                "aria-label": strings.closeChat,
+                title: strings.closeChat,
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+              }
+            )
+          ] }),
+          escalation ? /* @__PURE__ */ jsxs("div", { className: "ap-escalation", role: "status", "data-testid": "appilots-escalation-status", children: [
+            escalation.status === "pending" ? strings.waiting : strings.connected,
+            escalation.operatorName && /* @__PURE__ */ jsxs("strong", { children: [
+              " \xB7 ",
+              escalation.operatorName
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ap-human-button",
+              disabled: requestingHuman,
+              onClick: () => void askHuman("user_requested"),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "human" }),
+                requestingHuman ? strings.requesting : strings.human
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ap-log",
+              ref: logRef,
+              role: "log",
+              "aria-label": chatTitle,
+              "aria-live": "polite",
+              "data-testid": "appilots-chat-log",
+              onScroll: () => {
+                const log = logRef.current;
+                if (!log) return;
+                followMessages.current = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
+                setShowLatest(!followMessages.current);
+              },
+              children: [
+                messages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "ap-empty", children: [
+                  /* @__PURE__ */ jsx("div", { className: "ap-avatar", children: /* @__PURE__ */ jsx(Icon, { name: "chat" }) }),
+                  /* @__PURE__ */ jsx("h2", { children: strings.welcome }),
+                  /* @__PURE__ */ jsx("p", { children: strings.welcomeBody }),
+                  /* @__PURE__ */ jsx("div", { className: "ap-suggestions", children: suggestedPrompts.map((prompt) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setDraft(prompt);
+                        inputRef.current?.focus();
+                      },
+                      children: [
+                        prompt,
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2197" })
+                      ]
+                    },
+                    prompt
+                  )) })
+                ] }),
+                messages.map(
+                  (message) => message.role === "system" ? /* @__PURE__ */ jsxs("div", { className: "ap-system", "data-testid": "appilots-message-system", children: [
+                    message.content,
+                    message.metadata?.escalationOffer === true && !escalation && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: requestingHuman,
+                        onClick: () => void askHuman("agent_gave_up"),
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "human" }),
+                          strings.human
+                        ]
+                      }
+                    )
+                  ] }, message.id) : /* @__PURE__ */ jsxs(
+                    "article",
+                    {
+                      className: `ap-message ap-message-${message.role}`,
+                      "data-testid": `appilots-message-${message.role}`,
+                      children: [
+                        message.role !== "user" && /* @__PURE__ */ jsx("span", { className: "ap-sender", children: message.role === "human_agent" ? escalation?.operatorName ?? strings.humanLabel : chatTitle }),
+                        /* @__PURE__ */ jsx("div", { className: "ap-bubble", children: message.role === "user" ? message.content : /* @__PURE__ */ jsx(ChatMarkdown, { content: message.content, hiddenValue: strings.hiddenValue }) }),
+                        /* @__PURE__ */ jsx("time", { dateTime: new Date(message.timestamp).toISOString(), children: new Date(message.timestamp).toLocaleTimeString(locale, {
+                          hour: "2-digit",
+                          minute: "2-digit"
+                        }) })
+                      ]
+                    },
+                    message.id
+                  )
+                ),
+                confirms.map((action) => {
+                  const { message, confirmLabel, cancelLabel } = deriveConfirmCardCopy(
+                    action.payload ?? {},
+                    {
+                      message: strings.confirmMessage,
+                      confirmLabel: strings.confirm,
+                      cancelLabel: strings.cancel,
+                      describe: strings.confirmDescription
+                    }
+                  );
+                  return /* @__PURE__ */ jsxs("div", { className: "ap-confirm", "data-testid": "appilots-confirm", children: [
+                    /* @__PURE__ */ jsx("div", { className: "ap-confirm-title", children: strings.approval }),
+                    /* @__PURE__ */ jsx(ChatMarkdown, { content: message, hiddenValue: strings.hiddenValue }),
+                    /* @__PURE__ */ jsxs("div", { className: "ap-confirm-actions", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "ap-primary",
+                          "data-testid": "appilots-confirm-accept",
+                          onClick: () => void approveAction(action.id),
+                          children: confirmLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-testid": "appilots-confirm-reject",
+                          onClick: () => void rejectAction(action.id),
+                          children: cancelLabel
+                        }
+                      )
+                    ] })
+                  ] }, action.id);
+                }),
+                isLoading && /* @__PURE__ */ jsx("div", { className: "ap-loading", role: "status", "data-testid": "appilots-loading", children: strings[loadingStatusKey] })
+              ]
+            }
+          ),
+          showLatest && /* @__PURE__ */ jsxs("button", { type: "button", className: "ap-latest", onClick: scrollToLatest, children: [
+            strings.latest,
+            " \u2193"
+          ] }),
+          error && /* @__PURE__ */ jsxs("div", { className: "ap-error", role: "alert", children: [
+            /* @__PURE__ */ jsx("span", { children: error }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ap-icon",
+                "aria-label": strings.dismiss,
+                onClick: clearError,
+                children: /* @__PURE__ */ jsx(Icon, { name: "close" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("footer", { className: "ap-footer", children: [
+            /* @__PURE__ */ jsxs(
+              "form",
+              {
+                className: "ap-composer",
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  send();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      ref: inputRef,
+                      rows: 1,
+                      value: draft,
+                      placeholder: placeholder ?? strings.placeholder,
+                      "aria-label": placeholder ?? strings.placeholder,
+                      "data-testid": "appilots-chat-input",
+                      onChange: (event) => setDraft(event.target.value),
+                      onKeyDown: (event) => {
+                        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
+                          event.preventDefault();
+                          send();
+                        }
+                      }
+                    }
+                  ),
+                  isLoading ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ap-send ap-primary",
+                      "aria-label": strings.stop,
+                      title: strings.stop,
+                      onClick: cancelMessage,
+                      children: /* @__PURE__ */ jsx(Icon, { name: "stop" })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      className: "ap-send ap-primary",
+                      "data-testid": "appilots-chat-send",
+                      "aria-label": strings.send,
+                      title: strings.send,
+                      disabled: !draft.trim() || requestingHuman,
+                      children: /* @__PURE__ */ jsx(Icon, { name: "send" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ap-hint", children: strings.inputHint })
+          ] })
+        ]
+      }
+    )
+  );
+}
+var styles = `
+.appilots-chat-fab { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
+.appilots-chat-fab[data-position="bottom-left"] { right: auto; left: max(16px, env(safe-area-inset-left)); align-items: flex-start; }
+.appilots-chat-fab .ap-fab-panel { width: min(390px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)))); height: min(640px, calc(100dvh - 68px - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))); }
+.appilots-chat-fab .ap-fab-panel[hidden] { display: none; }
+.appilots-chat-fab .appilots-chat { min-height: 0; box-shadow: 0 16px 64px #17203326; }
+.appilots-chat-fab .ap-fab-button { box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; color: #fff; background: var(--ap-fab-accent); box-shadow: 0 6px 24px #17203333; cursor: pointer; }
+.appilots-chat-fab .ap-fab-button svg { width: 24px; height: 24px; }
+.appilots-chat-fab .ap-fab-button:hover { filter: brightness(.94); }
+.appilots-chat-fab .ap-fab-button:focus-visible { outline: 3px solid var(--ap-fab-accent); outline-offset: 4px; }
+`;
+function AppilotsChatFab({
+  position = "bottom-right",
+  defaultOpen = false,
+  accentColor = "#2563eb",
+  zIndex = 1e3,
+  locale = "en",
+  style,
+  ...chatProps
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [host, setHost] = useState(null);
+  const panelId = useId();
+  const panelRef = useRef(null);
+  const triggerRef = useRef(null);
+  const strings = chatStrings[locale];
+  useEffect(() => setHost(document.body), []);
+  useEffect(() => {
+    if (!open) return;
+    panelRef.current?.querySelector("textarea")?.focus();
+    const log = panelRef.current?.querySelector('[role="log"]');
+    if (log) log.scrollTop = log.scrollHeight;
+  }, [open, host]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  if (!host) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{ [APPILOTS_CHAT_ATTR]: "true" },
+        className: "appilots-chat-fab",
+        "data-position": position,
+        style: { zIndex, "--ap-fab-accent": accentColor },
+        onKeyDown: (event) => {
+          if (open && event.key === "Escape" && !event.defaultPrevented && !event.nativeEvent.isComposing) {
+            event.stopPropagation();
+            close();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("style", { children: styles }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              className: "ap-fab-panel",
+              ref: panelRef,
+              hidden: !open,
+              "data-testid": "appilots-chat-panel",
+              children: /* @__PURE__ */ jsx(
+                AppilotsChat,
+                {
+                  ...chatProps,
+                  locale,
+                  onClose: close,
+                  style: { "--ap-accent": accentColor, ...style }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ap-fab-button",
+              ref: triggerRef,
+              "aria-label": open ? strings.closeChat : strings.openChat,
+              title: open ? strings.closeChat : strings.openChat,
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              "data-testid": "appilots-chat-fab",
+              onClick: () => open ? close() : setOpen(true),
+              children: /* @__PURE__ */ jsx(Icon, { name: open ? "close" : "chat" })
+            }
+          )
+        ]
+      }
+    ),
+    host
+  );
+}
+
+export { AppilotsChat, AppilotsChatFab, AppilotsWebProvider, useAppilotsActions, useAppilotsChat, useAppilotsRuntime };