Function ChatAdvanced

examples/nextjs/components/chat-advanced.tsx:8–152

()

import React, { useCallback } from 'react';

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

	const handleFinish = useCallback(
		(messages: Message[]) => {
			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' },