feat: refactor chat components and utilities

- Moved `getSuggestionsForAgent` from `agent-suggestions` to `chat.utils` for better organization.
- Created new types in `chat.types.ts` to improve type safety and clarity in chat components.
- Added utility functions in `chat.utils.ts` for extracting plans from text and tokenizing inline citations.
- Updated `chat-input.tsx` to use the new utility functions and types.
- Refactored `chat-messages.tsx` to improve readability and maintainability, including better handling of message statuses and stages.
- Enhanced `MessageItem` component to display additional information about message stages and IDs.
- Improved citation handling in `MessageItem` using the new tokenization utility.

fix: update network components for better state management
- Refactored `NetworkToolDisplay` to handle dynamic tools more effectively, ensuring correct input and output handling.
- Updated `NetworkMessageParts` to correctly manage tool invocation states and improve error handling.
- Simplified `NetworkProvider` to normalize progress event statuses and improve overall state management.

chore: clean up unused variables and improve code quality
- Removed unused variables and simplified conditions across various components.
- Added missing type annotations and improved type safety in several places.
- Cleaned up eslint warnings by disabling specific rules where necessary.

style: general code formatting and organization
- Improved code formatting for better readability and consistency across files.
- Organized imports and grouped related code sections for clarity.

Author: ssdeanx

app/chat/components/agent-artifact.tsx

@@ -30,18 +30,12 @@ import { useState, useCallback } from "react"
 import type { BundledLanguage } from "shiki"
 import { AgentCodeSandbox } from "./agent-web-preview"
 
-export interface ArtifactData {
-  id: string
-  title: string
-  description?: string
-  type: "code" | "markdown" | "json" | "text" | "html" | "react"
-  language?: string
-  content: string
-}
+import type { ArtifactData } from "./chat.types"
 
