@oxy.so/bloom 6.4.0 → 7.0.0

package/lib/module/multi-agent-chat/MultiAgentChatBase.js

@@ -0,0 +1,921 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Share, useWindowDimensions } from 'react-native';
+import Animated, { useReducedMotion } from 'react-native-reanimated';
+import { AgentAvatar } from "../agent-avatar/index.js";
+import { StreamedText } from "../agent-chat/AgentChatMessage.js";
+import { Button, IconButton } from '../button';
+import { useDialogControl } from "../dialog/context.js";
+import { useDirectionProps } from "../hooks/use-is-rtl.js";
+import { RiCheckLine } from "../icons/remix/RiCheckLine.js";
+import { RiFileCopyLine } from "../icons/remix/RiFileCopyLine.js";
+import { RiGroupLine } from "../icons/remix/RiGroupLine.js";
+import { RiMenuLine } from "../icons/remix/RiMenuLine.js";
+import { RiMoreFill } from "../icons/remix/RiMoreFill.js";
+import { RiShare2Line } from "../icons/remix/RiShare2Line.js";
+import { RiThumbDownLine } from "../icons/remix/RiThumbDownLine.js";
+import { RiThumbUpLine } from "../icons/remix/RiThumbUpLine.js";
+import { useMessages } from "../locale/messages.js";
+import { OverlayRoot, TOAST_LAYER_Z } from "../overlay/index.js";
+import { StyledPressable, StyledView } from "../styles/styled-primitives.js";
+import { TextFieldInput } from "../text-field/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { AvatarHandoff } from "./AvatarHandoff.js";
+import { ChatDialogFrame, SupportCopy } from "./ChatDialogFrame.js";
+import { ChatSidebar } from "./ChatSidebar.js";
+import { useChatComponents } from "./context.js";
+import { conversationFor, formatDemoReply, nextAgentIdentity, removeConversation, updateConversationAgents } from "./data.js";
+import { EditorRail } from "./EditorRail.js";
+import { captureAvatars, measureAvatar } from "./handoff.js";
+import { Marketplace } from "./Marketplace.js";
+import { DEFAULT_PLUGINS, MARKETPLACE_ITEMS, addMarketplaceBot } from "./marketplace-data.js";
+import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from "./messages.js";
+import { WORKSPACE_MODELS } from "./model-catalog.js";
+import { ReplyHeader, ReplyRow } from "./ReplyRow.js";
+import { ScrollSurface } from "./ScrollSurface.js";
+import { SelectedAgentPreview } from "./SelectedAgentPreview.js";
+import { chatId, useReplies } from "./use-replies.js";
+import { useWorkspace } from "./use-workspace.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+function AgentStack({
+  agents,
+  size = 40,
+  nodes
+}) {
+  return /*#__PURE__*/_jsx(StyledView, {
+    style: {
+      width: size,
+      height: size
+    },
+    accessibilityLabel: agents.map(a => a.name).join(', '),
+    children: agents.slice(0, 3).map((agent, i) => /*#__PURE__*/_jsx(StyledView, {
+      ref: node => {
+        if (nodes) {
+          if (node) nodes.set(agent.id, node);else nodes.delete(agent.id);
+        }
+      },
+      collapsable: false,
+      style: {
+        width: agents.length === 1 ? size : size * 0.65,
+        height: agents.length === 1 ? size : size * 0.65,
+        position: 'absolute',
+        left: agents.length === 1 ? 0 : i === 1 ? size * 0.4 : i === 2 ? size * 0.2 : 0,
+        top: i === 2 ? size * 0.4 : 0
+      },
+      children: /*#__PURE__*/_jsx(AgentAvatar, {
+        config: agent.avatar,
+        size: agents.length === 1 ? size : size * 0.65,
+        label: agent.name
+      })
+    }, agent.id))
+  });
+}
+/** Shared workspace implementation. Platform bindings select Bloom's existing surfaces only. */
+export function MultiAgentChatBase(props) {
+  const {
+    messages
+  } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
+  const {
+    defaultEditorId = 'security',
+    onCopy,
+    voices,
+    onPreviewVoice,
+    className,
+    style,
+    testID = 'multi-agent-chat'
+  } = props;
+  const {
+    Portal,
+    Dialog,
+    ComposerPanel,
+    AgentCreator,
+    Surface,
+    Dropdown: D
+  } = useChatComponents();
+  const {
+    colors
+  } = useTheme();
+  const directionProps = useDirectionProps();
+  const reduced = useReducedMotion();
+  const root = useRef(null),
+    pickerAvatars = useRef(new Map()),
+    emptyAvatars = useRef(new Map()),
+    badgeRef = useRef(null),
+    replyAvatars = useRef(new Map());
+  const [handoff, setHandoff] = useState(null),
+    [flightOrigin, setFlightOrigin] = useState(null);
+  const handoffGeneration = useRef(0),
+    sending = useRef(false),
+    starting = useRef(false);
+  const finishHandoff = useCallback(() => setHandoff(null), []);
+  const arriveAvatar = useCallback(id => setHandoff(current => {
+    if (!current || current.arrived.includes(id)) return current;
+    const arrived = [...current.arrived, id];
+    return arrived.length === current.avatars.length ? null : {
+      ...current,
+      arrived
+    };
+  }), []);
+  const resolveFlightTarget = useCallback(id => handoff?.kind === 'group' ? emptyAvatars.current.get(id) : id === handoff?.responderId ? replyAvatars.current.get(id) : badgeRef.current ?? undefined, [handoff?.kind, handoff?.responderId]);
+  const {
+    width
+  } = useWindowDimensions();
+  const compact = width < 1100;
+  const phone = width < 768;
+  const {
+    workspace,
+    current,
+    update,
+    loaded
+  } = useWorkspace(props);
+  const replies = useReplies(current, update, props.onRespond);
+  const [drafts, setDrafts] = useState({});
+  const [editor, setEditor] = useState(() => workspace.agents.find(a => a.id === defaultEditorId) ?? null);
+  const [panel, setPanel] = useState(null);
+  const [selected, setSelected] = useState([]);
+  const [editingChatId, setEditingChatId] = useState(null);
+  const [targetChatId, setTargetChatId] = useState(null);
+  const [rename, setRename] = useState('');
+  const [query, setQuery] = useState('');
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [marketItem, setMarketItem] = useState(null);
+  const [feedback, setFeedback] = useState({});
+  const surface = useDialogControl();
+  const scroll = useRef(null);
+  const follow = useRef(true);
+  const offsets = useRef({});
+  const chat = workspace.chats.find(c => c.id === workspace.activeId) ?? workspace.chats[0] ?? {
+    id: 'draft-chat',
+    title: '',
+    agentIds: workspace.agents[0] ? [workspace.agents[0].id] : [],
+    messages: []
+  };
+  const participants = chat?.agentIds.flatMap(id => workspace.agents.find(a => a.id === id) ?? []) ?? [];
+  const targetChat = workspace.chats.find(c => c.id === targetChatId) ?? chat;
+  const open = useCallback(next => {
+    setPanel(next);
+    surface.open();
+  }, [surface]);
+  const restoredEditor = useRef(false);
+  useEffect(() => {
+    if (!loaded || restoredEditor.current) return;
+    restoredEditor.current = true;
+    setEditor(current.current.agents.find(agent => agent.id === defaultEditorId) ?? null);
+  }, [loaded, current, defaultEditorId]);
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof window === 'undefined') return;
+    const id = new URL(window.location.href).searchParams.get('marketplace');
+    const item = MARKETPLACE_ITEMS.find(entry => entry.id === id);
+    if (item) {
+      setMarketItem(item);
+      setPanel('marketplace');
+    }
+  }, []);
+  const initialEditorOpened = useRef(false);
+  useEffect(() => {
+    if (!initialEditorOpened.current && defaultEditorId && compact && editor) {
+      initialEditorOpened.current = true;
+      open('editor');
+    }
+  }, [defaultEditorId, compact, editor, open]);
+  const close = () => surface.close();
+  const edit = agent => {
+    if (!compact) close();
+    setEditor({
+      ...agent,
+      avatar: {
+        ...agent.avatar
+      }
+    });
+    if (compact) open('editor');
+  };
+  const saveAgent = agent => {
+    setEditor(agent);
+    update(s => {
+      const previous = s.agents.find(a => a.id === agent.id);
+      return {
+        ...s,
+        agents: previous ? s.agents.map(a => a.id === agent.id ? agent : a) : [...s.agents, agent],
+        chats: s.chats.map(c => c.agentIds.length === 1 && c.agentIds[0] === agent.id && (c.title === previous?.name || c.title === previous?.label) ? {
+          ...c,
+          title: agent.name
+        } : c)
+      };
+    });
+  };
+  const createAgent = () => {
+    const agent = {
+      id: chatId('agent'),
+      ...nextAgentIdentity(workspace.agents),
+      label: '',
+      description: ''
+    };
+    const created = conversationFor([agent], [agent.id], chatId('chat'));
+    update(s => ({
+      ...s,
+      agents: [...s.agents, agent],
+      chats: [created, ...s.chats],
+      activeId: created.id
+    }));
+    edit(agent);
+  };
+  const chooseAgents = (ids = [], existingId = null) => {
+    handoffGeneration.current++;
+    setHandoff(null);
+    setSelected(ids);
+    setEditingChatId(existingId);
+    open('picker');
+  };
+  const startChat = async () => {
+    if (starting.current) return;
+    const ids = [...new Set(selected)].filter(id => workspace.agents.some(a => a.id === id));
+    if (!ids.length) return;
+    if (editingChatId) {
+      replies.stop(editingChatId);
+      update(s => updateConversationAgents(s, editingChatId, ids));
+      close();
+      return;
+    }
+    const id = chatId('chat');
+    const next = conversationFor(workspace.agents, ids, id);
+    const existing = ids.length === 1 ? workspace.chats.find(c => c.agentIds.length === 1 && c.agentIds[0] === ids[0]) : undefined;
+    if (existing) {
+      selectChat(existing.id);
+      close();
+      return;
+    }
+    starting.current = true;
+    const generation = ++handoffGeneration.current;
+    const selectedAgents = ids.flatMap(id => workspace.agents.find(a => a.id === id) ?? []);
+    const [avatars, origin] = await Promise.all([ids.length > 1 && !reduced ? captureAvatars(selectedAgents, pickerAvatars.current) : Promise.resolve([]), measureAvatar(root.current ?? undefined)]);
+    starting.current = false;
+    if (generation !== handoffGeneration.current) return;
+    setFlightOrigin(origin);
+    setHandoff(avatars.length ? {
+      chatId: id,
+      kind: 'group',
+      avatars,
+      arrived: []
+    } : null);
+    setEditor(null);
+    update(s => ({
+      ...s,
+      chats: [next, ...s.chats],
+      activeId: id
+    }));
+    follow.current = true;
+    close();
+  };
+  const copy = async (text, message = messages.copied) => {
+    try {
+      if (onCopy) await onCopy(text);else if (Platform.OS === 'web' && typeof navigator !== 'undefined' && navigator.clipboard) await navigator.clipboard.writeText(text);else await Share.share({
+        message: text
+      });
+      replies.setNotice(message);
+    } catch {
+      replies.setNotice(messages.couldnTCopyPleaseTryAgain);
+    }
+  };
+  const transcript = conversation => conversation.messages.map(m => `${m.role === 'user' ? messages.you : workspace.agents.find(a => a.id === m.agentId)?.name ?? messages.agent}: ${m.text}`).join('\n\n');
+  const selectChat = id => {
+    handoffGeneration.current++;
+    setHandoff(null);
+    update(s => ({
+      ...s,
+      activeId: id
+    }));
+    follow.current = !offsets.current[id];
+    requestAnimationFrame(() => scroll.current?.scrollTo({
+      y: offsets.current[id] ?? 0,
+      animated: false
+    }));
+    if (panel === 'navigation') close();
+  };
+  const removeChat = id => {
+    replies.stop(id);
+    update(s => removeConversation(s, id));
+    setDrafts(s => {
+      const next = {
+        ...s
+      };
+      delete next[id];
+      return next;
+    });
+    replies.setNotice(messages.chatRemoved);
+  };
+  const sendMessage = async text => {
+    if (!chat || !text.trim() || replies.pending[chat.id] || sending.current) return;
+    sending.current = true;
+    const id = chat.id,
+      generation = ++handoffGeneration.current;
+    const [avatars, origin] = await Promise.all([!chat.messages.length && participants.length > 1 && !reduced ? captureAvatars(participants, emptyAvatars.current) : Promise.resolve([]), measureAvatar(root.current ?? undefined)]);
+    sending.current = false;
+    if (generation !== handoffGeneration.current) return;
+    setFlightOrigin(origin);
+    setHandoff(avatars.length ? {
+      chatId: id,
+      kind: 'first',
+      responderId: participants[0]?.id,
+      avatars,
+      arrived: []
+    } : null);
+    setDrafts(s => ({
+      ...s,
+      [id]: ''
+    }));
+    follow.current = true;
+    void replies.send(text, id, avatars.length ? 800 : 0, chat);
+  };
+  const editPanel = editor && /*#__PURE__*/_jsx(AgentCreator, {
+    agent: editor,
+    onChange: saveAgent,
+    voices: voices,
+    onPreviewVoice: onPreviewVoice,
+    onClose: () => {
+      setEditor(null);
+      if (panel === 'editor') close();
+    },
+    style: {
+      flex: 1
+    }
+  });
+  const sortedChats = useMemo(() => workspace.chats.filter(c => `${c.customTitle || c.title} ${workspace.agents.filter(a => c.agentIds.includes(a.id)).map(a => `${a.name} ${a.label}`).join(' ')} ${c.messages[c.messages.length - 1]?.text ?? ''}`.toLocaleLowerCase().includes(query.toLocaleLowerCase())).sort((a, b) => Number(!!b.pinned) - Number(!!a.pinned)), [workspace.chats, query]);
+  const sidebar = /*#__PURE__*/_jsx(ChatSidebar, {
+    agents: workspace.agents,
+    chats: sortedChats,
+    activeId: workspace.activeId,
+    pending: replies.pending,
+    query: query,
+    searchOpen: searchOpen,
+    onQuery: setQuery,
+    onSearch: setSearchOpen,
+    onSelect: selectChat,
+    onCreate: createAgent,
+    onPicker: () => chooseAgents(),
+    onMarketplace: () => {
+      setMarketItem(null);
+      setPanel('marketplace');
+    },
+    onSettings: () => setPanel('settings'),
+    onSupport: () => open('support'),
+    onAction: (target, action) => {
+      setTargetChatId(target.id);
+      if (action === 'pin') update(s => ({
+        ...s,
+        chats: s.chats.map(c => c.id === target.id ? {
+          ...c,
+          pinned: !c.pinned
+        } : c)
+      }));
+      if (action === 'rename') {
+        setRename(target.customTitle || target.title);
+        open('rename');
+      }
+      if (action === 'edit') {
+        if (target.agentIds.length > 1) chooseAgents(target.agentIds, target.id);else {
+          const agent = workspace.agents.find(a => a.id === target.agentIds[0]);
+          if (agent) edit(agent);
+        }
+      }
+      if (action === 'copy') void copy(transcript(target), messages.conversationCopied);
+      if (action === 'copy-id') void copy(target.id, messages.conversationIDCopied);
+      if (action === 'remove') removeChat(target.id);
+    }
+  });
+  const title = panel === 'picker' ? editingChatId ? messages.editGroup : messages.chatWithYourAgents : panel === 'rename' ? messages.renameChat : panel === 'marketplace' ? marketItem?.name ?? messages.marketplace : panel === 'editor' ? messages.editAgentTitle : panel === 'support' ? messages.aLittleHelp : panel === 'settings' ? messages.settings : panel === 'navigation' ? messages.conversations : messages.conversationOptions;
+  const messageActions = (id, text) => /*#__PURE__*/_jsxs(StyledView, {
+    className: "mt-1 flex-row items-center gap-1",
+    children: [['up', 'down'].map(value => /*#__PURE__*/_jsx(StyledPressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: value === 'up' ? messages.helpfulResponse : messages.unhelpfulResponse,
+      accessibilityState: {
+        selected: feedback[id] === value
+      },
+      "aria-pressed": feedback[id] === value,
+      onPress: () => setFeedback(s => ({
+        ...s,
+        [id]: value
+      })),
+      className: "h-[22px] w-[22px] items-center justify-center rounded-md",
+      style: {
+        backgroundColor: colors.backgroundTertiary
+      },
+      children: value === 'up' ? /*#__PURE__*/_jsx(RiThumbUpLine, {
+        width: 12,
+        height: 12,
+        fill: feedback[id] === value ? colors.primary : colors.textTertiary
+      }) : /*#__PURE__*/_jsx(RiThumbDownLine, {
+        width: 12,
+        height: 12,
+        fill: feedback[id] === value ? colors.primary : colors.textTertiary
+      })
+    }, value)), /*#__PURE__*/_jsx(StyledPressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: messages.copyResponse,
+      className: "flex size-[22px] items-center justify-center rounded-md bg-background-tertiary-default text-foreground-icon-tertiary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring",
+      onPress: () => {
+        void copy(text, messages.responseCopied);
+      },
+      children: /*#__PURE__*/_jsx(RiFileCopyLine, {
+        width: 12,
+        height: 12,
+        fill: colors.textTertiary
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(StyledView, {
+    ...directionProps,
+    ref: root,
+    collapsable: false,
+    className: `flex h-dvh min-h-0 overflow-hidden bg-background-full p-3 text-text-primary flex-row ${className ?? ''}`,
+    style: [{
+      flex: 1,
+      minHeight: 0
+    }, style],
+    testID: testID,
+    children: [!phone && /*#__PURE__*/_jsx(StyledView, {
+      className: "me-4 hidden min-h-0 shrink-0 md:block",
+      style: {
+        width: 260
+      },
+      children: sidebar
+    }), /*#__PURE__*/_jsxs(StyledView, {
+      accessibilityLabel: messages.agentConversation,
+      className: "flex min-h-0 min-w-0 flex-1 flex-col rounded-3xl bg-background-secondary-default",
+      children: [/*#__PURE__*/_jsxs(StyledView, {
+        className: "flex h-[55px] shrink-0 items-start gap-2 px-3 pt-3 flex-row",
+        children: [phone && /*#__PURE__*/_jsx(IconButton, {
+          icon: RiMenuLine,
+          accessibilityLabel: messages.openConversations,
+          size: "sm",
+          onPress: () => open('navigation')
+        }), /*#__PURE__*/_jsx(StyledView, {
+          className: "flex min-w-0 flex-1 flex-row",
+          children: /*#__PURE__*/_jsxs(StyledView, {
+            ref: badgeRef,
+            collapsable: false,
+            className: "relative z-40 min-w-0 max-w-full rounded-full",
+            children: [/*#__PURE__*/_jsx(Surface, {
+              fill: colors.backgroundSecondary,
+              radius: 999,
+              style: {
+                position: 'absolute',
+                inset: 0
+              },
+              pointerEvents: "none"
+            }), /*#__PURE__*/_jsxs(StyledPressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: participants.length === 1 ? formatChatMessage(messages.editAgent, participants[0].name) : messages.editConversationAgents,
+              onPress: () => participants.length === 1 ? edit(participants[0]) : chooseAgents(chat?.agentIds),
+              className: "flex h-[31px] min-w-0 max-w-full items-center gap-2 rounded-full px-2 pe-3 text-body-2-medium text-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring flex-row",
+              children: [/*#__PURE__*/_jsx(AgentStack, {
+                agents: participants,
+                size: 20
+              }), /*#__PURE__*/_jsx(Text, {
+                numberOfLines: 1,
+                className: "truncate text-body-2-medium text-text-secondary",
+                children: participants.length === 1 ? participants[0].name : participants.slice(0, 3).map(a => a.label || a.name).join(' + ')
+              }), participants.length > 3 && /*#__PURE__*/_jsxs(Text, {
+                className: "shrink-0",
+                children: ["+", participants.length - 3]
+              })]
+            })]
+          })
+        }), /*#__PURE__*/_jsx(StyledPressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: messages.copyConversation,
+          onPress: () => chat && void copy(transcript(chat), messages.conversationCopied),
+          className: "rounded p-1 text-foreground-icon-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring",
+          children: /*#__PURE__*/_jsx(RiShare2Line, {
+            width: 16,
+            height: 16,
+            fill: colors.textSecondary
+          })
+        }), /*#__PURE__*/_jsxs(D.DropdownMenu, {
+          children: [/*#__PURE__*/_jsx(D.DropdownMenuTrigger, {
+            asChild: true,
+            children: /*#__PURE__*/_jsx(StyledPressable, {
+              accessibilityRole: "button",
+              accessibilityLabel: messages.conversationOptions,
+              className: "rounded p-1 text-foreground-icon-secondary",
+              children: /*#__PURE__*/_jsx(RiMoreFill, {
+                width: 16,
+                height: 16,
+                fill: colors.textSecondary
+              })
+            })
+          }), /*#__PURE__*/_jsxs(D.DropdownMenuContent, {
+            label: messages.conversationOptions,
+            align: "end",
+            className: "rounded-[14px] p-1",
+            style: {
+              borderRadius: 14,
+              padding: 4
+            },
+            children: [/*#__PURE__*/_jsx(D.DropdownMenuLabel, {
+              children: messages.inThisConversation
+            }), participants.map(agent => /*#__PURE__*/_jsx(D.DropdownMenuItem, {
+              onPress: () => edit(agent),
+              leading: /*#__PURE__*/_jsx(AgentAvatar, {
+                config: agent.avatar,
+                size: 20
+              }),
+              className: "px-2 py-1.5 text-body-medium",
+              children: formatChatMessage(messages.editAgent, agent.name)
+            }, agent.id)), /*#__PURE__*/_jsx(D.DropdownMenuItem, {
+              onPress: () => chooseAgents(chat?.agentIds),
+              leading: /*#__PURE__*/_jsx(RiGroupLine, {
+                width: 16,
+                height: 16
+              }),
+              className: "px-2 py-1.5 text-body-medium",
+              children: messages.startAGroupChat
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(ScrollSurface, {
+        scrollRef: scroll,
+        label: messages.messages,
+        className: "flex-1",
+        contentClassName: chat?.messages.length ? 'pb-4 pt-2' : 'flex items-center justify-center p-4',
+        contentContainerStyle: {
+          flexGrow: 1
+        },
+        scrollEventThrottle: 16,
+        onScroll: event => {
+          const {
+            contentOffset,
+            contentSize,
+            layoutMeasurement
+          } = event.nativeEvent;
+          follow.current = contentSize.height - contentOffset.y - layoutMeasurement.height < 100;
+          if (chat) offsets.current[chat.id] = contentOffset.y;
+        },
+        onContentSizeChange: () => {
+          if (follow.current) scroll.current?.scrollToEnd({
+            animated: false
+          });
+        },
+        children: !chat || !chat.messages.length ? /*#__PURE__*/_jsxs(StyledView, {
+          className: "flex-1 items-center justify-center gap-4 px-4 py-8",
+          children: [/*#__PURE__*/_jsx(SelectedAgentPreview, {
+            agents: participants,
+            nodes: emptyAvatars.current,
+            hidden: handoff?.kind === 'group' && handoff.chatId === chat?.id ? handoff.avatars.filter(a => !handoff.arrived.includes(a.agent.id)).map(a => a.agent.id) : []
+          }), /*#__PURE__*/_jsxs(StyledView, {
+            className: "flex flex-col items-center gap-1.5",
+            children: [/*#__PURE__*/_jsx(Text, {
+              variant: "title-3-semibold",
+              style: {
+                textAlign: 'center'
+              },
+              children: participants.length > 1 ? messages.aFewMindsOneConversation : participants[0] ? formatChatMessage(messages.sayHelloTo, participants[0].name) : messages.chatWithYourAgents
+            }), /*#__PURE__*/_jsx(Text, {
+              variant: "body-regular",
+              style: {
+                maxWidth: 420,
+                textAlign: 'center',
+                color: colors.textSecondary
+              },
+              children: participants.length > 1 ? formatChatMessage(messages.areHereSendAMessageToGet, participants.map(a => a.name).join(', ')) : participants[0]?.description ?? messages.chooseAnAgentOrCreateYourOwn
+            })]
+          }), !chat && /*#__PURE__*/_jsx(Button, {
+            onPress: () => chooseAgents(),
+            children: messages.startChat
+          })]
+        }) : /*#__PURE__*/_jsxs(StyledView, {
+          children: [/*#__PURE__*/_jsx(StyledView, {
+            className: "mb-4 mt-3 flex justify-center items-center",
+            style: {
+              marginBottom: 4
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              className: "rounded-full bg-background-tertiary-default px-[7px] py-1 text-body-2-medium text-text-secondary",
+              children: messages.today
+            })
+          }), [...chat.messages, ...(replies.thinking[chat.id] ? [replies.thinking[chat.id]] : [])].map(message => {
+            const agent = workspace.agents.find(a => a.id === message.agentId);
+            const text = formatDemoReply(message.text);
+            if (message.role === 'user') return /*#__PURE__*/_jsx(StyledView, {
+              className: "me-3 ms-auto mt-3 w-fit max-w-[min(520px,calc(100%-24px))] rounded-[var(--radius-2-5xl)] bg-background-primary-default p-3 text-start text-body-regular whitespace-pre-wrap break-words",
+              style: {
+                alignSelf: 'flex-end',
+                maxWidth: Platform.OS === 'web' ? undefined : '94%'
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                variant: "body-regular",
+                children: message.text
+              })
+            }, message.id);
+            const thinking = replies.thinking[chat.id]?.id === message.id;
+            return /*#__PURE__*/_jsx(ReplyRow, {
+              header: agent && /*#__PURE__*/_jsx(ReplyHeader, {
+                agent: agent,
+                thinking: thinking,
+                workingKey: replies.pending[chat.id],
+                nodes: thinking ? replyAvatars.current : undefined,
+                arriving: thinking && handoff?.kind === 'first' && handoff.chatId === chat.id && handoff.responderId === agent.id && !handoff.arrived.includes(agent.id),
+                onEdit: () => edit(agent)
+              }),
+              actions: !thinking && replies.streaming[chat.id] !== message.id && messageActions(message.id, text),
+              children: !!text && /*#__PURE__*/_jsx(StyledView, {
+                className: "rounded-[var(--radius-2-5xl)] bg-background-tertiary-default p-3",
+                children: /*#__PURE__*/_jsx(StreamedText, {
+                  text: text,
+                  paragraphs: true
+                })
+              })
+            }, message.id);
+          })]
+        })
+      }), chat && /*#__PURE__*/_jsx(StyledView, {
+        className: "p-1",
+        children: /*#__PURE__*/_jsx(ComposerPanel, {
+          value: drafts[chat.id] ?? '',
+          onValueChange: value => setDrafts(s => ({
+            ...s,
+            [chat.id]: value
+          })),
+          onSubmit: text => {
+            void sendMessage(text);
+          },
+          disabled: !!replies.pending[chat.id],
+          busy: !!replies.pending[chat.id],
+          onStop: () => replies.stop(chat.id),
+          providers: props.providers ?? WORKSPACE_MODELS,
+          status: null,
+          defaultPermission: "bypass",
+          defaultModel: "anthropic/fable-5",
+          style: {
+            borderRadius: 20
+          }
+        })
+      })]
+    }), !!replies.notice && /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(OverlayRoot, {
+        zIndex: TOAST_LAYER_Z,
+        style: {
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          padding: 20
+        },
+        children: /*#__PURE__*/_jsx(StyledView, {
+          pointerEvents: "none",
+          className: "max-w-[calc(100%-32px)] rounded-xl border border-border-button-default bg-background-primary-default px-4 py-3 shadow-lg",
+          style: {
+            maxWidth: '100%'
+          },
+          children: /*#__PURE__*/_jsxs(StyledView, {
+            className: "flex flex-row items-center gap-2",
+            children: [/*#__PURE__*/_jsx(RiCheckLine, {
+              width: 16,
+              height: 16,
+              fill: colors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              accessibilityRole: "alert",
+              "aria-live": "polite",
+              className: "text-body-regular text-text-primary",
+              children: replies.notice
+            })]
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(EditorRail, {
+      active: !!editor && !compact,
+      children: editPanel
+    }), /*#__PURE__*/_jsx(Dialog, {
+      presentation: "custom",
+      exitDuration: panel === 'editor' ? 280 : 240,
+      contentPadding: 0,
+      scrollable: false,
+      control: surface,
+      label: title,
+      maxWidth: 100000,
+      placement: "center",
+      style: {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        maxWidth: '100%'
+      },
+      containerStyle: {
+        padding: 0,
+        paddingHorizontal: 0
+      },
+      onClose: () => {
+        setPanel(null);
+        if (compact && panel === 'editor') setEditor(null);
+      },
+      children: /*#__PURE__*/_jsxs(ChatDialogFrame, {
+        title: title,
+        mode: panel === 'editor' ? 'editor' : panel === 'navigation' ? 'navigation' : 'center',
+        preview: panel === 'picker' ? /*#__PURE__*/_jsx(SelectedAgentPreview, {
+          caption: true,
+          agents: selected.flatMap(id => workspace.agents.find(a => a.id === id) ?? []),
+          nodes: pickerAvatars.current,
+          hidden: handoff?.kind === 'group' ? handoff.avatars.map(a => a.agent.id) : []
+        }) : undefined,
+        footer: panel === 'picker' ? /*#__PURE__*/_jsx(Button, {
+          className: "w-full rounded-full",
+          style: {
+            width: '100%',
+            borderRadius: 999
+          },
+          onPress: () => {
+            void startChat();
+          },
+          disabled: !selected.length,
+          children: messages.pickerAction(!!editingChatId, selected.length)
+        }) : panel === 'rename' ? /*#__PURE__*/_jsx(Button, {
+          className: "w-full rounded-full",
+          style: {
+            width: '100%',
+            borderRadius: 999
+          },
+          disabled: !rename.trim(),
+          onPress: () => {
+            update(s => ({
+              ...s,
+              chats: s.chats.map(c => c.id === targetChat?.id ? {
+                ...c,
+                customTitle: rename.trim()
+              } : c)
+            }));
+            close();
+          },
+          children: messages.saveName
+        }) : undefined,
+        children: [panel === 'navigation' && sidebar, panel === 'editor' && editPanel, panel === 'rename' && /*#__PURE__*/_jsx(TextFieldInput, {
+          label: messages.chatName,
+          autoFocus: true,
+          value: rename,
+          onChangeText: setRename,
+          maxLength: 100,
+          onSubmitEditing: () => {
+            if (!rename.trim()) return;
+            update(s => ({
+              ...s,
+              chats: s.chats.map(c => c.id === targetChat?.id ? {
+                ...c,
+                customTitle: rename.trim()
+              } : c)
+            }));
+            close();
+          }
+        }), panel === 'picker' && /*#__PURE__*/_jsx(StyledView, {
+          className: "flex flex-wrap justify-center gap-2 flex-row",
+          role: "group",
+          accessibilityLabel: messages.chooseYourTeammates,
+          children: workspace.agents.map(agent => {
+            const picked = selected.includes(agent.id);
+            return /*#__PURE__*/_jsx(Button, {
+              appearance: "plain",
+              tone: "neutral",
+              accessibilityLabel: agent.name,
+              pressed: picked,
+              onPress: () => setSelected(ids => picked ? ids.filter(id => id !== agent.id) : [...ids, agent.id]),
+              className: `h-10 max-w-full rounded-full border px-2 shadow-none transition-colors hover:bg-background-tertiary-default active:bg-background-tertiary-hover ${picked ? 'border-foreground-icon-secondary bg-background-tertiary-default text-text-primary dark:bg-background-tertiary-hover dark:hover:bg-background-tertiary-hover dark:active:bg-background-tertiary-hover' : 'border-transparent bg-background-secondary-default text-text-secondary'}`,
+              style: {
+                height: 40,
+                maxWidth: '100%',
+                borderRadius: 999,
+                borderWidth: 1,
+                borderColor: picked ? colors.textSecondary : 'transparent',
+                backgroundColor: picked ? colors.backgroundTertiary : colors.backgroundSecondary,
+                boxShadow: 'none',
+                paddingStart: 8,
+                paddingEnd: 8
+              },
+              children: /*#__PURE__*/_jsx(StyledView, {
+                className: "inline-flex items-center justify-center px-1 shrink-0 flex-row",
+                children: /*#__PURE__*/_jsxs(StyledView, {
+                  className: "flex min-w-0 items-center gap-2 flex-row",
+                  children: [/*#__PURE__*/_jsx(StyledView, {
+                    className: "size-6 shrink-0",
+                    "aria-hidden": true,
+                    children: /*#__PURE__*/_jsx(AgentAvatar, {
+                      config: agent.avatar,
+                      size: 24
+                    })
+                  }), /*#__PURE__*/_jsx(Text, {
+                    className: `truncate text-body-medium ${picked ? 'text-text-primary' : 'text-text-secondary'}`,
+                    numberOfLines: 1,
+                    children: agent.name
+                  })]
+                })
+              })
+            }, agent.id);
+          })
+        }), panel === 'options' && targetChat && /*#__PURE__*/_jsxs(StyledView, {
+          className: "gap-2",
+          children: [/*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            onPress: () => {
+              update(s => ({
+                ...s,
+                chats: s.chats.map(c => c.id === targetChat.id ? {
+                  ...c,
+                  pinned: !c.pinned
+                } : c)
+              }));
+              close();
+            },
+            children: targetChat.pinned ? messages.unpinChat : messages.pinChat
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            onPress: () => {
+              setRename(targetChat.customTitle || targetChat.title);
+              setPanel('rename');
+            },
+            children: messages.renameChat
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            leadingIcon: RiGroupLine,
+            onPress: () => chooseAgents(targetChat.agentIds, targetChat.id),
+            children: messages.editGroup
+          }), targetChat.agentIds.map(id => {
+            const agent = workspace.agents.find(a => a.id === id);
+            return agent && /*#__PURE__*/_jsx(Button, {
+              appearance: "plain",
+              onPress: () => {
+                if (!compact) close();
+                edit(agent);
+              },
+              children: formatChatMessage(messages.editAgent, agent.name)
+            }, id);
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            onPress: () => {
+              void copy(transcript(targetChat), messages.conversationCopied);
+            },
+            children: messages.copyConversation
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            onPress: () => {
+              void copy(targetChat.id, messages.conversationIDCopied);
+            },
+            children: messages.copyConversationID
+          }), /*#__PURE__*/_jsx(Button, {
+            appearance: "plain",
+            onPress: () => removeChat(targetChat.id),
+            children: messages.removeChat
+          })]
+        }), panel === 'support' && /*#__PURE__*/_jsxs(StyledView, {
+          className: "space-y-4 text-body-regular text-text-secondary",
+          style: {
+            gap: 16
+          },
+          children: [/*#__PURE__*/_jsx(SupportCopy, {
+            text: messages.useToCreateABotOrStart,
+            term: "+"
+          }), /*#__PURE__*/_jsx(SupportCopy, {
+            text: messages.openTheMarketplaceToExplorePluginsAnd,
+            term: messages.marketplace
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "text-body-regular text-text-secondary",
+            children: messages.sendWithEnterUseShiftEnterFor
+          })]
+        })]
+      })
+    }), (panel === 'marketplace' || panel === 'settings') && /*#__PURE__*/_jsx(Marketplace, {
+      initialItem: marketItem?.id,
+      defaultPage: panel === 'settings' ? 'general' : 'marketplace',
+      agents: workspace.agents,
+      installedPlugins: workspace.installedPlugins ?? DEFAULT_PLUGINS,
+      onClose: () => setPanel(null),
+      onCopy: copy,
+      onChat: id => {
+        setSelected([id]);
+        const existing = workspace.chats.find(c => c.agentIds.length === 1 && c.agentIds[0] === id);
+        if (existing) selectChat(existing.id);else {
+          const created = conversationFor(workspace.agents, [id], chatId('chat'));
+          update(s => ({
+            ...s,
+            chats: [created, ...s.chats],
+            activeId: created.id
+          }));
+        }
+        setPanel(null);
+      },
+      onAddBot: item => update(s => addMarketplaceBot(s, item)),
+      onTogglePlugin: id => update(s => {
+        const installed = s.installedPlugins ?? DEFAULT_PLUGINS;
+        return {
+          ...s,
+          installedPlugins: installed.includes(id) ? installed.filter(value => value !== id) : [...installed, id]
+        };
+      })
+    }), handoff && handoff.chatId === chat?.id && /*#__PURE__*/_jsx(AvatarHandoff, {
+      handoff: handoff,
+      origin: flightOrigin,
+      resolveTarget: resolveFlightTarget,
+      onArrive: arriveAvatar,
+      onFinish: finishHandoff
+    })]
+  });
+}
+//# sourceMappingURL=MultiAgentChatBase.js.map