@alia.onl/sdk 11.1.0 → 13.0.0

package/src/components/AliaChatHeader.tsx

@@ -1,113 +1,139 @@
 import { ButtonGroup, ButtonGroupItem } from '@oxy.so/bloom/button-group';
-import { RiCloseLine, RiDeleteBin6Line } from '@oxy.so/bloom/icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@oxy.so/bloom/dropdown-menu';
+import { RiArrowLeftLine, RiDeleteBin6Line, RiMoreFill, RiShare2Line } from '@oxy.so/bloom/icons';
 import { PageHeader } from '@oxy.so/bloom/page-header';
-import { useTheme } from '@oxy.so/bloom/theme';
-import { Text } from '@oxy.so/bloom/typography';
-import { type ReactNode, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { AgentProfile } from '@oxy.so/bloom/agent-reply';
+import { memo, type ReactNode, useMemo } from 'react';
+import { readAgentCharacter } from '../lib/agent-character';
 import { useLabels } from '../lib/labels';
-import { AliaChatMark } from './AliaChatContent';
+import { ALIA_ANCHORS, useAliaFlights } from '../lib/flights';
+import { ALIA_AVATAR } from './AliaAvatar';
+import type { AliaChatAgent } from './AliaChatContent';
 
 export interface AliaChatHeaderProps {
-  /** The chat has messages to clear. */
+  /** The chat has messages: there is something to share and to clear. */
   hasMessages: boolean;
+  /** Delegated agents that have answered: they join Alia in the profile, up to three in all. */
+  agents?: AliaChatAgent[];
+  /** Clears the conversation, from the menu. */
   onClear: () => void;
-  /** Draws the close island; omit where the chat is not dismissible. */
-  onClose?: () => void;
-  /** After the avatar, before the title — a host's back button. */
+  /** Draws the back button at the start of the bar; omit where there is nowhere to go back to. */
+  onBack?: () => void;
+  /** Draws the share button, once there is a conversation; omit where the host cannot share. */
+  onShare?: () => void;
+  /** More rows for the menu (`DropdownMenuItem`s), before Clear. */
+  menu?: ReactNode;
+  /** The host's own start content instead of the back button, e.g. a navigation drawer's menu. */
   leading?: ReactNode;
-  /** The host's own actions, kept before clear and close. */
+  /** The host's own actions, before share and the menu. */
   trailing?: ReactNode;
   /** Pressing Alia's avatar or name. Omitted, the avatar waves. */
   onProfilePress?: () => void;
 }
 
 /**
- * Alia's avatar above a name capsule, the conversation header of Bloom's `MultiAgentChat`.
- *
- * TODO(bloom): `ChatAgentProfile` draws exactly this (a 56px avatar over a 28px capsule
- * of radius 14, `backgroundSecondary` with a hairline border) but is not exported, so
- * this repeats its geometry. Use Bloom's component when it is.
+ * Alia's profile, Bloom's `AgentProfile`: her avatar above a name capsule, joined by the agents
+ * that answered ("Alia + Lumi + Atlas"). Pressing it makes every avatar wave.
  */
-function AliaProfile({ onPress }: { onPress?: () => void }) {
-  const { colors } = useTheme();
-  const [hovered, setHovered] = useState(false);
-  const [reactionKey, setReactionKey] = useState(0);
-
-  // Without a host action the profile is still a button: the avatar waves back.
-  const handlePress = () => {
-    if (onPress) onPress();
-    else setReactionKey((key) => key + 1);
-  };
-
+function AliaProfile({ agents, onPress }: { agents: AliaChatAgent[]; onPress?: () => void }) {
+  const flights = useAliaFlights();
+  const team = useMemo(
+    () => [
+      { id: 'alia', name: 'Alia', avatar: ALIA_AVATAR },
+      ...agents.map((agent) => ({ ...agent, avatar: readAgentCharacter(agent.character) })),
+    ],
+    [agents],
+  );
   return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel="Alia"
-      onPress={handlePress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-      className="items-center"
-    >
-      <View pointerEvents="none" style={{ marginBottom: -2, zIndex: 1 }}>
-        <AliaChatMark size={56} reactionKey={reactionKey} />
-      </View>
-      <View
-        pointerEvents="none"
-        className="items-center justify-center rounded-[14px] px-2.5 py-1"
-        style={{
-          backgroundColor: hovered ? colors.backgroundTertiary : colors.backgroundSecondary,
-          borderWidth: StyleSheet.hairlineWidth,
-          borderColor: colors.border,
-        }}
-      >
-        <Text numberOfLines={1} className="text-[16px] font-medium leading-5 text-text-primary">
-          Alia
-        </Text>
-      </View>
-    </Pressable>
+    <AgentProfile
+      agents={team}
+      onPress={onPress ?? noop}
+      avatarRef={flights?.anchor(ALIA_ANCHORS.profile)}
+      avatarHidden={flights?.isLanding(ALIA_ANCHORS.profile)}
+    />
   );
 }
 
+const noop = () => undefined;
+
 /**
  * The chat's top bar: Bloom's `PageHeader`, set up as the shell sets it up for the
- * agents' screens (inline, no scrim, no safe area), with Alia's profile as its title.
+ * agents' screens (inline, no scrim, no safe area). Alia's profile is its title only once
+ * there is a conversation: the empty chat already shows the avatar beside its greeting,
+ * so the bar carries just its buttons until then.
  */
-export function AliaChatHeader({
+export const AliaChatHeader = memo(function AliaChatHeader({
   hasMessages,
+  agents = [],
   onClear,
-  onClose,
+  onBack,
+  onShare,
+  menu,
   leading,
   trailing,
   onProfilePress,
 }: AliaChatHeaderProps) {
   const labels = useLabels();
+  // Share and the menu act on a conversation. With none there is nothing for them to do, and a
+  // bar of dimmed buttons over the empty chat is chrome with no job: no bar at all, unless the
+  // host brought content of its own (a back button to somewhere, a drawer's menu).
+  if (!hasMessages && !onBack && leading === undefined && trailing === undefined) return null;
   return (
     <PageHeader
-      leading={leading}
-      title={<AliaProfile onPress={onProfilePress} />}
+      leading={
+        leading ??
+        (onBack ? (
+          <ButtonGroup accessibilityLabel={labels.chatActions}>
+            <ButtonGroupItem
+              iconOnly
+              leadingIcon={RiArrowLeftLine}
+              accessibilityLabel={labels.back}
+              onPress={onBack}
+            />
+          </ButtonGroup>
+        ) : undefined)
+      }
+      title={hasMessages ? <AliaProfile agents={agents} onPress={onProfilePress} /> : undefined}
       titleAlign="center"
       actions={
         <>
           {trailing}
-          <ButtonGroup accessibilityLabel={labels.chatActions}>
-            {hasMessages ? (
-              <ButtonGroupItem
-                iconOnly
-                leadingIcon={RiDeleteBin6Line}
-                accessibilityLabel={labels.clear}
-                onPress={onClear}
-              />
-            ) : null}
-            {onClose ? (
-              <ButtonGroupItem
-                iconOnly
-                leadingIcon={RiCloseLine}
-                accessibilityLabel={labels.close}
-                onPress={onClose}
-              />
-            ) : null}
-          </ButtonGroup>
+          {hasMessages ? (
+            <ButtonGroup accessibilityLabel={labels.chatActions}>
+              {onShare ? (
+                <ButtonGroupItem
+                  iconOnly
+                  leadingIcon={RiShare2Line}
+                  accessibilityLabel={labels.share}
+                  onPress={onShare}
+                />
+              ) : null}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild label={labels.more}>
+                  <ButtonGroupItem
+                    iconOnly
+                    leadingIcon={RiMoreFill}
+                    accessibilityLabel={labels.more}
+                  />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {menu}
+                  <DropdownMenuItem
+                    tone="danger"
+                    leading={<RiDeleteBin6Line width={16} height={16} />}
+                    onPress={onClear}
+                  >
+                    {labels.clear}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </ButtonGroup>
+          ) : null}
         </>
       }
       scrim="none"
@@ -115,4 +141,4 @@ export function AliaChatHeader({
       safeArea={false}
     />
   );
-}
+});

package/src/components/AliaChatMessageList.tsx

@@ -12,15 +12,19 @@ import { Textarea } from '@oxy.so/bloom/textarea';
 import { TaskList } from '@oxy.so/bloom/task-list';
 import { Text } from '@oxy.so/bloom/typography';
 import { WebSearch } from '@oxy.so/bloom/web-search';
-import { AliaMarkdown } from './Markdown';
-import { AgentThinking } from '@oxy.so/bloom/agent-thinking';
+import { AliaMarkdown, MARKDOWN_BODY } from './Markdown';
+import { AiChatMessageLine, AiChatThread, AiChatUserMessage } from '@oxy.so/bloom/ai-chat';
 import {
-  AiChatFeedbackRow,
-  AiChatMessageLine,
-  AiChatThread,
-  AiChatUserMessage,
-} from '@oxy.so/bloom/ai-chat';
-import { Avatar } from '@oxy.so/bloom/avatar';
+  AgentReply,
+  AgentReplyAction,
+  AgentReplyActions,
+  AgentReplyBubble,
+  AgentReplyIdentity,
+} from '@oxy.so/bloom/agent-reply';
+import { readAgentCharacter } from '../lib/agent-character';
+import { useAfterDelay } from '../lib/use-after-delay';
+import { Collapsible } from '@oxy.so/bloom/collapsible';
+import { ALIA_AVATAR } from './AliaAvatar';
 import { Button } from '@oxy.so/bloom/button';
 import { useLabels } from '../lib/labels';
 import { isWebInvocation, taskListLog, webSearchLog } from '../lib/work-log';
@@ -33,8 +37,9 @@ import {
 } from '@oxy.so/bloom/icons';
 import { ThinkingBlock } from './ThinkingBlock';
 import { PlanPreviewCard } from './PlanPreviewCard';
-import { QuestionCard } from './QuestionCard';
+import { AskedQuestions } from './QuestionCard';
 import { askedQuestions, isQuestionInvocation } from '../lib/questions';
+import { extractCitationSources, linkifyCitations } from '../lib/citations';
 import { chatMessageEnter } from '../animations';
 import { getToolLabel, getToolActiveLabel, getResearchActiveLabel } from '../lib/tool-registry';
 import { getTextFromContent, getImagesFromContent } from '../lib/content-utils';
@@ -69,8 +74,6 @@ export interface AliaChatMessageListProps {
   onThumbsDown?: (messageId: string) => void;
   onApprovePlan?: (planId: string) => void;
   onRejectPlan?: (planId: string) => void;
-  /** Sends the answers to Alia's questions as the person's next message. */
-  onAnswerQuestions?: (message: string) => void;
   // Welcome
   welcomeComponent?: React.ReactNode;
   // Markdown renderer override (app passes CustomMarkdown, SDK uses AliaMarkdown)
@@ -154,11 +157,7 @@ const UserBubble = React.memo(function UserBubble({
             <AiChatMessageLine block>
               <View className="flex-row flex-wrap gap-2">
                 {images.map((imgUrl) => (
-                  <View
-                    key={imgUrl}
-                    className="rounded-xl overflow-hidden"
-                    style={{ width: 120, height: 120 }}
-                  >
+                  <View key={imgUrl} className="size-[120px] overflow-hidden rounded-xl">
                     <ExpoImage
                       source={{ uri: imgUrl }}
                       className="w-full h-full"
@@ -176,14 +175,69 @@ const UserBubble = React.memo(function UserBubble({
   );
 });
 
+/** Alia is shown thinking only once she has for this long: a hand-over to an agent shows no flash of her. */
+const ALIA_THINKING_DELAY_MS = 450;
+
 // ── Assistant Message ──
 
+/**
+ * One reply, Alia's or a delegated agent's: the reply, and under it who answered. While the one
+ * who answers is working the identity shows its avatar large and thinking, and when the reply
+ * arrives it is the same avatar that settles under it, as in Bloom's multi-agent chat. Alia's own
+ * text runs the width of the thread; an agent answers in a bubble.
+ */
+function ReplyBody({
+  agent,
+  thinking,
+  reasoning,
+  actions,
+  children,
+}: {
+  agent: ChatMessage['agentInfo'];
+  thinking: boolean;
+  /** What the model has reasoned so far: the thinking avatar folds it under its row. */
+  reasoning: React.ReactNode;
+  actions: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const identity = (
+    <AgentReplyIdentity
+      character={agent ? readAgentCharacter(agent.character) : ALIA_AVATAR}
+      name={agent?.name ?? 'Alia'}
+      thinking={thinking}
+      reasoning={reasoning}
+    />
+  );
+  if (agent === undefined)
+    return (
+      <AgentReply
+        identity={identity}
+        actions={actions}
+        // The thread pads its content and spaces its messages: the text starts at its edge, full width.
+        style={{ marginHorizontal: 0, marginTop: 0, maxWidth: '100%', width: '100%' }}
+      >
+        {children}
+      </AgentReply>
+    );
+  return (
+    <AgentReply
+      identity={identity}
+      actions={actions}
+      // The reply starts where Alia's own text does and sits one thread gap from the message above.
+      style={{ marginHorizontal: 0, marginTop: 0, maxWidth: '100%' }}
+    >
+      {children ? <AgentReplyBubble text={MARKDOWN_BODY}>{children}</AgentReplyBubble> : null}
+    </AgentReply>
+  );
+}
+
 const AssistantMessage = React.memo(function AssistantMessage({
   message,
   messageText,
   isStreamingThis,
   isLastMessage,
   isLoading,
+  agentsWorking,
   onReadAloud,
   ttsActiveMessageId,
   ttsPlaybackState,
@@ -192,7 +246,6 @@ const AssistantMessage = React.memo(function AssistantMessage({
   onThumbsDown,
   onApprovePlan,
   onRejectPlan,
-  onAnswerQuestions,
   renderMarkdown,
 }: {
   message: ChatMessage;
@@ -200,6 +253,8 @@ const AssistantMessage = React.memo(function AssistantMessage({
   isStreamingThis: boolean;
   isLastMessage: boolean;
   isLoading: boolean;
+  /** An agent Alia sent for has not answered yet: it is the one thinking, not Alia. */
+  agentsWorking: boolean;
   onReadAloud?: (messageId: string, text: string) => void;
   ttsActiveMessageId?: string | null;
   ttsPlaybackState?: PlaybackState;
@@ -208,11 +263,19 @@ const AssistantMessage = React.memo(function AssistantMessage({
   onThumbsDown?: (messageId: string) => void;
   onApprovePlan?: (planId: string) => void;
   onRejectPlan?: (planId: string) => void;
-  onAnswerQuestions?: (message: string) => void;
   renderMarkdown?: (content: string) => React.ReactNode;
 }) {
   const labels = useLabels();
   const hasContent = messageText.length > 0;
+  // `[n]` markers that name a source become links to it.
+  const citedText = useMemo(
+    () =>
+      linkifyCitations(
+        messageText,
+        extractCitationSources(message.toolInvocations, message.researchProgress?.sources),
+      ),
+    [messageText, message.toolInvocations, message.researchProgress?.sources],
+  );
   const hasThinking = !!message.thinking;
 
   // Both logs count units and are driven by `revealed`, from the calls that have really
@@ -223,8 +286,8 @@ const AssistantMessage = React.memo(function AssistantMessage({
     () => webSearchLog(toolInvocations, researchProgress, { t: labels.workLog }),
     [toolInvocations, researchProgress, labels.workLog],
   );
-  // The questions Alia asked, drawn as a card. Answerable only on the last message once the
-  // turn is over; any later message (typed or sent from the card) is the answer.
+  // The questions Alia asked, kept in the thread as a record. They are answered above the
+  // composer (`AliaChatContent`), where the person is about to type.
   const questions = useMemo(
     () => (toolInvocations ?? []).flatMap((inv) => askedQuestions(inv) ?? []),
     [toolInvocations],
@@ -241,30 +304,37 @@ const AssistantMessage = React.memo(function AssistantMessage({
   const isThisPlaying = ttsActiveMessageId === message.id && ttsPlaybackState === 'playing';
   const isThisPaused = ttsActiveMessageId === message.id && ttsPlaybackState === 'paused';
   const isThisLoading = ttsActiveMessageId === message.id && ttsPlaybackState === 'loading';
+  const replyActions =
+    !isStreamingThis && hasContent ? (
+      <AgentReplyActions
+        onVoteChange={(vote) =>
+          vote === 'up' ? onThumbsUp?.(message.id) : onThumbsDown?.(message.id)
+        }
+        onCopy={() => onCopy(messageText, message.id)}
+      >
+        {onReadAloud ? (
+          <AgentReplyAction
+            icon={isThisPlaying || isThisPaused ? RiStopFill : RiVolumeUpLine}
+            label={isThisPlaying || isThisPaused ? labels.stopReading : labels.readAloud}
+            selected={isThisPlaying || isThisPaused}
+            disabled={isThisLoading}
+            onPress={() => onReadAloud(message.id, messageText)}
+          />
+        ) : null}
+      </AgentReplyActions>
+    ) : undefined;
 
-  // AgentThinking — context-aware status
-  let thinkingIndicator: React.ReactNode = null;
-  if (isLoading && isLastMessage && !hasContent) {
-    const activeTool = message.toolInvocations?.find(
-      (t) => t.state === 'call' || t.state === 'partial-call',
-    );
-    const rp = message.researchProgress;
-    let activeStatus: string | undefined;
-    if (activeTool) {
-      activeStatus = getToolActiveLabel(activeTool.toolName);
-    } else if (rp?.phase && rp.phase !== 'complete') {
-      activeStatus = getResearchActiveLabel(rp.phase);
-    }
-    // While it reasons, the reasoning block draws its own indicator: two at once is noise.
-    if (activeStatus !== undefined || !hasThinking) {
-      thinkingIndicator = (
-        <AgentThinking
-          variant={(message.toolInvocations?.length ?? 0) > 0 ? 'spin' : 'wave'}
-          label={activeStatus?.replace(/\.{3}$/, '')}
-        />
-      );
-    }
-  }
+  // The one who answers is thinking until its reply starts: an agent from the call that sent for it,
+  // Alia when no agent is working for her. The avatar is the indicator.
+  // Alia thinks once she has for a moment: when she hands the turn over at once, only the agent is
+  // shown thinking, not Alia for an instant first.
+  const aliaThinking = useAfterDelay(
+    isLoading && !hasContent && !message.agentInfo && isLastMessage && !agentsWorking,
+    ALIA_THINKING_DELAY_MS,
+  );
+  const thinking = message.agentInfo ? isLoading && !hasContent : aliaThinking;
+  // The reply, its avatar and its reasoning come and go with their height eased, never popped.
+  const showsReply = hasContent || message.isStreaming || thinking;
 
   return (
     <View className="w-full">
@@ -304,65 +374,30 @@ const AssistantMessage = React.memo(function AssistantMessage({
       )}
 
       {/* Message Content */}
-      {(hasContent || message.isStreaming) && (
-        <View className="flex-col items-start gap-0.5">
-          {/* Agent identity */}
-          {message.agentInfo && (
-            <View className="mb-0.5 flex-row items-center gap-2">
-              <Avatar source={message.agentInfo.avatar} size="xs" />
-              <Text className="text-xs font-semibold text-text-primary">
-                {message.agentInfo.name}
-              </Text>
-            </View>
-          )}
-          <View className="w-full">
-            {message.source === 'voice' ? (
-              <Text className="text-base text-text-primary leading-7">
-                {messageText}
-                {message.isStreaming ? '\u258C' : ''}
-              </Text>
-            ) : renderMarkdown ? (
-              renderMarkdown(messageText)
-            ) : (
-              <AliaMarkdown content={messageText} />
-            )}
-          </View>
-          {!isStreamingThis && hasContent && (
-            <AiChatFeedbackRow
-              onLike={onThumbsUp ? () => onThumbsUp(message.id) : undefined}
-              onDislike={onThumbsDown ? () => onThumbsDown(message.id) : undefined}
-              onCopy={() => onCopy(messageText, message.id)}
-              actions={
-                onReadAloud
-                  ? [
-                      {
-                        key: 'read-aloud',
-                        label:
-                          isThisPlaying || isThisPaused ? labels.stopReading : labels.readAloud,
-                        icon: isThisPlaying || isThisPaused ? RiStopFill : RiVolumeUpLine,
-                        active: isThisPlaying || isThisPaused,
-                        disabled: isThisLoading,
-                        onPress: () => onReadAloud(message.id, messageText),
-                      },
-                    ]
-                  : []
-              }
-            />
+      <Collapsible open={showsReply}>
+        <ReplyBody
+          agent={message.agentInfo}
+          thinking={thinking}
+          reasoning={
+            thinking && hasThinking ? <AliaMarkdown content={message.thinking!} /> : undefined
+          }
+          actions={replyActions}
+        >
+          {!hasContent && !message.isStreaming ? null : message.source === 'voice' ? (
+            <Text className="text-base text-text-primary leading-7">
+              {messageText}
+              {message.isStreaming ? '\u258C' : ''}
+            </Text>
+          ) : renderMarkdown ? (
+            renderMarkdown(citedText)
+          ) : (
+            <AliaMarkdown content={citedText} />
           )}
-        </View>
-      )}
+        </ReplyBody>
+      </Collapsible>
 
-      {questions.length === 0 ? null : (
-        <QuestionCard
-          questions={questions}
-          onSubmit={
-            isLastMessage && !isLoading && onAnswerQuestions !== undefined
-              ? onAnswerQuestions
-              : undefined
-          }
-        />
-      )}
-      {thinkingIndicator}
+      {/* What Alia asked stays in the thread as a record; answering happens above the composer. */}
+      {questions.length === 0 ? null : <AskedQuestions questions={questions} />}
     </View>
   );
 });
@@ -380,7 +415,6 @@ export function AliaChatMessageList({
   onThumbsDown,
   onApprovePlan,
   onRejectPlan,
-  onAnswerQuestions,
   welcomeComponent,
   renderMarkdown,
 }: AliaChatMessageListProps) {
@@ -433,6 +467,9 @@ export function AliaChatMessageList({
   }, []);
 
   const filteredMessages = useMemo(() => messages.filter((m) => m.role !== 'system'), [messages]);
+  // An agent Alia sent for that has not answered: it is the one that is thinking.
+  const agentsWorking =
+    isStreaming && filteredMessages.some((m) => m.agentInfo && !getTextFromContent(m.content));
 
   return (
     // Bloom's thread: follows the newest turn, and reports its scroll to a floating-chrome
@@ -455,39 +492,42 @@ export function AliaChatMessageList({
 
             return (
               <Animated.View key={msg.id} entering={isNewMessage ? chatMessageEnter : undefined}>
-                {msg.role === 'user' ? (
-                  <UserBubble
-                    message={msg}
-                    text={messageText}
-                    isEditing={editingMessageId === msg.id}
-                    editedContent={editingMessageId === msg.id ? editedContent : ''}
-                    onEditedContentChange={setEditedContent}
-                    onSaveEdit={handleSaveEdit}
-                    onCancelEdit={handleCancelEdit}
-                    onStartEdit={handleStartEdit}
-                    onCopy={handleCopy}
-                    copiedMessageId={copiedMessageId}
-                    showEditButton={!!onEditMessage}
-                  />
-                ) : (
-                  <AssistantMessage
-                    message={msg}
-                    messageText={messageText}
-                    isStreamingThis={isStreamingThis}
-                    isLastMessage={isLast}
-                    isLoading={isStreaming}
-                    onReadAloud={onReadAloud}
-                    ttsActiveMessageId={ttsActiveMessageId}
-                    ttsPlaybackState={ttsPlaybackState}
-                    onCopy={handleCopy}
-                    onThumbsUp={onThumbsUp}
-                    onThumbsDown={onThumbsDown}
-                    onApprovePlan={onApprovePlan}
-                    onRejectPlan={onRejectPlan}
-                    onAnswerQuestions={onAnswerQuestions}
-                    renderMarkdown={renderMarkdown}
-                  />
-                )}
+                {/* A new row opens up as it arrives, so what is below it moves with it. */}
+                <Collapsible open appear={isNewMessage}>
+                  {msg.role === 'user' ? (
+                    <UserBubble
+                      message={msg}
+                      text={messageText}
+                      isEditing={editingMessageId === msg.id}
+                      editedContent={editingMessageId === msg.id ? editedContent : ''}
+                      onEditedContentChange={setEditedContent}
+                      onSaveEdit={handleSaveEdit}
+                      onCancelEdit={handleCancelEdit}
+                      onStartEdit={handleStartEdit}
+                      onCopy={handleCopy}
+                      copiedMessageId={copiedMessageId}
+                      showEditButton={!!onEditMessage}
+                    />
+                  ) : (
+                    <AssistantMessage
+                      message={msg}
+                      messageText={messageText}
+                      isStreamingThis={isStreamingThis}
+                      isLastMessage={isLast}
+                      isLoading={isStreaming}
+                      agentsWorking={agentsWorking}
+                      onReadAloud={onReadAloud}
+                      ttsActiveMessageId={ttsActiveMessageId}
+                      ttsPlaybackState={ttsPlaybackState}
+                      onCopy={handleCopy}
+                      onThumbsUp={onThumbsUp}
+                      onThumbsDown={onThumbsDown}
+                      onApprovePlan={onApprovePlan}
+                      onRejectPlan={onRejectPlan}
+                      renderMarkdown={renderMarkdown}
+                    />
+                  )}
+                </Collapsible>
               </Animated.View>
             );
           })}