ai-conversation

1'use client';
2 
3import { Button } from '@repo/shadcn-ui/components/ui/button';
4import { ArrowDown } from 'lucide-react';
5import type { ComponentProps } from 'react';
6import { useCallback } from 'react';
7import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
8import { cn } from '@repo/shadcn-ui/lib/utils';
9 
10export type AIConversationProps = ComponentProps<typeof StickToBottom>;
11 
12export const AIConversation = ({
13  className,
14  ...props
15}: AIConversationProps) => (
16  <StickToBottom
17    className={cn('relative flex-1 overflow-y-auto', className)}
18    initial="smooth"
19    resize="smooth"
20    role="log"
21    {...props}
22  />
23);
24 
25export type AIConversationContentProps = ComponentProps<
26  typeof StickToBottom.Content
27>;
28 
29export const AIConversationContent = ({
30  className,
31  ...props
32}: AIConversationContentProps) => (
33  <StickToBottom.Content className={cn('p-4', className)} {...props} />
34);
35 
36export const AIConversationScrollButton = () => {
37  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
38 
39  const handleScrollToBottom = useCallback(() => {
40    scrollToBottom();
41  }, [scrollToBottom]);
42 
43  return (
44    !isAtBottom && (
45      <Button
46        className="absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full"
47        onClick={handleScrollToBottom}
48        size="icon"
49        type="button"
50        variant="outline"
51      >
52        <ArrowDown className="size-4" />
53      </Button>
54    )
55  );
56};