@flamingo-stack/openframe-frontend-core 0.0.685-snapshot.20260929164409 → 0.0.685

package/src/components/chat/chat-input.tsx

@@ -16,12 +16,10 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { cn } from '../../utils/cn';
 import { Send01Icon, StopCircleIcon } from '../icons-v2-generated';
-import { AvatarStack } from '../ui/avatar-stack';
 import { Tag } from '../ui/tag';
 import { ChatTypingIndicator } from './chat-typing-indicator';
 import { SlashCommandSuggestions } from './slash-command-suggestions';
 import type { ChatInputProps, ChatInputRef, MentionMeta, SlashCommandSummary } from './types';
-import { CHAT_APPEARANCE } from './types/chat.types';
 
 /** SHARED with `lib/config/slash-commands-config.ts` AND the chat-route slash
  *  dispatch parser. Keep all three in sync. */
@@ -166,9 +164,6 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     onStop,
     sending = false,
     awaitingResponse = false,
-    awaitingTeam,
-    awaitingTeamCount,
-    appearance = CHAT_APPEARANCE.CLASSIC,
     placeholder = 'Enter your Request...',
     reserveAvatarOffset: _reserveAvatarOffset,
     disabled = false,
@@ -565,31 +560,11 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
         className,
       )}
     >
