Function ChatAdvancedExample

examples/astro/src/components/chat-advanced.tsx:6–151

()

import {usePipe} from '@baseai/core/react';

const ChatAdvancedExample: React.FC = () => {
	const handleResponse = useCallback(
		(message: {role: string; content: string}) => {
			console.log(
				'Received response:',
				message.content.slice(0, 50) + '...',
			);
		},
		[],
	);

	const handleFinish = useCallback(
		(messages: {role: string; content: string}[]) => {
			console.log(
				`Conversation finished. Total messages: ${messages.length}`,
			);
		},
		[],
	);

	const handleError = useCallback((error: Error) => {
		console.error('An error occurred:', error);
	}, []);

	const {
		messages,
		input,
		handleInputChange,
		handleSubmit,
		isLoading,
		error,
		regenerate,
		stop,
		setMessages,
		threadId,
		sendMessage,
	} = usePipe({
		stream: true,
		apiRoute: '/api/langbase/pipes/run-stream',
		onResponse: handleResponse,
		onFinish: handleFinish,
		onError: handleError,
		// initialMessages: [
		// 	{role: 'assistant', content: 'Hello! How can I help you?'},
		// 	{role: 'user', content: 'Who is an AI engineer?'},
		// ], // You can set initial messages here if needed
		// You can set a threadId here if needed to change the thread manually,
		// otherwise it will be generated automatically persistented in the browser.
		// threadId: '',
	});

	const handleClearChat = () => {
		setMessages([]);
	};

	const handleRegenerateWithOptions = () => {
		regenerate({
			headers: {'Custom-Header': 'Regenerate'},