@flamingo-stack/openframe-frontend-core 0.0.197 → 0.0.198

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

@@ -28,7 +28,9 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       sending = false,
       awaitingResponse = false,
       placeholder = "Enter your Request...",
-      reserveAvatarOffset = true,
+      // Accepted for back-compat; consumed and discarded so the prop never
+      // falls through to the underlying <textarea> as an unknown DOM attr.
+      reserveAvatarOffset: _reserveAvatarOffset,
       disabled = false,
       autoFocus = false,
       ...inputProps
@@ -283,65 +285,50 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       }
     }, [onStop, isStopping])
 
-    if (awaitingResponse) {
-      return (
-        <div
-          className={cn(
-            "mx-auto w-full max-w-3xl items-end gap-6",
-            reserveAvatarOffset ? "grid grid-cols-[32px_1fr]" : "grid grid-cols-[1fr]",
-            "flex-shrink-0",
-            className,
-          )}
-        >
-          {reserveAvatarOffset && <div className="invisible h-8 w-8" aria-hidden />}
-          <div className="relative flex items-center justify-center gap-2 rounded-md bg-ods-card border border-ods-border px-3 py-3 transition-colors">
-            <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-primary" />
-            <p className="text-h4 text-ods-text-secondary">Waiting for Technician Response</p>
-          </div>
-        </div>
-      )
-    }
-
     const isStopMode = sending && !!onStop
     const sendDisabled = sending || disabled || !value.trim()
 
     return (
       <div
         className={cn(
-          "mx-auto w-full max-w-3xl items-end gap-6",
-          reserveAvatarOffset ? "grid grid-cols-[32px_1fr]" : "grid grid-cols-[1fr]",
-          "flex-shrink-0",
+          "mx-auto w-full max-w-ods-content-narrow flex-shrink-0",
           className,
         )}
       >
-        {reserveAvatarOffset && <div className="invisible h-8 w-8" aria-hidden />}
-        <div className="relative">
-          <SlashCommandSuggestions
-            commands={slashPrefix !== null ? slashSuggestions : []}
-            highlightedIdx={highlightedIdx}
-            onHover={setHighlightedIdx}
-            onSelect={acceptSuggestion}
-            resolveSourceIcon={slashCommands?.resolveSourceIcon}
-            onAction={slashCommands?.onAction}
-          />
-          <Textarea
-            ref={textareaRef}
-            value={value}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            placeholder={disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
-            disabled={sending || disabled}
-            rows={1}
-            endIcon={isStopMode ? <StopCircleIcon size={20} /> : <Send01Icon size={20} />}
-            endIconAsButton
-            endIconButtonProps={{
-              onClick: isStopMode ? handleStop : handleSubmit,
-              disabled: isStopMode ? isStopping : sendDisabled,
-              'aria-label': isStopMode ? 'Stop generation' : 'Send message',
-            }}
-            {...inputProps}
-          />
-        </div>
+        {awaitingResponse ? (
+          <div className="relative flex items-center justify-center gap-[var(--spacing-system-xs)] rounded-md bg-ods-card border border-ods-border px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] transition-colors">
+            <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-primary" />
+            <p className="text-h4 text-ods-text-secondary">Waiting for Technician Response</p>
+          </div>
+        ) : (
+          <div className="relative">
+            <SlashCommandSuggestions
+              commands={slashPrefix !== null ? slashSuggestions : []}
+              highlightedIdx={highlightedIdx}
+              onHover={setHighlightedIdx}
+              onSelect={acceptSuggestion}
+              resolveSourceIcon={slashCommands?.resolveSourceIcon}
+              onAction={slashCommands?.onAction}
+            />
+            <Textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              placeholder={disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
+              disabled={sending || disabled}
+              rows={1}
+              endIcon={isStopMode ? <StopCircleIcon size={20} /> : <Send01Icon size={20} />}
+              endIconAsButton
+              endIconButtonProps={{
+                onClick: isStopMode ? handleStop : handleSubmit,
+                disabled: isStopMode ? isStopping : sendDisabled,
+                'aria-label': isStopMode ? 'Stop generation' : 'Send message',
+              }}
+              {...inputProps}
+            />
+          </div>
+        )}
       </div>
     )
   },

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

@@ -232,11 +232,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         variant: "round" as const,
         className: cn(
           "flex-shrink-0",
-          isUser
-            ? "invisible"
-            : isMingo
-            ? "bg-ods-flamingo-cyan"
-            : "bg-ods-flamingo-pink"
+          isMingo ? "bg-ods-flamingo-cyan" : "bg-ods-flamingo-pink"
         )
       }
     }