-      {awaitingResponse && appearance === CHAT_APPEARANCE.CLASSIC ? (
+      {awaitingResponse ? (
         <div className="relative flex items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] transition-colors">
           <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-primary" />
           <p className="text-ods-text-secondary text-h4">Waiting for Technician Response</p>
         </div>
-      ) : awaitingResponse ? (
-        // Hand-off bar (fae chat v2): who has the conversation now, and that a
-        // reply is on its way. Same 48px height as the editor row it replaces,
-        // so the thread above does not jump when the chat is handed off.
-        <div
-          role="status"
-          className="flex min-h-11 w-full items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] md:min-h-12"
-        >
-          {awaitingTeam && awaitingTeam.length > 0 && (
-            <AvatarStack
-              people={awaitingTeam}
-              total={awaitingTeamCount}
-              size="xs"
-              ringClassName="ring-ods-bg"
-              label="Technicians"
-            />
-          )}
-          <p className="min-w-0 truncate text-ods-text-primary text-h4">Handed off to your technical support team</p>
-          <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-secondary" />
-        </div>
       ) : (
         <div className="relative">
           <SlashCommandSuggestions

package/src/components/chat/chat-message-enhanced.tsx

@@ -11,7 +11,6 @@ import { SquareAvatar } from '../ui/square-avatar';
 import { ApprovalBatchMessage } from './approval-batch-message';
 import { ApprovalRequestMessage } from './approval-request-message';
 import { AskDisplay } from './ask-display';
-import { ChatAppearanceContext, useChatAppearance } from './chat-appearance-context';
 import { ChatContextChipStrip } from './chat-context-picker';
 import type { ChatRef } from './chat-ref.types';
 import { ContextCompactionDisplay } from './context-compaction-display';
@@ -21,13 +20,11 @@ import { EscalationOfferMessage } from './escalation-offer-message';
 import { remarkCardLinks } from './remark-card-links';
 import { remarkMentionChips } from './remark-mention-chips';
 import { remarkStripCitations } from './remark-strip-citations';
-import { SystemEventMessage } from './system-event-message';
 import { ThinkingDisplay } from './thinking-display';
 import { TicketEscalatedMessage } from './ticket-escalated-message';
 import { TicketEventMessage } from './ticket-event-message';
 import { ToolExecutionDisplay } from './tool-execution-display';
 import type { AskSegment, MessageSegment, MessageContent, ChatMessageEnhancedProps } from './types';
-import { CHAT_APPEARANCE } from './types/chat.types';
 
 /** Inline `@marker:id` mention token in the message body (sibling of the
  *  `[card://]` grammar) — used to filter out items rendered inline from the
@@ -97,7 +94,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       showAvatar = true,
       assistantType,
       approvalVariant,
-      appearance: appearanceProp,
       authorType: authorTypeProp,
       assistantIcon,
       contextItems,
@@ -114,9 +110,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
   ) => {
     const isUser = role === 'user';
     const isError = role === 'error';
-    const inheritedAppearance = useChatAppearance();
-    const appearance = appearanceProp ?? inheritedAppearance;
-    const isV2 = appearance === CHAT_APPEARANCE.V2;
     const authorType = authorTypeProp ?? (isUser ? 'user' : assistantType === 'mingo' ? 'mingo' : 'fae');
 
     // Inline-card rendering uses a HOST-PROVIDED `renderEntityCard` function
@@ -525,8 +518,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         // (passing pre-joined initials like "PS" would collapse to one letter,
         // since getFirstLastInitials treats it as a single word).
         fallback: displayName,
-        // v2 (fae chat v2): a 24px face that sits on the name's line height.
-        size: isV2 ? ('xs' as const) : ('sm' as const),
+        size: 'sm' as const,
         variant: 'round' as const,
         // User avatar: compact 20×20 with 2px padding and a subtle gray fill
         // (`bg-ods-card`) so the `border-ods-border` ring stays visible — the
@@ -544,32 +536,9 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
     const isSystem = authorType === 'system';
 
-    // v2 draws a system line (e.g. a technician joining) as an in-thread
-    // receipt card rather than as an author row with no body.
-    if (isV2 && isSystem && name) {
-      return (
-        <div ref={ref} className={cn('relative py-[calc(var(--spacing-system-m)/2)]', className)} {...props}>
-          <ChatAppearanceContext.Provider value={appearance}>
-            <SystemEventMessage text={name} timestamp={timestamp} />
-          </ChatAppearanceContext.Provider>
-        </div>
-      );
-    }
-
     return (
-      <ChatAppearanceContext.Provider value={appearance}>
-        <div
-          ref={ref}
-          className={cn(
-            'relative',
-            // v2 spaces messages 16px apart (spacing-system-m), split across the
-            // two neighbours' padding so blocks outside a row keep the rhythm.
-            isV2 ? 'py-[calc(var(--spacing-system-m)/2)]' : 'py-[var(--spacing-system-s)]',
-            className,
-          )}
-          {...props}
-        >
-          {/* Message Content — full panel width.
+      <div ref={ref} className={cn('relative py-[var(--spacing-system-s)]', className)} {...props}>
+        {/* Message Content — full panel width.
             Avatar is INLINE in the name row below (2025-2026 chat
             pattern — Claude.ai, ChatGPT, Gemini, Perplexity).
             Legacy hanging-avatar layout (`absolute -left-16`) wasted
@@ -583,8 +552,8 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             layout per drawer-resize frame in Safari / the desktop WKWebView
             vs ~9ms as grid (Chrome: ~2ms either way). Same gap and stretch,
             no margin collapsing — visually identical. */}
-          <div className="grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]">
-            {/* Avatar + Name + Timestamp Row.
+        <div className="grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]">
+          {/* Avatar + Name + Timestamp Row.
               Sizing rationale (per design-token measurements):
                 - Name uses `text-h3` = 14px mobile / 18px desktop.
                 - Avatar uses `SquareAvatar size="sm"` = 32px — the
@@ -600,161 +569,155 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               inside via `flex items-center justify-center` — they
               should be sized at ~50-60% of the wrapper (h-4 w-4 =
               16px works well for a 32px circle). */}
-            <div
-              className={cn(
-                'flex items-center',
-                isV2 ? 'gap-[var(--spacing-system-xxs)]' : 'gap-[var(--spacing-system-xs)]',
-              )}
-            >
-              {/* Avatar rules:
+          <div className="flex items-center gap-[var(--spacing-system-xs)]">
+            {/* Avatar rules:
                 - Assistant/Fae always show an avatar — host brand icon when no
                   image is supplied, else the filled SquareAvatar.
                 - User shows the SquareAvatar ONLY when an avatar image actually
                   arrived. With no user avatar we hide the block entirely (just
                   the name), instead of an initials placeholder. TEMPORARY —
                   restore the user placeholder when user avatars ship. */}
-              {showAvatar &&
-                !isSystem &&
-                !(isUser && !avatar) &&
-                (!isUser && assistantIcon && !avatar ? (
-                  // Host-supplied brand icon (e.g. Mingo): render it directly,
-                  // no filled pill — the icon carries its own brand accent.
-                  <div className="flex flex-shrink-0 items-center justify-center">{assistantIcon}</div>
-                ) : (
-                  <SquareAvatar {...avatarProps} />
-                ))}
-              <span
-                className={cn(
-                  'flex-1 !font-mono !font-medium text-h3',
-                  authorType === 'system'
+            {showAvatar &&
+              !isSystem &&
+              !(isUser && !avatar) &&
+              (!isUser && assistantIcon && !avatar ? (
+                // Host-supplied brand icon (e.g. Mingo): render it directly,
+                // no filled pill — the icon carries its own brand accent.
+                <div className="flex flex-shrink-0 items-center justify-center">{assistantIcon}</div>
+              ) : (
+                <SquareAvatar {...avatarProps} />
+              ))}
+            <span
+              className={cn(
+                'flex-1 !font-mono !font-medium text-h3',
+                authorType === 'system'
+                  ? 'text-ods-open-yellow'
+                  : authorType === 'admin'
                     ? 'text-ods-open-yellow'
-                    : authorType === 'admin'
-                      ? 'text-ods-open-yellow'
-                      : authorType === 'mingo'
-                        ? 'text-ods-flamingo-cyan'
-                        : authorType === 'fae'
-                          ? 'text-ods-flamingo-pink'
-                          : 'text-ods-text-secondary',
-                )}
-              >
-                {name || (isUser ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae')}
-                {!isSystem && !isV2 && ':'}
-              </span>
-              {timestamp && (
-                <span className="shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
-                  {formatMessageTimestamp(timestamp)}
-                </span>
+                    : authorType === 'mingo'
+                      ? 'text-ods-flamingo-cyan'
+                      : authorType === 'fae'
+                        ? 'text-ods-flamingo-pink'
+                        : 'text-ods-text-secondary',
               )}
-            </div>
-
-            {/* Message segments — hidden for system messages without content */}
-            {(!isSystem || segments.length > 0) && (
-              <div className="grid grid-cols-1 gap-2">
-                {segments.map((segment, index) => {
-                  // The engine's streaming path (atomic-block memoization +
-                  // fence tail-completion + aria-live) applies ONLY to the
-                  // actively streaming segment: last segment of a message that
-                  // is still typing. On completion `isTyping` flips false and
-                  // the engine does one authoritative whole-document parse.
-                  const segmentIsStreaming = index === segments.length - 1 && !!isTyping;
-                  if (segment.type === 'text') {
-                    return (
-                      <div
-                        key={index}
-                        className={cn(
-                          'w-full min-w-0 break-words text-h4',
-                          isError ? 'text-ods-error' : 'text-ods-text-primary',
-                        )}
-                      >
-                        {renderSegmentBody(index, segment.text, segmentIsStreaming)}
-                      </div>
-                    );
-                  } else if (segment.type === 'ask') {
-                    // Only the run's head draws — the tail segments are pages of
-                    // the card already rendered above them.
-                    const run = askRuns.get(index);
-                    if (!run) return null;
-                    return <AskDisplay key={index} cards={run} onSelect={onAskSelect} />;
-                  } else if (segment.type === 'tool_execution') {
-                    return (
-                      <ToolExecutionDisplay
-                        key={index}
-                        message={segment.data}
-                        assistantType={assistantType}
-                        variant={approvalVariant}
-                      />
-                    );
-                  } else if (segment.type === 'approval_request') {
-                    return (
-                      <ApprovalRequestMessage
-                        key={index}
-                        data={segment.data}
-                        status={segment.status}
-                        resolvedByName={segment.resolvedByName}
-                        onApprove={segment.onApprove}
-                        onReject={segment.onReject}
-                        assistantType={assistantType}
-                        variant={approvalVariant}
-                      />
-                    );
-                  } else if (segment.type === 'approval_batch') {
-                    return (
-                      <ApprovalBatchMessage
-                        key={index}
-                        data={segment.data}
-                        status={segment.status}
-                        resolvedByName={segment.resolvedByName}
-                        onApprove={segment.onApprove}
-                        onReject={segment.onReject}
-                        assistantType={assistantType}
-                        variant={approvalVariant}
-                      />
-                    );
-                  } else if (segment.type === 'escalation_offer') {
-                    return (
-                      <EscalationOfferMessage
-                        key={index}
-                        data={segment.data}
-                        status={segment.status}
-                        resolvedByName={segment.resolvedByName}
-                        onApprove={segment.onApprove}
-                        onReject={segment.onReject}
-                      />
-                    );
-                  } else if (segment.type === 'ticket_escalated') {
-                    return <TicketEscalatedMessage key={index} data={segment.data} timestamp={timestamp} />;
-                  } else if (segment.type === 'ticket_event') {
-                    // The card's own event time; the bubble timestamp is the
-                    // turn's FIRST row and lags every later lifecycle event.
-                    return (
-                      <TicketEventMessage key={index} data={segment.data} timestamp={segment.occurredAt ?? timestamp} />
-                    );
-                  } else if (segment.type === 'error') {
-                    return <ErrorMessageDisplay key={index} title={segment.title} details={segment.details} />;
-                  } else if (segment.type === 'context_compaction') {
-                    return <ContextCompactionDisplay key={index} status={segment.status} />;
-                  } else if (segment.type === 'thinking') {
-                    const isStreaming = index === segments.length - 1 && isTyping;
-                    return <ThinkingDisplay key={index} text={segment.text} isStreaming={isStreaming} />;
-                  }
-                  return null;
-                })}
-              </div>
+            >
+              {name || (isUser ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae')}
+              {!isSystem && ':'}
+            </span>
+            {timestamp && (
+              <span className="shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
+                {formatMessageTimestamp(timestamp)}
+              </span>
             )}
+          </div>
 
-            {/* Attached entity-context chips (user bubbles). Read-only — no
+          {/* Message segments — hidden for system messages without content */}
+          {(!isSystem || segments.length > 0) && (
+            <div className="grid grid-cols-1 gap-2">
+              {segments.map((segment, index) => {
+                // The engine's streaming path (atomic-block memoization +
+                // fence tail-completion + aria-live) applies ONLY to the
+                // actively streaming segment: last segment of a message that
+                // is still typing. On completion `isTyping` flips false and
+                // the engine does one authoritative whole-document parse.
+                const segmentIsStreaming = index === segments.length - 1 && !!isTyping;
+                if (segment.type === 'text') {
+                  return (
+                    <div
+                      key={index}
+                      className={cn(
+                        'w-full min-w-0 break-words text-h4',
+                        isError ? 'text-ods-error' : 'text-ods-text-primary',
+                      )}
+                    >
+                      {renderSegmentBody(index, segment.text, segmentIsStreaming)}
+                    </div>
+                  );
+                } else if (segment.type === 'ask') {
+                  // Only the run's head draws — the tail segments are pages of
+                  // the card already rendered above them.
+                  const run = askRuns.get(index);
+                  if (!run) return null;
+                  return <AskDisplay key={index} cards={run} onSelect={onAskSelect} />;
+                } else if (segment.type === 'tool_execution') {
+                  return (
+                    <ToolExecutionDisplay
+                      key={index}
+                      message={segment.data}
+                      assistantType={assistantType}
+                      variant={approvalVariant}
+                    />
+                  );
+                } else if (segment.type === 'approval_request') {
+                  return (
+                    <ApprovalRequestMessage
+                      key={index}
+                      data={segment.data}
+                      status={segment.status}
+                      resolvedByName={segment.resolvedByName}
+                      onApprove={segment.onApprove}
+                      onReject={segment.onReject}
+                      assistantType={assistantType}
+                      variant={approvalVariant}
+                    />
+                  );
+                } else if (segment.type === 'approval_batch') {
+                  return (
+                    <ApprovalBatchMessage
+                      key={index}
+                      data={segment.data}
+                      status={segment.status}
+                      resolvedByName={segment.resolvedByName}
+                      onApprove={segment.onApprove}
+                      onReject={segment.onReject}
+                      assistantType={assistantType}
+                      variant={approvalVariant}
+                    />
+                  );
+                } else if (segment.type === 'escalation_offer') {
+                  return (
+                    <EscalationOfferMessage
+                      key={index}
+                      data={segment.data}
+                      status={segment.status}
+                      resolvedByName={segment.resolvedByName}
+                      onApprove={segment.onApprove}
+                      onReject={segment.onReject}
+                    />
+                  );
+                } else if (segment.type === 'ticket_escalated') {
+                  return <TicketEscalatedMessage key={index} data={segment.data} timestamp={timestamp} />;
+                } else if (segment.type === 'ticket_event') {
+                  // The card's own event time; the bubble timestamp is the
+                  // turn's FIRST row and lags every later lifecycle event.
+                  return (
+                    <TicketEventMessage key={index} data={segment.data} timestamp={segment.occurredAt ?? timestamp} />
+                  );
+                } else if (segment.type === 'error') {
+                  return <ErrorMessageDisplay key={index} title={segment.title} details={segment.details} />;
+                } else if (segment.type === 'context_compaction') {
+                  return <ContextCompactionDisplay key={index} status={segment.status} />;
+                } else if (segment.type === 'thinking') {
+                  const isStreaming = index === segments.length - 1 && isTyping;
+                  return <ThinkingDisplay key={index} text={segment.text} isStreaming={isStreaming} />;
+                }
+                return null;
+              })}
+            </div>
+          )}
+
+          {/* Attached entity-context chips (user bubbles). Read-only — no
               remove affordance once the message is sent (Figma 31:28709). */}
-            {stripContextItems && stripContextItems.length > 0 && (
-              <ChatContextChipStrip
-                items={stripContextItems}
-                resolveIcon={resolveContextIcon}
-                renderItem={renderContextItem}
-                className="mt-2"
-              />
-            )}
-          </div>
+          {stripContextItems && stripContextItems.length > 0 && (
+            <ChatContextChipStrip
+              items={stripContextItems}
+              resolveIcon={resolveContextIcon}
+              renderItem={renderContextItem}
+              className="mt-2"
+            />
+          )}
         </div>
-      </ChatAppearanceContext.Provider>
+      </div>
     );
   },
 );
@@ -772,7 +735,6 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     prevProps.showAvatar === nextProps.showAvatar &&
     prevProps.assistantType === nextProps.assistantType &&
     prevProps.approvalVariant === nextProps.approvalVariant &&
-    prevProps.appearance === nextProps.appearance &&
     prevProps.authorType === nextProps.authorType &&
     prevProps.assistantIcon === nextProps.assistantIcon &&
     prevProps.className === nextProps.className &&