veryfront 0.1.47 → 0.1.49

package/src/src/react/components/ai/chat/components/message-edit-form.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface MessageEditFormProps {
+  initialContent: string;
+  onSave: (content: string) => void;
+  onCancel: () => void;
+}
+
+export function MessageEditForm({
+  initialContent,
+  onSave,
+  onCancel,
+}: MessageEditFormProps): React.ReactElement {
+  const [content, setContent] = React.useState(initialContent);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.focus();
+    el.selectionStart = el.value.length;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  const resize = React.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      } else if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        const trimmed = content.trim();
+        if (trimmed) onSave(trimmed);
+      }
+    },
+    [content, onSave, onCancel],
+  );
+
+  return (
+    <div className="w-full">
+      <textarea
+        ref={textareaRef}
+        value={content}
+        onChange={(e) => {
+          setContent(e.target.value);
+          resize();
+        }}
+        onKeyDown={handleKeyDown}
+        rows={1}
+        className={cn(
+          "w-full resize-none rounded-xl px-4 py-3 text-[15px] leading-relaxed",
+          "bg-[var(--accent)]",
+          "border border-[var(--border)]",
+          "focus:outline-none focus-visible:border-[var(--ring)]",
+          "text-[var(--foreground)]",
+        )}
+      />
+      <div className="flex items-center gap-2 mt-2">
+        <button
+          type="button"
+          onClick={() => {
+            const trimmed = content.trim();
+            if (trimmed) onSave(trimmed);
+          }}
+          disabled={!content.trim()}
+          className={cn(
+            "px-3 py-1.5 text-xs font-medium rounded-full transition-all",
+            "bg-[var(--primary)] text-[var(--primary-foreground)]",
+            "hover:opacity-90",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+            "disabled:opacity-50 disabled:pointer-events-none",
+          )}
+        >
+          Save & Submit
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1.5 text-xs font-medium rounded-full text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/message-feedback.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export type FeedbackValue = "positive" | "negative";
+
+export interface MessageFeedbackProps {
+  messageId: string;
+  feedback?: FeedbackValue | null;
+  onFeedback: (messageId: string, feedback: FeedbackValue) => void;
+  className?: string;
+}
+
+const BUTTON_BASE =
+  "inline-flex items-center justify-center size-7 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2";
+
+export const MessageFeedback = React.forwardRef<HTMLDivElement, MessageFeedbackProps>(
+  function MessageFeedback({ messageId, feedback, onFeedback, className }, ref) {
+    return (
+      <div ref={ref} className={cn("flex items-center gap-1", className)}>
+        <button
+          type="button"
+          onClick={() => onFeedback(messageId, "positive")}
+          className={cn(
+            BUTTON_BASE,
+            feedback === "positive"
+              ? "text-emerald-500 bg-emerald-500/10"
+              : "text-[var(--input-placeholder)] hover:text-emerald-500 hover:bg-[var(--accent)]",
+          )}
+          title="Helpful"
+        >
+          <svg
+            className="size-3.5"
+            viewBox="0 0 24 24"
+            fill={feedback === "positive" ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M7 10v12" />
+            <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          onClick={() => onFeedback(messageId, "negative")}
+          className={cn(
+            BUTTON_BASE,
+            feedback === "negative"
+              ? "text-red-500 bg-red-500/10"
+              : "text-[var(--input-placeholder)] hover:text-[var(--destructive)] hover:bg-[var(--accent)]",
+          )}
+          title="Not helpful"
+        >
+          <svg
+            className="size-3.5"
+            viewBox="0 0 24 24"
+            fill={feedback === "negative" ? "currentColor" : "none"}
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M17 14V2" />
+            <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" />
+          </svg>
+        </button>
+      </div>
+    );
+  },
+);
+MessageFeedback.displayName = "MessageFeedback";

package/src/src/react/components/ai/chat/components/quick-actions.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface QuickAction {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  prompt?: string;
+}
+
+export interface QuickActionsProps {
+  actions?: QuickAction[];
+  onActionClick?: (action: QuickAction) => void;
+  className?: string;
+}
+
+export function QuickActions({
+  actions,
+  onActionClick,
+  className,
+}: QuickActionsProps): React.ReactElement | null {
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <div className={cn("flex flex-wrap gap-2", className)}>
+      {actions.map((action) => (
+        <button
+          key={action.id}
+          type="button"
+          onClick={() => onActionClick?.(action)}
+          className="rounded-full border border-[var(--border)] px-4 py-2 text-sm text-[var(--muted-foreground)] transition-colors hover:bg-[var(--foreground)]/[0.03] hover:text-[var(--foreground)] hover:border-[var(--input-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+        >
+          {action.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/reasoning.tsx

@@ -5,47 +5,52 @@ import { Markdown } from "../../markdown.js";
 import { BrainIcon, ChevronDownIcon } from "../../icons/index.js";
 import { Shimmer } from "./animations.js";
 
-type ReasoningCardProps = {
+export type ReasoningCardProps = {
   text: string;
   isStreaming?: boolean;
+  className?: string;
 };
 
-export function ReasoningCard({
-  text,
-  isStreaming = false,
-}: ReasoningCardProps): React.JSX.Element {
-  const [isOpen, setIsOpen] = React.useState(true);
+export const ReasoningCard = React.forwardRef<HTMLDivElement, ReasoningCardProps>(
+  function ReasoningCard({ text, isStreaming = false, className }, ref) {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const userToggledRef = React.useRef(false);
 
-  React.useEffect(() => {
-    if (isStreaming || !isOpen) return;
+    React.useEffect(() => {
+      if (isStreaming || !isOpen || userToggledRef.current) return;
 
-    const timer = dntShim.setTimeout(() => setIsOpen(false), 1000);
-    return () => clearTimeout(timer);
-  }, [isStreaming, isOpen]);
+      const timer = dntShim.setTimeout(() => setIsOpen(false), 1000);
+      return () => clearTimeout(timer);
+    }, [isStreaming, isOpen]);
 
-  const label = isStreaming ? <Shimmer>Thinking...</Shimmer> : <span>Thought process</span>;
+    const label = isStreaming ? <Shimmer>Thinking...</Shimmer> : <span>Thought process</span>;
 
-  return (
-    <div className="not-prose mb-4">
-      <button
-        type="button"
-        onClick={() => setIsOpen((open) => !open)}
-        className="flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground"
-      >
-        <BrainIcon className="size-4" />
-        {label}
-        <ChevronDownIcon
-          className={cn("size-4 transition-transform", isOpen && "rotate-180")}
-        />
-      </button>
+    return (
+      <div ref={ref} className={cn("not-prose mb-4", className)}>
+        <button
+          type="button"
+          onClick={() => {
+            userToggledRef.current = true;
+            setIsOpen((open) => !open);
+          }}
+          className="flex w-full items-center gap-2 text-[var(--input-placeholder)] text-sm transition-colors hover:text-[var(--foreground)]"
+        >
+          <BrainIcon className="size-4" />
+          {label}
+          <ChevronDownIcon
+            className={cn("size-4 transition-transform", isOpen && "rotate-180")}
+          />
+        </button>
 
-      {isOpen
-        ? (
-          <div className="mt-4 text-sm text-muted-foreground border-l-2 border-muted pl-4 ml-2">
-            <Markdown className="text-sm">{text}</Markdown>
-          </div>
-        )
-        : null}
-    </div>
-  );
-}
+        {isOpen
+          ? (
+            <div className="mt-4 text-sm text-[var(--muted-foreground)] border-l-2 border-[var(--border)] pl-4 ml-2">
+              <Markdown className="text-sm">{text}</Markdown>
+            </div>
+          )
+          : null}
+      </div>
+    );
+  },
+);
+ReasoningCard.displayName = "ReasoningCard";

package/src/src/react/components/ai/chat/components/sidebar.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { MessageSquareIcon, PlusIcon, TrashIcon } from "../../icons/index.js";
+import type { Thread } from "../hooks/use-threads.js";
+
+export interface ChatSidebarProps {
+  threads: Thread[];
+  activeThreadId: string | null;
+  onSelectThread: (id: string) => void;
+  onDeleteThread: (id: string) => void;
+  onRenameThread?: (id: string, title: string) => void;
+  onNewThread?: () => void;
+  className?: string;
+  isOpen?: boolean;
+}
+
+function getRelativeGroup(timestamp: number): string {
+  const day = 86_400_000;
+  const diff = Date.now() - timestamp;
+
+  const todayStart = new Date();
+  todayStart.setHours(0, 0, 0, 0);
+  const yesterdayStart = new Date(todayStart.getTime() - day);
+
+  if (timestamp >= todayStart.getTime()) return "Today";
+  if (timestamp >= yesterdayStart.getTime()) return "Yesterday";
+  if (diff < 7 * day) return "Previous 7 days";
+  return "Older";
+}
+
+function groupThreads(threads: Thread[]): Map<string, Thread[]> {
+  const groups = new Map<string, Thread[]>();
+  const order = ["Today", "Yesterday", "Previous 7 days", "Older"];
+
+  for (const label of order) {
+    groups.set(label, []);
+  }
+
+  for (const thread of threads) {
+    const label = getRelativeGroup(thread.updatedAt);
+    groups.get(label)!.push(thread);
+  }
+
+  for (const [key, value] of groups) {
+    if (value.length === 0) groups.delete(key);
+  }
+
+  return groups;
+}
+
+function ThreadItem({
+  thread,
+  isActive,
+  onSelect,
+  onDelete,
+  onRename,
+}: {
+  thread: Thread;
+  isActive: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onRename?: (title: string) => void;
+}): React.ReactElement {
+  const [editing, setEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(thread.title);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  function handleDoubleClick(): void {
+    if (!onRename) return;
+    setEditValue(thread.title);
+    setEditing(true);
+  }
+
+  function commitRename(): void {
+    setEditing(false);
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== thread.title) {
+      onRename?.(trimmed);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "group/thread flex items-center gap-2.5 px-3 py-2.5 rounded-xl cursor-pointer transition-all",
+        isActive
+          ? "bg-[var(--foreground)]/[0.05] text-[var(--foreground)]"
+          : "text-[var(--muted-foreground)] hover:bg-[var(--foreground)]/[0.03] hover:text-[var(--foreground)]",
+      )}
+      onClick={!editing ? onSelect : undefined}
+      onDoubleClick={handleDoubleClick}
+    >
+      <MessageSquareIcon className="size-4 shrink-0 opacity-50" />
+      {editing
+        ? (
+          <input
+            ref={inputRef}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onBlur={commitRename}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitRename();
+              if (e.key === "Escape") setEditing(false);
+            }}
+            className="flex-1 min-w-0 bg-transparent text-sm outline-none border-b border-[var(--input-border)]"
+          />
+        )
+        : (
+          <span className="flex-1 min-w-0 truncate text-[13px] leading-snug">
+            {thread.title}
+          </span>
+        )}
+      {!editing && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          className="shrink-0 opacity-0 group-hover/thread:opacity-100 p-0.5 text-[var(--muted-foreground)] hover:text-[var(--destructive)] transition-all rounded"
+          aria-label="Delete thread"
+        >
+          <TrashIcon className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ChatSidebar({
+  threads,
+  activeThreadId,
+  onSelectThread,
+  onDeleteThread,
+  onRenameThread,
+  onNewThread,
+  className,
+  isOpen = true,
+}: ChatSidebarProps): React.ReactElement | null {
+  const visibleThreads = React.useMemo(
+    () => threads.filter((t) => t.messages.length > 0 || t.id === activeThreadId),
+    [threads, activeThreadId],
+  );
+  const grouped = React.useMemo(() => groupThreads(visibleThreads), [visibleThreads]);
+  const hasThreads = visibleThreads.length > 0;
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col h-full shrink-0 max-sm:absolute max-sm:z-20 max-sm:shadow-xl max-sm:bg-[var(--background)]",
+        className,
+      )}
+      style={{ width: 240 }}
+    >
+      {onNewThread && (
+        <div className="px-3 pt-4 pb-1">
+          <button
+            type="button"
+            onClick={onNewThread}
+            className="w-full inline-flex items-center justify-center gap-1.5 h-9 px-4 rounded-full text-sm font-medium text-[var(--foreground)] bg-[var(--card)] hover:opacity-80 transition-all"
+          >
+            <PlusIcon className="size-4" />
+            <span>New Chat</span>
+          </button>
+        </div>
+      )}
+      <div className="flex-1 overflow-y-auto px-2 pt-2 pb-3 space-y-4">
+        {hasThreads
+          ? Array.from(grouped.entries()).map(([label, items]) => (
+            <div key={label}>
+              <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-[var(--input-placeholder)]">
+                {label}
+              </div>
+              <div className="space-y-1">
+                {items.map((thread) => (
+                  <ThreadItem
+                    key={thread.id}
+                    thread={thread}
+                    isActive={thread.id === activeThreadId}
+                    onSelect={() => onSelectThread(thread.id)}
+                    onDelete={() => onDeleteThread(thread.id)}
+                    onRename={onRenameThread
+                      ? (title) => onRenameThread(thread.id, title)
+                      : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))
+          : (
+            <div className="flex flex-col items-center justify-center h-full px-4 text-center text-[var(--muted-foreground)]">
+              <p className="text-sm">No chats yet</p>
+            </div>
+          )}
+      </div>
+    </div>
+  );
+}

package/src/src/react/components/ai/chat/components/skill-badge.tsx

@@ -0,0 +1,51 @@
+/**
+ * Skill Badge — compact indicator for skill tool calls (load-skill, load-skill-reference, execute-skill-script).
+ * @module ai/react/components/chat/components/skill-badge
+ */
+
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { CheckCircleIcon, SparklesIcon, XCircleIcon } from "../../icons/index.js";
+import type { DynamicToolUIPart, ToolUIPart } from "../../../../../agent/react/index.js";
+
+export interface SkillBadgeProps {
+  tool: ToolUIPart | DynamicToolUIPart;
+  className?: string;
+}
+
+export function SkillBadge({ tool, className }: SkillBadgeProps): React.JSX.Element {
+  const input = tool.input as Record<string, unknown> | undefined;
+  const skillId = input?.skillId as string | undefined;
+  const isComplete = tool.state === "output-available";
+  const isError = tool.state === "output-error";
+
+  let label: string;
+  if (tool.toolName === "load-skill") {
+    label = isComplete
+      ? `Skill: ${skillId ?? "unknown"}`
+      : `Loading skill${skillId ? `: ${skillId}` : ""}...`;
+  } else if (tool.toolName === "load-skill-reference") {
+    const ref = input?.reference as string | undefined;
+    label = isComplete ? `Reference: ${ref ?? "unknown"}` : `Reading${ref ? `: ${ref}` : ""}...`;
+  } else {
+    const script = input?.script as string | undefined;
+    label = isComplete
+      ? `Script: ${script ?? "complete"}`
+      : `Running${script ? `: ${script}` : ""}...`;
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+        "bg-[var(--accent)] text-[var(--muted-foreground)] border border-[var(--border)]",
+        className,
+      )}
+    >
+      <SparklesIcon className={cn("size-3", !isComplete && !isError && "animate-pulse")} />
+      <span>{label}</span>
+      {isComplete && <CheckCircleIcon className="size-3 text-[var(--success)]" />}
+      {isError && <XCircleIcon className="size-3 text-[var(--destructive)]" />}
+    </span>
+  );
+}

package/src/src/react/components/ai/chat/components/sources.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+
+export interface Source {
+  title: string;
+  url?: string;
+  score?: number;
+  snippet?: string;
+}
+
+export interface SourcesProps {
+  sources: Source[];
+  className?: string;
+  onSourceClick?: (source: Source, index: number) => void;
+}
+
+export const Sources = React.forwardRef<HTMLDivElement, SourcesProps>(
+  function Sources({ sources, className, onSourceClick }, ref) {
+    if (sources.length === 0) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("mt-3 pt-3 border-t border-[var(--border)]", className)}
+      >
+        <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">Sources</p>
+        <div className="flex flex-wrap gap-1.5">
+          {sources.map((source, index) => (
+            <SourcePill
+              key={`${source.title}-${index}`}
+              source={source}
+              index={index}
+              onClick={onSourceClick ? () => onSourceClick(source, index) : undefined}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+Sources.displayName = "Sources";
+
+interface SourcePillProps {
+  source: Source;
+  index: number;
+  onClick?: () => void;
+}
+
+function SourcePill({ source, index, onClick }: SourcePillProps): React.ReactElement {
+  const [showPreview, setShowPreview] = React.useState(false);
+
+  return (
+    <span className="relative">
+      <button
+        type="button"
+        onClick={onClick}
+        onMouseEnter={() => setShowPreview(true)}
+        onMouseLeave={() => setShowPreview(false)}
+        className={cn(
+          "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-xs",
+          "bg-[var(--accent)] text-[var(--card-foreground)]",
+          "hover:bg-[var(--accent)] transition-colors",
+          onClick ? "cursor-pointer" : "cursor-default",
+        )}
+      >
+        <span className="flex items-center justify-center size-4 rounded bg-[var(--border)] text-[10px] font-medium text-[var(--card-foreground)]">
+          {index + 1}
+        </span>
+        <span className="truncate max-w-[160px]">{source.title}</span>
+        {source.score != null && (
+          <span className="flex items-center gap-1 shrink-0 ml-0.5">
+            <span
+              className={cn(
+                "size-1.5 rounded-full",
+                source.score >= 0.7
+                  ? "bg-emerald-500"
+                  : source.score >= 0.4
+                  ? "bg-amber-500"
+                  : "bg-neutral-400",
+              )}
+            />
+          </span>
+        )}
+      </button>
+
+      {/* Hover preview */}
+      {showPreview && source.snippet && (
+        <div className="absolute bottom-full left-0 mb-2 z-50 w-60 pointer-events-none">
+          <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-lg p-2.5 text-left">
+            <p className="text-xs text-[var(--card-foreground)] line-clamp-3 leading-relaxed">
+              {source.snippet.slice(0, 150)}
+              {source.snippet.length > 150 ? "..." : ""}
+            </p>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+}

package/src/src/react/components/ai/chat/components/step-indicator.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { cn } from "../../theme.js";
+import { CheckCircleIcon } from "../../icons/index.js";
+
+export interface StepIndicatorProps {
+  stepIndex: number;
+  isComplete: boolean;
+  className?: string;
+}
+
+export function StepIndicator({
+  stepIndex,
+  isComplete,
+  className,
+}: StepIndicatorProps): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 py-3 text-xs text-[var(--muted-foreground)]",
+        className,
+      )}
+    >
+      <div className="flex-1 h-px bg-[var(--border)]" />
+      <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-[var(--border)] bg-[var(--accent)]">
+        {isComplete
+          ? <CheckCircleIcon className="size-3.5 text-[var(--success)]" />
+          : <span className="size-2 rounded-full bg-[var(--muted-foreground)] animate-pulse" />}
+        <span className="font-medium">Step {stepIndex + 1}</span>
+      </div>
+      <div className="flex-1 h-px bg-[var(--border)]" />
+    </div>
+  );
+}