components/chat/ChatPanel.tsx

import * as React from 'react';
import { type UseChatHelpers } from 'ai/react';

import { Button } from '@/components/ui/Button';
import { PromptForm } from '@/components/chat/PromptForm';
import { ButtonScrollToBottom } from '@/components/chat/ButtonScrollToBottom';
import { IconRefresh, IconShare, IconStop } from '@/components/ui/Icons';
import { MessageWithSelectedDataset } from '../../lib/types';

export interface ChatPanelProps
	extends Pick<
		UseChatHelpers,
		'append' | 'isLoading' | 'reload' | 'stop' | 'input' | 'setInput'
	> {
	id?: string;
	title?: string;
	messages: MessageWithSelectedDataset[];
}

export function ChatPanel({
	id,
	title,
	isLoading,
	stop,
	append,
	reload,
	input,
	setInput,
	messages,
}: ChatPanelProps) {
	const [shareDialogOpen, setShareDialogOpen] = React.useState(false);

	return (
		<div className="fixed inset-x-0 bottom-0 w-full animate-in duration-300 ease-in-out peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
			<ButtonScrollToBottom />
			<div className="mx-auto sm:max-w-3xl sm:px-4">
				<div className="flex items-center justify-center h-12">
					{isLoading ? (
						<Button
							variant="outline"
							onClick={() => stop()}
							className="bg-background"
						>
							<IconStop className="mr-2" />
							Stop generating
						</Button>
					) : (
						messages?.length >= 2 && (
							<div className="flex space-x-2">
								<Button variant="outline" onClick={() => reload()}>
									<IconRefresh className="mr-2" />
									Regenerate response
								</Button>
							</div>
						)
					)}
				</div>
				<div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
					<PromptForm
						onSubmit={async value => {
							await append({
								id,
								content: value,
								role: 'user',
							});
						}}
						input={input}
						setInput={setInput}
						isLoading={isLoading}
					/>
				</div>
			</div>
		</div>
	);
}