@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-conversation.js

@@ -0,0 +1,1226 @@
+import {
+  formatRelativeTime,
+  formatTimestamp
+} from "./chunk-ONACRMG4.js";
+import {
+  MarkdownRenderer
+} from "./chunk-UNEM2TRI.js";
+import {
+  detectTriggerInText
+} from "./chunk-BOLFYVI6.js";
+import "./chunk-533MCMSU.js";
+import {
+  cn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-conversation/dist/index.js
+import * as React2 from "react";
+
+// ../conversation/dist/index.js
+function byTime(a, b) {
+  return a.timestamp.getTime() - b.timestamp.getTime();
+}
+function findMessage(messages, id) {
+  return messages.find((m) => m.id === id);
+}
+function rootIdOf(messages, id) {
+  const m = findMessage(messages, id);
+  if (!m) return id;
+  return m.parentId ?? m.id;
+}
+function selectRoots(messages) {
+  return messages.filter((m) => !m.parentId).sort(byTime);
+}
+function selectReplies(messages, rootId) {
+  return messages.filter((m) => m.parentId === rootId).sort(byTime);
+}
+function selectThreadMessages(messages, rootId) {
+  const root = findMessage(messages, rootId);
+  const replies = selectReplies(messages, rootId);
+  return root ? [root, ...replies] : replies;
+}
+function getReplyCount(messages, rootId) {
+  return messages.reduce((n, m) => m.parentId === rootId ? n + 1 : n, 0);
+}
+function selectMainTimeline(messages, mode) {
+  if (mode === "panel") return selectRoots(messages);
+  return [...messages].sort(byTime);
+}
+function selectTimelineFromState(state) {
+  return selectMainTimeline(state.messages, state.threadingMode);
+}
+var DEFAULT_ASSISTANT = { id: "assistant", name: "Assistant" };
+var DEFAULT_USER = { id: "user", name: "You" };
+var DEFAULT_TITLE = "New conversation";
+function defaultGenerateTitle(firstMessage) {
+  const firstLine = firstMessage.split("\n", 1)[0].trim();
+  if (firstLine.length <= 48) return firstLine || DEFAULT_TITLE;
+  return `${firstLine.slice(0, 47).trimEnd()}\u2026`;
+}
+function createConversation(config = {}) {
+  const assistant = config.assistant ?? DEFAULT_ASSISTANT;
+  const currentUser = config.currentUser ?? DEFAULT_USER;
+  const generateTitle = config.generateTitle ?? defaultGenerateTitle;
+  const now = config.now ?? (() => /* @__PURE__ */ new Date());
+  let transport = config.transport;
+  let threadingMode = config.threadingMode ?? "inline";
+  const conversations = /* @__PURE__ */ new Map();
+  const messagesByConv = /* @__PURE__ */ new Map();
+  let activeConversationId = config.activeConversationId ?? null;
+  let openThreadRootId = null;
+  let replyTarget = null;
+  let status = "idle";
+  let error = null;
+  let abortController = null;
+  for (const c of config.conversations ?? []) {
+    conversations.set(c.id, c);
+    messagesByConv.set(c.id, []);
+  }
+  for (const [conversationId, msgs] of Object.entries(config.messages ?? {})) {
+    messagesByConv.set(conversationId, [...msgs]);
+  }
+  if (activeConversationId === null && config.conversations?.length) {
+    activeConversationId = config.conversations[0].id;
+  }
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = buildSnapshot();
+  function buildSnapshot() {
+    return {
+      conversations: orderedConversations(),
+      activeConversationId,
+      messages: activeConversationId ? messagesByConv.get(activeConversationId) ?? [] : [],
+      openThreadRootId,
+      replyTarget,
+      threadingMode,
+      status,
+      error
+    };
+  }
+  function emit() {
+    snapshot = buildSnapshot();
+    for (const l of listeners) l();
+  }
+  function orderedConversations() {
+    return [...conversations.values()].sort(
+      (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime()
+    );
+  }
+  function touch(conversationId) {
+    const c = conversations.get(conversationId);
+    if (c) conversations.set(conversationId, { ...c, updatedAt: now() });
+  }
+  function ensureActiveConversation(opts) {
+    if (opts?.conversationId) {
+      if (!conversations.has(opts.conversationId)) createConversationInternal({}, opts.conversationId);
+      return opts.conversationId;
+    }
+    if (activeConversationId && conversations.has(activeConversationId)) return activeConversationId;
+    return createConversationInternal({}).id;
+  }
+  function createConversationInternal(opts, id) {
+    const timestamp = now();
+    const conversation = {
+      id: id ?? generateId("rfr-conv"),
+      title: opts.title ?? DEFAULT_TITLE,
+      createdAt: timestamp,
+      updatedAt: timestamp,
+      metadata: opts.metadata
+    };
+    conversations.set(conversation.id, conversation);
+    messagesByConv.set(conversation.id, []);
+    activeConversationId = conversation.id;
+    return conversation;
+  }
+  async function streamReply(conversationId, assistantMsg, userMsg, history) {
+    abortController = new AbortController();
+    status = "streaming";
+    emit();
+    try {
+      const stream = transport.send({
+        conversationId,
+        message: userMsg,
+        history,
+        parentId: assistantMsg.parentId,
+        signal: abortController.signal
+      });
+      for await (const chunk of stream) {
+        if (chunk.content !== void 0) assistantMsg.content = chunk.content;
+        if (chunk.delta) assistantMsg.content += chunk.delta;
+        if (chunk.metadata) {
+          assistantMsg.metadata = { ...assistantMsg.metadata, ...chunk.metadata };
+        }
+        emit();
+        if (abortController.signal.aborted) break;
+      }
+      assistantMsg.status = "sent";
+      status = "idle";
+      error = null;
+    } catch (err) {
+      if (abortController.signal.aborted) {
+        assistantMsg.status = "sent";
+        status = "idle";
+      } else {
+        const message = err instanceof Error ? err.message : String(err);
+        assistantMsg.status = "error";
+        assistantMsg.error = message;
+        status = "error";
+        error = message;
+      }
+    } finally {
+      abortController = null;
+      touch(conversationId);
+      emit();
+    }
+  }
+  function historyFor(list, parentId) {
+    const scope = parentId ? selectThreadMessages(list, parentId) : selectRoots(list);
+    return scope.filter((m) => m.status !== "error");
+  }
+  const api = {
+    getState() {
+      return snapshot;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    newConversation(opts) {
+      const conversation = createConversationInternal(opts ?? {});
+      openThreadRootId = null;
+      replyTarget = null;
+      emit();
+      return conversation;
+    },
+    selectConversation(conversationId) {
+      if (!conversations.has(conversationId) || activeConversationId === conversationId) return;
+      activeConversationId = conversationId;
+      openThreadRootId = null;
+      replyTarget = null;
+      emit();
+    },
+    deleteConversation(conversationId) {
+      if (!conversations.has(conversationId)) return;
+      conversations.delete(conversationId);
+      messagesByConv.delete(conversationId);
+      if (activeConversationId === conversationId) {
+        activeConversationId = orderedConversations()[0]?.id ?? null;
+        openThreadRootId = null;
+        replyTarget = null;
+      }
+      emit();
+    },
+    renameConversation(conversationId, title) {
+      const c = conversations.get(conversationId);
+      if (!c) return;
+      conversations.set(conversationId, { ...c, title });
+      emit();
+    },
+    appendMessage(message) {
+      const list = messagesByConv.get(message.conversationId);
+      if (!list) return;
+      list.push(message);
+      touch(message.conversationId);
+      emit();
+    },
+    editMessage(messageId, content) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      const msg = list.find((m) => m.id === messageId);
+      if (!msg) return;
+      msg.content = content;
+      msg.edited = true;
+      emit();
+    },
+    deleteMessage(messageId) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      const msg = list.find((m) => m.id === messageId);
+      if (!msg) return;
+      const removeIds = /* @__PURE__ */ new Set([messageId]);
+      if (!msg.parentId) {
+        for (const r of list) if (r.parentId === messageId) removeIds.add(r.id);
+      }
+      const next = list.filter((m) => !removeIds.has(m.id));
+      messagesByConv.set(activeConversationId, next);
+      if (openThreadRootId && removeIds.has(openThreadRootId)) openThreadRootId = null;
+      if (replyTarget && removeIds.has(replyTarget)) replyTarget = openThreadRootId;
+      emit();
+    },
+    react(messageId, emoji) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      const msg = list.find((m) => m.id === messageId);
+      if (!msg) return;
+      const reactions = [...msg.reactions ?? []];
+      const idx = reactions.findIndex((r) => r.emoji === emoji);
+      if (idx === -1) {
+        reactions.push({ emoji, count: 1, userReacted: true });
+      } else {
+        const r = reactions[idx];
+        if (r.userReacted) {
+          const count = r.count - 1;
+          if (count <= 0) reactions.splice(idx, 1);
+          else reactions[idx] = { ...r, count, userReacted: false };
+        } else {
+          reactions[idx] = { ...r, count: r.count + 1, userReacted: true };
+        }
+      }
+      msg.reactions = reactions;
+      emit();
+    },
+    async sendMessage(content, opts) {
+      const trimmed = content.trim();
+      if (!trimmed && !opts?.attachments?.length) return;
+      const conversationId = ensureActiveConversation(opts);
+      const list = messagesByConv.get(conversationId);
+      const parentId = opts?.replyTo ? rootIdOf(list, opts.replyTo) : void 0;
+      const replyToId = opts?.replyTo;
+      const isFirstRoot = !parentId && selectRoots(list).length === 0;
+      const userMsg = {
+        id: generateId("rfr-msg"),
+        conversationId,
+        role: "user",
+        author: currentUser,
+        content: trimmed,
+        timestamp: now(),
+        status: "sent",
+        parentId,
+        replyToId,
+        attachments: opts?.attachments,
+        metadata: opts?.metadata
+      };
+      list.push(userMsg);
+      const conversation = conversations.get(conversationId);
+      if (isFirstRoot && conversation.title === DEFAULT_TITLE) {
+        conversations.set(conversationId, { ...conversation, title: generateTitle(trimmed) });
+      }
+      touch(conversationId);
+      if (!transport) {
+        status = "idle";
+        emit();
+        return;
+      }
+      const history = historyFor(list, parentId).filter((m) => m.id !== userMsg.id);
+      const assistantMsg = {
+        id: generateId("rfr-msg"),
+        conversationId,
+        role: "assistant",
+        author: assistant,
+        content: "",
+        timestamp: now(),
+        status: "streaming",
+        parentId
+      };
+      list.push(assistantMsg);
+      await streamReply(conversationId, assistantMsg, userMsg, history);
+    },
+    async retryLast() {
+      if (!activeConversationId || !transport) return;
+      const list = messagesByConv.get(activeConversationId);
+      const last = list[list.length - 1];
+      const parentId = last?.parentId;
+      if (last && last.role === "assistant" && last.status === "error") list.pop();
+      const scope = parentId ? selectThreadMessages(list, parentId) : selectRoots(list);
+      const lastUser = [...scope].reverse().find((m) => m.role === "user");
+      if (!lastUser) return;
+      const history = historyFor(list, parentId);
+      const assistantMsg = {
+        id: generateId("rfr-msg"),
+        conversationId: activeConversationId,
+        role: "assistant",
+        author: assistant,
+        content: "",
+        timestamp: now(),
+        status: "streaming",
+        parentId
+      };
+      list.push(assistantMsg);
+      await streamReply(activeConversationId, assistantMsg, lastUser, history);
+    },
+    stop() {
+      abortController?.abort();
+    },
+    openThread(rootId) {
+      openThreadRootId = rootId;
+      replyTarget = rootId;
+      emit();
+    },
+    replyTo(messageId) {
+      if (!activeConversationId) return;
+      const list = messagesByConv.get(activeConversationId);
+      openThreadRootId = rootIdOf(list, messageId);
+      replyTarget = messageId;
+      emit();
+    },
+    closeThread() {
+      if (openThreadRootId === null && replyTarget === null) return;
+      openThreadRootId = null;
+      replyTarget = null;
+      emit();
+    },
+    setThreadingMode(mode) {
+      if (threadingMode === mode) return;
+      threadingMode = mode;
+      emit();
+    },
+    setTransport(next) {
+      transport = next;
+    }
+  };
+  return api;
+}
+
+// ../react-conversation/dist/index.js
+function useConversation(config) {
+  const apiRef = React2.useRef(null);
+  if (apiRef.current === null) {
+    apiRef.current = createConversation(config);
+  }
+  const api = apiRef.current;
+  const state = React2.useSyncExternalStore(api.subscribe, api.getState, api.getState);
+  const transport = config?.transport;
+  React2.useEffect(() => {
+    if (transport) api.setTransport(transport);
+  }, [api, transport]);
+  return {
+    state,
+    api,
+    sendMessage: api.sendMessage,
+    newConversation: api.newConversation,
+    selectConversation: api.selectConversation,
+    deleteConversation: api.deleteConversation,
+    renameConversation: api.renameConversation,
+    editMessage: api.editMessage,
+    deleteMessage: api.deleteMessage,
+    react: api.react,
+    retryLast: api.retryLast,
+    stop: api.stop,
+    openThread: api.openThread,
+    replyTo: api.replyTo,
+    closeThread: api.closeThread,
+    setThreadingMode: api.setThreadingMode
+  };
+}
+var h = React2.createElement;
+var svg = (children, size = 16) => h(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  },
+  children
+);
+var IconAttach = () => svg(h("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.81l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }));
+var IconBold = () => svg([
+  h("path", { key: "a", d: "M6 4h8a4 4 0 0 1 0 8H6z" }),
+  h("path", { key: "b", d: "M6 12h9a4 4 0 0 1 0 8H6z" })
+]);
+var IconItalic = () => svg([
+  h("line", { key: "a", x1: 19, y1: 4, x2: 10, y2: 4 }),
+  h("line", { key: "b", x1: 14, y1: 20, x2: 5, y2: 20 }),
+  h("line", { key: "c", x1: 15, y1: 4, x2: 9, y2: 20 })
+]);
+var IconCode = () => svg([
+  h("polyline", { key: "a", points: "16 18 22 12 16 6" }),
+  h("polyline", { key: "b", points: "8 6 2 12 8 18" })
+]);
+var IconLink = () => svg([
+  h("path", { key: "a", d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  h("path", { key: "b", d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+]);
+var IconQuote = () => svg([
+  h("path", { key: "a", d: "M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" }),
+  h("path", { key: "b", d: "M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" })
+]);
+var IconListUl = () => svg([
+  h("line", { key: "a", x1: 8, y1: 6, x2: 21, y2: 6 }),
+  h("line", { key: "b", x1: 8, y1: 12, x2: 21, y2: 12 }),
+  h("line", { key: "c", x1: 8, y1: 18, x2: 21, y2: 18 }),
+  h("line", { key: "d", x1: 3, y1: 6, x2: 3.01, y2: 6 }),
+  h("line", { key: "e", x1: 3, y1: 12, x2: 3.01, y2: 12 }),
+  h("line", { key: "f", x1: 3, y1: 18, x2: 3.01, y2: 18 })
+]);
+var IconListOl = () => svg([
+  h("line", { key: "a", x1: 10, y1: 6, x2: 21, y2: 6 }),
+  h("line", { key: "b", x1: 10, y1: 12, x2: 21, y2: 12 }),
+  h("line", { key: "c", x1: 10, y1: 18, x2: 21, y2: 18 }),
+  h("path", { key: "d", d: "M4 6h1v4" }),
+  h("path", { key: "e", d: "M4 10h2" }),
+  h("path", { key: "f", d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+]);
+var IconArrowUp = () => svg([
+  h("path", { key: "a", d: "M12 19V5" }),
+  h("path", { key: "b", d: "m5 12 7-7 7 7" })
+]);
+var IconStop = () => svg(h("rect", { x: 7, y: 7, width: 10, height: 10, rx: 1.5 }));
+var EMOJI = {
+  smile: "\u{1F604}",
+  grin: "\u{1F601}",
+  joy: "\u{1F602}",
+  rofl: "\u{1F923}",
+  wink: "\u{1F609}",
+  heart_eyes: "\u{1F60D}",
+  thinking: "\u{1F914}",
+  neutral: "\u{1F610}",
+  sob: "\u{1F62D}",
+  scream: "\u{1F631}",
+  tada: "\u{1F389}",
+  fire: "\u{1F525}",
+  heart: "\u2764\uFE0F",
+  thumbsup: "\u{1F44D}",
+  thumbsdown: "\u{1F44E}",
+  clap: "\u{1F44F}",
+  pray: "\u{1F64F}",
+  eyes: "\u{1F440}",
+  rocket: "\u{1F680}",
+  sparkles: "\u2728",
+  star: "\u2B50",
+  check: "\u2705",
+  x: "\u274C",
+  warning: "\u26A0\uFE0F",
+  bulb: "\u{1F4A1}",
+  bug: "\u{1F41B}",
+  wave: "\u{1F44B}",
+  ok_hand: "\u{1F44C}",
+  muscle: "\u{1F4AA}",
+  "100": "\u{1F4AF}",
+  poop: "\u{1F4A9}",
+  ghost: "\u{1F47B}",
+  robot: "\u{1F916}",
+  cat: "\u{1F431}",
+  dog: "\u{1F436}",
+  coffee: "\u2615",
+  pizza: "\u{1F355}",
+  beer: "\u{1F37A}",
+  sun: "\u2600\uFE0F",
+  moon: "\u{1F319}",
+  zap: "\u26A1"
+};
+var TRIGGER_CHARS = ["/", "@", ":"];
+var TRIGGER_QUERY_PATTERN = /^[\w+-]*$/;
+function detectTrigger(text, caret) {
+  let best = null;
+  for (const type of TRIGGER_CHARS) {
+    const hit = detectTriggerInText(text, caret, type);
+    if (!hit || !TRIGGER_QUERY_PATTERN.test(hit.query)) continue;
+    if (!best || hit.start > best.start) {
+      best = { type, query: hit.query, start: hit.start, end: caret };
+    }
+  }
+  return best;
+}
+var Composer = React2.forwardRef(
+  function Composer2({ placeholder = "Send a message\u2026", busy = false, slashCommands = [], mentions, toolbar = true, emoji = true, attachments = true, error, onRetry, onSubmit, onStop, onSlashCommand, autoFocus }, ref) {
+    const [value, setValue] = React2.useState("");
+    const [pending, setPending] = React2.useState([]);
+    const [trigger, setTrigger] = React2.useState(null);
+    const [active, setActive] = React2.useState(0);
+    const [mentionItems, setMentionItems] = React2.useState([]);
+    const textareaRef = React2.useRef(null);
+    const fileRef = React2.useRef(null);
+    React2.useEffect(() => {
+      if (trigger?.type !== "@" || !mentions) {
+        setMentionItems([]);
+        return;
+      }
+      if (Array.isArray(mentions)) {
+        const q = trigger.query.toLowerCase();
+        setMentionItems(mentions.filter((m) => m.label.toLowerCase().includes(q)).slice(0, 8));
+        return;
+      }
+      let cancelled = false;
+      Promise.resolve(mentions(trigger.query)).then((res) => {
+        if (!cancelled) setMentionItems(res.slice(0, 8));
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [trigger, mentions]);
+    const items = React2.useMemo(() => {
+      if (!trigger) return [];
+      const q = trigger.query.toLowerCase();
+      if (trigger.type === "/") {
+        return slashCommands.filter((c) => c.label.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)).slice(0, 8).map((c) => ({ key: c.id, primary: c.label, secondary: c.description, icon: c.icon, apply: c.insertText ?? "", runCmd: c }));
+      }
+      if (trigger.type === "@") {
+        return mentionItems.map((m) => ({ key: m.id, primary: m.label, icon: m.avatarUrl ? "" : "@", apply: `@${m.label} ` }));
+      }
+      if (trigger.type === ":" && emoji) {
+        return Object.entries(EMOJI).filter(([name]) => name.includes(q)).slice(0, 8).map(([name, char]) => ({ key: name, primary: `${char}  :${name}:`, apply: char }));
+      }
+      return [];
+    }, [trigger, slashCommands, mentionItems, emoji]);
+    const menuOpen = trigger !== null && items.length > 0;
+    React2.useEffect(() => setActive(0), [trigger?.type, trigger?.query]);
+    function syncFromTextarea(el) {
+      setValue(el.value);
+      setTrigger(detectTrigger(el.value, el.selectionStart ?? el.value.length));
+    }
+    function selectItem(i) {
+      const item = items[i];
+      if (!item || !trigger) return;
+      if (trigger.type === "/" && !item.apply && item.runCmd) {
+        const next2 = value.slice(0, trigger.start) + value.slice(trigger.end);
+        setValue(next2);
+        setTrigger(null);
+        onSlashCommand?.(item.runCmd);
+        queueCaret(trigger.start);
+        return;
+      }
+      const next = value.slice(0, trigger.start) + item.apply + value.slice(trigger.end);
+      setValue(next);
+      setTrigger(null);
+      queueCaret(trigger.start + item.apply.length);
+    }
+    function queueCaret(pos) {
+      requestAnimationFrame(() => {
+        const el = textareaRef.current;
+        if (!el) return;
+        el.focus();
+        el.setSelectionRange(pos, pos);
+      });
+    }
+    function format(kind) {
+      const el = textareaRef.current;
+      if (!el) return;
+      const start = el.selectionStart ?? 0;
+      const end = el.selectionEnd ?? 0;
+      const sel = value.slice(start, end);
+      let replacement = sel;
+      let caretOffset = 0;
+      if (kind === "bold") replacement = `**${sel || "bold"}**`;
+      else if (kind === "italic") replacement = `*${sel || "italic"}*`;
+      else if (kind === "code") replacement = sel.includes("\n") ? `
+\`\`\`
+${sel}
+\`\`\`
+` : `\`${sel || "code"}\``;
+      else if (kind === "link") {
+        replacement = `[${sel || "text"}](url)`;
+        caretOffset = replacement.length - 4;
+      } else if (kind === "quote" || kind === "ul" || kind === "ol") {
+        const prefix = kind === "quote" ? "> " : kind === "ul" ? "- " : "1. ";
+        const block = (sel || "item").split("\n").map((l) => prefix + l).join("\n");
+        replacement = (start > 0 && value[start - 1] !== "\n" ? "\n" : "") + block;
+      }
+      const next = value.slice(0, start) + replacement + value.slice(end);
+      setValue(next);
+      const caret = caretOffset ? start + caretOffset : start + replacement.length;
+      queueCaret(caret);
+    }
+    function submit() {
+      const text = value.trim();
+      if (!text && pending.length === 0 || busy) return;
+      onSubmit(text, pending.length ? pending : void 0);
+      setValue("");
+      setPending([]);
+      setTrigger(null);
+    }
+    function onFiles(files) {
+      if (!files) return;
+      setPending((p) => [
+        ...p,
+        ...Array.from(files).map((f) => ({
+          id: `${f.name}-${f.size}-${f.lastModified}`,
+          name: f.name,
+          url: URL.createObjectURL(f),
+          type: f.type || "application/octet-stream",
+          size: f.size
+        }))
+      ]);
+    }
+    function onKeyDown(e) {
+      if (menuOpen) {
+        if (e.key === "ArrowDown") return e.preventDefault(), setActive((a) => (a + 1) % items.length);
+        if (e.key === "ArrowUp") return e.preventDefault(), setActive((a) => (a - 1 + items.length) % items.length);
+        if (e.key === "Enter" || e.key === "Tab") return e.preventDefault(), selectItem(active);
+        if (e.key === "Escape") return e.preventDefault(), setTrigger(null);
+      }
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && e.key.toLowerCase() === "b") return e.preventDefault(), format("bold");
+      if (mod && e.key.toLowerCase() === "i") return e.preventDefault(), format("italic");
+      if (mod && e.key.toLowerCase() === "e") return e.preventDefault(), format("code");
+      if (mod && e.key.toLowerCase() === "k") return e.preventDefault(), format("link");
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    }
+    const iconBtn = "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground";
+    const toolbarBtn = (icon, title, kind) => h(
+      "button",
+      {
+        key: kind,
+        type: "button",
+        title,
+        "aria-label": title,
+        className: iconBtn,
+        onMouseDown: (e) => e.preventDefault(),
+        // keep textarea selection
+        onClick: () => format(kind)
+      },
+      icon
+    );
+    const divider = () => h("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true });
+    const menu = menuOpen ? h(
+      "div",
+      {
+        className: "absolute bottom-full left-0 z-20 mb-2 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg",
+        role: "listbox"
+      },
+      h(
+        "div",
+        { className: "border-b border-border px-3 py-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" },
+        trigger?.type === "/" ? "Commands" : trigger?.type === "@" ? "Mentions" : "Emoji"
+      ),
+      ...items.map(
+        (it, i) => h(
+          "button",
+          {
+            key: it.key,
+            type: "button",
+            role: "option",
+            "aria-selected": i === active,
+            className: cn(
+              "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+              i === active ? "bg-accent" : "hover:bg-accent/50"
+            ),
+            onMouseEnter: () => setActive(i),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectItem(i)
+          },
+          it.icon ? h("span", { className: "w-4 text-center text-muted-foreground" }, it.icon) : null,
+          h("span", { className: "flex-1 truncate" }, it.primary),
+          it.secondary ? h("span", { className: "truncate text-xs text-muted-foreground" }, it.secondary) : null
+        )
+      )
+    ) : null;
+    return h(
+      "div",
+      { ref, className: "p-3" },
+      h(
+        "div",
+        { className: "relative" },
+        menu,
+        // unified input card
+        h(
+          "div",
+          {
+            className: (
+              // Subtle focus: slight border darkening + a soft shadow lift — no
+              // bright colored ring (matches Claude/ChatGPT).
+              "overflow-hidden rounded-2xl border border-border bg-background shadow-sm transition-shadow focus-within:border-foreground/25 focus-within:shadow-md"
+            )
+          },
+          // error banner
+          error ? h(
+            "div",
+            { className: "flex items-center gap-2 border-b border-border bg-destructive/5 px-3 py-2 text-xs text-destructive", role: "alert" },
+            h("span", { className: "flex-1 truncate" }, error),
+            onRetry ? h("button", { type: "button", className: "font-medium underline", onClick: () => onRetry() }, "Retry") : null
+          ) : null,
+          // attachment chips
+          pending.length > 0 ? h(
+            "div",
+            { className: "flex flex-wrap gap-2 px-3 pt-3" },
+            ...pending.map(
+              (a) => h(
+                "span",
+                { key: a.id, className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs" },
+                a.name,
+                h(
+                  "button",
+                  { type: "button", className: "text-muted-foreground hover:text-destructive", onClick: () => setPending((p) => p.filter((x) => x.id !== a.id)) },
+                  "\u2715"
+                )
+              )
+            )
+          ) : null,
+          // textarea (borderless)
+          h("textarea", {
+            ref: textareaRef,
+            className: "block max-h-40 w-full resize-none bg-transparent px-3.5 py-3 text-sm placeholder:text-muted-foreground focus:outline-none",
+            rows: 1,
+            value,
+            placeholder,
+            autoFocus,
+            "aria-label": "Message",
+            onChange: (e) => syncFromTextarea(e.target),
+            onClick: (e) => syncFromTextarea(e.currentTarget),
+            onKeyUp: (e) => syncFromTextarea(e.currentTarget),
+            onKeyDown,
+            onBlur: () => setTimeout(() => setTrigger(null), 120)
+          }),
+          // bottom action bar
+          h(
+            "div",
+            { className: "flex items-center gap-0.5 px-2 pb-2" },
+            attachments ? h(
+              React2.Fragment,
+              null,
+              h("input", {
+                ref: fileRef,
+                type: "file",
+                accept: "image/*",
+                multiple: true,
+                className: "hidden",
+                onChange: (e) => {
+                  onFiles(e.target.files);
+                  e.target.value = "";
+                }
+              }),
+              h("button", { type: "button", className: iconBtn, "aria-label": "Attach image or GIF", onClick: () => fileRef.current?.click() }, h(IconAttach))
+            ) : null,
+            attachments && toolbar ? divider() : null,
+            toolbar ? h(
+              React2.Fragment,
+              null,
+              toolbarBtn(h(IconBold), "Bold (\u2318B)", "bold"),
+              toolbarBtn(h(IconItalic), "Italic (\u2318I)", "italic"),
+              toolbarBtn(h(IconCode), "Code (\u2318E)", "code"),
+              toolbarBtn(h(IconLink), "Link (\u2318K)", "link"),
+              divider(),
+              toolbarBtn(h(IconQuote), "Quote", "quote"),
+              toolbarBtn(h(IconListUl), "Bulleted list", "ul"),
+              toolbarBtn(h(IconListOl), "Numbered list", "ol")
+            ) : null,
+            h("div", { className: "flex-1" }),
+            busy ? h(
+              "button",
+              { type: "button", "aria-label": "Stop", className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition hover:opacity-90", onClick: () => onStop?.() },
+              h(IconStop)
+            ) : h(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Send",
+                className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+                disabled: !value.trim() && pending.length === 0,
+                onClick: submit
+              },
+              h(IconArrowUp)
+            )
+          )
+        )
+      )
+    );
+  }
+);
+var h2 = React2.createElement;
+var QUICK_EMOJIS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F389}", "\u{1F440}", "\u{1F64F}"];
+var chatMd = cn(
+  "max-w-none text-sm",
+  "[&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+  "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:text-xs [&_pre]:leading-relaxed",
+  "[&_ul]:my-1 [&_ol]:my-1 [&_li]:my-0.5",
+  "[&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-2 [&_h1]:mb-1",
+  "[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-2 [&_h2]:mb-1",
+  "[&_h3]:text-sm [&_h3]:font-semibold",
+  "[&_blockquote]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:pl-2 [&_blockquote]:not-italic [&_blockquote]:text-muted-foreground",
+  "[&_img]:my-1 [&_img]:max-h-60 [&_img]:rounded-md",
+  "[&_code]:text-[0.85em]"
+);
+function Avatar({ name, avatarUrl, size = 8 }) {
+  return h2(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 overflow-hidden rounded-full bg-muted flex items-center justify-center text-xs font-medium",
+        size === 8 ? "h-8 w-8" : "h-7 w-7"
+      )
+    },
+    avatarUrl ? h2("img", { src: avatarUrl, alt: name, className: "h-full w-full object-cover" }) : (name.charAt(0) || "?").toUpperCase()
+  );
+}
+function TypingDots() {
+  return h2(
+    "div",
+    { className: "flex items-center gap-1 py-1.5", "aria-label": "Assistant is typing" },
+    ...[0, 150, 300].map(
+      (delay) => h2("span", {
+        key: delay,
+        className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce",
+        style: { animationDelay: `${delay}ms` }
+      })
+    )
+  );
+}
+function Attachments({ attachments }) {
+  return h2(
+    "div",
+    { className: "mt-2 flex flex-wrap gap-2" },
+    ...attachments.map(
+      (a) => a.type.startsWith("image/") ? h2("img", { key: a.id, src: a.url, alt: a.name, className: "max-h-60 rounded-md border border-border object-contain" }) : h2(
+        "a",
+        {
+          key: a.id,
+          href: a.url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "inline-flex items-center gap-2 rounded-md border border-border bg-background/60 px-2 py-1 text-xs"
+        },
+        "\u{1F4CE} ",
+        a.name
+      )
+    )
+  );
+}
+function MessageBody({ message }) {
+  if (message.status === "streaming" && message.content === "") return h2(TypingDots);
+  return h2(
+    React2.Fragment,
+    null,
+    message.content ? h2(MarkdownRenderer, { content: message.content, size: "sm", className: chatMd }) : null,
+    message.attachments && message.attachments.length > 0 ? h2(Attachments, { attachments: message.attachments }) : null,
+    message.status === "error" ? h2("div", { className: "mt-1 text-xs text-destructive", role: "alert" }, message.error ?? "Failed to send.") : null
+  );
+}
+function Reactions({ message, onReact, align }) {
+  if (!message.reactions || message.reactions.length === 0) return null;
+  return h2(
+    "div",
+    { className: cn("mt-1 flex flex-wrap gap-1", align === "end" && "justify-end") },
+    ...message.reactions.map(
+      (r) => h2(
+        "button",
+        {
+          key: r.emoji,
+          type: "button",
+          onClick: () => onReact(r.emoji),
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs",
+            r.userReacted ? "border-primary bg-primary/10" : "border-border bg-background"
+          )
+        },
+        `${r.emoji} ${r.count}`
+      )
+    )
+  );
+}
+function QuotedParent({ parent, onClick }) {
+  const snippet = parent.content.length > 80 ? `${parent.content.slice(0, 80)}\u2026` : parent.content;
+  return h2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "mb-1 flex max-w-full items-start gap-2 rounded-md border-l-2 border-primary/50 bg-muted/50 px-2 py-1 text-left text-xs text-muted-foreground hover:bg-muted"
+    },
+    h2("span", { className: "font-medium" }, parent.author.name),
+    h2("span", { className: "truncate" }, snippet)
+  );
+}
+function HoverActions({
+  message,
+  conversation,
+  isOwn,
+  onEdit,
+  onToggleEmojis,
+  align
+}) {
+  const { replyTo, deleteMessage } = conversation;
+  return h2(
+    "div",
+    {
+      className: cn(
+        "mt-1 flex items-center gap-3 text-xs text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+        align === "end" && "justify-end"
+      )
+    },
+    // Reply targets this specific message but groups under the originating root.
+    h2("button", { type: "button", className: "hover:text-foreground", onClick: () => replyTo(message.id) }, "Reply"),
+    h2("button", { type: "button", className: "hover:text-foreground", onClick: onToggleEmojis }, "React"),
+    isOwn ? h2("button", { type: "button", className: "hover:text-foreground", onClick: onEdit }, "Edit") : null,
+    isOwn ? h2("button", { type: "button", className: "hover:text-destructive", onClick: () => deleteMessage(message.id) }, "Delete") : null
+  );
+}
+function EmojiRow({ onPick, align }) {
+  return h2(
+    "div",
+    { className: cn("mt-1 flex gap-1", align === "end" && "justify-end") },
+    ...QUICK_EMOJIS.map(
+      (emoji) => h2("button", { key: emoji, type: "button", className: "rounded px-1 text-base hover:bg-accent", onClick: () => onPick(emoji) }, emoji)
+    )
+  );
+}
+function EditField({ message, conversation, onDone }) {
+  const [draft, setDraft] = React2.useState(message.content);
+  function save() {
+    const t = draft.trim();
+    if (t && t !== message.content) conversation.editMessage(message.id, t);
+    onDone();
+  }
+  return h2(
+    "div",
+    { className: "mt-1" },
+    h2("textarea", {
+      className: "w-full resize-none rounded-md border border-border bg-background px-2 py-1 text-sm",
+      value: draft,
+      autoFocus: true,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          save();
+        }
+        if (e.key === "Escape") onDone();
+      }
+    }),
+    h2(
+      "div",
+      { className: "mt-1 flex gap-2 text-xs" },
+      h2("button", { type: "button", className: "text-primary", onClick: save }, "Save"),
+      h2("button", { type: "button", className: "text-muted-foreground", onClick: onDone }, "Cancel")
+    )
+  );
+}
+function MessageRow({
+  message,
+  conversation,
+  currentUserId,
+  showThreadAffordance,
+  quotedParent
+}) {
+  const { state, react, openThread } = conversation;
+  const [showEmojis, setShowEmojis] = React2.useState(false);
+  const [editing, setEditing] = React2.useState(false);
+  const isUser = currentUserId ? message.author.id === currentUserId : message.role === "user";
+  const replyCount = getReplyCount(state.messages, message.id);
+  const align = isUser ? "end" : "start";
+  const inner = h2(
+    React2.Fragment,
+    null,
+    quotedParent ? h2(QuotedParent, { parent: quotedParent, onClick: () => openThread(rootIdOf(state.messages, quotedParent.id)) }) : null,
+    editing ? h2(EditField, { message, conversation, onDone: () => setEditing(false) }) : isUser ? h2("div", { className: "inline-block rounded-2xl rounded-br-sm bg-primary/10 px-3 py-2 text-left" }, h2(MessageBody, { message })) : h2(MessageBody, { message }),
+    h2(Reactions, { message, onReact: (e) => react(message.id, e), align }),
+    showThreadAffordance && replyCount > 0 ? h2(
+      "button",
+      { type: "button", className: cn("mt-1 text-xs font-medium text-primary hover:underline", align === "end" && "self-end"), onClick: () => openThread(message.id) },
+      `\u{1F4AC} ${replyCount} ${replyCount === 1 ? "reply" : "replies"}`
+    ) : null,
+    h2(HoverActions, { message, conversation, isOwn: isUser, onEdit: () => setEditing(true), onToggleEmojis: () => setShowEmojis((v) => !v), align }),
+    showEmojis ? h2(EmojiRow, {
+      onPick: (e) => {
+        react(message.id, e);
+        setShowEmojis(false);
+      },
+      align
+    }) : null
+  );
+  if (!isUser) {
+    return h2(
+      "div",
+      { className: "group flex gap-3 rounded-md px-3 py-2 hover:bg-accent/30", role: "article", "aria-label": `Message from ${message.author.name}`, "data-message-id": message.id },
+      h2(Avatar, { name: message.author.name, avatarUrl: message.author.avatarUrl }),
+      h2(
+        "div",
+        { className: "min-w-0 flex-1" },
+        h2(
+          "div",
+          { className: "flex items-baseline gap-2" },
+          h2("span", { className: "text-sm font-semibold" }, message.author.name),
+          h2("span", { className: "text-xs text-muted-foreground", title: message.timestamp.toISOString() }, formatTimestamp(message.timestamp)),
+          message.edited ? h2("span", { className: "text-xs text-muted-foreground" }, "(edited)") : null
+        ),
+        inner
+      )
+    );
+  }
+  return h2(
+    "div",
+    { className: "group flex flex-col items-end px-3 py-1.5", role: "article", "aria-label": `Message from ${message.author.name}`, "data-message-id": message.id },
+    h2(
+      "div",
+      { className: "flex items-baseline gap-2" },
+      message.edited ? h2("span", { className: "text-xs text-muted-foreground" }, "(edited)") : null,
+      h2("span", { className: "text-xs text-muted-foreground", title: message.timestamp.toISOString() }, formatTimestamp(message.timestamp)),
+      h2("span", { className: "text-sm font-semibold" }, message.author.name)
+    ),
+    h2("div", { className: "mt-0.5 flex max-w-[80%] flex-col items-end" }, inner)
+  );
+}
+function ConversationSidebar({ conversation }) {
+  const { state, newConversation, selectConversation, deleteConversation } = conversation;
+  return h2(
+    "aside",
+    { className: "flex w-56 flex-col gap-1 overflow-y-auto border-r border-border bg-muted/20 p-2", "aria-label": "Conversations" },
+    h2(
+      "button",
+      { type: "button", className: "mb-1 w-full rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90", onClick: () => newConversation() },
+      "+ New chat"
+    ),
+    ...state.conversations.map(
+      (conv) => h2(
+        "div",
+        {
+          key: conv.id,
+          role: "button",
+          "aria-current": conv.id === state.activeConversationId,
+          onClick: () => selectConversation(conv.id),
+          className: cn(
+            "group flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent/60",
+            conv.id === state.activeConversationId && "bg-accent font-medium"
+          )
+        },
+        h2(
+          "div",
+          { className: "min-w-0" },
+          h2("div", { className: "truncate" }, conv.title),
+          h2("div", { className: "truncate text-xs text-muted-foreground" }, formatRelativeTime(conv.updatedAt))
+        ),
+        h2(
+          "button",
+          {
+            type: "button",
+            className: "text-xs text-muted-foreground opacity-0 hover:text-destructive group-hover:opacity-100",
+            "aria-label": `Delete ${conv.title}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              deleteConversation(conv.id);
+            }
+          },
+          "\u2715"
+        )
+      )
+    )
+  );
+}
+function ThreadPanel({ conversation, currentUserId, composer }) {
+  const { state } = conversation;
+  const rootId = state.openThreadRootId;
+  if (!rootId) return null;
+  const messages = selectThreadMessages(state.messages, rootId);
+  const target = state.replyTarget && state.replyTarget !== rootId ? findMessage(state.messages, state.replyTarget) : void 0;
+  return h2(
+    "aside",
+    { className: "flex w-80 flex-col border-l border-border", "aria-label": "Thread" },
+    h2(
+      "div",
+      { className: "flex items-center justify-between border-b border-border px-3 py-2" },
+      h2("span", { className: "text-sm font-semibold" }, `Thread \xB7 ${messages.length - 1} ${messages.length - 1 === 1 ? "reply" : "replies"}`),
+      h2("button", { type: "button", className: "text-muted-foreground hover:text-foreground", "aria-label": "Close thread", onClick: () => conversation.closeThread() }, "\u2715")
+    ),
+    h2(
+      "div",
+      { className: "flex-1 overflow-y-auto p-1" },
+      ...messages.map((m) => h2(MessageRow, { key: m.id, message: m, conversation, currentUserId, showThreadAffordance: false }))
+    ),
+    target ? h2(
+      "div",
+      { className: "flex items-center justify-between gap-2 border-t border-border bg-muted/40 px-3 py-1 text-xs text-muted-foreground" },
+      h2("span", { className: "truncate" }, `\u21B3 Replying to ${target.author.name}`),
+      h2("button", { type: "button", className: "hover:text-foreground", onClick: () => conversation.openThread(rootId) }, "Reply to thread instead")
+    ) : null,
+    composer
+  );
+}
+function ModeToggle({ conversation }) {
+  const { state, setThreadingMode } = conversation;
+  const opt = (mode, label) => h2(
+    "button",
+    {
+      type: "button",
+      onClick: () => setThreadingMode(mode),
+      className: cn("rounded px-2 py-0.5 text-xs", state.threadingMode === mode ? "bg-background shadow-sm" : "text-muted-foreground")
+    },
+    label
+  );
+  return h2(
+    "div",
+    { className: "inline-flex rounded-md bg-muted p-0.5", role: "group", "aria-label": "Threading mode" },
+    opt("inline", "Inline"),
+    opt("panel", "Threads")
+  );
+}
+var Chat = React2.forwardRef(
+  function Chat2({ conversation, showConversationList = true, showModeToggle = true, placeholder, currentUserId, emptyState, className, slashCommands, mentions, onSlashCommand, composerToolbar = true }, ref) {
+    const { state, sendMessage } = conversation;
+    const timeline = selectMainTimeline(state.messages, state.threadingMode);
+    const activeConv = state.conversations.find((c) => c.id === state.activeConversationId);
+    const busy = state.status === "sending" || state.status === "streaming";
+    const error = state.status === "error" ? state.error : null;
+    const onRetry = () => void conversation.retryLast();
+    const mainComposer = h2(Composer, {
+      placeholder,
+      busy,
+      error,
+      onRetry,
+      slashCommands,
+      mentions,
+      onSlashCommand,
+      toolbar: composerToolbar,
+      onSubmit: (content, atts) => void sendMessage(content, { attachments: atts }),
+      onStop: () => conversation.stop()
+    });
+    const threadComposer = state.openThreadRootId ? h2(Composer, {
+      placeholder: "Reply\u2026",
+      busy,
+      error,
+      onRetry,
+      slashCommands,
+      mentions,
+      onSlashCommand,
+      toolbar: composerToolbar,
+      onSubmit: (content, atts) => void sendMessage(content, { replyTo: state.replyTarget ?? state.openThreadRootId, attachments: atts }),
+      onStop: () => conversation.stop()
+    }) : null;
+    const body = timeline.length === 0 ? h2("div", { className: "flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground" }, emptyState ?? "No messages yet. Say hello \u{1F44B}") : h2(
+      "div",
+      { className: "flex-1 space-y-0.5 overflow-y-auto p-2" },
+      ...timeline.map(
+        (m) => h2(MessageRow, {
+          key: m.id,
+          message: m,
+          conversation,
+          currentUserId,
+          // Show the "N replies" count on originating messages in BOTH modes.
+          showThreadAffordance: true,
+          // Inline: quote the specific message replied to (falls back to the root).
+          quotedParent: state.threadingMode === "inline" && m.parentId ? findMessage(state.messages, m.replyToId ?? m.parentId) : void 0
+        })
+      )
+    );
+    return h2(
+      "div",
+      { ref, className: cn("flex h-full min-h-0 overflow-hidden rounded-xl border border-border bg-background", className) },
+      showConversationList ? h2(ConversationSidebar, { conversation }) : null,
+      h2(
+        "div",
+        { className: "flex min-w-0 flex-1 flex-col" },
+        h2(
+          "div",
+          { className: "flex items-center justify-between border-b border-border px-3 py-2" },
+          h2("span", { className: "truncate text-sm font-semibold" }, activeConv?.title ?? "Chat"),
+          showModeToggle ? h2(ModeToggle, { conversation }) : null
+        ),
+        body,
+        mainComposer
+      ),
+      h2(ThreadPanel, { conversation, currentUserId, composer: threadComposer })
+    );
+  }
+);
+export {
+  Chat,
+  Composer,
+  createConversation,
+  findMessage,
+  getReplyCount,
+  rootIdOf,
+  selectMainTimeline,
+  selectReplies,
+  selectRoots,
+  selectThreadMessages,
+  selectTimelineFromState,
+  useConversation
+};
+//# sourceMappingURL=react-conversation.js.map