@flamingo-stack/openframe-frontend-core 0.0.172 → 0.0.173

package/src/components/chat/utils/process-historical-messages.ts

@@ -7,13 +7,16 @@ import {
   MESSAGE_TYPE,
   OWNER_TYPE,
   type AuthorType,
+  type ChatApprovalStatus,
   type HistoricalMessage,
+  type PendingToolCallData,
   type ProcessedMessage,
   type MessageProcessingOptions,
   type MessageData,
   type MessageOwner,
 } from '../types'
 import { MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator'
+import { getCommandText } from './tool-call-helpers'
 
 function getOwnerDisplayName(owner?: MessageOwner): string {
   if (owner?.type === OWNER_TYPE.ADMIN && owner.user) {
@@ -48,7 +51,10 @@ function pushStandaloneMessages(
  */
 export interface ProcessHistoricalMessagesResult {
   messages: ProcessedMessage[]
-  escalatedApprovals: Map<string, { command: string; explanation?: string; approvalType: string }>
+  escalatedApprovals: Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >
 }
 
 /**
@@ -71,7 +77,10 @@ export function processHistoricalMessages(
 
   const processedMessages: ProcessedMessage[] = []
   const accumulator = createMessageSegmentAccumulator({ onApprove, onReject })
-  const escalatedApprovals = new Map<string, { command: string; explanation?: string; approvalType: string }>()
+  const escalatedApprovals = new Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >()
   
   let currentAssistantId: string | null = null
   let currentAssistantTimestamp: Date | null = null
@@ -192,9 +201,15 @@ function processMessageData(
   accumulator: MessageSegmentAccumulator,
   approvalStatuses: Record<string, string>,
   options: MessageProcessingOptions = {},
-  escalatedApprovals?: Map<string, { command: string; explanation?: string; approvalType: string }>
+  escalatedApprovals?: Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >
 ): void {
-  const { displayApprovalTypes } = options
+  // batchApprovalsEnabled is owned by the consumer (oss-tenant chat client /
+  // openframe-frontend tickets). Defaults to ON so consumers that haven't
+  // wired the flag yet get the batch UI; pass `false` to force legacy.
+  const { displayApprovalTypes, batchApprovalsEnabled = true } = options
   switch (data.type) {
     case MESSAGE_TYPE.TEXT:
       if ('text' in data && data.text) {
@@ -217,6 +232,7 @@ function processMessageData(
             integratedToolType: data.integratedToolType || '',
             toolFunction: data.toolFunction || '',
             parameters: data.parameters,
+            toolExecutionRequestId: data.toolExecutionRequestId,
           },
         })
       }
@@ -233,6 +249,7 @@ function processMessageData(
             parameters: data.parameters,
             result: data.result,
             success: data.success,
+            toolExecutionRequestId: data.toolExecutionRequestId,
           },
         })
       }
@@ -241,18 +258,42 @@ function processMessageData(
     case MESSAGE_TYPE.APPROVAL_REQUEST:
       if ('approvalRequestId' in data && data.approvalRequestId) {
         const approvalType = data.approvalType || 'CLIENT'
+        const toolCalls: PendingToolCallData[] | undefined = Array.isArray(data.toolCalls)
+          ? data.toolCalls
+          : undefined
+        const isBatch = !!toolCalls && toolCalls.length > 0
 
         if (!displayApprovalTypes || displayApprovalTypes.includes(approvalType)) {
-          accumulator.trackApprovalRequest(data.approvalRequestId, {
-            command: data.command || '',
-            explanation: data.explanation,
-            approvalType,
-          })
+          if (isBatch) {
+            const status = (approvalStatuses[data.approvalRequestId] as ChatApprovalStatus) || 'pending'
+            if (batchApprovalsEnabled) {
+              accumulator.addApprovalBatch(data.approvalRequestId, approvalType, toolCalls!, status)
+            } else {
+              // Flag OFF — unfold batch into N legacy approval cards (same id).
+              for (const call of toolCalls!) {
+                if (!call.requiresApproval) continue
+                accumulator.addApprovalRequest(
+                  data.approvalRequestId,
+                  getCommandText(call),
+                  call.toolExplanation,
+                  approvalType,
+                  status,
+                )
+              }
+            }
+          } else {
+            accumulator.trackApprovalRequest(data.approvalRequestId, {
+              command: data.command || '',
+              explanation: data.explanation,
+              approvalType,
+            })
+          }
         } else {
           escalatedApprovals?.set(data.approvalRequestId, {
             command: data.command || '',
             explanation: data.explanation,
             approvalType,
+            ...(isBatch ? { toolCalls } : {}),
           })
         }
       }
@@ -260,10 +301,34 @@ function processMessageData(
 
     case MESSAGE_TYPE.APPROVAL_RESULT:
       if ('approvalRequestId' in data && data.approvalRequestId) {
-        const existingStatus = approvalStatuses[data.approvalRequestId]
-        const status = existingStatus || (data.approved ? 'approved' : 'rejected')
+        const existingStatus = approvalStatuses[data.approvalRequestId] as ChatApprovalStatus | undefined
+        const status: ChatApprovalStatus = existingStatus || (data.approved ? 'approved' : 'rejected')
         const escalatedData = escalatedApprovals?.get(data.approvalRequestId)
 
+        if (escalatedData?.toolCalls && escalatedData.toolCalls.length > 0) {
+          if (batchApprovalsEnabled) {
+            accumulator.addApprovalBatch(
+              data.approvalRequestId,
+              escalatedData.approvalType,
+              escalatedData.toolCalls,
+              status,
+            )
+          } else {
+            for (const call of escalatedData.toolCalls) {
+              if (!call.requiresApproval) continue
+              accumulator.addApprovalRequest(
+                data.approvalRequestId,
+                getCommandText(call),
+                call.toolExplanation,
+                escalatedData.approvalType,
+                status,
+              )
+            }
+          }
+          escalatedApprovals?.delete(data.approvalRequestId)
+          break
+        }
+
         if (escalatedData) {
           accumulator.trackApprovalRequest(data.approvalRequestId, {
             command: escalatedData.command,
@@ -272,7 +337,14 @@ function processMessageData(
           })
           escalatedApprovals?.delete(data.approvalRequestId)
         }
-        
+
+        // If a segment with this id is already present (batch or legacy), just flip its status.
+        // updateApprovalStatus matches both `approval_batch` and `approval_request` segments.
+        const before = accumulator.getSegments()
+        const after = accumulator.updateApprovalStatus(data.approvalRequestId, status)
+        const updatedExisting = before.some((s, i) => after[i] !== s)
+        if (updatedExisting) break
+
         accumulator.processApprovalResult(
           data.approvalRequestId,
           status === 'approved',
@@ -364,7 +436,10 @@ export function processHistoricalMessagesWithErrors(
 
   const processedMessages: ProcessedMessage[] = []
   const accumulator = createMessageSegmentAccumulator({ onApprove, onReject })
-  const escalatedApprovals = new Map<string, { command: string; explanation?: string; approvalType: string }>()
+  const escalatedApprovals = new Map<
+    string,
+    { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
+  >()
 
   let currentAssistantId: string | null = null
   let currentAssistantTimestamp: Date | null = null

package/src/components/chat/utils/tool-call-helpers.ts

@@ -0,0 +1,105 @@
+import type { PendingToolCallData } from '../types'
+
+/**
+ * Keys in `toolCallArguments` whose value is the actual command/query/script
+ * body — anything that should be rendered as the tool's "title" line in the
+ * approval card. Order matters: first match wins.
+ */
+export const COMMAND_BODY_ARG_KEYS = ['command', 'query', 'script', 'scriptContent', 'code'] as const
+
+/**
+ * Extract a human-readable command string from a tool call.
+ * Order: command/query/script/scriptContent/code arg → toolTitle → toolName → fallback.
+ */
+export function getCommandText(call: PendingToolCallData): string {
+  const args = call.toolCallArguments
+  if (args && typeof args === 'object') {
+    const a = args as Record<string, unknown>
+    for (const key of COMMAND_BODY_ARG_KEYS) {
+      const candidate = a[key]
+      if (typeof candidate === 'string' && candidate.trim()) return candidate
+    }
+  }
+  return call.toolTitle || call.toolName || 'Tool call'
+}
+
+export type FormattedArgValue =
+  | { kind: 'inline'; text: string }
+  | { kind: 'block'; text: string; language: 'json' | 'text' }
+
+const INLINE_STRING_MAX = 80
+
+/**
+ * Decide how to render a single `toolCallArguments` value:
+ *  - objects/arrays → pretty-printed JSON block
+ *  - strings that parse as JSON → pretty-printed JSON block
+ *  - multi-line or long strings → preserved-whitespace text block
+ *  - everything else → inline single line
+ */
+export function formatToolArgValue(value: unknown): FormattedArgValue {
+  if (value === null || value === undefined) return { kind: 'inline', text: '' }
+
+  if (typeof value === 'object') {
+    return { kind: 'block', text: safeStringify(value), language: 'json' }
+  }
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (
+      (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+      (trimmed.startsWith('[') && trimmed.endsWith(']'))
+    ) {
+      try {
+        return { kind: 'block', text: JSON.stringify(JSON.parse(trimmed), null, 2), language: 'json' }
+      } catch {
+        // not valid JSON — fall through
+      }
+    }
+    if (value.includes('\n') || value.length > INLINE_STRING_MAX) {
+      return { kind: 'block', text: value, language: 'text' }
+    }
+    return { kind: 'inline', text: value }
+  }
+
+  return { kind: 'inline', text: String(value) }
+}
+
+function safeStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2)
+  } catch {
+    return String(value)
+  }
+}
+
+/**
+ * Decide how to render a tool execution `result` string.
+ *  - Strips a single surrounding markdown code fence (``` … ```), since the
+ *    backend often wraps Bash/PowerShell output that way.
+ *  - If the body parses as JSON, returns a pretty-printed JSON block.
+ *  - If the body is multi-line / long, returns a preserved-whitespace block.
+ *  - Otherwise inline.
+ */
+export function formatToolResult(value: string | undefined | null): FormattedArgValue {
+  if (typeof value !== 'string') return { kind: 'inline', text: '' }
+
+  const fenced = value.match(/^\s*```(?:[a-zA-Z0-9_-]*)\n([\s\S]*?)\n```\s*$/)
+  const body = fenced ? fenced[1] : value
+  const trimmed = body.trim()
+
+  if (
+    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  ) {
+    try {
+      return { kind: 'block', text: JSON.stringify(JSON.parse(trimmed), null, 2), language: 'json' }
+    } catch {
+      // fall through
+    }
+  }
+
+  if (body.includes('\n') || body.length > INLINE_STRING_MAX) {
+    return { kind: 'block', text: body, language: 'text' }
+  }
+  return { kind: 'inline', text: body }
+}

package/src/components/ui/textarea.tsx

@@ -12,40 +12,122 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   label?: string;
   /** Error message displayed below the textarea */
   error?: string;
+  /** Element rendered at the right edge of the field (e.g. send icon). */
+  endIcon?: React.ReactNode;
+  /**
+   * When true, `endIcon` is wrapped in a real `<button>` with hover / active
+   * / focus-visible styling matching the rest of the design system. Pass any
+   * extra button attributes (`onClick`, `disabled`, `aria-label`, …) via
+   * `endIconButtonProps`.
+   */
+  endIconAsButton?: boolean;
+  /** Extra attributes for the end-icon button. */
+  endIconButtonProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, invalid = false, label, error, ...props }, ref) => {
+  ({ className, invalid = false, label, error, endIcon, endIconAsButton = false, endIconButtonProps, ...props }, ref) => {
     const isInvalid = invalid || !!error
+    const hasEndIcon = !!endIcon
 
+    // Without an end icon we keep the historical layout: bare textarea, the
+    // border/bg/hover all live on the textarea itself.
+    if (!hasEndIcon) {
+      return (
+        <FieldWrapper label={label} error={error}>
+          <textarea
+            className={cn(
+              "flex min-h-[96px] w-full rounded-[6px] border p-3",
+              "text-h4",
+              "focus-visible:outline-none focus:border-ods-accent",
+              "transition-colors duration-200 touch-manipulation",
+              "bg-ods-card border-ods-border text-ods-text-primary placeholder:text-ods-text-secondary",
+              !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
+              props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
+              "cursor-text relative z-10",
+              "resize-y",
+              isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          />
+        </FieldWrapper>
+      )
+    }
+
+    // With an end icon we lift border/bg onto a `<label>` wrapper so the icon
+    // sits visually inside the same field. The textarea becomes a transparent
+    // child. Wrapper classes mirror `Input` 1:1 (same items-center, same
+    // `has-[:focus]` selectors, same active state, same outline reset) so
+    // hover / focus / cursor behaviour matches the standard input exactly.
     const content = (
-      <textarea
+      <label
+        data-invalid={isInvalid || undefined}
         className={cn(
-          // Layout & spacing - match Input
-          "flex min-h-[96px] w-full rounded-[6px] border p-3",
-          // Typography - match Input exactly
-          "text-h4",
-          // Focus states
-          "focus-visible:outline-none focus:border-ods-accent",
-          // Animations & touch UX
-          "transition-colors duration-200 touch-manipulation",
-          // Theme palette
-          "bg-ods-card border-ods-border text-ods-text-primary placeholder:text-ods-text-secondary",
-          // Hover & active (not disabled)
+          // Wrapper mirrors `Input`, but uses `items-end` so the icon sticks
+          // to the bottom-right when the textarea grows multi-line. Vertical
+          // padding lives here (not on the textarea) so both children share
+          // the same bottom baseline at any height.
+          "flex w-full items-end gap-2 rounded-[6px] border px-3 py-2.5 md:py-3 min-h-11 md:min-h-12 cursor-text",
+          "has-[:focus-visible]:outline-none",
+          "group",
+          "transition-colors duration-200",
+          "bg-ods-card border-ods-border has-[:focus]:border-ods-accent",
           !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
-          // Disabled
-          props.disabled && "!cursor-not-allowed bg-ods-bg disabled:placeholder:text-ods-border",
-          // Ensure proper cursor/stacking
-          "cursor-text relative z-10",
-          // Textarea-specific
-          "resize-y",
-          // Invalid state
-          isInvalid && "border-ods-error hover:border-ods-error focus:border-ods-error",
-          className,
+          props.disabled && "!cursor-not-allowed bg-ods-bg",
+          isInvalid && "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
+        )}
+      >
+        <textarea
+          ref={ref}
+          rows={1}
+          className={cn(
+            "flex-1 min-w-0 resize-none bg-transparent border-none outline-none p-0 m-0 box-border",
+            // Native CSS auto-grow (Chrome 123+, FF 124+, Safari 16.4+) — no
+            // JS needed to size to content. Falls back to `rows={1}` natural
+            // height on older browsers.
+            "[field-sizing:content]",
+            "text-h4 text-ods-text-primary placeholder:text-ods-text-secondary leading-6",
+            // Hard cap on growth: beyond `max-h` the textarea scrolls
+            // internally instead of pushing the icon out of frame.
+            "max-h-[160px] overflow-y-auto",
+            "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
+            "disabled:cursor-not-allowed disabled:placeholder:text-ods-border",
+            className,
+          )}
+          {...props}
+        />
+
+        {endIconAsButton ? (
+          <button
+            type="button"
+            aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}
+            {...endIconButtonProps}
+            className={cn(
+              "flex shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              "group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error",
+              "[&_svg]:size-4 md:[&_svg]:size-6",
+              "cursor-pointer hover:text-ods-text-primary",
+              "focus-visible:outline-none focus-visible:text-ods-accent",
+              "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
+              endIconButtonProps?.className,
+            )}
+          >
+            {endIcon}
+          </button>
+        ) : (
+          <span
+            className={cn(
+              "flex shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+              "group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error",
+              "[&_svg]:size-4 md:[&_svg]:size-6",
+            )}
+          >
+            {endIcon}
+          </span>
         )}
-        ref={ref}
-        {...props}
-      />
+      </label>
     )
 
     return (