Ai Branch

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { ChevronLeftIcon, ChevronRightIcon, Copy, Pencil } from "lucide-react";
5import { motion, useReducedMotion } from "motion/react";
6import type { HTMLAttributes, ReactElement, ReactNode } from "react";
7import { createContext, useContext, useEffect, useMemo, useState } from "react";
8 
9interface AIBranchContextType {
10  branches: ReactElement[];
11  currentBranch: number;
12  goToNext: () => void;
13  goToPrevious: () => void;
14  setBranches: (branches: ReactElement[]) => void;
15  totalBranches: number;
16}
17 
18/**
19 * The same two springs every other AI component uses.
20 *
21 * This file predates that vocabulary and had eight hand-tuned
22 * `stiffness`/`damping` pairs — several of which also passed `duration`, which
23 * Motion ignores once stiffness is present. Sharing the tokens is what stops
24 * `ai-branch` feeling like it came from a different library than `ai-message`.
25 */
26const SPRING_DEFAULT = {
27  bounce: 0.1,
28  duration: 0.25,
29  type: "spring" as const,
30};
31const SPRING_SNAPPY = {
32  bounce: 0,
33  duration: 0.2,
34  type: "spring" as const,
35};
36 
37const AIBranchContext = createContext<AIBranchContextType | null>(null);
38 
39const useAIBranch = () => {
40  const context = useContext(AIBranchContext);
41  if (!context) {
42    throw new Error("AIBranch components must be used within AIBranch");
43  }
44  return context;
45};
46 
47export type AIBranchProps = HTMLAttributes<HTMLDivElement> & {
48  defaultBranch?: number;
49  onBranchChange?: (branchIndex: number) => void;
50};
51 
52export const AIBranch = ({
53  defaultBranch = 0,
54  onBranchChange,
55  className,
56  ...props
57}: AIBranchProps) => {
58  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
59  const [branches, setBranches] = useState<ReactElement[]>([]);
60 
61  const handleBranchChange = (newBranch: number) => {
62    setCurrentBranch(newBranch);
63    onBranchChange?.(newBranch);
64  };
65 
66  const goToPrevious = () => {
67    const newBranch =
68      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
69    handleBranchChange(newBranch);
70  };
71 
72  const goToNext = () => {
73    const newBranch =
74      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
75    handleBranchChange(newBranch);
76  };
77 
78  const contextValue: AIBranchContextType = {
79    branches,
80    currentBranch,
81    goToNext,
82    goToPrevious,
83    setBranches,
84    totalBranches: branches.length,
85  };
86 
87  return (
88    <AIBranchContext.Provider value={contextValue}>
89      <div
90// … truncated