@@ -249,30 +245,33 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       <div
         ref={ref}
         className={cn(
-          "flex flex-row items-start gap-2 py-3",
+          "relative py-[var(--spacing-system-s)]",
           className
         )}
         {...props}
       >
-        {/* Avatar - optional, invisible spacer for system messages */}
-        {showAvatar && (isSystem ? (
-          <div className="w-12 flex-shrink-0" />
-        ) : !isUser && assistantIcon && !avatar ? (
-            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-ods-accent flex-shrink-0">
-              {assistantIcon}
-            </div>
-          ) : (
-            <SquareAvatar
-              {...avatarProps}
-              className={cn(avatarProps.className, "w-12 h-12")}
-            />
-          )
+        {/* Hanging-avatar layout — Figma spec parks the avatar in the 64px
+            gutter outside the 600px content column. Only rendered for
+            assistant messages; user and system messages have no avatar. */}
+        {showAvatar && !isSystem && !isUser && (
+          <div className="absolute -left-16 top-[var(--spacing-system-s)]">
+            {assistantIcon && !avatar ? (
+              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-ods-accent">
+                {assistantIcon}
+              </div>
+            ) : (
+              <SquareAvatar
+                {...avatarProps}
+                className={cn(avatarProps.className, "w-12 h-12")}
+              />
+            )}
+          </div>
         )}
 
-        {/* Message Content */}
-        <div className="flex flex-1 flex-col gap-1 min-w-0">
+        {/* Message Content - full width */}
+        <div className="flex flex-col gap-[var(--spacing-system-xxs)] min-w-0">
           {/* Name and Timestamp Row */}
-          <div className="flex items-center justify-between gap-1">
+          <div className="flex items-center justify-between gap-[var(--spacing-system-xxs)]">
             <span className={cn(
               "text-h3 !font-mono !font-medium flex-1",
               authorType === 'system' ? "text-ods-open-yellow" :

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

@@ -432,8 +432,8 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
           <div
             ref={setContentRef}
             className={cn(
-              "mx-auto flex w-full max-w-3xl flex-col pb-2 min-w-0",
-              contentClassName || "px-4",
+              "mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0",
+              contentClassName ?? "px-[var(--spacing-system-m)]",
             )}
             style={{ minHeight: '100%' }}
           >
@@ -470,8 +470,8 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         {showStreamingLoader && (
           <div
             className={cn(
-              "mx-auto w-full max-w-3xl flex items-center gap-1 py-2",
-              contentClassName || "px-4",
+              "mx-auto w-full max-w-ods-content-narrow flex items-center gap-[var(--spacing-system-xxs)] py-[var(--spacing-system-xs)]",
+              contentClassName ?? "px-[var(--spacing-system-m)]",
             )}
             style={{ color: 'var(--color-text-muted)' }}
             role="status"
@@ -491,8 +491,8 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         {pendingApprovals && pendingApprovals.length > 0 && (
           <div className={cn(
             "border-t border-ods-border bg-ods-bg/95 backdrop-blur-sm",
-            "mx-auto w-full max-w-3xl",
-            contentClassName || "px-4",
+            "mx-auto w-full max-w-ods-content-narrow",
+            contentClassName ?? "px-[var(--spacing-system-m)]",
           )}>
             <ChatMessageEnhanced
               role="assistant"

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

@@ -20,25 +20,24 @@ export function ChatMessageSkeleton({
   return (
     <div
       className={cn(
-        "flex flex-row items-start gap-4",
+        "relative",
         !isUser && "bg-ods-card/50 rounded-lg px-4 -mx-4",
         className
       )}
     >
-      {/* Avatar Skeleton - optional */}
-      {showAvatar && (
+      {/* Avatar Skeleton - absolutely positioned outside content area to match
+          the real ChatMessageEnhanced hanging-avatar layout. */}
+      {showAvatar && !isUser && (
         <div className={cn(
-          "flex-shrink-0 mt-1 w-8 h-8 rounded animate-pulse",
-          isUser 
-            ? "invisible"
-            : isMingo
+          "absolute -left-16 top-[var(--spacing-system-s)] w-12 h-12 rounded-full animate-pulse",
+          isMingo
             ? "bg-gradient-to-br from-cyan-400/30 to-cyan-600/30"
             : "bg-gradient-to-br from-pink-400/30 to-pink-600/30"
         )} />
       )}
-      
+
       {/* Message Content Skeleton */}
-      <div className="flex flex-1 flex-col gap-1 min-w-0">
+      <div className="flex flex-col gap-1 min-w-0">
         {/* Name and Timestamp Row Skeleton */}
         <div className="flex items-center justify-between pr-2">
           <div className="h-5 w-16 bg-ods-border rounded animate-pulse" />
@@ -92,7 +91,7 @@ export function ChatMessageListSkeleton({
           className
         )}
       >
-        <div className={cn("mx-auto flex w-full max-w-3xl flex-col pb-2 min-w-0", contentClassName || "px-4")} style={{ minHeight: '100%' }}>
+        <div className={cn("mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0", contentClassName ?? "px-[var(--spacing-system-m)]")} style={{ minHeight: '100%' }}>
           <div className="flex-1" />
           <div className="space-y-6">
             {messages.map((message) => (

package/src/components/chat/types/component.types.ts

@@ -237,6 +237,10 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
   onStop?: () => void | Promise<void>
   sending?: boolean
   awaitingResponse?: boolean
+  /**
+   * @deprecated The avatar-offset layout was removed; this prop is accepted
+   * for back-compat but silently ignored. Safe to drop from call sites.
+   */
   reserveAvatarOffset?: boolean
   disabled?: boolean
   maxRows?: number

package/src/components/platform/ScriptArguments.tsx

@@ -6,12 +6,13 @@
  * Includes an "Add Script Argument" button to add new entries.
  */
 
-import { PlusCircle, Trash2 } from 'lucide-react'
+import { Trash2 } from 'lucide-react'
 import React from 'react'
-import { cn } from '../../utils/cn'
+import { cn } from '@/utils'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 import { Label } from '../ui/label'
+import {PlusCircleIcon} from "@/components/icons-v2-generated";
 
 /**
  * Single script argument with key and value
@@ -156,12 +157,12 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
       <div className="flex justify-start">
         <Button
           type="button"
-          variant="transparent"
-          className="text-ods-text-primary"
+          variant="outline"
+          size="small"
           onClick={handleAdd}
           disabled={disabled}
-          leftIcon={<PlusCircle className="size-6" />}
-          noPaddingX
+          className="self-start"
+          leftIcon={<PlusCircleIcon className="text-ods-text-secondary" />}
         >
           {addButtonLabel}
         </Button>

package/tailwind.config.ts

@@ -219,6 +219,10 @@ const config: Config = {
         xs: "calc(var(--radius) - 6px)", // 2px
       },
 
+      maxWidth: {
+        'ods-content-narrow': '600px',
+      },
+
       fontFamily: {
         sans: ["var(--font-family-body)"],
         mono: ["var(--font-family-heading)"],