@stigmer/react 0.0.36 → 0.0.40

package/src/execution/FilePathContext.tsx

@@ -0,0 +1,32 @@
+import { createContext } from "react";
+import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
+import type { ResolvedPathAction } from "./file-path-resolver";
+
+/**
+ * Context value that carries workspace entries and an optional click
+ * handler to {@link FilePathLink} components deep in the tree.
+ *
+ * Provided by {@link MessageThread} (or a platform builder's custom
+ * wrapper). When no provider is present, `FilePathLink` degrades to
+ * copy-to-clipboard for all paths.
+ */
+export interface FilePathContextValue {
+  readonly workspaceEntries: readonly WorkspaceEntry[];
+  /**
+   * Optional override for the default click behavior. When provided,
+   * `FilePathLink` delegates to this callback instead of opening
+   * a URL or copying to clipboard. Platform builders use this to
+   * integrate their own file viewer or navigation.
+   */
+  readonly onFilePathClick?: (
+    path: string,
+    resolved: ResolvedPathAction,
+  ) => void;
+}
+
+const DEFAULT_VALUE: FilePathContextValue = {
+  workspaceEntries: [],
+};
+
+export const FilePathContext =
+  createContext<FilePathContextValue>(DEFAULT_VALUE);

package/src/execution/FilePathLink.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useContext, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { FilePathContext } from "./FilePathContext";
+import { resolvePathAction } from "./file-path-resolver";
+
+export interface FilePathLinkProps {
+  /** The workspace-relative file path from the tool call. */
+  readonly path: string;
+  readonly className?: string;
+}
+
+const COPIED_FEEDBACK_MS = 2000;
+
+/**
+ * Interactive file path display that replaces inert `<span>` path
+ * text in tool call rendering.
+ *
+ * Resolves the path against workspace entries from
+ * {@link FilePathContext}:
+ *
+ * - **Git source** → `<a>` that opens the file on GitHub in a new tab.
+ * - **Local / platform / unresolvable** → `<button>` that copies the
+ *   path to clipboard with inline "Copied" feedback.
+ *
+ * Platform builders can override the default behavior via the
+ * `onFilePathClick` callback in {@link FilePathContext}.
+ *
+ * @example
+ * ```tsx
+ * <FilePathLink path="src/main.go" />
+ * ```
+ */
+export function FilePathLink({ path, className }: FilePathLinkProps) {
+  const { workspaceEntries, onFilePathClick } = useContext(FilePathContext);
+  const [copied, setCopied] = useState(false);
+
+  const resolved = useMemo(
+    () => resolvePathAction(path, workspaceEntries),
+    [path, workspaceEntries],
+  );
+
+  const handleCopy = useCallback(() => {
+    const value = resolved.action === "copy" ? resolved.value : path;
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+    });
+  }, [resolved, path]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (onFilePathClick) {
+        e.preventDefault();
+        onFilePathClick(path, resolved);
+        return;
+      }
+      if (resolved.action === "copy") {
+        handleCopy();
+      }
+      // For "link" action the <a> default navigation handles it.
+    },
+    [onFilePathClick, path, resolved, handleCopy],
+  );
+
+  const sharedClasses = cn(
+    "inline-flex items-center gap-1 font-mono text-foreground",
+    "transition-colors hover:text-primary hover:underline",
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:rounded-sm",
+    className,
+  );
+
+  if (resolved.action === "link" && !onFilePathClick) {
+    return (
+      <a
+        href={resolved.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={resolved.tooltip}
+        title={resolved.tooltip}
+        className={cn(sharedClasses, "group/fpl")}
+      >
+        <span className="min-w-0 truncate">{path}</span>
+        <ExternalLinkIcon />
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      aria-label={resolved.tooltip}
+      title={resolved.tooltip}
+      className={cn(sharedClasses, "group/fpl cursor-pointer")}
+    >
+      <span className="min-w-0 truncate">{copied ? "Copied" : path}</span>
+      {!copied && <CopyIcon />}
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons — SDK pattern (no external icon dependency)
+// ---------------------------------------------------------------------------
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 opacity-0 transition-opacity group-hover/fpl:opacity-70"
+      aria-hidden="true"
+    >
+      <path d="M9 3L5 7" />
+      <path d="M7 3H9V5" />
+      <path d="M5 3H3.5C2.95 3 2.5 3.45 2.5 4V8.5C2.5 9.05 2.95 9.5 3.5 9.5H8C8.55 9.5 9 9.05 9 8.5V7" />
+    </svg>
+  );
+}
+
+function CopyIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 opacity-0 transition-opacity group-hover/fpl:opacity-70"
+      aria-hidden="true"
+    >
+      <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
+      <path d="M8 4V2.5C8 1.95 7.55 1.5 7 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V7C1.5 7.55 1.95 8 2.5 8H4" />
+    </svg>
+  );
+}

