Merge pull request #25 from ssdeanx/develop

Develop

Author: ssdeanx

app/chat/components/agent-artifact.tsx

@@ -55,6 +55,8 @@ const PREVIEWABLE_LANGUAGES = [
   "react",
 ]
 
+const normalizeLanguage = (lang?: string): string => lang?.toLowerCase() ?? ""
+
 export function AgentArtifact({
   artifact,
   onClose,
@@ -66,7 +68,7 @@ export function AgentArtifact({
 
   const isPreviewable =
     artifact.type === "code" &&
-    PREVIEWABLE_LANGUAGES.includes(artifact.language?.toLowerCase() || "")
+    PREVIEWABLE_LANGUAGES.includes(normalizeLanguage(artifact.language))
 
   const handleCopy = useCallback(async () => {
     try {

app/chat/components/agent-chain-of-thought.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useMemo } from "react"
 import {
   ChainOfThought,
   ChainOfThoughtHeader,
@@ -8,33 +9,48 @@ import {
   ChainOfThoughtSearchResults,
   ChainOfThoughtSearchResult,
 } from "@/src/components/ai-elements/chain-of-thought"
-import { SearchIcon, BrainIcon, CheckIcon, LoaderIcon } from "lucide-react"
+import { Badge } from "@/ui/badge"
+import { SearchIcon, BrainIcon, CheckIcon, LoaderIcon, ClockIcon } from "lucide-react"
 
 export interface ReasoningStep {
   id: string
   label: string
   description?: string
   status: "complete" | "active" | "pending"
   searchResults?: string[]
+  duration?: number
 }
 
 interface AgentChainOfThoughtProps {
   steps: ReasoningStep[]
   isStreaming?: boolean
   defaultOpen?: boolean
+  className?: string
 }
 
 export function AgentChainOfThought({
   steps,
   isStreaming = false,
   defaultOpen = true,
+  className,
 }: AgentChainOfThoughtProps) {
   if (!steps || steps.length === 0) {return null}
 
+  const completedCount = useMemo(() => steps.filter((s) => s.status === "complete").length, [steps])
+  const activeStep = useMemo(() => steps.find((s) => s.status === "active"), [steps])
+
   return (
-    <ChainOfThought defaultOpen={defaultOpen}>
-      <ChainOfThoughtHeader>
-        {isStreaming ? "Thinking..." : "Chain of Thought"}
+    <ChainOfThought defaultOpen={defaultOpen} className={className}>
+      <ChainOfThoughtHeader className="flex items-center gap-2">
+        <span className="flex-1">
+          {isStreaming
+            ? activeStep?.label ?? "Thinking..."
+            : "Chain of Thought"
+          }
+        </span>
+        <Badge variant="secondary" className="text-xs font-normal">
+          {completedCount}/{steps.length}
+        </Badge>
       </ChainOfThoughtHeader>
       <ChainOfThoughtContent>
         {steps.map((step) => (
@@ -51,6 +67,12 @@ export function AgentChainOfThought({
             description={step.description}
             status={step.status}
           >
+            {step.duration && step.status === "complete" && (
+              <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                <ClockIcon className="size-3" />
+                {step.duration}s
+              </span>
+            )}
             {step.searchResults && step.searchResults.length > 0 && (
               <ChainOfThoughtSearchResults>
                 {step.searchResults.map((result, i) => (
@@ -68,29 +90,61 @@ export function AgentChainOfThought({
   )
 }
 
+type StepType = "step" | "search" | "analysis" | "decision"
+
+function categorizeStep(text: string): StepType {
+  const lower = text.toLowerCase()
+  if (lower.includes("search") || lower.includes("looking for") || lower.includes("finding")) {
+    return "search"
+  }
+  if (lower.includes("analyzing") || lower.includes("examining") || lower.includes("reviewing")) {
+    return "analysis"
+  }
+  if (lower.includes("decided") || lower.includes("conclusion") || lower.includes("therefore")) {
+    return "decision"
+  }
+  return "step"
+}
+
 export function parseReasoningToSteps(reasoning: string): ReasoningStep[] {
   if (!reasoning) {return []}
 
   const lines = reasoning.split("\n").filter((line) => line.trim())
   const steps: ReasoningStep[] = []
+  let currentSearchTerms: string[] = []
 
   lines.forEach((line, index) => {
     const trimmed = line.trim()
-    if (trimmed.startsWith("-") || trimmed.startsWith("•") || (/^\d+\./.exec(trimmed))) {
-      steps.push({
-        id: `step-${index}`,
-        label: trimmed.replace(/^[-•\d.]+\s*/, ""),
-        status: "complete",
-      })
-    } else if (trimmed.length > 10) {
+
+    // Skip very short lines
+    if (trimmed.length < 5) {return}
+
+    // Check for bullet points or numbered lists
+    const isBullet = trimmed.startsWith("-") || trimmed.startsWith("•") || /^\d+\./.test(trimmed)
+    const content = isBullet
+      ? trimmed.replace(/^[-•\d.]+\s*/, "")
+      : trimmed
+
+    // Extract search terms if mentioned
+    const searchMatch = /(?:search|looking for|finding)[:\s]+["']?([^"'\n]+)["']?/i.exec(content)
+    if (searchMatch) {
+      currentSearchTerms.push(searchMatch[1].trim())
+    }
+
+    if (content.length > 10) {
+      const stepType = categorizeStep(content)
       steps.push({
         id: `step-${index}`,
-        label: trimmed.slice(0, 80) + (trimmed.length > 80 ? "..." : ""),
-        description: trimmed.length > 80 ? trimmed : undefined,
+        label: content.length > 80 ? content.slice(0, 77) + "..." : content,
+        description: content.length > 80 ? content : undefined,
         status: "complete",
+        searchResults: stepType === "search" ? [...currentSearchTerms] : undefined,
       })
+
+      // Reset after each step to prevent accumulation
+      currentSearchTerms = []
     }
   })
 
-  return steps.slice(0, 10)
+  return steps.slice(0, 15)
 }

app/chat/components/agent-checkpoint.tsx

@@ -1,41 +1,104 @@
 "use client"
 
+import React from "react"
 import {
   Checkpoint,
   CheckpointIcon,
   CheckpointTrigger,
 } from "@/src/components/ai-elements/checkpoint"
-import { BookmarkIcon, RotateCcwIcon } from "lucide-react"
+import { Badge } from "@/ui/badge"
+import {
+  BookmarkIcon,
+  RotateCcwIcon,
+  MessageSquareIcon,
+  ClockIcon,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
 
+/**
+ * Props for the AgentCheckpoint component.
+ * @param messageIndex - The index of the message.
+ * @param timestamp - The timestamp of the checkpoint. Can be a Date object or a valid ISO string. Assumed to be in local timezone.
+ * @param label - Optional label for the checkpoint.
+ * @param messageCount - Number of messages included in this checkpoint. If 0, shows 0; if undefined, not shown.
+ * @param onRestore - Callback to restore to this checkpoint.
+ * @param className - Optional CSS class.
+ */
 interface AgentCheckpointProps {
   messageIndex: number
-  timestamp?: Date
+  timestamp?: Date | string
   label?: string
+  messageCount?: number
   onRestore: () => void
+  className?: string
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+}
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+
+  if (diffMins < 1) {return "just now"}
+  if (diffMins < 60) {return `${diffMins}m ago`}
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) {return `${diffHours}h ago`}
+  return formatTime(date)
 }
 
 export function AgentCheckpoint({
   messageIndex,
   timestamp,
   label,
+  messageCount,
   onRestore,
+  className,
 }: AgentCheckpointProps) {
-  const displayLabel = label ?? (timestamp
-      ? `Restore to ${timestamp.toLocaleTimeString()}`
-      : "Restore checkpoint")
+  const date = timestamp ? (typeof timestamp === 'string' ? new Date(timestamp) : timestamp) : undefined
+  const displayLabel = label ?? (date
+    ? `Checkpoint at ${formatTime(date)}`
+    : `Checkpoint ${messageIndex + 1}`)
 
   return (
-    <Checkpoint>
+    <Checkpoint className={cn("group", className)}>
       <CheckpointIcon>
-        <BookmarkIcon className="size-4 shrink-0 text-primary" />
+        <div className="relative">
+          <BookmarkIcon className="size-4 shrink-0 text-primary" aria-hidden="true" />
+          <span className="absolute -top-1 -right-1 size-2 bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
       </CheckpointIcon>
+
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <span className="text-xs text-muted-foreground truncate">
+          {displayLabel}
+        </span>
+
+        {messageCount !== undefined && (
+          <Badge variant="secondary" className="text-xs gap-1 shrink-0">
+            <MessageSquareIcon className="size-3" aria-hidden="true" />
+            {messageCount}
+          </Badge>
+        )}
+
+        {date && (
+          <span className="text-xs text-muted-foreground/60 hidden sm:flex items-center gap-1 shrink-0">
+            <ClockIcon className="size-3" aria-hidden="true" />
+            {formatRelativeTime(date)}
+          </span>
+        )}
+      </div>
+
       <CheckpointTrigger
         onClick={onRestore}
-        tooltip={displayLabel}
-        className="gap-1"
+        tooltip={`Restore to ${displayLabel}`}
+        aria-label={`Restore to ${displayLabel}`}
+        className="gap-1.5 opacity-60 hover:opacity-100 transition-opacity"
       >
-        <RotateCcwIcon className="size-3" />
-        <span className="text-xs">Restore</span>
+        <RotateCcwIcon className="size-3" aria-hidden="true" />
+        <span className="text-xs hidden sm:inline">Restore</span>
       </CheckpointTrigger>
     </Checkpoint>
   )