-export interface AgentArtifactProps {
+interface AgentArtifactProps {
   artifact: ArtifactData
   onClose?: () => void
+  // eslint-disable-next-line no-unused-vars
   onCodeUpdate?: (artifactId: string, newCode: string) => void
 }
 
@@ -76,7 +70,7 @@ export function AgentArtifact({
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch (err) {
-      console.error("Failed to copy:", err)
+      void err
     }
   }, [editedCode])
 
@@ -240,6 +234,7 @@ export function AgentArtifactCompact({
 // Floating action button for quick access to editor
 interface ArtifactEditorFABProps {
   artifact: ArtifactData
+  // eslint-disable-next-line no-unused-vars
   onCodeChange?: (newCode: string) => void
 }
 

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

@@ -11,15 +11,7 @@ import {
 } from "@/src/components/ai-elements/chain-of-thought"
 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
-}
+import type { ReasoningStep } from "./chat.types"
 
 interface AgentChainOfThoughtProps {
   steps: ReasoningStep[]
@@ -89,62 +81,3 @@ export function AgentChainOfThought({
     </ChainOfThought>
   )
 }
-
-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()
-
-    // 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: 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, 15)
-}

app/chat/components/agent-confirmation.tsx

@@ -19,18 +19,19 @@ import {
   InfoIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
-
-export type ConfirmationSeverity = "info" | "warning" | "danger"
+import type { ConfirmationSeverity } from "./chat.types"
 
 interface AgentConfirmationProps {
   toolName: string
   description: string
   approval: ConfirmationProps["approval"]
   state: ToolUIPart["state"]
-  onApprove: (approvalId: string) => void
-  onReject: (approvalId: string) => void
   severity?: ConfirmationSeverity
   className?: string
+  // eslint-disable-next-line no-unused-vars
+  onApprove(approvalId: string): void
+  // eslint-disable-next-line no-unused-vars
+  onReject(approvalId: string): void
 }
 
 const severityConfig: Record<ConfirmationSeverity, {

app/chat/components/agent-inline-citation.tsx

@@ -16,16 +16,7 @@ import {
   InlineCitationSource,
   InlineCitationQuote,
 } from "@/src/components/ai-elements/inline-citation"
-import type { ReactNode } from "react"
-
-export interface Citation {
-  id: string
-  number: string
-  title: string
-  url: string
-  description?: string
-  quote?: string
-}
+import type { Citation } from "./chat.types"
 
 interface AgentInlineCitationProps {
   citations: Citation[]
@@ -68,52 +59,3 @@ export function AgentInlineCitation({ citations, text }: AgentInlineCitationProp
     </InlineCitation>
   )
 }
-
-export function parseInlineCitations(
-  content: string,
-  sources: Array<{ url: string; title: string }>
-): ReactNode[] {
-  if (!sources.length) {return [content]}
-
-  const parts: ReactNode[] = []
-  const citationRegex = /\[(\d+)\]/g
-  let lastIndex = 0
-  let match
-
-  while ((match = citationRegex.exec(content)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push(content.slice(lastIndex, match.index))
-    }
-
-    const citationNumber = match[1]
-    const sourceIndex = parseInt(citationNumber, 10) - 1
-    const source = sources[sourceIndex]
-
-    if (source) {
-      parts.push(
-        <AgentInlineCitation
-          key={`citation-${match.index}`}
-          text={match[0]}
-          citations={[
-            {
-              id: `cite-${sourceIndex}`,
-              number: citationNumber,
-              title: source.title,
-              url: source.url,
-            },
-          ]}
-        />
-      )
-    } else {
-      parts.push(match[0])
-    }
-
-    lastIndex = match.index + match[0].length
-  }
-
-  if (lastIndex < content.length) {
-    parts.push(content.slice(lastIndex))
-  }
-
-  return parts.length ? parts : [content]
-}

app/chat/components/agent-plan.tsx

@@ -15,18 +15,7 @@ import { Button } from "@/ui/button"
 import { PlayIcon, XIcon, CheckIcon, CircleIcon } from "lucide-react"
 import { useMemo } from "react"
 
-export interface PlanStep {
-  text: string
-  completed?: boolean
-}
-
-export interface AgentPlanData {
-  title: string
-  description: string
-  steps: PlanStep[] | string[]
-  isStreaming?: boolean
-  currentStep?: number
-}
+import type { AgentPlanData, PlanStep } from "./chat.types"
 
 interface AgentPlanProps {
   plan: AgentPlanData
@@ -126,33 +115,3 @@ export function AgentPlan({
     </Plan>
   )
 }
-
-export function extractPlanFromText(text: string): AgentPlanData | null {
-  const planPatterns = [
-    /(?:plan|steps|approach|strategy|roadmap|outline)[:\s]*\n((?:[-•\d].+\n?)+)/i,
-    /(?:here's|here is|my|the) (?:plan|approach|strategy)[:\s]*\n((?:[-•\d].+\n?)+)/i,
-    /(?:i will|let me|first,)[:\s]*((?:[-•\d].+\n?)+)/i,
-  ]
-
-  for (const pattern of planPatterns) {
-    const match = pattern.exec(text)
-    if (match) {
-      const stepsText = match[1]
-      const steps = stepsText
-        .split("\n")
-        .map((line) => line.replace(/^[-•\d.]+\s*/, "").trim())
-        .filter((line) => line.length > 0)
-
-      if (steps.length >= 2) {
-        return {
-          title: "Execution Plan",
-          description: `${steps.length} steps to complete this task`,
-          steps: steps.map((stepText) => ({ text: stepText, completed: false })),
-          isStreaming: false,
-        }
-      }
-    }
-  }
-
-  return null
-}

app/chat/components/agent-queue.tsx

@@ -27,15 +27,7 @@ import {
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-export interface QueuedTask {
-  id: string
-  title: string
-  description?: string
-  status: "pending" | "running" | "completed" | "failed"
-  createdAt?: Date
-  completedAt?: Date
-  error?: string
-}
+import type { QueuedTask } from "./chat.types"
 
 interface AgentQueueProps {
   tasks: QueuedTask[]

app/chat/components/agent-reasoning.tsx

@@ -6,12 +6,7 @@ import {
   ReasoningContent,
 } from "@/src/components/ai-elements/reasoning"
 
-export interface AgentReasoningProps {
-  reasoning: string
-  isStreaming: boolean
-  duration?: number
-  className?: string
-}
+import type { AgentReasoningProps } from "./chat.types"
 
 export function AgentReasoning({
   reasoning,

app/chat/components/agent-sources.tsx

@@ -9,12 +9,7 @@ import {
 import type { Source as SourceType } from "@/app/chat/providers/chat-context"
 import { ExternalLinkIcon } from "lucide-react"
 import { useMemo } from "react"
-
-export interface AgentSourcesProps {
-  sources: SourceType[]
-  className?: string
-  maxVisible?: number
-}
+import type { AgentSourcesProps } from "./chat.types"
 
 function getDomain(url: string): string {
   try {