package/src/execution/FollowUpInput.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "@stigmer/theme";
+import { ModelSelector } from "../models/ModelSelector";
+
+export interface FollowUpInputProps {
+  /** Called when the user submits a message. */
+  readonly onSubmit: (message: string, modelName?: string) => void;
+  /** Shows loading indicator on send button. */
+  readonly isSubmitting?: boolean;
+  /** Disables the entire input (e.g., while an execution streams). */
+  readonly disabled?: boolean;
+  /** Show model selector in the input bar. Default: true. */
+  readonly showModelSelector?: boolean;
+  /** Initial model ID for the selector. */
+  readonly defaultModelId?: string;
+  /** Called when the user changes the selected model. */
+  readonly onModelChange?: (modelId: string) => void;
+  /** Placeholder text for the textarea. Default: "Reply...". */
+  readonly placeholder?: string;
+  readonly className?: string;
+}
+
+const MAX_TEXTAREA_HEIGHT = 240;
+
+/**
+ * Embeddable input bar for continuing a conversation within a session.
+ *
+ * Composes a self-resizing textarea with an optional {@link ModelSelector}
+ * and a send button. Designed as a drop-in companion to
+ * {@link MessageThread} — platform builders wire them together via
+ * {@link useSessionConversation} or manually.
+ *
+ * Uses `<div>` instead of `<form>` so it can be embedded inside host
+ * application forms without nesting violations.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @deprecated Use {@link SessionComposer} instead. `SessionComposer`
+ * unifies the launcher and follow-up input into a single component
+ * with integrated workspace editing and extensible toolbar. This
+ * component will be removed in a future release.
+ *
+ * @example
+ * ```tsx
+ * // Before (deprecated):
+ * <FollowUpInput
+ *   onSubmit={(msg, model) => conv.sendFollowUp(msg, { modelName: model })}
+ *   disabled={!conv.canSendFollowUp}
+ *   isSubmitting={conv.isSending}
+ * />
+ *
+ * // After:
+ * <SessionComposer
+ *   onSubmit={(msg, model) => conv.sendFollowUp(msg, { modelName: model })}
+ *   disabled={!conv.canSendFollowUp}
+ *   isSubmitting={conv.isSending}
+ *   workspace={workspace}
+ * />
+ * ```
+ */
+export function FollowUpInput({
+  onSubmit,
+  isSubmitting = false,
+  disabled = false,
+  showModelSelector = true,
+  defaultModelId,
+  onModelChange,
+  placeholder = "Reply\u2026",
+  className,
+}: FollowUpInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [message, setMessage] = useState("");
+  const [modelId, setModelId] = useState<string | undefined>(defaultModelId);
+  const prevDisabledRef = useRef(disabled);
+
+  const isDisabled = disabled || isSubmitting;
+  const canSubmit = message.trim().length > 0 && !isDisabled;
+
+  useEffect(() => {
+    if (prevDisabledRef.current && !disabled) {
+      textareaRef.current?.focus();
+    }
+    prevDisabledRef.current = disabled;
+  }, [disabled]);
+
+  const resizeTextarea = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`;
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = message.trim();
+    if (!trimmed || isDisabled) return;
+
+    onSubmit(trimmed, modelId);
+    setMessage("");
+
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+    }
+  }, [message, modelId, isDisabled, onSubmit]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  const handleModelChange = useCallback(
+    (id: string) => {
+      setModelId(id);
+      onModelChange?.(id);
+    },
+    [onModelChange],
+  );
+
+  return (
+    <div
+      role="form"
+      aria-label="Send follow-up message"
+      className={cn(
+        "shrink-0 px-4 py-3",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "rounded-xl border border-border bg-card shadow-sm",
+          "focus-within:ring-2 focus-within:ring-ring",
+          isDisabled && "opacity-50",
+        )}
+      >
+        <textarea
+          ref={textareaRef}
+          value={message}
+          onChange={(e) => {
+            setMessage(e.target.value);
+            resizeTextarea();
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={isDisabled}
+          rows={1}
+          className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+        />
+
+        <div className="flex items-center justify-between gap-2 border-t border-border/50 px-3 py-2">
+          <div className="flex items-center gap-2">
+            {showModelSelector && (
+              <ModelSelector
+                value={modelId}
+                onValueChange={handleModelChange}
+                disabled={isDisabled}
+              />
+            )}
+          </div>
+
+          <button
+            type="button"
+            disabled={!canSubmit}
+            onClick={handleSubmit}
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40"
+            aria-label="Send message"
+          >
+            {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ArrowUpIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M8 12V4M4 7l4-4 4 4" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/execution/MessageEntry.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import Markdown from "react-markdown";
+import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components";
+
+export interface MessageEntryProps {
+  readonly message: AgentMessage;
+  readonly className?: string;
+}
+
+/**
+ * Renders a single message in the conversation thread.
+ *
+ * - `MESSAGE_HUMAN` — plain text with muted background
+ * - `MESSAGE_AI` — markdown-rendered via `react-markdown` + `remark-gfm`,
+ *   with a blinking cursor while streaming
+ * - `MESSAGE_SYSTEM` — small muted text
+ * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results are
+ *   consumed by {@link ToolCallGroup} in SP4)
+ *
+ * Purely presentational — no data fetching, no state.
+ * All visual properties flow through `--stgm-*` tokens.
+ *
+ * @example
+ * ```tsx
+ * <MessageEntry message={agentMessage} />
+ * ```
+ */
+export function MessageEntry({ message, className }: MessageEntryProps) {
+  switch (message.type) {
+    case MessageType.MESSAGE_HUMAN:
+      return <HumanMessage content={message.content} className={className} />;
+    case MessageType.MESSAGE_AI:
+      return (
+        <AiMessage
+          content={message.content}
+          isStreaming={message.isStreaming}
+          className={className}
+        />
+      );
+    case MessageType.MESSAGE_SYSTEM:
+      return <SystemMessage content={message.content} className={className} />;
+    default:
+      return null;
+  }
+}
+
+function HumanMessage({
+  content,
+  className,
+}: {
+  content: string;
+  className?: string;
+}) {
+  return (
+    <div
+      role="article"
+      aria-label="User message"
+      className={cn("ms-[20%] rounded-lg bg-muted/50 px-4 py-3", className)}
+    >
+      <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
+    </div>
+  );
+}
+
+function AiMessage({
+  content,
+  isStreaming,
+  className,
+}: {
+  content: string;
+  isStreaming: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      role="article"
+      aria-label="AI response"
+      aria-busy={isStreaming}
+      className={cn("px-4 py-3", className)}
+    >
+      <div className="stgm-prose">
+        <Markdown
+          remarkPlugins={REMARK_PLUGINS}
+          components={MARKDOWN_COMPONENTS}
+        >
+          {content}
+        </Markdown>
+        {isStreaming && (
+          <span
+            className="inline-block w-[2px] h-[1em] bg-foreground align-text-bottom animate-pulse ml-0.5"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SystemMessage({
+  content,
+  className,
+}: {
+  content: string;
+  className?: string;
+}) {
+  return (
+    <div
+      role="article"
+      aria-label="System message"
+      className={cn("px-4 py-2", className)}
+    >
+      <p className="text-xs text-muted-foreground italic">{content}</p>
+    </div>
+  );
+}
+