Ai Conversation

Renders a scrollable container for a conversation thread. It follows the bottom only when the user is already there, showing a button to jump to the latest message when it stops. Use it for chat interfaces where users need to read without being auto-scrolled.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-conversation

npx layro-cli add @educlopez/ai-conversation

npx layro-cli add @educlopez/ai-conversation

bunx layro-cli add @educlopez/ai-conversation

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { ArrowDown } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  type ReactNode,
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";