@stigmer/react 0.0.36 → 0.0.40

package/src/agent-execution/components/MessageEntry.tsx

@@ -1,125 +0,0 @@
-import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
-import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { OutputBlock } from "./OutputBlock";
-import { ToolCallCard } from "./ToolCallCard";
-import { SubAgentCard } from "./SubAgentCard";
-import { isHumanMessage, isAiMessage, isSystemMessage } from "../helpers";
-import { User, BotMessageSquare, Info } from "lucide-react";
-
-export interface MessageEntryProps {
-  message: AgentMessage;
-  subAgentIndex: Map<string, SubAgentExecution>;
-  onApproval?: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<void>;
-  isApprovalSubmitting?: boolean;
-}
-
-export function MessageEntry({
-  message,
-  subAgentIndex,
-  onApproval,
-  isApprovalSubmitting,
-}: MessageEntryProps) {
-  if (isHumanMessage(message.type)) {
-    return <HumanMessageBubble content={message.content} />;
-  }
-
-  if (isAiMessage(message.type)) {
-    return (
-      <AiMessageBlock
-        message={message}
-        subAgentIndex={subAgentIndex}
-        onApproval={onApproval}
-        isApprovalSubmitting={isApprovalSubmitting}
-      />
-    );
-  }
-
-  if (isSystemMessage(message.type)) {
-    return <SystemMessageBlock content={message.content} />;
-  }
-
-  return null;
-}
-
-export function HumanMessageBubble({ content }: { content: string }) {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="bg-muted flex size-7 shrink-0 items-center justify-center rounded-full">
-        <User className="text-muted-foreground size-3.5" />
-      </div>
-      <div className="bg-muted min-w-0 flex-1 rounded-lg px-3 py-2 text-sm">
-        <p className="whitespace-pre-wrap">{content}</p>
-      </div>
-    </div>
-  );
-}
-
-function AiMessageBlock({
-  message,
-  subAgentIndex,
-  onApproval,
-  isApprovalSubmitting,
-}: {
-  message: AgentMessage;
-  subAgentIndex: Map<string, SubAgentExecution>;
-  onApproval?: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<void>;
-  isApprovalSubmitting?: boolean;
-}) {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="bg-primary/10 flex size-7 shrink-0 items-center justify-center rounded-full">
-        <BotMessageSquare className="text-primary size-3.5" />
-      </div>
-      <div className="min-w-0 flex-1 space-y-2">
-        {message.content && (
-          <OutputBlock
-            content={message.content}
-            isStreaming={message.isStreaming}
-            model={message.model}
-          />
-        )}
-
-        {message.toolCalls.map((tc) => {
-          const subAgent = subAgentIndex.get(tc.id);
-          if (subAgent) {
-            return (
-              <SubAgentCard
-                key={tc.id}
-                subAgent={subAgent}
-                onApproval={onApproval}
-                isApprovalSubmitting={isApprovalSubmitting}
-              />
-            );
-          }
-          return (
-            <ToolCallCard
-              key={tc.id}
-              toolCall={tc}
-              onApproval={onApproval}
-              isApprovalSubmitting={isApprovalSubmitting}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function SystemMessageBlock({ content }: { content: string }) {
-  if (!content) return null;
-  return (
-    <div className="text-muted-foreground flex items-center gap-2 text-xs">
-      <Info className="size-3 shrink-0" />
-      <p>{content}</p>
-    </div>
-  );
-}

package/src/agent-execution/components/MessageInput.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { useCallback, useRef, type KeyboardEvent } from "react";
-import { Textarea } from "../../internal/textarea";
-import { Button } from "../../internal/button";
-import { cn } from "@stigmer/theme";
-import { SendHorizontal, Loader2 } from "lucide-react";
-
-interface MessageInputProps {
-  onSend: (message: string) => void;
-  disabled?: boolean;
-  isLoading?: boolean;
-  placeholder?: string;
-  className?: string;
-}
-
-export function MessageInput({
-  onSend,
-  disabled = false,
-  isLoading = false,
-  placeholder = "Send a message...",
-  className,
-}: MessageInputProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSend = useCallback(() => {
-    const value = textareaRef.current?.value.trim();
-    if (!value || disabled || isLoading) return;
-    onSend(value);
-    if (textareaRef.current) {
-      textareaRef.current.value = "";
-    }
-  }, [onSend, disabled, isLoading]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-      }
-    },
-    [handleSend],
-  );
-
-  return (
-    <div className={cn("flex items-end gap-2", className)}>
-      <Textarea
-        ref={textareaRef}
-        placeholder={placeholder}
-        disabled={disabled || isLoading}
-        onKeyDown={handleKeyDown}
-        className="min-h-10 resize-none"
-        rows={1}
-      />
-      <Button
-        size="icon"
-        onClick={handleSend}
-        disabled={disabled || isLoading}
-        className="shrink-0"
-        aria-label="Send message"
-      >
-        {isLoading ? (
-          <Loader2 className="size-4 animate-spin" />
-        ) : (
-          <SendHorizontal className="size-4" />
-        )}
-      </Button>
-    </div>
-  );
-}

package/src/agent-execution/components/OutputBlock.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { cn } from "@stigmer/theme";
-
-interface OutputBlockProps {
-  content: string;
-  isStreaming?: boolean;
-  model?: string;
-  className?: string;
-}
-
-export const OutputBlock = memo(function OutputBlock({
-  content,
-  isStreaming = false,
-  model,
-  className,
-}: OutputBlockProps) {
-  if (!content && !isStreaming) return null;
-
-  return (
-    <div className={cn("relative", className)}>
-      <div className="prose prose-sm dark:prose-invert [&_pre]:bg-muted [&_code]:bg-muted max-w-none break-words [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-xs [&_code]:before:content-none [&_code]:after:content-none [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:text-xs [&_table]:text-xs [&_td]:px-2 [&_td]:py-1 [&_th]:px-2 [&_th]:py-1">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-        {isStreaming && <StreamingCursor />}
-      </div>
-      {model && !isStreaming && (
-        <p className="text-muted-foreground/60 mt-1.5 text-[10px]">{model}</p>
-      )}
-    </div>
-  );
-});
-
-function StreamingCursor() {
-  return (
-    <span
-      className="bg-foreground ml-0.5 inline-block h-4 w-0.5 animate-pulse align-text-bottom"
-      aria-label="Generating..."
-    />
-  );
-}

package/src/agent-execution/components/SubAgentCard.tsx

@@ -1,138 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Badge } from "../../internal/badge";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../internal/collapsible";
-import { OutputBlock } from "./OutputBlock";
-import { ToolCallCard } from "./ToolCallCard";
-import {
-  subAgentStatusLabel,
-  subAgentStatusVariant,
-  formatDuration,
-  isAiMessage,
-} from "../helpers";
-import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { SubAgentStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { cn } from "@stigmer/theme";
-import { ChevronRight, Bot, Loader2 } from "lucide-react";
-
-interface SubAgentCardProps {
-  subAgent: SubAgentExecution;
-  onApproval?: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<void>;
-  isApprovalSubmitting?: boolean;
-  className?: string;
-}
-
-export function SubAgentCard({
-  subAgent,
-  onApproval,
-  isApprovalSubmitting = false,
-  className,
-}: SubAgentCardProps) {
-  const [open, setOpen] = useState(false);
-  const isActive = subAgent.status === SubAgentStatus.SUB_AGENT_IN_PROGRESS;
-  const duration = formatDuration(subAgent.startedAt, subAgent.completedAt);
-  const aiMessages = subAgent.messages.filter((m) => isAiMessage(m.type));
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <div
-        className={cn(
-          "bg-card text-card-foreground rounded-lg border border-dashed text-sm",
-          className,
-        )}
-      >
-        <CollapsibleTrigger className="hover:bg-muted/50 flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left transition-colors">
-          <ChevronRight
-            className={cn(
-              "text-muted-foreground size-3.5 shrink-0 transition-transform",
-              open && "rotate-90",
-            )}
-          />
-          {isActive ? (
-            <Loader2 className="text-muted-foreground size-3.5 shrink-0 animate-spin" />
-          ) : (
-            <Bot className="text-muted-foreground size-3.5 shrink-0" />
-          )}
-          <span className="truncate text-xs font-medium">
-            {subAgent.subject || subAgent.name}
-          </span>
-          <Badge
-            variant={subAgentStatusVariant(subAgent.status)}
-            className="ml-auto shrink-0 text-[10px]"
-          >
-            {subAgentStatusLabel(subAgent.status)}
-          </Badge>
-          {duration && (
-            <span className="text-muted-foreground shrink-0 text-[10px]">
-              {duration}
-            </span>
-          )}
-          {subAgent.toolCalls.length > 0 && (
-            <span className="text-muted-foreground shrink-0 text-[10px]">
-              {subAgent.toolCalls.length} tool
-              {subAgent.toolCalls.length !== 1 && "s"}
-            </span>
-          )}
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="space-y-3 border-t px-3 py-2">
-            {subAgent.input && (
-              <div>
-                <p className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase">
-                  Task
-                </p>
-                <p className="text-muted-foreground text-xs">
-                  {subAgent.input}
-                </p>
-              </div>
-            )}
-
-            {aiMessages.map((msg, i) => (
-              <OutputBlock
-                key={i}
-                content={msg.content}
-                isStreaming={msg.isStreaming}
-                model={msg.model}
-              />
-            ))}
-
-            {subAgent.toolCalls.map((tc) => (
-              <ToolCallCard
-                key={tc.id}
-                toolCall={tc}
-                onApproval={onApproval}
-                isApprovalSubmitting={isApprovalSubmitting}
-              />
-            ))}
-
-            {subAgent.error && (
-              <p className="text-destructive text-xs">{subAgent.error}</p>
-            )}
-
-            {subAgent.output && (
-              <div>
-                <p className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase">
-                  Result
-                </p>
-                <pre className="bg-muted overflow-x-auto rounded p-2 text-[11px] leading-relaxed whitespace-pre-wrap">
-                  {subAgent.output}
-                </pre>
-              </div>
-            )}
-          </div>
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  );
-}

package/src/agent-execution/components/ToolCallCard.tsx

@@ -1,153 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { Badge } from "../../internal/badge";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../../internal/collapsible";
-import { ApprovalControls } from "./ApprovalControls";
-import {
-  toolCallStatusLabel,
-  toolCallStatusVariant,
-  qualifiedToolName,
-  formatDuration,
-} from "../helpers";
-import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
-import { cn } from "@stigmer/theme";
-import { ChevronRight, Wrench, Loader2 } from "lucide-react";
-
-interface ToolCallCardProps {
-  toolCall: ToolCall;
-  onApproval?: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<void>;
-  isApprovalSubmitting?: boolean;
-  className?: string;
-}
-
-export function ToolCallCard({
-  toolCall,
-  onApproval,
-  isApprovalSubmitting = false,
-  className,
-}: ToolCallCardProps) {
-  const [open, setOpen] = useState(false);
-  const isWaitingApproval =
-    toolCall.status === ToolCallStatus.TOOL_CALL_WAITING_APPROVAL;
-  const isRunning = toolCall.status === ToolCallStatus.TOOL_CALL_RUNNING;
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-  const displayName = qualifiedToolName(toolCall.name, toolCall.mcpServerSlug);
-
-  const handleApproval = useCallback(
-    async (action: ApprovalAction, comment?: string) => {
-      await onApproval?.(toolCall.id, action, comment);
-    },
-    [onApproval, toolCall.id],
-  );
-
-  return (
-    <Collapsible open={open || isWaitingApproval} onOpenChange={setOpen}>
-      <div
-        className={cn(
-          "bg-card text-card-foreground rounded-lg border text-sm",
-          isWaitingApproval && "border-primary/40 ring-primary/20 ring-1",
-          className,
-        )}
-      >
-        <CollapsibleTrigger className="hover:bg-muted/50 flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left transition-colors">
-          <ChevronRight
-            className={cn(
-              "text-muted-foreground size-3.5 shrink-0 transition-transform",
-              (open || isWaitingApproval) && "rotate-90",
-            )}
-          />
-          {isRunning ? (
-            <Loader2 className="text-muted-foreground size-3.5 shrink-0 animate-spin" />
-          ) : (
-            <Wrench className="text-muted-foreground size-3.5 shrink-0" />
-          )}
-          <span className="truncate font-mono text-xs">{displayName}</span>
-          <Badge
-            variant={toolCallStatusVariant(toolCall.status)}
-            className="ml-auto shrink-0 text-[10px]"
-          >
-            {toolCallStatusLabel(toolCall.status)}
-          </Badge>
-          {duration && (
-            <span className="text-muted-foreground shrink-0 text-[10px]">
-              {duration}
-            </span>
-          )}
-        </CollapsibleTrigger>
-
-        <CollapsibleContent>
-          <div className="space-y-2 border-t px-3 py-2">
-            {toolCall.args && Object.keys(toolCall.args).length > 0 && (
-              <ToolCallSection label="Arguments">
-                <pre className="bg-muted overflow-x-auto rounded p-2 text-[11px] leading-relaxed">
-                  {JSON.stringify(toolCall.args, null, 2)}
-                </pre>
-              </ToolCallSection>
-            )}
-
-            {toolCall.result && (
-              <ToolCallSection label="Result">
-                <pre className="bg-muted overflow-x-auto rounded p-2 text-[11px] leading-relaxed whitespace-pre-wrap">
-                  {toolCall.result}
-                </pre>
-              </ToolCallSection>
-            )}
-
-            {toolCall.error && (
-              <ToolCallSection label="Error">
-                <p className="text-destructive text-xs">{toolCall.error}</p>
-              </ToolCallSection>
-            )}
-
-            {toolCall.isStreaming && !toolCall.result && (
-              <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
-                <Loader2 className="size-3 animate-spin" />
-                Executing...
-              </div>
-            )}
-          </div>
-
-          {isWaitingApproval && onApproval && (
-            <div className="border-t px-3 py-2">
-              <ApprovalControls
-                approvalMessage={
-                  toolCall.approvalMessage || `Execute tool: ${displayName}`
-                }
-                onSubmit={handleApproval}
-                isSubmitting={isApprovalSubmitting}
-              />
-            </div>
-          )}
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  );
-}
-
-function ToolCallSection({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div>
-      <p className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase">
-        {label}
-      </p>
-      {children}
-    </div>
-  );
-}